From 0907e071b59bcf3b5ef9ff0339b271186854b00a Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Fri, 12 Jun 2026 16:39:40 +0530
Subject: [PATCH] fix: show date fields in report snapshots using native date
 inputs

---
 src/ReportSnapshots.tsx | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/ReportSnapshots.tsx b/src/ReportSnapshots.tsx
index ca9e433..e0a8944 100644
--- a/src/ReportSnapshots.tsx
+++ b/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";
@@ -131,28 +132,30 @@ export default function ReportSnapshots() {
             />
           )}
 
-          <Box sx={{ display: "flex", gap: 2 }}>
-            {startDateField && components?.date && (
+            <Box sx={{ display: "flex", gap: 2 }}>
               <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>
 
           <Box sx={{ display: "flex", gap: 2 }}>
             {minAmountField && components?.FormField && (