@burdenoff/microfe-theglobalfuel 2026.705.2 → 2026.705.4

package/dist/theglobalfuel/pages/shipments/ShipmentsPage.js

@@ -1,25 +1,28 @@
 import { PageLayout as e } from "../../components/PageLayout.js";
 import { MetricsCard as t } from "../../components/MetricsCard.js";
-import { formatDate as n, formatEnumLabel as r, formatVolume as i, toBackendDate as ee } from "../../utils/formatters.js";
-import { StatusBadge as te } from "../../components/StatusBadge.js";
-import { DataTable as ne } from "../../components/DataTable.js";
-import { ErrorView as re, LoadingView as ie } from "../../components/StateViews.js";
-import { EmptyState as ae } from "../../components/EmptyState.js";
-import { useTheContracts as oe, useTheDeliverShipment as se, useTheScheduleShipment as ce, useTheShipments as a, useTheTransitionShipment as le } from "../../hooks/useTheGlobalFuelApi.js";
-import { useCursorPager as o } from "../../hooks/useCursorPager.js";
-import { useNotify as ue } from "../../hooks/useNotify.js";
+import { formatDate as n, formatEnumLabel as r, formatVolume as i, toBackendDate as a } from "../../utils/formatters.js";
+import { StatusBadge as o } from "../../components/StatusBadge.js";
+import { DataTable as ee } from "../../components/DataTable.js";
+import { ErrorView as te, LoadingView as ne } from "../../components/StateViews.js";
+import { EmptyState as re } from "../../components/EmptyState.js";
+import { AllocationBar as ie } from "../../components/viz/AllocationBar.js";
+import { PathSteps as ae } from "../../components/viz/PathSteps.js";
+import { useTheContracts as oe, useTheDeliverShipment as se, useTheScheduleShipment as ce, useTheShipments as s, useTheTransitionShipment as le } from "../../hooks/useTheGlobalFuelApi.js";
+import { useCursorPager as ue } from "../../hooks/useCursorPager.js";
+import { useNotify as de } from "../../hooks/useNotify.js";
 import "../../hooks/index.js";
-import { SHIPMENT_DELIVERABLE_FROM as de, SHIPMENT_TRANSITIONS as fe, nextStatuses as pe } from "../../utils/transitions.js";
-import { FilterTabs as me } from "../../components/FilterTabs.js";
-import { Pagination as s } from "../../components/Pagination.js";
-import { EvidenceUpload as he } from "../../components/EvidenceUpload.js";
-import { FileLink as ge } from "../../components/FileLink.js";
+import { SHIPMENT_DELIVERABLE_FROM as fe, SHIPMENT_TRANSITIONS as pe, nextStatuses as me } from "../../utils/transitions.js";
+import { FilterTabs as he } from "../../components/FilterTabs.js";
+import { Pagination as ge } from "../../components/Pagination.js";
+import { EvidenceUpload as _e } from "../../components/EvidenceUpload.js";
+import { FileLink as ve } from "../../components/FileLink.js";
+import "../../components/index.js";
 import { useMemo as c, useState as l } from "react";
-import { ArrowRight as _e, CalendarClock as ve, PackageCheck as u, Plus as d, Ship as f, Truck as ye } from "lucide-react";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
-import { Button as g, Input as _, Label as v, ResponsiveDialog as be, ResponsiveDialogContent as xe, ResponsiveDialogDescription as Se, ResponsiveDialogFooter as Ce, ResponsiveDialogHeader as we, ResponsiveDialogTitle as Te, Select as y, SelectContent as b, SelectItem as x, SelectTrigger as S, SelectValue as C, Textarea as w } from "@burdenoff/fe-libs/ui";
+import { ArrowRight as ye, CalendarClock as be, MapPin as xe, PackageCheck as u, Plus as d, Ship as f, Truck as Se } from "lucide-react";
+import { Fragment as Ce, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Button as h, Input as g, Label as _, ResponsiveDialog as we, ResponsiveDialogContent as Te, ResponsiveDialogDescription as Ee, ResponsiveDialogFooter as De, ResponsiveDialogHeader as Oe, ResponsiveDialogTitle as ke, Select as v, SelectContent as y, SelectItem as b, SelectTrigger as x, SelectValue as S, Textarea as Ae } from "@burdenoff/fe-libs/ui";
 //#region src/theglobalfuel/pages/shipments/ShipmentsPage.tsx
-var T = [
+var je = [
 	{
 		value: "ALL",
 		label: "All"
@@ -44,14 +47,14 @@ var T = [
 		value: "CANCELLED",
 		label: "Cancelled"
 	}
-], E = [
+], Me = [
 	"PIPELINE",
 	"TANKER",
 	"VESSEL_BULK",
 	"RAIL",
 	"TRUCK",
 	"GRID"
-], D = [
+], Ne = [
 	"BARRELS",
 	"CUBIC_METERS",
 	"TONNES",
@@ -59,7 +62,44 @@ var T = [
 	"MWH",
 	"GJ",
 	"MCF"
-], O = 25, k = {
+], C = 25, Pe = [
+	"SCHEDULED",
+	"LOADING",
+	"IN_TRANSIT",
+	"DELIVERED",
+	"CANCELLED"
+], Fe = {
+	SCHEDULED: "Scheduled",
+	LOADING: "Loading",
+	IN_TRANSIT: "In transit",
+	DELIVERED: "Delivered",
+	CANCELLED: "Cancelled"
+}, Ie = {
+	SCHEDULED: "var(--color-text-muted)",
+	LOADING: "var(--color-accent-blue)",
+	IN_TRANSIT: "var(--color-status-warning-text)",
+	DELIVERED: "var(--color-status-success-text)",
+	CANCELLED: "var(--color-status-error-text)"
+}, Le = (e) => {
+	let t = e.status === "CANCELLED", n = e.status === "DELIVERED", i = e.status === "IN_TRANSIT", a = n || i, o = t ? "Cancelled" : n ? "Delivered" : i ? "In transit" : r(e.status);
+	return [
+		{
+			label: (e.origin ?? "").trim(),
+			meta: "Origin",
+			state: t ? "todo" : a ? "done" : "active"
+		},
+		{
+			label: r(e.mode),
+			meta: o,
+			state: t ? "locked" : n ? "done" : i ? "active" : "todo"
+		},
+		{
+			label: (e.destination ?? "").trim(),
+			meta: "Destination",
+			state: t ? "locked" : n ? "done" : "todo"
+		}
+	];
+}, w = {
 	contractId: "",
 	reference: "",
 	mode: "TANKER",
@@ -71,66 +111,74 @@ var T = [
 	scheduledAt: "",
 	notes: ""
 };
-function A() {
-	let [A, Ee] = l("ALL"), [j, De] = l("ALL"), M = o(), [Oe, N] = l(!1), [P, F] = l(k), [I, L] = l(null), [R, z] = l(null), [ke, B] = l(null), V = ue(), H = j === "ALL" ? void 0 : j, { data: U, isLoading: Ae, isError: je, refetch: Me } = a(H, A === "ALL" ? void 0 : A, {
-		limit: O,
-		cursor: M.cursor
-	}), W = a(H, void 0, { limit: 200 }), G = oe({ pagination: { limit: 100 } }), K = c(() => G.data?.items ?? [], [G.data]), q = c(() => {
+function T() {
+	let [T, Re] = l("ALL"), [E, ze] = l("ALL"), D = ue(), [Be, O] = l(!1), [k, A] = l(w), [j, M] = l(null), [N, P] = l(null), [Ve, F] = l(null), [I, He] = l(null), L = de(), R = E === "ALL" ? void 0 : E, { data: z, isLoading: Ue, isError: We, refetch: Ge } = s(R, T === "ALL" ? void 0 : T, {
+		limit: C,
+		offset: D.page * C
+	}), B = s(R, void 0, { limit: 200 }), V = oe({ pagination: { limit: 100 } }), H = c(() => V.data?.items ?? [], [V.data]), U = c(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of K) e.set(t.id, t);
+		for (let t of H) e.set(t.id, t);
 		return e;
-	}, [K]), J = ce(), Y = se(), Ne = le(), X = c(() => U?.items ?? [], [U]), Z = c(() => W.data?.items ?? [], [W.data]), Pe = Z.filter((e) => e.status === "SCHEDULED").length, Fe = Z.filter((e) => e.status === "IN_TRANSIT").length, Ie = Z.filter((e) => e.status === "DELIVERED").length, Le = c(() => {
+	}, [H]), W = ce(), G = se(), Ke = le(), K = c(() => z?.items ?? [], [z]), q = c(() => B.data?.items ?? [], [B.data]), qe = q.filter((e) => e.status === "SCHEDULED").length, Je = q.filter((e) => e.status === "IN_TRANSIT").length, Ye = q.filter((e) => e.status === "DELIVERED").length, J = c(() => {
 		let e = {};
-		for (let t of Z) e[t.status] = (e[t.status] ?? 0) + 1;
+		for (let t of q) e[t.status] = (e[t.status] ?? 0) + 1;
 		return e;
-	}, [Z]), Re = T.map((e) => ({
+	}, [q]), Xe = je.map((e) => ({
 		value: e.value,
 		label: e.label,
-		count: e.value === "ALL" ? Z.length : Le[e.value] ?? 0
-	})), Q = () => {
-		F(k), L(null), z(null);
-	}, ze = async () => {
-		if (!P.contractId) {
-			z("Select the contract this shipment fulfils.");
+		count: e.value === "ALL" ? q.length : J[e.value] ?? 0
+	})), Y = c(() => Pe.filter((e) => (J[e] ?? 0) > 0).map((e) => ({
+		label: Fe[e],
+		value: J[e] ?? 0,
+		color: Ie[e]
+	})), [J]), X = c(() => q.filter((e) => (e.origin ?? "").trim() && (e.destination ?? "").trim()), [q]), Ze = c(() => {
+		let e = /* @__PURE__ */ new Set();
+		for (let t of X) e.add(`${(t.origin ?? "").trim()} → ${(t.destination ?? "").trim()}`);
+		return e.size;
+	}, [X]), Z = c(() => X.find((e) => e.id === I) ?? X[0] ?? null, [X, I]), Q = () => {
+		A(w), M(null), P(null);
+	}, Qe = async () => {
+		if (!k.contractId) {
+			P("Select the contract this shipment fulfils.");
 			return;
 		}
-		if (!P.reference.trim()) {
-			z("A shipment reference is required.");
+		if (!k.reference.trim()) {
+			P("A shipment reference is required.");
 			return;
 		}
-		let e = Number(P.volume);
-		if (!P.volume || Number.isNaN(e) || e <= 0) {
-			z("Enter a volume greater than zero."), V.error("Enter a volume greater than zero.");
+		let e = Number(k.volume);
+		if (!k.volume || Number.isNaN(e) || e <= 0) {
+			P("Enter a volume greater than zero."), L.error("Enter a volume greater than zero.");
 			return;
 		}
-		z(null);
+		P(null);
 		try {
-			await J.mutateAsync({
-				contractId: P.contractId,
-				reference: P.reference.trim(),
-				mode: P.mode,
-				carrier: P.carrier.trim() || null,
-				origin: P.origin.trim() || null,
-				destination: P.destination.trim() || null,
+			await W.mutateAsync({
+				contractId: k.contractId,
+				reference: k.reference.trim(),
+				mode: k.mode,
+				carrier: k.carrier.trim() || null,
+				origin: k.origin.trim() || null,
+				destination: k.destination.trim() || null,
 				volume: e,
-				unit: P.unit,
-				scheduledAt: ee(P.scheduledAt) ?? null,
-				documentFileId: I?.fileId ?? null,
-				notes: P.notes.trim() || null
-			}), V.success("Shipment scheduled"), N(!1), Q();
+				unit: k.unit,
+				scheduledAt: a(k.scheduledAt) ?? null,
+				documentFileId: j?.fileId ?? null,
+				notes: k.notes.trim() || null
+			}), L.success("Shipment scheduled"), O(!1), Q();
 		} catch (e) {
-			z(e instanceof Error ? e.message : "Failed to schedule shipment."), V.fromError(e);
+			P(e instanceof Error ? e.message : "Failed to schedule shipment."), L.fromError(e);
 		}
-	}, Be = [
+	}, $e = [
 		{
 			key: "reference",
 			header: "Shipment",
-			render: (e) => /* @__PURE__ */ h("div", {
+			render: (e) => /* @__PURE__ */ m("div", {
 				className: "min-w-0",
-				children: [/* @__PURE__ */ m("p", {
+				children: [/* @__PURE__ */ p("p", {
 					className: "truncate font-semibold text-text-primary",
 					children: e.reference
-				}), /* @__PURE__ */ m("p", {
+				}), /* @__PURE__ */ p("p", {
 					className: "truncate text-xs text-text-tertiary md:hidden",
 					children: r(e.mode)
 				})]
@@ -141,17 +189,17 @@ function A() {
 			header: "Contract",
 			hideOnMobile: !0,
 			render: (e) => {
-				let t = q.get(e.contractId);
-				return t ? /* @__PURE__ */ h("div", {
+				let t = U.get(e.contractId);
+				return t ? /* @__PURE__ */ m("div", {
 					className: "min-w-0",
-					children: [/* @__PURE__ */ m("p", {
+					children: [/* @__PURE__ */ p("p", {
 						className: "truncate font-medium text-text-primary",
 						children: t.reference
-					}), /* @__PURE__ */ m("p", {
+					}), /* @__PURE__ */ p("p", {
 						className: "truncate text-xs text-text-tertiary",
 						children: t.counterparty
 					})]
-				}) : /* @__PURE__ */ m("span", {
+				}) : /* @__PURE__ */ p("span", {
 					className: "font-mono text-xs text-text-tertiary",
 					children: e.contractId.slice(0, 8)
 				});
@@ -161,7 +209,7 @@ function A() {
 			key: "mode",
 			header: "Mode",
 			hideOnMobile: !0,
-			render: (e) => /* @__PURE__ */ m("span", {
+			render: (e) => /* @__PURE__ */ p("span", {
 				className: "text-text-secondary",
 				children: r(e.mode)
 			})
@@ -169,7 +217,7 @@ function A() {
 		{
 			key: "status",
 			header: "Status",
-			render: (e) => /* @__PURE__ */ m(te, { status: e.status })
+			render: (e) => /* @__PURE__ */ p(o, { status: e.status })
 		},
 		{
 			key: "route",
@@ -177,18 +225,18 @@ function A() {
 			hideOnMobile: !0,
 			render: (e) => {
 				let t = e.origin?.trim(), n = e.destination?.trim();
-				return !t && !n ? /* @__PURE__ */ m("span", {
+				return !t && !n ? /* @__PURE__ */ p("span", {
 					className: "text-text-tertiary",
 					children: "—"
-				}) : /* @__PURE__ */ h("span", {
+				}) : /* @__PURE__ */ m("span", {
 					className: "inline-flex items-center gap-1.5 text-text-secondary",
 					children: [
-						/* @__PURE__ */ m("span", {
+						/* @__PURE__ */ p("span", {
 							className: "truncate",
 							children: t ?? "—"
 						}),
-						/* @__PURE__ */ m(_e, { className: "h-3.5 w-3.5 shrink-0 text-text-tertiary" }),
-						/* @__PURE__ */ m("span", {
+						/* @__PURE__ */ p(ye, { className: "h-3.5 w-3.5 shrink-0 text-text-tertiary" }),
+						/* @__PURE__ */ p("span", {
 							className: "truncate",
 							children: n ?? "—"
 						})
@@ -201,7 +249,7 @@ function A() {
 			header: "Volume",
 			align: "right",
 			sortValue: (e) => e.volume,
-			render: (e) => /* @__PURE__ */ m("span", {
+			render: (e) => /* @__PURE__ */ p("span", {
 				className: "tabular-nums text-text-primary",
 				children: i(e.volume, e.unit)
 			})
@@ -212,7 +260,7 @@ function A() {
 			align: "right",
 			hideOnMobile: !0,
 			sortValue: (e) => e.scheduledAt ?? "",
-			render: (e) => /* @__PURE__ */ m("span", {
+			render: (e) => /* @__PURE__ */ p("span", {
 				className: "text-text-tertiary",
 				children: n(e.scheduledAt)
 			})
@@ -221,7 +269,7 @@ function A() {
 			key: "document",
 			header: "Document",
 			hideOnMobile: !0,
-			render: (e) => e.document?.id ? /* @__PURE__ */ m(ge, { fileId: e.document.id }) : /* @__PURE__ */ m("span", {
+			render: (e) => e.document?.id ? /* @__PURE__ */ p(ve, { fileId: e.document.id }) : /* @__PURE__ */ p("span", {
 				className: "text-text-tertiary",
 				children: "—"
 			})
@@ -231,104 +279,185 @@ function A() {
 			header: "",
 			align: "right",
 			render: (e) => {
-				let t = pe(fe, e.status), n = de.includes(e.status), i = ke === e.id;
-				return t.length === 0 && !n ? /* @__PURE__ */ m("span", {
+				let t = me(pe, e.status), n = fe.includes(e.status), i = Ve === e.id;
+				return t.length === 0 && !n ? /* @__PURE__ */ p("span", {
 					className: "text-text-tertiary",
 					children: "—"
-				}) : /* @__PURE__ */ h("div", {
+				}) : /* @__PURE__ */ m("div", {
 					className: "flex items-center justify-end gap-2",
-					children: [t.length > 0 && /* @__PURE__ */ h(y, {
+					children: [t.length > 0 && /* @__PURE__ */ m(v, {
 						value: e.status,
 						disabled: i,
 						onValueChange: (t) => {
-							t !== e.status && (B(e.id), Ne.mutate({
+							t !== e.status && (F(e.id), Ke.mutate({
 								id: e.id,
 								status: t
 							}, {
-								onSuccess: () => V.success("Shipment updated"),
-								onError: (e) => V.fromError(e),
-								onSettled: () => B(null)
+								onSuccess: () => L.success("Shipment updated"),
+								onError: (e) => L.fromError(e),
+								onSettled: () => F(null)
 							}));
 						},
-						children: [/* @__PURE__ */ m(S, {
+						children: [/* @__PURE__ */ p(x, {
 							className: "h-8 w-36",
 							"aria-label": `Change status for shipment ${e.reference}`,
-							children: /* @__PURE__ */ m(C, { placeholder: r(e.status) })
-						}), /* @__PURE__ */ m(b, { children: t.map((e) => /* @__PURE__ */ m(x, {
+							children: /* @__PURE__ */ p(S, { placeholder: r(e.status) })
+						}), /* @__PURE__ */ p(y, { children: t.map((e) => /* @__PURE__ */ p(b, {
 							value: e,
 							children: r(e)
 						}, e)) })]
-					}), n && /* @__PURE__ */ h(g, {
+					}), n && /* @__PURE__ */ m(h, {
 						size: "sm",
 						variant: "outline",
-						disabled: Y.isPending || i,
-						onClick: () => Y.mutate(e.id, {
-							onSuccess: () => V.success("Shipment delivered"),
-							onError: (e) => V.fromError(e)
+						disabled: G.isPending || i,
+						onClick: () => G.mutate(e.id, {
+							onSuccess: () => L.success("Shipment delivered"),
+							onError: (e) => L.fromError(e)
 						}),
-						children: [/* @__PURE__ */ m(u, { className: "mr-1.5 h-4 w-4" }), " Mark delivered"]
+						children: [/* @__PURE__ */ p(u, { className: "mr-1.5 h-4 w-4" }), " Mark delivered"]
 					})]
 				});
 			}
 		}
-	], $ = A !== "ALL" || j !== "ALL";
-	return /* @__PURE__ */ h(e, {
+	], $ = T !== "ALL" || E !== "ALL";
+	return /* @__PURE__ */ m(e, {
 		title: "Shipments",
 		description: "Cargo movements delivering offtake contracts — pipelines, tankers, vessels, rail & grid.",
-		actions: /* @__PURE__ */ h(g, {
-			onClick: () => N(!0),
-			children: [/* @__PURE__ */ m(d, { className: "mr-1.5 h-4 w-4" }), " Schedule shipment"]
+		actions: /* @__PURE__ */ m(h, {
+			onClick: () => O(!0),
+			children: [/* @__PURE__ */ p(d, { className: "mr-1.5 h-4 w-4" }), " Schedule shipment"]
 		}),
 		children: [
-			/* @__PURE__ */ h("div", {
-				className: "mb-6 grid grid-cols-2 gap-4 lg:grid-cols-4",
+			/* @__PURE__ */ m("div", {
+				className: "mb-4 grid grid-cols-2 gap-4 lg:grid-cols-4",
 				children: [
-					/* @__PURE__ */ m(t, {
+					/* @__PURE__ */ p(t, {
 						featured: !0,
-						icon: /* @__PURE__ */ m(f, { className: "h-5 w-5" }),
-						value: Z.length,
+						icon: /* @__PURE__ */ p(f, { className: "h-5 w-5" }),
+						value: q.length,
 						label: "Total shipments"
 					}),
-					/* @__PURE__ */ m(t, {
-						icon: /* @__PURE__ */ m(ve, { className: "h-5 w-5" }),
-						value: Pe,
+					/* @__PURE__ */ p(t, {
+						icon: /* @__PURE__ */ p(be, { className: "h-5 w-5" }),
+						value: qe,
 						label: "Scheduled"
 					}),
-					/* @__PURE__ */ m(t, {
+					/* @__PURE__ */ p(t, {
 						accent: "warning",
-						icon: /* @__PURE__ */ m(ye, { className: "h-5 w-5" }),
-						value: Fe,
+						icon: /* @__PURE__ */ p(Se, { className: "h-5 w-5" }),
+						value: Je,
 						label: "In transit"
 					}),
-					/* @__PURE__ */ m(t, {
+					/* @__PURE__ */ p(t, {
 						accent: "success",
-						icon: /* @__PURE__ */ m(u, { className: "h-5 w-5" }),
-						value: Ie,
+						icon: /* @__PURE__ */ p(u, { className: "h-5 w-5" }),
+						value: Ye,
 						label: "Delivered"
 					})
 				]
 			}),
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ m("div", {
+				className: "mb-6 grid grid-cols-1 gap-4 lg:grid-cols-2",
+				children: [/* @__PURE__ */ m("div", {
+					className: "flex flex-col gap-4 rounded-[var(--radius-card)] border border-border-subtle bg-bg-surface p-5 shadow-elevation-1",
+					children: [/* @__PURE__ */ m("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ p("h3", {
+							className: "text-sm font-semibold text-text-secondary",
+							children: "Status distribution"
+						}), /* @__PURE__ */ p(f, {
+							className: "h-4 w-4 shrink-0 text-text-muted",
+							"aria-hidden": "true"
+						})]
+					}), Y.length > 0 ? /* @__PURE__ */ p(ie, {
+						segments: Y,
+						height: 14,
+						label: "By status",
+						rightLabel: `${q.length} shipment${q.length === 1 ? "" : "s"}`
+					}) : /* @__PURE__ */ p("p", {
+						className: "py-6 text-sm text-text-tertiary",
+						children: "No shipments yet — schedule one to see the status mix."
+					})]
+				}), /* @__PURE__ */ m("div", {
+					className: "flex flex-col gap-3 rounded-[var(--radius-card)] border border-border-subtle bg-bg-surface p-5 shadow-elevation-1",
+					children: [/* @__PURE__ */ m("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ p("h3", {
+							className: "text-sm font-semibold text-text-secondary",
+							children: "Route flow"
+						}), /* @__PURE__ */ m("span", {
+							className: "inline-flex items-center gap-1.5 text-xs text-text-tertiary",
+							children: [
+								/* @__PURE__ */ p(xe, {
+									className: "h-3.5 w-3.5",
+									"aria-hidden": "true"
+								}),
+								Ze,
+								" lane",
+								Ze === 1 ? "" : "s"
+							]
+						})]
+					}), Z ? /* @__PURE__ */ m(Ce, { children: [
+						/* @__PURE__ */ m(v, {
+							value: Z.id,
+							onValueChange: He,
+							children: [/* @__PURE__ */ p(x, {
+								"aria-label": "Trace a shipment route",
+								children: /* @__PURE__ */ p(S, {})
+							}), /* @__PURE__ */ p(y, { children: X.map((e) => /* @__PURE__ */ m(b, {
+								value: e.id,
+								children: [
+									e.reference,
+									" · ",
+									(e.origin ?? "").trim(),
+									" → ",
+									(e.destination ?? "").trim()
+								]
+							}, e.id)) })]
+						}),
+						/* @__PURE__ */ p(ae, { steps: Le(Z) }),
+						/* @__PURE__ */ m("div", {
+							className: "flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs text-text-tertiary",
+							children: [
+								/* @__PURE__ */ p(o, { status: Z.status }),
+								/* @__PURE__ */ p("span", { children: r(Z.mode) }),
+								/* @__PURE__ */ p("span", {
+									className: "tabular-nums text-text-secondary",
+									children: i(Z.volume, Z.unit)
+								}),
+								Z.scheduledAt ? /* @__PURE__ */ m("span", {
+									className: "tabular-nums",
+									children: ["Sched ", n(Z.scheduledAt)]
+								}) : null
+							]
+						})
+					] }) : /* @__PURE__ */ p("p", {
+						className: "py-6 text-sm text-text-tertiary",
+						children: "Add an origin and destination to a shipment to trace its route."
+					})]
+				})]
+			}),
+			/* @__PURE__ */ m("div", {
 				className: "mb-5 flex flex-wrap items-center gap-3",
-				children: [/* @__PURE__ */ m(me, {
-					options: Re,
-					value: A,
+				children: [/* @__PURE__ */ p(he, {
+					options: Xe,
+					value: T,
 					onChange: (e) => {
-						Ee(e), M.reset();
+						Re(e), D.reset();
 					}
-				}), /* @__PURE__ */ h(y, {
-					value: j,
+				}), /* @__PURE__ */ m(v, {
+					value: E,
 					onValueChange: (e) => {
-						De(e), M.reset();
+						ze(e), D.reset();
 					},
-					children: [/* @__PURE__ */ m(S, {
+					children: [/* @__PURE__ */ p(x, {
 						className: "w-56",
 						"aria-label": "Filter by contract",
-						children: /* @__PURE__ */ m(C, { placeholder: "All contracts" })
-					}), /* @__PURE__ */ h(b, { children: [/* @__PURE__ */ m(x, {
+						children: /* @__PURE__ */ p(S, { placeholder: "All contracts" })
+					}), /* @__PURE__ */ m(y, { children: [/* @__PURE__ */ p(b, {
 						value: "ALL",
 						children: "All contracts"
-					}), K.map((e) => /* @__PURE__ */ h(x, {
+					}), H.map((e) => /* @__PURE__ */ m(b, {
 						value: e.id,
 						children: [
 							e.reference,
@@ -338,68 +467,68 @@ function A() {
 					}, e.id))] })]
 				})]
 			}),
-			Ae ? /* @__PURE__ */ m(ie, { label: "Loading shipments…" }) : je ? /* @__PURE__ */ m(re, {
+			Ue ? /* @__PURE__ */ p(ne, { label: "Loading shipments…" }) : We ? /* @__PURE__ */ p(te, {
 				message: "Couldn't load shipments.",
-				onRetry: () => Me()
-			}) : X.length === 0 ? /* @__PURE__ */ m(ae, {
+				onRetry: () => Ge()
+			}) : K.length === 0 ? /* @__PURE__ */ p(re, {
 				illustration: "empty-data",
-				icon: /* @__PURE__ */ m(f, { className: "h-10 w-10" }),
+				icon: /* @__PURE__ */ p(f, { className: "h-10 w-10" }),
 				title: $ ? "No matching shipments" : "No shipments yet",
 				description: $ ? "No shipments match these filters. Try a different status or contract." : "Schedule your first shipment to start tracking cargo against your offtake contracts.",
-				action: /* @__PURE__ */ h(g, {
-					onClick: () => N(!0),
-					children: [/* @__PURE__ */ m(d, { className: "mr-1.5 h-4 w-4" }), " Schedule shipment"]
+				action: /* @__PURE__ */ m(h, {
+					onClick: () => O(!0),
+					children: [/* @__PURE__ */ p(d, { className: "mr-1.5 h-4 w-4" }), " Schedule shipment"]
 				})
-			}) : /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(ne, {
-				columns: Be,
-				rows: X,
+			}) : /* @__PURE__ */ m(Ce, { children: [/* @__PURE__ */ p(ee, {
+				columns: $e,
+				rows: K,
 				rowKey: (e) => e.id,
 				defaultSort: {
 					key: "scheduledAt",
 					dir: "desc"
 				}
-			}), /* @__PURE__ */ m(s, {
-				page: M.page,
-				pageSize: O,
-				itemCount: X.length,
-				hasMore: U?.pageInfo?.hasMore ?? !1,
-				onPageChange: (e) => M.onPageChange(e, U?.pageInfo?.cursor)
+			}), /* @__PURE__ */ p(ge, {
+				page: D.page,
+				pageSize: C,
+				itemCount: K.length,
+				hasMore: z?.pageInfo?.hasMore ?? !1,
+				onPageChange: D.onPageChange
 			})] }),
-			/* @__PURE__ */ m(be, {
-				open: Oe,
+			/* @__PURE__ */ p(we, {
+				open: Be,
 				onOpenChange: (e) => {
-					N(e), e || Q();
+					O(e), e || Q();
 				},
-				children: /* @__PURE__ */ h(xe, { children: [/* @__PURE__ */ h(we, { children: [/* @__PURE__ */ m(Te, { children: "Schedule shipment" }), /* @__PURE__ */ m(Se, { children: "Book a cargo movement against an offtake contract and track it to delivery." })] }), /* @__PURE__ */ h("form", {
+				children: /* @__PURE__ */ m(Te, { children: [/* @__PURE__ */ m(Oe, { children: [/* @__PURE__ */ p(ke, { children: "Schedule shipment" }), /* @__PURE__ */ p(Ee, { children: "Book a cargo movement against an offtake contract and track it to delivery." })] }), /* @__PURE__ */ m("form", {
 					onSubmit: (e) => {
-						e.preventDefault(), ze();
+						e.preventDefault(), Qe();
 					},
-					children: [/* @__PURE__ */ h("div", {
+					children: [/* @__PURE__ */ m("div", {
 						className: "grid gap-4 py-2",
 						children: [
-							/* @__PURE__ */ h("div", {
+							/* @__PURE__ */ m("div", {
 								className: "grid gap-1.5",
-								children: [/* @__PURE__ */ m(v, {
+								children: [/* @__PURE__ */ p(_, {
 									htmlFor: "shipContract",
 									children: "Contract *"
-								}), /* @__PURE__ */ h(y, {
-									value: P.contractId,
+								}), /* @__PURE__ */ m(v, {
+									value: k.contractId,
 									onValueChange: (e) => {
-										let t = q.get(e);
-										F((n) => ({
+										let t = U.get(e);
+										A((n) => ({
 											...n,
 											contractId: e,
 											unit: t?.unit ?? n.unit
 										}));
 									},
-									children: [/* @__PURE__ */ m(S, {
+									children: [/* @__PURE__ */ p(x, {
 										id: "shipContract",
-										children: /* @__PURE__ */ m(C, { placeholder: "Select a contract" })
-									}), /* @__PURE__ */ m(b, { children: K.length === 0 ? /* @__PURE__ */ m(x, {
+										children: /* @__PURE__ */ p(S, { placeholder: "Select a contract" })
+									}), /* @__PURE__ */ p(y, { children: H.length === 0 ? /* @__PURE__ */ p(b, {
 										value: "none",
 										disabled: !0,
 										children: "No contracts available"
-									}) : K.map((e) => /* @__PURE__ */ h(x, {
+									}) : H.map((e) => /* @__PURE__ */ m(b, {
 										value: e.id,
 										children: [
 											e.reference,
@@ -409,187 +538,187 @@ function A() {
 									}, e.id)) })]
 								})]
 							}),
-							/* @__PURE__ */ h("div", {
+							/* @__PURE__ */ m("div", {
 								className: "grid gap-2 sm:grid-cols-2",
-								children: [/* @__PURE__ */ h("div", {
+								children: [/* @__PURE__ */ m("div", {
 									className: "grid gap-1.5",
-									children: [/* @__PURE__ */ m(v, {
+									children: [/* @__PURE__ */ p(_, {
 										htmlFor: "shipRef",
 										children: "Reference *"
-									}), /* @__PURE__ */ m(_, {
+									}), /* @__PURE__ */ p(g, {
 										id: "shipRef",
-										value: P.reference,
-										onChange: (e) => F({
-											...P,
+										value: k.reference,
+										onChange: (e) => A({
+											...k,
 											reference: e.target.value
 										}),
 										placeholder: "SHP-2026-0142"
 									})]
-								}), /* @__PURE__ */ h("div", {
+								}), /* @__PURE__ */ m("div", {
 									className: "grid gap-1.5",
-									children: [/* @__PURE__ */ m(v, {
+									children: [/* @__PURE__ */ p(_, {
 										htmlFor: "shipMode",
 										children: "Mode"
-									}), /* @__PURE__ */ h(y, {
-										value: P.mode,
-										onValueChange: (e) => F({
-											...P,
+									}), /* @__PURE__ */ m(v, {
+										value: k.mode,
+										onValueChange: (e) => A({
+											...k,
 											mode: e
 										}),
-										children: [/* @__PURE__ */ m(S, {
+										children: [/* @__PURE__ */ p(x, {
 											id: "shipMode",
-											children: /* @__PURE__ */ m(C, {})
-										}), /* @__PURE__ */ m(b, { children: E.map((e) => /* @__PURE__ */ m(x, {
+											children: /* @__PURE__ */ p(S, {})
+										}), /* @__PURE__ */ p(y, { children: Me.map((e) => /* @__PURE__ */ p(b, {
 											value: e,
 											children: r(e)
 										}, e)) })]
 									})]
 								})]
 							}),
-							/* @__PURE__ */ h("div", {
+							/* @__PURE__ */ m("div", {
 								className: "grid gap-2 sm:grid-cols-2",
-								children: [/* @__PURE__ */ h("div", {
+								children: [/* @__PURE__ */ m("div", {
 									className: "grid gap-1.5",
-									children: [/* @__PURE__ */ m(v, {
+									children: [/* @__PURE__ */ p(_, {
 										htmlFor: "shipOrigin",
 										children: "Origin"
-									}), /* @__PURE__ */ m(_, {
+									}), /* @__PURE__ */ p(g, {
 										id: "shipOrigin",
-										value: P.origin,
-										onChange: (e) => F({
-											...P,
+										value: k.origin,
+										onChange: (e) => A({
+											...k,
 											origin: e.target.value
 										}),
 										placeholder: "Ras Tanura Terminal"
 									})]
-								}), /* @__PURE__ */ h("div", {
+								}), /* @__PURE__ */ m("div", {
 									className: "grid gap-1.5",
-									children: [/* @__PURE__ */ m(v, {
+									children: [/* @__PURE__ */ p(_, {
 										htmlFor: "shipDest",
 										children: "Destination"
-									}), /* @__PURE__ */ m(_, {
+									}), /* @__PURE__ */ p(g, {
 										id: "shipDest",
-										value: P.destination,
-										onChange: (e) => F({
-											...P,
+										value: k.destination,
+										onChange: (e) => A({
+											...k,
 											destination: e.target.value
 										}),
 										placeholder: "Rotterdam"
 									})]
 								})]
 							}),
-							/* @__PURE__ */ h("div", {
+							/* @__PURE__ */ m("div", {
 								className: "grid gap-2 sm:grid-cols-3",
 								children: [
-									/* @__PURE__ */ h("div", {
+									/* @__PURE__ */ m("div", {
 										className: "grid gap-1.5",
-										children: [/* @__PURE__ */ m(v, {
+										children: [/* @__PURE__ */ p(_, {
 											htmlFor: "shipVolume",
 											children: "Volume *"
-										}), /* @__PURE__ */ m(_, {
+										}), /* @__PURE__ */ p(g, {
 											id: "shipVolume",
 											type: "number",
 											min: "0",
 											step: "any",
-											value: P.volume,
-											onChange: (e) => F({
-												...P,
+											value: k.volume,
+											onChange: (e) => A({
+												...k,
 												volume: e.target.value
 											}),
 											placeholder: "500000"
 										})]
 									}),
-									/* @__PURE__ */ h("div", {
+									/* @__PURE__ */ m("div", {
 										className: "grid gap-1.5",
-										children: [/* @__PURE__ */ m(v, {
+										children: [/* @__PURE__ */ p(_, {
 											htmlFor: "shipUnit",
 											children: "Unit"
-										}), /* @__PURE__ */ h(y, {
-											value: P.unit,
-											onValueChange: (e) => F({
-												...P,
+										}), /* @__PURE__ */ m(v, {
+											value: k.unit,
+											onValueChange: (e) => A({
+												...k,
 												unit: e
 											}),
-											children: [/* @__PURE__ */ m(S, {
+											children: [/* @__PURE__ */ p(x, {
 												id: "shipUnit",
-												children: /* @__PURE__ */ m(C, {})
-											}), /* @__PURE__ */ m(b, { children: D.map((e) => /* @__PURE__ */ m(x, {
+												children: /* @__PURE__ */ p(S, {})
+											}), /* @__PURE__ */ p(y, { children: Ne.map((e) => /* @__PURE__ */ p(b, {
 												value: e,
 												children: r(e)
 											}, e)) })]
 										})]
 									}),
-									/* @__PURE__ */ h("div", {
+									/* @__PURE__ */ m("div", {
 										className: "grid gap-1.5",
-										children: [/* @__PURE__ */ m(v, {
+										children: [/* @__PURE__ */ p(_, {
 											htmlFor: "shipScheduled",
 											children: "Scheduled date"
-										}), /* @__PURE__ */ m(_, {
+										}), /* @__PURE__ */ p(g, {
 											id: "shipScheduled",
 											type: "date",
-											value: P.scheduledAt,
-											onChange: (e) => F({
-												...P,
+											value: k.scheduledAt,
+											onChange: (e) => A({
+												...k,
 												scheduledAt: e.target.value
 											})
 										})]
 									})
 								]
 							}),
-							/* @__PURE__ */ h("div", {
+							/* @__PURE__ */ m("div", {
 								className: "grid gap-1.5",
-								children: [/* @__PURE__ */ m(v, {
+								children: [/* @__PURE__ */ p(_, {
 									htmlFor: "shipCarrier",
 									children: "Carrier"
-								}), /* @__PURE__ */ m(_, {
+								}), /* @__PURE__ */ p(g, {
 									id: "shipCarrier",
-									value: P.carrier,
-									onChange: (e) => F({
-										...P,
+									value: k.carrier,
+									onChange: (e) => A({
+										...k,
 										carrier: e.target.value
 									}),
 									placeholder: "Frontline Ltd."
 								})]
 							}),
-							/* @__PURE__ */ m(he, {
+							/* @__PURE__ */ p(_e, {
 								id: "shipDocument",
 								label: "Bill of lading (optional)",
-								value: I,
-								onChange: L,
+								value: j,
+								onChange: M,
 								hint: "Attach the bill of lading or shipping document (PDF or image)."
 							}),
-							/* @__PURE__ */ h("div", {
+							/* @__PURE__ */ m("div", {
 								className: "grid gap-1.5",
-								children: [/* @__PURE__ */ m(v, {
+								children: [/* @__PURE__ */ p(_, {
 									htmlFor: "shipNotes",
 									children: "Notes"
-								}), /* @__PURE__ */ m(w, {
+								}), /* @__PURE__ */ p(Ae, {
 									id: "shipNotes",
-									value: P.notes,
-									onChange: (e) => F({
-										...P,
+									value: k.notes,
+									onChange: (e) => A({
+										...k,
 										notes: e.target.value
 									}),
 									placeholder: "Optional context — laycan window, inspector, terms.",
 									rows: 2
 								})]
 							}),
-							R && /* @__PURE__ */ m("p", {
+							N && /* @__PURE__ */ p("p", {
 								className: "text-sm text-status-error-text",
-								children: R
+								children: N
 							})
 						]
-					}), /* @__PURE__ */ h(Ce, { children: [/* @__PURE__ */ m(g, {
+					}), /* @__PURE__ */ m(De, { children: [/* @__PURE__ */ p(h, {
 						type: "button",
 						variant: "outline",
 						onClick: () => {
-							N(!1), Q();
+							O(!1), Q();
 						},
 						children: "Cancel"
-					}), /* @__PURE__ */ m(g, {
+					}), /* @__PURE__ */ p(h, {
 						type: "submit",
-						disabled: J.isPending,
-						children: J.isPending ? "Scheduling…" : "Schedule shipment"
+						disabled: W.isPending,
+						children: W.isPending ? "Scheduling…" : "Schedule shipment"
 					})] })]
 				})] })
 			})
@@ -597,6 +726,6 @@ function A() {
 	});
 }
 //#endregion
-export { A as ShipmentsPage };
+export { T as ShipmentsPage };
 
 //# sourceMappingURL=ShipmentsPage.js.map