@seedtactics/insight-client 16.8.4-beta.0 → 16.8.4-beta.1

package/dist/bootstrap.d.ts

@@ -0,0 +1,5 @@
+import type { AppProps } from "./components/App.js";
+/**
+ * Starts one complete FMS Insight application with optional statically composed custom pages.
+ */
+export declare function bootstrapInsight(appProps?: AppProps, rootElement?: HTMLElement): Promise<void>;

package/dist/bootstrap.js

@@ -0,0 +1,56 @@
+/* Copyright (c) 2026, 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 { createStore } from "jotai";
+import { registerNetworkBackend } from "./network/backend.js";
+import { fmsInformation, loadInfo } from "./network/server-settings.js";
+import { render } from "./renderer.js";
+/**
+ * Starts one complete FMS Insight application with optional statically composed custom pages.
+ */
+export async function bootstrapInsight(appProps = {}, rootElement) {
+    const root = rootElement ?? document.getElementById("root");
+    if (!root) {
+        throw new Error("Unable to start FMS Insight: no root element was provided or found");
+    }
+    registerNetworkBackend();
+    const store = createStore();
+    store.set(fmsInformation, await loadInfo());
+    render(appProps, root, store);
+    if ("serviceWorker" in navigator) {
+        void navigator.serviceWorker.getRegistrations().then((registrations) => {
+            for (const registration of registrations) {
+                void registration.unregister();
+            }
+        });
+    }
+}

package/dist/cell-status/custom-state.d.ts

@@ -0,0 +1,9 @@
+import { Atom } from "jotai";
+/**
+ * The latest complete application-specific snapshot received from the Insight server.
+ * Consumers must validate this opaque value before interpreting it.
+ */
+export declare const customState: Atom<unknown>;
+export declare const replaceCustomState: import("jotai").WritableAtom<null, [state: unknown], void> & {
+    init: null;
+};

package/dist/cell-status/custom-state.js

@@ -0,0 +1,42 @@
+/* Copyright (c) 2026, 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 { atom } from "jotai";
+const customStateRW = atom(null);
+/**
+ * The latest complete application-specific snapshot received from the Insight server.
+ * Consumers must validate this opaque value before interpreting it.
+ */
+export const customState = customStateRW;
+export const replaceCustomState = atom(null, (_, set, state) => {
+    set(customStateRW, state);
+});

package/dist/cell-status/loading.js

@@ -36,6 +36,7 @@ import * as simUse from "./sim-station-use.js";
 import * as schJobs from "./scheduled-jobs.js";
 import * as buffers from "./buffers.js";
 import * as currentSt from "./current-status.js";
+import * as customSt from "./custom-state.js";
 import * as insp from "./inspections.js";
 import * as mats from "./material-summary.js";
 import * as names from "./names.js";
@@ -51,6 +52,9 @@ import { atom } from "jotai";
 const lastEventCounterRW = atom(null);
 export const lastEventCounter = lastEventCounterRW;
 export const onServerEvent = atom(null, (_, set, evt) => {
+    if (evt.evt.newCurrentStatus) {
+        set(customSt.replaceCustomState, evt.evt.newCurrentStatus.customState ?? null);
+    }
     set(simProd.updateLast30JobProduction, evt);
     set(simUse.updateLast30SimStatUse, evt);
     set(schJobs.updateLast30Jobs, evt);
@@ -97,6 +101,7 @@ export const onLoadLast30Log = atom(null, (_, set, log) => {
 });
 export const onLoadCurrentSt = atom(null, (_, set, curSt) => {
     set(currentSt.setCurrentStatus, curSt);
+    set(customSt.replaceCustomState, curSt.customState ?? null);
     set(names.setNamesFromCurrentStatus, curSt);
 });
 export const onLoadSpecificMonthJobs = atom(null, (_, set, historicData) => {

package/dist/components/App.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode, ComponentType } from "react";
 import { ChooseModeItem } from "./ChooseMode.js";
 import * as serverSettings from "../network/server-settings.js";
+import type { SubmitBasketLoadStationCommand } from "./station-monitor/BasketLoadStationWork.js";
 export declare function NavTabs({ children }: {
     children?: ReactNode;
 }): import("react").JSX.Element;
@@ -10,6 +11,7 @@ export interface AppProps {
         readonly page: ReactNode;
     };
     readonly chooseModes?: (i: serverSettings.FMSInfoAndUser) => ReadonlyArray<ChooseModeItem> | null;
+    readonly submitBasketLoadStationCommand?: SubmitBasketLoadStationCommand;
 }
 declare const App: import("react").MemoExoticComponent<(props: AppProps) => import("react").JSX.Element>;
 export default App;

package/dist/components/App.js

@@ -310,7 +310,7 @@ const App = memo(function App(props) {
     else {
         switch (route.route) {
             case routes.RouteLocation.Station_LoadMonitor:
-                page = (_jsx(LoadStation, { loadNum: route.loadNum, queues: route.queues, completed: route.completed }));
+                page = (_jsx(LoadStation, { loadNum: route.loadNum, queues: route.queues, completed: route.completed, submitBasketLoadStationCommand: props.submitBasketLoadStationCommand }));
                 nav1 = StationToolbar;
                 nav2 = StationToolbarOverviewButton;
                 showOperator = true;

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

@@ -0,0 +1,15 @@
+import * as api from "../../network/api.js";
+import { MatCardFontSize } from "./Material.js";
+export interface BasketLoadStationCommand {
+    readonly workId: string;
+}
+export type SubmitBasketLoadStationCommand = (stationNumber: number, command: BasketLoadStationCommand) => Promise<"accepted" | "conflict">;
+interface BasketLoadStationWorkflowProps {
+    readonly stationNumber: number;
+    readonly basket: Readonly<api.IBasketStatus>;
+    readonly material: ReadonlyArray<Readonly<api.IInProcessMaterial>>;
+    readonly fsize: MatCardFontSize;
+    readonly submitCommand: SubmitBasketLoadStationCommand | undefined;
+}
+export declare function BasketLoadStationWorkflow({ stationNumber, basket, material, fsize, submitCommand, }: BasketLoadStationWorkflowProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Copyright (c) 2026, 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 { useEffect, useMemo, useState } from "react";
+import { Alert, Box, Button, Card, CardContent, Stack, Typography } from "@mui/material";
+import { LazySeq } from "@seedtactics/immutable-collections";
+import * as api from "../../network/api.js";
+import { InProcMaterial } from "./Material.js";
+import { MoveMaterialArrowNode } from "./MoveMaterialArrows.js";
+import { MoveMaterialNodeKindType } from "../../data/move-arrows.js";
+function isNonNegativeInteger(value) {
+    return Number.isInteger(value) && (value ?? -1) >= 0;
+}
+function isNonBlank(value) {
+    return typeof value === "string" && value.trim() !== "";
+}
+function actionPhase(mat, basketId) {
+    if (mat.location.type === api.LocType.InBasket &&
+        mat.location.basketId === basketId &&
+        (mat.action.type === api.ActionType.UnloadToInProcess ||
+            mat.action.type === api.ActionType.UnloadToCompletedMaterial)) {
+        if (!isNonNegativeInteger(mat.location.basketSlot)) {
+            return "invalid";
+        }
+        return "unload";
+    }
+    if (mat.action.type === api.ActionType.LoadingToBasket) {
+        if (!isNonNegativeInteger(mat.action.loadToBasketId))
+            return "invalid";
+        if (mat.action.loadToBasketId !== basketId)
+            return undefined;
+        if (!isNonNegativeInteger(mat.action.loadToBasketSlot) ||
+            (mat.location.type !== api.LocType.Free &&
+                (mat.location.type !== api.LocType.InQueue || !isNonBlank(mat.location.currentQueue)))) {
+            return "invalid";
+        }
+        return "load";
+    }
+    return undefined;
+}
+function confirmableWork(material, basketId) {
+    const classifiedActions = LazySeq.of(material)
+        .collect((mat) => {
+        const phase = actionPhase(mat, basketId);
+        return phase === undefined ? undefined : { phase, workId: mat.action.workId };
+    })
+        .toRArray();
+    if (classifiedActions.some(({ phase }) => phase === "invalid")) {
+        return { type: "inconsistent" };
+    }
+    const phaseActions = classifiedActions.filter((action) => action.phase !== "invalid");
+    if (phaseActions.length === 0)
+        return { type: "none" };
+    const tagged = phaseActions.filter((action) => isNonBlank(action.workId));
+    const workIds = LazySeq.of(tagged).toHashSet(({ workId }) => workId);
+    const phases = LazySeq.of(tagged).toHashSet(({ phase }) => phase);
+    if (tagged.length !== phaseActions.length || workIds.size !== 1 || phases.size !== 1) {
+        return { type: "inconsistent" };
+    }
+    return {
+        type: "confirmable",
+        work: { workId: tagged[0].workId, phase: tagged[0].phase },
+    };
+}
+function loadingSource(mat) {
+    if (mat.location.type === api.LocType.InQueue && mat.location.currentQueue) {
+        return mat.location.currentQueue;
+    }
+    return "raw material";
+}
+function SlotMaterial({ material, fsize, }) {
+    return material.map((mat) => (_jsx(MoveMaterialArrowNode, { kind: { type: MoveMaterialNodeKindType.Material, material: mat }, children: _jsx(InProcMaterial, { mat: mat, fsize: fsize }) }, mat.materialID)));
+}
+export function BasketLoadStationWorkflow({ stationNumber, basket, material, fsize, submitCommand, }) {
+    const [submission, setSubmission] = useState("idle");
+    const workState = useMemo(() => confirmableWork(material, basket.basketId), [basket.basketId, material]);
+    const work = workState.type === "confirmable" ? workState.work : undefined;
+    useEffect(() => setSubmission("idle"), [work?.workId]);
+    const materialBySlot = useMemo(() => LazySeq.of(material)
+        .filter((mat) => mat.location.type === api.LocType.InBasket &&
+        mat.location.basketId === basket.basketId &&
+        mat.location.basketSlot !== undefined)
+        .groupBy((mat) => mat.location.basketSlot ?? 0)
+        .toHashMap((entry) => entry), [basket.basketId, material]);
+    const loadsBySlot = useMemo(() => LazySeq.of(material)
+        .filter((mat) => mat.action.type === api.ActionType.LoadingToBasket &&
+        mat.action.loadToBasketId === basket.basketId &&
+        mat.action.loadToBasketSlot !== undefined)
+        .groupBy((mat) => mat.action.loadToBasketSlot ?? 0)
+        .toHashMap((entry) => entry), [basket.basketId, material]);
+    const slots = useMemo(() => LazySeq.of(basket.emptySlots ?? [])
+        .concat(basket.unknownSlots ?? [])
+        .concat(materialBySlot.keysToLazySeq())
+        .concat(loadsBySlot.keysToLazySeq())
+        .distinctBy((slot) => slot)
+        .toSortedArray((slot) => slot), [basket.emptySlots, basket.unknownSlots, materialBySlot, loadsBySlot]);
+    async function submit() {
+        if (work === undefined || submitCommand === undefined)
+            return;
+        setSubmission("submitting");
+        try {
+            setSubmission(await submitCommand(stationNumber, { workId: work.workId }));
+        }
+        catch {
+            setSubmission("error");
+        }
+    }
+    const submissionDisabled = submission === "submitting" || submission === "accepted" || submission === "conflict";
+    const buttonLabel = work?.phase === "unload" ? "Unload Complete" : "Load Complete";
+    return (_jsxs(Stack, { spacing: 2, sx: { mt: 2 }, children: [_jsx(Typography, { variant: "h6", children: "Basket slots" }), _jsx(Box, { sx: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(auto-fit, minmax(15em, 1fr))",
+                    gap: 2,
+                }, children: slots.map((slot) => {
+                    const slotMaterial = materialBySlot.get(slot) ?? [];
+                    const loads = loadsBySlot.get(slot) ?? [];
+                    const isUnknown = basket.unknownSlots?.includes(slot) === true;
+                    return (_jsx(Card, { "data-testid": `basket-load-station-slot-${slot}`, variant: "outlined", children: _jsxs(CardContent, { children: [_jsxs(Typography, { variant: "h6", children: ["Slot ", slot + 1] }), slotMaterial.length > 0 ? (_jsx(SlotMaterial, { material: slotMaterial, fsize: fsize })) : (_jsx(Typography, { color: isUnknown ? "warning.main" : "text.secondary", children: isUnknown ? "Unknown" : "Empty" })), loads.map((mat, index) => (_jsxs(Box, { sx: { mt: 1 }, children: [_jsxs(Typography, { children: ["Load from ", loadingSource(mat)] }), _jsxs(Typography, { variant: "body2", color: "text.secondary", children: [mat.partName, " \u00B7 Process ", mat.action.processAfterLoad ?? mat.process] })] }, `${mat.jobUnique}-${mat.process}-${index}`)))] }) }, slot));
+                }) }), work && submitCommand ? (_jsx(Box, { sx: { display: "flex", justifyContent: "flex-end" }, children: _jsx(Button, { variant: "contained", disabled: submissionDisabled, onClick: () => void submit(), children: buttonLabel }) })) : work ? (_jsx(Alert, { severity: "warning", children: "Basket work confirmation is not configured." })) : workState.type === "inconsistent" ? (_jsx(Alert, { severity: "warning", children: "Basket work is inconsistent. Wait for refreshed material actions before confirming." })) : null, submission === "accepted" ? (_jsx(Alert, { severity: "success", children: "Confirmation accepted. Waiting for refreshed work." })) : submission === "conflict" ? (_jsx(Alert, { severity: "warning", children: "Basket work changed before confirmation. Review the refreshed slots and try again." })) : submission === "error" ? (_jsx(Alert, { severity: "error", children: "Unable to confirm basket work. No work was assumed complete." })) : null] }));
+}

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

@@ -1,9 +1,11 @@
 import { ReactNode } from "react";
+import { SubmitBasketLoadStationCommand } from "./BasketLoadStationWork.js";
 interface LoadStationProps {
     readonly loadNum: number;
     readonly queues: ReadonlyArray<string>;
     readonly completed: boolean;
     readonly whiteBackground?: boolean;
+    readonly submitBasketLoadStationCommand?: SubmitBasketLoadStationCommand;
 }
 export declare function LoadStation(props: LoadStationProps): import("react").JSX.Element;
 declare function LoadStationCheckWidth(props: LoadStationProps): ReactNode;

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

@@ -61,6 +61,7 @@ import { useAtomValue, useSetAtom } from "jotai";
 import { PrintLabelButton } from "./PrintedLabel.js";
 import { hideNonLoadingMaterialOnLoadStation } from "../../data/queue-material.js";
 import { basketDisplayName, loadStationDisplayName } from "../../cell-status/station-cycles.js";
+import { BasketLoadStationWorkflow, } from "./BasketLoadStationWork.js";
 function encodeLoadStationRegionIdPart(value) {
     return encodeURIComponent(value.toString());
 }
@@ -75,9 +76,15 @@ function materialColumnTestId(region) {
     }
 }
 function isLoadingToDisplayedTarget(mat, pallet, activeBasket) {
-    return (mat.action.type === api.ActionType.Loading &&
-        ((pallet !== undefined && mat.action.loadOntoPalletNum === pallet.palletNum) ||
-            (activeBasket !== undefined && mat.action.loadFromBasketId === activeBasket.basketId)));
+    switch (mat.action.type) {
+        case api.ActionType.Loading:
+            return ((pallet !== undefined && mat.action.loadOntoPalletNum === pallet.palletNum) ||
+                (activeBasket !== undefined && mat.action.loadFromBasketId === activeBasket.basketId));
+        case api.ActionType.LoadingToBasket:
+            return activeBasket !== undefined && mat.action.loadToBasketId === activeBasket.basketId;
+        default:
+            return false;
+    }
 }
 function selectLoadStationAndQueueProps(loadNum, queues, curSt, hideNonLoading) {
     // search for pallet
@@ -148,8 +155,7 @@ function selectLoadStationAndQueueProps(loadNum, queues, curSt, hideNonLoading)
             }
             if (m.location.type === api.LocType.InQueue &&
                 m.location.currentQueue &&
-                m.action.type === api.ActionType.Loading &&
-                m.action.loadFromBasketId === activeBasket.basketId) {
+                isLoadingToDisplayedTarget(m, undefined, activeBasket)) {
                 queuesToShow.add(m.location.currentQueue);
             }
         }
@@ -205,6 +211,11 @@ function selectLoadStationAndQueueProps(loadNum, queues, curSt, hideNonLoading)
             if (isLoadingToDisplayedTarget(m, pal, activeBasket) && m.action.elapsedLoadUnloadTime) {
                 elapsedLoadingTime = m.action.elapsedLoadUnloadTime;
             }
+            if (m.action.type === api.ActionType.LoadingToBasket &&
+                m.action.loadToBasketId === activeBasket.basketId &&
+                m.location.type === api.LocType.Free) {
+                freeLoading.push(m);
+            }
             if (m.location.type === api.LocType.InBasket &&
                 m.location.basketId === activeBasket.basketId) {
                 if ((m.action.type === api.ActionType.UnloadToCompletedMaterial ||
@@ -274,6 +285,7 @@ function selectLoadStationAndQueueProps(loadNum, queues, curSt, hideNonLoading)
     return {
         pallet: pal,
         activeBasket,
+        allMaterial: curSt.material,
         face: palFaces,
         freeLoadingMaterial: freeLoading,
         queues: queueMat,
@@ -346,7 +358,7 @@ function ElapsedLoadTime({ elapsedLoadTime }) {
         return null;
     }
 }
-function PalletFace({ data, faceNum }) {
+function PalletFace({ data, faceNum, loadNum, submitBasketLoadStationCommand, }) {
     const face = data.face.get(faceNum);
     const fmsInfo = useAtomValue(fmsInformation);
     const basketName = basketDisplayName(fmsInfo.basketName);
@@ -358,17 +370,10 @@ function PalletFace({ data, faceNum }) {
                         gridTemplateColumns: "1fr auto",
                     }, children: [_jsxs(Typography, { variant: "h4", children: [basketName, " ", data.activeBasket.basketId] }), _jsx(Box, { sx: {
                                 justifySelf: "flex-end",
-                            }, children: _jsx(ElapsedLoadTime, { elapsedLoadTime: data.elapsedLoadingTime }) })] })) : null, _jsx(Box, { sx: {
-                        ml: "4em",
-                        mr: "4em",
-                    }, children: _jsx(MoveMaterialArrowNode, { kind: {
+                            }, children: _jsx(ElapsedLoadTime, { elapsedLoadTime: data.elapsedLoadingTime }) })] })) : null, _jsx(Box, { sx: { ml: "4em", mr: "4em" }, children: _jsx(MoveMaterialArrowNode, { kind: {
                             type: MoveMaterialNodeKindType.BasketZone,
                             basketId: data.activeBasket.basketId,
-                        }, children: _jsx(Box, { sx: {
-                                display: "flex",
-                                flexWrap: "wrap",
-                                justifyContent: "space-around",
-                            }, children: face.map((m, idx) => (_jsx(MoveMaterialArrowNode, { kind: { type: MoveMaterialNodeKindType.Material, material: m }, children: _jsx(InProcMaterial, { mat: m, fsize: data.fsize }) }, idx))) }) }) })] }));
+                        }, children: _jsx(BasketLoadStationWorkflow, { stationNumber: loadNum, basket: data.activeBasket, material: data.allMaterial, fsize: data.fsize, submitCommand: submitBasketLoadStationCommand }) }) })] }));
     }
     if (!data.pallet)
         return null;
@@ -395,6 +400,9 @@ function MaterialRegion({ data, mat, }) {
     return (_jsxs("div", { children: [mat.label !== "" ? _jsx(Typography, { variant: "h4", children: mat.label }) : null, mat.material.mats.map((m, matIdx) => (_jsx(MoveMaterialArrowNode, { kind: {
                     type: MoveMaterialNodeKindType.Material,
                     material: m,
+                    identifier: m.materialID < 0
+                        ? `raw-${mat.isFree ? "free" : "queue"}-${mat.label}-${matIdx}`
+                        : undefined,
                 }, children: mat.isFree || mat.sortable === false ? (_jsx(InProcMaterial, { mat: m, displayActionForSinglePallet: data.pallet ? data.pallet.palletNum : 0, fsize: data.fsize, showRawMaterial: true, showJobComment: true })) : (_jsx(SortableInProcMaterial, { mat: m, displayActionForSinglePallet: data.pallet ? data.pallet.palletNum : 0, shake: m.action.type === api.ActionType.Loading &&
                         m.action.loadOntoPalletNum === data.pallet?.palletNum, fsize: m.action.type === api.ActionType.Loading &&
                         m.action.loadOntoPalletNum === data.pallet?.palletNum
@@ -534,7 +542,8 @@ function AddMatButton({ queues, onClose, toQueue, showAddToQueue, setShowAddToQu
     const [addExistingMat, addingExistingMat] = matDetails.useAddExistingMaterialToQueue();
     if (!existingMat ||
         inProcMat?.location.type === api.LocType.OnPallet ||
-        inProcMat?.action.type === api.ActionType.Loading) {
+        inProcMat?.action.type === api.ActionType.Loading ||
+        inProcMat?.action.type === api.ActionType.LoadingToBasket) {
         return null;
     }
     if (queues.length === 0)
@@ -695,7 +704,7 @@ export function LoadStation(props) {
                         gridArea: `palface${idx}`,
                         padding: "8px",
                         borderTop: data.pallet && idx !== 0 ? "1px solid black" : undefined,
-                    }, children: _jsx(PalletFace, { data: data, faceNum: faceNum }) }, faceNum))), _jsx(Box, { "data-testid": "load-station-completed", sx: {
+                    }, children: _jsx(PalletFace, { data: data, faceNum: faceNum, loadNum: props.loadNum, submitBasketLoadStationCommand: props.submitBasketLoadStationCommand }) }, faceNum))), _jsx(Box, { "data-testid": "load-station-completed", sx: {
                         borderLeft: fillViewPort ? "1px solid black" : undefined,
                         borderTop: !fillViewPort ? "1px solid black" : undefined,
                         gridArea: "completed",

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

@@ -89,11 +89,12 @@ function shakeAnimationIteration(event) {
 }
 const MatCardHeader = styled("div", { shouldForwardProp: (prop) => prop !== "fsize" })(({ fsize, theme }) => {
     if (!fsize)
-        return { fontSize: "1.25rem" };
+        return { fontSize: "1.25rem", fontWeight: "500" };
     switch (fsize) {
         case "normal":
             return {
                 fontSize: "1rem",
+                fontWeight: "500",
                 [theme.breakpoints.up("md")]: {
                     fontSize: "1.25rem",
                 },
@@ -104,6 +105,7 @@ const MatCardHeader = styled("div", { shouldForwardProp: (prop) => prop !== "fsi
         case "large":
             return {
                 fontSize: "1.5rem",
+                fontWeight: "500",
                 [theme.breakpoints.up("lg")]: {
                     fontSize: "1.75rem",
                 },
@@ -114,6 +116,7 @@ const MatCardHeader = styled("div", { shouldForwardProp: (prop) => prop !== "fsi
         case "x-large":
             return {
                 fontSize: "1.5rem",
+                fontWeight: "500",
                 [theme.breakpoints.up("md")]: {
                     fontSize: "1.75rem",
                 },
@@ -128,11 +131,12 @@ const MatCardHeader = styled("div", { shouldForwardProp: (prop) => prop !== "fsi
 });
 const MatCardDetail = styled("div", { shouldForwardProp: (prop) => prop !== "fsize" })(({ fsize, theme }) => {
     if (!fsize)
-        return { fontSize: "0.75rem" };
+        return { fontSize: "0.75rem", fontWeight: "500" };
     switch (fsize) {
         case "normal":
             return {
                 fontSize: "0.75rem",
+                fontWeight: "500",
                 [theme.breakpoints.up("md")]: {
                     fontSize: "1rem",
                 },
@@ -140,6 +144,7 @@ const MatCardDetail = styled("div", { shouldForwardProp: (prop) => prop !== "fsi
         case "large":
             return {
                 fontSize: "1rem",
+                fontWeight: "500",
                 [theme.breakpoints.up("lg")]: {
                     fontSize: "1.5rem",
                 },
@@ -150,6 +155,7 @@ const MatCardDetail = styled("div", { shouldForwardProp: (prop) => prop !== "fsi
         case "x-large":
             return {
                 fontSize: "1rem",
+                fontWeight: "500",
                 [theme.breakpoints.up("md")]: {
                     fontSize: "1.5rem",
                 },
@@ -228,6 +234,10 @@ export function MaterialAction({ mat, displayActionForSinglePallet, fsize, }) {
                     }
                 }
             }
+        case api.ActionType.LoadingToBasket:
+            return (_jsxs(MatCardDetail, { fsize: fsize, children: ["Load into ", basketName, " ", mat.action.loadToBasketId ?? "", mat.action.loadToBasketSlot !== undefined
+                        ? ` slot ${mat.action.loadToBasketSlot + 1}`
+                        : ""] }));
         case api.ActionType.UnloadToInProcess:
         case api.ActionType.UnloadToCompletedMaterial:
             if (mat.action.unloadToBasketId) {
@@ -238,6 +248,13 @@ export function MaterialAction({ mat, displayActionForSinglePallet, fsize, }) {
             else if (mat.action.unloadIntoQueue) {
                 return (_jsxs(MatCardDetail, { fsize: fsize, children: ["Unload into queue ", mat.action.unloadIntoQueue] }));
             }
+            else if (mat.action.type === api.ActionType.UnloadToCompletedMaterial &&
+                mat.location.type === api.LocType.InBasket) {
+                return (_jsxs(MatCardDetail, { fsize: fsize, children: ["Unload from ", basketName, " ", mat.location.basketId, " to completed material"] }));
+            }
+            else if (mat.location.type === api.LocType.InBasket) {
+                return (_jsxs(MatCardDetail, { fsize: fsize, children: ["Unload from ", basketName, " ", mat.location.basketId] }));
+            }
             else {
                 return _jsx(MatCardDetail, { fsize: fsize, children: "Unload from pallet" });
             }
@@ -282,7 +299,9 @@ function Warning({ mat }) {
 function JobRawMaterial({ fsize, mat, }) {
     const job = useAtomValue(currentStatus).jobs[mat.jobUnique];
     let path = mat.path;
-    if (mat.action.type === api.ActionType.Loading && mat.action.pathAfterLoad) {
+    if ((mat.action.type === api.ActionType.Loading ||
+        mat.action.type === api.ActionType.LoadingToBasket) &&
+        mat.action.pathAfterLoad) {
         path = mat.action.pathAfterLoad;
     }
     if (!job) {