@burdenoff/microfe-movethewheels 2026.625.1 → 2026.626.2

package/dist/CreateOrderPage-CjlnEtk3.js

@@ -0,0 +1,510 @@
+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, it as f, j as p, t as m, u as h, z as g } from "./PageLayout-D3N8MCTm.js";
+import { t as _ } from "./arrow-left-CBpZKkpq.js";
+import { t as v } from "./map-pin-BSaf5IDL.js";
+import { t as y } from "./package-BE7U0wQE.js";
+import { t as b } from "./plus-Dl1rLeJR.js";
+import { t as x } from "./save-XH8vydOn.js";
+import { t as S } from "./users-g2N0eL-Z.js";
+import { r as C } from "./graphqlClient-CdJyR_ed.js";
+import { r as w, t as T } from "./useOrders-D_3_hGMp.js";
+import { r as E } from "./useCustomers-bS3a4ytk.js";
+import { t as D } from "./navigation-BgnOfsVd.js";
+import { useState as O } from "react";
+import { useParams as k } from "react-router-dom";
+import { jsx as A, jsxs as j } from "react/jsx-runtime";
+import { EmphasisPanel as M, NextSteps as N, PagePurpose as P } from "@burdenoff/fe-libs/ui";
+//#region node_modules/lucide-react/dist/esm/icons/trash-2.js
+var F = f("Trash2", [
+	["path", {
+		d: "M3 6h18",
+		key: "d0wm0j"
+	}],
+	["path", {
+		d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6",
+		key: "4alrt4"
+	}],
+	["path", {
+		d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2",
+		key: "v07s0e"
+	}],
+	["line", {
+		x1: "10",
+		x2: "10",
+		y1: "11",
+		y2: "17",
+		key: "1uufr5"
+	}],
+	["line", {
+		x1: "14",
+		x2: "14",
+		y1: "11",
+		y2: "17",
+		key: "xtxkd"
+	}]
+]);
+//#endregion
+//#region src/movethewheels/pages/CreateOrderPage.tsx
+function I() {
+	let { orderId: f } = k(), { basePath: I, navigate: L } = C(), { order: R } = T(f), { createOrder: z } = w(), { customers: B } = E({ limit: 100 }), V = !!f && !!R, [H, U] = O({
+		customerId: R?.customerId || "",
+		orderType: R?.orderType || "b2c",
+		priority: R?.priority || "normal",
+		pickupAddress: {
+			street: R?.pickupAddress.street || "",
+			city: R?.pickupAddress.city || "",
+			state: R?.pickupAddress.state || "",
+			postalCode: R?.pickupAddress.postalCode || "",
+			country: R?.pickupAddress.country || "USA"
+		},
+		deliveryAddress: {
+			street: R?.deliveryAddress.street || "",
+			city: R?.deliveryAddress.city || "",
+			state: R?.deliveryAddress.state || "",
+			postalCode: R?.deliveryAddress.postalCode || "",
+			country: R?.deliveryAddress.country || "USA"
+		},
+		items: R?.items || [],
+		specialInstructions: R?.specialInstructions || ""
+	}), [W, G] = O(!1), K = () => {
+		L && L(D(I, "orders"));
+	}, q = async (e) => {
+		e.preventDefault(), G(!0);
+		try {
+			let e = B.find((e) => e.id === H.customerId);
+			await z({
+				customerId: H.customerId,
+				customerInfo: e ? {
+					name: e.name,
+					email: e.email,
+					phone: e.phone,
+					company: e.company
+				} : {
+					name: "New Customer",
+					email: "customer@example.com",
+					phone: "+1-555-0000"
+				},
+				orderType: H.orderType,
+				priority: H.priority,
+				pickupAddress: H.pickupAddress,
+				deliveryAddress: H.deliveryAddress,
+				items: H.items,
+				specialInstructions: H.specialInstructions
+			}), K();
+		} catch (e) {
+			console.error("Failed to create order:", e);
+		} finally {
+			G(!1);
+		}
+	}, J = (e, t) => {
+		U((n) => ({
+			...n,
+			[e]: t
+		}));
+	}, Y = (e, t, n) => {
+		U((r) => ({
+			...r,
+			[e]: {
+				...r[e],
+				[t]: n
+			}
+		}));
+	}, X = () => {
+		U((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: ""
+			}]
+		}));
+	}, Z = (e) => {
+		U((t) => ({
+			...t,
+			items: t.items.filter((t, n) => n !== e)
+		}));
+	}, Q = (e, t, n) => {
+		U((r) => ({
+			...r,
+			items: r.items.map((r, i) => i === e ? {
+				...r,
+				[t]: n
+			} : r)
+		}));
+	};
+	return /* @__PURE__ */ j(d, {
+		title: V ? "Edit Order" : "Create Order",
+		subtitle: V ? `Editing ${R?.orderNumber}` : "Create a new delivery order",
+		icon: /* @__PURE__ */ A(y, { size: 24 }),
+		headerActions: /* @__PURE__ */ j("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ j(h, {
+				variant: "outline",
+				onClick: K,
+				children: [/* @__PURE__ */ A(_, { size: 16 }), "Cancel"]
+			}), /* @__PURE__ */ j(h, {
+				onClick: q,
+				disabled: W,
+				children: [/* @__PURE__ */ A(x, { size: 16 }), W ? "Saving..." : V ? "Save Changes" : "Create Order"]
+			})]
+		}),
+		children: [
+			/* @__PURE__ */ A(P, {
+				icon: /* @__PURE__ */ A(y, { size: 18 }),
+				children: V ? "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__ */ A(N, {
+				storageKey: "movethewheels-create-order",
+				steps: [
+					{
+						id: "customer",
+						label: "Pick the customer first",
+						description: "Their saved contact details auto-fill the order.",
+						icon: /* @__PURE__ */ A(S, { size: 16 }),
+						done: !!H.customerId,
+						onClick: () => document.getElementById("customer")?.focus()
+					},
+					{
+						id: "addresses",
+						label: "Set pickup & delivery addresses",
+						description: "Where the shipment is collected and dropped off.",
+						icon: /* @__PURE__ */ A(v, { size: 16 }),
+						done: !!H.pickupAddress.street && !!H.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__ */ A(y, { size: 16 }),
+						done: H.items.length > 0,
+						onClick: X
+					}
+				]
+			}),
+			/* @__PURE__ */ j("form", {
+				onSubmit: q,
+				className: "space-y-6",
+				children: [
+					/* @__PURE__ */ j(M, { children: [/* @__PURE__ */ A("h2", {
+						className: "text-base font-semibold text-text-primary mb-4",
+						children: "Order Details"
+					}), /* @__PURE__ */ A("div", {
+						className: "space-y-4",
+						children: /* @__PURE__ */ j("div", {
+							className: "grid grid-cols-1 md:grid-cols-3 gap-4",
+							children: [
+								/* @__PURE__ */ j("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ A(p, {
+										htmlFor: "customer",
+										children: "Customer"
+									}), /* @__PURE__ */ j(i, {
+										value: H.customerId,
+										onValueChange: (e) => J("customerId", e),
+										children: [/* @__PURE__ */ A(r, {
+											id: "customer",
+											children: /* @__PURE__ */ A(o, { placeholder: "Select customer" })
+										}), /* @__PURE__ */ A(t, { children: B.map((e) => /* @__PURE__ */ j(n, {
+											value: e.id,
+											children: [
+												e.name,
+												" (",
+												e.email,
+												")"
+											]
+										}, e.id)) })]
+									})]
+								}),
+								/* @__PURE__ */ j("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ A(p, {
+										htmlFor: "orderType",
+										children: "Order Type"
+									}), /* @__PURE__ */ j(i, {
+										value: H.orderType,
+										onValueChange: (e) => J("orderType", e),
+										children: [/* @__PURE__ */ A(r, {
+											id: "orderType",
+											children: /* @__PURE__ */ A(o, {})
+										}), /* @__PURE__ */ j(t, { children: [/* @__PURE__ */ A(n, {
+											value: "b2c",
+											children: "B2C (Individual)"
+										}), /* @__PURE__ */ A(n, {
+											value: "b2b",
+											children: "B2B (Business)"
+										})] })]
+									})]
+								}),
+								/* @__PURE__ */ j("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ A(p, {
+										htmlFor: "priority",
+										children: "Priority"
+									}), /* @__PURE__ */ j(i, {
+										value: H.priority,
+										onValueChange: (e) => J("priority", e),
+										children: [/* @__PURE__ */ A(r, {
+											id: "priority",
+											children: /* @__PURE__ */ A(o, {})
+										}), /* @__PURE__ */ j(t, { children: [
+											/* @__PURE__ */ A(n, {
+												value: "low",
+												children: "Low"
+											}),
+											/* @__PURE__ */ A(n, {
+												value: "normal",
+												children: "Normal"
+											}),
+											/* @__PURE__ */ A(n, {
+												value: "high",
+												children: "High"
+											}),
+											/* @__PURE__ */ A(n, {
+												value: "urgent",
+												children: "Urgent"
+											})
+										] })]
+									})]
+								})
+							]
+						})
+					})] }),
+					/* @__PURE__ */ j("div", {
+						className: "grid grid-cols-1 md:grid-cols-2 gap-6",
+						children: [/* @__PURE__ */ j(s, { children: [/* @__PURE__ */ A(u, { children: /* @__PURE__ */ A(l, { children: "Pickup Address" }) }), /* @__PURE__ */ j(c, {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ j("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ A(p, {
+										htmlFor: "pickupStreet",
+										children: "Street Address"
+									}), /* @__PURE__ */ A(e, {
+										id: "pickupStreet",
+										value: H.pickupAddress.street,
+										onChange: (e) => Y("pickupAddress", "street", e.target.value),
+										placeholder: "123 Main St"
+									})]
+								}),
+								/* @__PURE__ */ j("div", {
+									className: "grid grid-cols-2 gap-4",
+									children: [/* @__PURE__ */ j("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ A(p, {
+											htmlFor: "pickupCity",
+											children: "City"
+										}), /* @__PURE__ */ A(e, {
+											id: "pickupCity",
+											value: H.pickupAddress.city,
+											onChange: (e) => Y("pickupAddress", "city", e.target.value),
+											placeholder: "San Francisco"
+										})]
+									}), /* @__PURE__ */ j("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ A(p, {
+											htmlFor: "pickupState",
+											children: "State"
+										}), /* @__PURE__ */ A(e, {
+											id: "pickupState",
+											value: H.pickupAddress.state,
+											onChange: (e) => Y("pickupAddress", "state", e.target.value),
+											placeholder: "CA"
+										})]
+									})]
+								}),
+								/* @__PURE__ */ j("div", {
+									className: "grid grid-cols-2 gap-4",
+									children: [/* @__PURE__ */ j("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ A(p, {
+											htmlFor: "pickupPostal",
+											children: "Postal Code"
+										}), /* @__PURE__ */ A(e, {
+											id: "pickupPostal",
+											value: H.pickupAddress.postalCode,
+											onChange: (e) => Y("pickupAddress", "postalCode", e.target.value),
+											placeholder: "94103"
+										})]
+									}), /* @__PURE__ */ j("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ A(p, {
+											htmlFor: "pickupCountry",
+											children: "Country"
+										}), /* @__PURE__ */ A(e, {
+											id: "pickupCountry",
+											value: H.pickupAddress.country,
+											onChange: (e) => Y("pickupAddress", "country", e.target.value),
+											placeholder: "USA"
+										})]
+									})]
+								})
+							]
+						})] }), /* @__PURE__ */ j(s, { children: [/* @__PURE__ */ A(u, { children: /* @__PURE__ */ A(l, { children: "Delivery Address" }) }), /* @__PURE__ */ j(c, {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ j("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ A(p, {
+										htmlFor: "deliveryStreet",
+										children: "Street Address"
+									}), /* @__PURE__ */ A(e, {
+										id: "deliveryStreet",
+										value: H.deliveryAddress.street,
+										onChange: (e) => Y("deliveryAddress", "street", e.target.value),
+										placeholder: "456 Oak Ave"
+									})]
+								}),
+								/* @__PURE__ */ j("div", {
+									className: "grid grid-cols-2 gap-4",
+									children: [/* @__PURE__ */ j("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ A(p, {
+											htmlFor: "deliveryCity",
+											children: "City"
+										}), /* @__PURE__ */ A(e, {
+											id: "deliveryCity",
+											value: H.deliveryAddress.city,
+											onChange: (e) => Y("deliveryAddress", "city", e.target.value),
+											placeholder: "Los Angeles"
+										})]
+									}), /* @__PURE__ */ j("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ A(p, {
+											htmlFor: "deliveryState",
+											children: "State"
+										}), /* @__PURE__ */ A(e, {
+											id: "deliveryState",
+											value: H.deliveryAddress.state,
+											onChange: (e) => Y("deliveryAddress", "state", e.target.value),
+											placeholder: "CA"
+										})]
+									})]
+								}),
+								/* @__PURE__ */ j("div", {
+									className: "grid grid-cols-2 gap-4",
+									children: [/* @__PURE__ */ j("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ A(p, {
+											htmlFor: "deliveryPostal",
+											children: "Postal Code"
+										}), /* @__PURE__ */ A(e, {
+											id: "deliveryPostal",
+											value: H.deliveryAddress.postalCode,
+											onChange: (e) => Y("deliveryAddress", "postalCode", e.target.value),
+											placeholder: "90210"
+										})]
+									}), /* @__PURE__ */ j("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ A(p, {
+											htmlFor: "deliveryCountry",
+											children: "Country"
+										}), /* @__PURE__ */ A(e, {
+											id: "deliveryCountry",
+											value: H.deliveryAddress.country,
+											onChange: (e) => Y("deliveryAddress", "country", e.target.value),
+											placeholder: "USA"
+										})]
+									})]
+								})
+							]
+						})] })]
+					}),
+					/* @__PURE__ */ j(s, { children: [/* @__PURE__ */ j(u, {
+						className: "flex flex-row items-center justify-between",
+						children: [/* @__PURE__ */ A(l, { children: "Order Items" }), /* @__PURE__ */ j(h, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							onClick: X,
+							children: [/* @__PURE__ */ A(b, { size: 16 }), "Add Item"]
+						})]
+					}), /* @__PURE__ */ A(c, { children: H.items.length === 0 ? /* @__PURE__ */ A(m, {
+						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__ */ j(h, {
+							type: "button",
+							variant: "outline",
+							onClick: X,
+							children: [/* @__PURE__ */ A(b, {
+								size: 16,
+								className: "mr-1.5"
+							}), "Add your first item"]
+						})
+					}) : /* @__PURE__ */ A("div", {
+						className: "space-y-4",
+						children: H.items.map((t, n) => /* @__PURE__ */ j("div", { children: [n > 0 && /* @__PURE__ */ A(g, { className: "my-4" }), /* @__PURE__ */ j("div", {
+							className: "grid grid-cols-1 md:grid-cols-6 gap-4",
+							children: [
+								/* @__PURE__ */ j("div", {
+									className: "md:col-span-2 space-y-2",
+									children: [/* @__PURE__ */ A(p, { children: "Item Name" }), /* @__PURE__ */ A(e, {
+										value: t.name,
+										onChange: (e) => Q(n, "name", e.target.value),
+										placeholder: "Product name"
+									})]
+								}),
+								/* @__PURE__ */ j("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ A(p, { children: "SKU" }), /* @__PURE__ */ A(e, {
+										value: t.sku,
+										onChange: (e) => Q(n, "sku", e.target.value),
+										placeholder: "SKU-001"
+									})]
+								}),
+								/* @__PURE__ */ j("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ A(p, { children: "Quantity" }), /* @__PURE__ */ A(e, {
+										type: "number",
+										min: "1",
+										value: t.quantity,
+										onChange: (e) => Q(n, "quantity", parseInt(e.target.value) || 1)
+									})]
+								}),
+								/* @__PURE__ */ j("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ A(p, { children: "Value ($)" }), /* @__PURE__ */ A(e, {
+										type: "number",
+										min: "0",
+										step: "0.01",
+										value: t.value,
+										onChange: (e) => Q(n, "value", parseFloat(e.target.value) || 0)
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "flex items-end",
+									children: /* @__PURE__ */ A(h, {
+										type: "button",
+										variant: "ghost",
+										size: "icon",
+										className: "text-status-error-text",
+										onClick: () => Z(n),
+										children: /* @__PURE__ */ A(F, { size: 16 })
+									})
+								})
+							]
+						})] }, t.id))
+					}) })] }),
+					/* @__PURE__ */ j(s, { children: [/* @__PURE__ */ A(u, { children: /* @__PURE__ */ A(l, { children: "Special Instructions" }) }), /* @__PURE__ */ A(c, { children: /* @__PURE__ */ A(a, {
+						value: H.specialInstructions,
+						onChange: (e) => J("specialInstructions", e.target.value),
+						placeholder: "Any special handling or delivery instructions...",
+						rows: 4
+					}) })] })
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { I as default };