@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.5

package/dist/CustomerDetailsPage-nR4oZ_ju.js

@@ -0,0 +1,615 @@
+import { A as e, F as t, I as n, L as r, P as i, R as a, d as o, f as s, g as c, h as l, i as u, j as d, l as f, lt as p, n as m, r as h, st as g, u as _, ut as v } from "./PageLayout-BniRJaQ6.js";
+import { t as y } from "./arrow-left-ClW4Isj7.js";
+import { t as b } from "./file-text-BuDx4hZp.js";
+import { n as x, t as S } from "./Notice-DOO-tjpV.js";
+import { n as ee, t as te } from "./phone-Cl32EXKW.js";
+import { t as ne } from "./map-pin-CqN1bbT1.js";
+import { t as C } from "./package-DmRF7iQD.js";
+import { t as w } from "./save-UDlog7hg.js";
+import { t as T } from "./square-pen-BcfB3Grd.js";
+import { t as re } from "./star-CVZHFwDx.js";
+import { t as E } from "./users-B8KhJBGg.js";
+import { t as ie } from "./x-C4ObLVEa.js";
+import { r as ae } from "./useOrders-BSiqo61w.js";
+import { r as D, t as O } from "./useCustomers-ChJao1ET.js";
+import { i as k, r as oe } from "./StatusBadge-BNHXYvZx.js";
+import { t as A } from "./FormError-BKcb_wT-.js";
+import { n as se, r as j, t as ce } from "./formatters-FWJDwTFv.js";
+import { useEffect as le, useState as M } from "react";
+import { useParams as ue } from "react-router-dom";
+import { Fragment as de, jsx as N, jsxs as P } from "react/jsx-runtime";
+import { EmphasisPanel as F, NextSteps as I, PagePurpose as L } from "@burdenoff/fe-libs/ui";
+//#region node_modules/lucide-react/dist/esm/icons/building.js
+var R = v("Building", [
+	["rect", {
+		width: "16",
+		height: "20",
+		x: "4",
+		y: "2",
+		rx: "2",
+		ry: "2",
+		key: "76otgf"
+	}],
+	["path", {
+		d: "M9 22v-4h6v4",
+		key: "r93iot"
+	}],
+	["path", {
+		d: "M8 6h.01",
+		key: "1dz90k"
+	}],
+	["path", {
+		d: "M16 6h.01",
+		key: "1x0f13"
+	}],
+	["path", {
+		d: "M12 6h.01",
+		key: "1vi96p"
+	}],
+	["path", {
+		d: "M12 10h.01",
+		key: "1nrarc"
+	}],
+	["path", {
+		d: "M12 14h.01",
+		key: "1etili"
+	}],
+	["path", {
+		d: "M16 10h.01",
+		key: "1m94wz"
+	}],
+	["path", {
+		d: "M16 14h.01",
+		key: "1gbofw"
+	}],
+	["path", {
+		d: "M8 10h.01",
+		key: "19clt8"
+	}],
+	["path", {
+		d: "M8 14h.01",
+		key: "6423bh"
+	}]
+]);
+//#endregion
+//#region src/movethewheels/pages/CustomerDetailsPage.tsx
+function z(e) {
+	if (!e) return null;
+	let t = e.trim(), n = /^https?:\/\//i.test(t) ? t : `https://${t}`;
+	try {
+		let e = new URL(n);
+		return e.protocol === "http:" || e.protocol === "https:" ? e.href : null;
+	} catch {
+		return null;
+	}
+}
+function B() {
+	let { basePath: o, navigate: s } = g(), { createCustomer: c } = D(), [l, f] = M({
+		name: "",
+		type: "b2c",
+		email: "",
+		phone: "",
+		company: ""
+	}), [m, h] = M(!1), [v, b] = M(null), x = () => s?.(p(o, "customers")), S = async (e) => {
+		if (e.preventDefault(), !l.name.trim()) {
+			b("Customer name is required.");
+			return;
+		}
+		h(!0), b(null);
+		try {
+			let e = await c({
+				name: l.name.trim(),
+				type: l.type,
+				email: l.email.trim() || void 0,
+				phone: l.phone.trim() || void 0,
+				company: l.company.trim() || void 0
+			});
+			s?.(p(o, `customers/${e.id}`));
+		} catch (e) {
+			console.error("Failed to create customer:", e), b(e instanceof Error ? e.message : "Failed to create customer. Please try again."), h(!1);
+		}
+	};
+	return /* @__PURE__ */ P(u, {
+		title: "New Customer",
+		subtitle: "Add a new customer to your account",
+		icon: /* @__PURE__ */ N(E, { size: 24 }),
+		headerActions: /* @__PURE__ */ P("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ P(_, {
+				variant: "outline",
+				onClick: x,
+				disabled: m,
+				children: [/* @__PURE__ */ N(y, { size: 16 }), " Cancel"]
+			}), /* @__PURE__ */ P(_, {
+				onClick: S,
+				disabled: m,
+				children: [
+					/* @__PURE__ */ N(w, { size: 16 }),
+					" ",
+					m ? "Saving..." : "Create Customer"
+				]
+			})]
+		}),
+		children: [/* @__PURE__ */ N(L, {
+			icon: /* @__PURE__ */ N(E, { size: 18 }),
+			children: "Add a customer once and their contact details auto-fill every future order you book for them. Only a name is required — add email, phone and company to make deliveries easier to arrange."
+		}), /* @__PURE__ */ P("form", {
+			onSubmit: S,
+			className: "max-w-2xl space-y-6",
+			children: [/* @__PURE__ */ N(A, { message: v }), /* @__PURE__ */ P(F, { children: [/* @__PURE__ */ N("h2", {
+				className: "text-base font-semibold text-text-primary mb-4",
+				children: "Customer Details"
+			}), /* @__PURE__ */ P("div", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ P("div", {
+						className: "grid grid-cols-1 md:grid-cols-2 gap-4",
+						children: [/* @__PURE__ */ P("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ P(d, {
+								htmlFor: "name",
+								children: ["Name ", /* @__PURE__ */ N("span", {
+									className: "text-status-error-text",
+									children: "*"
+								})]
+							}), /* @__PURE__ */ N(e, {
+								id: "name",
+								value: l.name,
+								onChange: (e) => f((t) => ({
+									...t,
+									name: e.target.value
+								})),
+								placeholder: "Acme Corp or Jane Doe",
+								required: !0
+							})]
+						}), /* @__PURE__ */ P("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ N(d, {
+								htmlFor: "type",
+								children: "Customer Type"
+							}), /* @__PURE__ */ P(i, {
+								value: l.type,
+								onValueChange: (e) => f((t) => ({
+									...t,
+									type: e
+								})),
+								children: [/* @__PURE__ */ N(r, {
+									id: "type",
+									children: /* @__PURE__ */ N(a, {})
+								}), /* @__PURE__ */ P(t, { children: [/* @__PURE__ */ N(n, {
+									value: "b2c",
+									children: "B2C (Individual)"
+								}), /* @__PURE__ */ N(n, {
+									value: "b2b",
+									children: "B2B (Business)"
+								})] })]
+							})]
+						})]
+					}),
+					/* @__PURE__ */ P("div", {
+						className: "grid grid-cols-1 md:grid-cols-2 gap-4",
+						children: [/* @__PURE__ */ P("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ N(d, {
+								htmlFor: "email",
+								children: "Email"
+							}), /* @__PURE__ */ N(e, {
+								id: "email",
+								type: "email",
+								value: l.email,
+								onChange: (e) => f((t) => ({
+									...t,
+									email: e.target.value
+								})),
+								placeholder: "customer@example.com"
+							})]
+						}), /* @__PURE__ */ P("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ N(d, {
+								htmlFor: "phone",
+								children: "Phone"
+							}), /* @__PURE__ */ N(e, {
+								id: "phone",
+								value: l.phone,
+								onChange: (e) => f((t) => ({
+									...t,
+									phone: e.target.value
+								})),
+								placeholder: "+1-555-0100"
+							})]
+						})]
+					}),
+					/* @__PURE__ */ P("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ N(d, {
+							htmlFor: "company",
+							children: "Company"
+						}), /* @__PURE__ */ N(e, {
+							id: "company",
+							value: l.company,
+							onChange: (e) => f((t) => ({
+								...t,
+								company: e.target.value
+							})),
+							placeholder: "Company name (for B2B accounts)"
+						})]
+					})
+				]
+			})] })]
+		})]
+	});
+}
+function V() {
+	let { customerId: t } = ue(), { basePath: n, navigate: r } = g(), { customer: i, isLoading: a, error: v, refetch: V } = O(t), { updateCustomer: fe } = D(), { orders: H, isLoading: pe } = ae({ filters: { customerId: t } }), { message: U, notify: me } = x(), [W, G] = M(!1), [K, q] = M(!1), [J, Y] = M(null), [X, Z] = M({
+		name: "",
+		email: "",
+		phone: "",
+		company: ""
+	});
+	le(() => {
+		i && Z({
+			name: i.name,
+			email: i.email,
+			phone: i.phone,
+			company: i.company ?? ""
+		});
+	}, [i]);
+	let he = () => r?.(p(n, "customers")), Q = (e) => r?.(p(n, e)), $ = () => {
+		Y(null), G(!0);
+	};
+	return t ? a ? /* @__PURE__ */ N(h, { message: "Loading customer details..." }) : v || !i ? /* @__PURE__ */ N(m, {
+		title: "Customer not found",
+		onRetry: V
+	}) : /* @__PURE__ */ P(u, {
+		title: i.name,
+		subtitle: i.company || i.email,
+		icon: /* @__PURE__ */ N(E, { size: 24 }),
+		headerActions: /* @__PURE__ */ P("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ P(_, {
+				variant: "outline",
+				onClick: he,
+				children: [/* @__PURE__ */ N(y, { size: 16 }), " Back"]
+			}), W ? /* @__PURE__ */ P(de, { children: [/* @__PURE__ */ P(_, {
+				variant: "outline",
+				onClick: () => {
+					Y(null), G(!1), i && Z({
+						name: i.name,
+						email: i.email,
+						phone: i.phone,
+						company: i.company ?? ""
+					});
+				},
+				disabled: K,
+				children: [/* @__PURE__ */ N(ie, { size: 16 }), " Cancel"]
+			}), /* @__PURE__ */ P(_, {
+				onClick: async () => {
+					if (t) {
+						if (!X.name.trim()) {
+							Y("Customer name is required.");
+							return;
+						}
+						q(!0), Y(null);
+						try {
+							await fe(t, {
+								name: X.name.trim(),
+								email: X.email.trim(),
+								phone: X.phone.trim(),
+								company: X.company.trim() || void 0
+							}), me("Customer updated."), G(!1), V();
+						} catch (e) {
+							Y(e instanceof Error ? e.message : "Failed to update customer.");
+						} finally {
+							q(!1);
+						}
+					}
+				},
+				disabled: K,
+				children: [
+					/* @__PURE__ */ N(w, { size: 16 }),
+					" ",
+					K ? "Saving…" : "Save"
+				]
+			})] }) : /* @__PURE__ */ P(_, {
+				onClick: $,
+				children: [/* @__PURE__ */ N(T, { size: 16 }), " Edit"]
+			})]
+		}),
+		headerContent: /* @__PURE__ */ P("div", {
+			className: "flex items-center gap-4",
+			children: [
+				/* @__PURE__ */ N(k, { type: i.type }),
+				/* @__PURE__ */ N(f, {
+					variant: i.isActive ? "default" : "secondary",
+					children: i.isActive ? "Active" : "Inactive"
+				}),
+				/* @__PURE__ */ P("div", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ N(re, {
+						size: 16,
+						className: "text-status-warning-text fill-current"
+					}), /* @__PURE__ */ N("span", {
+						className: "font-medium",
+						children: i.rating.toFixed(1)
+					})]
+				})
+			]
+		}),
+		children: [
+			/* @__PURE__ */ N(L, {
+				icon: /* @__PURE__ */ N(E, { size: 18 }),
+				children: "Everything you know about this customer — how to reach them, where they are, and their account standing. Use it to confirm contact details before a delivery, check their rating, or book their next order."
+			}),
+			/* @__PURE__ */ N(I, {
+				storageKey: "movethewheels-customer-details",
+				steps: [{
+					id: "new-order",
+					label: "Book a delivery for this customer",
+					description: "Start a new order pre-filled for this account.",
+					icon: /* @__PURE__ */ N(b, { size: 16 }),
+					onClick: () => Q("orders/new")
+				}, {
+					id: "edit",
+					label: "Update contact details",
+					description: "Keep email, phone and address current.",
+					icon: /* @__PURE__ */ N(T, { size: 16 }),
+					onClick: $
+				}]
+			}),
+			U && /* @__PURE__ */ N("div", {
+				className: "mb-2",
+				children: /* @__PURE__ */ N(S, { message: U })
+			}),
+			/* @__PURE__ */ P("div", {
+				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+				children: [/* @__PURE__ */ P("div", {
+					className: "lg:col-span-2 space-y-6",
+					children: [
+						/* @__PURE__ */ P(F, { children: [/* @__PURE__ */ N("h2", {
+							className: "text-base font-semibold text-text-primary mb-4",
+							children: "Contact Information"
+						}), W ? /* @__PURE__ */ P("div", {
+							className: "space-y-4",
+							children: [/* @__PURE__ */ N(A, { message: J }), /* @__PURE__ */ P("div", {
+								className: "grid grid-cols-1 md:grid-cols-2 gap-4",
+								children: [
+									/* @__PURE__ */ P("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ P(d, {
+											htmlFor: "edit-name",
+											children: ["Name ", /* @__PURE__ */ N("span", {
+												className: "text-status-error-text",
+												children: "*"
+											})]
+										}), /* @__PURE__ */ N(e, {
+											id: "edit-name",
+											value: X.name,
+											onChange: (e) => Z((t) => ({
+												...t,
+												name: e.target.value
+											}))
+										})]
+									}),
+									/* @__PURE__ */ P("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ N(d, {
+											htmlFor: "edit-company",
+											children: "Company"
+										}), /* @__PURE__ */ N(e, {
+											id: "edit-company",
+											value: X.company,
+											onChange: (e) => Z((t) => ({
+												...t,
+												company: e.target.value
+											})),
+											placeholder: "Company name (for B2B accounts)"
+										})]
+									}),
+									/* @__PURE__ */ P("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ N(d, {
+											htmlFor: "edit-email",
+											children: "Email"
+										}), /* @__PURE__ */ N(e, {
+											id: "edit-email",
+											type: "email",
+											value: X.email,
+											onChange: (e) => Z((t) => ({
+												...t,
+												email: e.target.value
+											}))
+										})]
+									}),
+									/* @__PURE__ */ P("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ N(d, {
+											htmlFor: "edit-phone",
+											children: "Phone"
+										}), /* @__PURE__ */ N(e, {
+											id: "edit-phone",
+											value: X.phone,
+											onChange: (e) => Z((t) => ({
+												...t,
+												phone: e.target.value
+											}))
+										})]
+									})
+								]
+							})]
+						}) : /* @__PURE__ */ P("div", {
+							className: "grid grid-cols-1 md:grid-cols-2 gap-6",
+							children: [/* @__PURE__ */ P("div", {
+								className: "space-y-4",
+								children: [/* @__PURE__ */ P("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ N(ee, {
+										size: 18,
+										className: "text-text-secondary"
+									}), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("p", {
+										className: "text-sm text-text-secondary",
+										children: "Email"
+									}), /* @__PURE__ */ N("p", {
+										className: "font-medium",
+										children: i.email || "—"
+									})] })]
+								}), /* @__PURE__ */ P("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ N(te, {
+										size: 18,
+										className: "text-text-secondary"
+									}), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("p", {
+										className: "text-sm text-text-secondary",
+										children: "Phone"
+									}), /* @__PURE__ */ N("p", {
+										className: "font-medium",
+										children: i.phone || "—"
+									})] })]
+								})]
+							}), /* @__PURE__ */ P("div", {
+								className: "space-y-4",
+								children: [i.company && /* @__PURE__ */ P("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ N(R, {
+										size: 18,
+										className: "text-text-secondary"
+									}), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("p", {
+										className: "text-sm text-text-secondary",
+										children: "Company"
+									}), /* @__PURE__ */ N("p", {
+										className: "font-medium",
+										children: i.company
+									})] })]
+								}), (() => {
+									let e = z(i.website);
+									return e ? /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("p", {
+										className: "text-sm text-text-secondary",
+										children: "Website"
+									}), /* @__PURE__ */ N("a", {
+										href: e,
+										target: "_blank",
+										rel: "noopener noreferrer",
+										className: "text-primary hover:underline",
+										children: e
+									})] }) : null;
+								})()]
+							})]
+						})] }),
+						/* @__PURE__ */ P(o, { children: [/* @__PURE__ */ N(l, { children: /* @__PURE__ */ P(c, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ N(ne, { size: 18 }), " Address"]
+						}) }), /* @__PURE__ */ N(s, { children: /* @__PURE__ */ N("p", { children: ce(i.address) }) })] }),
+						i.notes && /* @__PURE__ */ P(o, { children: [/* @__PURE__ */ N(l, { children: /* @__PURE__ */ P(c, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ N(b, { size: 18 }), " Notes"]
+						}) }), /* @__PURE__ */ N(s, { children: /* @__PURE__ */ N("p", { children: i.notes }) })] }),
+						/* @__PURE__ */ P(o, { children: [/* @__PURE__ */ P(l, {
+							className: "flex flex-row items-center justify-between",
+							children: [/* @__PURE__ */ P(c, {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ N(C, { size: 18 }), " Orders"]
+							}), /* @__PURE__ */ P(_, {
+								variant: "outline",
+								size: "sm",
+								onClick: () => Q("orders/new"),
+								children: [/* @__PURE__ */ N(b, { size: 14 }), " New order"]
+							})]
+						}), /* @__PURE__ */ N(s, { children: pe ? /* @__PURE__ */ N("p", {
+							className: "text-text-secondary text-center py-4",
+							children: "Loading orders…"
+						}) : H.length > 0 ? /* @__PURE__ */ N("div", {
+							className: "space-y-2",
+							children: H.map((e) => /* @__PURE__ */ P("button", {
+								type: "button",
+								onClick: () => Q(`orders/${e.id}`),
+								className: "w-full flex items-center justify-between gap-3 p-3 border rounded-lg text-left hover:bg-bg-sunken/50 transition-colors",
+								children: [/* @__PURE__ */ P("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ N("p", {
+										className: "font-medium truncate",
+										children: e.orderNumber
+									}), /* @__PURE__ */ P("p", {
+										className: "text-sm text-text-secondary",
+										children: [
+											j(e.createdAt, "relative"),
+											" ·",
+											" ",
+											se(e.pricing.total)
+										]
+									})]
+								}), /* @__PURE__ */ N(oe, {
+									status: e.status,
+									type: "order",
+									size: "sm"
+								})]
+							}, e.id))
+						}) : /* @__PURE__ */ P("div", {
+							className: "text-center py-6",
+							children: [
+								/* @__PURE__ */ N(C, {
+									size: 32,
+									className: "mx-auto mb-2 text-text-secondary opacity-50"
+								}),
+								/* @__PURE__ */ N("p", {
+									className: "text-text-secondary",
+									children: "No orders yet for this customer"
+								}),
+								/* @__PURE__ */ N("button", {
+									type: "button",
+									onClick: () => Q("orders/new"),
+									className: "mt-1 text-sm text-primary hover:underline",
+									children: "Book their first delivery"
+								})
+							]
+						}) })] })
+					]
+				}), /* @__PURE__ */ P("div", {
+					className: "space-y-6",
+					children: [/* @__PURE__ */ P(o, { children: [/* @__PURE__ */ N(l, { children: /* @__PURE__ */ N(c, { children: "Business Details" }) }), /* @__PURE__ */ P(s, {
+						className: "space-y-3",
+						children: [
+							i.businessLicense && /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("p", {
+								className: "text-sm text-text-secondary",
+								children: "Business License"
+							}), /* @__PURE__ */ N("p", {
+								className: "font-mono",
+								children: i.businessLicense
+							})] }),
+							i.taxId && /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("p", {
+								className: "text-sm text-text-secondary",
+								children: "Tax ID"
+							}), /* @__PURE__ */ N("p", {
+								className: "font-mono",
+								children: i.taxId
+							})] }),
+							/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("p", {
+								className: "text-sm text-text-secondary",
+								children: "Preferred Contact"
+							}), /* @__PURE__ */ N("p", {
+								className: "capitalize",
+								children: i.preferredContactMethod
+							})] }),
+							/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("p", {
+								className: "text-sm text-text-secondary",
+								children: "Marketing Opt-in"
+							}), /* @__PURE__ */ N(f, {
+								variant: i.marketingOptIn ? "default" : "secondary",
+								children: i.marketingOptIn ? "Yes" : "No"
+							})] })
+						]
+					})] }), /* @__PURE__ */ P(o, { children: [/* @__PURE__ */ N(l, { children: /* @__PURE__ */ N(c, { children: "Account Info" }) }), /* @__PURE__ */ P(s, {
+						className: "space-y-3",
+						children: [/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("p", {
+							className: "text-sm text-text-secondary",
+							children: "Created"
+						}), /* @__PURE__ */ N("p", { children: j(i.createdAt, "full") })] }), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("p", {
+							className: "text-sm text-text-secondary",
+							children: "Last Updated"
+						}), /* @__PURE__ */ N("p", { children: j(i.updatedAt, "relative") })] })]
+					})] })]
+				})]
+			})
+		]
+	}) : /* @__PURE__ */ N(B, {});
+}
+//#endregion
+export { V as default };