@burdenoff/microfe-movethewheels 2026.726.1 → 2026.731.1

package/dist/pages/DeliveryCapturePage.js

@@ -0,0 +1,245 @@
+import { CircleCheck as e } from "../node_modules/lucide-react/dist/esm/icons/circle-check.js";
+import { LoaderCircle as t } from "../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
+import { MapPin as n } from "../node_modules/lucide-react/dist/esm/icons/map-pin.js";
+import { Package as r } from "../node_modules/lucide-react/dist/esm/icons/package.js";
+import { PenLine as i } from "../node_modules/lucide-react/dist/esm/icons/pen-line.js";
+import { Truck as a } from "../node_modules/lucide-react/dist/esm/icons/truck.js";
+import { Type as o } from "../node_modules/lucide-react/dist/esm/icons/type.js";
+import { Upload as s } from "../node_modules/lucide-react/dist/esm/icons/upload.js";
+import { useCaptureEpod as c, useEpodPhotoUpload as l, useMyPendingEpodDeliveryJobs as u } from "../hooks/useEpod.js";
+import { Button as d, Card as f, CardContent as p, CardHeader as m, CardTitle as h, Input as g, Label as _, Textarea as v } from "../components/ui.js";
+import { PageLayout as y } from "../components/PageLayout.js";
+import { FormError as b } from "../components/FormError.js";
+import { Notice as x, useNotice as S } from "../components/Notice.js";
+import { formatAddress as C, formatDate as w } from "../utils/formatters.js";
+import { SignaturePad as T } from "../components/SignaturePad.js";
+import { useRef as E, useState as D } from "react";
+import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
+//#region src/movethewheels/pages/DeliveryCapturePage.tsx
+function j() {
+	return new Promise((e) => {
+		if (!navigator.geolocation) {
+			e(null);
+			return;
+		}
+		navigator.geolocation.getCurrentPosition((t) => e(t), () => e(null), {
+			enableHighAccuracy: !0,
+			timeout: 8e3,
+			maximumAge: 3e4
+		});
+	});
+}
+function M({ job: r, onCaptured: u, onCancel: y }) {
+	let { captureEpod: x, isSubmitting: S, error: w } = c(), { upload: M, isUploading: N, error: P } = l(), F = E(null), [I, L] = D(""), [R, z] = D("drawn"), [B, V] = D(""), [H, U] = D(null), [W, G] = D(""), [K, q] = D(null), J = async () => {
+		q(null);
+		let e = I.trim();
+		if (!e) {
+			q("Recipient name is required.");
+			return;
+		}
+		let t = R === "typed" ? B.trim() : F.current?.toDataUrl() ?? null;
+		if (!t) {
+			q(R === "typed" ? "Type the recipient full name as their signature." : "A signature is required.");
+			return;
+		}
+		try {
+			let n;
+			H && (n = [(await M(H)).fileId]);
+			let i = await j();
+			await x({
+				deliveryJobId: r.id,
+				recipientName: e,
+				signatureType: R,
+				signatureData: t,
+				photoFileIds: n,
+				latitude: i?.coords.latitude,
+				longitude: i?.coords.longitude,
+				locationAccuracy: i?.coords.accuracy,
+				notes: W.trim() || void 0
+			}), u();
+		} catch {}
+	}, Y = S || N;
+	return /* @__PURE__ */ A(f, { children: [/* @__PURE__ */ k(m, { children: /* @__PURE__ */ A(h, {
+		className: "flex items-center gap-2",
+		children: [
+			/* @__PURE__ */ k(a, { size: 18 }),
+			" Capture delivery for ",
+			r.deliveryJobNumber
+		]
+	}) }), /* @__PURE__ */ A(p, {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ A("div", {
+				className: "text-sm text-text-secondary space-y-1",
+				children: [r.customerName && /* @__PURE__ */ A("p", { children: ["Recipient on file: ", r.customerName] }), r.deliveryAddress && /* @__PURE__ */ k("p", { children: C(r.deliveryAddress) })]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "space-y-1.5",
+				children: [/* @__PURE__ */ k(_, {
+					htmlFor: "epod-recipient-name",
+					children: "Recipient name"
+				}), /* @__PURE__ */ k(g, {
+					id: "epod-recipient-name",
+					value: I,
+					onChange: (e) => L(e.target.value),
+					placeholder: "Who received the delivery?"
+				})]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "space-y-1.5",
+				children: [
+					/* @__PURE__ */ k(_, { children: "Signature" }),
+					/* @__PURE__ */ A("div", {
+						className: "flex gap-2",
+						children: [/* @__PURE__ */ A(d, {
+							type: "button",
+							variant: R === "drawn" ? "default" : "outline",
+							size: "sm",
+							onClick: () => z("drawn"),
+							children: [/* @__PURE__ */ k(i, { size: 14 }), " Draw"]
+						}), /* @__PURE__ */ A(d, {
+							type: "button",
+							variant: R === "typed" ? "default" : "outline",
+							size: "sm",
+							onClick: () => z("typed"),
+							children: [/* @__PURE__ */ k(o, { size: 14 }), " Type name instead"]
+						})]
+					}),
+					R === "drawn" ? /* @__PURE__ */ k(T, { ref: F }) : /* @__PURE__ */ k(g, {
+						value: B,
+						onChange: (e) => V(e.target.value),
+						placeholder: "Type full name as signature"
+					})
+				]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "space-y-1.5",
+				children: [
+					/* @__PURE__ */ k(_, {
+						htmlFor: "epod-photo",
+						children: "Delivery photo (optional)"
+					}),
+					/* @__PURE__ */ A("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ k("input", {
+							id: "epod-photo",
+							type: "file",
+							accept: "image/*",
+							capture: "environment",
+							onChange: (e) => U(e.target.files?.[0] ?? null),
+							className: "text-sm"
+						}), H && /* @__PURE__ */ k(s, {
+							size: 14,
+							className: "text-text-secondary"
+						})]
+					}),
+					H && /* @__PURE__ */ k("p", {
+						className: "text-xs text-text-secondary",
+						children: H.name
+					})
+				]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "space-y-1.5",
+				children: [/* @__PURE__ */ k(_, {
+					htmlFor: "epod-notes",
+					children: "Notes (optional)"
+				}), /* @__PURE__ */ k(v, {
+					id: "epod-notes",
+					value: W,
+					onChange: (e) => G(e.target.value),
+					placeholder: "e.g. Left with front desk, gate code used, etc.",
+					rows: 2
+				})]
+			}),
+			/* @__PURE__ */ A("p", {
+				className: "flex items-center gap-1.5 text-xs text-text-secondary",
+				children: [/* @__PURE__ */ k(n, { size: 12 }), " Device GPS is captured automatically when permitted by the browser."]
+			}),
+			K && /* @__PURE__ */ k(b, { message: K }),
+			w && /* @__PURE__ */ k(b, { message: w.message }),
+			P && /* @__PURE__ */ k(b, { message: P.message }),
+			/* @__PURE__ */ A("div", {
+				className: "flex gap-2 justify-end",
+				children: [/* @__PURE__ */ k(d, {
+					type: "button",
+					variant: "outline",
+					onClick: y,
+					disabled: Y,
+					children: "Cancel"
+				}), /* @__PURE__ */ k(d, {
+					type: "button",
+					onClick: () => void J(),
+					disabled: Y,
+					children: Y ? /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k(t, {
+						size: 14,
+						className: "animate-spin"
+					}), " Submitting…"] }) : /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k(e, { size: 14 }), " Confirm delivery"] })
+				})]
+			})
+		]
+	})] });
+}
+function N() {
+	let { jobs: t, isLoading: n, error: i, refetch: o } = u(), [s, c] = D(null), { message: l, notify: m } = S();
+	return /* @__PURE__ */ k(y, {
+		title: "My Deliveries",
+		subtitle: "Capture proof of delivery for your assigned stops",
+		icon: /* @__PURE__ */ k(a, { size: 24 }),
+		children: /* @__PURE__ */ A("div", {
+			className: "space-y-4",
+			children: [/* @__PURE__ */ k(x, { message: l }), s ? /* @__PURE__ */ k(M, {
+				job: s,
+				onCaptured: () => {
+					m("Proof of delivery captured — delivery marked complete."), c(null), o();
+				},
+				onCancel: () => c(null)
+			}) : n ? /* @__PURE__ */ k("p", {
+				className: "text-text-secondary text-center py-8",
+				children: "Loading your deliveries…"
+			}) : i ? /* @__PURE__ */ k(b, { message: i.message }) : t.length > 0 ? /* @__PURE__ */ k("div", {
+				className: "space-y-3",
+				children: t.map((e) => /* @__PURE__ */ k(f, { children: /* @__PURE__ */ A(p, {
+					className: "flex items-center justify-between gap-3 py-4",
+					children: [/* @__PURE__ */ A("div", {
+						className: "min-w-0",
+						children: [
+							/* @__PURE__ */ A("p", {
+								className: "font-medium flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ k(r, { size: 16 }),
+									" ",
+									e.deliveryJobNumber
+								]
+							}),
+							e.deliveryAddress && /* @__PURE__ */ k("p", {
+								className: "text-sm text-text-secondary truncate",
+								children: C(e.deliveryAddress)
+							}),
+							e.scheduledDelivery && /* @__PURE__ */ A("p", {
+								className: "text-xs text-text-secondary",
+								children: ["Scheduled ", w(e.scheduledDelivery, "short")]
+							})
+						]
+					}), /* @__PURE__ */ k(d, {
+						type: "button",
+						size: "sm",
+						onClick: () => c(e),
+						children: "Capture"
+					})]
+				}) }, e.id))
+			}) : /* @__PURE__ */ A("div", {
+				className: "text-center py-12",
+				children: [/* @__PURE__ */ k(e, {
+					size: 40,
+					className: "mx-auto mb-3 text-text-secondary opacity-50"
+				}), /* @__PURE__ */ k("p", {
+					className: "text-text-secondary",
+					children: "No deliveries awaiting proof of delivery."
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { N as default };

package/dist/pages/MultiModalShipmentPage.js

@@ -0,0 +1,420 @@
+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 { 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";
+//#region src/movethewheels/pages/MultiModalShipmentPage.tsx
+var k = {
+	ROAD: a,
+	AIR: t,
+	OCEAN: r,
+	RAIL: i
+}, A = {
+	ROAD: "Road",
+	AIR: "Air",
+	OCEAN: "Ocean",
+	RAIL: "Rail"
+};
+function j(e = "ROAD") {
+	return {
+		mode: e,
+		origin: {},
+		destination: {}
+	};
+}
+function M(e, t) {
+	if (e == null) return "—";
+	try {
+		return new Intl.NumberFormat("en-US", {
+			style: "currency",
+			currency: t ?? "USD"
+		}).format(e);
+	} catch {
+		return `${e.toFixed(2)} ${t ?? "USD"}`;
+	}
+}
+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 ? {
+			...n,
+			...t
+		} : n)), W((t) => ({
+			...t,
+			[e]: null
+		}));
+	}, ie = () => H((e) => [...e, j()]), ae = (e) => {
+		H((t) => t.filter((t, n) => n !== e)), W((t) => {
+			let n = { ...t };
+			return delete n[e], n;
+		});
+	}, oe = async (e) => {
+		let t = V[e];
+		if (t) {
+			K((t) => ({
+				...t,
+				[e]: null
+			}));
+			try {
+				let n = await N(t);
+				W((t) => ({
+					...t,
+					[e]: n
+				}));
+			} catch (t) {
+				K((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, {
+		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 }),
+		children: [
+			/* @__PURE__ */ T(O, {
+				icon: /* @__PURE__ */ T(r, { 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, {
+				title: "Plan a New Multi-Modal Shipment",
+				children: /* @__PURE__ */ T(c, { children: /* @__PURE__ */ T(l, { children: /* @__PURE__ */ E("form", {
+					onSubmit: async (e) => {
+						if (e.preventDefault(), X(null), Q(null), !F.trim()) {
+							X("Shipment number is required.");
+							return;
+						}
+						if (V.length === 0) {
+							X("Add at least one transport leg.");
+							return;
+						}
+						J(!0);
+						try {
+							let e = await P({
+								shipmentNumber: F.trim(),
+								origin: { address: L },
+								destination: { address: z },
+								legs: V
+							});
+							Q(`Shipment ${e.shipmentNumber} planned with ${e.legs.length} leg(s).`), I(""), R(""), B(""), H([j()]), W({});
+						} catch (e) {
+							X(e instanceof Error ? e.message : "Failed to plan shipment");
+						} finally {
+							J(!1);
+						}
+					},
+					className: "space-y-6 pt-4",
+					children: [
+						/* @__PURE__ */ T(S, { message: Y }),
+						Z && /* @__PURE__ */ T("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", {
+							className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
+							children: [
+								/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, {
+									htmlFor: "shipmentNumber",
+									children: "Shipment Number"
+								}), /* @__PURE__ */ T(f, {
+									id: "shipmentNumber",
+									value: F,
+									onChange: (e) => I(e.target.value),
+									placeholder: "SHP-MM-0001",
+									required: !0
+								})] }),
+								/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, {
+									htmlFor: "originAddress",
+									children: "Origin"
+								}), /* @__PURE__ */ T(f, {
+									id: "originAddress",
+									value: L,
+									onChange: (e) => R(e.target.value),
+									placeholder: "Shanghai, CN"
+								})] }),
+								/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, {
+									htmlFor: "destinationAddress",
+									children: "Destination"
+								}), /* @__PURE__ */ T(f, {
+									id: "destinationAddress",
+									value: z,
+									onChange: (e) => B(e.target.value),
+									placeholder: "Los Angeles, US"
+								})] })
+							]
+						}),
+						/* @__PURE__ */ T(te, {}),
+						/* @__PURE__ */ T("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, {
+									className: "border-border-subtle",
+									children: [/* @__PURE__ */ E(u, {
+										className: "flex flex-row items-center justify-between",
+										children: [/* @__PURE__ */ E(d, {
+											className: "flex items-center gap-2 text-base",
+											children: [
+												/* @__PURE__ */ T(r, { size: 16 }),
+												" Leg ",
+												n + 1
+											]
+										}), V.length > 1 && /* @__PURE__ */ T(s, {
+											type: "button",
+											variant: "ghost",
+											size: "sm",
+											onClick: () => ae(n),
+											"aria-label": `Remove leg ${n + 1}`,
+											children: /* @__PURE__ */ T(ee, { size: 14 })
+										})]
+									}), /* @__PURE__ */ E(l, {
+										className: "space-y-4",
+										children: [
+											/* @__PURE__ */ E("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, {
+														value: t.mode,
+														onValueChange: (e) => $(n, { mode: e }),
+														children: [/* @__PURE__ */ T(_, { children: /* @__PURE__ */ T(v, {}) }), /* @__PURE__ */ T(h, { children: [
+															"ROAD",
+															"AIR",
+															"OCEAN",
+															"RAIL"
+														].map((e) => /* @__PURE__ */ T(g, {
+															value: e,
+															children: A[e]
+														}, e)) })]
+													})] }),
+													/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Leg Origin" }), /* @__PURE__ */ T(f, {
+														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, {
+														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", {
+												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, {
+													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, {
+													type: "number",
+													min: 0,
+													value: t.weightKg ?? "",
+													onChange: (e) => $(n, { weightKg: Number(e.target.value) || void 0 })
+												})] })]
+											}),
+											t.mode === "AIR" && /* @__PURE__ */ E("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, {
+														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, {
+														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, {
+														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, {
+														type: "number",
+														min: 0,
+														value: t.heightCm ?? "",
+														onChange: (e) => $(n, { heightCm: Number(e.target.value) || void 0 })
+													})] })
+												]
+											}),
+											t.mode === "OCEAN" && /* @__PURE__ */ E("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, {
+													value: t.containerType ?? "LCL",
+													onValueChange: (e) => $(n, { containerType: e }),
+													children: [/* @__PURE__ */ T(_, { children: /* @__PURE__ */ T(v, {}) }), /* @__PURE__ */ E(h, { children: [
+														/* @__PURE__ */ T(g, {
+															value: "LCL",
+															children: "LCL (shared container)"
+														}),
+														/* @__PURE__ */ T(g, {
+															value: "FCL_20FT",
+															children: "FCL 20ft"
+														}),
+														/* @__PURE__ */ T(g, {
+															value: "FCL_40FT",
+															children: "FCL 40ft"
+														}),
+														/* @__PURE__ */ T(g, {
+															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, {
+													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, {
+													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, {
+													type: "number",
+													min: 1,
+													value: t.containerCount ?? 1,
+													onChange: (e) => $(n, { containerCount: Number(e.target.value) || 1 })
+												})] })]
+											}),
+											/* @__PURE__ */ E("div", {
+												className: "flex items-center gap-3",
+												children: [
+													/* @__PURE__ */ E(s, {
+														type: "button",
+														variant: "secondary",
+														size: "sm",
+														onClick: () => void oe(n),
+														children: [/* @__PURE__ */ T(e, {
+															size: 14,
+															className: "mr-1.5"
+														}), " Calculate Rate"]
+													}),
+													i && /* @__PURE__ */ E("span", {
+														className: "text-sm font-medium text-text-primary",
+														children: [M(i.calculatedCost, i.currency), i.chargeableWeightKg != null && /* @__PURE__ */ E("span", {
+															className: "ml-2 text-xs text-text-secondary",
+															children: [
+																"(",
+																i.chargeableWeightKg.toFixed(1),
+																"kg chargeable)"
+															]
+														})]
+													}),
+													a && /* @__PURE__ */ T("span", {
+														className: "text-sm text-status-error-text",
+														children: a
+													})
+												]
+											}),
+											i && i.breakdown.length > 0 && /* @__PURE__ */ T("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", {
+													className: "flex justify-between",
+													children: [/* @__PURE__ */ T("span", { children: e.label }), /* @__PURE__ */ T("span", { children: M(e.amount, i.currency) })]
+												}, e.label))
+											})
+										]
+									})]
+								}, n);
+							})
+						}),
+						/* @__PURE__ */ E("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ E(s, {
+								type: "button",
+								variant: "outline",
+								size: "sm",
+								onClick: ie,
+								children: [/* @__PURE__ */ T(n, {
+									size: 14,
+									className: "mr-1.5"
+								}), " Add Leg"]
+							}), /* @__PURE__ */ E("div", {
+								className: "flex items-center gap-3",
+								children: [ce.size > 1 && /* @__PURE__ */ T(o, {
+									variant: "secondary",
+									children: "Multi-modal"
+								}), /* @__PURE__ */ E("span", {
+									className: "text-sm text-text-secondary",
+									children: [
+										"Estimated total:",
+										" ",
+										/* @__PURE__ */ T("strong", { children: M(se, U[0]?.currency ?? "USD") })
+									]
+								})]
+							})]
+						}),
+						/* @__PURE__ */ T(s, {
+							type: "submit",
+							disabled: q,
+							children: q ? "Planning shipment..." : "Plan Shipment"
+						})
+					]
+				}) }) })
+			}),
+			/* @__PURE__ */ T(x, {
+				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 }),
+					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", {
+					className: "space-y-4",
+					children: t.map((e) => /* @__PURE__ */ E(c, { children: [/* @__PURE__ */ E(u, {
+						className: "flex flex-row items-center justify-between",
+						children: [/* @__PURE__ */ T(d, {
+							className: "text-base",
+							children: e.shipmentNumber
+						}), /* @__PURE__ */ E("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ T(o, {
+								variant: "outline",
+								children: e.status
+							}), /* @__PURE__ */ T("span", {
+								className: "text-sm font-medium",
+								children: M(e.totalFreightCost, e.freightCurrency)
+							})]
+						})]
+					}), /* @__PURE__ */ T(l, { children: /* @__PURE__ */ T("div", {
+						className: "flex flex-wrap gap-2",
+						children: e.legs.map((e) => {
+							let t = k[e.mode];
+							return /* @__PURE__ */ E(o, {
+								variant: "secondary",
+								className: "flex items-center gap-1",
+								children: [
+									/* @__PURE__ */ T(t, { size: 12 }),
+									" ",
+									A[e.mode],
+									":",
+									" ",
+									M(e.calculatedCost, e.currency)
+								]
+							}, e.id);
+						})
+					}) })] }, e.id))
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { N as default };