@burdenoff/microfe-movethewheels 2026.924.1 → 2026.925.1

package/dist/pages/CreateOrderPage.js

@@ -1,151 +1,160 @@
 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 { Save as o } from "../node_modules/lucide-react/dist/esm/icons/save.js";
-import { Trash2 as ee } from "../node_modules/lucide-react/dist/esm/icons/trash-2.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 s } from "../utils/navigation.js";
-import { useMoveTheWheels as re } from "../providers/MoveTheWheelsProvider.js";
-import { useRoute as ie, useRoutes as ae } from "../hooks/useRoutes.js";
-import { useOrder as oe, useOrders as c } from "../hooks/useOrders.js";
-import { useCustomer as l, useCustomers as u } from "../hooks/useCustomers.js";
-import { Button as d, Card as f, CardContent as p, CardHeader as m, CardTitle as h, Input as g, Label as _, Select as se, SelectContent as ce, SelectItem as v, SelectTrigger as le, SelectValue as ue, Separator as de, Textarea as y } 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 { buildCustomerCreatePath as ne, joinPath as o } from "../utils/navigation.js";
+import { useMoveTheWheels as s } from "../providers/MoveTheWheelsProvider.js";
+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 _e, useSearchParams as ve } from "react-router";
-import { Fragment as ye, jsx as S, jsxs as C } from "react/jsx-runtime";
-import { EmphasisPanel as be, NextSteps as xe, PagePurpose as Se } from "@burdenoff/fe-libs/ui";
+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 w(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 T() {
-	let { orderId: T } = _e(), [E] = ve(), D = E.get("customerId")?.trim() || void 0, { basePath: O, navigate: k } = re(), { order: A } = oe(T), { createOrder: j, updateOrder: Ce } = c(), [we, Te] = x(""), { customers: M, createCustomer: Ee, isLoading: N, error: P, refetch: De } = u({
+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: we || void 0 }
-	}), { customer: F } = l(D ?? A?.customerId), [Oe, ke] = x(""), { routes: I, isLoading: L, error: R, hasMore: Ae, totalRoutes: je } = ae({
+		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 = !!T && !!A, [B, V] = x(null), [H, U] = x({
-		customerId: D || A?.customerId || "",
-		priority: A?.priority || "normal",
-		routeId: A?.routeId || "",
+	}), [z, Ie] = x(""), { products: Le, isLoading: Re } = se({
+		search: z || void 0,
+		limit: 20
+	}), B = !!E && !!j, [V, H] = x(null), [U, W] = x({
+		customerId: O || j?.customerId || "",
+		priority: j?.priority || "normal",
+		routeId: j?.routeId || "",
 		pickupAddress: {
-			street: A?.pickupAddress.street || "",
-			city: A?.pickupAddress.city || "",
-			state: A?.pickupAddress.state || "",
-			postalCode: A?.pickupAddress.postalCode || "",
-			country: A?.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: A?.deliveryAddress.street || "",
-			city: A?.deliveryAddress.city || "",
-			state: A?.deliveryAddress.state || "",
-			postalCode: A?.deliveryAddress.postalCode || "",
-			country: A?.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: A?.items || [],
-		scheduledDelivery: w(A?.scheduledDelivery),
-		specialInstructions: A?.specialInstructions || ""
-	}), { route: Me, isLoading: Ne } = ie(H.routeId || void 0), [W, G] = x(!1), [Pe, K] = x(null);
+		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 && (V((e) => e?.id === F.id ? e : F), U((e) => e.customerId ? e : {
+		F && (H((e) => e?.id === F.id ? e : F), W((e) => e.customerId ? e : {
 			...e,
 			customerId: F.id
 		}));
 	}, [F]), b(() => {
-		A && U({
-			customerId: A.customerId || "",
-			priority: A.priority || "normal",
-			routeId: A.routeId || "",
+		j && W({
+			customerId: j.customerId || "",
+			priority: j.priority || "normal",
+			routeId: j.routeId || "",
 			pickupAddress: {
-				street: A.pickupAddress.street || "",
-				city: A.pickupAddress.city || "",
-				state: A.pickupAddress.state || "",
-				postalCode: A.pickupAddress.postalCode || "",
-				country: A.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: A.deliveryAddress.street || "",
-				city: A.deliveryAddress.city || "",
-				state: A.deliveryAddress.state || "",
-				postalCode: A.deliveryAddress.postalCode || "",
-				country: A.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: A.items || [],
-			scheduledDelivery: w(A.scheduledDelivery),
-			specialInstructions: A.specialInstructions || ""
+			items: j.items || [],
+			scheduledDelivery: T(j.scheduledDelivery),
+			specialInstructions: j.specialInstructions || ""
 		});
-	}, [A]);
-	let q = () => {
-		if (k) {
-			if (!z && D) {
-				k(s(O, `customers/${D}`));
+	}, [j]);
+	let J = () => {
+		if (A) {
+			if (!B && O) {
+				A(o(k, `customers/${O}`));
 				return;
 			}
-			k(s(O, "orders"));
+			A(o(k, "orders"));
 		}
-	}, J = () => B ?? M.find((e) => e.id === H.customerId), Fe = () => !H.customerId || !J() ? P ? "Customers could not be loaded. Retry or create a customer before continuing." : "Select a customer for this order." : H.pickupAddress.street.trim() ? H.deliveryAddress.street.trim() ? H.items.length === 0 ? "Add at least one item to the order." : H.scheduledDelivery && Number.isNaN(Date.parse(H.scheduledDelivery)) ? "Enter a valid scheduled delivery date and time." : null : "Enter a delivery street address." : "Enter a pickup street address.", Y = async (e) => {
-		e.preventDefault(), K(null);
-		let t = Fe();
+	}, 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 = He();
 		if (t) {
-			K(t);
+			q(t);
 			return;
 		}
-		let n = J();
+		let n = Y();
 		if (!n) {
-			K(P ? "Customers could not be loaded. Retry or create a customer before continuing." : "Select a customer for this order.");
+			q(P ? "Customers could not be loaded. Retry or create a customer before continuing." : "Select a customer for this order.");
 			return;
 		}
-		G(!0);
+		K(!0);
 		try {
 			let e = {
-				customerId: H.customerId,
+				customerId: U.customerId,
 				customerInfo: {
 					name: n.name,
 					email: n.email,
 					phone: n.phone,
 					company: n.company
 				},
-				priority: H.priority,
-				pickupAddress: H.pickupAddress,
-				deliveryAddress: H.deliveryAddress,
-				items: H.items,
-				scheduledDelivery: H.scheduledDelivery ? new Date(H.scheduledDelivery) : null,
-				routeId: H.routeId || void 0,
-				specialInstructions: H.specialInstructions
+				priority: U.priority,
+				pickupAddress: U.pickupAddress,
+				deliveryAddress: U.deliveryAddress,
+				items: U.items,
+				scheduledDelivery: U.scheduledDelivery ? new Date(U.scheduledDelivery) : null,
+				routeId: U.routeId || void 0,
+				specialInstructions: U.specialInstructions
 			};
-			z && T ? (await Ce(T, e), k && k(s(O, `orders/${T}`))) : (await j(e), q());
+			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) {
-			K(e instanceof Error ? e.message : z ? "Could not update the order. Please try again." : "Could not create the order. Please try again.");
+			q(e instanceof Error ? e.message : B ? "Could not update the order. Please try again." : "Could not create the order. Please try again.");
 		} finally {
-			G(!1);
+			K(!1);
 		}
-	}, X = (e, t) => {
-		U((n) => ({
+	}, Z = (e, t) => {
+		W((n) => ({
 			...n,
 			[e]: t
 		}));
-	}, Z = (e, t, n) => {
-		U((r) => ({
+	}, Q = (e, t, n) => {
+		W((r) => ({
 			...r,
 			[e]: {
 				...r[e],
 				[t]: n
 			}
 		}));
-	}, Ie = (e) => {
+	}, Ue = (e) => {
 		if (!e) {
-			X("routeId", "");
+			Z("routeId", "");
 			return;
 		}
 		let t = I.find((t) => t.id === e);
@@ -157,14 +166,14 @@ function T() {
 			postalCode: e.postalCode.trim() ? e.postalCode : t.postalCode,
 			country: e.country.trim() ? e.country : t.country
 		} : e;
-		U((e) => ({
+		W((e) => ({
 			...e,
 			routeId: t.id,
 			pickupAddress: i(e.pickupAddress, n),
 			deliveryAddress: i(e.deliveryAddress, r)
 		}));
-	}, Q = () => {
-		U((e) => ({
+	}, $ = () => {
+		W((e) => ({
 			...e,
 			items: [...e.items, {
 				id: `item-${Date.now()}`,
@@ -182,435 +191,573 @@ function T() {
 				sku: ""
 			}]
 		}));
-	}, Le = (e) => {
-		U((t) => ({
+	}, We = (e) => {
+		W((t) => ({
 			...t,
 			items: t.items.filter((t, n) => n !== e)
 		}));
-	}, $ = (e, t, n) => {
-		U((r) => ({
+	}, Ge = (e, t, n) => {
+		W((r) => ({
 			...r,
 			items: r.items.map((r, i) => i === e ? {
 				...r,
 				[t]: n
 			} : r)
 		}));
-	};
-	return /* @__PURE__ */ C(pe, {
-		title: z ? "Edit Order" : "Create Order",
-		subtitle: z ? `Editing ${A?.orderNumber}` : "Create a new delivery order",
-		icon: /* @__PURE__ */ S(r, { size: 24 }),
+	}, 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 ${j?.orderNumber}` : "Create a new delivery order",
+		icon: /* @__PURE__ */ S(i, { size: 24 }),
+		maxWidth: "2xl",
 		headerActions: /* @__PURE__ */ C("div", {
-			className: "flex gap-2",
-			children: [/* @__PURE__ */ C(d, {
+			className: "flex w-full flex-col-reverse gap-2 sm:w-auto sm:flex-row",
+			children: [/* @__PURE__ */ C(l, {
+				type: "button",
 				variant: "outline",
-				onClick: q,
+				onClick: J,
+				disabled: G,
 				children: [/* @__PURE__ */ S(e, { size: 16 }), "Cancel"]
-			}), /* @__PURE__ */ C(d, {
-				onClick: Y,
-				disabled: W || N,
-				children: [/* @__PURE__ */ S(o, { size: 16 }), W ? "Saving..." : z ? "Save Changes" : "Create Order"]
+			}), /* @__PURE__ */ C(l, {
+				type: "submit",
+				form: "order-form",
+				disabled: G || N,
+				children: [/* @__PURE__ */ S(ee, { size: 16 }), G ? "Saving..." : B ? "Save Changes" : "Create Order"]
 			})]
 		}),
 		children: [
-			/* @__PURE__ */ S(Se, {
-				icon: /* @__PURE__ */ S(r, { size: 18 }),
-				children: z ? "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__ */ S(xe, {
-				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__ */ S(te, { size: 16 }),
-						done: !!H.customerId,
-						onClick: () => document.getElementById("customer")?.focus()
+						key: "customer",
+						label: "Customer & priority",
+						description: "Who is receiving this delivery?"
 					},
 					{
-						id: "addresses",
-						label: "Set pickup & delivery addresses",
-						description: "Where the shipment is collected and dropped off.",
-						icon: /* @__PURE__ */ S(n, { size: 16 }),
-						done: !!H.pickupAddress.street && !!H.deliveryAddress.street,
-						onClick: () => document.getElementById("pickupStreet")?.focus()
+						key: "locations",
+						label: "Route & addresses",
+						description: "Where should it be collected and delivered?"
 					},
 					{
-						id: "items",
-						label: "Add the items to ship",
-						description: "List each product with its quantity and value.",
-						icon: /* @__PURE__ */ S(r, { size: 16 }),
-						done: H.items.length > 0,
-						onClick: Q
+						key: "items",
+						label: "Shipment contents",
+						description: "What is being shipped?"
+					},
+					{
+						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__ */ C("form", {
-				onSubmit: Y,
+				id: "order-form",
+				onSubmit: X,
 				className: "space-y-6",
 				children: [
-					/* @__PURE__ */ S(me, { message: Pe }),
-					/* @__PURE__ */ C(be, { children: [/* @__PURE__ */ S("h2", {
-						className: "text-base font-semibold text-text-primary mb-4",
-						children: "Order Details"
-					}), /* @__PURE__ */ S("div", {
-						className: "space-y-4",
-						children: /* @__PURE__ */ C("div", {
-							className: "grid grid-cols-1 md:grid-cols-2 gap-4",
-							children: [/* @__PURE__ */ S(ge, {
-								customers: M,
-								value: H.customerId,
-								onValueChange: (e) => {
-									e && (X("customerId", e), V(M.find((t) => t.id === e) ?? (B?.id === e ? B : null)), K(null));
-								},
-								onCreated: (e) => {
-									V(e), X("customerId", e.id), K(null);
-								},
-								createCustomer: Ee,
-								isLoading: N,
-								error: P,
-								onRetry: De,
-								onOpenCustomers: () => {
-									k && k(s(O, ne(z && T ? `orders/${T}/edit` : "orders/new")));
-								},
-								selectedCustomer: B,
-								onSearchQueryChange: Te
+					/* @__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: "space-y-2",
-								children: [/* @__PURE__ */ S(_, {
-									htmlFor: "priority",
-									children: "Priority"
-								}), /* @__PURE__ */ C(se, {
-									value: H.priority,
-									onValueChange: (e) => X("priority", e),
-									children: [/* @__PURE__ */ S(le, {
-										id: "priority",
-										children: /* @__PURE__ */ S(ue, {})
-									}), /* @__PURE__ */ C(ce, { children: [
-										/* @__PURE__ */ S(v, {
-											value: "low",
-											children: "Low"
-										}),
-										/* @__PURE__ */ S(v, {
-											value: "normal",
-											children: "Normal"
+								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__ */ S(v, {
-											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__ */ S(v, {
-											value: "urgent",
-											children: "Urgent"
+										/* @__PURE__ */ S("p", {
+											className: "text-xs text-text-secondary",
+											children: "Normal is selected by default."
 										})
-									] })]
+									]
 								})]
 							})]
 						})
-					})] }),
-					/* @__PURE__ */ C(f, { children: [/* @__PURE__ */ S(m, { children: /* @__PURE__ */ C(h, {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ S(a, { size: 18 }), "Saved Route (Optional)"]
-					}) }), /* @__PURE__ */ C(p, {
-						className: "space-y-2",
-						children: [/* @__PURE__ */ S(he, {
-							id: "saved-route",
-							value: H.routeId,
-							onChange: Ie,
-							options: I,
-							loading: L,
-							getId: (e) => e.id,
-							getLabel: (e) => `${e.name} · ${e.stops.length} stops`,
-							renderOption: (e) => /* @__PURE__ */ C(ye, { children: [
-								e.name,
-								" · ",
-								e.stops.length,
-								" stops"
-							] }),
-							selectedOption: Me,
-							selectedLoading: Ne,
-							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__ */ S("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__ */ C("div", {
-						className: "grid grid-cols-1 md:grid-cols-2 gap-6",
-						children: [/* @__PURE__ */ C(f, { children: [/* @__PURE__ */ S(m, { children: /* @__PURE__ */ S(h, { children: "Pickup Address" }) }), /* @__PURE__ */ C(p, {
-							className: "space-y-4",
-							children: [
-								/* @__PURE__ */ C("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ S(_, {
-										htmlFor: "pickupStreet",
-										children: "Street Address"
-									}), /* @__PURE__ */ S(g, {
-										id: "pickupStreet",
-										value: H.pickupAddress.street,
-										onChange: (e) => Z("pickupAddress", "street", e.target.value),
-										placeholder: "123 Main St"
-									})]
-								}),
-								/* @__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(_, {
-											htmlFor: "pickupCity",
-											children: "City"
-										}), /* @__PURE__ */ S(g, {
-											id: "pickupCity",
-											value: H.pickupAddress.city,
-											onChange: (e) => Z("pickupAddress", "city", e.target.value),
-											placeholder: "San Francisco"
-										})]
-									}), /* @__PURE__ */ C("div", {
-										className: "space-y-2",
-										children: [/* @__PURE__ */ S(_, {
-											htmlFor: "pickupState",
-											children: "State"
-										}), /* @__PURE__ */ S(g, {
-											id: "pickupState",
-											value: H.pickupAddress.state,
-											onChange: (e) => Z("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(_, {
-											htmlFor: "pickupPostal",
-											children: "Postal Code"
-										}), /* @__PURE__ */ S(g, {
-											id: "pickupPostal",
-											value: H.pickupAddress.postalCode,
-											onChange: (e) => Z("pickupAddress", "postalCode", e.target.value),
-											placeholder: "94103"
-										})]
-									}), /* @__PURE__ */ C("div", {
-										className: "space-y-2",
-										children: [/* @__PURE__ */ S(_, {
-											htmlFor: "pickupCountry",
-											children: "Country"
-										}), /* @__PURE__ */ S(g, {
-											id: "pickupCountry",
-											value: H.pickupAddress.country,
-											onChange: (e) => Z("pickupAddress", "country", e.target.value),
-											placeholder: "USA"
-										})]
-									})]
-								})
-							]
-						})] }), /* @__PURE__ */ C(f, { children: [/* @__PURE__ */ S(m, { children: /* @__PURE__ */ S(h, { children: "Delivery Address" }) }), /* @__PURE__ */ C(p, {
-							className: "space-y-4",
+					}),
+					/* @__PURE__ */ S("div", {
+						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__ */ C("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ S(_, {
-										htmlFor: "deliveryStreet",
-										children: "Street Address"
-									}), /* @__PURE__ */ S(g, {
-										id: "deliveryStreet",
-										value: H.deliveryAddress.street,
-										onChange: (e) => Z("deliveryAddress", "street", e.target.value),
-										placeholder: "456 Oak Ave"
-									})]
-								}),
-								/* @__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(_, {
-											htmlFor: "deliveryCity",
-											children: "City"
-										}), /* @__PURE__ */ S(g, {
-											id: "deliveryCity",
-											value: H.deliveryAddress.city,
-											onChange: (e) => Z("deliveryAddress", "city", e.target.value),
-											placeholder: "Los Angeles"
-										})]
-									}), /* @__PURE__ */ C("div", {
-										className: "space-y-2",
-										children: [/* @__PURE__ */ S(_, {
-											htmlFor: "deliveryState",
-											children: "State"
-										}), /* @__PURE__ */ S(g, {
-											id: "deliveryState",
-											value: H.deliveryAddress.state,
-											onChange: (e) => Z("deliveryAddress", "state", e.target.value),
-											placeholder: "CA"
-										})]
-									})]
+									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(me, {}),
 								/* @__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(_, {
-											htmlFor: "deliveryPostal",
-											children: "Postal Code"
-										}), /* @__PURE__ */ S(g, {
-											id: "deliveryPostal",
-											value: H.deliveryAddress.postalCode,
-											onChange: (e) => Z("deliveryAddress", "postalCode", e.target.value),
-											placeholder: "90210"
-										})]
-									}), /* @__PURE__ */ C("div", {
-										className: "space-y-2",
-										children: [/* @__PURE__ */ S(_, {
-											htmlFor: "deliveryCountry",
-											children: "Country"
-										}), /* @__PURE__ */ S(g, {
-											id: "deliveryCountry",
-											value: H.deliveryAddress.country,
-											onChange: (e) => Z("deliveryAddress", "country", e.target.value),
-											placeholder: "USA"
-										})]
-									})]
+									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__ */ C(f, { children: [/* @__PURE__ */ C(m, {
-						className: "flex flex-row items-center justify-between",
-						children: [/* @__PURE__ */ S(h, { children: "Order Items" }), /* @__PURE__ */ C(d, {
-							type: "button",
-							variant: "outline",
-							size: "sm",
-							onClick: Q,
-							children: [/* @__PURE__ */ S(i, { size: 16 }), "Add Item"]
-						})]
-					}), /* @__PURE__ */ S(p, { children: H.items.length === 0 ? /* @__PURE__ */ S(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__ */ C(d, {
-							type: "button",
-							variant: "outline",
-							onClick: Q,
-							children: [/* @__PURE__ */ S(i, {
-								size: 16,
-								className: "mr-1.5"
-							}), "Add your first item"]
 						})
-					}) : /* @__PURE__ */ S("div", {
-						className: "space-y-4",
-						children: H.items.map((e, t) => /* @__PURE__ */ C("div", { children: [t > 0 && /* @__PURE__ */ S(de, { className: "my-4" }), /* @__PURE__ */ C("div", {
-							className: "grid grid-cols-1 md:grid-cols-7 gap-4",
-							children: [
-								/* @__PURE__ */ C("div", {
-									className: "md:col-span-2 space-y-2",
-									children: [/* @__PURE__ */ S(_, { children: "Item Name" }), /* @__PURE__ */ S(g, {
-										value: e.name,
-										onChange: (e) => $(t, "name", e.target.value),
-										placeholder: "Product name"
-									})]
-								}),
-								/* @__PURE__ */ C("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ S(_, { children: "SKU" }), /* @__PURE__ */ S(g, {
-										value: e.sku,
-										onChange: (e) => $(t, "sku", e.target.value),
-										placeholder: "SKU-001"
-									})]
-								}),
-								/* @__PURE__ */ C("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ S(_, { children: "Quantity" }), /* @__PURE__ */ S(g, {
-										type: "number",
-										min: "1",
-										value: e.quantity,
-										onChange: (e) => $(t, "quantity", parseInt(e.target.value) || 1)
-									})]
-								}),
-								/* @__PURE__ */ C("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ S(_, { children: "Weight (kg)" }), /* @__PURE__ */ S(g, {
-										type: "number",
-										min: "0",
-										step: "0.1",
-										value: e.weight,
-										onChange: (e) => $(t, "weight", parseFloat(e.target.value) || 0)
-									})]
-								}),
-								/* @__PURE__ */ C("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ S(_, { children: "Value ($)" }), /* @__PURE__ */ S(g, {
-										type: "number",
-										min: "0",
-										step: "0.01",
-										value: e.value,
-										onChange: (e) => $(t, "value", parseFloat(e.target.value) || 0)
-									})]
-								}),
-								/* @__PURE__ */ S("div", {
-									className: "flex items-end",
-									children: /* @__PURE__ */ S(d, {
-										type: "button",
-										variant: "ghost",
-										size: "icon",
-										className: "text-status-error-text",
-										onClick: () => Le(t),
-										children: /* @__PURE__ */ S(ee, { size: 16 })
+					}),
+					/* @__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"]
 								})
-							]
-						})] }, e.id))
-					}) })] }),
-					/* @__PURE__ */ C(f, { children: [/* @__PURE__ */ S(m, { children: /* @__PURE__ */ S(h, { children: "Scheduling & Handling" }) }), /* @__PURE__ */ S(p, { children: /* @__PURE__ */ C("div", {
-						className: "grid grid-cols-1 md:grid-cols-3 gap-6",
-						children: [/* @__PURE__ */ C("div", {
-							className: "space-y-2",
-							children: [
-								/* @__PURE__ */ C(_, {
-									htmlFor: "scheduledDelivery",
-									className: "flex items-center gap-1.5",
-									children: [/* @__PURE__ */ S(t, {
-										size: 14,
-										className: "text-text-secondary"
-									}), "Scheduled Delivery"]
-								}),
-								/* @__PURE__ */ S(g, {
-									id: "scheduledDelivery",
-									type: "datetime-local",
-									value: H.scheduledDelivery,
-									onChange: (e) => X("scheduledDelivery", e.target.value)
-								}),
-								/* @__PURE__ */ S("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__ */ C("div", {
-							className: "md:col-span-2 space-y-2",
-							children: [/* @__PURE__ */ S(_, {
-								htmlFor: "specialInstructions",
-								children: "Special Instructions"
-							}), /* @__PURE__ */ S(y, {
-								id: "specialInstructions",
-								value: H.specialInstructions,
-								onChange: (e) => X("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 { T as default };
+export { E as default };