@seedtactics/insight-client 16.4.0

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

@@ -0,0 +1,450 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* Copyright (c) 2023, John Lenz
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+
+    * Redistributions in binary form must reproduce the above
+      copyright notice, this list of conditions and the following
+      disclaimer in the documentation and/or other materials provided
+      with the distribution.
+
+    * Neither the name of John Lenz, Black Maple Software, SeedTactics,
+      nor the names of other contributors may be used to endorse or
+      promote products derived from this software without specific
+      prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+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 { useMemo, memo, useState, useCallback } from "react";
+import { Box, useMediaQuery, Button, Typography } from "@mui/material";
+import { LazySeq, mkCompareByProperties, OrderedMap } from "@seedtactics/immutable-collections";
+import { FolderOpen as FolderOpenIcon } from "@mui/icons-material";
+import { MaterialDialog, InProcMaterial, SortableInProcMaterial, DragOverlayInProcMaterial, MatSummary, } from "./Material.js";
+import { SortableRegion } from "./Whiteboard.js";
+import * as api from "../../network/api.js";
+import * as matDetails from "../../cell-status/material-details.js";
+import { SelectWorkorderDialog, selectWorkorderDialogOpen } from "./SelectWorkorder.js";
+import { SelectInspTypeDialog, SignalInspectionButton } from "./SelectInspType.js";
+import { MoveMaterialArrowContainer, MoveMaterialArrowNode, useMoveMaterialArrowRef, } from "./MoveMaterialArrows.js";
+import { MoveMaterialNodeKindType } from "../../data/move-arrows.js";
+import { currentOperator } from "../../data/operators.js";
+import { instructionUrl } from "../../network/backend.js";
+import { Tooltip } from "@mui/material";
+import { Fab } from "@mui/material";
+import { fmsInformation } from "../../network/server-settings.js";
+import { currentStatus, secondsSinceEpochAtom } from "../../cell-status/current-status.js";
+import { useIsDemo, useSetTitle } from "../routes.js";
+import { QuarantineMatButton } from "./QuarantineButton.js";
+import { durationToSeconds } from "../../util/parseISODuration.js";
+import { formatSeconds } from "./SystemOverview.js";
+import { InvalidateCycleDialogButton, InvalidateCycleDialogContent, SwapMaterialButtons, SwapMaterialDialogContent, } from "./InvalidateCycle.js";
+import { last30MaterialSummary } from "../../cell-status/material-summary.js";
+import { addHours } from "date-fns";
+import { PromptForQueue } from "./QueuesAddMaterial.js";
+import { useAtomValue, useSetAtom } from "jotai";
+import { PrintLabelButton } from "./PrintedLabel.js";
+function selectLoadStationAndQueueProps(loadNum, queues, curSt) {
+    // search for pallet
+    let pal;
+    if (loadNum >= 0) {
+        for (const p of Object.values(curSt.pallets)) {
+            if (p.currentPalletLocation.loc === api.PalletLocationEnum.LoadUnload &&
+                p.currentPalletLocation.num === loadNum) {
+                pal = p;
+                break;
+            }
+        }
+    }
+    // calculate queues to show, which is all configured queues and any queues with
+    // material loading onto the pallet
+    const queuesToShow = new Set(queues);
+    if (pal !== undefined) {
+        for (const m of curSt.material) {
+            if (m.action.type === api.ActionType.Loading &&
+                m.action.loadOntoPalletNum === pal.palletNum &&
+                m.location.type === api.LocType.InQueue &&
+                m.location.currentQueue) {
+                queuesToShow.add(m.location.currentQueue);
+            }
+            if ((m.action.type === api.ActionType.UnloadToInProcess ||
+                m.action.type === api.ActionType.UnloadToCompletedMaterial) &&
+                m.action.unloadIntoQueue &&
+                m.location.type === api.LocType.OnPallet &&
+                m.location.palletNum === pal.palletNum) {
+                queuesToShow.add(m.action.unloadIntoQueue);
+            }
+        }
+    }
+    const queueMat = new Map(LazySeq.of(queuesToShow).map((q) => [q, []]));
+    const freeLoading = [];
+    let palFaces = OrderedMap.empty();
+    let elapsedLoadingTime = null;
+    // ensure all faces
+    if (pal) {
+        for (let i = 1; i <= pal.numFaces; i++) {
+            palFaces = palFaces.set(i, []);
+        }
+    }
+    for (const m of curSt.material) {
+        if (pal) {
+            // if loading onto pallet, set elapsed load time, ensure face exists, and set free loading
+            if (m.action.type === api.ActionType.Loading && m.action.loadOntoPalletNum === pal.palletNum) {
+                if (m.action.elapsedLoadUnloadTime) {
+                    elapsedLoadingTime = m.action.elapsedLoadUnloadTime;
+                }
+                if (m.action.loadOntoFace && !palFaces.has(m.action.loadOntoFace)) {
+                    palFaces = palFaces.set(m.action.loadOntoFace, []);
+                }
+                if (m.location.type === api.LocType.Free) {
+                    freeLoading.push(m);
+                }
+            }
+            // if currently on the pallet, set elapsed load time and add it to the pallet face
+            if (m.location.type === api.LocType.OnPallet && m.location.palletNum === pal.palletNum) {
+                if ((m.action.type === api.ActionType.UnloadToCompletedMaterial ||
+                    m.action.type === api.ActionType.UnloadToInProcess) &&
+                    m.action.elapsedLoadUnloadTime) {
+                    elapsedLoadingTime = m.action.elapsedLoadUnloadTime;
+                }
+                palFaces = palFaces.alter(m.location.face ?? 1, (oldMats) => {
+                    if (oldMats) {
+                        oldMats.push(m);
+                        return oldMats;
+                    }
+                    else {
+                        return [m];
+                    }
+                });
+            }
+        }
+        // add all material in the configured queues
+        if (m.location.type === api.LocType.InQueue &&
+            m.location.currentQueue &&
+            queueMat.has(m.location.currentQueue)) {
+            const old = queueMat.get(m.location.currentQueue);
+            if (old === undefined) {
+                queueMat.set(m.location.currentQueue, [m]);
+            }
+            else {
+                old.push(m);
+            }
+        }
+    }
+    queueMat.forEach((mats) => mats.sort(mkCompareByProperties((m) => m.location.queuePosition ?? 0)));
+    const matCount = freeLoading.length + palFaces.valuesToAscLazySeq().sumBy((x) => x.length);
+    return {
+        pallet: pal,
+        face: palFaces,
+        freeLoadingMaterial: freeLoading,
+        queues: queueMat,
+        elapsedLoadingTime,
+        fsize: matCount <= 2 ? "x-large" : matCount <= 6 ? "large" : "normal",
+    };
+}
+function MultiInstructionButton({ loadData }) {
+    const isDemo = useIsDemo();
+    const operator = useAtomValue(currentOperator);
+    const urls = useMemo(() => {
+        const pal = loadData.pallet;
+        if (pal) {
+            return LazySeq.of(loadData.face.values())
+                .append(loadData.freeLoadingMaterial)
+                .concat(loadData.queues.values())
+                .flatMap((x) => x)
+                .collect((mat) => {
+                if (mat.action.type === api.ActionType.Loading &&
+                    mat.action.loadOntoPalletNum === pal.palletNum &&
+                    mat.location.type === api.LocType.OnPallet &&
+                    mat.location.palletNum === pal.palletNum) {
+                    // transfer, but use unload type
+                    return instructionUrl(mat.partName, "unload", mat.materialID, pal.palletNum, mat.process, operator);
+                }
+                else if (mat.action.type === api.ActionType.Loading &&
+                    mat.action.loadOntoPalletNum === pal.palletNum) {
+                    return instructionUrl(mat.partName, "load", mat.materialID, pal.palletNum, mat.action.processAfterLoad ?? mat.process, operator);
+                }
+                else if (mat.location.type === api.LocType.OnPallet &&
+                    mat.location.palletNum === pal.palletNum &&
+                    (mat.action.type === api.ActionType.UnloadToCompletedMaterial ||
+                        mat.action.type === api.ActionType.UnloadToInProcess)) {
+                    return instructionUrl(mat.partName, "unload", mat.materialID, pal.palletNum, mat.process, operator);
+                }
+                else {
+                    return null;
+                }
+            })
+                .toRArray();
+        }
+        else {
+            return [];
+        }
+    }, [loadData, operator]);
+    if (urls.length === 0 || isDemo) {
+        return _jsx("div", {});
+    }
+    function open() {
+        for (const url of urls) {
+            window.open(url, "_blank");
+        }
+    }
+    return (_jsx(Box, { sx: {
+            position: "fixed",
+            bottom: "5px",
+            right: "5px",
+        }, children: _jsx(Tooltip, { title: "Open All Instructions", children: _jsx(Fab, { onClick: open, color: "secondary", children: _jsx(FolderOpenIcon, {}) }) }) }));
+}
+function ElapsedLoadTime({ elapsedLoadTime }) {
+    const currentStTime = useAtomValue(currentStatus).timeOfCurrentStatusUTC;
+    const secondsSinceEpoch = useAtomValue(secondsSinceEpochAtom);
+    if (elapsedLoadTime) {
+        const elapsedSecsInCurSt = durationToSeconds(elapsedLoadTime);
+        const elapsedSecs = elapsedSecsInCurSt + (secondsSinceEpoch - Math.floor(currentStTime.getTime() / 1000));
+        return _jsx("span", { children: formatSeconds(elapsedSecs) });
+    }
+    else {
+        return null;
+    }
+}
+function PalletFace({ data, faceNum }) {
+    const face = data.face.get(faceNum);
+    if (!face || !data.pallet)
+        return null;
+    return (_jsxs("div", { children: [faceNum === 1 ? (_jsxs(Box, { display: "grid", gridTemplateColumns: data.pallet.numFaces > 1 ? "1fr 1fr 1fr" : "1fr 1fr", children: [_jsxs(Typography, { variant: "h4", children: ["Pallet ", data.pallet.palletNum] }), data.pallet.numFaces > 1 ? (_jsx(Typography, { variant: "h6", justifySelf: "center", children: data.pallet.faceNames?.[faceNum - 1] ?? "Face 1" })) : undefined, _jsx(Box, { justifySelf: "flex-end", children: _jsx(ElapsedLoadTime, { elapsedLoadTime: data.elapsedLoadingTime }) })] })) : data.pallet.numFaces > 1 ? (_jsx(Box, { display: "flex", justifyContent: "center", children: _jsx(Typography, { variant: "h6", children: data.pallet.faceNames?.[faceNum - 1] ?? `Face ${faceNum}` }) })) : undefined, _jsx(Box, { ml: "4em", mr: "4em", children: _jsx(MoveMaterialArrowNode, { kind: { type: MoveMaterialNodeKindType.PalletFaceZone, face: faceNum }, children: _jsx(Box, { display: "flex", flexWrap: "wrap", justifyContent: "space-around", children: face.map((m, idx) => (_jsx(MoveMaterialArrowNode, { kind: { type: MoveMaterialNodeKindType.Material, material: m }, children: _jsx(InProcMaterial, { mat: m, fsize: data.fsize }) }, idx))) }) }) })] }));
+}
+function MaterialRegion({ data, mat, }) {
+    return (_jsxs("div", { children: [_jsx(Typography, { variant: "h4", children: mat.label }), mat.material.map((m, matIdx) => (_jsx(MoveMaterialArrowNode, { kind: {
+                    type: MoveMaterialNodeKindType.Material,
+                    material: data.pallet && m.action.loadOntoPalletNum === data.pallet.palletNum ? m : null,
+                }, children: mat.isFree ? (_jsx(InProcMaterial, { mat: m, displayActionForSinglePallet: data.pallet ? data.pallet.palletNum : 0, fsize: data.fsize, showRawMaterial: true, showJobComment: true })) : (_jsx(SortableInProcMaterial, { mat: m, displayActionForSinglePallet: data.pallet ? data.pallet.palletNum : 0, shake: m.action.type === api.ActionType.Loading &&
+                        m.action.loadOntoPalletNum === data.pallet?.palletNum, fsize: m.action.type === api.ActionType.Loading &&
+                        m.action.loadOntoPalletNum === data.pallet?.palletNum
+                        ? data.fsize
+                        : undefined, showRawMaterial: true, showJobComment: true })) }, matIdx)))] }));
+}
+function MaterialColumn({ data, region, }) {
+    return (_jsx(MoveMaterialArrowNode, { kind: region.isFree
+            ? { type: MoveMaterialNodeKindType.FreeMaterialZone }
+            : {
+                type: MoveMaterialNodeKindType.QueueZone,
+                queue: region.label,
+            }, children: region.isFree ? (_jsx(MaterialRegion, { data: data, mat: region })) : (_jsx(SortableRegion, { matIds: region.material.map((m) => m.materialID), direction: "vertical", queueName: region.label, renderDragOverlay: (mat) => (_jsx(DragOverlayInProcMaterial, { mat: mat, displayActionForSinglePallet: data.pallet ? data.pallet.palletNum : 0, fsize: mat.action.type === api.ActionType.Loading &&
+                    mat.action.loadOntoPalletNum === data.pallet?.palletNum
+                    ? data.fsize
+                    : undefined })), children: _jsx(MaterialRegion, { data: data, mat: region }) })) }));
+}
+function RecentCompletedMaterial() {
+    const matSummary = useAtomValue(last30MaterialSummary);
+    const recentCompleted = useMemo(() => {
+        const cutoff = addHours(new Date(), -5);
+        return matSummary.matsById
+            .valuesToLazySeq()
+            .filter((e) => e.completed_last_proc_machining === true &&
+            e.last_unload_time !== undefined &&
+            e.last_unload_time >= cutoff)
+            .toSortedArray({ desc: (e) => e.last_unload_time?.getTime() ?? 0 });
+    }, [matSummary]);
+    return (_jsx("div", { children: recentCompleted.map((m, idx) => (_jsx(MatSummary, { mat: m }, idx))) }));
+}
+const CompletedCol = memo(function CompletedCol({ fillViewPort, showMaterial, }) {
+    const ref = useMoveMaterialArrowRef({
+        type: showMaterial
+            ? MoveMaterialNodeKindType.CompletedExpandedMaterialZone
+            : MoveMaterialNodeKindType.CompletedCollapsedMaterialZone,
+    });
+    if (showMaterial && fillViewPort) {
+        return (_jsxs(Box, { padding: "8px", display: "flex", flexDirection: "column", height: "100%", ref: ref, children: [_jsx(Typography, { variant: "h4", children: "Completed" }), _jsx(Box, { position: "relative", flexGrow: 1, children: _jsx(Box, { position: "absolute", top: "0", left: "0", right: "0", bottom: "0", overflow: "auto", children: _jsx(RecentCompletedMaterial, {}) }) })] }));
+    }
+    else if (showMaterial) {
+        return (_jsxs(Box, { padding: "8px", ref: ref, children: [_jsx(Typography, { variant: "h4", children: "Completed" }), _jsx(RecentCompletedMaterial, {})] }));
+    }
+    else {
+        return (_jsx(Box, { display: "flex", justifyContent: fillViewPort ? "flex-end" : undefined, padding: "8px", ref: ref, children: _jsx(Typography, { variant: "h4", margin: "4px", sx: fillViewPort ? { textOrientation: "mixed", writingMode: "vertical-rl" } : undefined, children: "Completed" }) }));
+    }
+});
+function InstructionButton({ pallet }) {
+    const material = useAtomValue(matDetails.inProcessMaterialInDialog);
+    const operator = useAtomValue(currentOperator);
+    const demo = useIsDemo();
+    if (material === null)
+        return null;
+    let type;
+    if (material.action.type === api.ActionType.Loading && material.action.loadOntoPalletNum === pallet) {
+        type = "load";
+    }
+    else if ((material.action.type === api.ActionType.UnloadToInProcess ||
+        material.action.type === api.ActionType.UnloadToCompletedMaterial) &&
+        material.location.type === api.LocType.OnPallet &&
+        material.location.palletNum === pallet) {
+        type = "unload";
+    }
+    if (type === undefined)
+        return null;
+    const url = instructionUrl(material.partName, type, material.materialID, pallet, material.action.type === api.ActionType.Loading
+        ? (material.action.processAfterLoad ?? material.process)
+        : material.process, operator);
+    if (demo) {
+        return _jsx(Button, { color: "primary", children: "Instructions" });
+    }
+    else {
+        return (_jsx(Button, { href: url, target: "bms-instructions", color: "primary", children: "Instructions" }));
+    }
+}
+function AddMatButton({ queues, onClose, toQueue, showAddToQueue, setShowAddToQueue, }) {
+    const setMatToShow = useSetAtom(matDetails.materialDialogOpen);
+    const lastProcMat = useAtomValue(matDetails.materialInDialogLargestUsedProcess);
+    const existingMat = useAtomValue(matDetails.materialInDialogInfo);
+    const inProcMat = useAtomValue(matDetails.inProcessMaterialInDialog);
+    const operator = useAtomValue(currentOperator);
+    const [addExistingMat, addingExistingMat] = matDetails.useAddExistingMaterialToQueue();
+    if (!existingMat ||
+        inProcMat?.location.type === api.LocType.OnPallet ||
+        inProcMat?.action.type === api.ActionType.Loading) {
+        return null;
+    }
+    if (queues.length === 0)
+        return null;
+    if (inProcMat?.location.type === api.LocType.InQueue &&
+        inProcMat?.location.currentQueue &&
+        queues.includes(inProcMat?.location.currentQueue)) {
+        return null;
+    }
+    if (!showAddToQueue) {
+        return (_jsx(Button, { color: "primary", onClick: () => setShowAddToQueue(true), children: "Add To Queue" }));
+    }
+    else {
+        return (_jsxs(Button, { color: "primary", disabled: toQueue === null || addingExistingMat === true, onClick: () => {
+                addExistingMat({
+                    materialId: existingMat.materialID,
+                    queue: toQueue ?? "",
+                    queuePosition: -1,
+                    operator: operator,
+                });
+                setMatToShow(null);
+                onClose();
+            }, children: ["Add To ", toQueue ?? "Queue", " ", lastProcMat ? ` To Run Process ${lastProcMat.process + 1}` : ""] }));
+    }
+}
+function AssignWorkorderButton() {
+    const fmsInfo = useAtomValue(fmsInformation);
+    const setWorkorderDialogOpen = useSetAtom(selectWorkorderDialogOpen);
+    const mat = useAtomValue(matDetails.materialInDialogInfo);
+    if (!fmsInfo.allowChangeWorkorderAtLoadStation) {
+        return null;
+    }
+    if (mat === null || mat.materialID < 0) {
+        return null;
+    }
+    return (_jsx(Button, { color: "primary", onClick: () => setWorkorderDialogOpen(true), children: "Assign Workorder" }));
+}
+const LoadMatDialog = memo(function LoadMatDialog(props) {
+    const [swapSt, setSwapSt] = useState(null);
+    const [invalidateSt, setInvalidateSt] = useState(null);
+    // add material state
+    const [showAddMaterial, setShowAddMaterial] = useState(false);
+    const [selectedQueue, setSelectedQueue] = useState(null);
+    const onClose = useCallback(function onClose() {
+        setSwapSt(null);
+        setInvalidateSt(null);
+        setShowAddMaterial(false);
+        setSelectedQueue(null);
+    }, [setSwapSt, setInvalidateSt]);
+    return (_jsx(MaterialDialog, { onClose: onClose, allowNote: true, highlightProcsGreaterOrEqualTo: invalidateSt?.process ?? undefined, extraDialogElements: _jsxs(_Fragment, { children: [_jsx(SwapMaterialDialogContent, { st: swapSt, setState: setSwapSt }), invalidateSt !== null ? (_jsx(InvalidateCycleDialogContent, { st: invalidateSt, setState: setInvalidateSt })) : null, showAddMaterial ? (_jsx(PromptForQueue, { selectedQueue: selectedQueue, setSelectedQueue: setSelectedQueue, queueNames: props.queues })) : undefined] }), buttons: _jsxs(_Fragment, { children: [_jsx(InstructionButton, { pallet: props.pallet }), _jsx(PrintLabelButton, {}), _jsx(QuarantineMatButton, {}), _jsx(SignalInspectionButton, {}), _jsx(AddMatButton, { toQueue: selectedQueue, queues: props.queues, onClose: onClose, showAddToQueue: showAddMaterial, setShowAddToQueue: setShowAddMaterial }), _jsx(SwapMaterialButtons, { st: swapSt, setState: setSwapSt, onClose: onClose }), _jsx(InvalidateCycleDialogButton, { st: invalidateSt, setState: setInvalidateSt, onClose: onClose, loadStation: true }), _jsx(AssignWorkorderButton, {})] }) }));
+});
+function useGridLayout({ numMatCols, maxNumFaces, horizontal, showMatInCompleted, }) {
+    let rows = "";
+    let cols = "";
+    if (maxNumFaces <= 0)
+        maxNumFaces = 1;
+    if (horizontal) {
+        let colNames = "";
+        for (let i = 0; i < numMatCols; i++) {
+            cols += "minmax(16em, max-content) ";
+            colNames += `mat${i} `;
+        }
+        cols += "1fr ";
+        if (showMatInCompleted) {
+            cols += "minmax(16em, max-content)";
+        }
+        else {
+            cols += " 4.5em";
+        }
+        for (let i = 0; i < maxNumFaces; i++) {
+            rows += `"${colNames} palface${i} completed" 1fr\n`;
+        }
+    }
+    else {
+        cols = "1fr";
+        for (let i = 0; i < numMatCols; i++) {
+            rows += `"mat${i}" minmax(134px, max-content)\n`;
+        }
+        for (let i = 0; i < maxNumFaces; i++) {
+            rows += `"palface${i}" minmax(134px, max-content)\n`;
+        }
+        rows += '"completed" minmax(134px, max-content)\n';
+    }
+    return `${rows} / ${cols}`;
+}
+export function LoadStation(props) {
+    const currentSt = useAtomValue(currentStatus);
+    const data = useMemo(() => selectLoadStationAndQueueProps(props.loadNum, props.queues, currentSt), [currentSt, props.loadNum, props.queues]);
+    let matColsSeq = LazySeq.of(data.queues)
+        .sortBy(([q, _]) => q)
+        .map(([q, mats]) => ({
+        label: q,
+        material: mats,
+        isFree: false,
+    }));
+    if (data.queues.size === 0 || data.freeLoadingMaterial.length > 0) {
+        matColsSeq = matColsSeq.append({
+            label: "Material",
+            material: data.freeLoadingMaterial,
+            isFree: true,
+        });
+    }
+    const matCols = matColsSeq.toRArray();
+    const numNonPalCols = matCols.length + (props.completed ? 1 : 0);
+    const fillViewPort = useMediaQuery(numNonPalCols <= 1
+        ? "(min-width: 720px)"
+        : numNonPalCols === 2
+            ? "(min-width: 1030px)"
+            : "(min-width: 1320px)");
+    const grid = useGridLayout({
+        numMatCols: matCols.length,
+        maxNumFaces: data.face.size,
+        horizontal: fillViewPort,
+        showMatInCompleted: props.completed,
+    });
+    return (_jsx(MoveMaterialArrowContainer, { hideArrows: !fillViewPort, children: _jsxs(Box, { component: "main", sx: {
+                width: "100%",
+                bgcolor: props.whiteBackground ? "white" : "#F8F8F8",
+                display: "grid",
+                gridTemplate: grid,
+                minHeight: {
+                    xs: "calc(100vh - 64px - 32px)",
+                    sm: "calc(100vh - 64px - 40px)",
+                    md: "calc(100vh - 64px)",
+                },
+                padding: fillViewPort ? undefined : "8px",
+            }, children: [matCols.map((col, idx) => (_jsx(Box, { gridArea: `mat${idx}`, padding: "8px", borderRight: fillViewPort ? "1px solid black" : undefined, borderBottom: !fillViewPort ? "1px solid black" : undefined, children: _jsx(MaterialColumn, { data: data, region: col }) }, idx))), data.face.keysToAscLazySeq().map((faceNum, idx) => (_jsx(Box, { marginLeft: "15px", gridArea: `palface${idx}`, padding: "8px", borderTop: data.pallet && idx !== 0 ? "1px solid black" : undefined, children: _jsx(PalletFace, { data: data, faceNum: faceNum }) }, faceNum))), _jsx(Box, { borderLeft: fillViewPort ? "1px solid black" : undefined, borderTop: !fillViewPort ? "1px solid black" : undefined, gridArea: "completed", children: _jsx(CompletedCol, { fillViewPort: fillViewPort, showMaterial: props.completed }) }), _jsx(MultiInstructionButton, { loadData: data }), _jsx(SelectWorkorderDialog, {}), _jsx(SelectInspTypeDialog, {}), _jsx(LoadMatDialog, { pallet: data.pallet?.palletNum ?? null, queues: props.queues })] }) }));
+}
+function LoadStationCheckWidth(props) {
+    useSetTitle("Load " + props.loadNum.toString());
+    return _jsx(LoadStation, { ...props });
+}
+export default LoadStationCheckWidth;

package/dist/components/station-monitor/Material.d.ts

@@ -0,0 +1,77 @@
+import { ComponentType, PureComponent, ReactNode } from "react";
+import * as api from "../../network/api.js";
+import { MaterialSummaryAndCompletedData } from "../../cell-status/material-summary.js";
+export declare class PartIdenticon extends PureComponent<{
+    part: string;
+    size?: number;
+}> {
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export type MatCardFontSize = "normal" | "large" | "x-large";
+export declare function MaterialAction({ mat, displayActionForSinglePallet, fsize, }: {
+    mat: Readonly<api.IInProcessMaterial>;
+    displayActionForSinglePallet?: number;
+    fsize?: MatCardFontSize;
+}): ReactNode | null;
+export declare function WorkorderFromBarcode(): import("react/jsx-runtime").JSX.Element | null;
+export interface MaterialSummaryProps {
+    readonly mat: Readonly<MaterialSummaryAndCompletedData>;
+    readonly inProcMat?: Readonly<api.IInProcessMaterial>;
+    readonly fsize?: MatCardFontSize;
+    readonly displayActionForSinglePallet?: number;
+    readonly focusInspectionType?: string | null;
+    readonly hideWarningIcon?: boolean;
+    readonly displayJob?: boolean;
+    readonly showJobComment?: boolean;
+    readonly hideAvatar?: boolean;
+    readonly hideEmptySerial?: boolean;
+    readonly showRawMaterial?: boolean;
+}
+export declare const MatSummary: ComponentType<MaterialSummaryProps>;
+export type InProcMaterialProps = {
+    readonly mat: Readonly<api.IInProcessMaterial>;
+    readonly fsize?: MatCardFontSize;
+    readonly displayActionForSinglePallet?: number;
+    readonly displayJob?: boolean;
+    readonly hideAvatar?: boolean;
+    readonly hideEmptySerial?: boolean;
+    readonly showRawMaterial?: boolean;
+    readonly showJobComment?: boolean;
+};
+export type ShakeProp = {
+    readonly shake?: boolean;
+};
+export declare const InProcMaterial: import("react").NamedExoticComponent<InProcMaterialProps & ShakeProp & {
+    readonly showHandle?: boolean;
+}>;
+export type SortableMatData = {
+    readonly mat: Readonly<api.IInProcessMaterial>;
+};
+export declare const SortableInProcMaterial: import("react").NamedExoticComponent<InProcMaterialProps & ShakeProp>;
+export declare function DragOverlayInProcMaterial(props: InProcMaterialProps): import("react/jsx-runtime").JSX.Element;
+export interface MultiMaterialProps {
+    readonly partOrCasting: string;
+    readonly fsize?: MatCardFontSize;
+    readonly assignedJobUnique: string | null;
+    readonly material: ReadonlyArray<Readonly<api.IInProcessMaterial>>;
+    onOpen: () => void;
+}
+export declare const MultiMaterial: import("react").NamedExoticComponent<MultiMaterialProps>;
+export declare const MaterialDetailTitle: import("react").NamedExoticComponent<{
+    partName: string;
+    serial?: string | null;
+    subtitle?: string;
+    notes?: boolean;
+}>;
+export declare const MaterialDetailContent: import("react").NamedExoticComponent<{
+    highlightProcsGreaterOrEqualTo?: number;
+}>;
+export declare function MaterialLoading(): import("react/jsx-runtime").JSX.Element | null;
+export interface MaterialDialogProps {
+    buttons?: ReactNode;
+    onClose?: () => void;
+    allowNote?: boolean;
+    extraDialogElements?: ReactNode;
+    highlightProcsGreaterOrEqualTo?: number;
+}
+export declare const MaterialDialog: import("react").NamedExoticComponent<MaterialDialogProps>;