@seedtactics/insight-client 16.5.2 → 16.7.0

package/dist/components/station-monitor/SystemOverview.js

@@ -31,11 +31,11 @@ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
-import { useState, useRef, memo } from "react";
+import { useState, useRef, memo, Fragment } from "react";
 import { Paper, ButtonBase, Box, Typography, Collapse, Stack, Menu, MenuItem, LinearProgress, Badge, Button, Dialog, DialogContent, AppBar, Toolbar, IconButton, useTheme, } from "@mui/material";
 import { Close as CloseIcon } from "@mui/icons-material";
 import { InProcMaterial, MaterialAction, MaterialDialog, PartIdenticon } from "./Material.js";
-import { ActionType, LocType, PalletLocationEnum, } from "../../network/api.js";
+import { ActionType, BasketLocationEnum, LocType, PalletLocationEnum, } from "../../network/api.js";
 import { currentStatus, secondsSinceEpochAtom } from "../../cell-status/current-status.js";
 import { LazySeq, OrderedMap } from "@seedtactics/immutable-collections";
 import { materialDialogOpen } from "../../cell-status/material-details.js";
@@ -47,14 +47,22 @@ import { QuarantineMatButton } from "./QuarantineButton.js";
 import { SelectInspTypeDialog, SignalInspectionButton } from "./SelectInspType.js";
 import { useSetTitle } from "../routes.js";
 import { useAtomValue, useSetAtom } from "jotai";
+import { fmsInformation } from "../../network/server-settings.js";
+import { basketDisplayName, loadStationDisplayName } from "../../cell-status/station-cycles.js";
 const CollapsedIconSize = 45;
 const rowSize = CollapsedIconSize + 10; // each material row has 5px above and 5px below for padding
 function useCellOverview() {
     const currentSt = useAtomValue(currentStatus);
     const jobs = useAtomValue(last30Jobs);
+    const fmsInfo = useAtomValue(fmsInformation);
     const matByPal = LazySeq.of(currentSt.material)
         .filter((m) => m.location.type === LocType.OnPallet || m.action.type === ActionType.Loading)
         .toRLookup((m) => m.location.palletNum ?? m.action.loadOntoPalletNum ?? 0);
+    const matByBasket = LazySeq.of(currentSt.material)
+        .filter((m) => m.location.type === LocType.InBasket &&
+        m.location.basketId !== null &&
+        m.location.basketId !== undefined)
+        .toRLookup((m) => m.location.basketId ?? 0);
     let loads = LazySeq.ofObject(currentSt.pallets)
         .filter(([_, p]) => p.currentPalletLocation.loc === PalletLocationEnum.LoadUnload)
         .toOrderedMap(([_, p]) => [
@@ -62,6 +70,9 @@ function useCellOverview() {
         {
             lulNum: p.currentPalletLocation.num,
             pal: { pallet: p, mats: matByPal.get(p.palletNum) ?? [] },
+            basket: null,
+            staging: [],
+            sources: [],
         },
     ]);
     let machines = LazySeq.ofObject(currentSt.pallets)
@@ -115,12 +126,19 @@ function useCellOverview() {
     let maxNumFacesOnPallet = 1;
     const cutoff = addDays(new Date(), -7);
     // now add empty locations
-    const allPaths = jobs
+    // Materialize ProcessInfo so we can iterate it at two levels (proc for basket stations, paths for the rest)
+    const allProcs = jobs
         .valuesToLazySeq()
         .filter((j) => j.routeEndUTC > cutoff)
         .concat(LazySeq.ofObject(currentSt.jobs).map(([_, j]) => j))
         .flatMap((j) => j.procsAndPaths)
-        .flatMap((p) => p.paths);
+        .toRArray();
+    for (const proc of allProcs) {
+        for (const lul of (proc.basketLoadStations ?? []).concat(proc.basketUnloadStations ?? [])) {
+            maxLoadNum = Math.max(maxLoadNum, lul);
+        }
+    }
+    const allPaths = LazySeq.of(allProcs).flatMap((p) => p.paths);
     for (const path of allPaths) {
         for (const lul of path.load.concat(path.unload)) {
             maxLoadNum = Math.max(maxLoadNum, lul);
@@ -154,6 +172,9 @@ function useCellOverview() {
             return {
                 lulNum: i,
                 pal: null,
+                basket: null,
+                staging: [],
+                sources: [],
             };
         });
     }
@@ -211,12 +232,120 @@ function useCellOverview() {
             }
         }
     }
+    const stagedBaskets = new Map();
+    const activeBaskets = new Map();
+    const floatingBaskets = new Map();
+    let storageEmpty = 0;
+    let storageFilled = 0;
+    for (const basket of LazySeq.ofObject(currentSt.baskets ?? {})
+        .map(([_, b]) => b)
+        .sortBy((b) => b.basketId)) {
+        const basketWithMaterial = {
+            basket,
+            mats: matByBasket.get(basket.basketId) ?? [],
+        };
+        switch (basket.location) {
+            case BasketLocationEnum.Storage:
+                if (basketWithMaterial.mats.length > 0) {
+                    storageFilled += 1;
+                }
+                else {
+                    storageEmpty += 1;
+                }
+                break;
+            case BasketLocationEnum.LoadUnload:
+            case BasketLocationEnum.LoadStationStaging: {
+                const loadNum = basket.locationNum;
+                if (loadNum === null) {
+                    floatingBaskets.set(basket.basketId, basketWithMaterial);
+                    break;
+                }
+                const byLoad = basket.location === BasketLocationEnum.LoadUnload ? activeBaskets : stagedBaskets;
+                const prev = byLoad.get(loadNum) ?? [];
+                prev.push(basketWithMaterial);
+                byLoad.set(loadNum, prev);
+                break;
+            }
+            case BasketLocationEnum.InTransit:
+                floatingBaskets.set(basket.basketId, basketWithMaterial);
+                break;
+        }
+    }
+    let maxNumStagingRows = 0;
+    let maxNumSourceRows = 0;
+    loads = loads.mapValues((load) => {
+        const sourceRows = new Map();
+        const sourceMats = LazySeq.of(load.pal?.mats ?? load.basket?.mats ?? [])
+            .filter((mat) => mat.location.type !== LocType.OnPallet)
+            .toRArray();
+        for (const mat of sourceMats) {
+            if (mat.location.type === LocType.Free) {
+                const key = "free";
+                const row = sourceRows.get(key) ?? {
+                    label: "To Load",
+                    mats: [],
+                };
+                row.mats.push(mat);
+                sourceRows.set(key, row);
+                continue;
+            }
+            if (mat.action.loadFromBasketId !== null && mat.action.loadFromBasketId !== undefined) {
+                const key = `basket:${mat.action.loadFromBasketId}`;
+                const row = sourceRows.get(key) ?? {
+                    label: `From ${basketDisplayName(fmsInfo.basketName)} ${mat.action.loadFromBasketId}`,
+                    mats: [],
+                };
+                row.mats.push(mat);
+                sourceRows.set(key, row);
+                continue;
+            }
+            if (mat.location.type === LocType.InQueue && mat.location.currentQueue) {
+                const key = `queue:${mat.location.currentQueue}`;
+                const row = sourceRows.get(key) ?? {
+                    label: `From ${mat.location.currentQueue}`,
+                    mats: [],
+                };
+                row.mats.push(mat);
+                sourceRows.set(key, row);
+            }
+        }
+        const currentBasket = LazySeq.of(activeBaskets.get(load.lulNum) ?? [])
+            .sortBy((b) => b.basket.locationNum)
+            .toRArray();
+        // Extras beyond the first active basket at this station fall back to floating
+        for (const extra of currentBasket.slice(1)) {
+            floatingBaskets.set(extra.basket.basketId, extra);
+        }
+        const loadingFromBasketIds = new Set(LazySeq.of(load.pal?.mats ?? [])
+            .collect((mat) => mat.action.loadFromBasketId ?? null)
+            .toRArray());
+        const staging = LazySeq.of(stagedBaskets.get(load.lulNum) ?? [])
+            .filter((basket) => !loadingFromBasketIds.has(basket.basket.basketId))
+            .sortBy((b) => b.basket.locationNum)
+            .toRArray();
+        maxNumStagingRows = Math.max(maxNumStagingRows, staging.length);
+        const sources = LazySeq.of(sourceRows)
+            .map(([key, row]) => ({ key, label: row.label, mats: row.mats }))
+            .sortBy((row) => row.label)
+            .toRArray();
+        maxNumSourceRows = Math.max(maxNumSourceRows, sources.length);
+        return {
+            ...load,
+            basket: currentBasket[0] ?? null,
+            staging,
+            sources,
+        };
+    });
     return {
         machines: machines.mapValues((group) => group.valuesToAscLazySeq().toRArray()),
         loads: loads.valuesToAscLazySeq().toRArray(),
         stockerPals: stockerPals.valuesToAscLazySeq().toRArray(),
+        floatingBaskets: LazySeq.of(floatingBaskets.values()).toRArray(),
+        storageBaskets: storageEmpty + storageFilled > 0 ? { empty: storageEmpty, filled: storageFilled } : null,
         machineAtLoad: machAtLoad.valuesToAscLazySeq().toRArray(),
         maxNumFacesOnPallet,
+        maxNumStagingRows,
+        maxNumSourceRows,
     };
 }
 function MaterialIcon({ mats }) {
@@ -253,27 +382,77 @@ function MaterialIcon({ mats }) {
         const name = pallet != null && pallet != undefined ? curSt.pallets[pallet]?.faceNames?.[faceNum - 1] : null;
         return name ?? "Face: " + faceNum.toString();
     }
-    return (_jsxs(Box, { sx: { width: CollapsedIconSize, height: CollapsedIconSize, overflow: "visible" }, children: [_jsx(Paper, { elevation: 4, onPointerEnter: enter, onPointerLeave: leave, sx: { position: "relative", zIndex: open ? 10 : 0, width: "max-content", height: "max-content" }, children: _jsx(Badge, { badgeContent: mats.length > 1 ? mats.length : 0, color: "secondary", children: _jsx(ButtonBase, { focusRipple: true, onClick: click, ref: btnRef, children: _jsx(Collapse, { orientation: "horizontal", in: open, collapsedSize: CollapsedIconSize, children: _jsxs(Box, { display: "flex", children: [_jsx(PartIdenticon, { part: mats[0].partName, size: CollapsedIconSize }), _jsx(Box, { marginLeft: "10px", marginRight: "10px", whiteSpace: "nowrap", textAlign: "left", children: _jsx(Collapse, { in: open, collapsedSize: CollapsedIconSize, children: _jsxs(Stack, { direction: "column", marginBottom: "0.2em", children: [_jsxs(Typography, { variant: "h6", children: [mats[0].partName, "-", mats[0].process] }), _jsx("div", { children: _jsx("small", { children: faceName(mats[0].location.palletNum, mats[0].location.face) ??
+    return (_jsxs(Box, { sx: { width: CollapsedIconSize, height: CollapsedIconSize, overflow: "visible" }, children: [_jsx(Paper, { elevation: 4, onPointerEnter: enter, onPointerLeave: leave, sx: { position: "relative", zIndex: open ? 10 : 0, width: "max-content", height: "max-content" }, children: _jsx(Badge, { badgeContent: mats.length > 1 ? mats.length : 0, color: "secondary", children: _jsx(ButtonBase, { focusRipple: true, onClick: click, ref: btnRef, children: _jsx(Collapse, { orientation: "horizontal", in: open, collapsedSize: CollapsedIconSize, children: _jsxs(Box, { sx: {
+                                    display: "flex",
+                                }, children: [_jsx(PartIdenticon, { part: mats[0].partName, size: CollapsedIconSize }), _jsx(Box, { sx: {
+                                            marginLeft: "10px",
+                                            marginRight: "10px",
+                                            whiteSpace: "nowrap",
+                                            textAlign: "left",
+                                        }, children: _jsx(Collapse, { in: open, collapsedSize: CollapsedIconSize, children: _jsxs(Stack, { direction: "column", sx: {
+                                                    marginBottom: "0.2em",
+                                                }, children: [_jsxs(Typography, { variant: "h6", children: [mats[0].partName, "-", mats[0].process] }), _jsx("div", { children: _jsx("small", { children: faceName(mats[0].location.palletNum, mats[0].location.face) ??
                                                                 faceName(mats[0].action.loadOntoPalletNum, mats[0].action.loadOntoFace) }) }), LazySeq.of(mats).collect((mat) => mat.serial ? (_jsx("div", { children: _jsxs("small", { children: ["Serial: ", mat.serial] }) }, mat.materialID)) : undefined), _jsx("div", { children: _jsx(MaterialAction, { mat: mats[0] }) })] }) }) })] }) }) }) }) }), _jsx(Menu, { anchorEl: btnRef.current, open: menuOpen, onClose: () => setMenuOpen(false), anchorOrigin: { vertical: "top", horizontal: "left" }, children: LazySeq.of(mats).map((mat, idx) => (_jsx(MenuItem, { onClick: () => {
                         setMenuOpen(false);
                         setMatToShow({ type: "MatDetails", details: mat });
                     }, children: mat.serial && mat.serial !== "" ? mat.serial : (idx + 1).toString() }, mat.materialID))) })] }));
 }
-function PalletFaces({ maxNumFaces, mats, loadingOntoPallet, noFilter, showExpanded, }) {
+function PalletFaces({ maxNumFaces, mats: allMats, loadingOntoPallet, noFilter, showExpanded, }) {
     if (showExpanded && maxNumFaces === 1) {
-        return (_jsx(Box, { display: "flex", flexDirection: "column", flexWrap: "wrap", children: mats.map((mat) => (_jsx(InProcMaterial, { mat: mat }, mat.materialID))) }));
+        return (_jsx(Box, { sx: {
+                display: "flex",
+                flexDirection: "column",
+                flexWrap: "wrap",
+            }, children: allMats.map((mat) => (_jsx(InProcMaterial, { mat: mat }, mat.materialID))) }));
     }
     else {
         const byFace = loadingOntoPallet
-            ? LazySeq.of(mats)
+            ? LazySeq.of(allMats)
                 .filter((m) => noFilter || m.location.type !== LocType.OnPallet)
                 .orderedGroupBy((m) => m.action.loadOntoFace ?? 1)
-            : LazySeq.of(mats)
+            : LazySeq.of(allMats)
                 .filter((m) => noFilter || m.location.type === LocType.OnPallet)
                 .orderedGroupBy((m) => m.action.type === ActionType.Loading ? (m.action.loadOntoFace ?? 1) : (m.location.face ?? 1));
-        return (_jsx(Box, { display: "grid", gridTemplateRows: `${CollapsedIconSize}px`, gridTemplateColumns: `repeat(${maxNumFaces}, ${CollapsedIconSize}px)`, columnGap: "5px", height: "100%", alignContent: "center", justifyContent: "center", children: byFace.map(([face, mats]) => (_jsx(Box, { gridColumn: face, gridRow: 1, children: _jsx(MaterialIcon, { mats: mats }) }, face))) }));
+        return (_jsx(Box, { sx: {
+                display: "grid",
+                gridTemplateRows: `${CollapsedIconSize}px`,
+                gridTemplateColumns: `repeat(${maxNumFaces}, ${CollapsedIconSize}px)`,
+                columnGap: "5px",
+                height: "100%",
+                alignContent: "center",
+                justifyContent: "center",
+            }, children: byFace.map(([face, mats]) => (_jsx(Box, { sx: {
+                    gridColumn: face,
+                    gridRow: 1,
+                }, children: _jsx(MaterialIcon, { mats: mats }) }, face))) }));
     }
 }
+function BasketContents({ mats }) {
+    const byPosition = LazySeq.of(mats).orderedGroupBy((m) => (m.location.basketSubPosition ?? 0) + 1);
+    return (_jsx(Box, { sx: {
+            display: "flex",
+            flexWrap: "wrap",
+            justifyContent: "flex-start",
+            alignItems: "flex-start",
+            gap: "5px",
+            minHeight: `${CollapsedIconSize}px`,
+            paddingLeft: "5px",
+            paddingRight: "5px",
+            height: "100%",
+            alignContent: "center",
+        }, children: byPosition.map(([position, bucketMats]) => (_jsx(Box, { children: _jsx(MaterialIcon, { mats: bucketMats }) }, position))) }));
+}
+function SourceRowContents({ mats, maxNumFaces, }) {
+    return (_jsx(Box, { sx: {
+            minHeight: `${rowSize}px`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            paddingLeft: "5px",
+            gap: "5px",
+            paddingRight: "5px",
+        }, children: _jsx(PalletFaces, { mats: mats, maxNumFaces: maxNumFaces, loadingOntoPallet: true }) }));
+}
 function gridTemplateColumns(maxNumFaces, includeLabelCol) {
     // each material column is at least CollapsedIconSize * (maxNumFaces) for the icon + 5px * (maxNumFaces + 1) for the columnGap in PalletFaces
     const colSize = CollapsedIconSize * maxNumFaces + 5 * (maxNumFaces + 1);
@@ -337,7 +516,52 @@ function MachineLabel({ machine }) {
     return (_jsxs("div", { children: [_jsx(Typography, { variant: "h5", children: machine.name }), _jsx(Typography, { variant: "subtitle1", children: status }), machining ? (elapsed === null ? (_jsx(LinearProgress, {})) : elapsed < 0 ? (_jsx(LinearProgress, { color: "error" })) : (_jsx(LinearProgress, { variant: "determinate", value: elapsed }))) : undefined] }));
 }
 function Machine({ maxNumFaces, machine }) {
-    return (_jsxs(Box, { display: "grid", border: "1px solid black", margin: "5px", gridTemplateRows: `auto ${rowSize}px ${rowSize}px ${rowSize}px`, gridTemplateColumns: gridTemplateColumns(maxNumFaces, true), gridTemplateAreas: `"machname machname" "inboundpal inboundmat" "worktablepal worktablemat" "outboundpal outboundmat"`, children: [_jsx(Box, { gridArea: "machname", padding: "0.2em", borderBottom: "1px solid black", children: _jsx(MachineLabel, { machine: machine }) }), _jsx(Box, { gridArea: "inboundpal", borderRight: "1px solid black", borderBottom: "1px solid black", padding: "2px", children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", textAlign: "center", children: "In" }), machine.inbound ? (_jsx(Typography, { variant: "h6", textAlign: "center", children: machine.inbound.pallet.palletNum })) : undefined] }) }), _jsx(Box, { gridArea: "inboundmat", borderBottom: "1px solid black", children: machine.inbound ? _jsx(PalletFaces, { mats: machine.inbound.mats, maxNumFaces: maxNumFaces }) : undefined }), _jsx(Box, { gridArea: "worktablepal", borderRight: "1px solid black", borderBottom: "1px solid black", padding: "2px", children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", textAlign: "center", children: "Work" }), machine.worktable ? (_jsx(Typography, { variant: "h6", textAlign: "center", children: machine.worktable.pallet.palletNum })) : undefined] }) }), _jsx(Box, { gridArea: "worktablemat", borderBottom: "1px solid black", children: machine.worktable ? (_jsx(PalletFaces, { mats: machine.worktable.mats, maxNumFaces: maxNumFaces })) : undefined }), _jsx(Box, { gridArea: "outboundpal", borderRight: "1px solid black", padding: "2px", children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", textAlign: "center", children: "Out" }), machine.outbound ? (_jsx(Typography, { variant: "h6", textAlign: "center", children: machine.outbound.pallet.palletNum })) : undefined] }) }), _jsx(Box, { gridArea: "outboundmat", children: machine.outbound ? (_jsx(PalletFaces, { mats: machine.outbound.mats, maxNumFaces: maxNumFaces })) : undefined })] }));
+    return (_jsxs(Box, { sx: {
+            display: "grid",
+            border: "1px solid black",
+            margin: "5px",
+            gridTemplateRows: `auto ${rowSize}px ${rowSize}px ${rowSize}px`,
+            gridTemplateColumns: gridTemplateColumns(maxNumFaces, true),
+            gridTemplateAreas: `"machname machname" "inboundpal inboundmat" "worktablepal worktablemat" "outboundpal outboundmat"`,
+        }, children: [_jsx(Box, { sx: {
+                    gridArea: "machname",
+                    padding: "0.2em",
+                    borderBottom: "1px solid black",
+                }, children: _jsx(MachineLabel, { machine: machine }) }), _jsx(Box, { sx: {
+                    gridArea: "inboundpal",
+                    borderRight: "1px solid black",
+                    borderBottom: "1px solid black",
+                    padding: "2px",
+                }, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", sx: {
+                                textAlign: "center",
+                            }, children: "In" }), machine.inbound ? (_jsx(Typography, { variant: "h6", sx: {
+                                textAlign: "center",
+                            }, children: machine.inbound.pallet.palletNum })) : undefined] }) }), _jsx(Box, { sx: {
+                    gridArea: "inboundmat",
+                    borderBottom: "1px solid black",
+                }, children: machine.inbound ? _jsx(PalletFaces, { mats: machine.inbound.mats, maxNumFaces: maxNumFaces }) : undefined }), _jsx(Box, { sx: {
+                    gridArea: "worktablepal",
+                    borderRight: "1px solid black",
+                    borderBottom: "1px solid black",
+                    padding: "2px",
+                }, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", sx: {
+                                textAlign: "center",
+                            }, children: "Work" }), machine.worktable ? (_jsx(Typography, { variant: "h6", sx: {
+                                textAlign: "center",
+                            }, children: machine.worktable.pallet.palletNum })) : undefined] }) }), _jsx(Box, { sx: {
+                    gridArea: "worktablemat",
+                    borderBottom: "1px solid black",
+                }, children: machine.worktable ? (_jsx(PalletFaces, { mats: machine.worktable.mats, maxNumFaces: maxNumFaces })) : undefined }), _jsx(Box, { sx: {
+                    gridArea: "outboundpal",
+                    borderRight: "1px solid black",
+                    padding: "2px",
+                }, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", sx: {
+                                textAlign: "center",
+                            }, children: "Out" }), machine.outbound ? (_jsx(Typography, { variant: "h6", sx: {
+                                textAlign: "center",
+                            }, children: machine.outbound.pallet.palletNum })) : undefined] }) }), _jsx(Box, { sx: {
+                    gridArea: "outboundmat",
+                }, children: machine.outbound ? (_jsx(PalletFaces, { mats: machine.outbound.mats, maxNumFaces: maxNumFaces })) : undefined })] }));
 }
 function useElapsedLoadTime(material) {
     const mat = material?.find((m) => m.action.type === ActionType.Loading ||
@@ -359,11 +583,95 @@ function useElapsedLoadTime(material) {
     }
 }
 function LoadStationLabel({ load }) {
-    const status = useElapsedLoadTime(load.pal?.mats);
-    return (_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "baseline", children: [_jsxs(Typography, { variant: "h5", children: ["L/U ", load.lulNum] }), _jsx(Typography, { variant: "body1", children: status })] }));
+    const status = useElapsedLoadTime(load.pal?.mats ?? load.basket?.mats);
+    const fmsInfo = useAtomValue(fmsInformation);
+    return (_jsxs(Box, { sx: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "baseline",
+        }, children: [_jsx(Typography, { variant: "h5", children: loadStationDisplayName(load.lulNum, fmsInfo.loadStationNames) }), _jsx(Typography, { variant: "body1", children: status })] }));
 }
-function LoadStation({ maxNumFaces, load }) {
-    return (_jsxs(Box, { display: "grid", border: "1px solid black", margin: "5px", gridTemplateRows: `auto ${rowSize}px ${rowSize}px`, gridTemplateColumns: gridTemplateColumns(maxNumFaces, true), gridTemplateAreas: `"lulname lulname" "loading loadingmat" "currentpal currentmat"`, children: [_jsx(Box, { gridArea: "lulname", padding: "0.2em", borderBottom: "1px solid black", children: _jsx(LoadStationLabel, { load: load }) }), _jsx(Box, { gridArea: "loading", borderRight: "1px solid black", borderBottom: "1px solid black", padding: "2px", children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", textAlign: "center", children: "To" }), _jsx(Typography, { variant: "body1", textAlign: "center", children: "Load" })] }) }), _jsx(Box, { sx: { gridArea: "loadingmat", borderBottom: "1px solid black" }, children: load.pal ? (_jsx(PalletFaces, { mats: load.pal.mats, maxNumFaces: maxNumFaces, loadingOntoPallet: true })) : undefined }), _jsx(Box, { gridArea: "currentpal", borderRight: "1px solid black", padding: "2px", children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", textAlign: "center", children: "Pallet" }), load.pal ? (_jsx(Typography, { variant: "h6", textAlign: "center", children: load.pal.pallet.palletNum })) : undefined] }) }), _jsx(Box, { gridArea: "currentmat", children: load.pal ? _jsx(PalletFaces, { mats: load.pal.mats, maxNumFaces: maxNumFaces }) : undefined })] }));
+function LoadStation({ maxNumFaces, maxNumStagingRows, maxNumSourceRows, load, }) {
+    const fmsInfo = useAtomValue(fmsInformation);
+    const basketName = basketDisplayName(fmsInfo.basketName);
+    const currentLabel = load.pal ? "Pallet" : load.basket ? basketName : null;
+    const currentValue = load.pal
+        ? load.pal.pallet.palletNum.toString()
+        : load.basket
+            ? load.basket.basket.basketId.toString()
+            : null;
+    const numSourceRows = Math.max(1, maxNumSourceRows);
+    const numStagingRows = Math.max(1, maxNumStagingRows);
+    const sourceAreaRows = Array.from({ length: numSourceRows }, (_, i) => `"source${i} sourcemat${i}"`);
+    const stagingAreaRows = Array.from({ length: numStagingRows }, (_, i) => `"stage${i} stagemat${i}"`);
+    const gridTemplateAreas = [
+        '"lulname lulname"',
+        ...sourceAreaRows,
+        '"current currentmat"',
+        ...stagingAreaRows,
+    ].join(" ");
+    const totalDataRows = numSourceRows + 1 + numStagingRows;
+    return (_jsxs(Box, { sx: {
+            display: "grid",
+            border: "1px solid black",
+            margin: "5px",
+            gridTemplateRows: `auto repeat(${totalDataRows}, ${rowSize}px)`,
+            gridTemplateColumns: gridTemplateColumns(maxNumFaces, true),
+            gridTemplateAreas,
+        }, children: [_jsx(Box, { sx: {
+                    gridArea: "lulname",
+                    padding: "0.2em",
+                    borderBottom: "1px solid black",
+                }, children: _jsx(LoadStationLabel, { load: load }) }), Array.from({ length: numSourceRows }, (_, i) => {
+                const row = load.sources[i] ?? null;
+                return (_jsxs(Fragment, { children: [_jsx(Box, { sx: {
+                                gridArea: `source${i}`,
+                                borderRight: "1px solid black",
+                                borderBottom: "1px solid black",
+                                padding: "2px",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                            }, children: row ? (_jsx(Typography, { variant: "body2", sx: { textAlign: "center" }, children: row.label })) : undefined }), _jsx(Box, { sx: {
+                                gridArea: `sourcemat${i}`,
+                                borderBottom: "1px solid black",
+                                display: "flex",
+                                flexDirection: "column",
+                                justifyContent: "center",
+                            }, children: row ? _jsx(SourceRowContents, { mats: row.mats, maxNumFaces: maxNumFaces }) : undefined })] }, `source-${i}`));
+            }), _jsx(Box, { sx: {
+                    gridArea: "current",
+                    borderRight: "1px solid black",
+                    borderBottom: "1px solid black",
+                    padding: "2px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: _jsxs(Stack, { children: [currentLabel ? (_jsx(Typography, { variant: "body1", sx: { textAlign: "center" }, children: currentLabel })) : undefined, currentValue ? (_jsx(Typography, { variant: "h6", sx: { textAlign: "center" }, children: currentValue })) : undefined] }) }), _jsxs(Box, { sx: {
+                    gridArea: "currentmat",
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    borderBottom: "1px solid black",
+                }, children: [load.pal ? _jsx(PalletFaces, { mats: load.pal.mats, maxNumFaces: maxNumFaces }) : undefined, !load.pal && load.basket ? _jsx(BasketContents, { mats: load.basket.mats }) : undefined] }), Array.from({ length: numStagingRows }, (_, i) => {
+                const row = load.staging[i] ?? null;
+                const isLastRow = i === numStagingRows - 1;
+                return (_jsxs(Fragment, { children: [_jsx(Box, { sx: {
+                                gridArea: `stage${i}`,
+                                borderRight: "1px solid black",
+                                ...(isLastRow ? {} : { borderBottom: "1px solid black" }),
+                                padding: "2px",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                            }, children: row ? (_jsxs(Typography, { variant: "body2", sx: { textAlign: "center" }, children: ["Staging ", basketName, " ", row.basket.basketId] })) : undefined }), _jsx(Box, { sx: {
+                                gridArea: `stagemat${i}`,
+                                ...(isLastRow ? {} : { borderBottom: "1px solid black" }),
+                                display: "flex",
+                                flexDirection: "column",
+                                justifyContent: "center",
+                            }, children: row ? _jsx(BasketContents, { mats: row.mats }) : undefined })] }, `stage-${i}`));
+            })] }));
 }
 function MachineAtLoadLabel({ status }) {
     const lulStatus = useElapsedLoadTime(status.loadingMats);
@@ -371,13 +679,118 @@ function MachineAtLoadLabel({ status }) {
     return (_jsxs("div", { children: [_jsxs(Typography, { variant: "h5", children: ["Station ", status.lulNum] }), status.machineCurrentlyAtLoad ? (_jsxs(_Fragment, { children: [_jsxs(Typography, { variant: "h5", children: [status.machineCurrentlyAtLoad.group, " ", status.machineCurrentlyAtLoad.num] }), _jsx(Typography, { variant: "subtitle1", children: mcStatus === "Idle" ? lulStatus : mcStatus }), machining ? (mcElapsed === null ? (_jsx(LinearProgress, {})) : mcElapsed < 0 ? (_jsx(LinearProgress, { color: "error" })) : (_jsx(LinearProgress, { variant: "determinate", value: mcElapsed }))) : undefined] })) : (_jsxs(_Fragment, { children: [status.machineMoving ? _jsx(Typography, { variant: "subtitle2", children: "Machine Moving" }) : undefined, _jsxs(Typography, { variant: "subtitle1", children: ["Loading ", lulStatus] })] }))] }));
 }
 function MachineAtLoad({ maxNumFaces, status }) {
-    return (_jsxs(Box, { display: "grid", border: "1px solid black", margin: "5px", gridTemplateRows: `minmax(104px, max-content) repeat(3, ${maxNumFaces > 1 ? rowSize.toString() + "px" : "minmax(110px, max-content)"})`, gridTemplateColumns: maxNumFaces === 1 ? "60px minmax(230px, max-content)" : gridTemplateColumns(maxNumFaces, true), gridTemplateAreas: `"name name" "ready readymat" "machining machiningmat" "loadstation loadstationmat"`, children: [_jsx(Box, { gridArea: "name", padding: "0.2em", borderBottom: "1px solid black", children: _jsx(MachineAtLoadLabel, { status: status }) }), _jsx(Box, { gridArea: "ready", borderRight: "1px solid black", borderBottom: "1px solid black", padding: "2px", children: _jsx(Typography, { variant: "body1", textAlign: "center", children: "Ready" }) }), _jsx(Box, { gridArea: "readymat", borderBottom: "1px solid black", display: "flex", flexDirection: "column", justifyContent: "center", children: _jsx(PalletFaces, { mats: status.readyMats, maxNumFaces: maxNumFaces, showExpanded: true }) }), _jsx(Box, { gridArea: "machining", borderRight: "1px solid black", borderBottom: "1px solid black", padding: "2px", children: _jsx(Typography, { variant: "body1", textAlign: "center", children: "Work" }) }), _jsx(Box, { gridArea: "machiningmat", borderBottom: "1px solid black", display: "flex", flexDirection: "column", justifyContent: "center", children: _jsx(PalletFaces, { mats: status.machiningMats, maxNumFaces: maxNumFaces, showExpanded: true }) }), _jsx(Box, { gridArea: "loadstation", borderRight: "1px solid black", padding: "2px", children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", textAlign: "center", children: "Load" }), _jsx(Typography, { variant: "body1", textAlign: "center", children: "Station" })] }) }), _jsx(Box, { gridArea: "loadstationmat", display: "flex", flexDirection: "column", justifyContent: "center", children: _jsx(PalletFaces, { mats: status.loadingMats, maxNumFaces: maxNumFaces, showExpanded: true, noFilter: true }) })] }));
+    return (_jsxs(Box, { sx: {
+            display: "grid",
+            border: "1px solid black",
+            margin: "5px",
+            gridTemplateRows: `minmax(104px, max-content) repeat(3, ${maxNumFaces > 1 ? rowSize.toString() + "px" : "minmax(110px, max-content)"})`,
+            gridTemplateColumns: maxNumFaces === 1 ? "60px minmax(230px, max-content)" : gridTemplateColumns(maxNumFaces, true),
+            gridTemplateAreas: `"name name" "ready readymat" "machining machiningmat" "loadstation loadstationmat"`,
+        }, children: [_jsx(Box, { sx: {
+                    gridArea: "name",
+                    padding: "0.2em",
+                    borderBottom: "1px solid black",
+                }, children: _jsx(MachineAtLoadLabel, { status: status }) }), _jsx(Box, { sx: {
+                    gridArea: "ready",
+                    borderRight: "1px solid black",
+                    borderBottom: "1px solid black",
+                    padding: "2px",
+                }, children: _jsx(Typography, { variant: "body1", sx: {
+                        textAlign: "center",
+                    }, children: "Ready" }) }), _jsx(Box, { sx: {
+                    gridArea: "readymat",
+                    borderBottom: "1px solid black",
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                }, children: _jsx(PalletFaces, { mats: status.readyMats, maxNumFaces: maxNumFaces, showExpanded: true }) }), _jsx(Box, { sx: {
+                    gridArea: "machining",
+                    borderRight: "1px solid black",
+                    borderBottom: "1px solid black",
+                    padding: "2px",
+                }, children: _jsx(Typography, { variant: "body1", sx: {
+                        textAlign: "center",
+                    }, children: "Work" }) }), _jsx(Box, { sx: {
+                    gridArea: "machiningmat",
+                    borderBottom: "1px solid black",
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                }, children: _jsx(PalletFaces, { mats: status.machiningMats, maxNumFaces: maxNumFaces, showExpanded: true }) }), _jsx(Box, { sx: {
+                    gridArea: "loadstation",
+                    borderRight: "1px solid black",
+                    padding: "2px",
+                }, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", sx: {
+                                textAlign: "center",
+                            }, children: "Load" }), _jsx(Typography, { variant: "body1", sx: {
+                                textAlign: "center",
+                            }, children: "Station" })] }) }), _jsx(Box, { sx: {
+                    gridArea: "loadstationmat",
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                }, children: _jsx(PalletFaces, { mats: status.loadingMats, maxNumFaces: maxNumFaces, showExpanded: true, noFilter: true }) })] }));
 }
 function StockerPallet({ maxNumFaces, pallet }) {
-    return (_jsxs(Box, { display: "grid", border: "1px solid black", margin: "5px", gridTemplateRows: `auto ${rowSize}px`, gridTemplateColumns: gridTemplateColumns(maxNumFaces, false), gridTemplateAreas: `"palname" "palmat"`, children: [_jsxs(Typography, { variant: "h5", gridArea: "palname", padding: "0.2em", borderBottom: "1px solid black", children: ["Pallet ", pallet.pallet.palletNum] }), _jsx(Box, { gridArea: "palmat", children: _jsx(PalletFaces, { mats: pallet.mats, maxNumFaces: maxNumFaces }) })] }));
+    return (_jsxs(Box, { sx: {
+            display: "grid",
+            border: "1px solid black",
+            margin: "5px",
+            gridTemplateRows: `auto ${rowSize}px`,
+            gridTemplateColumns: gridTemplateColumns(maxNumFaces, false),
+            gridTemplateAreas: `"palname" "palmat"`,
+        }, children: [_jsxs(Typography, { variant: "h5", sx: {
+                    gridArea: "palname",
+                    padding: "0.2em",
+                    borderBottom: "1px solid black",
+                }, children: ["Pallet ", pallet.pallet.palletNum] }), _jsx(Box, { sx: {
+                    gridArea: "palmat",
+                }, children: _jsx(PalletFaces, { mats: pallet.mats, maxNumFaces: maxNumFaces }) })] }));
+}
+function FloatingBasket({ basket }) {
+    const basketName = basketDisplayName(useAtomValue(fmsInformation).basketName);
+    return (_jsxs(Box, { sx: {
+            display: "grid",
+            border: "1px solid black",
+            margin: "5px",
+            gridTemplateRows: `auto ${rowSize}px`,
+            gridTemplateColumns: "minmax(120px, max-content)",
+            gridTemplateAreas: '"basketname" "basketmat"',
+        }, children: [_jsxs(Typography, { variant: "h5", sx: {
+                    gridArea: "basketname",
+                    padding: "0.2em",
+                    borderBottom: "1px solid black",
+                }, children: [basketName, " ", basket.basket.basketId] }), _jsx(Box, { sx: { gridArea: "basketmat" }, children: _jsx(BasketContents, { mats: basket.mats }) })] }));
+}
+function BasketStorageSummary({ empty, filled }) {
+    const basketName = basketDisplayName(useAtomValue(fmsInformation).basketName);
+    return (_jsxs(Box, { sx: {
+            display: "grid",
+            border: "1px solid black",
+            margin: "5px",
+            padding: "0.5em 1em",
+            alignContent: "center",
+            minWidth: "170px",
+        }, children: [_jsxs(Typography, { variant: "h5", children: [basketName, " Storage"] }), _jsxs(Typography, { variant: "body1", children: ["Empty: ", empty] }), _jsxs(Typography, { variant: "body1", children: ["Filled: ", filled] })] }));
 }
 export const SystemOverview = memo(function SystemOverview({ overview }) {
-    return (_jsxs("div", { children: [overview.machines.toAscLazySeq().map(([group, machines]) => (_jsx(Box, { display: "flex", flexWrap: "wrap", justifyContent: "space-evenly", children: machines.map((machine) => (_jsx(Machine, { machine: machine, maxNumFaces: overview.maxNumFacesOnPallet }, machine.name))) }, group))), overview.loads.length > 0 ? (_jsx(Box, { display: "flex", flexWrap: "wrap", justifyContent: "space-evenly", children: overview.loads.map((machine) => (_jsx(LoadStation, { load: machine, maxNumFaces: overview.maxNumFacesOnPallet }, machine.lulNum))) })) : undefined, overview.machineAtLoad.length > 0 ? (_jsx(Box, { display: "flex", flexWrap: "wrap", justifyContent: "space-evenly", children: overview.machineAtLoad.map((status) => (_jsx(MachineAtLoad, { status: status, maxNumFaces: overview.maxNumFacesOnPallet }, status.lulNum))) })) : undefined, overview.stockerPals.length > 0 ? (_jsx(Box, { display: "flex", flexWrap: "wrap", justifyContent: "space-evenly", children: overview.stockerPals.map((pal) => (_jsx(StockerPallet, { pallet: pal, maxNumFaces: overview.maxNumFacesOnPallet }, pal.pallet.palletNum))) })) : undefined] }));
+    return (_jsxs("div", { children: [overview.machines.toAscLazySeq().map(([group, machines]) => (_jsx(Box, { sx: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    justifyContent: "space-evenly",
+                }, children: machines.map((machine) => (_jsx(Machine, { machine: machine, maxNumFaces: overview.maxNumFacesOnPallet }, machine.name))) }, group))), overview.loads.length > 0 ? (_jsx(Box, { sx: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    justifyContent: "space-evenly",
+                }, children: overview.loads.map((machine) => (_jsx(LoadStation, { load: machine, maxNumFaces: overview.maxNumFacesOnPallet, maxNumStagingRows: overview.maxNumStagingRows, maxNumSourceRows: overview.maxNumSourceRows }, machine.lulNum))) })) : undefined, overview.machineAtLoad.length > 0 ? (_jsx(Box, { sx: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    justifyContent: "space-evenly",
+                }, children: overview.machineAtLoad.map((status) => (_jsx(MachineAtLoad, { status: status, maxNumFaces: overview.maxNumFacesOnPallet }, status.lulNum))) })) : undefined, overview.stockerPals.length > 0 || overview.floatingBaskets.length > 0 || overview.storageBaskets ? (_jsxs(Box, { sx: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    justifyContent: "space-evenly",
+                }, children: [overview.stockerPals.map((pal) => (_jsx(StockerPallet, { pallet: pal, maxNumFaces: overview.maxNumFacesOnPallet }, pal.pallet.palletNum))), overview.floatingBaskets.map((basket) => (_jsx(FloatingBasket, { basket: basket }, basket.basket.basketId))), overview.storageBaskets ? (_jsx(BasketStorageSummary, { empty: overview.storageBaskets.empty, filled: overview.storageBaskets.filled })) : undefined] })) : undefined] }));
 });
 const SystemOverviewMaterialDialog = memo(function SystemOverviewMaterialDialog({ ignoreOperator, }) {
     const [swapSt, setSwapSt] = useState(null);
@@ -409,7 +822,9 @@ function MachineIcon({ machine }) {
 }
 function LoadStationIcon({ load }) {
     const theme = useTheme();
-    return (_jsx("polygon", { points: "3,27 27,27 15,3", fill: load.pal === null ? "white" : theme.palette.secondary.main, stroke: "black" }));
+    return (_jsx("polygon", { points: "3,27 27,27 15,3", fill: load.pal === null && load.basket === null && load.staging.length === 0
+            ? "white"
+            : theme.palette.secondary.main, stroke: "black" }));
 }
 function MachineAtLoadIcon({ status }) {
     const theme = useTheme();
@@ -435,5 +850,9 @@ const StatusIcons = memo(function StatusIcons({ overview }) {
 export const SystemOverviewDialogButton = memo(function SystemOverviewDialogButton({ full, }) {
     const [open, setOpen] = useState(false);
     const overview = useCellOverview();
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: _jsx(StatusIcons, { overview: overview }) }), _jsxs(Dialog, { open: open, onClose: () => setOpen(false), maxWidth: "xl", fullScreen: full, children: [full ? (_jsx(AppBar, { sx: { position: "relative" }, children: _jsxs(Toolbar, { children: [_jsx(IconButton, { edge: "start", color: "inherit", onClick: () => setOpen(false), "aria-label": "close", children: _jsx(CloseIcon, {}) }), _jsx(Typography, { sx: { ml: 2, flex: 1 }, variant: "h6", component: "div", children: "System Overview" })] }) })) : undefined, _jsx(DialogContent, { children: _jsx(Box, { paddingBottom: "2em", paddingLeft: "5em", paddingRight: "5em", children: _jsx(SystemOverview, { overview: overview }) }) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: _jsx(StatusIcons, { overview: overview }) }), _jsxs(Dialog, { open: open, onClose: () => setOpen(false), maxWidth: "xl", fullScreen: full, children: [full ? (_jsx(AppBar, { sx: { position: "relative" }, children: _jsxs(Toolbar, { children: [_jsx(IconButton, { edge: "start", color: "inherit", onClick: () => setOpen(false), "aria-label": "close", children: _jsx(CloseIcon, {}) }), _jsx(Typography, { sx: { ml: 2, flex: 1 }, variant: "h6", component: "div", children: "System Overview" })] }) })) : undefined, _jsx(DialogContent, { children: _jsx(Box, { sx: {
+                                paddingBottom: "2em",
+                                paddingLeft: "5em",
+                                paddingRight: "5em",
+                            }, children: _jsx(SystemOverview, { overview: overview }) }) })] })] }));
 });