|
|
|
@@ -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}`}` |
|
|
|
|