@burdenoff/microfe-movethewheels 2026.924.2 → 2026.925.1

package/dist/pages/CreateOrderPage.js

@@ -1,106 +1,107 @@
 import { ArrowLeft as e } from "../node_modules/lucide-react/dist/esm/icons/arrow-left.js";
-import { CalendarClock as t } from "../node_modules/lucide-react/dist/esm/icons/calendar-clock.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 { Plus as i } from "../node_modules/lucide-react/dist/esm/icons/plus.js";
-import { Route as a } from "../node_modules/lucide-react/dist/esm/icons/route.js";
+import { ArrowRight as t } from "../node_modules/lucide-react/dist/esm/icons/arrow-right.js";
+import { CalendarClock as n } from "../node_modules/lucide-react/dist/esm/icons/calendar-clock.js";
+import { MapPin as r } from "../node_modules/lucide-react/dist/esm/icons/map-pin.js";
+import { Package as i } from "../node_modules/lucide-react/dist/esm/icons/package.js";
+import { Plus as a } from "../node_modules/lucide-react/dist/esm/icons/plus.js";
 import { Save as ee } from "../node_modules/lucide-react/dist/esm/icons/save.js";
 import { Users as te } from "../node_modules/lucide-react/dist/esm/icons/users.js";
 import { buildCustomerCreatePath as ne, joinPath as o } from "../utils/navigation.js";
 import { useMoveTheWheels as s } from "../providers/MoveTheWheelsProvider.js";
-import { useRoute as c, useRoutes as l } from "../hooks/useRoutes.js";
-import { useOrder as re, useOrders as ie } from "../hooks/useOrders.js";
-import { useProducts as ae } from "../hooks/useInventory.js";
-import { useCustomer as oe, useCustomers as se } from "../hooks/useCustomers.js";
-import { Button as u, Card as d, CardContent as f, CardHeader as p, CardTitle as m, Input as h, Label as g, Select as ce, SelectContent as le, SelectItem as _, SelectTrigger as v, SelectValue as ue, Textarea as de } from "../components/ui.js";
-import { EmptyState as fe, PageLayout as pe } from "../components/PageLayout.js";
-import { FormError as me } from "../components/FormError.js";
-import { EntityCombobox as he } from "../components/EntityCombobox.js";
-import { CustomerPicker as ge } from "../components/CustomerPicker.js";
-import { OrderItemRow as _e } from "../components/OrderItemRow.js";
-import { useEffect as y, useState as b } from "react";
-import { useParams as ve, useSearchParams as ye } from "react-router";
-import { Fragment as be, jsx as x, jsxs as S } from "react/jsx-runtime";
-import { EmphasisPanel as xe, NextSteps as Se, PagePurpose as Ce } from "@burdenoff/fe-libs/ui";
+import { useRoute as re, useRoutes as ie } from "../hooks/useRoutes.js";
+import { useOrder as ae, useOrders as oe } from "../hooks/useOrders.js";
+import { useProducts as se } from "../hooks/useInventory.js";
+import { useCustomer as ce, useCustomers as le } from "../hooks/useCustomers.js";
+import { Badge as c, Button as l, Card as u, CardContent as d, CardDescription as f, CardHeader as p, CardTitle as m, Input as h, Label as g, Select as ue, SelectContent as de, SelectItem as _, SelectTrigger as fe, SelectValue as pe, Separator as me, Textarea as he } from "../components/ui.js";
+import { EmptyState as ge, PageLayout as _e } from "../components/PageLayout.js";
+import { FormError as ve } from "../components/FormError.js";
+import { EntityCombobox as ye } from "../components/EntityCombobox.js";
+import { CustomerPicker as v } from "../components/CustomerPicker.js";
+import { OrderItemRow as y } from "../components/OrderItemRow.js";
+import { useEffect as b, useState as x } from "react";
+import { useParams as be, useSearchParams as xe } from "react-router";
+import { Fragment as Se, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { EmphasisPanel as Ce, PagePurpose as we, Stepper as Te } from "@burdenoff/fe-libs/ui";
+import { FormSection as w } from "@burdenoff/fe-libs/form";
 //#region src/movethewheels/pages/CreateOrderPage.tsx
-function C(e) {
+function T(e) {
 	if (!e || Number.isNaN(e.getTime())) return "";
 	let t = (e) => String(e).padStart(2, "0");
 	return `${e.getFullYear()}-${t(e.getMonth() + 1)}-${t(e.getDate())}T${t(e.getHours())}:${t(e.getMinutes())}`;
 }
-function w() {
-	let { orderId: w } = ve(), [T] = ye(), E = T.get("customerId")?.trim() || void 0, { basePath: D, navigate: O } = s(), { order: k } = re(w), { createOrder: A, updateOrder: we } = ie(), [Te, Ee] = b(""), { customers: j, createCustomer: M, isLoading: N, error: P, refetch: De } = se({
+function E() {
+	let { orderId: E } = be(), [D] = xe(), O = D.get("customerId")?.trim() || void 0, { basePath: k, navigate: A } = s(), { order: j } = ae(E), { createOrder: Ee, updateOrder: De } = oe(), [Oe, ke] = x(""), { customers: M, createCustomer: Ae, isLoading: N, error: P, refetch: je } = le({
 		limit: 20,
-		filters: { search: Te || void 0 }
-	}), { customer: F } = oe(E ?? k?.customerId), [Oe, ke] = b(""), { routes: I, isLoading: L, error: R, hasMore: Ae, totalRoutes: je } = l({
+		filters: { search: Oe || void 0 }
+	}), { customer: F } = ce(O ?? j?.customerId), [Me, Ne] = x(""), { routes: I, isLoading: L, error: R, hasMore: Pe, totalRoutes: Fe } = ie({
 		status: "planned",
-		search: Oe || void 0,
+		search: Me || void 0,
 		limit: 20
-	}), [z, Me] = b(""), { products: Ne, isLoading: Pe } = ae({
+	}), [z, Ie] = x(""), { products: Le, isLoading: Re } = se({
 		search: z || void 0,
 		limit: 20
-	}), B = !!w && !!k, [V, H] = b(null), [U, W] = b({
-		customerId: E || k?.customerId || "",
-		priority: k?.priority || "normal",
-		routeId: k?.routeId || "",
+	}), B = !!E && !!j, [V, H] = x(null), [U, W] = x({
+		customerId: O || j?.customerId || "",
+		priority: j?.priority || "normal",
+		routeId: j?.routeId || "",
 		pickupAddress: {
-			street: k?.pickupAddress.street || "",
-			city: k?.pickupAddress.city || "",
-			state: k?.pickupAddress.state || "",
-			postalCode: k?.pickupAddress.postalCode || "",
-			country: k?.pickupAddress.country || "USA"
+			street: j?.pickupAddress.street || "",
+			city: j?.pickupAddress.city || "",
+			state: j?.pickupAddress.state || "",
+			postalCode: j?.pickupAddress.postalCode || "",
+			country: j?.pickupAddress.country || "USA"
 		},
 		deliveryAddress: {
-			street: k?.deliveryAddress.street || "",
-			city: k?.deliveryAddress.city || "",
-			state: k?.deliveryAddress.state || "",
-			postalCode: k?.deliveryAddress.postalCode || "",
-			country: k?.deliveryAddress.country || "USA"
+			street: j?.deliveryAddress.street || "",
+			city: j?.deliveryAddress.city || "",
+			state: j?.deliveryAddress.state || "",
+			postalCode: j?.deliveryAddress.postalCode || "",
+			country: j?.deliveryAddress.country || "USA"
 		},
-		items: k?.items || [],
-		scheduledDelivery: C(k?.scheduledDelivery),
-		specialInstructions: k?.specialInstructions || ""
-	}), { route: Fe, isLoading: Ie } = c(U.routeId || void 0), [G, K] = b(!1), [Le, q] = b(null);
-	y(() => {
+		items: j?.items || [],
+		scheduledDelivery: T(j?.scheduledDelivery),
+		specialInstructions: j?.specialInstructions || ""
+	}), { route: ze, isLoading: Be } = re(U.routeId || void 0), [G, K] = x(!1), [Ve, q] = x(null);
+	b(() => {
 		F && (H((e) => e?.id === F.id ? e : F), W((e) => e.customerId ? e : {
 			...e,
 			customerId: F.id
 		}));
-	}, [F]), y(() => {
-		k && W({
-			customerId: k.customerId || "",
-			priority: k.priority || "normal",
-			routeId: k.routeId || "",
+	}, [F]), b(() => {
+		j && W({
+			customerId: j.customerId || "",
+			priority: j.priority || "normal",
+			routeId: j.routeId || "",
 			pickupAddress: {
-				street: k.pickupAddress.street || "",
-				city: k.pickupAddress.city || "",
-				state: k.pickupAddress.state || "",
-				postalCode: k.pickupAddress.postalCode || "",
-				country: k.pickupAddress.country || "USA"
+				street: j.pickupAddress.street || "",
+				city: j.pickupAddress.city || "",
+				state: j.pickupAddress.state || "",
+				postalCode: j.pickupAddress.postalCode || "",
+				country: j.pickupAddress.country || "USA"
 			},
 			deliveryAddress: {
-				street: k.deliveryAddress.street || "",
-				city: k.deliveryAddress.city || "",
-				state: k.deliveryAddress.state || "",
-				postalCode: k.deliveryAddress.postalCode || "",
-				country: k.deliveryAddress.country || "USA"
+				street: j.deliveryAddress.street || "",
+				city: j.deliveryAddress.city || "",
+				state: j.deliveryAddress.state || "",
+				postalCode: j.deliveryAddress.postalCode || "",
+				country: j.deliveryAddress.country || "USA"
 			},
-			items: k.items || [],
-			scheduledDelivery: C(k.scheduledDelivery),
-			specialInstructions: k.specialInstructions || ""
+			items: j.items || [],
+			scheduledDelivery: T(j.scheduledDelivery),
+			specialInstructions: j.specialInstructions || ""
 		});
-	}, [k]);
+	}, [j]);
 	let J = () => {
-		if (O) {
-			if (!B && E) {
-				O(o(D, `customers/${E}`));
+		if (A) {
+			if (!B && O) {
+				A(o(k, `customers/${O}`));
 				return;
 			}
-			O(o(D, "orders"));
+			A(o(k, "orders"));
 		}
-	}, Y = () => V ?? j.find((e) => e.id === U.customerId), Re = () => !U.customerId || !Y() ? P ? "Customers could not be loaded. Retry or create a customer before continuing." : "Select a customer for this order." : U.pickupAddress.street.trim() ? U.deliveryAddress.street.trim() ? U.items.length === 0 ? "Add at least one item to the order." : U.scheduledDelivery && Number.isNaN(Date.parse(U.scheduledDelivery)) ? "Enter a valid scheduled delivery date and time." : null : "Enter a delivery street address." : "Enter a pickup street address.", X = async (e) => {
+	}, Y = () => V ?? M.find((e) => e.id === U.customerId), He = () => !U.customerId || !Y() ? P ? "Customers could not be loaded. Retry or create a customer before continuing." : "Select a customer for this order." : U.pickupAddress.street.trim() ? U.deliveryAddress.street.trim() ? U.items.length === 0 ? "Add at least one item to the order." : U.scheduledDelivery && Number.isNaN(Date.parse(U.scheduledDelivery)) ? "Enter a valid scheduled delivery date and time." : null : "Enter a delivery street address." : "Enter a pickup street address.", X = async (e) => {
 		e.preventDefault(), q(null);
-		let t = Re();
+		let t = He();
 		if (t) {
 			q(t);
 			return;
@@ -128,7 +129,11 @@ function w() {
 				routeId: U.routeId || void 0,
 				specialInstructions: U.specialInstructions
 			};
-			B && w ? (await we(w, e), O && O(o(D, `orders/${w}`))) : (await A(e), J());
+			if (B && E) await De(E, e), A && A(o(k, `orders/${E}`));
+			else {
+				let t = await Ee(e);
+				A ? A(o(k, `orders/${t.id}`)) : J();
+			}
 		} catch (e) {
 			q(e instanceof Error ? e.message : B ? "Could not update the order. Please try again." : "Could not create the order. Please try again.");
 		} finally {
@@ -147,7 +152,7 @@ function w() {
 				[t]: n
 			}
 		}));
-	}, ze = (e) => {
+	}, Ue = (e) => {
 		if (!e) {
 			Z("routeId", "");
 			return;
@@ -186,12 +191,12 @@ function w() {
 				sku: ""
 			}]
 		}));
-	}, Be = (e) => {
+	}, We = (e) => {
 		W((t) => ({
 			...t,
 			items: t.items.filter((t, n) => n !== e)
 		}));
-	}, Ve = (e, t, n) => {
+	}, Ge = (e, t, n) => {
 		W((r) => ({
 			...r,
 			items: r.items.map((r, i) => i === e ? {
@@ -199,388 +204,560 @@ function w() {
 				[t]: n
 			} : r)
 		}));
-	};
-	return /* @__PURE__ */ S(pe, {
+	}, Ke = () => {
+		A && A(o(k, ne(B && E ? `orders/${E}/edit` : "orders/new")));
+	}, qe = U.customerId ? !U.pickupAddress.street || !U.deliveryAddress.street ? 1 : U.items.length === 0 ? 2 : 3 : 0;
+	return /* @__PURE__ */ C(_e, {
 		title: B ? "Edit Order" : "Create Order",
-		subtitle: B ? `Editing ${k?.orderNumber}` : "Create a new delivery order",
-		icon: /* @__PURE__ */ x(r, { size: 24 }),
-		headerActions: /* @__PURE__ */ S("div", {
-			className: "flex gap-2",
-			children: [/* @__PURE__ */ S(u, {
+		subtitle: B ? `Editing ${j?.orderNumber}` : "Create a new delivery order",
+		icon: /* @__PURE__ */ S(i, { size: 24 }),
+		maxWidth: "2xl",
+		headerActions: /* @__PURE__ */ C("div", {
+			className: "flex w-full flex-col-reverse gap-2 sm:w-auto sm:flex-row",
+			children: [/* @__PURE__ */ C(l, {
+				type: "button",
 				variant: "outline",
 				onClick: J,
-				children: [/* @__PURE__ */ x(e, { size: 16 }), "Cancel"]
-			}), /* @__PURE__ */ S(u, {
-				onClick: X,
+				disabled: G,
+				children: [/* @__PURE__ */ S(e, { size: 16 }), "Cancel"]
+			}), /* @__PURE__ */ C(l, {
+				type: "submit",
+				form: "order-form",
 				disabled: G || N,
-				children: [/* @__PURE__ */ x(ee, { size: 16 }), G ? "Saving..." : B ? "Save Changes" : "Create Order"]
+				children: [/* @__PURE__ */ S(ee, { size: 16 }), G ? "Saving..." : B ? "Save Changes" : "Create Order"]
 			})]
 		}),
 		children: [
-			/* @__PURE__ */ x(Ce, {
-				icon: /* @__PURE__ */ x(r, { size: 18 }),
-				children: B ? "Update this delivery before it goes out — change the customer, addresses, items or handling notes, then save." : "Book a new delivery in a few steps: choose who it’s for, set pickup and drop-off addresses, list what’s being shipped, and add any handling notes. Once created it joins the orders pipeline ready to assign and track."
+			/* @__PURE__ */ S(we, {
+				icon: /* @__PURE__ */ S(i, { size: 18 }),
+				children: B ? "Update the customer, delivery plan, shipment contents, or handling details before saving." : "Set the customer and delivery plan, add what is being shipped, then choose any timing or handling preferences."
 			}),
-			/* @__PURE__ */ x(Se, {
-				storageKey: "movethewheels-create-order",
+			/* @__PURE__ */ S(Te, {
 				steps: [
 					{
-						id: "customer",
-						label: "Pick the customer first",
-						description: "Their saved contact details auto-fill the order.",
-						icon: /* @__PURE__ */ x(te, { size: 16 }),
-						done: !!U.customerId,
-						onClick: () => document.getElementById("customer")?.focus()
+						key: "customer",
+						label: "Customer & priority",
+						description: "Who is receiving this delivery?"
+					},
+					{
+						key: "locations",
+						label: "Route & addresses",
+						description: "Where should it be collected and delivered?"
 					},
 					{
-						id: "addresses",
-						label: "Set pickup & delivery addresses",
-						description: "Where the shipment is collected and dropped off.",
-						icon: /* @__PURE__ */ x(n, { size: 16 }),
-						done: !!U.pickupAddress.street && !!U.deliveryAddress.street,
-						onClick: () => document.getElementById("pickupStreet")?.focus()
+						key: "items",
+						label: "Shipment contents",
+						description: "What is being shipped?"
 					},
 					{
-						id: "items",
-						label: "Add the items to ship",
-						description: "List each product with its quantity and value.",
-						icon: /* @__PURE__ */ x(r, { size: 16 }),
-						done: U.items.length > 0,
-						onClick: $
+						key: "preferences",
+						label: "Timing & handling",
+						description: "Add optional delivery instructions."
 					}
-				]
+				],
+				active: qe,
+				onStepClick: (e) => {
+					let t = document.getElementById([
+						"customer",
+						"pickupStreet",
+						"items-section",
+						"scheduledDelivery"
+					][e]);
+					if (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement) {
+						t.focus();
+						return;
+					}
+					t?.scrollIntoView({
+						behavior: "smooth",
+						block: "start"
+					});
+				},
+				allowSkipAhead: !0
 			}),
-			/* @__PURE__ */ S("form", {
+			/* @__PURE__ */ C("form", {
+				id: "order-form",
 				onSubmit: X,
 				className: "space-y-6",
 				children: [
-					/* @__PURE__ */ x(me, { message: Le }),
-					/* @__PURE__ */ S(xe, { children: [/* @__PURE__ */ x("h2", {
-						className: "text-base font-semibold text-text-primary mb-4",
-						children: "Order Details"
-					}), /* @__PURE__ */ x("div", {
-						className: "space-y-4",
-						children: /* @__PURE__ */ S("div", {
-							className: "grid grid-cols-1 md:grid-cols-2 gap-4",
-							children: [/* @__PURE__ */ x(ge, {
-								customers: j,
-								value: U.customerId,
-								onValueChange: (e) => {
-									e && (Z("customerId", e), H(j.find((t) => t.id === e) ?? (V?.id === e ? V : null)), q(null));
-								},
-								onCreated: (e) => {
-									H(e), Z("customerId", e.id), q(null);
-								},
-								createCustomer: M,
-								isLoading: N,
-								error: P,
-								onRetry: De,
-								onOpenCustomers: () => {
-									O && O(o(D, ne(B && w ? `orders/${w}/edit` : "orders/new")));
-								},
-								selectedCustomer: V,
-								onSearchQueryChange: Ee
-							}), /* @__PURE__ */ S("div", {
-								className: "space-y-2",
-								children: [/* @__PURE__ */ x(g, {
-									htmlFor: "priority",
-									children: "Priority"
-								}), /* @__PURE__ */ S(ce, {
-									value: U.priority,
-									onValueChange: (e) => Z("priority", e),
-									children: [/* @__PURE__ */ x(v, {
-										id: "priority",
-										children: /* @__PURE__ */ x(ue, {})
-									}), /* @__PURE__ */ S(le, { children: [
-										/* @__PURE__ */ x(_, {
-											value: "low",
-											children: "Low"
-										}),
-										/* @__PURE__ */ x(_, {
-											value: "normal",
-											children: "Normal"
+					/* @__PURE__ */ S(ve, { message: Ve }),
+					/* @__PURE__ */ S("section", {
+						"aria-labelledby": "order-details-title",
+						children: /* @__PURE__ */ C(Ce, {
+							className: "space-y-5",
+							children: [/* @__PURE__ */ C("div", {
+								className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
+								children: [/* @__PURE__ */ C("div", {
+									className: "flex items-start gap-3",
+									children: [/* @__PURE__ */ S("div", {
+										className: "rounded-xl bg-action-primary-bg/10 p-2 text-action-primary-bg",
+										children: /* @__PURE__ */ S(te, {
+											size: 18,
+											"aria-hidden": "true"
+										})
+									}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h2", {
+										id: "order-details-title",
+										className: "text-base font-semibold text-text-primary",
+										children: "Customer & priority"
+									}), /* @__PURE__ */ S("p", {
+										className: "mt-1 text-sm text-text-secondary",
+										children: "Choose who this delivery is for and how urgently it should be handled."
+									})] })]
+								}), /* @__PURE__ */ S(c, {
+									variant: "outline",
+									children: "Required"
+								})]
+							}), /* @__PURE__ */ C("div", {
+								className: "grid grid-cols-1 gap-4 md:grid-cols-2",
+								children: [/* @__PURE__ */ S(v, {
+									customers: M,
+									value: U.customerId,
+									onValueChange: (e) => {
+										e && (Z("customerId", e), H(M.find((t) => t.id === e) ?? (V?.id === e ? V : null)), q(null));
+									},
+									onCreated: (e) => {
+										H(e), Z("customerId", e.id), q(null);
+									},
+									createCustomer: Ae,
+									isLoading: N,
+									error: P,
+									onRetry: je,
+									onOpenCustomers: Ke,
+									selectedCustomer: V,
+									onSearchQueryChange: ke
+								}), /* @__PURE__ */ C("div", {
+									className: "space-y-2",
+									children: [
+										/* @__PURE__ */ S(g, {
+											htmlFor: "priority",
+											children: "Priority"
 										}),
-										/* @__PURE__ */ x(_, {
-											value: "high",
-											children: "High"
+										/* @__PURE__ */ C(ue, {
+											value: U.priority,
+											onValueChange: (e) => Z("priority", e),
+											children: [/* @__PURE__ */ S(fe, {
+												id: "priority",
+												children: /* @__PURE__ */ S(pe, {})
+											}), /* @__PURE__ */ C(de, { children: [
+												/* @__PURE__ */ S(_, {
+													value: "low",
+													children: "Low"
+												}),
+												/* @__PURE__ */ S(_, {
+													value: "normal",
+													children: "Normal"
+												}),
+												/* @__PURE__ */ S(_, {
+													value: "high",
+													children: "High"
+												}),
+												/* @__PURE__ */ S(_, {
+													value: "urgent",
+													children: "Urgent"
+												})
+											] })]
 										}),
-										/* @__PURE__ */ x(_, {
-											value: "urgent",
-											children: "Urgent"
+										/* @__PURE__ */ S("p", {
+											className: "text-xs text-text-secondary",
+											children: "Normal is selected by default."
 										})
-									] })]
+									]
 								})]
 							})]
 						})
-					})] }),
-					/* @__PURE__ */ S(d, { children: [/* @__PURE__ */ x(p, { children: /* @__PURE__ */ S(m, {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ x(a, { size: 18 }), "Saved Route (Optional)"]
-					}) }), /* @__PURE__ */ S(f, {
-						className: "space-y-2",
-						children: [/* @__PURE__ */ x(he, {
-							id: "saved-route",
-							value: U.routeId,
-							onChange: ze,
-							options: I,
-							loading: L,
-							getId: (e) => e.id,
-							getLabel: (e) => `${e.name} · ${e.stops.length} stops`,
-							renderOption: (e) => /* @__PURE__ */ S(be, { children: [
-								e.name,
-								" · ",
-								e.stops.length,
-								" stops"
-							] }),
-							selectedOption: Fe,
-							selectedLoading: Ie,
-							placeholder: "Choose a saved route",
-							searchPlaceholder: "Search saved routes",
-							emptyText: "No saved routes found.",
-							noneLabel: "No saved route",
-							error: R ? "Saved routes are unavailable" : void 0,
-							onSearchChange: ke,
-							hasMore: Ae,
-							totalCount: je
-						}), /* @__PURE__ */ x("p", {
-							className: "text-xs text-text-secondary",
-							children: L ? "Loading planned routes…" : R ? "Saved routes are unavailable; enter pickup and delivery addresses manually." : "A saved route fills any blank address fields. You can always edit both addresses below."
-						})]
-					})] }),
+					}),
 					/* @__PURE__ */ S("div", {
-						className: "grid grid-cols-1 md:grid-cols-2 gap-6",
-						children: [/* @__PURE__ */ S(d, { children: [/* @__PURE__ */ x(p, { children: /* @__PURE__ */ x(m, { children: "Pickup Address" }) }), /* @__PURE__ */ S(f, {
-							className: "space-y-4",
+						id: "locations-section",
+						children: /* @__PURE__ */ C(w, {
+							title: /* @__PURE__ */ C("span", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ S(r, {
+									size: 18,
+									"aria-hidden": "true"
+								}), "Route & addresses"]
+							}),
+							description: "Choose an optional saved route, then review or enter the collection and destination details.",
 							children: [
-								/* @__PURE__ */ S("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ x(g, {
-										htmlFor: "pickupStreet",
-										children: "Street Address"
-									}), /* @__PURE__ */ x(h, {
-										id: "pickupStreet",
-										value: U.pickupAddress.street,
-										onChange: (e) => Q("pickupAddress", "street", e.target.value),
-										placeholder: "123 Main St"
-									})]
-								}),
-								/* @__PURE__ */ S("div", {
-									className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
-									children: [/* @__PURE__ */ S("div", {
-										className: "space-y-2",
-										children: [/* @__PURE__ */ x(g, {
-											htmlFor: "pickupCity",
-											children: "City"
-										}), /* @__PURE__ */ x(h, {
-											id: "pickupCity",
-											value: U.pickupAddress.city,
-											onChange: (e) => Q("pickupAddress", "city", e.target.value),
-											placeholder: "San Francisco"
-										})]
-									}), /* @__PURE__ */ S("div", {
-										className: "space-y-2",
-										children: [/* @__PURE__ */ x(g, {
-											htmlFor: "pickupState",
-											children: "State"
-										}), /* @__PURE__ */ x(h, {
-											id: "pickupState",
-											value: U.pickupAddress.state,
-											onChange: (e) => Q("pickupAddress", "state", e.target.value),
-											placeholder: "CA"
-										})]
-									})]
-								}),
-								/* @__PURE__ */ S("div", {
-									className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
-									children: [/* @__PURE__ */ S("div", {
-										className: "space-y-2",
-										children: [/* @__PURE__ */ x(g, {
-											htmlFor: "pickupPostal",
-											children: "Postal Code"
-										}), /* @__PURE__ */ x(h, {
-											id: "pickupPostal",
-											value: U.pickupAddress.postalCode,
-											onChange: (e) => Q("pickupAddress", "postalCode", e.target.value),
-											placeholder: "94103"
-										})]
-									}), /* @__PURE__ */ S("div", {
-										className: "space-y-2",
-										children: [/* @__PURE__ */ x(g, {
-											htmlFor: "pickupCountry",
-											children: "Country"
-										}), /* @__PURE__ */ x(h, {
-											id: "pickupCountry",
-											value: U.pickupAddress.country,
-											onChange: (e) => Q("pickupAddress", "country", e.target.value),
-											placeholder: "USA"
-										})]
-									})]
-								})
-							]
-						})] }), /* @__PURE__ */ S(d, { children: [/* @__PURE__ */ x(p, { children: /* @__PURE__ */ x(m, { children: "Delivery Address" }) }), /* @__PURE__ */ S(f, {
-							className: "space-y-4",
-							children: [
-								/* @__PURE__ */ S("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ x(g, {
-										htmlFor: "deliveryStreet",
-										children: "Street Address"
-									}), /* @__PURE__ */ x(h, {
-										id: "deliveryStreet",
-										value: U.deliveryAddress.street,
-										onChange: (e) => Q("deliveryAddress", "street", e.target.value),
-										placeholder: "456 Oak Ave"
-									})]
-								}),
-								/* @__PURE__ */ S("div", {
-									className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
-									children: [/* @__PURE__ */ S("div", {
-										className: "space-y-2",
-										children: [/* @__PURE__ */ x(g, {
-											htmlFor: "deliveryCity",
-											children: "City"
-										}), /* @__PURE__ */ x(h, {
-											id: "deliveryCity",
-											value: U.deliveryAddress.city,
-											onChange: (e) => Q("deliveryAddress", "city", e.target.value),
-											placeholder: "Los Angeles"
-										})]
-									}), /* @__PURE__ */ S("div", {
-										className: "space-y-2",
-										children: [/* @__PURE__ */ x(g, {
-											htmlFor: "deliveryState",
-											children: "State"
-										}), /* @__PURE__ */ x(h, {
-											id: "deliveryState",
-											value: U.deliveryAddress.state,
-											onChange: (e) => Q("deliveryAddress", "state", e.target.value),
-											placeholder: "CA"
-										})]
-									})]
+								/* @__PURE__ */ C("div", {
+									className: "rounded-card border border-border-subtle bg-bg-sunken/40 p-4",
+									children: [
+										/* @__PURE__ */ C("div", {
+											className: "mb-3 flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between",
+											children: [/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h3", {
+												className: "text-sm font-semibold text-text-primary",
+												children: "Use a saved route"
+											}), /* @__PURE__ */ S("p", {
+												className: "mt-1 text-xs text-text-secondary",
+												children: "Optional — fills only blank address fields; you can always edit them below."
+											})] }), /* @__PURE__ */ S(c, {
+												variant: "secondary",
+												children: "Optional"
+											})]
+										}),
+										/* @__PURE__ */ S(ye, {
+											id: "saved-route",
+											value: U.routeId,
+											onChange: Ue,
+											options: I,
+											loading: L,
+											getId: (e) => e.id,
+											getLabel: (e) => `${e.name} · ${e.stops.length} stops`,
+											renderOption: (e) => /* @__PURE__ */ C(Se, { children: [
+												e.name,
+												" · ",
+												e.stops.length,
+												" stops"
+											] }),
+											selectedOption: ze,
+											selectedLoading: Be,
+											placeholder: "Choose a saved route",
+											searchPlaceholder: "Search saved routes",
+											emptyText: "No saved routes found.",
+											noneLabel: "No saved route",
+											error: R ? "Saved routes are unavailable" : void 0,
+											onSearchChange: Ne,
+											hasMore: Pe,
+											totalCount: Fe
+										}),
+										/* @__PURE__ */ S("p", {
+											className: "mt-2 text-xs text-text-secondary",
+											role: "status",
+											children: L ? "Loading planned routes…" : R ? "Saved routes are unavailable; enter pickup and delivery addresses manually." : "Manual values always remain authoritative when a route is selected."
+										})
+									]
 								}),
-								/* @__PURE__ */ S("div", {
-									className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
-									children: [/* @__PURE__ */ S("div", {
-										className: "space-y-2",
-										children: [/* @__PURE__ */ x(g, {
-											htmlFor: "deliveryPostal",
-											children: "Postal Code"
-										}), /* @__PURE__ */ x(h, {
-											id: "deliveryPostal",
-											value: U.deliveryAddress.postalCode,
-											onChange: (e) => Q("deliveryAddress", "postalCode", e.target.value),
-											placeholder: "90210"
-										})]
-									}), /* @__PURE__ */ S("div", {
-										className: "space-y-2",
-										children: [/* @__PURE__ */ x(g, {
-											htmlFor: "deliveryCountry",
-											children: "Country"
-										}), /* @__PURE__ */ x(h, {
-											id: "deliveryCountry",
-											value: U.deliveryAddress.country,
-											onChange: (e) => Q("deliveryAddress", "country", e.target.value),
-											placeholder: "USA"
-										})]
-									})]
+								/* @__PURE__ */ S(me, {}),
+								/* @__PURE__ */ C("div", {
+									className: "grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] lg:items-stretch",
+									children: [
+										/* @__PURE__ */ C(u, {
+											className: "border-border-seam shadow-none",
+											children: [/* @__PURE__ */ C(p, { children: [/* @__PURE__ */ C(m, {
+												className: "flex items-center gap-2 text-base",
+												children: [
+													/* @__PURE__ */ S(r, {
+														size: 17,
+														className: "text-text-secondary",
+														"aria-hidden": "true"
+													}),
+													"Pickup address ",
+													/* @__PURE__ */ S("span", {
+														className: "text-status-error-text",
+														children: "*"
+													})
+												]
+											}), /* @__PURE__ */ S(f, { children: "Where the shipment is collected." })] }), /* @__PURE__ */ S(d, {
+												className: "space-y-4",
+												children: /* @__PURE__ */ C("fieldset", {
+													className: "space-y-4",
+													children: [
+														/* @__PURE__ */ S("legend", {
+															className: "sr-only",
+															children: "Pickup address details"
+														}),
+														/* @__PURE__ */ C("div", {
+															className: "space-y-2",
+															children: [/* @__PURE__ */ C(g, {
+																htmlFor: "pickupStreet",
+																children: ["Street address ", /* @__PURE__ */ S("span", {
+																	className: "text-status-error-text",
+																	children: "*"
+																})]
+															}), /* @__PURE__ */ S(h, {
+																id: "pickupStreet",
+																value: U.pickupAddress.street,
+																onChange: (e) => Q("pickupAddress", "street", e.target.value),
+																placeholder: "123 Main St",
+																"aria-required": "true"
+															})]
+														}),
+														/* @__PURE__ */ C("div", {
+															className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
+															children: [/* @__PURE__ */ C("div", {
+																className: "space-y-2",
+																children: [/* @__PURE__ */ S(g, {
+																	htmlFor: "pickupCity",
+																	children: "City"
+																}), /* @__PURE__ */ S(h, {
+																	id: "pickupCity",
+																	value: U.pickupAddress.city,
+																	onChange: (e) => Q("pickupAddress", "city", e.target.value),
+																	placeholder: "San Francisco"
+																})]
+															}), /* @__PURE__ */ C("div", {
+																className: "space-y-2",
+																children: [/* @__PURE__ */ S(g, {
+																	htmlFor: "pickupState",
+																	children: "State"
+																}), /* @__PURE__ */ S(h, {
+																	id: "pickupState",
+																	value: U.pickupAddress.state,
+																	onChange: (e) => Q("pickupAddress", "state", e.target.value),
+																	placeholder: "CA"
+																})]
+															})]
+														}),
+														/* @__PURE__ */ C("div", {
+															className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
+															children: [/* @__PURE__ */ C("div", {
+																className: "space-y-2",
+																children: [/* @__PURE__ */ S(g, {
+																	htmlFor: "pickupPostal",
+																	children: "Postal Code"
+																}), /* @__PURE__ */ S(h, {
+																	id: "pickupPostal",
+																	value: U.pickupAddress.postalCode,
+																	onChange: (e) => Q("pickupAddress", "postalCode", e.target.value),
+																	placeholder: "94103"
+																})]
+															}), /* @__PURE__ */ C("div", {
+																className: "space-y-2",
+																children: [/* @__PURE__ */ S(g, {
+																	htmlFor: "pickupCountry",
+																	children: "Country"
+																}), /* @__PURE__ */ S(h, {
+																	id: "pickupCountry",
+																	value: U.pickupAddress.country,
+																	onChange: (e) => Q("pickupAddress", "country", e.target.value),
+																	placeholder: "USA"
+																})]
+															})]
+														})
+													]
+												})
+											})]
+										}),
+										/* @__PURE__ */ S("div", {
+											className: "hidden items-center justify-center lg:flex",
+											"aria-hidden": "true",
+											children: /* @__PURE__ */ S(t, {
+												size: 18,
+												className: "text-text-muted"
+											})
+										}),
+										/* @__PURE__ */ C(u, {
+											className: "border-border-seam shadow-none",
+											children: [/* @__PURE__ */ C(p, { children: [/* @__PURE__ */ C(m, {
+												className: "flex items-center gap-2 text-base",
+												children: [
+													/* @__PURE__ */ S(r, {
+														size: 17,
+														className: "text-text-secondary",
+														"aria-hidden": "true"
+													}),
+													"Delivery address ",
+													/* @__PURE__ */ S("span", {
+														className: "text-status-error-text",
+														children: "*"
+													})
+												]
+											}), /* @__PURE__ */ S(f, { children: "Where the shipment is delivered." })] }), /* @__PURE__ */ S(d, {
+												className: "space-y-4",
+												children: /* @__PURE__ */ C("fieldset", {
+													className: "space-y-4",
+													children: [
+														/* @__PURE__ */ S("legend", {
+															className: "sr-only",
+															children: "Delivery address details"
+														}),
+														/* @__PURE__ */ C("div", {
+															className: "space-y-2",
+															children: [/* @__PURE__ */ C(g, {
+																htmlFor: "deliveryStreet",
+																children: ["Street address ", /* @__PURE__ */ S("span", {
+																	className: "text-status-error-text",
+																	children: "*"
+																})]
+															}), /* @__PURE__ */ S(h, {
+																id: "deliveryStreet",
+																value: U.deliveryAddress.street,
+																onChange: (e) => Q("deliveryAddress", "street", e.target.value),
+																placeholder: "456 Oak Ave",
+																"aria-required": "true"
+															})]
+														}),
+														/* @__PURE__ */ C("div", {
+															className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+															children: [/* @__PURE__ */ C("div", {
+																className: "space-y-2",
+																children: [/* @__PURE__ */ S(g, {
+																	htmlFor: "deliveryCity",
+																	children: "City"
+																}), /* @__PURE__ */ S(h, {
+																	id: "deliveryCity",
+																	value: U.deliveryAddress.city,
+																	onChange: (e) => Q("deliveryAddress", "city", e.target.value),
+																	placeholder: "Los Angeles"
+																})]
+															}), /* @__PURE__ */ C("div", {
+																className: "space-y-2",
+																children: [/* @__PURE__ */ S(g, {
+																	htmlFor: "deliveryState",
+																	children: "State"
+																}), /* @__PURE__ */ S(h, {
+																	id: "deliveryState",
+																	value: U.deliveryAddress.state,
+																	onChange: (e) => Q("deliveryAddress", "state", e.target.value),
+																	placeholder: "CA"
+																})]
+															})]
+														}),
+														/* @__PURE__ */ C("div", {
+															className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+															children: [/* @__PURE__ */ C("div", {
+																className: "space-y-2",
+																children: [/* @__PURE__ */ S(g, {
+																	htmlFor: "deliveryPostal",
+																	children: "Postal code"
+																}), /* @__PURE__ */ S(h, {
+																	id: "deliveryPostal",
+																	value: U.deliveryAddress.postalCode,
+																	onChange: (e) => Q("deliveryAddress", "postalCode", e.target.value),
+																	placeholder: "90210"
+																})]
+															}), /* @__PURE__ */ C("div", {
+																className: "space-y-2",
+																children: [/* @__PURE__ */ S(g, {
+																	htmlFor: "deliveryCountry",
+																	children: "Country"
+																}), /* @__PURE__ */ S(h, {
+																	id: "deliveryCountry",
+																	value: U.deliveryAddress.country,
+																	onChange: (e) => Q("deliveryAddress", "country", e.target.value),
+																	placeholder: "USA"
+																})]
+															})]
+														})
+													]
+												})
+											})]
+										})
+									]
 								})
 							]
-						})] })]
-					}),
-					/* @__PURE__ */ S(d, { children: [/* @__PURE__ */ S(p, {
-						className: "flex flex-row items-center justify-between",
-						children: [/* @__PURE__ */ x(m, { children: "Order Items" }), /* @__PURE__ */ S(u, {
-							type: "button",
-							variant: "outline",
-							size: "sm",
-							onClick: $,
-							children: [/* @__PURE__ */ x(i, { size: 16 }), "Add Item"]
-						})]
-					}), /* @__PURE__ */ x(f, { children: U.items.length === 0 ? /* @__PURE__ */ x(fe, {
-						illustration: "empty-files",
-						title: "No items added yet",
-						description: "Add the products this order will ship — each with a name, SKU, quantity and value.",
-						action: /* @__PURE__ */ S(u, {
-							type: "button",
-							variant: "outline",
-							onClick: $,
-							children: [/* @__PURE__ */ x(i, {
-								size: 16,
-								className: "mr-1.5"
-							}), "Add your first item"]
 						})
-					}) : /* @__PURE__ */ S("div", {
-						className: "space-y-4",
-						children: [/* @__PURE__ */ S("div", {
-							className: "space-y-2",
-							children: [
-								/* @__PURE__ */ x(g, {
-									htmlFor: "item-product-search",
-									children: "Search product catalog"
-								}),
-								/* @__PURE__ */ x(h, {
-									id: "item-product-search",
-									value: z,
-									onChange: (e) => Me(e.target.value),
-									placeholder: "Search by name or SKU"
-								}),
-								/* @__PURE__ */ x("p", {
-									className: "text-xs text-text-secondary",
-									children: "Narrows the \"Catalog item\" picker below for every row. Picking a catalog item fills in name, SKU, weight, and value — you can still edit them, or skip the picker and enter details manually."
-								})
-							]
-						}), U.items.map((e, t) => /* @__PURE__ */ x(_e, {
-							item: e,
-							index: t,
-							isFirst: t === 0,
-							products: Ne,
-							productsLoading: Pe,
-							onUpdate: Ve,
-							onRemove: Be
-						}, e.id))]
-					}) })] }),
-					/* @__PURE__ */ S(d, { children: [/* @__PURE__ */ x(p, { children: /* @__PURE__ */ x(m, { children: "Scheduling & Handling" }) }), /* @__PURE__ */ x(f, { children: /* @__PURE__ */ S("div", {
-						className: "grid grid-cols-1 md:grid-cols-3 gap-6",
-						children: [/* @__PURE__ */ S("div", {
-							className: "space-y-2",
-							children: [
-								/* @__PURE__ */ S(g, {
-									htmlFor: "scheduledDelivery",
-									className: "flex items-center gap-1.5",
-									children: [/* @__PURE__ */ x(t, {
-										size: 14,
-										className: "text-text-secondary"
-									}), "Scheduled Delivery"]
-								}),
-								/* @__PURE__ */ x(h, {
-									id: "scheduledDelivery",
-									type: "datetime-local",
-									value: U.scheduledDelivery,
-									onChange: (e) => Z("scheduledDelivery", e.target.value)
-								}),
-								/* @__PURE__ */ x("p", {
-									className: "text-xs text-text-secondary",
-									children: "The delivery window promised to the customer. Leave blank to dispatch as soon as a driver is free."
+					}),
+					/* @__PURE__ */ S("div", {
+						id: "items-section",
+						children: /* @__PURE__ */ S(w, {
+							title: /* @__PURE__ */ C("span", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ S(i, {
+										size: 18,
+										"aria-hidden": "true"
+									}),
+									"Shipment contents ",
+									/* @__PURE__ */ S(c, {
+										variant: "secondary",
+										children: U.items.length
+									})
+								]
+							}),
+							description: "Add each item being shipped. Use the catalog to prefill details or enter a one-off item manually.",
+							actions: /* @__PURE__ */ C(l, {
+								type: "button",
+								variant: "outline",
+								size: "sm",
+								onClick: $,
+								children: [/* @__PURE__ */ S(a, { size: 16 }), "Add item"]
+							}),
+							children: U.items.length === 0 ? /* @__PURE__ */ S(ge, {
+								illustration: "empty-files",
+								title: "No items added yet",
+								description: "Add the products this order will ship — each with a name, SKU, quantity and value.",
+								action: /* @__PURE__ */ C(l, {
+									type: "button",
+									variant: "outline",
+									onClick: $,
+									children: [/* @__PURE__ */ S(a, {
+										size: 16,
+										className: "mr-1.5"
+									}), "Add your first item"]
 								})
-							]
-						}), /* @__PURE__ */ S("div", {
-							className: "md:col-span-2 space-y-2",
-							children: [/* @__PURE__ */ x(g, {
-								htmlFor: "specialInstructions",
-								children: "Special Instructions"
-							}), /* @__PURE__ */ x(de, {
-								id: "specialInstructions",
-								value: U.specialInstructions,
-								onChange: (e) => Z("specialInstructions", e.target.value),
-								placeholder: "Any special handling or delivery instructions...",
-								rows: 4
+							}) : /* @__PURE__ */ C("div", {
+								className: "space-y-4",
+								children: [/* @__PURE__ */ C("div", {
+									className: "rounded-card border border-border-subtle bg-bg-sunken/40 p-4",
+									children: [
+										/* @__PURE__ */ S(g, {
+											htmlFor: "item-product-search",
+											children: "Search product catalog"
+										}),
+										/* @__PURE__ */ S(h, {
+											id: "item-product-search",
+											value: z,
+											onChange: (e) => Ie(e.target.value),
+											placeholder: "Search by name or SKU",
+											className: "mt-2"
+										}),
+										/* @__PURE__ */ S("p", {
+											className: "mt-2 text-xs text-text-secondary",
+											children: "This filters the catalog picker for every item below. You can still edit any autofilled value or enter item details manually."
+										})
+									]
+								}), /* @__PURE__ */ S("ol", {
+									className: "space-y-4",
+									"aria-label": "Shipment items",
+									children: U.items.map((e, t) => /* @__PURE__ */ S("li", { children: /* @__PURE__ */ S(y, {
+										item: e,
+										index: t,
+										products: Le,
+										productsLoading: Re,
+										onUpdate: Ge,
+										onRemove: We
+									}) }, e.id))
+								})]
+							})
+						})
+					}),
+					/* @__PURE__ */ S(w, {
+						title: /* @__PURE__ */ C("span", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ S(n, {
+								size: 18,
+								"aria-hidden": "true"
+							}), "Timing & handling"]
+						}),
+						description: "Optional delivery timing and instructions for the carrier.",
+						children: /* @__PURE__ */ C("div", {
+							className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
+							children: [/* @__PURE__ */ C("div", {
+								className: "space-y-2",
+								children: [
+									/* @__PURE__ */ S(g, {
+										htmlFor: "scheduledDelivery",
+										children: "Scheduled delivery"
+									}),
+									/* @__PURE__ */ S(h, {
+										id: "scheduledDelivery",
+										type: "datetime-local",
+										value: U.scheduledDelivery,
+										onChange: (e) => Z("scheduledDelivery", e.target.value)
+									}),
+									/* @__PURE__ */ S("p", {
+										className: "text-xs text-text-secondary",
+										children: "Leave blank to dispatch as soon as a driver is available."
+									})
+								]
+							}), /* @__PURE__ */ C("div", {
+								className: "space-y-2 lg:col-span-2",
+								children: [/* @__PURE__ */ S(g, {
+									htmlFor: "specialInstructions",
+									children: "Special instructions"
+								}), /* @__PURE__ */ S(he, {
+									id: "specialInstructions",
+									value: U.specialInstructions,
+									onChange: (e) => Z("specialInstructions", e.target.value),
+									placeholder: "Any special handling or delivery instructions...",
+									rows: 4
+								})]
 							})]
-						})]
-					}) })] })
+						})
+					})
 				]
 			})
 		]
 	});
 }
 //#endregion
-export { w as default };
+export { E as default };