@burdenoff/microfe-movethewheels 2026.1017.12 → 2026.1017.13

package/dist/pages/PalletPreviewPage.js

@@ -0,0 +1,501 @@
+import { Boxes as e } from "../node_modules/lucide-react/dist/esm/icons/boxes.js";
+import { useMoveTheWheels as t } from "../providers/MoveTheWheelsProvider.js";
+import { useTr as n } from "../shared/hooks/useTr.js";
+import "../hooks/index.js";
+import { Button as r, Checkbox as i, Input as a, Label as o, Select as s, SelectContent as c, SelectItem as l, SelectTrigger as u, SelectValue as d } from "../components/ui.js";
+import { PageLayout as f } from "../components/PageLayout.js";
+import { PalletPreviewResults as p } from "../components/pallet-preview/PalletPreviewResults.js";
+import { usePalletPreview as m } from "../hooks/usePalletPreview.js";
+import { PalletInputError as h, newPalletPackage as g, newPalletPreviewDraft as _, palletPreviewInput as v } from "../utils/palletPreviewInput.js";
+import { useEffect as y, useId as b, useRef as x, useState as S } from "react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import { OptionalFields as T } from "@burdenoff/fe-libs/ui";
+import { FormSection as E } from "@burdenoff/fe-libs/form";
+//#region src/movethewheels/pages/PalletPreviewPage.tsx
+var D = {
+	widthMm: "Width (mm)",
+	lengthMm: "Length (mm)",
+	heightMm: "Height (mm)",
+	grossMassG: "Gross mass per package (g)",
+	tareMassG: "Pallet tare mass (g)",
+	maxPayloadMassG: "Pallet payload rating (g)",
+	maxHeightMm: "Reported maximum height (mm)",
+	maxGrossMassG: "Gross mass rating (g)",
+	massG: "Additional packing mass (g)",
+	perimeterMm: "Perimeter clearance (mm)",
+	betweenPackagesMm: "Between-package clearance (mm)",
+	topMm: "Top clearance (mm)"
+};
+function O({ id: e, label: t, value: n, onChange: r, required: i = !1 }) {
+	return /* @__PURE__ */ w("div", {
+		className: "min-w-0 space-y-1",
+		children: [/* @__PURE__ */ C(o, {
+			htmlFor: e,
+			children: t
+		}), /* @__PURE__ */ C(a, {
+			id: e,
+			type: "text",
+			inputMode: "numeric",
+			autoComplete: "off",
+			value: n,
+			onChange: (e) => r(e.target.value),
+			required: i,
+			className: "min-h-11"
+		})]
+	});
+}
+function k({ id: e, value: t, onChange: r }) {
+	let i = n();
+	return /* @__PURE__ */ w("div", {
+		className: "grid gap-3 sm:grid-cols-2",
+		children: [/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C(o, {
+			htmlFor: `${e}-reference`,
+			children: i("movethewheels.palletPreview.sourceReference", "Source reference")
+		}), /* @__PURE__ */ C(a, {
+			id: `${e}-reference`,
+			value: t.reference,
+			maxLength: 255,
+			onChange: (e) => r({
+				...t,
+				reference: e.target.value
+			}),
+			className: "min-h-11"
+		})] }), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C(o, {
+			htmlFor: `${e}-version`,
+			children: i("movethewheels.palletPreview.sourceVersion", "Source version")
+		}), /* @__PURE__ */ C(a, {
+			id: `${e}-version`,
+			value: t.version,
+			maxLength: 120,
+			onChange: (e) => r({
+				...t,
+				version: e.target.value
+			}),
+			className: "min-h-11"
+		})] })]
+	});
+}
+function A({ id: e, label: t, value: n, choices: r, onChange: i }) {
+	return /* @__PURE__ */ w("div", {
+		className: "min-w-0 space-y-1",
+		children: [/* @__PURE__ */ C(o, {
+			htmlFor: e,
+			children: t
+		}), /* @__PURE__ */ w(s, {
+			value: n,
+			onValueChange: i,
+			children: [/* @__PURE__ */ C(u, {
+				id: e,
+				className: "min-h-11",
+				children: /* @__PURE__ */ C(d, {})
+			}), /* @__PURE__ */ C(c, { children: r.map((e) => /* @__PURE__ */ C(l, {
+				value: e.value,
+				children: e.label
+			}, e.value)) })]
+		})]
+	});
+}
+function j() {
+	let { workspaceId: e, tenantId: n, currentUser: r, apiGatewayUrl: i } = t();
+	return /* @__PURE__ */ C(M, {}, JSON.stringify([
+		e,
+		n,
+		r?.id,
+		i
+	]));
+}
+function M() {
+	let t = n(), s = b(), [c, l] = S(_), [u, d] = S(!1), [j, M] = S(null), N = x(null), P = x(2), F = m();
+	y(() => {
+		if (j) {
+			let e = document.getElementById(`${s}-${j.field}`) ?? document.getElementById(`${s}-${j.field}-reference`);
+			e instanceof HTMLElement ? e.focus() : N.current?.focus();
+		}
+	}, [j, s]);
+	let I = (e) => {
+		F.invalidate(), d(!0), M(null), l(e);
+	}, L = (e, n, r, i) => /* @__PURE__ */ C(O, {
+		id: `${s}-${e}-${n}`,
+		label: t(`movethewheels.palletPreview.fields.${n}`, D[n]),
+		value: r,
+		onChange: i
+	}, n), R = t("movethewheels.palletPreview.unknown", "Unknown"), z = j?.kind === "MASS" ? t("movethewheels.palletPreview.massError", "Use whole grams, without separators or a decimal point (0–1000000000000 g).") : j?.kind === "SOURCE" ? t("movethewheels.palletPreview.sourceError", "Provide both a source reference and version, or leave both blank.") : j?.kind === "IDENTITY" ? t("movethewheels.palletPreview.identityError", "Use a distinct, nonblank package identifier without surrounding whitespace.") : j?.kind === "COUNT" ? t("movethewheels.palletPreview.countError", "Use 1–100 package lines and at most 1000 total units.") : t("movethewheels.palletPreview.wholeError", "Use bounded whole millimetres or counts without separators, leading zeros or a decimal point. Dimensions must be positive; clearances may be zero.");
+	return /* @__PURE__ */ w(f, {
+		title: t("movethewheels.palletPreview.title", "Pallet preview"),
+		subtitle: t("movethewheels.palletPreview.purpose", "Inspect an arrangement against supplied measurements."),
+		icon: /* @__PURE__ */ C(e, { "aria-hidden": "true" }),
+		headerActions: /* @__PURE__ */ C(r, {
+			type: "submit",
+			form: `${s}-form`,
+			disabled: F.loading || !F.ready,
+			className: "min-h-11",
+			children: F.loading ? t("movethewheels.palletPreview.loading", "Previewing…") : t("movethewheels.palletPreview.submit", "Preview arrangement")
+		}),
+		children: [
+			/* @__PURE__ */ C("p", {
+				className: "mb-4 text-sm",
+				children: t("movethewheels.palletPreview.boundary", "Geometric proposal only. Not a packing approval, reservation or handling instruction.")
+			}),
+			!F.ready && /* @__PURE__ */ C("p", {
+				role: "status",
+				className: "mb-4",
+				children: t("movethewheels.palletPreview.contextRequired", "A current workspace and signed-in profile are required.")
+			}),
+			/* @__PURE__ */ w("div", {
+				"aria-live": "polite",
+				className: "mb-4",
+				children: [u && t("movethewheels.palletPreview.stale", "Inputs changed; preview again."), F.loading && t("movethewheels.palletPreview.loading", "Previewing…")]
+			}),
+			j && /* @__PURE__ */ C("div", {
+				role: "alert",
+				ref: N,
+				tabIndex: -1,
+				className: "mb-4 border border-border rounded-lg p-3",
+				children: z
+			}),
+			F.failed && /* @__PURE__ */ C("p", {
+				role: "alert",
+				className: "mb-4",
+				children: t("movethewheels.palletPreview.readError", "Preview could not be verified. Review the current context and try Preview arrangement again.")
+			}),
+			/* @__PURE__ */ C("form", {
+				id: `${s}-form`,
+				noValidate: !0,
+				onSubmit: (e) => {
+					if (e.preventDefault(), !(F.loading || !F.ready)) try {
+						let e = v(c);
+						M(null), d(!1), F.run(e);
+					} catch (e) {
+						F.invalidate(), M(e instanceof h ? e : new h("packages", "COUNT"));
+					}
+				},
+				children: /* @__PURE__ */ w("fieldset", {
+					disabled: !F.ready,
+					className: "space-y-5 min-w-0",
+					children: [
+						/* @__PURE__ */ C("legend", {
+							className: "sr-only",
+							children: t("movethewheels.palletPreview.facts", "Supplied pallet preview facts")
+						}),
+						/* @__PURE__ */ C(E, {
+							title: t("movethewheels.palletPreview.packages", "Packages"),
+							description: t("movethewheels.palletPreview.blankMeaning", "Leave unavailable measurements blank. Blank is unknown, not zero."),
+							actions: /* @__PURE__ */ C(r, {
+								type: "button",
+								variant: "outline",
+								disabled: c.packages.length >= 100,
+								onClick: () => {
+									let e = P.current++;
+									I((t) => ({
+										...t,
+										packages: [...t.packages, g(e)]
+									}));
+								},
+								className: "min-h-11",
+								children: t("movethewheels.palletPreview.addPackage", "Add package line")
+							}),
+							children: /* @__PURE__ */ C("div", {
+								className: "space-y-5",
+								children: c.packages.map((e, n) => /* @__PURE__ */ w("section", {
+									className: "rounded-lg border border-border p-4 space-y-4",
+									"aria-label": t("movethewheels.palletPreview.packageNumber", "Package {{number}}", { number: n + 1 }),
+									children: [
+										/* @__PURE__ */ w("div", {
+											className: "flex flex-wrap gap-3 items-center justify-between",
+											children: [/* @__PURE__ */ C("h2", {
+												className: "font-semibold",
+												children: t("movethewheels.palletPreview.packageNumber", "Package {{number}}", { number: n + 1 })
+											}), /* @__PURE__ */ C(r, {
+												type: "button",
+												variant: "ghost",
+												disabled: c.packages.length === 1,
+												onClick: () => I((t) => ({
+													...t,
+													packages: t.packages.filter((t) => t.key !== e.key)
+												})),
+												children: t("movethewheels.palletPreview.remove", "Remove line")
+											})]
+										}),
+										/* @__PURE__ */ w("div", {
+											className: "grid gap-3 sm:grid-cols-2",
+											children: [/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C(o, {
+												htmlFor: `${s}-package-${e.key}-id`,
+												children: t("movethewheels.palletPreview.packageId", "Package identifier")
+											}), /* @__PURE__ */ C(a, {
+												id: `${s}-package-${e.key}-id`,
+												value: e.id,
+												required: !0,
+												maxLength: 255,
+												onChange: (t) => I((n) => ({
+													...n,
+													packages: n.packages.map((n) => n.key === e.key ? {
+														...n,
+														id: t.target.value
+													} : n)
+												})),
+												className: "min-h-11"
+											})] }), /* @__PURE__ */ C(O, {
+												id: `${s}-package-${e.key}-quantity`,
+												label: t("movethewheels.palletPreview.quantity", "Required quantity"),
+												value: e.quantity,
+												required: !0,
+												onChange: (t) => I((n) => ({
+													...n,
+													packages: n.packages.map((n) => n.key === e.key ? {
+														...n,
+														quantity: t
+													} : n)
+												}))
+											})]
+										}),
+										/* @__PURE__ */ C("div", {
+											className: "grid gap-3 sm:grid-cols-2",
+											children: [
+												"widthMm",
+												"lengthMm",
+												"heightMm",
+												"grossMassG"
+											].map((t) => L(`package-${e.key}`, t, e[t], (n) => I((r) => ({
+												...r,
+												packages: r.packages.map((r) => r.key === e.key ? {
+													...r,
+													[t]: n
+												} : r)
+											}))))
+										}),
+										/* @__PURE__ */ w("div", {
+											className: "grid gap-3 sm:grid-cols-2",
+											children: [/* @__PURE__ */ C(A, {
+												id: `${s}-package-${e.key}-upright`,
+												label: t("movethewheels.palletPreview.upright", "Upright handling permission"),
+												value: e.upright,
+												choices: [
+													{
+														value: "UNKNOWN",
+														label: R
+													},
+													{
+														value: "YES",
+														label: t("movethewheels.palletPreview.permitted", "Permitted")
+													},
+													{
+														value: "NO",
+														label: t("movethewheels.palletPreview.denied", "Not permitted")
+													}
+												],
+												onChange: (t) => {
+													(t === "UNKNOWN" || t === "YES" || t === "NO") && I((n) => ({
+														...n,
+														packages: n.packages.map((n) => n.key === e.key ? {
+															...n,
+															upright: t
+														} : n)
+													}));
+												}
+											}), /* @__PURE__ */ C(A, {
+												id: `${s}-package-${e.key}-yaw`,
+												label: t("movethewheels.palletPreview.yaw", "Allowed upright yaw"),
+												value: e.yaw,
+												choices: [
+													{
+														value: "UNKNOWN",
+														label: R
+													},
+													{
+														value: "NONE",
+														label: t("movethewheels.palletPreview.noYaw", "None permitted")
+													},
+													{
+														value: "0",
+														label: "0°"
+													},
+													{
+														value: "90",
+														label: "90°"
+													},
+													{
+														value: "BOTH",
+														label: "0° / 90°"
+													}
+												],
+												onChange: (t) => {
+													(t === "UNKNOWN" || t === "NONE" || t === "0" || t === "90" || t === "BOTH") && I((n) => ({
+														...n,
+														packages: n.packages.map((n) => n.key === e.key ? {
+															...n,
+															yaw: t
+														} : n)
+													}));
+												}
+											})]
+										}),
+										/* @__PURE__ */ C(k, {
+											id: `${s}-package-${e.key}-source`,
+											value: e.source,
+											onChange: (t) => I((n) => ({
+												...n,
+												packages: n.packages.map((n) => n.key === e.key ? {
+													...n,
+													source: t
+												} : n)
+											}))
+										})
+									]
+								}, e.key))
+							})
+						}),
+						/* @__PURE__ */ C("p", {
+							className: "text-sm text-text-secondary",
+							children: t("movethewheels.palletPreview.sourceBoundary", "Your declared measurement sources; not independent verification.")
+						}),
+						/* @__PURE__ */ w(E, {
+							title: t("movethewheels.palletPreview.pallet", "Pallet — dimensions and ratings"),
+							children: [/* @__PURE__ */ C("div", {
+								className: "grid gap-3 sm:grid-cols-2",
+								children: [
+									"widthMm",
+									"lengthMm",
+									"heightMm",
+									"tareMassG",
+									"maxPayloadMassG"
+								].map((e) => L("pallet", e, c.pallet[e], (t) => I((n) => ({
+									...n,
+									pallet: {
+										...n.pallet,
+										[e]: t
+									}
+								}))))
+							}), /* @__PURE__ */ C(k, {
+								id: `${s}-pallet-source`,
+								value: c.pallet.source,
+								onChange: (e) => I((t) => ({
+									...t,
+									pallet: {
+										...t.pallet,
+										source: e
+									}
+								}))
+							})]
+						}),
+						/* @__PURE__ */ w(E, {
+							title: t("movethewheels.palletPreview.clearance", "Clearance"),
+							children: [/* @__PURE__ */ C("div", {
+								className: "grid gap-3 sm:grid-cols-3",
+								children: [
+									"perimeterMm",
+									"betweenPackagesMm",
+									"topMm"
+								].map((e) => L("clearance", e, c.clearance[e], (t) => I((n) => ({
+									...n,
+									clearance: {
+										...n.clearance,
+										[e]: t
+									}
+								}))))
+							}), /* @__PURE__ */ C(k, {
+								id: `${s}-clearance-source`,
+								value: c.clearance.source,
+								onChange: (e) => I((t) => ({
+									...t,
+									clearance: {
+										...t.clearance,
+										source: e
+									}
+								}))
+							})]
+						}),
+						/* @__PURE__ */ w(E, {
+							title: t("movethewheels.palletPreview.additionalPacking", "Additional packing — mass only"),
+							children: [
+								/* @__PURE__ */ C("p", {
+									className: "text-sm mb-2",
+									children: t("movethewheels.palletPreview.packingUnknown", "Packing geometry remains unknown, even when its mass is supplied.")
+								}),
+								L("packing", "massG", c.additionalPacking.massG, (e) => I((t) => ({
+									...t,
+									additionalPacking: {
+										...t.additionalPacking,
+										massG: e
+									}
+								}))),
+								/* @__PURE__ */ C(k, {
+									id: `${s}-packing-source`,
+									value: c.additionalPacking.source,
+									onChange: (e) => I((t) => ({
+										...t,
+										additionalPacking: {
+											...t.additionalPacking,
+											source: e
+										}
+									}))
+								})
+							]
+						}),
+						/* @__PURE__ */ w(T, {
+							title: t("movethewheels.palletPreview.envelope", "Optional supplied load envelope and rating"),
+							description: t("movethewheels.palletPreview.envelopeBoundary", "An inner envelope does not prove door passage."),
+							children: [/* @__PURE__ */ w("div", {
+								className: "flex items-center gap-3 mb-3",
+								children: [/* @__PURE__ */ C(i, {
+									id: `${s}-include-envelope`,
+									checked: c.includeEnvelope,
+									onCheckedChange: (e) => I((t) => ({
+										...t,
+										includeEnvelope: e === !0
+									}))
+								}), /* @__PURE__ */ C(o, {
+									htmlFor: `${s}-include-envelope`,
+									children: t("movethewheels.palletPreview.includeEnvelope", "Include supplied load envelope")
+								})]
+							}), /* @__PURE__ */ w("fieldset", {
+								disabled: !c.includeEnvelope,
+								className: "space-y-3",
+								children: [
+									/* @__PURE__ */ C("legend", {
+										className: "sr-only",
+										children: t("movethewheels.palletPreview.envelopeFacts", "Load envelope facts")
+									}),
+									/* @__PURE__ */ C("div", {
+										className: "grid gap-3 sm:grid-cols-2",
+										children: [
+											"widthMm",
+											"lengthMm",
+											"maxHeightMm",
+											"maxGrossMassG"
+										].map((e) => L("envelope", e, c.loadEnvelope[e], (t) => I((n) => ({
+											...n,
+											loadEnvelope: {
+												...n.loadEnvelope,
+												[e]: t
+											}
+										}))))
+									}),
+									/* @__PURE__ */ C(k, {
+										id: `${s}-envelope-source`,
+										value: c.loadEnvelope.source,
+										onChange: (e) => I((t) => ({
+											...t,
+											loadEnvelope: {
+												...t.loadEnvelope,
+												source: e
+											}
+										}))
+									})
+								]
+							})]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ C("div", {
+				className: "mt-8",
+				children: F.result && F.input && /* @__PURE__ */ C(p, {
+					result: F.result,
+					input: F.input
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { j as default };