@burdenoff/microfe-movethewheels 2026.920.3 → 2026.923.1

package/dist/pages/MultiModalShipmentPage.js

@@ -1,23 +1,25 @@
 import { Calculator as e } from "../node_modules/lucide-react/dist/esm/icons/calculator.js";
-import { Plane as t } from "../node_modules/lucide-react/dist/esm/icons/plane.js";
-import { Plus as n } from "../node_modules/lucide-react/dist/esm/icons/plus.js";
-import { Ship as r } from "../node_modules/lucide-react/dist/esm/icons/ship.js";
-import { TrainFront as i } from "../node_modules/lucide-react/dist/esm/icons/train-front.js";
+import { ChevronLeft as t } from "../node_modules/lucide-react/dist/esm/icons/chevron-left.js";
+import { ChevronRight as n } from "../node_modules/lucide-react/dist/esm/icons/chevron-right.js";
+import { Plane as r } from "../node_modules/lucide-react/dist/esm/icons/plane.js";
+import { Plus as i } from "../node_modules/lucide-react/dist/esm/icons/plus.js";
+import { Ship as a } from "../node_modules/lucide-react/dist/esm/icons/ship.js";
+import { TrainFront as o } from "../node_modules/lucide-react/dist/esm/icons/train-front.js";
 import { Trash2 as ee } from "../node_modules/lucide-react/dist/esm/icons/trash-2.js";
-import { Truck as a } from "../node_modules/lucide-react/dist/esm/icons/truck.js";
-import { Badge as o, Button as s, Card as c, CardContent as l, CardHeader as u, CardTitle as d, Input as f, Label as p, Select as m, SelectContent as h, SelectItem as g, SelectTrigger as _, SelectValue as v, Separator as te } from "../components/ui.js";
-import { EmptyState as ne, LoadingState as y, PageLayout as b, PageSection as x } from "../components/PageLayout.js";
-import { FormError as S } from "../components/FormError.js";
-import { useMultiModalShipments as re } from "../hooks/useMultiModalShipments.js";
-import { useState as C } from "react";
-import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
-import { EmphasisPanel as D, PagePurpose as O } from "@burdenoff/fe-libs/ui";
+import { Truck as s } from "../node_modules/lucide-react/dist/esm/icons/truck.js";
+import { Badge as c, Button as l, Card as u, CardContent as d, CardHeader as f, CardTitle as p, Input as m, Label as h, Select as g, SelectContent as _, SelectItem as v, SelectTrigger as y, SelectValue as b, Separator as x } from "../components/ui.js";
+import { EmptyState as te, LoadingState as ne, PageLayout as S, PageSection as C } from "../components/PageLayout.js";
+import { FormError as w } from "../components/FormError.js";
+import { useMultiModalShipments as T } from "../hooks/useMultiModalShipments.js";
+import { useState as E } from "react";
+import { Fragment as re, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { EmphasisPanel as ie, PagePurpose as ae } from "@burdenoff/fe-libs/ui";
 //#region src/movethewheels/pages/MultiModalShipmentPage.tsx
 var k = {
-	ROAD: a,
-	AIR: t,
-	OCEAN: r,
-	RAIL: i
+	ROAD: s,
+	AIR: r,
+	OCEAN: a,
+	RAIL: o
 }, A = {
 	ROAD: "Road",
 	AIR: "Air",
@@ -43,210 +45,213 @@ function M(e, t) {
 	}
 }
 function N() {
-	let { shipments: t, isLoading: i, error: a, calculateFreightRate: N, planMultiModalShipment: P } = re(), [F, I] = C(""), [L, R] = C(""), [z, B] = C(""), [V, H] = C([j()]), [U, W] = C({}), [G, K] = C({}), [q, J] = C(!1), [Y, X] = C(null), [Z, Q] = C(null), $ = (e, t) => {
-		H((n) => n.map((n, r) => r === e ? {
+	let [r, o] = E(0), { shipments: s, totalShipments: N, hasMore: oe, isLoading: P, error: F, calculateFreightRate: I, planMultiModalShipment: se } = T({
+		limit: 10,
+		offset: r * 10
+	}), [L, R] = E(""), [z, B] = E(""), [V, H] = E(""), [U, W] = E([j()]), [G, K] = E({}), [ce, q] = E({}), [J, Y] = E(!1), [le, X] = E(null), [Z, Q] = E(null), $ = (e, t) => {
+		W((n) => n.map((n, r) => r === e ? {
 			...n,
 			...t
-		} : n)), W((t) => ({
+		} : n)), K((t) => ({
 			...t,
 			[e]: null
 		}));
-	}, ie = () => H((e) => [...e, j()]), ae = (e) => {
-		H((t) => t.filter((t, n) => n !== e)), W((t) => {
+	}, ue = () => W((e) => [...e, j()]), de = (e) => {
+		W((t) => t.filter((t, n) => n !== e)), K((t) => {
 			let n = { ...t };
 			return delete n[e], n;
 		});
-	}, oe = async (e) => {
-		let t = V[e];
+	}, fe = async (e) => {
+		let t = U[e];
 		if (t) {
-			K((t) => ({
+			q((t) => ({
 				...t,
 				[e]: null
 			}));
 			try {
-				let n = await N(t);
-				W((t) => ({
+				let n = await I(t);
+				K((t) => ({
 					...t,
 					[e]: n
 				}));
 			} catch (t) {
-				K((n) => ({
+				q((n) => ({
 					...n,
 					[e]: t instanceof Error ? t.message : "Failed to calculate rate"
 				}));
 			}
 		}
-	}, se = Object.values(U).reduce((e, t) => e + (t?.calculatedCost ?? 0), 0), ce = new Set(V.map((e) => e.mode));
-	return /* @__PURE__ */ E(b, {
+	}, pe = Object.values(G).reduce((e, t) => e + (t?.calculatedCost ?? 0), 0), me = new Set(U.map((e) => e.mode));
+	return /* @__PURE__ */ O(S, {
 		hero: !0,
 		titleAccent: "Multi-Modal Freight",
 		title: "Multi-Modal Freight",
 		subtitle: "Plan a shipment across road, air, ocean and rail legs with real per-mode rate calculation",
-		icon: /* @__PURE__ */ T(r, { size: 24 }),
+		icon: /* @__PURE__ */ D(a, { size: 24 }),
 		children: [
-			/* @__PURE__ */ T(O, {
-				icon: /* @__PURE__ */ T(r, { size: 18 }),
+			/* @__PURE__ */ D(ae, {
+				icon: /* @__PURE__ */ D(a, { size: 18 }),
 				children: "Compose a single shipment from multiple real transport legs — each leg picks its own mode (road/air/ocean/rail) and gets priced with that mode's real pricing driver (air: chargeable weight; ocean: revenue-ton or per-container; rail: tonne-km; road: distance + weight). Calculate a leg's rate before booking, then plan the full multi-leg shipment in one step."
 			}),
-			/* @__PURE__ */ T(D, { children: "Live carrier booking/API integration is out of scope for this core (it needs named-carrier partnership agreements) — this plans the shipment and its legs with real calculated costs that your ops team can then execute against your chosen carriers." }),
-			/* @__PURE__ */ T(x, {
+			/* @__PURE__ */ D(ie, { children: "Live carrier booking/API integration is out of scope for this core (it needs named-carrier partnership agreements) — this plans the shipment and its legs with real calculated costs that your ops team can then execute against your chosen carriers." }),
+			/* @__PURE__ */ D(C, {
 				title: "Plan a New Multi-Modal Shipment",
-				children: /* @__PURE__ */ T(c, { children: /* @__PURE__ */ T(l, { children: /* @__PURE__ */ E("form", {
+				children: /* @__PURE__ */ D(u, { children: /* @__PURE__ */ D(d, { children: /* @__PURE__ */ O("form", {
 					onSubmit: async (e) => {
-						if (e.preventDefault(), X(null), Q(null), !F.trim()) {
+						if (e.preventDefault(), X(null), Q(null), !L.trim()) {
 							X("Shipment number is required.");
 							return;
 						}
-						if (V.length === 0) {
+						if (U.length === 0) {
 							X("Add at least one transport leg.");
 							return;
 						}
-						J(!0);
+						Y(!0);
 						try {
-							let e = await P({
-								shipmentNumber: F.trim(),
-								origin: { address: L },
-								destination: { address: z },
-								legs: V
+							let e = await se({
+								shipmentNumber: L.trim(),
+								origin: { address: z },
+								destination: { address: V },
+								legs: U
 							});
-							Q(`Shipment ${e.shipmentNumber} planned with ${e.legs.length} leg(s).`), I(""), R(""), B(""), H([j()]), W({});
+							Q(`Shipment ${e.shipmentNumber} planned with ${e.legs.length} leg(s).`), R(""), B(""), H(""), W([j()]), K({}), o(0);
 						} catch (e) {
 							X(e instanceof Error ? e.message : "Failed to plan shipment");
 						} finally {
-							J(!1);
+							Y(!1);
 						}
 					},
 					className: "space-y-6 pt-4",
 					children: [
-						/* @__PURE__ */ T(S, { message: Y }),
-						Z && /* @__PURE__ */ T("div", {
+						/* @__PURE__ */ D(w, { message: le }),
+						Z && /* @__PURE__ */ D("div", {
 							className: "rounded-lg border border-status-success-border bg-status-success-bg-subtle px-4 py-3 text-sm text-status-success-text",
 							children: Z
 						}),
-						/* @__PURE__ */ E("div", {
+						/* @__PURE__ */ O("div", {
 							className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
 							children: [
-								/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, {
+								/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D(h, {
 									htmlFor: "shipmentNumber",
 									children: "Shipment Number"
-								}), /* @__PURE__ */ T(f, {
+								}), /* @__PURE__ */ D(m, {
 									id: "shipmentNumber",
-									value: F,
-									onChange: (e) => I(e.target.value),
+									value: L,
+									onChange: (e) => R(e.target.value),
 									placeholder: "SHP-MM-0001",
 									required: !0
 								})] }),
-								/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, {
+								/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D(h, {
 									htmlFor: "originAddress",
 									children: "Origin"
-								}), /* @__PURE__ */ T(f, {
+								}), /* @__PURE__ */ D(m, {
 									id: "originAddress",
-									value: L,
-									onChange: (e) => R(e.target.value),
+									value: z,
+									onChange: (e) => B(e.target.value),
 									placeholder: "Shanghai, CN"
 								})] }),
-								/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, {
+								/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D(h, {
 									htmlFor: "destinationAddress",
 									children: "Destination"
-								}), /* @__PURE__ */ T(f, {
+								}), /* @__PURE__ */ D(m, {
 									id: "destinationAddress",
-									value: z,
-									onChange: (e) => B(e.target.value),
+									value: V,
+									onChange: (e) => H(e.target.value),
 									placeholder: "Los Angeles, US"
 								})] })
 							]
 						}),
-						/* @__PURE__ */ T(te, {}),
-						/* @__PURE__ */ T("div", {
+						/* @__PURE__ */ D(x, {}),
+						/* @__PURE__ */ D("div", {
 							className: "space-y-4",
-							children: V.map((t, n) => {
-								let r = k[t.mode], i = U[n], a = G[n];
-								return /* @__PURE__ */ E(c, {
+							children: U.map((t, n) => {
+								let r = k[t.mode], i = G[n], a = ce[n];
+								return /* @__PURE__ */ O(u, {
 									className: "border-border-subtle",
-									children: [/* @__PURE__ */ E(u, {
+									children: [/* @__PURE__ */ O(f, {
 										className: "flex flex-row items-center justify-between",
-										children: [/* @__PURE__ */ E(d, {
+										children: [/* @__PURE__ */ O(p, {
 											className: "flex items-center gap-2 text-base",
 											children: [
-												/* @__PURE__ */ T(r, { size: 16 }),
+												/* @__PURE__ */ D(r, { size: 16 }),
 												" Leg ",
 												n + 1
 											]
-										}), V.length > 1 && /* @__PURE__ */ T(s, {
+										}), U.length > 1 && /* @__PURE__ */ D(l, {
 											type: "button",
 											variant: "ghost",
 											size: "sm",
-											onClick: () => ae(n),
+											onClick: () => de(n),
 											"aria-label": `Remove leg ${n + 1}`,
-											children: /* @__PURE__ */ T(ee, { size: 14 })
+											children: /* @__PURE__ */ D(ee, { size: 14 })
 										})]
-									}), /* @__PURE__ */ E(l, {
+									}), /* @__PURE__ */ O(d, {
 										className: "space-y-4",
 										children: [
-											/* @__PURE__ */ E("div", {
+											/* @__PURE__ */ O("div", {
 												className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
 												children: [
-													/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Mode" }), /* @__PURE__ */ E(m, {
+													/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D(h, { children: "Mode" }), /* @__PURE__ */ O(g, {
 														value: t.mode,
 														onValueChange: (e) => $(n, { mode: e }),
-														children: [/* @__PURE__ */ T(_, { children: /* @__PURE__ */ T(v, {}) }), /* @__PURE__ */ T(h, { children: [
+														children: [/* @__PURE__ */ D(y, { children: /* @__PURE__ */ D(b, {}) }), /* @__PURE__ */ D(_, { children: [
 															"ROAD",
 															"AIR",
 															"OCEAN",
 															"RAIL"
-														].map((e) => /* @__PURE__ */ T(g, {
+														].map((e) => /* @__PURE__ */ D(v, {
 															value: e,
 															children: A[e]
 														}, e)) })]
 													})] }),
-													/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Leg Origin" }), /* @__PURE__ */ T(f, {
+													/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D(h, { children: "Leg Origin" }), /* @__PURE__ */ D(m, {
 														value: t.origin.address ?? "",
 														onChange: (e) => $(n, { origin: { address: e.target.value } }),
 														placeholder: "Origin port/airport/terminal"
 													})] }),
-													/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Leg Destination" }), /* @__PURE__ */ T(f, {
+													/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D(h, { children: "Leg Destination" }), /* @__PURE__ */ D(m, {
 														value: t.destination.address ?? "",
 														onChange: (e) => $(n, { destination: { address: e.target.value } }),
 														placeholder: "Destination port/airport/terminal"
 													})] })
 												]
 											}),
-											(t.mode === "ROAD" || t.mode === "RAIL") && /* @__PURE__ */ E("div", {
+											(t.mode === "ROAD" || t.mode === "RAIL") && /* @__PURE__ */ O("div", {
 												className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-												children: [/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Distance (km)" }), /* @__PURE__ */ T(f, {
+												children: [/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D(h, { children: "Distance (km)" }), /* @__PURE__ */ D(m, {
 													type: "number",
 													min: 0,
 													value: t.distanceKm ?? "",
 													onChange: (e) => $(n, { distanceKm: Number(e.target.value) || void 0 })
-												})] }), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Weight (kg)" }), /* @__PURE__ */ T(f, {
+												})] }), /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D(h, { children: "Weight (kg)" }), /* @__PURE__ */ D(m, {
 													type: "number",
 													min: 0,
 													value: t.weightKg ?? "",
 													onChange: (e) => $(n, { weightKg: Number(e.target.value) || void 0 })
 												})] })]
 											}),
-											t.mode === "AIR" && /* @__PURE__ */ E("div", {
+											t.mode === "AIR" && /* @__PURE__ */ O("div", {
 												className: "grid grid-cols-1 gap-4 sm:grid-cols-4",
 												children: [
-													/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Weight (kg)" }), /* @__PURE__ */ T(f, {
+													/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D(h, { children: "Weight (kg)" }), /* @__PURE__ */ D(m, {
 														type: "number",
 														min: 0,
 														value: t.weightKg ?? "",
 														onChange: (e) => $(n, { weightKg: Number(e.target.value) || void 0 })
 													})] }),
-													/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Length (cm)" }), /* @__PURE__ */ T(f, {
+													/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D(h, { children: "Length (cm)" }), /* @__PURE__ */ D(m, {
 														type: "number",
 														min: 0,
 														value: t.lengthCm ?? "",
 														onChange: (e) => $(n, { lengthCm: Number(e.target.value) || void 0 })
 													})] }),
-													/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Width (cm)" }), /* @__PURE__ */ T(f, {
+													/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D(h, { children: "Width (cm)" }), /* @__PURE__ */ D(m, {
 														type: "number",
 														min: 0,
 														value: t.widthCm ?? "",
 														onChange: (e) => $(n, { widthCm: Number(e.target.value) || void 0 })
 													})] }),
-													/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Height (cm)" }), /* @__PURE__ */ T(f, {
+													/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D(h, { children: "Height (cm)" }), /* @__PURE__ */ D(m, {
 														type: "number",
 														min: 0,
 														value: t.heightCm ?? "",
@@ -254,62 +259,62 @@ function N() {
 													})] })
 												]
 											}),
-											t.mode === "OCEAN" && /* @__PURE__ */ E("div", {
+											t.mode === "OCEAN" && /* @__PURE__ */ O("div", {
 												className: "grid grid-cols-1 gap-4 sm:grid-cols-4",
-												children: [/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Container Type" }), /* @__PURE__ */ E(m, {
+												children: [/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D(h, { children: "Container Type" }), /* @__PURE__ */ O(g, {
 													value: t.containerType ?? "LCL",
 													onValueChange: (e) => $(n, { containerType: e }),
-													children: [/* @__PURE__ */ T(_, { children: /* @__PURE__ */ T(v, {}) }), /* @__PURE__ */ E(h, { children: [
-														/* @__PURE__ */ T(g, {
+													children: [/* @__PURE__ */ D(y, { children: /* @__PURE__ */ D(b, {}) }), /* @__PURE__ */ O(_, { children: [
+														/* @__PURE__ */ D(v, {
 															value: "LCL",
 															children: "LCL (shared container)"
 														}),
-														/* @__PURE__ */ T(g, {
+														/* @__PURE__ */ D(v, {
 															value: "FCL_20FT",
 															children: "FCL 20ft"
 														}),
-														/* @__PURE__ */ T(g, {
+														/* @__PURE__ */ D(v, {
 															value: "FCL_40FT",
 															children: "FCL 40ft"
 														}),
-														/* @__PURE__ */ T(g, {
+														/* @__PURE__ */ D(v, {
 															value: "FCL_40FT_HC",
 															children: "FCL 40ft High-Cube"
 														})
 													] })]
-												})] }), (t.containerType ?? "LCL") === "LCL" ? /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Weight (kg)" }), /* @__PURE__ */ T(f, {
+												})] }), (t.containerType ?? "LCL") === "LCL" ? /* @__PURE__ */ O(re, { children: [/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D(h, { children: "Weight (kg)" }), /* @__PURE__ */ D(m, {
 													type: "number",
 													min: 0,
 													value: t.weightKg ?? "",
 													onChange: (e) => $(n, { weightKg: Number(e.target.value) || void 0 })
-												})] }), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Volume (CBM)" }), /* @__PURE__ */ T(f, {
+												})] }), /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D(h, { children: "Volume (CBM)" }), /* @__PURE__ */ D(m, {
 													type: "number",
 													min: 0,
 													value: t.volumeCbm ?? "",
 													onChange: (e) => $(n, { volumeCbm: Number(e.target.value) || void 0 })
-												})] })] }) : /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Container Count" }), /* @__PURE__ */ T(f, {
+												})] })] }) : /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D(h, { children: "Container Count" }), /* @__PURE__ */ D(m, {
 													type: "number",
 													min: 1,
 													value: t.containerCount ?? 1,
 													onChange: (e) => $(n, { containerCount: Number(e.target.value) || 1 })
 												})] })]
 											}),
-											/* @__PURE__ */ E("div", {
+											/* @__PURE__ */ O("div", {
 												className: "flex items-center gap-3",
 												children: [
-													/* @__PURE__ */ E(s, {
+													/* @__PURE__ */ O(l, {
 														type: "button",
 														variant: "secondary",
 														size: "sm",
-														onClick: () => void oe(n),
-														children: [/* @__PURE__ */ T(e, {
+														onClick: () => void fe(n),
+														children: [/* @__PURE__ */ D(e, {
 															size: 14,
 															className: "mr-1.5"
 														}), " Calculate Rate"]
 													}),
-													i && /* @__PURE__ */ E("span", {
+													i && /* @__PURE__ */ O("span", {
 														className: "text-sm font-medium text-text-primary",
-														children: [M(i.calculatedCost, i.currency), i.chargeableWeightKg != null && /* @__PURE__ */ E("span", {
+														children: [M(i.calculatedCost, i.currency), i.chargeableWeightKg != null && /* @__PURE__ */ O("span", {
 															className: "ml-2 text-xs text-text-secondary",
 															children: [
 																"(",
@@ -318,17 +323,17 @@ function N() {
 															]
 														})]
 													}),
-													a && /* @__PURE__ */ T("span", {
+													a && /* @__PURE__ */ D("span", {
 														className: "text-sm text-status-error-text",
 														children: a
 													})
 												]
 											}),
-											i && i.breakdown.length > 0 && /* @__PURE__ */ T("ul", {
+											i && i.breakdown.length > 0 && /* @__PURE__ */ D("ul", {
 												className: "space-y-1 rounded-md bg-surface-subtle px-3 py-2 text-xs text-text-secondary",
-												children: i.breakdown.map((e) => /* @__PURE__ */ E("li", {
+												children: i.breakdown.map((e) => /* @__PURE__ */ O("li", {
 													className: "flex justify-between",
-													children: [/* @__PURE__ */ T("span", { children: e.label }), /* @__PURE__ */ T("span", { children: M(e.amount, i.currency) })]
+													children: [/* @__PURE__ */ D("span", { children: e.label }), /* @__PURE__ */ D("span", { children: M(e.amount, i.currency) })]
 												}, e.label))
 											})
 										]
@@ -336,72 +341,72 @@ function N() {
 								}, n);
 							})
 						}),
-						/* @__PURE__ */ E("div", {
+						/* @__PURE__ */ O("div", {
 							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ E(s, {
+							children: [/* @__PURE__ */ O(l, {
 								type: "button",
 								variant: "outline",
 								size: "sm",
-								onClick: ie,
-								children: [/* @__PURE__ */ T(n, {
+								onClick: ue,
+								children: [/* @__PURE__ */ D(i, {
 									size: 14,
 									className: "mr-1.5"
 								}), " Add Leg"]
-							}), /* @__PURE__ */ E("div", {
+							}), /* @__PURE__ */ O("div", {
 								className: "flex items-center gap-3",
-								children: [ce.size > 1 && /* @__PURE__ */ T(o, {
+								children: [me.size > 1 && /* @__PURE__ */ D(c, {
 									variant: "secondary",
 									children: "Multi-modal"
-								}), /* @__PURE__ */ E("span", {
+								}), /* @__PURE__ */ O("span", {
 									className: "text-sm text-text-secondary",
 									children: [
 										"Estimated total:",
 										" ",
-										/* @__PURE__ */ T("strong", { children: M(se, U[0]?.currency ?? "USD") })
+										/* @__PURE__ */ D("strong", { children: M(pe, G[0]?.currency ?? "USD") })
 									]
 								})]
 							})]
 						}),
-						/* @__PURE__ */ T(s, {
+						/* @__PURE__ */ D(l, {
 							type: "submit",
-							disabled: q,
-							children: q ? "Planning shipment..." : "Plan Shipment"
+							disabled: J,
+							children: J ? "Planning shipment..." : "Plan Shipment"
 						})
 					]
 				}) }) })
 			}),
-			/* @__PURE__ */ T(x, {
+			/* @__PURE__ */ D(C, {
 				title: "Planned Multi-Modal Shipments",
-				children: i ? /* @__PURE__ */ T(y, { message: "Loading multi-modal shipments..." }) : a ? /* @__PURE__ */ T(S, { message: a.message }) : t.length === 0 ? /* @__PURE__ */ T(ne, {
-					icon: /* @__PURE__ */ T(r, { size: 32 }),
+				children: P ? /* @__PURE__ */ D(ne, { message: "Loading multi-modal shipments..." }) : F ? /* @__PURE__ */ D(w, { message: F.message }) : s.length === 0 ? /* @__PURE__ */ D(te, {
+					icon: /* @__PURE__ */ D(a, { size: 32 }),
 					title: "No multi-modal shipments yet",
 					description: "Plan a shipment above to see it here once it spans more than one transport mode."
-				}) : /* @__PURE__ */ T("div", {
+				}) : /* @__PURE__ */ O("div", {
 					className: "space-y-4",
-					children: t.map((e) => /* @__PURE__ */ E(c, { children: [/* @__PURE__ */ E(u, {
+					children: [s.map((e) => /* @__PURE__ */ O(u, { children: [/* @__PURE__ */ O(f, {
 						className: "flex flex-row items-center justify-between",
-						children: [/* @__PURE__ */ T(d, {
+						children: [/* @__PURE__ */ D(p, {
 							className: "text-base",
 							children: e.shipmentNumber
-						}), /* @__PURE__ */ E("div", {
+						}), /* @__PURE__ */ O("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ T(o, {
+							children: [/* @__PURE__ */ D(c, {
 								variant: "outline",
 								children: e.status
-							}), /* @__PURE__ */ T("span", {
+							}), /* @__PURE__ */ D("span", {
 								className: "text-sm font-medium",
 								children: M(e.totalFreightCost, e.freightCurrency)
 							})]
 						})]
-					}), /* @__PURE__ */ T(l, { children: /* @__PURE__ */ T("div", {
+					}), /* @__PURE__ */ D(d, { children: /* @__PURE__ */ D("div", {
 						className: "flex flex-wrap gap-2",
 						children: e.legs.map((e) => {
 							let t = k[e.mode];
-							return /* @__PURE__ */ E(o, {
+							return /* @__PURE__ */ O(c, {
 								variant: "secondary",
 								className: "flex items-center gap-1",
 								children: [
-									/* @__PURE__ */ T(t, { size: 12 }),
+									/* @__PURE__ */ D(t, { size: 12 }),
 									" ",
 									A[e.mode],
 									":",
@@ -410,7 +415,35 @@ function N() {
 								]
 							}, e.id);
 						})
-					}) })] }, e.id))
+					}) })] }, e.id)), N > 10 && /* @__PURE__ */ O("div", {
+						className: "flex items-center justify-between border-t border-border-seam pt-4",
+						children: [/* @__PURE__ */ O("span", {
+							className: "text-sm text-text-secondary",
+							children: [
+								"Showing ",
+								r * 10 + 1,
+								"–",
+								Math.min((r + 1) * 10, N),
+								" of ",
+								N
+							]
+						}), /* @__PURE__ */ O("div", {
+							className: "flex gap-2",
+							children: [/* @__PURE__ */ O(l, {
+								variant: "outline",
+								size: "sm",
+								disabled: r === 0 || P,
+								onClick: () => o((e) => Math.max(0, e - 1)),
+								children: [/* @__PURE__ */ D(t, { size: 16 }), " Previous"]
+							}), /* @__PURE__ */ O(l, {
+								variant: "outline",
+								size: "sm",
+								disabled: !oe || P,
+								onClick: () => o((e) => e + 1),
+								children: ["Next ", /* @__PURE__ */ D(n, { size: 16 })]
+							})]
+						})]
+					})]
 				})
 			})
 		]