update

src/components/StockTakeManagement/PickerCardList.tsx

@@ -26,6 +26,7 @@ import {
   getStockTakeRecords, 
   AllPickedStockTakeListReponse, 
   createStockTakeForSections,
+  getStockTakeRecordsPaged,
 } from "@/app/api/stockTake/actions";
 import dayjs from "dayjs";
 import { OUTPUT_DATE_FORMAT } from "@/app/utils/formatUtil";
@@ -45,28 +46,35 @@ const PickerCardList: React.FC<PickerCardListProps> = ({ onCardClick, onReStockT
   const [loading, setLoading] = useState(false);
   const [stockTakeSessions, setStockTakeSessions] = useState<AllPickedStockTakeListReponse[]>([]);
   const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(6);   // 每页 6 条
+const [total, setTotal] = useState(0); 
   const [creating, setCreating] = useState(false);
   const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
-  const fetchStockTakeSessions = useCallback(async () => {
-    setLoading(true);
-    try {
-      const data = await getStockTakeRecords();
-      setStockTakeSessions(Array.isArray(data) ? data : []);
-      setPage(0);
-    } catch (e) {
-      console.error(e);
-      setStockTakeSessions([]);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
+  const fetchStockTakeSessions = useCallback(
+    async (pageNum: number, size: number) => {
+      setLoading(true);
+      try {
+        const res = await getStockTakeRecordsPaged(pageNum, size);
+        setStockTakeSessions(Array.isArray(res.records) ? res.records : []);
+        setTotal(res.total || 0);
+        setPage(pageNum);
+      } catch (e) {
+        console.error(e);
+        setStockTakeSessions([]);
+        setTotal(0);
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
 
   useEffect(() => {
-    fetchStockTakeSessions();
-  }, [fetchStockTakeSessions]);
+    fetchStockTakeSessions(0, pageSize);
+  }, [fetchStockTakeSessions, pageSize]);
 
-  const startIdx = page * PER_PAGE;
-  const paged = stockTakeSessions.slice(startIdx, startIdx + PER_PAGE);
+  //const startIdx = page * PER_PAGE;
+ //const paged = stockTakeSessions.slice(startIdx, startIdx + PER_PAGE);
   
   const handleCreateStockTake = useCallback(async () => {
     setOpenConfirmDialog(false);
@@ -84,7 +92,7 @@ const PickerCardList: React.FC<PickerCardListProps> = ({ onCardClick, onReStockT
       
       console.log(message);
       
-      await fetchStockTakeSessions();
+      await fetchStockTakeSessions(0, pageSize);
     } catch (e) {
       console.error(e);
     } finally {
@@ -201,12 +209,12 @@ const PickerCardList: React.FC<PickerCardListProps> = ({ onCardClick, onReStockT
       </Box>
 
       <Grid container spacing={2}>
-        {paged.map((session) => {
-          const statusColor = getStatusColor(session.status || "");
-          const lastStockTakeDate = session.lastStockTakeDate
-            ? dayjs(session.lastStockTakeDate).format(OUTPUT_DATE_FORMAT)
-            : "-";
-          const completionRate = getCompletionRate(session);
+  {stockTakeSessions.map((session: AllPickedStockTakeListReponse) => {
+    const statusColor = getStatusColor(session.status || "");
+    const lastStockTakeDate = session.lastStockTakeDate
+      ? dayjs(session.lastStockTakeDate).format(OUTPUT_DATE_FORMAT)
+      : "-";
+    const completionRate = getCompletionRate(session);
 
           return (
             <Grid key={session.id} item xs={12} sm={6} md={4}>
@@ -271,13 +279,15 @@ const PickerCardList: React.FC<PickerCardListProps> = ({ onCardClick, onReStockT
 
       {stockTakeSessions.length > 0 && (
         <TablePagination
-          component="div"
-          count={stockTakeSessions.length}
-          page={page}
-          rowsPerPage={PER_PAGE}
-          onPageChange={(e, p) => setPage(p)}
-          rowsPerPageOptions={[PER_PAGE]}
-        />
+        component="div"
+        count={total}
+        page={page}
+        rowsPerPage={pageSize}
+        onPageChange={(e, newPage) => {
+          fetchStockTakeSessions(newPage, pageSize);
+        }}
+        rowsPerPageOptions={[pageSize]} // 如果暂时不让用户改 pageSize，就写死
+      />
       )}
             {/* Create Stock Take 確認 Dialog */}
             <Dialog