@seedtactics/insight-client 16.4.0

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

@@ -0,0 +1,312 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* Copyright (c) 2022, 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 { useState, useMemo, memo, useCallback } from "react";
+import { Table, Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { TableHead } from "@mui/material";
+import { TableCell } from "@mui/material";
+import { TableRow } from "@mui/material";
+import { TableBody } from "@mui/material";
+import { Button } from "@mui/material";
+import { Tooltip } from "@mui/material";
+import { Typography } from "@mui/material";
+import { Dialog } from "@mui/material";
+import { DialogTitle } from "@mui/material";
+import { DialogContent } from "@mui/material";
+import { TextField } from "@mui/material";
+import { DialogActions } from "@mui/material";
+import { Fab } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { CircularProgress } from "@mui/material";
+import { Add as AddIcon, AssignmentReturn as AssignIcon, KeyboardArrowDown as KeyboardArrowDownIcon, Edit as EditIcon, KeyboardArrowUp as KeyboardArrowUpIcon, } from "@mui/icons-material";
+import { SortableInProcMaterial, PartIdenticon, MultiMaterial, InProcMaterial, DragOverlayInProcMaterial, MaterialDialog, } from "./Material.js";
+import * as api from "../../network/api.js";
+import { selectQueueData, extractJobRawMaterial } from "../../data/queue-material.js";
+import { LazySeq } from "@seedtactics/immutable-collections";
+import { currentOperator } from "../../data/operators.js";
+import { JobDetails } from "./JobDetails.js";
+import { fmsInformation } from "../../network/server-settings.js";
+import { addWorkorderComment, currentStatus, setJobComment } from "../../cell-status/current-status.js";
+import { Collapse } from "@mui/material";
+import { inProcessQueues, rawMaterialQueues } from "../../cell-status/names.js";
+import { SortableRegion } from "./Whiteboard.js";
+import { useSetTitle } from "../routes.js";
+import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { bulkAddCastingToQueue, BulkAddCastingWithoutSerialDialog, MultiMaterialDialog, } from "./BulkRawMaterial.js";
+import { AddBySerialDialog, enterSerialForNewMaterialDialog } from "../ManualSerialEntry.js";
+import { materialDialogOpen } from "../../cell-status/material-details.js";
+import { PrintLabelButton } from "./PrintedLabel.js";
+import { AddToQueueButton, AddToQueueMaterialDialogCt } from "./QueuesAddMaterial.js";
+import { QuarantineMatButton } from "./QuarantineButton.js";
+import { AddByBarcodeDialog, scanBarcodeToAddToQueueDialog } from "../BarcodeScanning.js";
+import { InvalidateCycleDialogButton, InvalidateCycleDialogContent, } from "./InvalidateCycle.js";
+const JobTableRow = styled(TableRow, { shouldForwardProp: (prop) => prop.toString()[0] !== "$" })(({ $noBorderBottom, $highlightedRow, $noncompletedRow }) => ({
+    ...($noBorderBottom && {
+        "& > *": {
+            borderBottom: "unset",
+        },
+    }),
+    backgroundColor: $highlightedRow ? "#FF8A65" : $noncompletedRow ? "#E0E0E0" : undefined,
+}));
+const highlightedComments = [/\bhold\b/, /\bmissing\b/, /\bwait\b/, /\bwaiting\b/, /\bnone\b/];
+function highlightRow(j) {
+    const comment = j.comment;
+    if (!comment || comment === "")
+        return false;
+    return LazySeq.of(highlightedComments).some((r) => r.test(comment));
+}
+function RawMaterialJobRow(props) {
+    const allowEditQty = (useAtomValue(fmsInformation).allowEditJobPlanQuantityFromQueuesPage ?? null) != null;
+    const [open, setOpen] = useState(false);
+    const j = props.job;
+    const highlRow = highlightRow(j.job);
+    return (_jsxs(_Fragment, { children: [_jsxs(JobTableRow, { "$noBorderBottom": true, "$highlightedRow": highlRow, "$noncompletedRow": j.remainingToStart - j.assignedRaw > 0, children: [_jsx(TableCell, { children: _jsxs(Box, { sx: {
+                                display: "flex",
+                                alignItems: "center",
+                            }, children: [_jsx(Box, { sx: { mr: "0.2em" }, children: _jsx(PartIdenticon, { part: j.job.partName, size: 25 }) }), _jsx("div", { children: _jsx(Typography, { variant: "body2", component: "span", display: "block", children: j.job.unique }) })] }) }), _jsx(TableCell, { children: j.startingTime ? j.startingTime.toLocaleString() : "" }), _jsx(TableCell, { children: j.rawMatName === j.job.partName ? (j.rawMatName) : (_jsxs(Box, { sx: {
+                                display: "flex",
+                                alignItems: "center",
+                            }, children: [_jsx(Box, { sx: { mr: "0.2em" }, children: _jsx(PartIdenticon, { part: j.rawMatName, size: 25 }) }), _jsx(Typography, { variant: "body2", display: "block", children: j.rawMatName })] })) }), _jsxs(TableCell, { children: [j.job.comment, _jsx(Tooltip, { title: "Edit", children: _jsx(IconButton, { size: "small", onClick: () => props.editNote(j.job), children: _jsx(EditIcon, {}) }) })] }), _jsxs(TableCell, { align: "right", children: [j.job.cycles ?? 0, allowEditQty ? (_jsx(Tooltip, { title: "Edit", children: _jsx(IconButton, { size: "small", onClick: () => props.editQty(j), children: _jsx(EditIcon, {}) }) })) : undefined] }), _jsx(TableCell, { align: "right", children: j.remainingToStart }), _jsx(TableCell, { align: "right", children: j.assignedRaw }), _jsx(TableCell, { align: "right", children: _jsx(Tooltip, { title: j.remainingToStart > 0 || j.assignedRaw > 0 ? `${j.remainingToStart} - ${j.assignedRaw}` : "", children: _jsx("span", { children: Math.max(j.remainingToStart - j.assignedRaw, 0) }) }) }), _jsx(TableCell, { align: "right", children: j.availableUnassigned }), _jsx(TableCell, { children: _jsx(Tooltip, { title: "Show Details", children: _jsx(IconButton, { size: "small", onClick: () => setOpen(!open), children: open ? _jsx(KeyboardArrowUpIcon, {}) : _jsx(KeyboardArrowDownIcon, {}) }) }) })] }), _jsx(JobTableRow, { "$highlightedRow": highlRow, "$noncompletedRow": j.remainingToStart - j.assignedRaw > 0, children: _jsx(TableCell, { sx: { pb: "0", pt: "0" }, colSpan: 10, children: _jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: _jsx(JobDetails, { job: j.job, checkAnalysisMonth: false }) }) }) })] }));
+}
+function RawMaterialJobTable(props) {
+    const currentSt = useAtomValue(currentStatus);
+    const jobs = useMemo(() => extractJobRawMaterial(currentSt.jobs, currentSt.material, props.queue), [currentSt, props.queue]);
+    if (jobs.length === 0)
+        return null;
+    return (_jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Job" }), _jsx(TableCell, { children: "Starting Time" }), _jsx(TableCell, { children: "Material" }), _jsx(TableCell, { children: "Note" }), _jsx(TableCell, { align: "right", children: "Planned Quantity" }), _jsx(TableCell, { align: "right", children: "Remaining To Start" }), _jsx(TableCell, { align: "right", children: "Assigned Raw Material" }), _jsx(TableCell, { align: "right", children: "Required" }), _jsx(TableCell, { align: "right", children: "Available Unassigned" }), _jsx(TableCell, {})] }) }), _jsx(TableBody, { children: jobs.map((j, idx) => (_jsx(RawMaterialJobRow, { job: j, editNote: props.editNote, editQty: props.editQty }, idx))) })] }));
+}
+const RawMaterialWorkorderRow = memo(function RawMaterialWorkorderRow({ workorder, inProc, }) {
+    const setDialog = useSetAtom(workorderCommentDialogAtom);
+    return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: workorder.workorderId }), _jsx(TableCell, { children: _jsxs(Box, { sx: {
+                        display: "flex",
+                        alignItems: "center",
+                    }, children: [_jsx(Box, { sx: { mr: "0.2em" }, children: _jsx(PartIdenticon, { part: workorder.part, size: 25 }) }), _jsx(Typography, { variant: "body2", display: "block", children: workorder.part })] }) }), _jsxs(TableCell, { children: [workorder.comments && workorder.comments.length > 0
+                        ? workorder.comments[workorder.comments.length - 1].comment
+                        : "", _jsx(Tooltip, { title: "Edit", children: _jsx(IconButton, { size: "small", onClick: () => setDialog(workorder), children: _jsx(EditIcon, {}) }) })] }), _jsx(TableCell, { children: workorder.dueDate.toLocaleDateString() }), _jsx(TableCell, { children: workorder.priority }), _jsx(TableCell, { children: workorder.plannedQuantity }), _jsx(TableCell, { children: workorder.completedQuantity }), _jsx(TableCell, { children: inProc }), _jsx(TableCell, { children: Math.max(0, workorder.plannedQuantity - workorder.completedQuantity - inProc) })] }));
+});
+const RawMaterialWorkorderTable = memo(function RawMaterialWorkorderTable() {
+    const curSt = useAtomValue(currentStatus);
+    if (!curSt.workorders || curSt.workorders.length === 0)
+        return null;
+    const sorted = LazySeq.of(curSt.workorders).sortBy((w) => w.dueDate.getTime(), (w) => w.priority);
+    const inProcByWorkorder = LazySeq.of(curSt.material)
+        .filter((m) => !!m.workorderId && m.workorderId !== "")
+        .toLookupMap((m) => m.workorderId ?? "", (m) => m.partName, () => 1, (a, b) => a + b);
+    return (_jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Workorder" }), _jsx(TableCell, { children: "Part" }), _jsx(TableCell, { children: "Comment" }), _jsx(TableCell, { children: "Due Date" }), _jsx(TableCell, { children: "Priority" }), _jsx(TableCell, { children: "Planned Qty" }), _jsx(TableCell, { children: "Completed Qty" }), _jsx(TableCell, { children: "In Process" }), _jsx(TableCell, { children: "Remaining To Assign" })] }) }), _jsx(TableBody, { children: sorted.map((w) => (_jsx(RawMaterialWorkorderRow, { workorder: w, inProc: inProcByWorkorder.get(w.workorderId)?.get(w.part) ?? 0 }, `${w.workorderId}-${w.part}`))) })] }));
+});
+export const EditNoteDialog = memo(function EditNoteDialog(props) {
+    const [note, setNote] = useState(null);
+    const setComment = useSetAtom(setJobComment);
+    function close() {
+        props.closeDialog();
+        setNote(null);
+    }
+    function save() {
+        if (note === null || props.job === null || note === props.job.comment)
+            return;
+        setComment(props.job.unique, note);
+        close();
+    }
+    return (_jsx(Dialog, { open: props.job !== null, onClose: close, children: props.job !== null ? (_jsxs(_Fragment, { children: [_jsx(DialogTitle, { children: _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [_jsx("div", { children: _jsx(PartIdenticon, { part: props.job.partName, size: 40 }) }), _jsxs("div", { style: { marginLeft: "1em", flexGrow: 1 }, children: ["Edit Note For ", props.job.unique] })] }) }), _jsx(DialogContent, { children: _jsx(TextField, { variant: "outlined", fullWidth: true, autoFocus: true, value: note === null ? props.job.comment || "" : note, onChange: (e) => setNote(e.target.value), onKeyDown: (e) => {
+                            if (e.keyCode === 13 && note !== null) {
+                                save();
+                                e.preventDefault();
+                            }
+                        } }) }), _jsxs(DialogActions, { children: [_jsx(Button, { color: "primary", disabled: note === null, onClick: save, children: "Save Note" }), _jsx(Button, { color: "primary", onClick: close, children: "Cancel" })] })] })) : undefined }));
+});
+const EditJobPlanQtyDialog = memo(function EditJobPlanQtyProps(props) {
+    const [running, setRunning] = useState(false);
+    const [newQty, setNewQty] = useState(null);
+    const allowEditQtyUrl = useAtomValue(fmsInformation).allowEditJobPlanQuantityFromQueuesPage ?? null;
+    function close() {
+        if (running)
+            return;
+        props.closeDialog();
+        setNewQty(null);
+    }
+    async function setQty() {
+        if (allowEditQtyUrl === null || props.job === null || newQty == null || isNaN(newQty)) {
+            return;
+        }
+        setRunning(true);
+        try {
+            await fetch(allowEditQtyUrl, {
+                method: "PUT",
+                headers: new Headers({
+                    "Content-Type": "application/json",
+                }),
+                body: JSON.stringify({
+                    Unique: props.job.job.unique,
+                    Quantity: newQty,
+                }),
+            });
+            props.closeDialog();
+            setNewQty(null);
+        }
+        finally {
+            setRunning(false);
+        }
+    }
+    return (_jsx(Dialog, { open: allowEditQtyUrl != null && props.job !== null, onClose: close, children: props.job !== null ? (_jsxs(_Fragment, { children: [_jsx(DialogTitle, { children: _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [_jsx("div", { children: _jsx(PartIdenticon, { part: props.job.job.partName, size: 40 }) }), _jsxs("div", { style: { marginLeft: "1em", flexGrow: 1 }, children: ["Edit Planned Quantity For ", props.job.job.unique] })] }) }), _jsxs(DialogContent, { children: [_jsxs("p", { children: [props.job.job.cycles, " currently planned, ", props.job.remainingToStart, " remaining to start"] }), _jsx(TextField, { variant: "outlined", fullWidth: true, autoFocus: true, inputProps: {
+                                style: { textAlign: "right" },
+                                min: (props.job.job.cycles ?? 0) - props.job.remainingToStart,
+                            }, type: "number", value: newQty === null ? "" : newQty, onChange: (e) => setNewQty(parseInt(e.target.value)) })] }), _jsxs(DialogActions, { children: [_jsxs(Button, { color: "primary", disabled: running || newQty === null || isNaN(newQty), onClick: () => void setQty(), children: [running ? _jsx(CircularProgress, { size: 10 }) : undefined, "Set Quantity"] }), _jsx(Button, { color: "primary", disabled: running, onClick: close, children: "Cancel" })] })] })) : undefined }));
+});
+const workorderCommentDialogAtom = atom(null);
+function WorkorderCommentDialog() {
+    const [workorder, setWorkorder] = useAtom(workorderCommentDialogAtom);
+    const [comment, setComment] = useState(null);
+    const addComment = useSetAtom(addWorkorderComment);
+    function close() {
+        setWorkorder(null);
+        setComment(null);
+    }
+    function save() {
+        if (workorder && comment && comment !== "") {
+            addComment({ workorder: workorder.workorderId, comment: comment });
+        }
+        close();
+    }
+    return (_jsx(Dialog, { open: workorder !== null, onClose: close, children: workorder !== null ? (_jsxs(_Fragment, { children: [_jsx(DialogTitle, { children: _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [_jsx("div", { children: _jsx(PartIdenticon, { part: workorder.part, size: 40 }) }), _jsxs("div", { style: { marginLeft: "1em", flexGrow: 1 }, children: ["Add Comment For ", workorder.workorderId] })] }) }), _jsxs(DialogContent, { children: [_jsx("ul", { children: (workorder.comments ?? []).map((c, idx) => (_jsx("li", { children: _jsxs(Typography, { variant: "body1", children: [c.timeUTC.toLocaleString(), ": ", c.comment] }) }, idx))) }), _jsx(TextField, { variant: "outlined", sx: { mt: "1em" }, fullWidth: true, autoFocus: true, value: comment, onChange: (e) => setComment(e.target.value), onKeyDown: (e) => {
+                                if (e.key === "Enter" && comment !== null && comment !== "") {
+                                    save();
+                                    e.preventDefault();
+                                }
+                            } })] }), _jsxs(DialogActions, { children: [_jsx(Button, { color: "primary", onClick: save, children: "Save Comment" }), _jsx(Button, { color: "primary", onClick: close, children: "Cancel" })] })] })) : undefined }));
+}
+const AddMaterialButtons = memo(function AddMaterialButtons(props) {
+    const fmsInfo = useAtomValue(fmsInformation);
+    const setBulkAddCastings = useSetAtom(bulkAddCastingToQueue);
+    const setAddBySerial = useSetAtom(enterSerialForNewMaterialDialog);
+    const setAddByBarcode = useSetAtom(scanBarcodeToAddToQueueDialog);
+    if (!fmsInfo.addToQueueButton || fmsInfo.addToQueueButton === api.AddToQueueButton.DoNotShow) {
+        return null;
+    }
+    function click() {
+        switch (fmsInfo.addToQueueButton) {
+            case api.AddToQueueButton.DoNotShow:
+                return;
+            case api.AddToQueueButton.AddBulkUnassigned:
+                if (props.rawMatQueue) {
+                    setBulkAddCastings(props.label);
+                }
+                else {
+                    setAddBySerial(props.label);
+                }
+                break;
+            case api.AddToQueueButton.LookupExistingSerial:
+                setAddBySerial(props.label);
+                return;
+            case api.AddToQueueButton.ManualBarcodeScan:
+                setAddByBarcode(props.label);
+                return;
+        }
+    }
+    if (props.rawMatQueue) {
+        return (_jsx(Tooltip, { title: "Add Raw Material", children: _jsx(Fab, { color: "secondary", onClick: click, size: "large", style: { marginBottom: "-30px", zIndex: 1 }, children: _jsx(AddIcon, {}) }) }));
+    }
+    else if (props.inProcQueue) {
+        return (_jsx(Tooltip, { title: "Add Material", children: _jsx(Fab, { color: "secondary", onClick: click, size: "medium", style: { marginBottom: "-30px", zIndex: 1 }, children: _jsx(AssignIcon, { fontSize: "inherit" }) }) }));
+    }
+    else {
+        return null;
+    }
+});
+function usePossibleQueuesForAdd(queueNames) {
+    const toShow = useAtomValue(materialDialogOpen);
+    if (toShow && toShow.type === "AddMatWithEnteredSerial") {
+        if (queueNames.includes(toShow.toQueue)) {
+            return [toShow.toQueue];
+        }
+        else {
+            return [];
+        }
+    }
+    else if (toShow && toShow.type === "Barcode" && toShow.toQueue) {
+        if (queueNames.includes(toShow.toQueue)) {
+            return [toShow.toQueue];
+        }
+        else {
+            return [];
+        }
+    }
+    else {
+        return queueNames;
+    }
+}
+const QueuedMaterialDialog = memo(function QueuedMaterialDialog({ queueNames, }) {
+    const [addMatSt, setAddMatSt] = useState({
+        toQueue: null,
+        enteredOperator: null,
+        newMaterialTy: null,
+    });
+    const [invalidateSt, setInvalidateSt] = useState(null);
+    const onClose = useCallback(() => {
+        setAddMatSt({ toQueue: null, enteredOperator: null, newMaterialTy: null });
+        setInvalidateSt(null);
+    }, []);
+    queueNames = usePossibleQueuesForAdd(queueNames);
+    return (_jsx(MaterialDialog, { allowNote: true, onClose: onClose, highlightProcsGreaterOrEqualTo: invalidateSt?.process ?? undefined, extraDialogElements: _jsxs(_Fragment, { children: [_jsx(InvalidateCycleDialogContent, { st: invalidateSt, setState: setInvalidateSt }), _jsx(AddToQueueMaterialDialogCt, { queueNames: queueNames, st: addMatSt, setState: setAddMatSt })] }), buttons: _jsxs(_Fragment, { children: [_jsx(PrintLabelButton, {}), _jsx(QuarantineMatButton, { onClose: onClose }), _jsx(InvalidateCycleDialogButton, { onClose: onClose, st: invalidateSt, setState: setInvalidateSt }), _jsx(AddToQueueButton, { st: addMatSt, queueNames: queueNames, onClose: onClose })] }) }));
+});
+export const Queues = (props) => {
+    const operator = useAtomValue(currentOperator);
+    const currentSt = useAtomValue(currentStatus);
+    const rawMatQueues = useAtomValue(rawMaterialQueues);
+    const inProcQueues = useAtomValue(inProcessQueues);
+    const data = useMemo(() => selectQueueData(props.queues, currentSt, rawMatQueues, inProcQueues), [currentSt, props.queues, rawMatQueues, inProcQueues]);
+    const hasJobs = !LazySeq.ofObject(currentSt.jobs).isEmpty();
+    const [changeNoteForJob, setChangeNoteForJob] = useState(null);
+    const closeChangeNoteDialog = useCallback(() => setChangeNoteForJob(null), []);
+    const [editQtyForJob, setEditQtyForJob] = useState(null);
+    const closeEditJobQtyDialog = useCallback(() => setEditQtyForJob(null), []);
+    const [multiMaterialDialog, setMultiMaterialDialog] = useState(null);
+    const closeMultiMatDialog = useCallback(() => setMultiMaterialDialog(null), []);
+    return (_jsxs(Box, { sx: {
+            padding: "8px",
+            width: "100%",
+        }, children: [data.map((region, idx) => (_jsx("div", { style: idx < data.length - 1 ? { borderBottom: "1px solid black" } : undefined, children: _jsx(SortableRegion, { matIds: region.material.map((m) => m.materialID), direction: "rect", queueName: region.label, renderDragOverlay: (mat) => (_jsx(DragOverlayInProcMaterial, { mat: mat, hideEmptySerial: true, displayJob: hasJobs && region.rawMaterialQueue, fsize: "normal" })), children: _jsxs(Box, { minHeight: "134px", children: [_jsxs(Box, { display: "flex", margin: "4px", children: [_jsx(Typography, { variant: "h4", flexGrow: 1, children: region.label }), region.free ? undefined : (_jsx(AddMaterialButtons, { label: region.label, rawMatQueue: region.rawMaterialQueue, inProcQueue: region.inProcQueue }))] }), _jsxs(Box, { justifyContent: "flex-start", display: "flex", flexWrap: "wrap", children: [region.material.map((m, matIdx) => (_jsx(SortableInProcMaterial, { mat: m, hideEmptySerial: true, fsize: "normal", displayJob: hasJobs && region.rawMaterialQueue }, matIdx))), region.groupedRawMat && region.groupedRawMat.length > 0
+                                        ? region.groupedRawMat.map((matGroup, idx) => matGroup.material.length === 1 ? (_jsx(InProcMaterial, { mat: matGroup.material[0], hideEmptySerial: true, fsize: "normal", displayJob: hasJobs && region.rawMaterialQueue }, idx)) : (_jsx(MultiMaterial, { partOrCasting: matGroup.partOrCasting, assignedJobUnique: matGroup.assignedJobUnique, material: matGroup.material, fsize: "normal", onOpen: () => setMultiMaterialDialog(matGroup.material) }, idx)))
+                                        : undefined, region.rawMaterialQueue ? (hasJobs ? (_jsx(RawMaterialJobTable, { queue: region.label, editNote: setChangeNoteForJob, editQty: setEditQtyForJob })) : (_jsx(RawMaterialWorkorderTable, {}))) : undefined] })] }) }) }, idx))), _jsx(QueuedMaterialDialog, { queueNames: props.queues }), _jsx(AddBySerialDialog, {}), _jsx(AddByBarcodeDialog, {}), _jsx(BulkAddCastingWithoutSerialDialog, {}), _jsx(EditNoteDialog, { job: changeNoteForJob, closeDialog: closeChangeNoteDialog }), _jsx(EditJobPlanQtyDialog, { job: editQtyForJob, closeDialog: closeEditJobQtyDialog }), _jsx(WorkorderCommentDialog, {}), _jsx(MultiMaterialDialog, { material: multiMaterialDialog, closeDialog: closeMultiMatDialog, operator: operator })] }));
+};
+export default function QueuesPage(props) {
+    useSetTitle("Queues");
+    return (_jsx(Box, { component: "main", sx: {
+            backgroundColor: "#F8F8F8",
+            minHeight: {
+                xs: "calc(100vh - 64px - 32px)",
+                sm: "calc(100vh - 64px - 40px)",
+                md: "calc(100vh - 64px)",
+            },
+        }, children: _jsx(Queues, { ...props }) }));
+}

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

@@ -0,0 +1,30 @@
+export type AddMaterialState = {
+    readonly toQueue: string | null;
+    readonly enteredOperator: string | null;
+    readonly newMaterialTy: NewMaterialToQueueType | null;
+};
+type NewMaterialToQueueType = {
+    readonly kind: "JobAndProc";
+    readonly jobUnique: string;
+    readonly last_proc: number;
+    readonly workorder: string | null;
+} | {
+    readonly kind: "RawMat";
+    readonly rawMatName: string;
+};
+export declare function PromptForQueue({ selectedQueue, setSelectedQueue, queueNames, }: {
+    selectedQueue: string | null;
+    setSelectedQueue: (queue: string) => void;
+    queueNames: ReadonlyArray<string>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AddToQueueMaterialDialogCt({ st, queueNames, setState, }: {
+    st: AddMaterialState;
+    queueNames: ReadonlyArray<string>;
+    setState: (st: AddMaterialState) => void;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function AddToQueueButton({ st: { enteredOperator, newMaterialTy, toQueue }, queueNames, onClose, }: {
+    st: AddMaterialState;
+    queueNames: ReadonlyArray<string>;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,248 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* Copyright (c) 2025, 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 { useState, Fragment, useEffect, useRef } from "react";
+import { Button, Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, TextField, Tooltip, Typography, styled, } from "@mui/material";
+import { ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
+import { PartIdenticon, WorkorderFromBarcode } from "./Material.js";
+import * as api from "../../network/api.js";
+import * as matDetails from "../../cell-status/material-details.js";
+import { usePossibleNewMaterialTypes, } from "../../data/queue-material.js";
+import { currentOperator } from "../../data/operators.js";
+import { fmsInformation } from "../../network/server-settings.js";
+import { useAddNewCastingToQueue } from "../../cell-status/material-details.js";
+import { useAtomValue, useSetAtom } from "jotai";
+function useAllowAddToQueue(queueNames) {
+    const existingMat = useAtomValue(matDetails.materialInDialogInfo);
+    const inProcMat = useAtomValue(matDetails.inProcessMaterialInDialog);
+    const possibleNewMats = useAtomValue(matDetails.barcodePotentialNewMaterial);
+    const curInQueueOnScreen = inProcMat !== null &&
+        inProcMat.location.type === api.LocType.InQueue &&
+        inProcMat.location.currentQueue &&
+        queueNames.includes(inProcMat.location.currentQueue);
+    if (curInQueueOnScreen)
+        return false;
+    if (inProcMat?.location.type === api.LocType.OnPallet)
+        return false;
+    if (inProcMat?.action.type === api.ActionType.Loading)
+        return false;
+    if (existingMat === null && !possibleNewMats) {
+        return false;
+    }
+    return true;
+}
+const ExpandMore = styled(ExpandMoreIcon, { shouldForwardProp: (prop) => prop.toString()[0] !== "$" })(({ theme, $expandedOpen }) => ({
+    transform: $expandedOpen ? "rotate(0deg)" : "rotate(-90deg)",
+    transition: theme.transitions.create("transform", {
+        duration: theme.transitions.duration.shortest,
+    }),
+}));
+function SelectRawMaterial({ newMaterialTy, setNewMaterialTy, castings, indent, }) {
+    return (_jsx(List, { sx: indent ? (theme) => ({ pl: theme.spacing(4) }) : undefined, children: castings.map((casting) => (_jsx(ListItem, { children: _jsxs(ListItemButton, { selected: newMaterialTy?.kind === "RawMat" && newMaterialTy?.rawMatName === casting.casting, onClick: () => setNewMaterialTy({ kind: "RawMat", rawMatName: casting.casting }), children: [_jsx(ListItemIcon, { children: _jsx(PartIdenticon, { part: casting.casting }) }), _jsx(ListItemText, { primary: casting.casting, primaryTypographyProps: { variant: "h4" }, secondary: casting.message ?? undefined })] }) }, casting.casting))) }));
+}
+function SelectJob({ newMaterialTy, setNewMaterialTy, curCollapse, setCurCollapse, indent, jobs, }) {
+    return (_jsx(List, { sx: indent ? (theme) => ({ pl: theme.spacing(4) }) : undefined, children: jobs.map((j, idx) => j.machinedProcs.length === 1 ? (_jsx("div", { children: _jsx(ListItem, { children: _jsxs(ListItemButton, { alignItems: "flex-start", selected: newMaterialTy?.kind === "JobAndProc" &&
+                        newMaterialTy?.jobUnique === j.jobUnique &&
+                        newMaterialTy?.last_proc === j.machinedProcs[0].lastProc, onClick: () => setNewMaterialTy({
+                        kind: "JobAndProc",
+                        jobUnique: j.jobUnique,
+                        last_proc: j.machinedProcs[0].lastProc,
+                        workorder: j.workorder,
+                    }), children: [j.job ? (_jsx(ListItemIcon, { children: _jsx(PartIdenticon, { part: j.job.partName }) })) : undefined, _jsx(ListItemText, { primary: (j.job?.partName ?? "") + " (" + j.jobUnique + ")", slotProps: { primary: { variant: "h4" } }, secondary: _jsxs(Typography, { variant: "body2", children: [j.machinedProcs[0].lastProc === 0
+                                        ? "Raw Material"
+                                        : "Last machined process " + j.machinedProcs[0].lastProc.toString(), ", ", j.job?.routeStartUTC.toLocaleDateString() ?? "", ", ", j.machinedProcs[0].details] }) })] }) }) }, idx)) : (_jsxs(Fragment, { children: [_jsx(ListItem, { children: _jsxs(ListItemButton, { onClick: () => {
+                            if (newMaterialTy)
+                                setNewMaterialTy(null);
+                            setCurCollapse(curCollapse && curCollapse.kind === "Job" && curCollapse.unique === j.jobUnique
+                                ? null
+                                : { kind: "Job", unique: j.jobUnique });
+                        }, children: [_jsx(ListItemIcon, { children: _jsx(ExpandMore, { "$expandedOpen": curCollapse !== null && curCollapse.kind === "Job" && curCollapse.unique === j.jobUnique }) }), j.job ? (_jsx(ListItemIcon, { children: _jsx(PartIdenticon, { part: j.job.partName }) })) : undefined, _jsx(ListItemText, { primary: (j.job?.partName ?? "") + " (" + j.jobUnique + ")", slotProps: { primary: { variant: "h4" } }, secondary: j.job?.routeStartUTC.toLocaleDateString() })] }) }), _jsx(Collapse, { in: curCollapse !== null && curCollapse.kind === "Job" && curCollapse.unique === j.jobUnique, timeout: "auto", children: j.machinedProcs.map((p, idx) => (_jsx("div", { children: _jsx(ListItem, { sx: (theme) => ({ pl: theme.spacing(indent ? 8 : 4) }), children: _jsx(ListItemButton, { selected: newMaterialTy?.kind === "JobAndProc" &&
+                                    newMaterialTy?.jobUnique === j.jobUnique &&
+                                    newMaterialTy?.last_proc === p.lastProc, onClick: () => setNewMaterialTy({
+                                    kind: "JobAndProc",
+                                    jobUnique: j.jobUnique,
+                                    last_proc: p.lastProc,
+                                    workorder: j.workorder,
+                                }), children: _jsx(ListItemText, { primary: p.lastProc === 0 ? "Raw Material" : "Last machined process " + p.lastProc.toString(), secondary: p.details }) }) }) }, idx))) })] }, idx))) }));
+}
+function SelectRawMatAndJob({ newMaterialTy, options, setNewMaterialTy, curCollapse, setCurCollapse, }) {
+    return (_jsxs(List, { children: [_jsx(ListItem, { children: _jsxs(ListItemButton, { onClick: () => {
+                        if (newMaterialTy)
+                            setNewMaterialTy(null);
+                        setCurCollapse(curCollapse && curCollapse.kind === "RawMat" ? null : { kind: "RawMat" });
+                    }, children: [_jsx(ListItemIcon, { children: _jsx(ExpandMore, { "$expandedOpen": curCollapse !== null && curCollapse.kind === "RawMat" }) }), _jsx(ListItemText, { primary: "Raw Material" })] }) }), _jsx(Collapse, { in: curCollapse !== null && curCollapse.kind === "RawMat", timeout: "auto", children: _jsx(SelectRawMaterial, { castings: options.castings, newMaterialTy: newMaterialTy, setNewMaterialTy: setNewMaterialTy, indent: true }) }), _jsx(ListItem, { children: _jsxs(ListItemButton, { onClick: () => {
+                        if (newMaterialTy)
+                            setNewMaterialTy(null);
+                        setCurCollapse(curCollapse && (curCollapse.kind === "AllJobs" || curCollapse.kind === "Job")
+                            ? null
+                            : { kind: "AllJobs" });
+                    }, children: [_jsx(ListItemIcon, { children: _jsx(ExpandMore, { "$expandedOpen": curCollapse !== null && (curCollapse.kind === "AllJobs" || curCollapse.kind === "Job") }) }), _jsx(ListItemText, { primary: "Specify Job" })] }) }), _jsx(Collapse, { in: curCollapse !== null && (curCollapse.kind === "AllJobs" || curCollapse.kind === "Job"), timeout: "auto", children: _jsx(SelectJob, { newMaterialTy: newMaterialTy, jobs: options.jobs, setNewMaterialTy: setNewMaterialTy, curCollapse: curCollapse, setCurCollapse: setCurCollapse, indent: true }) })] }));
+}
+function PromptForMaterialType({ newMaterialTy, setNewMaterialTy, toQueue, }) {
+    const serial = useAtomValue(matDetails.serialInMaterialDialog);
+    const existingMat = useAtomValue(matDetails.materialInDialogInfo);
+    const [curCollapse, setCurCollapse] = useState(null);
+    const materialTypes = usePossibleNewMaterialTypes(toQueue);
+    if (existingMat)
+        return null;
+    if (serial === null)
+        return null;
+    if (toQueue === null)
+        return null;
+    if (materialTypes.castings.length === 0 && materialTypes.jobs.length === 0) {
+        return _jsxs("div", { children: ["No jobs are currently scheduled for ", toQueue] });
+    }
+    if (materialTypes.jobs.length === 0) {
+        return (_jsx(SelectRawMaterial, { newMaterialTy: newMaterialTy, setNewMaterialTy: setNewMaterialTy, castings: materialTypes.castings }));
+    }
+    if (materialTypes.castings.length === 0) {
+        return (_jsx(SelectJob, { jobs: materialTypes.jobs, newMaterialTy: newMaterialTy, setNewMaterialTy: setNewMaterialTy, curCollapse: curCollapse, setCurCollapse: setCurCollapse }));
+    }
+    return (_jsx(SelectRawMatAndJob, { options: materialTypes, newMaterialTy: newMaterialTy, setNewMaterialTy: setNewMaterialTy, curCollapse: curCollapse, setCurCollapse: setCurCollapse }));
+}
+export function PromptForQueue({ selectedQueue, setSelectedQueue, queueNames, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        ref.current?.scrollIntoView({
+            behavior: "smooth",
+            block: "end",
+        });
+    }, [ref]);
+    return (_jsxs("div", { ref: ref, children: [_jsx("p", { children: "Select a queue" }), _jsx(List, { children: queueNames.map((q, idx) => (_jsx(ListItemButton, { selected: q === selectedQueue, onClick: () => setSelectedQueue(q), children: q }, idx))) })] }));
+}
+function PromptForOperator({ enteredOperator, setEnteredOperator, }) {
+    const fmsInfo = useAtomValue(fmsInformation);
+    if (!fmsInfo.requireOperatorNamePromptWhenAddingMaterial)
+        return null;
+    return (_jsx("div", { style: { marginLeft: "1em" }, children: _jsx(TextField, { fullWidth: true, label: "Operator", value: enteredOperator || "", required: true, onChange: (e) => setEnteredOperator(e.target.value) }) }));
+}
+export function AddToQueueMaterialDialogCt({ st, queueNames, setState, }) {
+    const allowAdd = useAllowAddToQueue(queueNames);
+    if (!allowAdd) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(WorkorderFromBarcode, {}), queueNames.length > 1 ? (_jsx(PromptForQueue, { selectedQueue: st.toQueue, setSelectedQueue: (q) => {
+                    setState({
+                        toQueue: q,
+                        newMaterialTy: null,
+                        enteredOperator: st.enteredOperator,
+                    });
+                }, queueNames: queueNames })) : undefined, _jsx(PromptForMaterialType, { newMaterialTy: st.newMaterialTy, toQueue: queueNames.length > 1 ? st.toQueue : (queueNames[0] ?? null), setNewMaterialTy: (ty) => setState({ ...st, newMaterialTy: ty }) }), _jsx(PromptForOperator, { enteredOperator: st.enteredOperator, setEnteredOperator: (o) => setState({ ...st, enteredOperator: o }) })] }));
+}
+export function AddToQueueButton({ st: { enteredOperator, newMaterialTy, toQueue }, queueNames, onClose, }) {
+    const fmsInfo = useAtomValue(fmsInformation);
+    const operator = useAtomValue(currentOperator);
+    const setMatToShow = useSetAtom(matDetails.materialDialogOpen);
+    const newSerial = useAtomValue(matDetails.serialInMaterialDialog);
+    const newWorkorder = useAtomValue(matDetails.workorderInMaterialDialog);
+    const existingMat = useAtomValue(matDetails.materialInDialogInfo);
+    const inProcMat = useAtomValue(matDetails.inProcessMaterialInDialog);
+    const lastProcMat = useAtomValue(matDetails.materialInDialogLargestUsedProcess);
+    const [addExistingMat, addingExistingMat] = matDetails.useAddExistingMaterialToQueue();
+    const [addNewMat, addingNewMat] = matDetails.useAddNewMaterialToQueue();
+    const [addNewCasting, addingNewCasting] = useAddNewCastingToQueue();
+    const allowAdd = useAllowAddToQueue(queueNames);
+    if (!allowAdd) {
+        return null;
+    }
+    if (toQueue === null && queueNames.length === 1) {
+        toQueue = queueNames[0];
+    }
+    let addProcMsg = "";
+    if (existingMat !== null) {
+        if (lastProcMat && lastProcMat.process >= lastProcMat.totalNumProcesses) {
+            return null;
+        }
+        else {
+            const lastProc = lastProcMat?.process ?? 0;
+            addProcMsg = " To Run Process " + (lastProc + 1).toString();
+        }
+    }
+    else {
+        if (newMaterialTy?.kind === "JobAndProc" && newMaterialTy?.last_proc !== undefined) {
+            addProcMsg = " To Run Process " + (newMaterialTy.last_proc + 1).toString();
+        }
+        if (newMaterialTy?.kind === "RawMat" && newMaterialTy?.rawMatName) {
+            addProcMsg = " As " + newMaterialTy.rawMatName;
+        }
+    }
+    let withSerialMsg = "";
+    if (!existingMat && newSerial && newSerial !== "") {
+        withSerialMsg = " With Serial " + newSerial;
+    }
+    const curQueue = inProcMat?.location.currentQueue ?? null;
+    return (_jsx(_Fragment, { children: _jsx(Tooltip, { title: toQueue === null
+                ? "Select a queue to add the material to"
+                : fmsInfo.requireOperatorNamePromptWhenAddingMaterial &&
+                    (enteredOperator === null || enteredOperator === "")
+                    ? "Please enter an operator name"
+                    : "", children: _jsx("span", { children: _jsx(Button, { color: "primary", disabled: toQueue === null ||
+                        addingExistingMat === true ||
+                        addingNewMat === true ||
+                        addingNewCasting === true ||
+                        (existingMat === null && newMaterialTy === null) ||
+                        (fmsInfo.requireOperatorNamePromptWhenAddingMaterial &&
+                            (enteredOperator === null || enteredOperator === "")), onClick: () => {
+                        if (existingMat) {
+                            addExistingMat({
+                                materialId: existingMat.materialID,
+                                queue: toQueue ?? "",
+                                queuePosition: -1,
+                                operator: enteredOperator ?? operator,
+                            });
+                        }
+                        else if (newMaterialTy && newMaterialTy.kind === "JobAndProc" && newMaterialTy.jobUnique) {
+                            addNewMat({
+                                jobUnique: newMaterialTy.jobUnique,
+                                lastCompletedProcess: newMaterialTy.last_proc,
+                                serial: newSerial ?? undefined,
+                                workorder: newWorkorder ?? newMaterialTy?.workorder,
+                                queue: toQueue ?? "",
+                                queuePosition: -1,
+                                operator: enteredOperator ?? operator,
+                            });
+                        }
+                        else if (newMaterialTy && newMaterialTy.kind === "RawMat" && newMaterialTy.rawMatName) {
+                            addNewCasting({
+                                casting: newMaterialTy.rawMatName,
+                                quantity: 1,
+                                queue: toQueue ?? "",
+                                serials: newSerial ? [newSerial] : undefined,
+                                workorder: newWorkorder,
+                                operator: enteredOperator ?? operator,
+                            });
+                        }
+                        setMatToShow(null);
+                        onClose();
+                    }, children: toQueue === null ? ("Add to Queue") : (_jsxs("span", { children: [curQueue !== null ? `Move From ${curQueue} To` : "Add To", " ", toQueue, withSerialMsg, addProcMsg] })) }) }) }) }));
+}

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

@@ -0,0 +1,2 @@
+export declare function SignalInspectionButton(): import("react/jsx-runtime").JSX.Element | null;
+export declare const SelectInspTypeDialog: import("react").NamedExoticComponent<object>;