fix: show date fields in report snapshots using native date inputs

src/ReportSnapshots.tsx

@@ -15,6 +15,7 @@ import {
   DialogContentText,
   DialogActions,
   Chip,
+  TextField,
 } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import AddCircleIcon from "@mui/icons-material/AddCircle";
@@ -132,26 +133,28 @@ export default function ReportSnapshots() {
           )}
 
             <Box sx={{ display: "flex", gap: 2 }}>
-            {startDateField && components?.date && (
               <Box sx={{ flex: 1 }}>
-                <components.date
-                  name="start_date"
-                  field={startDateField}
+                <TextField
+                  label="Start Date"
+                  type="date"
                   value={startDate}
-                  onChange={(val: string) => setStartDate(val)}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setStartDate(e.target.value)}
+                  size="small"
+                  InputLabelProps={{ shrink: true }}
+                  inputProps={{ max: new Date().toISOString().split("T")[0] }}
                 />
               </Box>
-            )}
-            {endDateField && components?.date && (
               <Box sx={{ flex: 1 }}>
-                <components.date
-                  name="end_date"
-                  field={endDateField}
+                <TextField
+                  label="End Date"
+                  type="date"
                   value={endDate}
-                  onChange={(val: string) => setEndDate(val)}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEndDate(e.target.value)}
+                  size="small"
+                  InputLabelProps={{ shrink: true }}
+                  inputProps={{ max: new Date().toISOString().split("T")[0] }}
                 />
               </Box>
-            )}
             </Box>
 
           <Box sx={{ display: "flex", gap: 2 }}>