@seedtactics/insight-client 16.4.0

package/dist/components/operations/AllMaterial.js

@@ -0,0 +1,267 @@
+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 { forwardRef, memo, PureComponent, useState, useCallback, useMemo, } from "react";
+import { selectAllMaterialIntoBins, MaterialBinType, moveMaterialBin, currentMaterialBinOrder, moveMaterialInBin, findMaterialInQuarantineQueues, findQueueInQuarantineQueues, } from "../../data/all-material-bins.js";
+import * as matDetails from "../../cell-status/material-details.js";
+import * as currentSt from "../../cell-status/current-status.js";
+import { Box } from "@mui/material";
+import { Typography } from "@mui/material";
+import { LazySeq } from "@seedtactics/immutable-collections";
+import { DragOverlayInProcMaterial, InProcMaterial, MaterialDialog, SortableInProcMaterial, } from "../station-monitor/Material.js";
+import { InvalidateCycleDialogButton, InvalidateCycleDialogContent, SwapMaterialButtons, SwapMaterialDialogContent, } from "../station-monitor/InvalidateCycle.js";
+import { horizontalListSortingStrategy, SortableContext, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { closestCenter, DndContext, DragOverlay, getFirstCollision, MeasuringStrategy, pointerWithin, rectIntersection, } from "@dnd-kit/core";
+import { QuarantineMatButton } from "../station-monitor/QuarantineButton.js";
+import { useSetTitle } from "../routes.js";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+const ColumnWithTitle = forwardRef(function MaterialBin(props, ref) {
+    return (_jsxs(Box, { sx: {
+            margin: props.isDragOverlay ? undefined : "0.75em",
+            opacity: props.isActiveDrag ? 0.2 : 1,
+            border: "1px solid black",
+            padding: "4px",
+        }, ref: ref, ...props.dragRootProps, children: [_jsx(Box, { role: "button", tabIndex: 0, sx: { cursor: props.isDragOverlay ? "grabbing" : "grab" }, ...props.dragHandleProps, children: _jsx(Typography, { variant: "h4", children: props.label }) }), _jsx(Box, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    flexWrap: "nowrap",
+                    width: "18em",
+                    minHeight: "20em",
+                }, children: props.children })] }));
+});
+function SortableColumnWithTitle(props) {
+    const data = { type: "container", bin: props.bin };
+    const { active, isDragging, attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, } = useSortable({
+        id: props.binId,
+        data,
+    });
+    const handleProps = {
+        ...listeners,
+    };
+    for (const [a, v] of Object.entries(attributes)) {
+        if (a.startsWith("aria")) {
+            handleProps[a] = v;
+        }
+    }
+    const style = {
+        transform: transform
+            ? `translate3d(${Math.round(transform.x)}px, ${Math.round(transform.y)}px, 0)`
+            : undefined,
+        transition: active !== null ? transition : undefined,
+    };
+    return (_jsx(ColumnWithTitle, { ref: setNodeRef, dragRootProps: { style }, dragHandleProps: handleProps, setDragHandleRef: setActivatorNodeRef, isActiveDrag: isDragging, ...props }));
+}
+const QuarantineQueue = memo(function QuarantineQueue(props) {
+    if (props.isDragOverlay) {
+        return (_jsx(ColumnWithTitle, { binId: props.binId, label: props.queue, isDragOverlay: true, children: props.material.map((mat) => (_jsx(InProcMaterial, { mat: mat, hideAvatar: true, showHandle: true }, mat.materialID))) }));
+    }
+    else {
+        return (_jsx(SortableColumnWithTitle, { binId: props.binId, label: props.queue, bin: props.bin, children: _jsx(SortableContext, { items: props.material.map((m) => m.materialID), strategy: verticalListSortingStrategy, children: props.material.map((mat) => (_jsx(SortableInProcMaterial, { mat: mat, hideAvatar: true }, mat.materialID))) }) }));
+    }
+});
+function renderLul(lul) {
+    return "L/U " + lul.toString();
+}
+function compareLul(l1, l2) {
+    return l1 - l2;
+}
+function renderPal(pal) {
+    return "Pallet " + pal;
+}
+function comparePal(p1, p2) {
+    const n1 = parseInt(p1);
+    const n2 = parseInt(p2);
+    if (isNaN(n1) || isNaN(n2)) {
+        return p1.localeCompare(p2);
+    }
+    else {
+        return n1 - n2;
+    }
+}
+function renderQueue(queue) {
+    return queue;
+}
+function compareQueue(q1, q2) {
+    return q1.localeCompare(q2);
+}
+class SystemMaterial extends PureComponent {
+    render() {
+        const Col = this.props.isDragOverlay ? ColumnWithTitle : SortableColumnWithTitle;
+        return (_jsx(Col, { label: this.props.name, binId: this.props.binId, bin: this.props.bin, isDragOverlay: this.props.isDragOverlay, children: LazySeq.of(this.props.material)
+                .sortWith(([l1, _m1], [l2, _m2]) => this.props.compareLabel(l1, l2))
+                .map(([label, material], idx) => (_jsxs("div", { children: [_jsx(Typography, { variant: "caption", children: this.props.renderLabel(label) }), material.map((mat, idx) => (_jsx(InProcMaterial, { mat: mat, hideAvatar: true }, idx)))] }, idx))) }));
+    }
+}
+function MaterialBinColumn({ matBin, isDragOverlay, }) {
+    switch (matBin.type) {
+        case MaterialBinType.LoadStations:
+            return (_jsx(SystemMaterial, { name: "Load Stations", binId: matBin.binId, renderLabel: renderLul, compareLabel: compareLul, material: matBin.byLul, bin: matBin, isDragOverlay: isDragOverlay }));
+        case MaterialBinType.Pallets:
+            return (_jsx(SystemMaterial, { name: "Pallets", binId: matBin.binId, renderLabel: renderPal, compareLabel: comparePal, material: matBin.byPallet, bin: matBin, isDragOverlay: isDragOverlay }));
+        case MaterialBinType.ActiveQueues:
+            return (_jsx(SystemMaterial, { name: "Queues", binId: matBin.binId, renderLabel: renderQueue, compareLabel: compareQueue, material: matBin.byQueue, bin: matBin, isDragOverlay: isDragOverlay }));
+        case MaterialBinType.QuarantineQueues:
+            return (_jsx(QuarantineQueue, { binId: matBin.binId, queue: matBin.queueName, material: matBin.material, bin: matBin, isDragOverlay: isDragOverlay }));
+    }
+}
+const AllMatDialog = memo(function AllMatDialog() {
+    const [swapSt, setSwapSt] = useState(null);
+    const [invalidateSt, setInvalidateSt] = useState(null);
+    function onClose() {
+        setSwapSt(null);
+        setInvalidateSt(null);
+    }
+    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] }), buttons: _jsxs(_Fragment, { children: [_jsx(QuarantineMatButton, { onClose: onClose, ignoreOperator: true }), _jsx(SwapMaterialButtons, { st: swapSt, setState: setSwapSt, onClose: onClose, ignoreOperator: true }), _jsx(InvalidateCycleDialogButton, { st: invalidateSt, setState: setInvalidateSt, onClose: onClose, ignoreOperator: true })] }) }));
+});
+function useCollisionDetection(allBins) {
+    return useCallback((args) => {
+        if (typeof args.active.id === "string") {
+            // columns only collide with other columns
+            return closestCenter({
+                ...args,
+                droppableContainers: args.droppableContainers.filter((container) => typeof container.id === "string"),
+            });
+        }
+        // Intersect the material with any droppable (either another material or a column)
+        const pointerIntersections = pointerWithin(args);
+        const intersections = pointerIntersections.length > 0 ? pointerIntersections : rectIntersection(args);
+        let overId = getFirstCollision(intersections, "id");
+        if (overId != null) {
+            if (typeof overId === "string") {
+                // If the over is a non-empty column, find the closest material inside that column
+                const bin = findQueueInQuarantineQueues(overId, allBins);
+                if (bin && bin.bin.material.length > 0) {
+                    overId = closestCenter({
+                        ...args,
+                        droppableContainers: args.droppableContainers.filter((container) => container.id !== overId &&
+                            bin.bin.material.findIndex((m) => m.materialID === container.id) >= 0),
+                    })[0]?.id;
+                }
+            }
+            return [{ id: overId }];
+        }
+        return [];
+    }, [allBins]);
+}
+export function AllMaterial(props) {
+    useSetTitle("All Material");
+    const st = useAtomValue(currentSt.currentStatus);
+    const [matBinOrder, setMatBinOrder] = useAtom(currentMaterialBinOrder);
+    const [addExistingMatToQueue] = matDetails.useAddExistingMaterialToQueue();
+    const reorderQueuedMat = useSetAtom(currentSt.reorderQueuedMatInCurrentStatus);
+    const [activeDrag, setActiveDrag] = useState(null);
+    const allBins = useMemo(() => {
+        const allBins = selectAllMaterialIntoBins(st, matBinOrder);
+        if (activeDrag && activeDrag.type === "material" && activeDrag.curOverBinId !== null) {
+            return moveMaterialInBin(allBins, activeDrag.mat, activeDrag.curOverBinId, activeDrag.initialIdx);
+        }
+        else {
+            return allBins;
+        }
+    }, [st, matBinOrder, activeDrag]);
+    const curBins = props.displaySystemBins
+        ? allBins
+        : allBins.filter((bin) => bin.type === MaterialBinType.QuarantineQueues);
+    const collisionDetectionStrategy = useCollisionDetection(allBins);
+    return (_jsxs(DndContext, { collisionDetection: collisionDetectionStrategy, measuring: {
+            droppable: { strategy: MeasuringStrategy.Always },
+        }, onDragStart: ({ active }) => {
+            if (typeof active.id === "string") {
+                setActiveDrag({ type: "column", bin: active.data.current.bin });
+            }
+            else {
+                setActiveDrag({
+                    type: "material",
+                    mat: active.data.current.mat,
+                    curOverBinId: null,
+                    initialIdx: 0,
+                });
+            }
+        }, onDragOver: ({ over }) => {
+            if (!over)
+                return;
+            if (activeDrag === null || activeDrag.type === "column")
+                return;
+            const overCol = typeof over.id === "string"
+                ? findQueueInQuarantineQueues(over.id, allBins)
+                : findMaterialInQuarantineQueues(over.id, allBins);
+            if (!overCol)
+                return;
+            if (overCol.bin.binId !== activeDrag.curOverBinId) {
+                setActiveDrag({
+                    ...activeDrag,
+                    curOverBinId: overCol.bin.binId,
+                    initialIdx: overCol.idx,
+                });
+            }
+        }, onDragEnd: ({ over }) => {
+            if (activeDrag === null)
+                return;
+            if (!over) {
+                setActiveDrag(null);
+                return;
+            }
+            if (activeDrag.type === "column") {
+                if (typeof over.id === "number") {
+                    console.log("Invalid, collision should never allow a column drag to be over a material");
+                }
+                else {
+                    setMatBinOrder(moveMaterialBin(curBins.map((b) => b.binId), curBins.findIndex((b) => b.binId === activeDrag.bin.binId), curBins.findIndex((b) => b.binId === over.id)));
+                }
+            }
+            else {
+                const overCol = typeof over.id === "string"
+                    ? findQueueInQuarantineQueues(over.id, allBins)
+                    : findMaterialInQuarantineQueues(over.id, allBins);
+                if (overCol) {
+                    addExistingMatToQueue({
+                        materialId: activeDrag.mat.materialID,
+                        queue: overCol.bin.queueName,
+                        queuePosition: overCol.idx,
+                        operator: null,
+                    });
+                    reorderQueuedMat({
+                        queue: overCol.bin.queueName,
+                        matId: activeDrag.mat.materialID,
+                        newIdx: overCol.idx,
+                    });
+                }
+            }
+            setActiveDrag(null);
+        }, onDragCancel: () => setActiveDrag(null), children: [_jsx(SortableContext, { items: curBins.map((b) => b.binId), strategy: horizontalListSortingStrategy, children: _jsx(Box, { component: "main", sx: {
+                        display: "flex",
+                        flexWrap: "nowrap",
+                        backgroundColor: "#F8F8F8",
+                        minHeight: { xs: "calc(100vh - 64px - 48px)", md: "calc(100vh - 64px)" },
+                    }, children: curBins.map((matBin) => (_jsx(MaterialBinColumn, { matBin: matBin }, matBin.binId))) }) }), _jsx(DragOverlay, { children: activeDrag?.type === "material" ? (_jsx(DragOverlayInProcMaterial, { mat: activeDrag.mat, hideAvatar: true })) : activeDrag?.type === "column" ? (_jsx(MaterialBinColumn, { matBin: activeDrag.bin, isDragOverlay: true })) : undefined }), _jsx(AllMatDialog, {})] }));
+}

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

@@ -0,0 +1,4 @@
+import { Last30ChartRangeAtom } from "../../data/chart-times";
+export declare const Last30ChartRangeToolbar: import("react").NamedExoticComponent<{
+    chartAtom: Last30ChartRangeAtom;
+}>;

package/dist/components/operations/ChartRangeEdit.js

@@ -0,0 +1,148 @@
+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 { memo, useState } from "react";
+import { last30ChartEndTimes, last30ChartStartTimes, last30WeekdayStartIdx, last30WeekdayStartMinuteOffset, } from "../../data/chart-times";
+import { useAtom, useAtomValue } from "jotai";
+import { Box, Button, Dialog, DialogActions, DialogContent, Divider, IconButton, MenuItem, Radio, RadioGroup, Stack, TextField, Tooltip, Typography, } from "@mui/material";
+import { Edit } from "@mui/icons-material";
+import { addMinutes, startOfToday } from "date-fns";
+function RadioLabel({ label, date }) {
+    return (_jsxs(Box, { children: [_jsx(Typography, { children: label }), date ? _jsxs(Typography, { variant: "subtitle2", children: ["(", date.toLocaleString(), ")"] }) : undefined] }));
+}
+function CustomDateLabel({ date, setDate, enabled, }) {
+    const last30 = useAtomValue(last30ChartStartTimes("Last30"));
+    return (_jsx(TextField, { type: "datetime-local", value: date ? new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, 16) : "", onChange: (event) => setDate(new Date(event.target.value)), disabled: !enabled, label: "Custom Date", slotProps: {
+            inputLabel: { shrink: true },
+            htmlInput: {
+                min: new Date(last30.getTime() - last30.getTimezoneOffset() * 60000).toISOString().slice(0, 16),
+            },
+        } }));
+}
+function RangeStart({ chartAtom }) {
+    const [chartRange, setChartRange] = useAtom(chartAtom);
+    const dayStart = useAtomValue(last30WeekdayStartMinuteOffset);
+    const [customDate, setCustomDate] = useState(chartRange.startType instanceof Date ? chartRange.startType : addMinutes(startOfToday(), dayStart));
+    function setTy(type) {
+        if (type === "CustomDate") {
+            setChartRange({ start: customDate ?? new Date() });
+        }
+        else {
+            setChartRange({ start: type });
+        }
+    }
+    function setDate(date) {
+        setCustomDate(date);
+        setChartRange({ start: date });
+    }
+    const stOfToday = useAtomValue(last30ChartStartTimes("StartOfToday"));
+    const startOfYesterday = useAtomValue(last30ChartStartTimes("StartOfYesterday"));
+    const startOfWeek = useAtomValue(last30ChartStartTimes("StartOfWeek"));
+    const startOfLastWeek = useAtomValue(last30ChartStartTimes("StartOfLastWeek"));
+    const last30 = useAtomValue(last30ChartStartTimes("Last30"));
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", children: "Range Start" }), _jsx(RadioGroup, { value: chartRange.startType instanceof Date ? "CustomDate" : chartRange.startType, onChange: (event) => setTy(event.target.value), children: _jsxs(Stack, { direction: "column", spacing: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "StartOfToday" }), _jsx(RadioLabel, { label: "Start of Today", date: stOfToday })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "StartOfYesterday" }), _jsx(RadioLabel, { label: "Start of Yesterday", date: startOfYesterday })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "StartOfWeek" }), _jsx(RadioLabel, { label: "Start of This Week", date: startOfWeek })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "StartOfLastWeek" }), _jsx(RadioLabel, { label: "Start of Last Week", date: startOfLastWeek })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "Last30" }), _jsx(RadioLabel, { label: "Last 30 Days", date: last30 })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "CustomDate" }), _jsx(CustomDateLabel, { enabled: chartRange.startType instanceof Date, date: customDate, setDate: setDate })] })] }) })] }));
+}
+function RangeEnd({ chartAtom }) {
+    const [chartRange, setChartRange] = useAtom(chartAtom);
+    const dayStart = useAtomValue(last30WeekdayStartMinuteOffset);
+    const [customDate, setCustomDate] = useState(chartRange.endType instanceof Date ? chartRange.endType : addMinutes(startOfToday(), dayStart));
+    function setTy(type) {
+        if (type === "CustomDate") {
+            setChartRange({ end: customDate ?? new Date() });
+        }
+        else {
+            setChartRange({ end: type });
+        }
+    }
+    function setDate(date) {
+        setCustomDate(date);
+        setChartRange({ end: date });
+    }
+    const endOfYesterday = useAtomValue(last30ChartEndTimes("EndOfYesterday"));
+    const endOfLastWeek = useAtomValue(last30ChartEndTimes("EndOfLastWeek"));
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", children: "Range End" }), _jsx(RadioGroup, { value: chartRange.endType instanceof Date ? "CustomDate" : chartRange.endType, onChange: (event) => setTy(event.target.value), children: _jsxs(Stack, { direction: "column", spacing: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "Now" }), _jsx(Typography, { children: "Now" })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "EndOfYesterday" }), _jsx(RadioLabel, { label: "End of Yesterday", date: endOfYesterday })] }), _jsx(Box, { sx: { height: "3em" } }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "EndOfLastWeek" }), _jsx(RadioLabel, { label: "End of Last Week", date: endOfLastWeek })] }), _jsx(Box, { sx: { height: "3em" } }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "CustomDate" }), _jsx(CustomDateLabel, { enabled: chartRange.endType instanceof Date, date: customDate, setDate: setDate })] })] }) })] }));
+}
+function minutesToTimespan(m) {
+    const h = Math.floor(m / 60);
+    const min = m % 60;
+    return `${h.toString().padStart(2, "0")}:${min.toString().padStart(2, "0")}`;
+}
+function RangeDialog({ chartAtom, open, setOpen, }) {
+    const [weekdayStart, setWeekdayStart] = useAtom(last30WeekdayStartIdx);
+    const [weekdayStartMinuteOffset, setWeekdayStartMinuteOffset] = useAtom(last30WeekdayStartMinuteOffset);
+    return (_jsxs(Dialog, { open: open, onClose: () => setOpen(false), maxWidth: "md", children: [_jsx(DialogContent, { children: _jsxs(Stack, { direction: "column", spacing: 2, divider: _jsx(Divider, { orientation: "horizontal", flexItem: true }), children: [_jsxs(Stack, { direction: "row", spacing: 2, divider: _jsx(Divider, { orientation: "vertical", flexItem: true }), children: [_jsx(RangeStart, { chartAtom: chartAtom }), _jsx(RangeEnd, { chartAtom: chartAtom })] }), _jsxs(Stack, { direction: "row", justifyContent: "space-around", children: [_jsxs(TextField, { select: true, label: "First Day Of Week", sx: { minWidth: "10em" }, value: weekdayStart, onChange: (e) => setWeekdayStart(parseInt(e.target.value)), children: [_jsx(MenuItem, { value: 0, children: "Sunday" }), _jsx(MenuItem, { value: 1, children: "Monday" }), _jsx(MenuItem, { value: 2, children: "Tuesday" }), _jsx(MenuItem, { value: 3, children: "Wednesday" }), _jsx(MenuItem, { value: 4, children: "Thursday" }), _jsx(MenuItem, { value: 5, children: "Friday" }), _jsx(MenuItem, { value: 6, children: "Saturday" })] }), _jsx(TextField, { type: "time", label: "Day Start Time", sx: { minWidth: "10em" }, value: minutesToTimespan(weekdayStartMinuteOffset), onChange: (e) => {
+                                        const val = e.target.value;
+                                        if (val === "") {
+                                            setWeekdayStartMinuteOffset(0);
+                                        }
+                                        else {
+                                            const [h, m] = val.split(":").map(Number);
+                                            setWeekdayStartMinuteOffset(h * 60 + m);
+                                        }
+                                    } })] })] }) }), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => setOpen(false), children: "Close" }) })] }));
+}
+function formatStart(ty, d) {
+    if (ty instanceof Date) {
+        return ty.toLocaleString();
+    }
+    switch (ty) {
+        case "StartOfToday":
+            return `Start of Today${d ? ` (${d.toLocaleString()})` : ""}`;
+        case "StartOfYesterday":
+            return `Start of Yesterday${d ? ` (${d.toLocaleString()})` : ""}`;
+        case "StartOfWeek":
+            return `Start of This Week${d ? ` (${d.toLocaleString()})` : ""}`;
+        case "StartOfLastWeek":
+            return `Start of Last Week${d ? ` (${d.toLocaleString()})` : ""}`;
+        case "Last30":
+            return `Last 30 Days${d ? ` (${d.toLocaleString()})` : ""}`;
+    }
+}
+function formatEnd(ty, d) {
+    if (ty instanceof Date) {
+        return ty.toLocaleString();
+    }
+    switch (ty) {
+        case "Now":
+            return "Now";
+        case "EndOfYesterday":
+            return `End of Yesterday${d ? ` (${d.toLocaleString()})` : ""}`;
+        case "EndOfLastWeek":
+            return `End of Last Week${d ? ` (${d.toLocaleString()})` : ""}`;
+    }
+}
+export const Last30ChartRangeToolbar = memo(function Last30ChartRangeToolbar({ chartAtom, }) {
+    const chartRange = useAtomValue(chartAtom);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [_jsxs(Typography, { variant: "body2", color: "textSecondary", children: ["Range: ", formatStart(chartRange.startType, chartRange.startDate), " -", " ", formatEnd(chartRange.endType, chartRange.endDate)] }), _jsx(Tooltip, { title: "Edit Range", children: _jsx(IconButton, { onClick: () => setDialogOpen(true), children: _jsx(Edit, {}) }) })] }), _jsx(RangeDialog, { open: dialogOpen, setOpen: setDialogOpen, chartAtom: chartAtom })] }));
+});

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

@@ -0,0 +1,2 @@
+import { ReactNode } from "react";
+export declare function CloseoutReport(): ReactNode;

package/dist/components/operations/CloseoutReport.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* Copyright (c) 2024, 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, useMemo, useState } from "react";
+import { addDays, startOfToday } from "date-fns";
+import { Box, IconButton, Stack, Table, TableBody, TableCell, TableHead, TableRow, TableSortLabel, Tooltip, Typography, } from "@mui/material";
+import { Button } from "@mui/material";
+import { MaterialDialog, PartIdenticon } from "../station-monitor/Material.js";
+import { SelectWorkorderDialog, selectWorkorderDialogOpen } from "../station-monitor/SelectWorkorder.js";
+import { materialDialogOpen, materialInDialogInfo, useCompleteCloseout, } from "../../cell-status/material-details.js";
+import { last30MaterialSummary, } from "../../cell-status/material-summary.js";
+import { useSetTitle } from "../routes.js";
+import { useAtomValue, useSetAtom } from "jotai";
+import { LazySeq } from "@seedtactics/immutable-collections";
+import { Check, ErrorOutline, MoreHoriz, SkipNext, SkipPrevious } from "@mui/icons-material";
+function CloseoutDialogButtons() {
+    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 CloseoutMaterialDialog = memo(function CloseoutDialog() {
+    return _jsx(MaterialDialog, { buttons: _jsx(CloseoutDialogButtons, {}) });
+});
+const fulldayFormat = new Intl.DateTimeFormat(undefined, {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+});
+function NavigateDay({ day, setDay, }) {
+    const today = startOfToday();
+    return (_jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [_jsx(Tooltip, { title: "Previous Day", children: _jsx("div", { children: _jsx(IconButton, { disabled: day <= addDays(today, -28), onClick: () => setDay((d) => addDays(d, -1)), children: _jsx(SkipPrevious, {}) }) }) }), _jsx(Typography, { sx: { minWidth: "14em", textAlign: "center" }, children: fulldayFormat.format(day) }), _jsx(Tooltip, { title: "Next Day", children: _jsx("div", { children: _jsx(IconButton, { disabled: day >= today, onClick: () => setDay((d) => addDays(d, 1)), children: _jsx(SkipNext, {}) }) }) })] }));
+}
+var SortColumn;
+(function (SortColumn) {
+    SortColumn[SortColumn["CompletedTime"] = 0] = "CompletedTime";
+    SortColumn[SortColumn["Serial"] = 1] = "Serial";
+    SortColumn[SortColumn["Part"] = 2] = "Part";
+    SortColumn[SortColumn["Workorder"] = 3] = "Workorder";
+    SortColumn[SortColumn["Closeout"] = 4] = "Closeout";
+    SortColumn[SortColumn["CloseoutTime"] = 5] = "CloseoutTime";
+})(SortColumn || (SortColumn = {}));
+function sortMats(mats, sortBy, order) {
+    let sortCol;
+    switch (sortBy) {
+        case SortColumn.CompletedTime:
+            sortCol = (j) => j.last_unload_time ?? null;
+            break;
+        case SortColumn.Part:
+            sortCol = (j) => j.partName;
+            break;
+        case SortColumn.Serial:
+            sortCol = (j) => j.serial ?? null;
+            break;
+        case SortColumn.Workorder:
+            sortCol = (j) => j.workorderId ?? null;
+            break;
+        case SortColumn.Closeout:
+            sortCol = (j) => j.closeout_failed ?? null;
+            break;
+        case SortColumn.CloseoutTime:
+            sortCol = (j) => j.closeout_completed ?? null;
+    }
+    return LazySeq.of(mats).toSortedArray(order === "asc" ? { asc: sortCol } : { desc: sortCol }, {
+        asc: (j) => j.last_unload_time ?? null,
+    });
+}
+function CloseoutHeader({ sortBy, setSortBy, sortOrder, setSortOrder, }) {
+    function toggleSort(col) {
+        if (col === sortBy) {
+            setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+        }
+        else {
+            setSortBy(col);
+            setSortOrder("asc");
+        }
+    }
+    return (_jsxs(TableRow, { children: [_jsx(TableCell, { sortDirection: sortBy === SortColumn.CompletedTime ? sortOrder : false, children: _jsx(TableSortLabel, { active: sortBy === SortColumn.CompletedTime, direction: sortOrder, onClick: () => toggleSort(SortColumn.CompletedTime), children: "Completed Time" }) }), _jsx(TableCell, { sortDirection: sortBy === SortColumn.Serial ? sortOrder : false, children: _jsx(TableSortLabel, { active: sortBy === SortColumn.Serial, direction: sortOrder, onClick: () => toggleSort(SortColumn.Serial), children: "Serial" }) }), _jsx(TableCell, { sortDirection: sortBy === SortColumn.Part ? sortOrder : false, children: _jsx(TableSortLabel, { active: sortBy === SortColumn.Part, direction: sortOrder, onClick: () => toggleSort(SortColumn.Part), children: "Part" }) }), _jsx(TableCell, { sortDirection: sortBy === SortColumn.Workorder ? sortOrder : false, children: _jsx(TableSortLabel, { active: sortBy === SortColumn.Workorder, direction: sortOrder, onClick: () => toggleSort(SortColumn.Workorder), children: "Workorder" }) }), _jsx(TableCell, { sortDirection: sortBy === SortColumn.Closeout ? sortOrder : false, children: _jsx(TableSortLabel, { active: sortBy === SortColumn.Closeout, direction: sortOrder, onClick: () => toggleSort(SortColumn.Closeout), children: "Closeout" }) }), _jsx(TableCell, { sortDirection: sortBy === SortColumn.CloseoutTime ? sortOrder : false, children: _jsx(TableSortLabel, { active: sortBy === SortColumn.CloseoutTime, direction: sortOrder, onClick: () => toggleSort(SortColumn.CloseoutTime), children: "Closeout Time" }) }), _jsx(TableCell, {})] }));
+}
+const timeOnlyFormat = new Intl.DateTimeFormat(undefined, {
+    hour: "2-digit",
+    minute: "numeric",
+    second: "numeric",
+});
+const noSecondsFormat = new Intl.DateTimeFormat(undefined, {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+});
+const CloseoutRow = memo(function CloseoutRow({ mat }) {
+    const setMatToShow = useSetAtom(materialDialogOpen);
+    return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: mat.last_unload_time ? timeOnlyFormat.format(mat.last_unload_time) : "" }), _jsx(TableCell, { children: mat.serial }), _jsx(TableCell, { children: _jsxs(Stack, { direction: "row", spacing: "2", alignItems: "center", children: [_jsx(PartIdenticon, { part: mat.partName, size: 25 }), _jsx(Typography, { variant: "body2", children: mat.partName })] }) }), _jsx(TableCell, { children: mat.workorderId }), _jsx(TableCell, { children: mat.closeout_completed === null || mat.closeout_completed === undefined ? ("") : mat.closeout_failed ? (_jsx(ErrorOutline, { fontSize: "inherit" })) : (_jsx(Check, { fontSize: "inherit" })) }), _jsx(TableCell, { children: mat.closeout_completed ? noSecondsFormat.format(mat.closeout_completed) : "" }), _jsx(TableCell, { padding: "checkbox", children: mat.serial !== null && mat.serial !== "" ? (_jsx(IconButton, { onClick: () => {
+                        if (!mat.serial)
+                            return;
+                        setMatToShow({
+                            type: "ManuallyEnteredSerial",
+                            serial: mat.serial,
+                        });
+                    }, size: "large", children: _jsx(MoreHoriz, { fontSize: "inherit" }) })) : undefined })] }));
+});
+function CloseoutTable({ day }) {
+    const matSummary = useAtomValue(last30MaterialSummary);
+    const material = useMemo(() => {
+        const endT = addDays(day, 1);
+        const uncompleted = [];
+        for (const m of matSummary.matsById.values()) {
+            if (m.completed_last_proc_machining === true &&
+                m.last_unload_time &&
+                m.last_unload_time >= day &&
+                m.last_unload_time < endT) {
+                uncompleted.push(m);
+            }
+        }
+        return uncompleted;
+    }, [matSummary, day]);
+    const [sortBy, setSortBy] = useState(SortColumn.CompletedTime);
+    const [sortOrder, setSortOrder] = useState("asc");
+    const sortedMats = useMemo(() => sortMats(material, sortBy, sortOrder), [material, sortBy, sortOrder]);
+    return (_jsxs(Table, { stickyHeader: true, children: [_jsx(TableHead, { children: _jsx(CloseoutHeader, { sortBy: sortBy, setSortBy: setSortBy, sortOrder: sortOrder, setSortOrder: setSortOrder }) }), _jsx(TableBody, { children: sortedMats.map((mat) => (_jsx(CloseoutRow, { mat: mat }, mat.materialID))) })] }));
+}
+export function CloseoutReport() {
+    useSetTitle("Close Out");
+    const [day, setDay] = useState(startOfToday());
+    return (_jsxs(Box, { padding: "24px", children: [_jsx(Box, { component: "nav", display: "flex", justifyContent: "center", children: _jsx(NavigateDay, { day: day, setDay: setDay }) }), _jsx("main", { children: _jsx(CloseoutTable, { day: day }) }), _jsx(SelectWorkorderDialog, {}), _jsx(CloseoutMaterialDialog, {})] }));
+}

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

@@ -0,0 +1,2 @@
+import { ReactNode } from "react";
+export declare function RecentCompletedPartsPage(): ReactNode;