From 5473ff820d8354376db73bb09a79f6afbf5966b5 Mon Sep 17 00:00:00 2001
From: "CANCERYS\\kw093" <kw093a011@gmail.com>
Date: Mon, 26 Jan 2026 16:15:51 +0800
Subject: [PATCH] update bar

---
 .../FinishedGoodSearch/FinishedGoodSearch.tsx |  3 +-
 .../GoodPickExecutionForm.tsx                 |  2 +-
 .../GoodPickExecutiondetail.tsx               | 74 +++++++++++++++++--
 3 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/src/components/FinishedGoodSearch/FinishedGoodSearch.tsx b/src/components/FinishedGoodSearch/FinishedGoodSearch.tsx
index 4637e41..ef47f79 100644
--- a/src/components/FinishedGoodSearch/FinishedGoodSearch.tsx
+++ b/src/components/FinishedGoodSearch/FinishedGoodSearch.tsx
@@ -655,7 +655,7 @@ const handleAssignByLane = useCallback(async (
           >
             {t("Print All Draft")} ({releasedOrderCount})
           </Button>
-
+{/*
           <Button
             variant="contained"
             sx={{
@@ -676,6 +676,7 @@ const handleAssignByLane = useCallback(async (
           >
             {t("Print Draft")}
           </Button>
+          */}
         </Stack>
       </Box>
 
diff --git a/src/components/FinishedGoodSearch/GoodPickExecutionForm.tsx b/src/components/FinishedGoodSearch/GoodPickExecutionForm.tsx
index c5441af..5ff744d 100644
--- a/src/components/FinishedGoodSearch/GoodPickExecutionForm.tsx
+++ b/src/components/FinishedGoodSearch/GoodPickExecutionForm.tsx
@@ -419,7 +419,7 @@ const PickExecutionForm: React.FC<PickExecutionFormProps> = ({
                   onChange={(e) => handleInputChange("reason", e.target.value)}
                   label={t("Remark")}
                 >
-                  <MenuItem value="">{t("Select Reason")}</MenuItem>
+                  <MenuItem value="">{t("Select Remark")}</MenuItem>
                   <MenuItem value="miss">{t("Edit")}</MenuItem>
                   <MenuItem value="bad">{t("Just Complete")}</MenuItem>
                 </Select>
diff --git a/src/components/FinishedGoodSearch/GoodPickExecutiondetail.tsx b/src/components/FinishedGoodSearch/GoodPickExecutiondetail.tsx
index 0ffac31..4c64435 100644
--- a/src/components/FinishedGoodSearch/GoodPickExecutiondetail.tsx
+++ b/src/components/FinishedGoodSearch/GoodPickExecutiondetail.tsx
@@ -19,6 +19,7 @@ import {
   TablePagination,
   Modal,
   Chip,
+  LinearProgress,
 } from "@mui/material";
 import dayjs from 'dayjs';
 import TestQrCodeProvider from '../QrCodeScannerProvider/TestQrCodeProvider';
@@ -78,7 +79,33 @@ interface Props {
   onSwitchToRecordTab?: () => void;
   onRefreshReleasedOrderCount?: () => void;
 }
-
+const LinearProgressWithLabel: React.FC<{ completed: number; total: number }> = ({ completed, total }) => {
+  const { t } = useTranslation(["pickOrder", "do"]);
+  const progress = total > 0 ? (completed / total) * 100 : 0;
+  
+  return (
+    <Box sx={{ width: '100%', mb: 2 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+        <Box sx={{ width: '100%', mr: 1 }}>
+          <LinearProgress 
+            variant="determinate" 
+            value={progress}
+            sx={{
+              height: 30, // ✅ Increase height from default (4px) to 10px
+              borderRadius: 5, // ✅ Add rounded corners
+            }}
+          />
+        </Box>
+        <Box sx={{ minWidth: 80 }}>
+          <Typography variant="body2" color="text.secondary">
+            <strong>{t("Progress")}: {completed}/{total}</strong>
+          </Typography>
+        </Box>
+      </Box>
+ 
+    </Box>
+  );
+};
 //  QR Code Modal Component (from LotTable)
 const QrCodeModal: React.FC<{
   open: boolean;
@@ -477,7 +504,7 @@ const [pickOrderSwitching, setPickOrderSwitching] = useState(false);
 
   const [paginationController, setPaginationController] = useState({
     pageNum: 0,
-    pageSize: 10,
+    pageSize: -1,
   });
 
   const [usernameList, setUsernameList] = useState<NameList[]>([]);
@@ -515,7 +542,23 @@ const [isConfirmingLot, setIsConfirmingLot] = useState(false);
     console.log(`QR Code clicked for pick order ID: ${pickOrderId}`);
     // TODO: Implement QR code functionality
   };
+  const progress = useMemo(() => {
+    if (combinedLotData.length === 0) {
+      return { completed: 0, total: 0 };
+    }
+    
+    const nonPendingCount = combinedLotData.filter(lot => {
+      const status = lot.stockOutLineStatus?.toLowerCase();
+      return status !== 'pending';
+    }).length;
+    
+    return {
+      completed: nonPendingCount,
+      total: combinedLotData.length
+    };
+  }, [combinedLotData]);
 
+  
   const handleLotMismatch = useCallback((expectedLot: any, scannedLot: any) => {
     console.log("Lot mismatch detected:", { expectedLot, scannedLot });
     setExpectedLotData(expectedLot);
@@ -1808,13 +1851,16 @@ useEffect(() => {
     const newPageSize = parseInt(event.target.value, 10);
     setPaginationController({
       pageNum: 0,
-      pageSize: newPageSize,
+      pageSize: newPageSize === -1 ? -1 : newPageSize,
     });
   }, []);
 
   // Pagination data with sorting by routerIndex
  // Remove the sorting logic and just do pagination
 const paginatedData = useMemo(() => {
+  if (paginationController.pageSize === -1) {
+    return combinedLotData; // Show all items
+  }
   const startIndex = paginationController.pageNum * paginationController.pageSize;
   const endIndex = startIndex + paginationController.pageSize;
   return combinedLotData.slice(startIndex, endIndex); //  No sorting needed
@@ -2337,6 +2383,24 @@ const handleSubmitAllScanned = useCallback(async () => {
     >
       <FormProvider {...formProps}>
         <Stack spacing={2}>
+        <Box
+            sx={{
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              right: 0,
+              zIndex: 1100, // Higher than other elements
+              backgroundColor: 'background.paper',
+              pt: 2,
+              pb: 1,
+              px: 2,
+              borderBottom: '1px solid',
+              borderColor: 'divider',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+            }}
+          >
+            <LinearProgressWithLabel completed={progress.completed} total={progress.total} />
+          </Box>
           {/* DO Header */}
 
   
@@ -2540,7 +2604,7 @@ paginatedData.map((lot, index) => {
             }}
           >
             {lot.lotNo || 
-            t('⚠️ No Stock Available')}
+            t('No Stock Available')}
           </Typography>
         </Box>
       </TableCell>
@@ -2726,7 +2790,7 @@ paginatedData.map((lot, index) => {
               rowsPerPage={paginationController.pageSize}
               onPageChange={handlePageChange}
               onRowsPerPageChange={handlePageSizeChange}
-              rowsPerPageOptions={[10, 25, 50]}
+              rowsPerPageOptions={[10, 25, 50,-1]}
               labelRowsPerPage={t("Rows per page")}
               labelDisplayedRows={({ from, to, count }) => 
                 `${from}-${to} of ${count !== -1 ? count : `more than ${to}`}`