@seedtactics/insight-client 16.4.0

package/dist/components/operations/CurrentWorkorders.js

@@ -0,0 +1,368 @@
+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 { memo, useState, useMemo, Suspense, useTransition } from "react";
+import { Box, Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, keyframes, List, ListItem, ListItemButton, ListItemText, ListSubheader, MenuItem, Select, Stack, styled, TableSortLabel, TextField, } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { Tooltip } from "@mui/material";
+import { Typography } from "@mui/material";
+import { Table } from "@mui/material";
+import { TableRow } from "@mui/material";
+import { TableCell } from "@mui/material";
+import { TableHead } from "@mui/material";
+import { TableBody } from "@mui/material";
+import { MaterialDialog, PartIdenticon } from "../station-monitor/Material.js";
+import { KeyboardArrowDown as KeyboardArrowDownIcon, KeyboardArrowUp as KeyboardArrowUpIcon, ImportExport, MoreHoriz, Warning as WarningIcon, Check, ErrorOutline, SavedSearch, Search, Clear, Loop, } from "@mui/icons-material";
+import { Collapse } from "@mui/material";
+import { addWorkorderComment, currentStatus } from "../../cell-status/current-status.js";
+import { LazySeq } from "@seedtactics/immutable-collections";
+import { currentRoute, RouteLocation, useSetTitle } from "../routes.js";
+import { WorkorderSerialCloseout } from "../../network/api.js";
+import { durationToMinutes } from "../../util/parseISODuration.js";
+import { materialDialogOpen, materialInDialogInfo, useCompleteCloseout, } from "../../cell-status/material-details.js";
+import copy from "copy-to-clipboard";
+import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { WorkorderGantt } from "./WorkorderGantt.js";
+import { SelectWorkorderDialog, selectWorkorderDialogOpen } from "../station-monitor/SelectWorkorder.js";
+import { LogBackend } from "../../network/backend.js";
+const currentWorkorderIdToSearch = atom((get) => {
+    const r = get(currentRoute);
+    if (r.route === RouteLocation.Operations_CurrentWorkorders) {
+        return r.workorder ?? null;
+    }
+    else {
+        return null;
+    }
+}, (get, set, workId) => {
+    const r = get(currentRoute);
+    if (r.route === RouteLocation.Operations_CurrentWorkorders) {
+        if (workId === "") {
+            workId = null;
+        }
+        set(currentRoute, {
+            route: RouteLocation.Operations_CurrentWorkorders,
+            workorder: workId ?? undefined,
+        });
+    }
+});
+const recentSearchedWorkorders = atomWithStorage("recentSearchedWorkorders", []);
+const currentSearchedWorkorder = atom(async (get, { signal }) => {
+    const workId = get(currentWorkorderIdToSearch);
+    if (workId === null) {
+        return null;
+    }
+    return (await LogBackend.getActiveWorkorder(workId, signal)) ?? [];
+});
+const WorkorderTableRow = styled(TableRow)({
+    "& > *": {
+        borderBottom: "unset !important",
+    },
+});
+const numFormat = new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 });
+const WorkorderDetails = memo(function WorkorderDetails({ workorder, }) {
+    const setMatToShow = useSetAtom(materialDialogOpen);
+    const setCommentDialog = useSetAtom(workorderCommentDialogAtom);
+    const stationNames = LazySeq.ofObject(workorder.activeStationTime ?? {})
+        .concat(LazySeq.ofObject(workorder.elapsedStationTime ?? {}))
+        .map(([st]) => st)
+        .distinctAndSortBy((s) => s);
+    function show(wmat) {
+        setMatToShow({
+            type: "MatSummary",
+            summary: {
+                ...wmat,
+                partName: workorder.part,
+            },
+        });
+    }
+    return (_jsxs(Stack, { direction: "row", flexWrap: "wrap", justifyContent: "space-around", ml: "1em", mr: "1em", children: [_jsx("div", { children: _jsxs(Table, { size: "small", stickyHeader: true, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Serial" }), _jsx(TableCell, { children: "Quarantine?" }), _jsx(TableCell, { sx: { whiteSpace: "nowrap" }, children: "Inspect Failed?" }), _jsx(TableCell, { sx: { whiteSpace: "nowrap" }, children: "Close Out" }), _jsx(TableCell, { padding: "checkbox" })] }) }), _jsx(TableBody, { children: (workorder.material ?? []).map((s) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: s.serial ?? "" }), _jsx(TableCell, { sx: { textAlign: "center" }, padding: "checkbox", children: s.quarantined ? _jsx(SavedSearch, { fontSize: "inherit" }) : "" }), _jsx(TableCell, { sx: { textAlign: "center" }, padding: "checkbox", children: s.inspectionFailed ? _jsx(ErrorOutline, { fontSize: "inherit" }) : "" }), _jsx(TableCell, { sx: { textAlign: "center" }, padding: "checkbox", children: s.closeout === WorkorderSerialCloseout.None ? ("") : s.closeout === WorkorderSerialCloseout.ClosedOut ? (_jsx(Check, { fontSize: "inherit" })) : (_jsx(ErrorOutline, { fontSize: "inherit" })) }), _jsx(TableCell, { padding: "checkbox", children: _jsx(IconButton, { onClick: () => show(s), size: "large", children: _jsx(MoreHoriz, { fontSize: "inherit" }) }) })] }, s.materialID))) })] }) }), _jsx("div", { children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Station" }), _jsx(TableCell, { children: "Active Minutes" }), _jsx(TableCell, { children: "Elapsed Minutes" })] }) }), _jsx(TableBody, { children: stationNames.map((st) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: st }), _jsx(TableCell, { children: numFormat.format(durationToMinutes(workorder.activeStationTime?.[st] ?? 0)) }), _jsx(TableCell, { children: numFormat.format(durationToMinutes(workorder.elapsedStationTime?.[st] ?? 0)) })] }, st))) })] }) }), _jsxs("div", { children: [_jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Time" }), _jsx(TableCell, { children: "Comment" })] }) }), _jsx(TableBody, { children: (workorder.comments ?? []).map((c, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: c.timeUTC.toLocaleString(undefined, {
+                                                year: "numeric",
+                                                month: "numeric",
+                                                day: "numeric",
+                                                hour: "numeric",
+                                                minute: "numeric",
+                                            }) }), _jsx(TableCell, { children: c.comment })] }, idx))) })] }), _jsx(Button, { sx: { mt: "0.5em" }, onClick: () => setCommentDialog(workorder), children: "Add Comment" })] })] }));
+});
+function utcDateOnlyToString(d) {
+    if (d) {
+        return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate())).toLocaleDateString();
+    }
+    else {
+        return "";
+    }
+}
+function isAbnormal(m) {
+    if (m.closeout === WorkorderSerialCloseout.ClosedOut) {
+        return false;
+    }
+    return m.quarantined || m.inspectionFailed || m.closeout === WorkorderSerialCloseout.CloseOutFailed;
+}
+function WorkorderRow({ workorder, showSim, }) {
+    const [open, setOpen] = useState(false);
+    const colCnt = showSim ? 10 : 8;
+    return (_jsxs(_Fragment, { children: [_jsxs(WorkorderTableRow, { 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("div", { children: _jsx(Typography, { variant: "body2", component: "span", display: "block", children: workorder.part }) })] }) }), _jsx(TableCell, { children: workorder.dueDate === null ? "" : workorder.dueDate.toLocaleDateString() }), _jsx(TableCell, { align: "right", children: workorder.priority }), _jsx(TableCell, { align: "right", children: workorder.plannedQuantity }), _jsx(TableCell, { align: "right", children: workorder.material?.length ?? 0 }), _jsx(TableCell, { align: "right", children: workorder.material?.filter(isAbnormal).length ?? 0 }), _jsx(TableCell, { align: "right", children: workorder.completedQuantity }), showSim ? (_jsxs(_Fragment, { children: [_jsx(TableCell, { align: "right", children: utcDateOnlyToString(workorder.simulatedStart) }), _jsx(TableCell, { align: "right", children: utcDateOnlyToString(workorder.simulatedFilled) })] })) : undefined, _jsx(TableCell, { children: _jsx(Tooltip, { title: "Show Details", children: _jsx(IconButton, { size: "small", onClick: () => setOpen(!open), children: open ? _jsx(KeyboardArrowUpIcon, {}) : _jsx(KeyboardArrowDownIcon, {}) }) }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { sx: { pb: "0", pt: "0" }, colSpan: colCnt, children: _jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: _jsx(WorkorderDetails, { workorder: workorder }) }) }) })] }));
+}
+var SortColumn;
+(function (SortColumn) {
+    SortColumn[SortColumn["WorkorderId"] = 0] = "WorkorderId";
+    SortColumn[SortColumn["Part"] = 1] = "Part";
+    SortColumn[SortColumn["PlannedQty"] = 2] = "PlannedQty";
+    SortColumn[SortColumn["DueDate"] = 3] = "DueDate";
+    SortColumn[SortColumn["Priority"] = 4] = "Priority";
+    SortColumn[SortColumn["CompletedQty"] = 5] = "CompletedQty";
+    SortColumn[SortColumn["AssignedQty"] = 6] = "AssignedQty";
+    SortColumn[SortColumn["AbnormalQty"] = 7] = "AbnormalQty";
+    SortColumn[SortColumn["SimulatedStart"] = 8] = "SimulatedStart";
+    SortColumn[SortColumn["SimulatedFilled"] = 9] = "SimulatedFilled";
+})(SortColumn || (SortColumn = {}));
+function sortWorkorders(workorders, sortBy, order) {
+    let sortCol;
+    switch (sortBy) {
+        case SortColumn.WorkorderId:
+            sortCol = (j) => j.workorderId;
+            break;
+        case SortColumn.Part:
+            sortCol = (j) => j.part;
+            break;
+        case SortColumn.PlannedQty:
+            sortCol = (j) => j.plannedQuantity;
+            break;
+        case SortColumn.DueDate:
+            sortCol = (j) => j.dueDate.getTime();
+            break;
+        case SortColumn.Priority:
+            sortCol = (j) => j.priority;
+            break;
+        case SortColumn.CompletedQty:
+            sortCol = (j) => j.completedQuantity;
+            break;
+        case SortColumn.AbnormalQty:
+            sortCol = (j) => j.material?.filter(isAbnormal).length ?? 0;
+            break;
+        case SortColumn.AssignedQty:
+            sortCol = (j) => j.material?.length ?? 0;
+            break;
+        case SortColumn.SimulatedStart:
+            sortCol = (j) => j.simulatedStart?.getTime() ?? null;
+            break;
+        case SortColumn.SimulatedFilled:
+            sortCol = (j) => j.simulatedFilled?.getTime() ?? null;
+            break;
+    }
+    return LazySeq.of(workorders).toSortedArray(order === "asc" ? { asc: sortCol } : { desc: sortCol });
+}
+function WorkorderRows({ sortBy, order, showSim, }) {
+    const currentSt = useAtomValue(currentStatus);
+    const searched = useAtomValue(currentSearchedWorkorder);
+    const sorted = useMemo(() => sortWorkorders(searched ?? currentSt.workorders ?? [], sortBy, order), [currentSt.workorders, sortBy, order, searched]);
+    if (searched && searched.length === 0) {
+        return (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: showSim ? 10 : 8, children: "No workorders found" }) }));
+    }
+    else {
+        return (_jsx(_Fragment, { children: sorted.map((workorder) => (_jsx(WorkorderRow, { workorder: workorder, showSim: showSim }, `${workorder.workorderId}-${workorder.part}`))) }));
+    }
+}
+function copyWorkordersToClipboard(workorders, showSim) {
+    let table = "<table>\n<thead><tr>";
+    table += "<th>Workorder</th>";
+    table += "<th>Part</th>";
+    table += "<th>Due Date</th>";
+    table += "<th>Priority</th>";
+    table += "<th>Planned Qty</th>";
+    table += "<th>Completed Qty</th>";
+    if (showSim) {
+        table += "<th>Simulated Start</th>";
+        table += "<th>Simulated Filled</th>";
+    }
+    table += "<th>Serials</th>";
+    table += "<th>Active Time (mins)</th>";
+    table += "<th>Elapsed Time (mins)</th>";
+    table += "</tr></thead>\n<tbody>\n";
+    for (const w of workorders) {
+        table += "<tr>";
+        table += `<td>${w.workorderId}</td>`;
+        table += `<td>${w.part}</td>`;
+        table += `<td>${w.dueDate === null ? "" : w.dueDate.toLocaleDateString()}</td>`;
+        table += `<td>${w.priority}</td>`;
+        table += `<td>${w.plannedQuantity}</td>`;
+        table += `<td>${w.completedQuantity}</td>`;
+        if (showSim) {
+            table += `<td>${utcDateOnlyToString(w.simulatedStart)}</td>`;
+            table += `<td>${utcDateOnlyToString(w.simulatedFilled)}</td>`;
+        }
+        table += `<td>${(w.material ?? []).map((w) => w.serial ?? "").join(";")}</td>`;
+        table += `<td>${LazySeq.ofObject(w.activeStationTime ?? {})
+            .map(([st, t]) => `${st}: ${durationToMinutes(t)}`)
+            .toRArray()
+            .join(";")}</td>`;
+        table += `<td>${LazySeq.ofObject(w.elapsedStationTime ?? {})
+            .map(([st, t]) => `${st}: ${durationToMinutes(t)}`)
+            .toRArray()
+            .join(";")}</td>`;
+        table += "</tr>\n";
+    }
+    table += "</tbody></table>\n";
+    copy(table);
+}
+function SortColHeader(props) {
+    return (_jsxs(TableCell, { align: props.align, sortDirection: props.sortBy === props.col ? props.order : false, children: [_jsx(Tooltip, { title: "Sort", enterDelay: 300, children: _jsx(TableSortLabel, { active: props.sortBy === props.col, direction: props.order, onClick: () => {
+                        if (props.col === props.sortBy) {
+                            props.setOrder(props.order === "asc" ? "desc" : "asc");
+                        }
+                        else {
+                            props.setSortBy(props.col);
+                            props.setOrder("asc");
+                        }
+                    }, children: props.children }) }), props.extraIcon] }));
+}
+const tableOrGantt = atom("table");
+const SimulatedWarning = memo(function SimulatedWarning({ showSim }) {
+    const [selected, setSelected] = useAtom(tableOrGantt);
+    return (_jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "flex-end", alignItems: "center", children: [showSim ? (_jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", flexGrow: 1, children: [_jsx(WarningIcon, { fontSize: "small" }), _jsx(Typography, { variant: "caption", children: "Projected dates are estimates" })] })) : undefined, _jsx(FormControl, { size: "small", children: _jsxs(Select, { variant: "outlined", value: selected, onChange: (e) => setSelected(e.target.value), children: [_jsx(MenuItem, { value: "table", children: "Table" }), _jsx(MenuItem, { value: "gantt", children: "Gantt" })] }) })] }));
+});
+const rotateKeyframes = keyframes `
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+  `;
+const RotatingLoadingIcon = styled(Loop)(() => ({
+    animation: `${rotateKeyframes} 1.5s linear infinite`,
+}));
+function WorkorderSearchButton() {
+    const [open, setOpen] = useState(false);
+    const [loading, startTrans] = useTransition();
+    const [searchWorkId, setSearchWorkId] = useAtom(currentWorkorderIdToSearch);
+    const [curWorkId, setCurWorkId] = useState(null);
+    const [prevSearches, setPrevSearches] = useAtom(recentSearchedWorkorders);
+    function search(workId) {
+        if (workId !== null && workId !== "") {
+            startTrans(() => {
+                setSearchWorkId(workId);
+            });
+            setOpen(false);
+            setCurWorkId(null);
+            setPrevSearches((prev) => {
+                const n = prev.filter((w) => w !== workId);
+                n.unshift(workId);
+                return n.slice(0, 5);
+            });
+        }
+    }
+    return (_jsxs(_Fragment, { children: [loading ? (_jsx(Tooltip, { title: "Searching.... Click to cancel", children: _jsx(IconButton, { size: "small", onClick: () => setSearchWorkId(null), children: _jsx(RotatingLoadingIcon, { fontSize: "inherit" }) }) })) : searchWorkId ? (_jsx(Tooltip, { title: "Clear Search", children: _jsx(IconButton, { size: "small", onClick: () => setSearchWorkId(null), children: _jsx(Clear, { fontSize: "inherit" }) }) })) : (_jsx(Tooltip, { title: "Search", children: _jsx(IconButton, { size: "small", onClick: (e) => {
+                        setOpen(true);
+                        e.currentTarget.blur();
+                    }, children: _jsx(Search, { fontSize: "inherit" }) }) })), _jsxs(Dialog, { open: open, onClose: () => setOpen(false), children: [_jsx(DialogTitle, { children: "Search Workorder" }), _jsxs(DialogContent, { children: [_jsx(TextField, { variant: "outlined", fullWidth: true, autoFocus: true, sx: { mt: "0.5em", minWidth: "15em" }, label: "Workorder ID", value: curWorkId ?? "", onChange: (e) => setCurWorkId(e.target.value), onKeyDown: (e) => {
+                                    if (e.key === "Enter") {
+                                        search(curWorkId);
+                                        e.preventDefault();
+                                    }
+                                } }), prevSearches.length > 0 ? (_jsx(_Fragment, { children: _jsx(List, { dense: true, sx: { mt: "1em" }, subheader: _jsx(ListSubheader, { children: "Previous Searches" }), children: prevSearches.map((w) => (_jsx(ListItem, { onClick: () => search(w), children: _jsx(ListItemButton, { children: _jsx(ListItemText, { primary: w }) }) }, w))) }) })) : undefined] }), _jsxs(DialogActions, { children: [_jsx(Button, { color: "primary", onClick: () => search(curWorkId), children: "Search" }), _jsx(Button, { color: "secondary", onClick: () => setOpen(false), children: "Cancel" })] })] })] }));
+}
+const WorkorderHeader = memo(function WorkorderHeader(props) {
+    const sort = {
+        sortBy: props.sortBy,
+        setSortBy: props.setSortBy,
+        order: props.order,
+        setOrder: props.setOrder,
+    };
+    return (_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(SortColHeader, { align: "left", col: SortColumn.WorkorderId, ...sort, extraIcon: props.disableSearch ? undefined : _jsx(WorkorderSearchButton, {}), children: "Workorder" }), _jsx(SortColHeader, { align: "left", col: SortColumn.Part, ...sort, children: "Part" }), _jsx(SortColHeader, { align: "left", col: SortColumn.DueDate, ...sort, children: "Due Date" }), _jsx(SortColHeader, { align: "right", col: SortColumn.Priority, ...sort, children: "Priority" }), _jsx(SortColHeader, { align: "right", col: SortColumn.PlannedQty, ...sort, children: "Planned Quantity" }), _jsx(SortColHeader, { align: "right", col: SortColumn.AssignedQty, ...sort, children: "Started Quantity" }), _jsx(SortColHeader, { align: "right", col: SortColumn.AbnormalQty, ...sort, children: "Abnormal Quantity" }), _jsx(SortColHeader, { align: "right", col: SortColumn.CompletedQty, ...sort, children: "Completed Quantity" }), props.showSim ? (_jsxs(_Fragment, { children: [_jsx(SortColHeader, { align: "right", col: SortColumn.SimulatedStart, ...sort, children: "Projected Start" }), _jsx(SortColHeader, { align: "right", col: SortColumn.SimulatedFilled, ...sort, children: "Projected Filled" })] })) : undefined, _jsx(TableCell, { children: _jsx(Tooltip, { title: "Copy to Clipboard", children: _jsx(IconButton, { style: { height: "25px", paddingTop: 0, paddingBottom: 0 }, size: "large", onClick: () => copyWorkordersToClipboard(props.workorders, props.showSim), children: _jsx(ImportExport, {}) }) }) })] }) }));
+});
+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] })] }) }), _jsx(DialogContent, { children: _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 }));
+}
+function SearchingWorkorder() {
+    const [workId, setWorkId] = useAtom(currentWorkorderIdToSearch);
+    return (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 10, children: _jsxs(Stack, { direction: "column", mt: "3em", flex: "flex", alignItems: "center", width: "100%", children: [_jsxs(Stack, { direction: "row", spacing: "3", children: [_jsx(CircularProgress, {}), workId && workId !== "" ? (_jsxs(Typography, { variant: "h6", children: ["Searching for workorder ", workId] })) : (_jsx(Typography, { variant: "h6", children: "Searching" }))] }), _jsx(Button, { onClick: () => setWorkId(null), children: "Cancel" })] }) }) }));
+}
+function WorkorderTable({ showSim, disableSearch, }) {
+    const [sortBy, setSortBy] = useState(SortColumn.WorkorderId);
+    const [order, setOrder] = useState("asc");
+    const currentSt = useAtomValue(currentStatus);
+    return (_jsxs(Table, { stickyHeader: true, children: [_jsx(WorkorderHeader, { workorders: currentSt?.workorders ?? [], sortBy: sortBy, setSortBy: setSortBy, showSim: showSim, order: order, setOrder: setOrder, disableSearch: disableSearch }), _jsx(TableBody, { children: _jsx(Suspense, { fallback: _jsx(SearchingWorkorder, {}), children: _jsx(WorkorderRows, { sortBy: sortBy, order: order, showSim: showSim }) }) })] }));
+}
+function WorkSerialButtons() {
+    const setWorkorderDialogOpen = useSetAtom(selectWorkorderDialogOpen);
+    const mat = useAtomValue(materialInDialogInfo);
+    const [complete, isCompleting] = useCompleteCloseout();
+    const setToShow = useSetAtom(materialDialogOpen);
+    if (mat === null || mat.materialID < 0) {
+        return null;
+    }
+    function closeout(failed) {
+        if (mat === null)
+            return;
+        complete({
+            mat,
+            operator: "Manager",
+            failed,
+        });
+        setToShow(null);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { color: "primary", disabled: isCompleting, onClick: () => closeout(true), children: "Fail CloseOut" }), _jsx(Button, { color: "primary", disabled: isCompleting, onClick: () => closeout(false), children: "Pass CloseOut" }), _jsx(Button, { color: "primary", onClick: () => setWorkorderDialogOpen(true), children: "Change Workorder" })] }));
+}
+const WorkSerialDialog = memo(function WorkSerialDialog() {
+    return _jsx(MaterialDialog, { buttons: _jsx(WorkSerialButtons, {}) });
+});
+export const CurrentWorkordersPage = memo(function RecentWorkordersPage({ disableSearch, }) {
+    useSetTitle("Workorders");
+    const currentSt = useAtomValue(currentStatus);
+    const display = useAtomValue(tableOrGantt);
+    const showSim = useMemo(() => currentSt.workorders?.some((w) => !!w.simulatedStart || !!w.simulatedFilled) ?? false, [currentSt.workorders]);
+    return (_jsxs(Box, { component: "main", padding: "24px", children: [showSim ? _jsx(SimulatedWarning, { showSim: showSim }) : undefined, display === "table" ? (_jsx(WorkorderTable, { showSim: showSim, disableSearch: disableSearch })) : (_jsx(WorkorderGantt, {})), _jsx(WorkorderCommentDialog, {}), _jsx(WorkSerialDialog, {}), _jsx(SelectWorkorderDialog, {})] }));
+});

package/dist/components/operations/Dashboard.d.ts

@@ -0,0 +1,2 @@
+export declare function ScrollableDashboard(): import("react/jsx-runtime").JSX.Element;
+export default function Dashboard(): import("react/jsx-runtime").JSX.Element;

package/dist/components/operations/Dashboard.js

@@ -0,0 +1,90 @@
+import { jsxs as _jsxs, jsx as _jsx } 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 { memo } from "react";
+import { Box, LinearProgress, Typography } from "@mui/material";
+import { currentStatus } from "../../cell-status/current-status.js";
+import { LazySeq } from "@seedtactics/immutable-collections";
+import { RecentCycleChart } from "./RecentCycleChart.js";
+import { useSetTitle } from "../routes.js";
+import { useAtomValue } from "jotai";
+import { useResizeDetector } from "react-resize-detector";
+const pctFormat = new Intl.NumberFormat(undefined, { style: "percent", minimumFractionDigits: 1 });
+function countExpectedAtNow() {
+    const now = new Date();
+    return (p) => {
+        if (!p.simulatedProduction)
+            return 0;
+        let lastCnt = 0;
+        for (const sim of p.simulatedProduction) {
+            if (sim.timeUTC > now)
+                break;
+            lastCnt = sim.quantity;
+        }
+        return lastCnt;
+    };
+}
+const CompletedParts = memo(function CompletedParts() {
+    const currentSt = useAtomValue(currentStatus);
+    const completed = LazySeq.ofObject(currentSt.jobs).sumBy(([, j]) => LazySeq.of(j.completed ?? []).sumBy((c) => LazySeq.of(c).sumBy((d) => d)));
+    const simulated = LazySeq.ofObject(currentSt.jobs)
+        .flatMap(([, j]) => j.procsAndPaths)
+        .flatMap((p) => p.paths)
+        .sumBy(countExpectedAtNow());
+    const planned = LazySeq.ofObject(currentSt.jobs).sumBy(([, j]) => (j.cycles ?? 0) * j.procsAndPaths.length);
+    return (_jsx(Box, { sx: { maxWidth: "60em", ml: "auto", mr: "auto", pt: "1em" }, children: _jsxs(Box, { sx: {
+                display: "grid",
+                gridTemplateColumns: "auto 1fr auto",
+                gridColumnGap: "0.5em",
+                alignItems: "center",
+            }, children: [_jsx(Box, { sx: { gridRow: 1, gridColumn: 1 }, children: _jsxs(Typography, { variant: "body2", children: ["Completed Parts: ", completed, "/", planned] }) }), _jsx(Box, { sx: { gridRow: 1, gridColumn: 2 }, children: _jsx(LinearProgress, { variant: "determinate", value: (completed / planned) * 100, color: "secondary" }) }), _jsx(Box, { sx: { gridRow: 1, gridColumn: 3 }, children: _jsx(Typography, { variant: "body2", children: pctFormat.format(completed / planned) }) }), _jsx(Box, { sx: { gridRow: 2, gridColumn: 1 }, children: _jsxs(Typography, { variant: "body2", children: ["Simulated Parts: ", simulated, "/", planned] }) }), _jsx(Box, { sx: { gridRow: 2, gridColumn: 2 }, children: _jsx(LinearProgress, { variant: "determinate", value: (simulated / planned) * 100, color: "secondary" }) }), _jsx(Box, { sx: { gridRow: 2, gridColumn: 3 }, children: _jsx(Typography, { variant: "body2", children: pctFormat.format(simulated / planned) }) })] }) }));
+});
+function FillViewportDashboard() {
+    const { ref, width, height } = useResizeDetector({
+        refreshMode: "debounce",
+        refreshRate: 100,
+    });
+    return (_jsxs("main", { style: { height: "calc(100vh - 64px)", display: "flex", flexDirection: "column" }, children: [_jsx("div", { children: _jsx(CompletedParts, {}) }), _jsx("div", { ref: ref, style: { flexGrow: 1, overflow: "hidden", margin: "8px" }, children: width && height && _jsx(RecentCycleChart, { width: width, height: height }) })] }));
+}
+export function ScrollableDashboard() {
+    const { ref, width } = useResizeDetector({
+        refreshMode: "debounce",
+        refreshRate: 100,
+        handleHeight: false,
+    });
+    return (_jsxs("main", { style: { padding: "8px" }, children: [_jsx(CompletedParts, {}), _jsx("div", { ref: ref, style: { overflow: "hidden" }, children: width && _jsx(RecentCycleChart, { width: width, height: 500 }) })] }));
+}
+export default function Dashboard() {
+    useSetTitle("Dashboard");
+    return (_jsxs("div", { children: [_jsx(Box, { sx: { display: { xs: "none", md: "block" } }, children: _jsx(FillViewportDashboard, {}) }), _jsx(Box, { sx: { display: { xs: "block", md: "none" } }, children: _jsx(ScrollableDashboard, {}) })] }));
+}

package/dist/components/operations/OEEChart.d.ts

@@ -0,0 +1,10 @@
+import { OEEBarSeries, OEEType } from "../../data/results.oee.js";
+export declare function OEEChart({ points }: {
+    points: ReadonlyArray<OEEBarSeries>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const OEETable: import("react").NamedExoticComponent<{
+    points: ReadonlyArray<OEEBarSeries>;
+}>;
+export declare function StationOEEPage({ ty }: {
+    readonly ty: OEEType;
+}): import("react/jsx-runtime").JSX.Element;