fix ticket release table ui and can not continue use lot print model

src/components/DoWorkbench/WorkbenchGoodPickExecutionDetail.tsx

@@ -996,6 +996,8 @@ const fetchAllCombinedLotData = useCallback(async (userId?: number, pickOrderIdO
         setWorkbenchLotLabelInitialPayload(null);
       }
       setWorkbenchLotLabelReminderText(reminderText ?? null);
+      // Clear latched success so the lot-label modal effect cannot instantly re-close on open.
+      setQrScanSuccess(false);
       setWorkbenchLotLabelModalOpen(true);
     },
     [],

src/components/DoWorkbench/WorkbenchTicketReleaseTable.tsx

@@ -49,6 +49,18 @@ function requiredDeliveryDateToDayString(value: unknown): string {
   return dayjs(value as string | number | Date).format("YYYY-MM-DD");
 }
 
+function formatTicketDateTime(value: unknown): string {
+  if (!value) return "-";
+  if (Array.isArray(value)) {
+    return arrayToDayjs(value as number[], true).format("HH:mm");
+  }
+  const parsedDate = dayjs(value as string, "YYYYMMDDHHmmss");
+  if (!parsedDate.isValid()) {
+    return dayjs(value as string | number | Date).format("HH:mm");
+  }
+  return parsedDate.format("HH:mm");
+}
+
 function isCompletedStatus(status: string | null | undefined): boolean {
   return (status ?? "").toLowerCase() === "completed";
 }
@@ -71,6 +83,8 @@ const WorkbenchTicketReleaseTableTab: React.FC = () => {
   const [selectedStatus, setSelectedStatus] = useState<string>("released");
   const [data, setData] = useState<WorkbenchTicketReleaseTable[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
+  const [now, setNow] = useState(dayjs());
+  const [lastDataRefreshTime, setLastDataRefreshTime] = useState<dayjs.Dayjs | null>(null);
   const [paginationController, setPaginationController] = useState({
     pageNum: 0,
     pageSize: 5,
@@ -82,6 +96,7 @@ const WorkbenchTicketReleaseTableTab: React.FC = () => {
       const dayStr = queryDate.format("YYYY-MM-DD");
       const result = await fetchWorkbenchTicketReleaseTable(dayStr, dayStr);
       setData(result);
+      setLastDataRefreshTime(dayjs());
     } catch (error) {
       console.error("Error fetching workbench ticket release table:", error);
       setData([]);
@@ -92,8 +107,17 @@ const WorkbenchTicketReleaseTableTab: React.FC = () => {
 
   useEffect(() => {
     void loadData();
+    const id = setInterval(() => {
+      void loadData();
+    }, 5 * 60 * 1000);
+    return () => clearInterval(id);
   }, [loadData]);
 
+  useEffect(() => {
+    const tick = setInterval(() => setNow(dayjs()), 30 * 1000);
+    return () => clearInterval(tick);
+  }, []);
+
   const dayStr = queryDate.format("YYYY-MM-DD");
   const filteredData = useMemo(() => {
     return data.filter((item) => {
@@ -231,6 +255,16 @@ const WorkbenchTicketReleaseTableTab: React.FC = () => {
                 <MenuItem value="completed">{t("completed")}</MenuItem>
               </Select>
             </FormControl>
+            <Box sx={{ flexGrow: 1 }} />
+            <Stack direction="row" spacing={2} sx={{ flexShrink: 0, alignSelf: "center" }}>
+              <Typography variant="body2" sx={{ color: "text.secondary" }} suppressHydrationWarning>
+                {t("Now")}: {now.format("HH:mm")}
+              </Typography>
+              <Typography variant="body2" sx={{ color: "text.secondary" }}>
+                {t("Auto-refresh every 5 minutes")} | {t("Last updated")}:{" "}
+                {lastDataRefreshTime ? lastDataRefreshTime.format("HH:mm:ss") : "--:--:--"}
+              </Typography>
+            </Stack>
           </Stack>
 
           {loading ? (
@@ -240,17 +274,47 @@ const WorkbenchTicketReleaseTableTab: React.FC = () => {
           ) : (
             <>
               <TableContainer component={Paper} sx={{ maxHeight: 440, overflow: "auto" }}>
-                <Table size="small">
+                <Table size="small" sx={{ minWidth: 650 }}>
                   <TableHead>
-                    <TableRow>
+                    <TableRow
+                      sx={{
+                        position: "sticky",
+                        top: 0,
+                        zIndex: 1,
+                        backgroundColor: "grey.100",
+                      }}
+                    >
                       <TableCell>{t("Store ID")}</TableCell>
                       <TableCell>{t("Required Delivery Date")}</TableCell>
-                      <TableCell>{t("Truck Information")}</TableCell>
-                      <TableCell>{t("Shop Name")}</TableCell>
+                      <TableCell>
+                        <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
+                          <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
+                            {t("Truck Information")}
+                          </Typography>
+                          <Typography variant="caption" sx={{ color: "text.secondary" }}>
+                            {t("Truck Lane Code")} - {t("Departure Time")}
+                          </Typography>
+                        </Box>
+                      </TableCell>
+                      <TableCell sx={{ minWidth: 200, width: "20%" }}>{t("Shop Name")}</TableCell>
                       <TableCell align="right">{t("Loading Sequence")}</TableCell>
-                      <TableCell>{t("Ticket Information")}</TableCell>
+                      <TableCell>
+                        <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
+                          <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
+                            {t("Ticket Information")}
+                          </Typography>
+                          <Typography variant="caption" sx={{ color: "text.secondary" }}>
+                            {t("Ticket No.")} ({t("Status")})
+                          </Typography>
+                          <Typography variant="caption" sx={{ color: "text.secondary" }}>
+                            {t("Released Time")} - {t("Completed Time")}
+                          </Typography>
+                        </Box>
+                      </TableCell>
                       <TableCell>{t("Handler Name")}</TableCell>
-                      <TableCell align="right">{t("Number of FG Items (Order Item(s) Count)")}</TableCell>
+                      <TableCell align="right" sx={{ minWidth: 100, width: "8%", whiteSpace: "nowrap" }}>
+                        {t("Number of FG Items (Order Item(s) Count)")}
+                      </TableCell>
                       <TableCell align="center" sx={{ minWidth: 200 }}>
                         {t("Actions")}
                       </TableCell>
@@ -276,13 +340,25 @@ const WorkbenchTicketReleaseTableTab: React.FC = () => {
                               {row.truckDepartureTime && <Chip label={String(row.truckDepartureTime).slice(0, 5)} size="small" color="secondary" />}
                             </Box>
                           </TableCell>
-                          <TableCell>{row.shopName || "-"}</TableCell>
+                          <TableCell sx={{ minWidth: 200, width: "20%" }}>{row.shopName || "-"}</TableCell>
                           <TableCell align="right">{row.loadingSequence ?? "-"}</TableCell>
                           <TableCell>
-                            {row.ticketNo || "-"} ({row.ticketStatus ? t(row.ticketStatus.toLowerCase()) : "-"})
+                            <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
+                              <Typography variant="body2">
+                                {row.ticketNo || "-"} ({row.ticketStatus ? t(row.ticketStatus.toLowerCase()) : "-"})
+                              </Typography>
+                              <Typography variant="body2">
+                                {t("Released Time")}: {formatTicketDateTime(row.ticketReleaseTime)}
+                              </Typography>
+                              <Typography variant="body2">
+                                {t("Completed Time")}: {formatTicketDateTime(row.ticketCompleteDateTime)}
+                              </Typography>
+                            </Box>
                           </TableCell>
                           <TableCell>{row.handlerName ?? "-"}</TableCell>
-                          <TableCell align="right">{row.numberOfFGItems ?? 0}</TableCell>
+                          <TableCell align="right" sx={{ minWidth: 100, width: "8%" }}>
+                            {row.numberOfFGItems ?? 0}
+                          </TableCell>
                           <TableCell align="center">
                             {showDoPickOpsButtons(row) ? (
                               <Stack direction="row" spacing={1} justifyContent="center" flexWrap="wrap" useFlexGap>

src/components/JoWorkbench/newJobPickExecution.tsx

@@ -1083,6 +1083,8 @@ const JobPickExecution: React.FC<Props> = ({ filterArgs, onBackToList }) => {
       setWorkbenchLotLabelInitialPayload(null);
     }
     setWorkbenchLotLabelReminderText(reminderText ?? null);
+    // Clear latched success so the lot-label modal effect cannot instantly re-close on open.
+    setQrScanSuccess(false);
     setWorkbenchLotLabelModalOpen(true);
   }, []);
 

src/components/PickOrderSearch/WorkbenchPickExecution.tsx

@@ -1495,7 +1495,7 @@ const WorkbenchPickExecution: React.FC<Props> = ({ filterArgs }) => {
                           onClick={() => openWorkbenchLotLabelModalForLot(r)}
                           sx={{ flexShrink: 0, fontSize: "0.7rem", py: 0.25, minWidth: "auto", px: 1, whiteSpace: "nowrap" }}
                         >
-                          {t("挑號 QR 碼")}
+                          {t(" 批號 QR 碼")}
                         </Button>
                       ) : null}
                     </Stack>

src/components/ProductionProcess/ProductionProcessList.tsx

@@ -555,6 +555,7 @@ const ProductProcessList: React.FC<ProductProcessListProps> = ({
                           {t("Job Order")}: {jobOrderCode}
                           </Typography>
                     
+                    
                         </Box>
                         <Chip size="small" label={t(displayStatus)} color={statusColor as any} />
                       </Stack>