update job pick dashboard

src/app/api/jo/actions.ts

@@ -1201,9 +1201,15 @@ export interface MaterialPickStatusItem {
   pickStatus: string | null;
 }
 
-export const fetchMaterialPickStatus = cache(async (): Promise<MaterialPickStatusItem[]> => {
+export const fetchMaterialPickStatus = cache(async (date?: string): Promise<MaterialPickStatusItem[]> => {
+  const params = new URLSearchParams();
+  if (date) params.set("date", date); // yyyy-MM-dd
+
+  const qs = params.toString();
+  const url = `${BASE_API_URL}/jo/material-pick-status${qs ? `?${qs}` : ""}`;
+  
   return await serverFetchJson<MaterialPickStatusItem[]>(
-    `${BASE_API_URL}/jo/material-pick-status`,
+    url,
     {
       method: "GET",
     }

src/components/Jodetail/MaterialPickStatusTable.tsx

@@ -15,6 +15,9 @@ import {
   Paper,
   CircularProgress,
   TablePagination,
+  FormControl,
+  Select,
+  MenuItem,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
@@ -28,20 +31,18 @@ const MaterialPickStatusTable: React.FC = () => {
   const [data, setData] = useState<MaterialPickStatusItem[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const refreshCountRef = useRef<number>(0);
+  const [selectedDate, setSelectedDate] = useState(dayjs().format("YYYY-MM-DD"));
   const [paginationController, setPaginationController] = useState({
     pageNum: 0,
     pageSize: 10,
   });
 
+  
   const loadData = useCallback(async () => {
     setLoading(true);
     try {
-      const result = await fetchMaterialPickStatus();
-      // On second refresh, clear completed pick orders
+      const result = await fetchMaterialPickStatus(selectedDate);
       if (refreshCountRef.current >= 1) {
-       // const filtered = result.filter(item => 
-         // item.pickStatus?.toLowerCase() !== 'completed'
-        //);
         setData(result);
       } else {
         setData(result || []);
@@ -49,23 +50,19 @@ const MaterialPickStatusTable: React.FC = () => {
       refreshCountRef.current += 1;
     } catch (error) {
       console.error('Error fetching material pick status:', error);
-      setData([]); // Set empty array on error to stop loading
+      setData([]);
     } finally {
       setLoading(false);
     }
-  }, []); // Remove refreshCount from dependencies
+  }, [selectedDate]);
 
   useEffect(() => {
-    // Initial load
     loadData();
-    
-    // Set up auto-refresh every 10 minutes
     const interval = setInterval(() => {
       loadData();
     }, REFRESH_INTERVAL);
-
     return () => clearInterval(interval);
-  }, [loadData]); // Only depend on loadData, which is now stable
+  }, [loadData]);
 
   const formatTime = (timeData: any): string => {
     if (!timeData) return '';
@@ -235,10 +232,18 @@ const MaterialPickStatusTable: React.FC = () => {
           <Typography variant="h5" sx={{ fontWeight: 600 }}>
             {t("Material Pick Status")}
           </Typography>
-  
-        </Box>
-
 
+          <FormControl size="small" sx={{ minWidth: 160 }}>
+            <Select
+              value={selectedDate}
+              onChange={(e) => setSelectedDate(e.target.value)}
+            >
+              <MenuItem value={dayjs().format("YYYY-MM-DD")}>{t("Today")}</MenuItem>
+              <MenuItem value={dayjs().subtract(1, "day").format("YYYY-MM-DD")}>{t("Yesterday")}</MenuItem>
+              <MenuItem value={dayjs().subtract(2, "day").format("YYYY-MM-DD")}>{t("Two Days Ago")}</MenuItem>
+            </Select>
+          </FormControl>
+        </Box>
 
         <Box sx={{ mt: 2 }}>
           {loading ? (