@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.5

package/dist/CreateOrderPage-CWHx8yys.js

@@ -0,0 +1,490 @@
+import { A as e, F as t, I as n, L as r, P as i, Q as a, R as o, d as s, f as c, g as l, h as u, i as d, j as f, lt as p, st as m, t as h, u as g, z as _ } from "./PageLayout-BniRJaQ6.js";
+import { t as v } from "./arrow-left-ClW4Isj7.js";
+import { t as y } from "./map-pin-CqN1bbT1.js";
+import { t as b } from "./package-DmRF7iQD.js";
+import { t as x } from "./plus-DlANgOFx.js";
+import { t as S } from "./save-UDlog7hg.js";
+import { t as C } from "./trash-2-B80G12d4.js";
+import { t as w } from "./users-B8KhJBGg.js";
+import { r as T, t as ee } from "./useOrders-BSiqo61w.js";
+import { r as te } from "./useCustomers-ChJao1ET.js";
+import { t as E } from "./FormError-BKcb_wT-.js";
+import { useState as D } from "react";
+import { useParams as O } from "react-router-dom";
+import { jsx as k, jsxs as A } from "react/jsx-runtime";
+import { EmphasisPanel as j, NextSteps as M, PagePurpose as N } from "@burdenoff/fe-libs/ui";
+//#region src/movethewheels/pages/CreateOrderPage.tsx
+function P() {
+	let { orderId: P } = O(), { basePath: F, navigate: I } = m(), { order: L } = ee(P), { createOrder: R } = T(), { customers: z } = te({ limit: 100 }), B = !!P && !!L, [V, H] = D({
+		customerId: L?.customerId || "",
+		orderType: L?.orderType || "b2c",
+		priority: L?.priority || "normal",
+		pickupAddress: {
+			street: L?.pickupAddress.street || "",
+			city: L?.pickupAddress.city || "",
+			state: L?.pickupAddress.state || "",
+			postalCode: L?.pickupAddress.postalCode || "",
+			country: L?.pickupAddress.country || "USA"
+		},
+		deliveryAddress: {
+			street: L?.deliveryAddress.street || "",
+			city: L?.deliveryAddress.city || "",
+			state: L?.deliveryAddress.state || "",
+			postalCode: L?.deliveryAddress.postalCode || "",
+			country: L?.deliveryAddress.country || "USA"
+		},
+		items: L?.items || [],
+		specialInstructions: L?.specialInstructions || ""
+	}), [U, W] = D(!1), [G, K] = D(null), q = () => {
+		I && I(p(F, "orders"));
+	}, J = () => {
+		let e = z.find((e) => e.id === V.customerId);
+		return !V.customerId || !e ? "Select a customer for this order." : V.pickupAddress.street.trim() ? V.deliveryAddress.street.trim() ? V.items.length === 0 ? "Add at least one item to the order." : null : "Enter a delivery street address." : "Enter a pickup street address.";
+	}, Y = async (e) => {
+		e.preventDefault(), K(null);
+		let t = J();
+		if (t) {
+			K(t);
+			return;
+		}
+		let n = z.find((e) => e.id === V.customerId);
+		if (!n) {
+			K("Select a customer for this order.");
+			return;
+		}
+		W(!0);
+		try {
+			await R({
+				customerId: V.customerId,
+				customerInfo: {
+					name: n.name,
+					email: n.email,
+					phone: n.phone,
+					company: n.company
+				},
+				orderType: V.orderType,
+				priority: V.priority,
+				pickupAddress: V.pickupAddress,
+				deliveryAddress: V.deliveryAddress,
+				items: V.items,
+				specialInstructions: V.specialInstructions
+			}), q();
+		} catch (e) {
+			K(e instanceof Error ? e.message : "Could not create the order. Please try again.");
+		} finally {
+			W(!1);
+		}
+	}, X = (e, t) => {
+		H((n) => ({
+			...n,
+			[e]: t
+		}));
+	}, Z = (e, t, n) => {
+		H((r) => ({
+			...r,
+			[e]: {
+				...r[e],
+				[t]: n
+			}
+		}));
+	}, Q = () => {
+		H((e) => ({
+			...e,
+			items: [...e.items, {
+				id: `item-${Date.now()}`,
+				productId: "",
+				name: "",
+				quantity: 1,
+				weight: 0,
+				dimensions: {
+					length: 0,
+					width: 0,
+					height: 0,
+					unit: "cm"
+				},
+				value: 0,
+				sku: ""
+			}]
+		}));
+	}, ne = (e) => {
+		H((t) => ({
+			...t,
+			items: t.items.filter((t, n) => n !== e)
+		}));
+	}, $ = (e, t, n) => {
+		H((r) => ({
+			...r,
+			items: r.items.map((r, i) => i === e ? {
+				...r,
+				[t]: n
+			} : r)
+		}));
+	};
+	return /* @__PURE__ */ A(d, {
+		title: B ? "Edit Order" : "Create Order",
+		subtitle: B ? `Editing ${L?.orderNumber}` : "Create a new delivery order",
+		icon: /* @__PURE__ */ k(b, { size: 24 }),
+		headerActions: /* @__PURE__ */ A("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ A(g, {
+				variant: "outline",
+				onClick: q,
+				children: [/* @__PURE__ */ k(v, { size: 16 }), "Cancel"]
+			}), /* @__PURE__ */ A(g, {
+				onClick: Y,
+				disabled: U,
+				children: [/* @__PURE__ */ k(S, { size: 16 }), U ? "Saving..." : B ? "Save Changes" : "Create Order"]
+			})]
+		}),
+		children: [
+			/* @__PURE__ */ k(N, {
+				icon: /* @__PURE__ */ k(b, { 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__ */ k(M, {
+				storageKey: "movethewheels-create-order",
+				steps: [
+					{
+						id: "customer",
+						label: "Pick the customer first",
+						description: "Their saved contact details auto-fill the order.",
+						icon: /* @__PURE__ */ k(w, { size: 16 }),
+						done: !!V.customerId,
+						onClick: () => document.getElementById("customer")?.focus()
+					},
+					{
+						id: "addresses",
+						label: "Set pickup & delivery addresses",
+						description: "Where the shipment is collected and dropped off.",
+						icon: /* @__PURE__ */ k(y, { size: 16 }),
+						done: !!V.pickupAddress.street && !!V.deliveryAddress.street,
+						onClick: () => document.getElementById("pickupStreet")?.focus()
+					},
+					{
+						id: "items",
+						label: "Add the items to ship",
+						description: "List each product with its quantity and value.",
+						icon: /* @__PURE__ */ k(b, { size: 16 }),
+						done: V.items.length > 0,
+						onClick: Q
+					}
+				]
+			}),
+			/* @__PURE__ */ A("form", {
+				onSubmit: Y,
+				className: "space-y-6",
+				children: [
+					/* @__PURE__ */ k(E, { message: G }),
+					/* @__PURE__ */ A(j, { children: [/* @__PURE__ */ k("h2", {
+						className: "text-base font-semibold text-text-primary mb-4",
+						children: "Order Details"
+					}), /* @__PURE__ */ k("div", {
+						className: "space-y-4",
+						children: /* @__PURE__ */ A("div", {
+							className: "grid grid-cols-1 md:grid-cols-3 gap-4",
+							children: [
+								/* @__PURE__ */ A("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ k(f, {
+										htmlFor: "customer",
+										children: "Customer"
+									}), /* @__PURE__ */ A(i, {
+										value: V.customerId,
+										onValueChange: (e) => X("customerId", e),
+										children: [/* @__PURE__ */ k(r, {
+											id: "customer",
+											children: /* @__PURE__ */ k(o, { placeholder: "Select customer" })
+										}), /* @__PURE__ */ k(t, { children: z.map((e) => /* @__PURE__ */ A(n, {
+											value: e.id,
+											children: [
+												e.name,
+												" (",
+												e.email,
+												")"
+											]
+										}, e.id)) })]
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ k(f, {
+										htmlFor: "orderType",
+										children: "Order Type"
+									}), /* @__PURE__ */ A(i, {
+										value: V.orderType,
+										onValueChange: (e) => X("orderType", e),
+										children: [/* @__PURE__ */ k(r, {
+											id: "orderType",
+											children: /* @__PURE__ */ k(o, {})
+										}), /* @__PURE__ */ A(t, { children: [/* @__PURE__ */ k(n, {
+											value: "b2c",
+											children: "B2C (Individual)"
+										}), /* @__PURE__ */ k(n, {
+											value: "b2b",
+											children: "B2B (Business)"
+										})] })]
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ k(f, {
+										htmlFor: "priority",
+										children: "Priority"
+									}), /* @__PURE__ */ A(i, {
+										value: V.priority,
+										onValueChange: (e) => X("priority", e),
+										children: [/* @__PURE__ */ k(r, {
+											id: "priority",
+											children: /* @__PURE__ */ k(o, {})
+										}), /* @__PURE__ */ A(t, { children: [
+											/* @__PURE__ */ k(n, {
+												value: "low",
+												children: "Low"
+											}),
+											/* @__PURE__ */ k(n, {
+												value: "normal",
+												children: "Normal"
+											}),
+											/* @__PURE__ */ k(n, {
+												value: "high",
+												children: "High"
+											}),
+											/* @__PURE__ */ k(n, {
+												value: "urgent",
+												children: "Urgent"
+											})
+										] })]
+									})]
+								})
+							]
+						})
+					})] }),
+					/* @__PURE__ */ A("div", {
+						className: "grid grid-cols-1 md:grid-cols-2 gap-6",
+						children: [/* @__PURE__ */ A(s, { children: [/* @__PURE__ */ k(u, { children: /* @__PURE__ */ k(l, { children: "Pickup Address" }) }), /* @__PURE__ */ A(c, {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ A("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ k(f, {
+										htmlFor: "pickupStreet",
+										children: "Street Address"
+									}), /* @__PURE__ */ k(e, {
+										id: "pickupStreet",
+										value: V.pickupAddress.street,
+										onChange: (e) => Z("pickupAddress", "street", e.target.value),
+										placeholder: "123 Main St"
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
+									children: [/* @__PURE__ */ A("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ k(f, {
+											htmlFor: "pickupCity",
+											children: "City"
+										}), /* @__PURE__ */ k(e, {
+											id: "pickupCity",
+											value: V.pickupAddress.city,
+											onChange: (e) => Z("pickupAddress", "city", e.target.value),
+											placeholder: "San Francisco"
+										})]
+									}), /* @__PURE__ */ A("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ k(f, {
+											htmlFor: "pickupState",
+											children: "State"
+										}), /* @__PURE__ */ k(e, {
+											id: "pickupState",
+											value: V.pickupAddress.state,
+											onChange: (e) => Z("pickupAddress", "state", e.target.value),
+											placeholder: "CA"
+										})]
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
+									children: [/* @__PURE__ */ A("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ k(f, {
+											htmlFor: "pickupPostal",
+											children: "Postal Code"
+										}), /* @__PURE__ */ k(e, {
+											id: "pickupPostal",
+											value: V.pickupAddress.postalCode,
+											onChange: (e) => Z("pickupAddress", "postalCode", e.target.value),
+											placeholder: "94103"
+										})]
+									}), /* @__PURE__ */ A("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ k(f, {
+											htmlFor: "pickupCountry",
+											children: "Country"
+										}), /* @__PURE__ */ k(e, {
+											id: "pickupCountry",
+											value: V.pickupAddress.country,
+											onChange: (e) => Z("pickupAddress", "country", e.target.value),
+											placeholder: "USA"
+										})]
+									})]
+								})
+							]
+						})] }), /* @__PURE__ */ A(s, { children: [/* @__PURE__ */ k(u, { children: /* @__PURE__ */ k(l, { children: "Delivery Address" }) }), /* @__PURE__ */ A(c, {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ A("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ k(f, {
+										htmlFor: "deliveryStreet",
+										children: "Street Address"
+									}), /* @__PURE__ */ k(e, {
+										id: "deliveryStreet",
+										value: V.deliveryAddress.street,
+										onChange: (e) => Z("deliveryAddress", "street", e.target.value),
+										placeholder: "456 Oak Ave"
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
+									children: [/* @__PURE__ */ A("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ k(f, {
+											htmlFor: "deliveryCity",
+											children: "City"
+										}), /* @__PURE__ */ k(e, {
+											id: "deliveryCity",
+											value: V.deliveryAddress.city,
+											onChange: (e) => Z("deliveryAddress", "city", e.target.value),
+											placeholder: "Los Angeles"
+										})]
+									}), /* @__PURE__ */ A("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ k(f, {
+											htmlFor: "deliveryState",
+											children: "State"
+										}), /* @__PURE__ */ k(e, {
+											id: "deliveryState",
+											value: V.deliveryAddress.state,
+											onChange: (e) => Z("deliveryAddress", "state", e.target.value),
+											placeholder: "CA"
+										})]
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
+									children: [/* @__PURE__ */ A("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ k(f, {
+											htmlFor: "deliveryPostal",
+											children: "Postal Code"
+										}), /* @__PURE__ */ k(e, {
+											id: "deliveryPostal",
+											value: V.deliveryAddress.postalCode,
+											onChange: (e) => Z("deliveryAddress", "postalCode", e.target.value),
+											placeholder: "90210"
+										})]
+									}), /* @__PURE__ */ A("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ k(f, {
+											htmlFor: "deliveryCountry",
+											children: "Country"
+										}), /* @__PURE__ */ k(e, {
+											id: "deliveryCountry",
+											value: V.deliveryAddress.country,
+											onChange: (e) => Z("deliveryAddress", "country", e.target.value),
+											placeholder: "USA"
+										})]
+									})]
+								})
+							]
+						})] })]
+					}),
+					/* @__PURE__ */ A(s, { children: [/* @__PURE__ */ A(u, {
+						className: "flex flex-row items-center justify-between",
+						children: [/* @__PURE__ */ k(l, { children: "Order Items" }), /* @__PURE__ */ A(g, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							onClick: Q,
+							children: [/* @__PURE__ */ k(x, { size: 16 }), "Add Item"]
+						})]
+					}), /* @__PURE__ */ k(c, { children: V.items.length === 0 ? /* @__PURE__ */ k(h, {
+						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__ */ A(g, {
+							type: "button",
+							variant: "outline",
+							onClick: Q,
+							children: [/* @__PURE__ */ k(x, {
+								size: 16,
+								className: "mr-1.5"
+							}), "Add your first item"]
+						})
+					}) : /* @__PURE__ */ k("div", {
+						className: "space-y-4",
+						children: V.items.map((t, n) => /* @__PURE__ */ A("div", { children: [n > 0 && /* @__PURE__ */ k(_, { className: "my-4" }), /* @__PURE__ */ A("div", {
+							className: "grid grid-cols-1 md:grid-cols-6 gap-4",
+							children: [
+								/* @__PURE__ */ A("div", {
+									className: "md:col-span-2 space-y-2",
+									children: [/* @__PURE__ */ k(f, { children: "Item Name" }), /* @__PURE__ */ k(e, {
+										value: t.name,
+										onChange: (e) => $(n, "name", e.target.value),
+										placeholder: "Product name"
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ k(f, { children: "SKU" }), /* @__PURE__ */ k(e, {
+										value: t.sku,
+										onChange: (e) => $(n, "sku", e.target.value),
+										placeholder: "SKU-001"
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ k(f, { children: "Quantity" }), /* @__PURE__ */ k(e, {
+										type: "number",
+										min: "1",
+										value: t.quantity,
+										onChange: (e) => $(n, "quantity", parseInt(e.target.value) || 1)
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ k(f, { children: "Value ($)" }), /* @__PURE__ */ k(e, {
+										type: "number",
+										min: "0",
+										step: "0.01",
+										value: t.value,
+										onChange: (e) => $(n, "value", parseFloat(e.target.value) || 0)
+									})]
+								}),
+								/* @__PURE__ */ k("div", {
+									className: "flex items-end",
+									children: /* @__PURE__ */ k(g, {
+										type: "button",
+										variant: "ghost",
+										size: "icon",
+										className: "text-status-error-text",
+										onClick: () => ne(n),
+										children: /* @__PURE__ */ k(C, { size: 16 })
+									})
+								})
+							]
+						})] }, t.id))
+					}) })] }),
+					/* @__PURE__ */ A(s, { children: [/* @__PURE__ */ k(u, { children: /* @__PURE__ */ k(l, { children: "Special Instructions" }) }), /* @__PURE__ */ k(c, { children: /* @__PURE__ */ k(a, {
+						value: V.specialInstructions,
+						onChange: (e) => X("specialInstructions", e.target.value),
+						placeholder: "Any special handling or delivery instructions...",
+						rows: 4
+					}) })] })
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { P as default };