@burdenoff/microfe-movethewheels 2026.930.5 → 2026.1010.1

package/dist/pages/ContainersPage.js

@@ -0,0 +1,522 @@
+import { Boxes as e } from "../node_modules/lucide-react/dist/esm/icons/boxes.js";
+import { RefreshCw as t } from "../node_modules/lucide-react/dist/esm/icons/refresh-cw.js";
+import { useMoveTheWheels as n } from "../providers/MoveTheWheelsProvider.js";
+import { Button as r, Input as i, Label as a } from "../components/ui.js";
+import { PageLayout as o } from "../components/PageLayout.js";
+import { CONTAINER_EVENT_TYPES as s, EQUIPMENT_TYPES as c, useContainerLifecycle as l } from "../hooks/useContainerLifecycle.js";
+import { useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/movethewheels/pages/ContainersPage.tsx
+function m(e) {
+	return e.replaceAll("_", " ");
+}
+function h(e) {
+	return new Date(e).toLocaleString();
+}
+var g = "w-full rounded-md border bg-bg-surface p-2 text-sm", _ = "rounded-xl border bg-bg-surface p-5 space-y-4";
+function v() {
+	let { workspaceId: e, currentUser: t } = n();
+	return /* @__PURE__ */ f(y, {}, `${e ?? ""}:${t?.id ?? ""}`);
+}
+function y() {
+	let n = l(), [v, y] = u(""), [x, S] = u("DRY_20"), [C, w] = u(""), [T, E] = u(""), [D, O] = u(""), [k, A] = u(""), [j, M] = u("GATE_OUT"), [N, P] = u("ACTUAL"), [F, I] = u(""), [L, R] = u(""), [z, B] = u(""), [V, H] = u(""), [U, W] = u(""), [G, K] = u(!1), [q, J] = u(null), [Y, X] = u(null), Z = n.containers.find((e) => e.id === n.containerId), Q = n.cycles.find((e) => e.id === n.cycleId), $ = async (e, t) => {
+		K(!0), J(null), X(null);
+		try {
+			await e(), X(t);
+		} catch (e) {
+			J(e instanceof Error ? e.message : "Operation failed.");
+		} finally {
+			K(!1);
+		}
+	};
+	return /* @__PURE__ */ p(o, {
+		title: "Containers",
+		subtitle: "Physical equipment, usage cycles and sourced movement history",
+		icon: /* @__PURE__ */ f(e, { size: 24 }),
+		headerActions: /* @__PURE__ */ p(r, {
+			variant: "outline",
+			onClick: n.refresh,
+			disabled: G,
+			children: [/* @__PURE__ */ f(t, {
+				size: 16,
+				className: "mr-2"
+			}), "Refresh"]
+		}),
+		children: [
+			/* @__PURE__ */ f("p", {
+				className: "mb-5 text-sm text-text-secondary",
+				children: "Shipment delivery and equipment return are separate obligations. Close a cycle only after an actual empty return and recorded return acceptance."
+			}),
+			q && /* @__PURE__ */ f("p", {
+				role: "alert",
+				className: "mb-4 rounded-md border border-red-400 p-3",
+				children: q
+			}),
+			Y && /* @__PURE__ */ f("p", {
+				role: "status",
+				className: "mb-4 rounded-md border p-3",
+				children: Y
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "grid gap-5 xl:grid-cols-3",
+				children: [
+					/* @__PURE__ */ p("section", {
+						className: _,
+						children: [
+							/* @__PURE__ */ f("h2", {
+								className: "text-lg font-semibold",
+								children: "Equipment registry"
+							}),
+							n.loading && /* @__PURE__ */ f("p", {
+								role: "status",
+								children: "Loading containers…"
+							}),
+							n.error && /* @__PURE__ */ p("p", {
+								role: "alert",
+								children: [
+									n.error,
+									" ",
+									/* @__PURE__ */ f(r, {
+										variant: "outline",
+										onClick: n.refresh,
+										children: "Retry"
+									})
+								]
+							}),
+							!n.loading && !n.error && n.containers.length === 0 && /* @__PURE__ */ f("p", { children: "No containers on this page. Register equipment to start tracking its lifecycle." }),
+							/* @__PURE__ */ f("ul", {
+								className: "space-y-2",
+								children: n.containers.map((e) => /* @__PURE__ */ f("li", { children: /* @__PURE__ */ p("button", {
+									type: "button",
+									"aria-pressed": e.id === n.containerId,
+									disabled: G,
+									onClick: () => {
+										n.selectContainer(e.id), J(null), X(null);
+									},
+									className: `w-full rounded-md border p-3 text-left ${e.id === n.containerId ? "border-blue-500" : ""}`,
+									children: [
+										/* @__PURE__ */ f("span", {
+											className: "font-semibold",
+											children: e.containerNumber
+										}),
+										/* @__PURE__ */ f("br", {}),
+										/* @__PURE__ */ p("span", {
+											className: "text-sm",
+											children: [
+												m(e.equipmentType),
+												" · ",
+												e.ownerName || "Owner not recorded"
+											]
+										})
+									]
+								}) }, e.id))
+							}),
+							/* @__PURE__ */ f(b, {
+								page: n.page,
+								more: n.hasMore,
+								disabled: n.loading || G,
+								onChange: (e) => {
+									n.selectContainer(""), n.setPage(e);
+								}
+							}),
+							/* @__PURE__ */ p("form", {
+								onSubmit: (e) => {
+									e.preventDefault(), $(async () => {
+										await n.register({
+											containerNumber: v.trim(),
+											equipmentType: x,
+											ownerName: C.trim() || void 0,
+											source: T.trim()
+										}), y("");
+									}, "Container registered. Record its usage cycle next.");
+								},
+								className: "space-y-3 border-t pt-4",
+								children: [
+									/* @__PURE__ */ f("h3", {
+										className: "font-semibold",
+										children: "Register container"
+									}),
+									/* @__PURE__ */ f(a, {
+										htmlFor: "container-number",
+										children: "ISO container number"
+									}),
+									/* @__PURE__ */ f(i, {
+										id: "container-number",
+										value: v,
+										onChange: (e) => y(e.target.value),
+										required: !0,
+										maxLength: 20,
+										placeholder: "Four letters and seven digits"
+									}),
+									/* @__PURE__ */ f(a, {
+										htmlFor: "equipment-type",
+										children: "Physical equipment type"
+									}),
+									/* @__PURE__ */ f("select", {
+										id: "equipment-type",
+										className: g,
+										value: x,
+										onChange: (e) => S(c.find((t) => t === e.target.value) ?? "OTHER"),
+										children: c.map((e) => /* @__PURE__ */ f("option", {
+											value: e,
+											children: m(e)
+										}, e))
+									}),
+									/* @__PURE__ */ f(a, {
+										htmlFor: "container-owner",
+										children: "Owner (optional)"
+									}),
+									/* @__PURE__ */ f(i, {
+										id: "container-owner",
+										value: C,
+										onChange: (e) => w(e.target.value),
+										maxLength: 200
+									}),
+									/* @__PURE__ */ f(a, {
+										htmlFor: "container-source",
+										children: "Information source"
+									}),
+									/* @__PURE__ */ f(i, {
+										id: "container-source",
+										value: T,
+										onChange: (e) => E(e.target.value),
+										required: !0,
+										maxLength: 120,
+										placeholder: "Equipment release document or carrier portal"
+									}),
+									/* @__PURE__ */ f(r, {
+										type: "submit",
+										disabled: G || !v.trim() || !T.trim(),
+										children: "Register container"
+									})
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ p("section", {
+						className: _,
+						children: [
+							/* @__PURE__ */ f("h2", {
+								className: "text-lg font-semibold",
+								children: "Usage cycles"
+							}),
+							!n.containerId && /* @__PURE__ */ f("p", { children: "Select a container to view its cycles." }),
+							Z && /* @__PURE__ */ p("p", {
+								className: "text-sm",
+								children: [
+									Z.containerNumber,
+									" · Source: ",
+									Z.source
+								]
+							}),
+							n.cyclesLoading && /* @__PURE__ */ f("p", {
+								role: "status",
+								children: "Loading cycles…"
+							}),
+							n.cycleError && /* @__PURE__ */ f("p", {
+								role: "alert",
+								children: n.cycleError
+							}),
+							n.containerId && !n.cyclesLoading && !n.cycleError && !n.cycles.length && /* @__PURE__ */ f("p", { children: "No usage cycles on this page." }),
+							/* @__PURE__ */ f("ul", {
+								className: "space-y-2",
+								children: n.cycles.map((e) => /* @__PURE__ */ f("li", { children: /* @__PURE__ */ p("button", {
+									type: "button",
+									"aria-pressed": e.id === n.cycleId,
+									disabled: G,
+									className: `w-full rounded-md border p-3 text-left ${e.id === n.cycleId ? "border-blue-500" : ""}`,
+									onClick: () => {
+										n.selectCycle(e.id), J(null), X(null);
+									},
+									children: [
+										/* @__PURE__ */ p("span", {
+											className: "font-semibold",
+											children: [
+												e.bookingReference || "Unlinked booking",
+												" · ",
+												e.status
+											]
+										}),
+										/* @__PURE__ */ f("br", {}),
+										/* @__PURE__ */ p("span", {
+											className: "text-sm",
+											children: ["Opened ", h(e.openedAt)]
+										}),
+										e.closedAt && /* @__PURE__ */ p("span", {
+											className: "block text-sm",
+											children: ["Closed ", h(e.closedAt)]
+										})
+									]
+								}) }, e.id))
+							}),
+							n.containerId && /* @__PURE__ */ f(b, {
+								page: n.cyclePage,
+								more: n.hasMoreCycles,
+								disabled: n.cyclesLoading || G,
+								onChange: (e) => {
+									n.selectCycle(""), n.setCyclePage(e);
+								}
+							}),
+							n.containerId && /* @__PURE__ */ p("form", {
+								className: "space-y-3 border-t pt-4",
+								onSubmit: (e) => {
+									e.preventDefault(), $(async () => {
+										let e = new Date(k);
+										if (!Number.isFinite(e.getTime())) throw Error("Enter a valid cycle opening time.");
+										await n.openCycle({
+											containerId: n.containerId,
+											bookingReference: D.trim() || void 0,
+											openedAt: e.toISOString()
+										});
+									}, "Usage cycle opened.");
+								},
+								children: [
+									/* @__PURE__ */ f(a, {
+										htmlFor: "booking-reference",
+										children: "Booking reference (optional)"
+									}),
+									/* @__PURE__ */ f(i, {
+										id: "booking-reference",
+										value: D,
+										onChange: (e) => O(e.target.value),
+										maxLength: 120
+									}),
+									/* @__PURE__ */ f(a, {
+										htmlFor: "cycle-opening-time",
+										children: "Cycle opening time (your local timezone)"
+									}),
+									/* @__PURE__ */ f(i, {
+										id: "cycle-opening-time",
+										type: "datetime-local",
+										step: 1,
+										value: k,
+										onChange: (e) => A(e.target.value),
+										required: !0
+									}),
+									/* @__PURE__ */ f(r, {
+										type: "submit",
+										disabled: G || n.cyclesLoading,
+										children: "Open usage cycle"
+									}),
+									/* @__PURE__ */ f("p", {
+										className: "text-sm text-text-secondary",
+										children: "Only one cycle may be open for this container. Use its actual start time so earlier movements can be recorded. Times are stored in UTC."
+									})
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ p("section", {
+						className: _,
+						children: [
+							/* @__PURE__ */ f("h2", {
+								className: "text-lg font-semibold",
+								children: "Movement and return history"
+							}),
+							!n.cycleId && /* @__PURE__ */ f("p", { children: "Select a usage cycle to view and record events." }),
+							n.eventsLoading && /* @__PURE__ */ f("p", {
+								role: "status",
+								children: "Loading events…"
+							}),
+							n.eventError && /* @__PURE__ */ f("p", {
+								role: "alert",
+								children: n.eventError
+							}),
+							n.cycleId && !n.eventsLoading && !n.eventError && !n.events.length && /* @__PURE__ */ f("p", { children: "No events on this page. Record actual movements with their source." }),
+							/* @__PURE__ */ f("ol", {
+								className: "space-y-3",
+								children: n.events.map((e) => /* @__PURE__ */ p("li", {
+									className: "rounded-md border p-3 text-sm",
+									children: [
+										/* @__PURE__ */ p("p", {
+											className: "font-semibold",
+											children: [
+												m(e.eventType),
+												" · ",
+												e.kind
+											]
+										}),
+										/* @__PURE__ */ p("p", { children: ["Occurred: ", h(e.occurredAt)] }),
+										/* @__PURE__ */ p("p", { children: ["Received: ", h(e.receivedAt)] }),
+										/* @__PURE__ */ p("p", { children: [
+											"Source: ",
+											e.source,
+											e.sourceReference ? ` · ${e.sourceReference}` : ""
+										] }),
+										e.location && /* @__PURE__ */ p("p", { children: ["Location: ", e.location] }),
+										e.evidenceNote && /* @__PURE__ */ p("p", { children: ["Evidence: ", e.evidenceNote] })
+									]
+								}, e.id))
+							}),
+							n.cycleId && /* @__PURE__ */ f(b, {
+								page: n.eventPage,
+								more: n.hasMoreEvents,
+								disabled: n.eventsLoading || G,
+								onChange: n.setEventPage
+							}),
+							Q?.status === "OPEN" && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("form", {
+								onSubmit: (e) => {
+									e.preventDefault(), Q && $(async () => {
+										let e = new Date(F);
+										if (!Number.isFinite(e.getTime())) throw Error("Enter a valid event time.");
+										await n.recordEvent({
+											cycleId: Q.id,
+											eventType: j,
+											kind: N,
+											occurredAt: e.toISOString(),
+											source: L.trim(),
+											sourceReference: z.trim() || void 0,
+											evidenceNote: V.trim() || void 0,
+											location: U.trim() || void 0
+										}), H(""), I("");
+									}, "Event recorded with its source and receipt time.");
+								},
+								className: "space-y-3 border-t pt-4",
+								children: [
+									/* @__PURE__ */ f("h3", {
+										className: "font-semibold",
+										children: "Record event"
+									}),
+									/* @__PURE__ */ f(a, {
+										htmlFor: "container-event",
+										children: "Event"
+									}),
+									/* @__PURE__ */ f("select", {
+										id: "container-event",
+										className: g,
+										value: j,
+										onChange: (e) => M(s.find((t) => t === e.target.value) ?? "POSITION_UPDATE"),
+										children: s.map((e) => /* @__PURE__ */ f("option", {
+											value: e,
+											children: m(e)
+										}, e))
+									}),
+									/* @__PURE__ */ f(a, {
+										htmlFor: "event-kind",
+										children: "Event certainty"
+									}),
+									/* @__PURE__ */ p("select", {
+										id: "event-kind",
+										className: g,
+										value: N,
+										onChange: (e) => P(e.target.value === "PLANNED" ? "PLANNED" : e.target.value === "ESTIMATED" ? "ESTIMATED" : "ACTUAL"),
+										children: [
+											/* @__PURE__ */ f("option", {
+												value: "ACTUAL",
+												children: "Actual"
+											}),
+											/* @__PURE__ */ f("option", {
+												value: "PLANNED",
+												children: "Planned"
+											}),
+											/* @__PURE__ */ f("option", {
+												value: "ESTIMATED",
+												children: "Estimated"
+											})
+										]
+									}),
+									/* @__PURE__ */ f(a, {
+										htmlFor: "event-time",
+										children: "Event time (your local timezone)"
+									}),
+									/* @__PURE__ */ f(i, {
+										id: "event-time",
+										type: "datetime-local",
+										step: 1,
+										value: F,
+										onChange: (e) => I(e.target.value),
+										required: !0
+									}),
+									/* @__PURE__ */ f(a, {
+										htmlFor: "event-source",
+										children: "Event source"
+									}),
+									/* @__PURE__ */ f(i, {
+										id: "event-source",
+										value: L,
+										onChange: (e) => R(e.target.value),
+										required: !0,
+										maxLength: 120
+									}),
+									/* @__PURE__ */ f(a, {
+										htmlFor: "source-reference",
+										children: "Source reference (optional)"
+									}),
+									/* @__PURE__ */ f(i, {
+										id: "source-reference",
+										value: z,
+										onChange: (e) => B(e.target.value),
+										maxLength: 200
+									}),
+									/* @__PURE__ */ f(a, {
+										htmlFor: "event-location",
+										children: "Location (optional)"
+									}),
+									/* @__PURE__ */ f(i, {
+										id: "event-location",
+										value: U,
+										onChange: (e) => W(e.target.value),
+										maxLength: 200
+									}),
+									/* @__PURE__ */ p(a, {
+										htmlFor: "event-evidence",
+										children: ["Evidence note", j === "RETURN_ACCEPTED" && N === "ACTUAL" ? " (required for acceptance)" : " (optional)"]
+									}),
+									/* @__PURE__ */ f(i, {
+										id: "event-evidence",
+										value: V,
+										onChange: (e) => H(e.target.value),
+										maxLength: 2e3,
+										required: j === "RETURN_ACCEPTED" && N === "ACTUAL"
+									}),
+									/* @__PURE__ */ f(r, {
+										type: "submit",
+										disabled: G || !L.trim(),
+										children: "Record event"
+									})
+								]
+							}), /* @__PURE__ */ p("div", {
+								className: "space-y-3 border-t pt-4",
+								children: [/* @__PURE__ */ f("p", {
+									className: "text-sm text-text-secondary",
+									children: "Closure checks the complete recorded history for actual empty return and acceptance. A planned return or delivered shipment is insufficient."
+								}), /* @__PURE__ */ f(r, {
+									variant: "outline",
+									disabled: G || n.cyclesLoading || n.eventsLoading,
+									onClick: () => void $(() => n.closeCycle(Q), "Cycle closed after accepted empty return."),
+									children: "Close cycle"
+								})]
+							})] }),
+							Q?.status === "CLOSED" && /* @__PURE__ */ f("p", { children: "This cycle is closed. Its recorded history remains available." })
+						]
+					})
+				]
+			})
+		]
+	});
+}
+function b({ page: e, more: t, disabled: n, onChange: i }) {
+	return /* @__PURE__ */ p("div", {
+		className: "flex items-center justify-between gap-2",
+		children: [
+			/* @__PURE__ */ f(r, {
+				variant: "outline",
+				disabled: n || e === 0,
+				onClick: () => i(e - 1),
+				children: "Previous"
+			}),
+			/* @__PURE__ */ p("span", {
+				className: "text-sm",
+				children: ["Page ", e + 1]
+			}),
+			/* @__PURE__ */ f(r, {
+				variant: "outline",
+				disabled: n || !t,
+				onClick: () => i(e + 1),
+				children: "Next"
+			})
+		]
+	});
+}
+//#endregion
+export { v as default };