@seedtactics/insight-client 16.8.4-beta.9 → 17.0.0-beta.1

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

@@ -34,17 +34,42 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 import { Box, Button, ListItemIcon, ListItemText, ListSubheader, Stack } from "@mui/material";
 import { MenuItem } from "@mui/material";
 import { TextField } from "@mui/material";
-import { ActionType, LocType } from "../../network/api.js";
+import { LocType, LogType } from "../../network/api.js";
 import { JobsBackend } from "../../network/backend.js";
-import { LazySeq } from "@seedtactics/immutable-collections";
+import { HashMap, LazySeq } from "@seedtactics/immutable-collections";
 import { currentStatus } from "../../cell-status/current-status.js";
-import { barcodePotentialNewMaterial, inProcessMaterialInDialog, materialDialogOpen, materialInDialogInfo, materialInDialogLargestUsedProcess, } from "../../cell-status/material-details.js";
+import { barcodePotentialNewMaterial, inProcessMaterialInDialog, materialDialogOpen, materialInDialogInfo, materialInDialogLargestUsedProcess, materialInDialogLocalEvents, } from "../../cell-status/material-details.js";
 import { currentOperator } from "../../data/operators.js";
 import { fmsInformation } from "../../network/server-settings.js";
 import { useAtomValue, useSetAtom } from "jotai";
 import { useEffect, useRef } from "react";
 import { last30Jobs } from "../../cell-status/scheduled-jobs.js";
 import { PartIdenticon } from "./Material.js";
+import { isLogEntryInvalidated } from "../LogEntry.js";
+import { ApiException } from "../../network/api.js";
+import { canInvalidateMaterial, isActiveLoadStationOperation, } from "../../data/material-operation-policy.js";
+const invalidatableEventTypes = LazySeq.of([
+    LogType.AddToQueue,
+    LogType.RemoveFromQueue,
+    LogType.LoadUnloadCycle,
+    LogType.MachineCycle,
+    LogType.BasketLoadUnload,
+    LogType.BasketCycle,
+]).toRSet((eventType) => eventType);
+export function affectedMaterialForInvalidation(events, materialId, process) {
+    let affected = HashMap.empty();
+    for (const event of events) {
+        if (!invalidatableEventTypes.has(event.type) ||
+            isLogEntryInvalidated(event) ||
+            !event.material.some((material) => material.id === materialId && (process === null || material.proc >= process))) {
+            continue;
+        }
+        for (const material of event.material) {
+            affected = affected.set(material.id, material.serial ?? null);
+        }
+    }
+    return affected;
+}
 function InvalidateSelect(props) {
     const lastMat = useAtomValue(materialInDialogLargestUsedProcess);
     const possible = useAtomValue(barcodePotentialNewMaterial);
@@ -60,50 +85,64 @@ function InvalidateSelect(props) {
     }));
     const hasProc = lastMat !== null && lastMat.process >= 1;
     const hasChangeMat = castings.length > 0 || jobs.length > 0;
+    const selectedCasting = props.st?.changeRawMat !== null &&
+        props.st?.changeRawMat !== undefined &&
+        castings.includes(props.st.changeRawMat);
+    const selectedJob = props.st?.changeJobUnique !== null &&
+        props.st?.changeJobUnique !== undefined &&
+        jobs.some((job) => job.jobUnique === props.st?.changeJobUnique);
     function change(e) {
         props.setState({
             updating: false,
-            process: e.startsWith("proc") ? parseInt(e.substring(4)) : null,
+            error: null,
+            process: e.startsWith("proc") ? parseInt(e.substring(4)) : 1,
             changeRawMat: e.startsWith("rawMat") ? e.substring(6) : null,
             changeJobUnique: e.startsWith("job") ? e.substring(3) : null,
         });
     }
-    return (_jsx(TextField, { value: props.st?.process
-            ? "proc" + props.st.process.toString()
-            : props.st?.changeRawMat
-                ? "rawMat" + props.st.changeRawMat
-                : props.st?.changeJobUnique
-                    ? "job" + props.st.changeJobUnique
-                    : "", select: true, onChange: (e) => change(e.target.value), variant: "outlined", label: props.st?.process || !hasChangeMat
-            ? "Invalidate Process"
-            : props.st?.changeRawMat
-                ? "Change Raw Material"
-                : props.st?.changeJobUnique
-                    ? "Change Assigned Job"
+    return (_jsx(TextField, { value: selectedCasting
+            ? "rawMat" + props.st.changeRawMat
+            : selectedJob
+                ? "job" + props.st.changeJobUnique
+                : props.st?.process && hasProc
+                    ? "proc" + props.st.process.toString()
+                    : "", select: true, onChange: (e) => change(e.target.value), variant: "outlined", label: props.st?.changeRawMat
+            ? "Change Raw Material"
+            : props.st?.changeJobUnique
+                ? "Change Assigned Job"
+                : props.st?.process || !hasChangeMat
+                    ? "Invalidate Process"
                     : !hasProc
                         ? "Change Assignment"
                         : "", children: [
             hasProc && hasChangeMat
                 ? [_jsx(ListSubheader, { children: "Invalidate Selected Process" }, "procheader")]
                 : [],
-            lastMat
-                ? LazySeq.ofRange(1, lastMat.process + 1)
-                    .map((p) => (_jsxs(MenuItem, { value: "proc" + p.toString(), children: ["Invalidate Process ", p] }, p)))
-                    .toRArray()
+            hasProc
+                ? [
+                    _jsxs(MenuItem, { value: "proc" + lastMat.process.toString(), children: ["Invalidate Process ", lastMat.process] }, lastMat.process),
+                    ...(lastMat.process > 1
+                        ? [
+                            _jsx(MenuItem, { value: "proc1", children: "Invalidate All Processes" }, "all"),
+                        ]
+                        : []),
+                ]
                 : [],
             hasProc && hasChangeMat
                 ? [_jsx(ListSubheader, { children: "Change Material Type" }, "matheader")]
                 : [],
             hasChangeMat
                 ? [
-                    ...castings.map((c) => (_jsxs(MenuItem, { value: "rawMat" + c, children: ["Invalidate Everything And Change to ", c] }, "rawMat" + c))),
-                    ...jobs.map(({ jobUnique, job }) => (_jsxs(MenuItem, { value: "job" + jobUnique, children: [job ? (_jsx(ListItemIcon, { children: _jsx(PartIdenticon, { part: job.partName }) })) : undefined, _jsx(ListItemText, { primary: "Invalidate Everything And Change To Job " + jobUnique, secondary: job?.partName })] }, "job" + jobUnique))),
+                    ...castings.map((c) => (_jsxs(MenuItem, { value: "rawMat" + c, children: ["Invalidate Everything and Change to ", c] }, "rawMat" + c))),
+                    ...jobs.map(({ jobUnique, job }) => (_jsxs(MenuItem, { value: "job" + jobUnique, children: [job ? (_jsx(ListItemIcon, { children: _jsx(PartIdenticon, { part: job.partName }) })) : undefined, _jsx(ListItemText, { primary: "Invalidate Everything and Change to Job " + jobUnique, secondary: job?.partName })] }, "job" + jobUnique))),
                 ]
                 : [],
         ] }));
 }
 export function InvalidateCycleDialogContent(props) {
     const curMat = useAtomValue(materialInDialogInfo);
+    const events = useAtomValue(materialInDialogLocalEvents);
+    const status = useAtomValue(currentStatus);
     const show = props.st !== null && curMat !== null;
     const boxRef = useRef(null);
     useEffect(() => {
@@ -114,7 +153,20 @@ export function InvalidateCycleDialogContent(props) {
     }, [boxRef, show]);
     if (!show)
         return _jsx("div", {});
-    return (_jsx(Box, { ref: boxRef, sx: { display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1em" }, children: _jsxs(Stack, { spacing: 2, children: [_jsx("p", { style: { maxWidth: "35em" }, children: "An invalidated cycle remains in the event log, but is not considered when determining the next process to be machined on a piece of material." }), _jsx(InvalidateSelect, { st: props.st, setState: props.setState })] }) }));
+    const hasSelection = props.st.process !== null ||
+        props.st.changeRawMat !== null ||
+        props.st.changeJobUnique !== null;
+    const previewProcess = props.st.changeRawMat !== null || props.st.changeJobUnique !== null ? null : props.st.process;
+    const affected = hasSelection
+        ? affectedMaterialForInvalidation(events, curMat.materialID, previewProcess)
+        : HashMap.empty();
+    const affectedLabels = [...affected].map(([materialId, serial]) => ({
+        materialId,
+        serial,
+        queued: status.material.find((material) => material.materialID === materialId)?.location.type ===
+            LocType.InQueue,
+    }));
+    return (_jsx(Box, { ref: boxRef, sx: { display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1em" }, children: _jsxs(Stack, { spacing: 2, children: [_jsx("p", { style: { maxWidth: "35em" }, children: "Invalidating removes whole recorded cycle events from active material reconstruction while retaining them in the event log." }), _jsx(InvalidateSelect, { st: props.st, setState: props.setState }), affectedLabels.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { children: "All material recorded on these events will be affected:" }), _jsx("ul", { children: affectedLabels.map((material) => (_jsxs("li", { children: [material.serial || `Material ID ${material.materialId}`, material.queued ? " (currently in a queue)" : ""] }, material.materialId))) })] })) : null, props.st.error ? _jsx("p", { role: "alert", children: props.st.error }) : null] }) }));
 }
 export function InvalidateCycleDialogButton(props) {
     const fmsInfo = useAtomValue(fmsInformation);
@@ -130,7 +182,7 @@ export function InvalidateCycleDialogButton(props) {
         return null;
     if (curMat === null)
         return null;
-    if (inProcMat && inProcMat.location.type === LocType.OnPallet)
+    if (!canInvalidateMaterial(inProcMat))
         return null;
     const allowChange = possibleNew !== null &&
         (!LazySeq.ofObject(possibleNew.possibleCastingsByQueue ?? {}).isEmpty() ||
@@ -140,7 +192,13 @@ export function InvalidateCycleDialogButton(props) {
     if (props.ignoreOperator)
         operator = null;
     function showInvalidate() {
-        props.setState({ process: null, updating: false, changeRawMat: null, changeJobUnique: null });
+        props.setState({
+            process: null,
+            updating: false,
+            error: null,
+            changeRawMat: null,
+            changeJobUnique: null,
+        });
     }
     function invalidateCycle() {
         if (curMat && (props.st?.process || props.st?.changeRawMat || props.st?.changeJobUnique)) {
@@ -152,7 +210,7 @@ export function InvalidateCycleDialogButton(props) {
                         type: "MatDetails",
                         details: mat,
                     });
-                    props.onClose();
+                    props.setState(null);
                 }
                 else {
                     setMatToShow(null);
@@ -160,21 +218,31 @@ export function InvalidateCycleDialogButton(props) {
                 }
             })
                 .catch((e) => {
-                console.log(e);
-                setMatToShow(null);
-                props.onClose();
+                props.setState({
+                    ...props.st,
+                    updating: false,
+                    error: ApiException.isApiException(e)
+                        ? e.response
+                        : e instanceof Error
+                            ? e.message
+                            : String(e),
+                });
             });
         }
     }
     return (_jsxs(_Fragment, { children: [props.st === null ? (_jsx(Button, { color: "primary", onClick: showInvalidate, children: "Invalidate Cycle" })) : undefined, props.st !== null ? (_jsx(Button, { color: "primary", onClick: invalidateCycle, disabled: props.st.updating ||
                     (props.st.process === null &&
                         props.st.changeRawMat === null &&
-                        props.st.changeJobUnique === null), children: props.st.process !== null
-                    ? "Invalidate Process " + props.st.process.toString()
-                    : props.st.changeJobUnique !== null
-                        ? "Invalidate And Change To Job " + props.st.changeJobUnique
-                        : props.st.changeRawMat !== null
-                            ? "Invalidate And Change To " + props.st.changeRawMat
+                        props.st.changeJobUnique === null), children: props.st.changeJobUnique !== null
+                    ? "Invalidate Everything and Change to Job " + props.st.changeJobUnique
+                    : props.st.changeRawMat !== null
+                        ? "Invalidate Everything and Change to " + props.st.changeRawMat
+                        : props.st.process !== null
+                            ? props.st.process === 1
+                                ? lastMat && lastMat.process > 1
+                                    ? "Invalidate All Processes"
+                                    : "Invalidate Process 1"
+                                : "Invalidate Process " + props.st.process.toString()
                             : "Invalidate Cycle" })) : undefined] }));
 }
 function isNullOrEmpty(s) {
@@ -241,9 +309,7 @@ export function SwapMaterialButtons(props) {
         operator = null;
     if (!curMat ||
         curMat.location.type !== LocType.OnPallet ||
-        curMat.action.type === ActionType.Loading ||
-        curMat.action.type === ActionType.UnloadToCompletedMaterial ||
-        curMat.action.type === ActionType.UnloadToInProcess) {
+        isActiveLoadStationOperation(curMat)) {
         return null;
     }
     function swapMats() {

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

@@ -51,6 +51,7 @@ import { fmsInformation } from "../../network/server-settings.js";
 import { currentStatus, secondsSinceEpochAtom } from "../../cell-status/current-status.js";
 import { useIsDemo, useSetTitle } from "../routes.js";
 import { QuarantineMatButton } from "./QuarantineButton.js";
+import { CancelLoadButton } from "./CancelLoadButton.js";
 import { durationToSeconds } from "../../util/parseISODuration.js";
 import { formatSeconds } from "./SystemOverview.js";
 import { InvalidateCycleDialogButton, InvalidateCycleDialogContent, SwapMaterialButtons, SwapMaterialDialogContent, } from "./InvalidateCycle.js";
@@ -61,6 +62,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 { canAddOrMoveMaterialToQueue } from "../../data/material-operation-policy.js";
 import { BasketLoadStationWorkflow, } from "./BasketLoadStationWork.js";
 function encodeLoadStationRegionIdPart(value) {
     return encodeURIComponent(value.toString());
@@ -282,6 +284,21 @@ function selectLoadStationAndQueueProps(loadNum, queues, curSt, hideNonLoading)
     queueMat.forEach((queue) => queue.mats.sort(mkCompareByProperties((mat) => mat.location.queuePosition ?? 0)));
     basketMat.forEach((basket) => basket.mats.sort(mkCompareByProperties((mat) => mat.location.basketSlot ?? 0)));
     const matCount = freeLoading.length + palFaces.valuesToAscLazySeq().sumBy((x) => x.length);
+    const activeBasketSlotCount = activeBasket
+        ? LazySeq.of(activeBasket.emptySlots ?? [])
+            .concat(activeBasket.unknownSlots ?? [])
+            .concat(LazySeq.of(curSt.material).collect((mat) => mat.location.type === api.LocType.InBasket &&
+            mat.location.basketId === activeBasket.basketId
+            ? mat.location.basketSlot
+            : undefined))
+            .concat(LazySeq.of(curSt.material).collect((mat) => mat.action.type === api.ActionType.LoadingToBasket &&
+            mat.action.loadToBasketId === activeBasket.basketId
+            ? mat.action.loadToBasketSlot
+            : undefined))
+            .distinctBy((slot) => slot)
+            .toRArray().length
+        : 0;
+    const layoutCount = Math.max(matCount, activeBasketSlotCount);
     return {
         pallet: pal,
         activeBasket,
@@ -291,7 +308,7 @@ function selectLoadStationAndQueueProps(loadNum, queues, curSt, hideNonLoading)
         queues: queueMat,
         baskets: basketMat,
         elapsedLoadingTime,
-        fsize: matCount <= 2 ? "x-large" : matCount <= 6 ? "large" : "normal",
+        fsize: layoutCount <= 2 ? "x-large" : layoutCount <= 6 ? "large" : "normal",
     };
 }
 function MultiInstructionButton({ loadData }) {
@@ -540,10 +557,8 @@ function AddMatButton({ queues, onClose, toQueue, showAddToQueue, setShowAddToQu
     const inProcMat = useAtomValue(matDetails.inProcessMaterialInDialog);
     const operator = useAtomValue(currentOperator);
     const [addExistingMat, addingExistingMat] = matDetails.useAddExistingMaterialToQueue();
-    if (!existingMat ||
-        inProcMat?.location.type === api.LocType.OnPallet ||
-        inProcMat?.action.type === api.ActionType.Loading ||
-        inProcMat?.action.type === api.ActionType.LoadingToBasket) {
+    const [addError, setAddError] = useState(null);
+    if (!existingMat || !canAddOrMoveMaterialToQueue(inProcMat)) {
         return null;
     }
     if (queues.length === 0)
@@ -557,16 +572,26 @@ function AddMatButton({ queues, onClose, toQueue, showAddToQueue, setShowAddToQu
         return (_jsx(Button, { color: "primary", onClick: () => setShowAddToQueue(true), children: "Add To Queue" }));
     }
     else {
-        return (_jsxs(Button, { color: "primary", disabled: toQueue === null || addingExistingMat, onClick: () => {
-                addExistingMat({
-                    materialId: existingMat.materialID,
-                    queue: toQueue ?? "",
-                    queuePosition: -1,
-                    operator: operator,
-                });
-                setMatToShow(null);
-                onClose();
-            }, children: ["Add To ", toQueue ?? "Queue", " ", lastProcMat ? ` To Run Process ${lastProcMat.process + 1}` : ""] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(Button, { color: "primary", disabled: toQueue === null || addingExistingMat, onClick: async () => {
+                        setAddError(null);
+                        try {
+                            await addExistingMat({
+                                materialId: existingMat.materialID,
+                                queue: toQueue ?? "",
+                                queuePosition: -1,
+                                operator: operator,
+                            });
+                            setMatToShow(null);
+                            onClose();
+                        }
+                        catch (e) {
+                            setAddError(api.ApiException.isApiException(e)
+                                ? e.response
+                                : e instanceof Error
+                                    ? e.message
+                                    : String(e));
+                        }
+                    }, children: ["Add To ", toQueue ?? "Queue", " ", lastProcMat ? ` To Run Process ${lastProcMat.process + 1}` : ""] }), addError ? _jsx(Typography, { role: "alert", children: addError }) : null] }));
     }
 }
 function AssignWorkorderButton() {
@@ -593,7 +618,7 @@ const LoadMatDialog = memo(function LoadMatDialog(props) {
         setShowAddMaterial(false);
         setSelectedQueue(null);
     }, [setSwapSt, setInvalidateSt]);
-    return (_jsx(MaterialDialog, { onClose: onClose, allowNote: true, highlightProcsGreaterOrEqualTo: invalidateSt?.process ?? undefined, extraDialogElements: _jsxs(_Fragment, { children: [_jsx(SwapMaterialDialogContent, { st: swapSt, setState: setSwapSt }), invalidateSt !== null ? (_jsx(InvalidateCycleDialogContent, { st: invalidateSt, setState: setInvalidateSt })) : null, showAddMaterial ? (_jsx(PromptForQueue, { selectedQueue: selectedQueue, setSelectedQueue: setSelectedQueue, queueNames: props.queues })) : undefined] }), buttons: _jsxs(_Fragment, { children: [_jsx(InstructionButton, { pallet: props.pallet }), _jsx(PrintLabelButton, {}), _jsx(QuarantineMatButton, {}), _jsx(SignalInspectionButton, {}), _jsx(AddMatButton, { toQueue: selectedQueue, queues: props.queues, onClose: onClose, showAddToQueue: showAddMaterial, setShowAddToQueue: setShowAddMaterial }), _jsx(SwapMaterialButtons, { st: swapSt, setState: setSwapSt, onClose: onClose }), _jsx(InvalidateCycleDialogButton, { st: invalidateSt, setState: setInvalidateSt, onClose: onClose, loadStation: true }), _jsx(AssignWorkorderButton, {})] }) }));
+    return (_jsx(MaterialDialog, { onClose: onClose, allowNote: true, highlightProcsGreaterOrEqualTo: invalidateSt?.process ?? undefined, extraDialogElements: _jsxs(_Fragment, { children: [_jsx(SwapMaterialDialogContent, { st: swapSt, setState: setSwapSt }), invalidateSt !== null ? (_jsx(InvalidateCycleDialogContent, { st: invalidateSt, setState: setInvalidateSt })) : null, showAddMaterial ? (_jsx(PromptForQueue, { selectedQueue: selectedQueue, setSelectedQueue: setSelectedQueue, queueNames: props.queues })) : undefined] }), buttons: _jsxs(_Fragment, { children: [_jsx(InstructionButton, { pallet: props.pallet }), _jsx(PrintLabelButton, {}), _jsx(QuarantineMatButton, {}), _jsx(CancelLoadButton, { onClose: onClose }), _jsx(SignalInspectionButton, {}), _jsx(AddMatButton, { toQueue: selectedQueue, queues: props.queues, onClose: onClose, showAddToQueue: showAddMaterial, setShowAddToQueue: setShowAddMaterial }), _jsx(SwapMaterialButtons, { st: swapSt, setState: setSwapSt, onClose: onClose }), _jsx(InvalidateCycleDialogButton, { st: invalidateSt, setState: setInvalidateSt, onClose: onClose, loadStation: true }), _jsx(AssignWorkorderButton, {})] }) }));
 });
 function useGridLayout({ numMatCols, maxNumFaces, horizontal, showMatInCompleted, }) {
     let rows = "";

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

@@ -49,6 +49,7 @@ import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { last30Rebookings } from "../../cell-status/rebookings.js";
 import { fmsInformation } from "../../network/server-settings.js";
 import { basketDisplayName } from "../../cell-status/station-cycles.js";
+import { materialOperationState } from "../../data/material-operation-policy.js";
 export class PartIdenticon extends PureComponent {
     render() {
         const iconSize = this.props.size || 50;
@@ -376,6 +377,7 @@ const MatCard = forwardRef(function MatCard(props, ref) {
                     }, children: [_jsx(PartIdenticon, { part: props.mat.partName }), _jsxs(Box, { sx: {
                                 marginLeft: "8px",
                                 flexGrow: 1,
+                                minWidth: 0,
                             }, children: [_jsx(MatCardHeader, { fsize: props.fsize, children: props.mat.partName }), props.displayJob ? (_jsx(MatCardDetail, { fsize: props.fsize, children: props.mat.jobUnique && props.mat.jobUnique !== ""
                                         ? "Assigned to " + props.mat.jobUnique
                                         : "Unassigned material" })) : undefined, !props.hideEmptySerial || props.mat.serial ? (_jsxs(MatCardDetail, { fsize: props.fsize, children: ["Serial: ", props.mat.serial ? props.mat.serial : "none"] })) : undefined, props.mat.workorderId === undefined ||
@@ -390,6 +392,7 @@ const MatCard = forwardRef(function MatCard(props, ref) {
                                 justifyContent: "space-between",
                                 alignItems: "flex-end",
                                 alignSelf: "start",
+                                flexShrink: 0,
                             }, children: [props.mat.serial && props.mat.serial.length >= 1 && !props.hideAvatar ? (_jsx("div", { children: _jsx(Avatar, { style: { width: "30px", height: "30px" }, children: props.mat.serial.slice(-1) }) })) : undefined, props.hideWarningIcon ? undefined : (_jsx("div", { children: _jsx(Warning, { mat: props.mat }) }))] })] }) })] }));
 });
 export const MatSummary = memo(MatCard);
@@ -537,6 +540,18 @@ function RebookingNote() {
     }
     return null;
 }
+function MaterialOperationNotice() {
+    const material = useAtomValue(matDetails.inProcessMaterialInDialog);
+    if (material === null)
+        return null;
+    if (material.quarantineAfterUnload) {
+        return (_jsx(Typography, { variant: "caption", component: "p", children: "Quarantine requested" }));
+    }
+    const state = materialOperationState(material);
+    if (state.kind !== "ActiveLoadStationOperation" || state.cancellationId !== null)
+        return null;
+    return (_jsx(Typography, { variant: "caption", component: "p", children: "This material is part of the current load/unload operation. Complete the operation or cancel it at the machine control before making other changes." }));
+}
 export const MaterialDetailContent = memo(function MaterialDetailContent({ highlightProcsGreaterOrEqualTo, }) {
     const toShow = useAtomValue(matDetails.materialDialogOpen);
     const mat = useAtomValue(matDetails.materialInDialogInfo);
@@ -559,7 +574,7 @@ export const MaterialDetailContent = memo(function MaterialDetailContent({ highl
             return _jsx("div", { style: { marginLeft: "1em" }, children: "Material not found." });
         }
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { marginLeft: "1em" }, children: [_jsx("div", { children: _jsxs("small", { children: ["Workorder: ", mat?.workorderId ?? "none"] }) }), _jsx("div", { children: _jsx(DisplayLoadingAndError, { fallback: _jsxs("small", { children: ["Inspections: ", _jsx(CircularProgress, { size: "10" })] }), children: _jsx(MaterialInspections, {}) }) }), _jsx("div", { children: _jsx(DisplayLoadingAndError, { fallback: _jsx("div", {}), children: _jsx(RebookingNote, {}) }) })] }), _jsx(DisplayLoadingAndError, { fallback: _jsx(CircularProgress, {}), children: _jsx(MaterialEvents, { highlightProcsGreaterOrEqualTo: highlightProcsGreaterOrEqualTo }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { marginLeft: "1em" }, children: [_jsx(MaterialOperationNotice, {}), _jsx("div", { children: _jsxs("small", { children: ["Workorder: ", mat?.workorderId ?? "none"] }) }), _jsx("div", { children: _jsx(DisplayLoadingAndError, { fallback: _jsxs("small", { children: ["Inspections: ", _jsx(CircularProgress, { size: "10" })] }), children: _jsx(MaterialInspections, {}) }) }), _jsx("div", { children: _jsx(DisplayLoadingAndError, { fallback: _jsx("div", {}), children: _jsx(RebookingNote, {}) }) })] }), _jsx(DisplayLoadingAndError, { fallback: _jsx(CircularProgress, {}), children: _jsx(MaterialEvents, { highlightProcsGreaterOrEqualTo: highlightProcsGreaterOrEqualTo }) })] }));
 });
 function NotesDialogBody(props) {
     const [curNote, setCurNote] = useState("");