jason
/
FPSMS-frontend
2
0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
FPSMS-frontend
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
1233 коммитов
9 Ветки
85 MiB
 
 
Дерево: 475857092d
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из '475857092d'
${ noResults }
FPSMS-frontend/src/components/DoWorkbench/WorkbenchFloorLanePanel.tsx

800 строки
34 KiB
Исходник Вина История 

  1. "use client";

  2. 

  3. import { Box, Button, Grid, Stack, Typography, Select, MenuItem, FormControl, InputLabel } from "@mui/material";

  4. import { useCallback, useEffect, useMemo, useRef, useState } from "react";

  5. import { useTranslation } from "react-i18next";

  6. import { useSession } from "next-auth/react";

  7. import { SessionWithTokens } from "@/config/authConfig";

  8. import type { StoreLaneSummary, LaneRow, LaneBtn } from "@/app/api/pickOrder/actions";

  9. import {

  10.   assignByDeliveryOrderPickOrderId,

  11.   assignWorkbenchByLane,

  12.   fetchWorkbenchEtraLaneSummary,

  13.   fetchWorkbenchReleasedDoPickOrdersForSelection,

  14.   fetchWorkbenchReleasedDoPickOrdersForSelectionToday,

  15.   fetchWorkbenchStoreLaneSummary,

  16.   type WorkbenchEtraShopLaneGroup,

  17. } from "@/app/api/doworkbench/actions";

  18. import Swal from "sweetalert2";

  19. import dayjs from "dayjs";

  20. import ReleasedDoPickOrderSelectModal from "@/components/FinishedGoodSearch/ReleasedDoPickOrderSelectModal";

  21. import {

  22.   DEFAULT_WORKBENCH_LANE_PANEL_PREFS,

  23.   type WorkbenchLanePanelPrefs,

  24. } from "./workbenchLanePanelPrefs";

  25. import WorkbenchEtraMergeDialog from "./WorkbenchEtraMergeDialog";

  26. 

  27. interface Props {

  28.   onPickOrderAssigned?: () => void;

  29.   onSwitchToDetailTab?: () => void;

  30.   initialReleaseType?: string;

  31.   /** When true (workbench tab "Etra"), only the Etra shop×lane grid is shown; use top tab to return to normal. */

  32.   etraOnly?: boolean;

  33.   /** With [etraOnly], navigates to normal assign tab (tab 0). */

  34.   onRequestNormalLaneTab?: () => void;

  35.   /** Lifted from DoWorkbenchTabs — persists date/floor/release across workbench tab switches. */

  36.   lanePanelPrefs?: WorkbenchLanePanelPrefs;

  37.   onLanePanelPrefsChange?: (prefs: WorkbenchLanePanelPrefs) => void;

  38. }

  39. 

  40. type LaneSlot4F = { truckDepartureTime: string; lane: LaneBtn };

  41. type TruckGroup4F = { truckLanceCode: string; slots: (LaneSlot4F & { sequenceIndex: number })[] };

  42. 

  43. const WorkbenchFloorLanePanel: React.FC<Props> = ({

  44.   onPickOrderAssigned,

  45.   onSwitchToDetailTab,

  46.   initialReleaseType = "batch",

  47.   etraOnly = false,

  48.   onRequestNormalLaneTab,

  49.   lanePanelPrefs: lanePanelPrefsProp,

  50.   onLanePanelPrefsChange,

  51. }) => {

  52.   const { t } = useTranslation("pickOrder");

  53.   const { data: session } = useSession() as { data: SessionWithTokens | null };

  54.   const currentUserId = session?.id ? parseInt(session.id) : undefined;

  55.   const [selectedStore, setSelectedStore] = useState<string>("2/F");

  56.   const [selectedTruck, setSelectedTruck] = useState<string>("");

  57.   const [modalOpen, setModalOpen] = useState(false);

  58.   const [truckCounts2F, setTruckCounts2F] = useState<{ truck: string; count: number }[]>([]);

  59.   const [truckCounts4F, setTruckCounts4F] = useState<{ truck: string; count: number }[]>([]);

  60.   const [summary2F, setSummary2F] = useState<StoreLaneSummary | null>(null);

  61.   const [summary4F, setSummary4F] = useState<StoreLaneSummary | null>(null);

  62.   const [defaultDateScope, setDefaultDateScope] = useState<"today" | "before">("today");

  63.   const [isLoadingSummary, setIsLoadingSummary] = useState(false);

  64.   const [isAssigning, setIsAssigning] = useState(false);

  65.   const [isDefaultTruck, setIsDefaultTruck] = useState(false);

  66.   const [beforeTodayTruckXCount, setBeforeTodayTruckXCount] = useState(0);

  67.   const [internalLanePrefs, setInternalLanePrefs] = useState<WorkbenchLanePanelPrefs>(() => ({

  68.     ...DEFAULT_WORKBENCH_LANE_PANEL_PREFS,

  69.     releaseType: initialReleaseType,

  70.   }));

  71.   const lanePanelPrefs = lanePanelPrefsProp ?? internalLanePrefs;

  72.   const setLanePanelPrefs = onLanePanelPrefsChange ?? setInternalLanePrefs;

  73.   const selectedDate = lanePanelPrefs.selectedDate;

  74.   const releaseType = lanePanelPrefs.releaseType;

  75.   const ticketFloor = lanePanelPrefs.ticketFloor;

  76.   const patchLanePanelPrefs = useCallback(

  77.     (patch: Partial<WorkbenchLanePanelPrefs>) => {

  78.       setLanePanelPrefs({ ...lanePanelPrefs, ...patch });

  79.     },

  80.     [lanePanelPrefs, setLanePanelPrefs],

  81.   );

  82.   const [isExtraView, setisExtraView] = useState(false);

  83.   const [etraGroups, setEtraGroups] = useState<WorkbenchEtraShopLaneGroup[]>([]);

  84.   const [isLoadingEtra, setIsLoadingEtra] = useState(false);

  85.   const [modalReleaseTypeFilter, setModalReleaseTypeFilter] = useState<string | undefined>(undefined);

  86.   const [modalFilterRequiredDeliveryDate, setModalFilterRequiredDeliveryDate] = useState<string | undefined>(undefined);

  87.   const [modalInitialShopSearch, setModalInitialShopSearch] = useState<string | undefined>(undefined);

  88.   const [modalTruckXFloor, setModalTruckXFloor] = useState<string | undefined>(undefined);

  89.   const ticketFloorApiKey = useMemo(

  90.     () => ticketFloor.replace("/", "").trim().toUpperCase(),

  91.     [ticketFloor],

  92.   );

  93.   const defaultTruckCount =

  94.     (ticketFloor === "2/F" ? summary2F?.defaultTruckCount : summary4F?.defaultTruckCount) ?? 0;

  95.   const etraEnterInFlightRef = useRef(false);

  96.   const [etraMergeDialogOpen, setEtraMergeDialogOpen] = useState(false);

  97. 

  98.   const inEtraUi = useMemo(() => etraOnly || isExtraView, [etraOnly, isExtraView]);

  99. 

  100.   const selectedDeliveryDateYmd = useMemo(() => {

  101.     if (selectedDate === "today") return dayjs().format("YYYY-MM-DD");

  102.     if (selectedDate === "tomorrow") return dayjs().add(1, "day").format("YYYY-MM-DD");

  103.     if (selectedDate === "dayAfterTomorrow") return dayjs().add(2, "day").format("YYYY-MM-DD");

  104.     return dayjs().format("YYYY-MM-DD");

  105.   }, [selectedDate]);

  106. 

  107.   const hasLoggedRef = useRef(false);

  108.   const fullReadyLoggedRef = useRef(false);

  109.   const pendingRef = useRef(0);

  110. 

  111.   const workbenchReleasedListBridge = useMemo(

  112.     () => ({

  113.       loadBeforeToday: (

  114.         shopName?: string,

  115.         storeId?: string,

  116.         truck?: string,

  117.         releaseType?: string,

  118.         floor?: string

  119.       ) => fetchWorkbenchReleasedDoPickOrdersForSelection(shopName, storeId, truck, releaseType, floor),

  120.       loadToday: (

  121.         shopName?: string,

  122.         storeId?: string,

  123.         truck?: string,

  124.         requiredDeliveryDate?: string,

  125.         releaseType?: string,

  126.         floor?: string

  127.       ) =>

  128.         fetchWorkbenchReleasedDoPickOrdersForSelectionToday(

  129.           shopName,

  130.           storeId,

  131.           truck,

  132.           requiredDeliveryDate,

  133.           releaseType,

  134.           floor

  135.         ),

  136.       assignByListItemId: assignByDeliveryOrderPickOrderId,

  137.     }),

  138.     [],

  139.   );

  140. 

  141.   const startFullTimer = () => {

  142.     if (typeof window === "undefined") return;

  143.     const key = "__FG_FLOOR_FULL_TIMER_STARTED__" as const;

  144.     if (!(window as any)[key]) {

  145.       (window as any)[key] = true;

  146.       console.time("[FG] FloorLanePanel full ready");

  147.     }

  148.   };

  149.   const tryEndFullTimer = () => {

  150.     if (typeof window === "undefined") return;

  151.     const key = "__FG_FLOOR_FULL_TIMER_STARTED__" as const;

  152.     if ((window as any)[key] && !fullReadyLoggedRef.current && pendingRef.current === 0) {

  153.       fullReadyLoggedRef.current = true;

  154.       console.timeEnd("[FG] FloorLanePanel full ready");

  155.       delete (window as any)[key];

  156.     }

  157.   };

  158. 

  159.   const loadSummaries = useCallback(async () => {

  160.     setIsLoadingSummary(true);

  161.     pendingRef.current += 1;

  162.     startFullTimer();

  163.     try {

  164.       let dateParam: string | undefined;

  165.       if (selectedDate === "today") dateParam = dayjs().format("YYYY-MM-DD");

  166.       else if (selectedDate === "tomorrow") dateParam = dayjs().add(1, "day").format("YYYY-MM-DD");

  167.       else if (selectedDate === "dayAfterTomorrow") dateParam = dayjs().add(2, "day").format("YYYY-MM-DD");

  168.       const [s2, s4] = await Promise.all([

  169.         fetchWorkbenchStoreLaneSummary("2/F", dateParam, releaseType),

  170.         fetchWorkbenchStoreLaneSummary("4/F", dateParam, releaseType),

  171.       ]);

  172.       setSummary2F(s2);

  173.       setSummary4F(s4);

  174.     } catch (error) {

  175.       console.error("Error loading summaries:", error);

  176.     } finally {

  177.       setIsLoadingSummary(false);

  178.       pendingRef.current -= 1;

  179.       tryEndFullTimer();

  180.       if (!hasLoggedRef.current) {

  181.         hasLoggedRef.current = true;

  182.       }

  183.     }

  184.   }, [selectedDate, releaseType]);

  185. 

  186.   const loadEtraSummaries = useCallback(async () => {

  187.     setIsLoadingEtra(true);

  188.     pendingRef.current += 1;

  189.     startFullTimer();

  190.     try {

  191.       let dateParam: string | undefined;

  192.       if (selectedDate === "today") dateParam = dayjs().format("YYYY-MM-DD");

  193.       else if (selectedDate === "tomorrow") dateParam = dayjs().add(1, "day").format("YYYY-MM-DD");

  194.       else if (selectedDate === "dayAfterTomorrow") dateParam = dayjs().add(2, "day").format("YYYY-MM-DD");

  195.       const data = await fetchWorkbenchEtraLaneSummary(dateParam);

  196.       setEtraGroups(data);

  197.     } catch (error) {

  198.       console.error("Error loading Etra summary:", error);

  199.       setEtraGroups([]);

  200.     } finally {

  201.       setIsLoadingEtra(false);

  202.       pendingRef.current -= 1;

  203.       tryEndFullTimer();

  204.     }

  205.   }, [selectedDate]);

  206. 

  207.   useEffect(() => {

  208.     if (inEtraUi) void loadEtraSummaries();

  209.     else void loadSummaries();

  210.   }, [inEtraUi, loadEtraSummaries, loadSummaries]);

  211. 

  212.   useEffect(() => {

  213.     const loadCounts = async () => {

  214.       if (inEtraUi) return;

  215.       pendingRef.current += 1;

  216.       startFullTimer();

  217.       try {

  218.         const [list2F, list4F] = await Promise.all([

  219.           fetchWorkbenchReleasedDoPickOrdersForSelection(undefined, "2/F"),

  220.           fetchWorkbenchReleasedDoPickOrdersForSelection(undefined, "4/F"),

  221.         ]);

  222.         const groupByTruck = (list: { truckLanceCode?: string | null }[]) => {

  223.           const map: Record<string, number> = {};

  224.           list.forEach((item) => {

  225.             const lane = item.truckLanceCode || "-";

  226.             map[lane] = (map[lane] || 0) + 1;

  227.           });

  228.           return Object.entries(map)

  229.             .map(([truck, count]) => ({ truck, count }))

  230.             .sort((a, b) => a.truck.localeCompare(b.truck));

  231.         };

  232.         setTruckCounts2F(groupByTruck(list2F));

  233.         setTruckCounts4F(groupByTruck(list4F));

  234.       } catch (e) {

  235.         console.error("Error loading counts:", e);

  236.         setTruckCounts2F([]);

  237.         setTruckCounts4F([]);

  238.       } finally {

  239.         pendingRef.current -= 1;

  240.         tryEndFullTimer();

  241.       }

  242.     };

  243.     void loadCounts();

  244.   }, [inEtraUi, loadSummaries]);

  245. 

  246.   useEffect(() => {

  247.     const loadBeforeTodayTruckX = async () => {

  248.       if (inEtraUi) return;

  249.       pendingRef.current += 1;

  250.       startFullTimer();

  251.       try {

  252.         // storeId stays undefined (Truck X); floor splits by DO supplier preferred floor.

  253.         const list = await fetchWorkbenchReleasedDoPickOrdersForSelection(

  254.           undefined,

  255.           undefined,

  256.           "車線-X",

  257.           undefined,

  258.           ticketFloorApiKey

  259.         );

  260.         setBeforeTodayTruckXCount(list.length);

  261.       } catch {

  262.         setBeforeTodayTruckXCount(0);

  263.       } finally {

  264.         pendingRef.current -= 1;

  265.         tryEndFullTimer();

  266.       }

  267.     };

  268.     void loadBeforeTodayTruckX();

  269.   }, [inEtraUi, ticketFloorApiKey]);

  270. 

  271.   const clearModalEtraContext = useCallback(() => {

  272.     setModalReleaseTypeFilter(undefined);

  273.     setModalFilterRequiredDeliveryDate(undefined);

  274.     setModalInitialShopSearch(undefined);

  275.     setModalTruckXFloor(undefined);

  276.   }, []);

  277. 

  278.   const openEnterEtraView = useCallback(async () => {

  279.     if (etraEnterInFlightRef.current) return;

  280.     etraEnterInFlightRef.current = true;

  281.     try {

  282.       /*

  283.       const r = await Swal.fire({

  284.         title: t("Enter isExtra workbench view?"),

  285.         text: t("Etra view groups all add-on tickets by shop and lane for the selected date."),

  286.         icon: "question",

  287.         showCancelButton: true,

  288.         confirmButtonText: t("Confirm"),

  289.         cancelButtonText: t("Cancel"),

  290.         confirmButtonColor: "#8dba00",

  291.         cancelButtonColor: "#F04438",

  292.       });

  293.       if (r.isConfirmed) setisExtraView(true);

  294.       */

  295.       setisExtraView(true);

  296.     } finally {

  297.       etraEnterInFlightRef.current = false;

  298.     }

  299.   }, []);

  300. 

  301.   const handleAssignByLane = useCallback(

  302.     async (

  303.       storeId: string,

  304.       truckDepartureTime: string,

  305.       truckLanceCode: string,

  306.       loadingSequence: number | null | undefined,

  307.       requiredDate: string,

  308.     ) => {

  309.       if (!currentUserId) return;

  310.       let dateParam: string | undefined;

  311.       if (requiredDate === "today") dateParam = dayjs().format("YYYY-MM-DD");

  312.       else if (requiredDate === "tomorrow") dateParam = dayjs().add(1, "day").format("YYYY-MM-DD");

  313.       else if (requiredDate === "dayAfterTomorrow") dateParam = dayjs().add(2, "day").format("YYYY-MM-DD");

  314.       setIsAssigning(true);

  315.       try {

  316.         const res = await assignWorkbenchByLane({

  317.           userId: currentUserId,

  318.           storeId,

  319.           truckLanceCode,

  320.           truckDepartureTime,

  321.           loadingSequence,

  322.           requiredDate: dateParam,

  323.           releaseType: inEtraUi ? "isExtra" : releaseType,

  324.         });

  325.         console.log("assignByLane result:", res);

  326.         if (res.code === "SUCCESS") {

  327.           window.dispatchEvent(new CustomEvent("pickOrderAssigned"));

  328.           void (inEtraUi ? loadEtraSummaries() : loadSummaries());

  329.           onPickOrderAssigned?.();

  330.           onSwitchToDetailTab?.();

  331.         }

  332.       } catch {

  333.         await Swal.fire({ icon: "error", title: t("Error"), text: t("Error occurred during assignment."), confirmButtonText: t("Confirm"), confirmButtonColor: "#8dba00" });

  334.       } finally {

  335.         setIsAssigning(false);

  336.       }

  337.     },

  338.     [currentUserId, inEtraUi, loadEtraSummaries, loadSummaries, onPickOrderAssigned, onSwitchToDetailTab, releaseType, t],

  339.   );

  340. 

  341.   const handleLaneButtonClick = useCallback(

  342.     async (

  343.       storeId: string,

  344.       truckDepartureTime: string,

  345.       truckLanceCode: string,

  346.       loadingSequence: number | null | undefined,

  347.       requiredDate: string,

  348.       unassigned: number,

  349.       total: number,

  350.     ) => {

  351.       let dateDisplay = requiredDate;

  352.       if (requiredDate === "today") dateDisplay = dayjs().format("YYYY-MM-DD");

  353.       else if (requiredDate === "tomorrow") dateDisplay = dayjs().add(1, "day").format("YYYY-MM-DD");

  354.       else if (requiredDate === "dayAfterTomorrow") dateDisplay = dayjs().add(2, "day").format("YYYY-MM-DD");

  355.       const result = await Swal.fire({

  356.         title: t("Confirm Assignment"),

  357.         html: `<div style="text-align: left; padding: 10px 0;">

  358.           <p><strong>${t("Store")}:</strong> ${storeId}</p>

  359.           <p><strong>${t("Lane Code")}:</strong> ${truckLanceCode}</p>

  360.           ${loadingSequence != null ? `<p><strong>${t("Loading Sequence")}:</strong> ${loadingSequence}</p>` : ""}

  361.           <p><strong>${t("Departure Time")}:</strong> ${truckDepartureTime}</p>

  362.           <p><strong>${t("Required Date")}:</strong> ${dateDisplay}</p>

  363.           <p><strong>${t("Available Orders")}:</strong> ${unassigned}/${total}</p>

  364.         </div>`,

  365.         icon: "question",

  366.         showCancelButton: true,

  367.         confirmButtonText: t("Confirm"),

  368.         cancelButtonText: t("Cancel"),

  369.         confirmButtonColor: "#8dba00",

  370.         cancelButtonColor: "#F04438",

  371.       });

  372.       if (result.isConfirmed) {

  373.         await handleAssignByLane(storeId, truckDepartureTime, truckLanceCode, loadingSequence, requiredDate);

  374.       }

  375.     },

  376.     [handleAssignByLane, t],

  377.   );

  378. 

  379.   const getDateLabel = (offset: number) => dayjs().add(offset, "day").format("YYYY-MM-DD");

  380. 

  381.   const truckGroups4F = useMemo((): TruckGroup4F[] => {

  382.     const rows = summary4F?.rows as LaneRow[] | undefined;

  383.     if (!rows?.length) return [];

  384.     const map = new Map<string, LaneSlot4F[]>();

  385.     for (const row of rows) {

  386.       for (const lane of row.lanes) {

  387.         const list = map.get(lane.truckLanceCode);

  388.         const slot: LaneSlot4F = { truckDepartureTime: row.truckDepartureTime, lane };

  389.         if (list) list.push(slot);

  390.         else map.set(lane.truckLanceCode, [slot]);

  391.       }

  392.     }

  393.     return Array.from(map.entries()).map(([truckLanceCode, slots]) => ({

  394.       truckLanceCode,

  395.       slots: slots

  396.         .slice()

  397.         .sort((a, b) => (a.lane.loadingSequence ?? 999) - (b.lane.loadingSequence ?? 999))

  398.         .map((s, i) => ({ ...s, sequenceIndex: i + 1 })),

  399.     }));

  400.   }, [summary4F?.rows]);

  401. 

  402.   const renderNoEntry = () => (

  403.     <Typography variant="body2" color="text.secondary" sx={{ fontWeight: 600, fontSize: "1rem", textAlign: "center", py: 1 }}>

  404.       {t("No entries available")}

  405.     </Typography>

  406.   );

  407. 

  408.   return (

  409.     <Box sx={{ mb: 2 }}>

  410.       <Stack direction="row" spacing={2} sx={{ mb: 2, alignItems: "flex-start", flexWrap: "wrap" }}>

  411.         <Box sx={{ maxWidth: 300 }}>

  412.           <FormControl fullWidth size="small">

  413.             <InputLabel id="date-select-label">{t("Select Date")}</InputLabel>

  414.             <Select labelId="date-select-label" value={selectedDate} label={t("Select Date")} onChange={(e) => patchLanePanelPrefs({ selectedDate: e.target.value as WorkbenchLanePanelPrefs["selectedDate"] })}>

  415.               <MenuItem value="today">{t("Today")} ({getDateLabel(0)})</MenuItem>

  416.               <MenuItem value="tomorrow">{t("Tomorrow")} ({getDateLabel(1)})</MenuItem>

  417.               <MenuItem value="dayAfterTomorrow">{t("Day After Tomorrow")} ({getDateLabel(2)})</MenuItem>

  418.             </Select>

  419.           </FormControl>

  420.         </Box>

  421.         {inEtraUi && (

  422.           <Box sx={{ display: "flex", alignItems: "center", pt: 0.5 }}>

  423.             <Button variant="contained" color="secondary" onClick={() => setEtraMergeDialogOpen(true)}>

  424.               {t("Merge Etra ticket")}

  425.             </Button>

  426.           </Box>

  427.         )}

  428.         {!inEtraUi && (

  429.           <>

  430.             <Box sx={{ minWidth: 140, maxWidth: 300 }}>

  431.               <FormControl fullWidth size="small">

  432.                 <InputLabel id="release-type-select-label">{t("Release Type")}</InputLabel>

  433.                 <Select labelId="release-type-select-label" value={releaseType} label={t("Release Type")} onChange={(e) => patchLanePanelPrefs({ releaseType: e.target.value })}>

  434.                   <MenuItem value="batch">{t("Batch")}</MenuItem>

  435.                   <MenuItem value="single">{t("Single")}</MenuItem>

  436.                 </Select>

  437.               </FormControl>

  438.             </Box>

  439.             <Box sx={{ minWidth: 120, maxWidth: 200 }}>

  440.               <FormControl fullWidth size="small">

  441.                 <InputLabel id="ticket-floor-select-label">{t("Floor ticket")}</InputLabel>

  442.                 <Select labelId="ticket-floor-select-label" value={ticketFloor} label={t("Floor ticket")} onChange={(e) => patchLanePanelPrefs({ ticketFloor: e.target.value as WorkbenchLanePanelPrefs["ticketFloor"] })}>

  443.                   <MenuItem value="2/F">{t("2F ticket")}</MenuItem>

  444.                   <MenuItem value="4/F">{t("4F ticket")}</MenuItem>

  445.                 </Select>

  446.               </FormControl>

  447.             </Box>

  448.             {/*

  449.             <Box sx={{ display: "flex", alignItems: "center", pt: 0.5 }}>

  450.               <Button variant="contained" color="secondary" onClick={() => void openEnterEtraView()}>

  451.                 {t("isExtra order")}

  452.               </Button>

  453.             </Box>

  454.             */}

  455.           </>

  456.         )}

  457.         {/*

  458.         {inEtraUi && !etraOnly && (

  459.           <Box sx={{ display: "flex", alignItems: "center", pt: 0.5 }}>

  460.             <Button

  461.               variant="outlined"

  462.               onClick={() => {

  463.                 clearModalEtraContext();

  464.                 setisExtraView(false);

  465.               }}

  466.             >

  467.               {t("Exit Etra view")}

  468.             </Button>

  469.           </Box>

  470.         )}

  471.         {etraOnly && onRequestNormalLaneTab && (

  472.           <Box sx={{ display: "flex", alignItems: "center", pt: 0.5 }}>

  473.             <Button variant="outlined" onClick={() => onRequestNormalLaneTab()}>

  474.               {t("Back to normal assign tab")}

  475.             </Button>

  476.           </Box>

  477.         )}

  478.         */}

  479.       </Stack>

  480. 

  481.       {!inEtraUi ? (

  482.       <Grid container spacing={2}>

  483.         {ticketFloor === "2/F" && (

  484.           <Grid item xs={12}>

  485.             <Stack direction="row" spacing={2} alignItems="flex-start">

  486.               <Typography variant="h6" sx={{ fontWeight: 600, minWidth: 60, pt: 1 }}>2/F</Typography>

  487.               <Box sx={{ border: "1px solid #e0e0e0", borderRadius: 1, p: 1, backgroundColor: "#fafafa", flex: 1 }}>

  488.                 {isLoadingSummary ? <Typography variant="caption">{t("Loading...")}</Typography> : !summary2F?.rows?.length ? renderNoEntry() : (

  489.                   <Grid container spacing={1}>

  490.                     {summary2F.rows.map((row) => (

  491.                       <Grid item xs={12} key={row.truckDepartureTime}>

  492.                         <Stack direction={{ xs: "column", sm: "row" }} spacing={1} alignItems={{ xs: "stretch", sm: "center" }} sx={{ border: "1px solid #e0e0e0", borderRadius: 0.5, p: 1, backgroundColor: "#fff" }}>

  493.                           <Typography variant="body2" sx={{ fontWeight: 600, minWidth: { sm: 60 } }}>{row.truckDepartureTime}</Typography>

  494.                           <Stack direction="row" flexWrap="wrap" sx={{ gap: 1 }}>

  495.                             {row.lanes.map((lane) => (

  496.                               <Button key={`${row.truckDepartureTime}-${lane.truckLanceCode}`} variant="outlined" disabled={lane.unassigned === 0 || isAssigning} onClick={() => void handleLaneButtonClick("2/F", row.truckDepartureTime, lane.truckLanceCode, null, selectedDate, lane.unassigned, lane.total)}>

  497.                                 {`${lane.truckLanceCode} (${lane.unassigned}/${lane.total})`}

  498.                               </Button>

  499.                             ))}

  500.                           </Stack>

  501.                         </Stack>

  502.                       </Grid>

  503.                     ))}

  504.                   </Grid>

  505.                 )}

  506.               </Box>

  507.             </Stack>

  508.           </Grid>

  509.         )}

  510. 

  511.         {ticketFloor === "4/F" && (

  512.           <Grid item xs={12}>

  513.             <Stack direction="row" spacing={2} alignItems="flex-start">

  514.               <Typography variant="h6" sx={{ fontWeight: 600, minWidth: 60, pt: 1 }}>4/F</Typography>

  515.               <Box sx={{ border: "1px solid #e0e0e0", borderRadius: 1, p: 1, backgroundColor: "#fafafa", flex: 1 }}>

  516.                 {isLoadingSummary ? <Typography variant="caption">{t("Loading...")}</Typography> : !truckGroups4F.length ? renderNoEntry() : (

  517.                   <Grid container spacing={1}>

  518.                     {truckGroups4F.map(({ truckLanceCode, slots }) => (

  519.                       <Grid item xs={12} key={truckLanceCode}>

  520.                         <Stack direction={{ xs: "column", sm: "row" }} spacing={1} alignItems={{ xs: "stretch", sm: "center" }} sx={{ border: "1px solid #e0e0e0", borderRadius: 0.5, p: 1, backgroundColor: "#fff" }}>

  521.                           <Typography variant="body2" sx={{ fontWeight: 700, minWidth: { sm: 160 } }}>{truckLanceCode}</Typography>

  522.                           <Stack direction="row" flexWrap="wrap" sx={{ gap: 1 }}>

  523.                             {slots.map((slot) => {

  524.                               const handlerName = (slot.lane.handlerName ?? "").trim();

  525.                               return (

  526.                                 <Button key={`${truckLanceCode}-${slot.sequenceIndex}-${slot.truckDepartureTime}`} variant="outlined" disabled={slot.lane.unassigned === 0 || isAssigning} onClick={() => void handleLaneButtonClick("4/F", slot.truckDepartureTime, slot.lane.truckLanceCode, slot.lane.loadingSequence ?? null, selectedDate, slot.lane.unassigned, slot.lane.total)}>

  527.                                   {`${t("Loading sequence n", { n: slot.lane.loadingSequence ?? slot.sequenceIndex })} (${slot.lane.unassigned}/${slot.lane.total})${handlerName ? ` ${handlerName}` : ""}`}

  528.                                 </Button>

  529.                               );

  530.                             })}

  531.                           </Stack>

  532.                         </Stack>

  533.                       </Grid>

  534.                     ))}

  535.                   </Grid>

  536.                 )}

  537.               </Box>

  538.             </Stack>

  539.           </Grid>

  540.         )}

  541. 

  542.         <Grid item xs={12}>

  543.           <Stack direction="row" spacing={2} alignItems="flex-start">

  544.             <Stack sx={{ minWidth: 60, pt: 1 }} spacing={0.25}>

  545.               <Typography sx={{ fontWeight: 600 }}>{t("Truck X")}</Typography>

  546.               {/*

  547.               <Typography variant="caption" color="text.secondary" sx={{ lineHeight: 1.2 }}>

  548.                 {t("Required Date")}: {selectedDeliveryDateYmd}

  549.               </Typography>

  550.               */}

  551.             </Stack>

  552.             <Box sx={{ border: "1px solid #e0e0e0", borderRadius: 1, p: 1, backgroundColor: "#fafafa", flex: 1 }}>

  553.               {defaultTruckCount === 0 ? (

  554.                 renderNoEntry()

  555.               ) : (

  556.                 <Button

  557.                   variant="outlined"

  558.                   onClick={() => {

  559.                     clearModalEtraContext();

  560.                     setSelectedStore("");

  561.                     setSelectedTruck("車線-X");

  562.                     setIsDefaultTruck(true);

  563.                     setDefaultDateScope("today");

  564.                     setModalTruckXFloor(ticketFloorApiKey);

  565.                     setModalOpen(true);

  566.                   }}

  567.                 >

  568.                   {/*{`${selectedDeliveryDateYmd} (${defaultTruckCount})`}*/}

  569.                   {t("車線-X")}({defaultTruckCount})

  570.                 </Button>

  571.               )}

  572.             </Box>

  573.           </Stack>

  574.         </Grid>

  575. 

  576.         <Grid item xs={12}>

  577.           <Box sx={{ py: 2, mt: 1, mb: 0.5, borderTop: "1px solid #e0e0e0" }}>

  578.             <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 0.5 }}>

  579.               {t("Not yet finished released do pick orders")}

  580.             </Typography>

  581.             <Typography variant="body2" color="text.secondary">

  582.               {t("Released orders not yet completed - click lane to select and assign")}

  583.             </Typography>

  584.           </Box>

  585.         </Grid>

  586. 

  587.         {ticketFloor === "2/F" && (

  588.           <Grid item xs={12}>

  589.             <Stack direction="row" spacing={2} alignItems="flex-start">

  590.               <Typography variant="h6" sx={{ fontWeight: 600, minWidth: 60, pt: 1 }}>2/F</Typography>

  591.               <Box sx={{ border: "1px solid #e0e0e0", borderRadius: 1, p: 1, backgroundColor: "#fafafa", flex: 1 }}>

  592.                 {truckCounts2F.length === 0 ? renderNoEntry() : (

  593.                   <Grid container spacing={1}>

  594.                     {truckCounts2F.map(({ truck, count }) => (

  595.                       <Grid item xs={6} sm={4} md={3} key={`2F-${truck}`} sx={{ display: "flex" }}>

  596.                         <Button

  597.                           variant="outlined"

  598.                           onClick={() => {

  599.                             clearModalEtraContext();

  600.                             setIsDefaultTruck(false);

  601.                             setSelectedStore("2/F");

  602.                             setSelectedTruck(truck);

  603.                             setModalOpen(true);

  604.                           }}

  605.                           sx={{ flex: 1 }}

  606.                         >

  607.                           {`${truck} (${count})`}

  608.                         </Button>

  609.                       </Grid>

  610.                     ))}

  611.                   </Grid>

  612.                 )}

  613.               </Box>

  614.             </Stack>

  615.           </Grid>

  616.         )}

  617. 

  618.         {ticketFloor === "4/F" && (

  619.           <Grid item xs={12}>

  620.             <Stack direction="row" spacing={2} alignItems="flex-start">

  621.               <Typography variant="h6" sx={{ fontWeight: 600, minWidth: 60, pt: 1 }}>4/F</Typography>

  622.               <Box sx={{ border: "1px solid #e0e0e0", borderRadius: 1, p: 1, backgroundColor: "#fafafa", flex: 1 }}>

  623.                 {truckCounts4F.length === 0 ? renderNoEntry() : (

  624.                   <Grid container spacing={1}>

  625.                     {truckCounts4F.map(({ truck, count }) => (

  626.                       <Grid item xs={6} sm={4} md={3} key={`4F-${truck}`} sx={{ display: "flex" }}>

  627.                         <Button

  628.                           variant="outlined"

  629.                           onClick={() => {

  630.                             clearModalEtraContext();

  631.                             setIsDefaultTruck(false);

  632.                             setSelectedStore("4/F");

  633.                             setSelectedTruck(truck);

  634.                             setModalOpen(true);

  635.                           }}

  636.                           sx={{ flex: 1 }}

  637.                         >

  638.                           {`${truck} (${count})`}

  639.                         </Button>

  640.                       </Grid>

  641.                     ))}

  642.                   </Grid>

  643.                 )}

  644.               </Box>

  645.             </Stack>

  646.           </Grid>

  647.         )}

  648. 

  649.         <Grid item xs={12}>

  650.           <Stack direction="row" spacing={2} alignItems="flex-start">

  651.             <Stack sx={{ minWidth: 60, pt: 1 }} spacing={0.25}>

  652.               <Typography sx={{ fontWeight: 600 }}>{t("Truck X")}</Typography>

  653.               <Typography variant="caption" color="text.secondary" sx={{ lineHeight: 1.2 }}>

  654.                 {t("Before today")}

  655.               </Typography>

  656.             </Stack>

  657.             <Box sx={{ border: "1px solid #e0e0e0", borderRadius: 1, p: 1, backgroundColor: "#fafafa", flex: 1 }}>

  658.               {beforeTodayTruckXCount === 0 ? (

  659.                 renderNoEntry()

  660.               ) : (

  661.                 <Button

  662.                   variant="outlined"

  663.                   onClick={() => {

  664.                     clearModalEtraContext();

  665.                     setSelectedStore("");

  666.                     setSelectedTruck("車線-X");

  667.                     setIsDefaultTruck(true);

  668.                     setDefaultDateScope("before");

  669.                     setModalTruckXFloor(ticketFloorApiKey);

  670.                     setModalOpen(true);

  671.                   }}

  672.                 >

  673.                   {`${t("車線-X")} (${beforeTodayTruckXCount})`}

  674.                 </Button>

  675.               )}

  676.             </Box>

  677.           </Stack>

  678.         </Grid>

  679.       </Grid>

  680.       ) : (

  681.         <Box sx={{ border: "1px solid #e0e0e0", borderRadius: 1, p: 2, backgroundColor: "#fafafa" }}>

  682.           {isLoadingEtra ? (

  683.             <Typography variant="caption">{t("Loading...")}</Typography>

  684.           ) : etraGroups.length === 0 ? (

  685.             renderNoEntry()

  686.           ) : (

  687.             <Grid container spacing={2}>

  688.               {etraGroups.flatMap((group) =>

  689.                 group.lanes.map((lane, li) => {

  690.                   const sid = (lane.storeId ?? "").trim();

  691.                   const dep = (lane.truckDepartureTime ?? "").trim();

  692.                   const is4F = sid.replace(/\//g, "").toUpperCase() === "4F";

  693.                   const labelCore =

  694.                     is4F && lane.loadingSequence != null

  695.                       ? `${t("Loading sequence n", { n: lane.loadingSequence })} (${lane.unassigned}/${lane.total})`

  696.                       : `${dep ? `${dep} ` : ""}${lane.truckLanceCode} (${lane.unassigned}/${lane.total})`;

  697.                   const handlerName = (lane.handlerName ?? "").trim();

  698.                   const shopCode = (group.shopCode ?? "").trim();

  699.                   const shopName = (group.shopName ?? "").trim();

  700.                   const shopPrimary =

  701.                     shopCode && shopName && shopCode !== shopName

  702.                       ? `${shopCode} · ${shopName}`

  703.                       : shopName || shopCode || t("Shop");

  704.                   const laneSecondary = `${labelCore}${handlerName ? ` · ${handlerName}` : ""}`;

  705.                   const tileKey = `${shopCode}|${shopName}|${lane.truckLanceCode}|${dep}|${lane.loadingSequence ?? ""}|${li}`;

  706.                   return (

  707.                     <Grid item xs={12} sm={6} md={4} lg={3} key={tileKey}>

  708.                       <Button

  709.                         fullWidth

  710.                         variant="outlined"

  711.                         disabled={lane.unassigned === 0 || !sid}

  712.                         onClick={() => {

  713.                           setModalReleaseTypeFilter("isExtra");

  714.                           setModalFilterRequiredDeliveryDate(selectedDeliveryDateYmd);

  715.                           setModalInitialShopSearch((group.shopName || group.shopCode || "").trim() || undefined);

  716.                           setSelectedStore(sid);

  717.                           setSelectedTruck(lane.truckLanceCode);

  718.                           setIsDefaultTruck(false);

  719.                           setDefaultDateScope("today");

  720.                           setModalOpen(true);

  721.                         }}

  722.                         sx={{

  723.                           height: "100%",

  724.                           minHeight: 72,

  725.                           py: 1.25,

  726.                           px: 1.5,

  727.                           display: "flex",

  728.                           flexDirection: "column",

  729.                           alignItems: "stretch",

  730.                           justifyContent: "flex-start",

  731.                           textAlign: "left",

  732.                           textTransform: "none",

  733.                           whiteSpace: "normal",

  734.                           borderColor: "secondary.main",

  735.                         }}

  736.                       >

  737.                         <Typography

  738.                           variant="subtitle2"

  739.                           component="span"

  740.                           color="secondary"

  741.                           sx={{ fontWeight: 700, lineHeight: 1.35, wordBreak: "break-word" }}

  742.                         >

  743.                           {shopPrimary}

  744.                         </Typography>

  745.                         <Typography

  746.                           variant="caption"

  747.                           component="span"

  748.                           color="text.secondary"

  749.                           sx={{ mt: 0.5, lineHeight: 1.35, wordBreak: "break-word" }}

  750.                         >

  751.                           {laneSecondary}

  752.                         </Typography>

  753.                       </Button>

  754.                     </Grid>

  755.                   );

  756.                 }),

  757.               )}

  758.             </Grid>

  759.           )}

  760.         </Box>

  761.       )}

  762. 

  763.         <ReleasedDoPickOrderSelectModal

  764.           open={modalOpen}

  765.           storeId={selectedStore}

  766.           truck={selectedTruck}

  767.           isDefaultTruck={isDefaultTruck}

  768.           defaultDateScope={defaultDateScope}

  769.           defaultTruckRequiredDeliveryDate={selectedDeliveryDateYmd}

  770.           listBridge={workbenchReleasedListBridge}

  771.           releaseTypeFilter={modalReleaseTypeFilter}

  772.           filterRequiredDeliveryDate={modalFilterRequiredDeliveryDate}

  773.           initialShopSearch={modalInitialShopSearch}

  774.           truckXFloor={modalTruckXFloor}

  775.           onClose={() => {

  776.             setModalOpen(false);

  777.             clearModalEtraContext();

  778.           }}

  779.           onAssigned={() => {

  780.             if (inEtraUi) void loadEtraSummaries();

  781.             else void loadSummaries();

  782.             onPickOrderAssigned?.();

  783.             onSwitchToDetailTab?.();

  784.           }}

  785.         />

  786.       <WorkbenchEtraMergeDialog

  787.         open={etraMergeDialogOpen}

  788.         onClose={() => setEtraMergeDialogOpen(false)}

  789.         initialDateYmd={selectedDeliveryDateYmd}

  790.         onMerged={() => {

  791.           void loadEtraSummaries();

  792.           onPickOrderAssigned?.();

  793.           window.dispatchEvent(new Event("pickOrderAssigned"));

  794.         }}

  795.       />

  796.     </Box>

  797.   );

  798. };

  799. 

  800. export default WorkbenchFloorLanePanel;