Solve bug in picking date in product list view

src/shared/components/custom-date-range-picker/custom-date-range-picker.tsx

@@ -2,7 +2,6 @@ import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import FormHelperText from '@mui/material/FormHelperText';
@@ -12,26 +11,32 @@ import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
 import { useResponsive } from '@/hooks';
 
 import { DateRangePickerProps } from './types';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 // ----------------------------------------------------------------------
 
 export default function CustomDateRangePicker({
   variant = 'calendar',
-  //
   startDate,
   endDate,
-  //
   onChangeStartDate,
   onChangeEndDate,
-  //
   open,
   onClose,
 }: DateRangePickerProps) {
+
   const mdUp = useResponsive('up', 'md');
   const [localStartDate, setLocalStartDate] = useState(startDate);
-  const [localEndDate, setLocalEndDate] = useState(startDate);
+  const [localEndDate, setLocalEndDate] = useState(endDate);
   const [error, setError] = useState(false);
+  
+  useEffect(() => {
+    if (open) {
+      setLocalStartDate(startDate);
+      setLocalEndDate(endDate);
+      setError(false);
+    }
+  }, [open, startDate, endDate]);
 
   function handleChangeLocalStartDate(date: Date | null) {
     if (date && localEndDate && date > localEndDate) {
@@ -57,7 +62,6 @@ export default function CustomDateRangePicker({
     onClose();
   }
 
-
   const isCalendarView = variant === 'calendar';
 
   return (
@@ -140,4 +144,4 @@ export default function CustomDateRangePicker({
       </DialogActions>
     </Dialog>
   );
-}
+}
\ No newline at end of file

src/shared/sections/product/all-products/product-table-toolbar.tsx

@@ -11,6 +11,12 @@ import { IProductTableFilters, IProductTableFilterValue } from "@/shared/types/p
 import { Button, TextField } from "@mui/material";
 import CustomDateRangePicker from "@/shared/components/custom-date-range-picker";
 
+
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+
+
 type Props = {
   filters: IProductTableFilters;
   onFilters: (name: string, value: IProductTableFilterValue) => void;
@@ -125,32 +131,64 @@ export default function ProductTableToolbar({
     [onFilters, priceMin]
   );
 
-  
-
   const [isDateRangeOpen, setIsDateRangeOpen] = useState(false);
-  
 
   const formatDateForBackend = (date: Date | null): string | null => {
     if (!date) return null;
     
-    return date.toISOString()
-      .replace(/\.\d{3}Z$/, '');
+    // Format for Spring backend @DateTimeFormat annotation
+    // Use date string format that matches what Spring expects
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    
+    // For start date: beginning of day
+    if (date.getHours() === 0) {
+      return `${year}-${month}-${day}T00:00:00`;
+    }
+    else {
+      return `${year}-${month}-${day}T23:59:59`;
+    }
   };
-  
+
   const onChangeStartDate = (newStartDate: Date | null) => {
     if (newStartDate) {
-      const formattedDate = formatDateForBackend(newStartDate);
+      // Create a new date at midnight local time to avoid timezone offset issues
+      const startOfDay = new Date(
+        newStartDate.getFullYear(),
+        newStartDate.getMonth(),
+        newStartDate.getDate(),
+        0, 0, 0, 0
+      );
+      
+      const formattedDate = formatDateForBackend(startOfDay);
       onFilters("startDate", formattedDate);
+    } else {
+      onFilters("startDate", null);
     }
   };
-  
+
   const onChangeEndDate = (newEndDate: Date | null) => {
     if (newEndDate) {
-      const formattedDate = formatDateForBackend(newEndDate);
+      const endOfDay = new Date(
+        newEndDate.getFullYear(),
+        newEndDate.getMonth(),
+        newEndDate.getDate(),
+        23, 59, 59, 999
+      );
+      const formattedDate = formatDateForBackend(endOfDay);
       onFilters("endDate", formattedDate);
+    } else {
+      onFilters("endDate", null);
     }
   };
-  
+
+  const formatDateForDisplay = (dateString: string | null): string => {
+    if (!dateString) return '';
+    const date = new Date(dateString);
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+  };
+    
   const closeDateRange = () => {
     setIsDateRangeOpen(!isDateRangeOpen);
   }
@@ -289,7 +327,9 @@ export default function ProductTableToolbar({
         }
         onClick={() => setIsDateRangeOpen(true)}
       >
-        {filters.startDate?.split("T")[0]} {filters.endDate != null && filters.startDate != null && " / "} {filters.endDate?.split("T")[0]}
+        {formatDateForDisplay(filters.startDate)}
+        {filters.endDate && filters.startDate && " / "}
+        {formatDateForDisplay(filters.endDate)}
       </Button>
       <CustomPopover
         open={popover.open}
@@ -314,14 +354,10 @@ export default function ProductTableToolbar({
         startDate={filters.startDate ? new Date(filters.startDate) : null}
         endDate={filters.endDate ? new Date(filters.endDate) : null}
         onChangeEndDate={(newValue: Date | null) => {
-          if (newValue) {
-            onChangeEndDate(newValue);
-          }
+          onChangeEndDate(newValue);
         }}
         onChangeStartDate={(newValue: Date | null) => {
-          if (newValue) {
-            onChangeStartDate(newValue);
-          }
+          onChangeStartDate(newValue);
         }}
       />
     </>