@burdenoff/microfe-movethewheels 2026.704.1 → 2026.710.1

package/dist/pages/CustomerDetailsPage.js

@@ -0,0 +1,567 @@
+import { ArrowLeft as e } from "../node_modules/lucide-react/dist/esm/icons/arrow-left.js";
+import { Building as t } from "../node_modules/lucide-react/dist/esm/icons/building.js";
+import { FileText as n } from "../node_modules/lucide-react/dist/esm/icons/file-text.js";
+import { Mail as r } from "../node_modules/lucide-react/dist/esm/icons/mail.js";
+import { MapPin as i } from "../node_modules/lucide-react/dist/esm/icons/map-pin.js";
+import { Package as a } from "../node_modules/lucide-react/dist/esm/icons/package.js";
+import { Phone as o } from "../node_modules/lucide-react/dist/esm/icons/phone.js";
+import { Save as s } from "../node_modules/lucide-react/dist/esm/icons/save.js";
+import { SquarePen as c } from "../node_modules/lucide-react/dist/esm/icons/square-pen.js";
+import { Star as l } from "../node_modules/lucide-react/dist/esm/icons/star.js";
+import { Users as u } from "../node_modules/lucide-react/dist/esm/icons/users.js";
+import { X as d } from "../node_modules/lucide-react/dist/esm/icons/x.js";
+import { joinPath as f } from "../utils/navigation.js";
+import { useMoveTheWheels as p } from "../providers/MoveTheWheelsProvider.js";
+import { useOrders as m } from "../hooks/useOrders.js";
+import { useCustomer as h, useCustomers as g } from "../hooks/useCustomers.js";
+import { Badge as _, Button as v, Card as y, CardContent as b, CardHeader as x, CardTitle as S, Input as C, Label as w, Select as T, SelectContent as E, SelectItem as D, SelectTrigger as O, SelectValue as k } from "../components/ui.js";
+import { ErrorState as ee, LoadingState as te, PageLayout as A } from "../components/PageLayout.js";
+import { StatusBadge as ne, TypeBadge as re } from "../components/StatusBadge.js";
+import { FormError as j } from "../components/FormError.js";
+import { Notice as ie, useNotice as ae } from "../components/Notice.js";
+import { formatAddress as M, formatCurrency as N, formatDate as P } from "../utils/formatters.js";
+import { useEffect as oe, useState as F } from "react";
+import { useParams as se } from "react-router-dom";
+import { Fragment as ce, jsx as I, jsxs as L } from "react/jsx-runtime";
+import { EmphasisPanel as R, NextSteps as le, PagePurpose as z } from "@burdenoff/fe-libs/ui";
+//#region src/movethewheels/pages/CustomerDetailsPage.tsx
+function ue(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 de() {
+	let { basePath: t, navigate: n } = p(), { createCustomer: r } = g(), [i, a] = F({
+		name: "",
+		type: "b2c",
+		email: "",
+		phone: "",
+		company: ""
+	}), [o, c] = F(!1), [l, d] = F(null), m = () => n?.(f(t, "customers")), h = async (e) => {
+		if (e.preventDefault(), !i.name.trim()) {
+			d("Customer name is required.");
+			return;
+		}
+		c(!0), d(null);
+		try {
+			let e = await r({
+				name: i.name.trim(),
+				type: i.type,
+				email: i.email.trim() || void 0,
+				phone: i.phone.trim() || void 0,
+				company: i.company.trim() || void 0
+			});
+			n?.(f(t, `customers/${e.id}`));
+		} catch (e) {
+			console.error("Failed to create customer:", e), d(e instanceof Error ? e.message : "Failed to create customer. Please try again."), c(!1);
+		}
+	};
+	return /* @__PURE__ */ L(A, {
+		title: "New Customer",
+		subtitle: "Add a new customer to your account",
+		icon: /* @__PURE__ */ I(u, { size: 24 }),
+		headerActions: /* @__PURE__ */ L("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ L(v, {
+				variant: "outline",
+				onClick: m,
+				disabled: o,
+				children: [/* @__PURE__ */ I(e, { size: 16 }), " Cancel"]
+			}), /* @__PURE__ */ L(v, {
+				onClick: h,
+				disabled: o,
+				children: [
+					/* @__PURE__ */ I(s, { size: 16 }),
+					" ",
+					o ? "Saving..." : "Create Customer"
+				]
+			})]
+		}),
+		children: [/* @__PURE__ */ I(z, {
+			icon: /* @__PURE__ */ I(u, { 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__ */ L("form", {
+			onSubmit: h,
+			className: "max-w-2xl space-y-6",
+			children: [/* @__PURE__ */ I(j, { message: l }), /* @__PURE__ */ L(R, { children: [/* @__PURE__ */ I("h2", {
+				className: "text-base font-semibold text-text-primary mb-4",
+				children: "Customer Details"
+			}), /* @__PURE__ */ L("div", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ L("div", {
+						className: "grid grid-cols-1 md:grid-cols-2 gap-4",
+						children: [/* @__PURE__ */ L("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ L(w, {
+								htmlFor: "name",
+								children: ["Name ", /* @__PURE__ */ I("span", {
+									className: "text-status-error-text",
+									children: "*"
+								})]
+							}), /* @__PURE__ */ I(C, {
+								id: "name",
+								value: i.name,
+								onChange: (e) => a((t) => ({
+									...t,
+									name: e.target.value
+								})),
+								placeholder: "Acme Corp or Jane Doe",
+								required: !0
+							})]
+						}), /* @__PURE__ */ L("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ I(w, {
+								htmlFor: "type",
+								children: "Customer Type"
+							}), /* @__PURE__ */ L(T, {
+								value: i.type,
+								onValueChange: (e) => a((t) => ({
+									...t,
+									type: e
+								})),
+								children: [/* @__PURE__ */ I(O, {
+									id: "type",
+									children: /* @__PURE__ */ I(k, {})
+								}), /* @__PURE__ */ L(E, { children: [/* @__PURE__ */ I(D, {
+									value: "b2c",
+									children: "B2C (Individual)"
+								}), /* @__PURE__ */ I(D, {
+									value: "b2b",
+									children: "B2B (Business)"
+								})] })]
+							})]
+						})]
+					}),
+					/* @__PURE__ */ L("div", {
+						className: "grid grid-cols-1 md:grid-cols-2 gap-4",
+						children: [/* @__PURE__ */ L("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ I(w, {
+								htmlFor: "email",
+								children: "Email"
+							}), /* @__PURE__ */ I(C, {
+								id: "email",
+								type: "email",
+								value: i.email,
+								onChange: (e) => a((t) => ({
+									...t,
+									email: e.target.value
+								})),
+								placeholder: "customer@example.com"
+							})]
+						}), /* @__PURE__ */ L("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ I(w, {
+								htmlFor: "phone",
+								children: "Phone"
+							}), /* @__PURE__ */ I(C, {
+								id: "phone",
+								value: i.phone,
+								onChange: (e) => a((t) => ({
+									...t,
+									phone: e.target.value
+								})),
+								placeholder: "+1-555-0100"
+							})]
+						})]
+					}),
+					/* @__PURE__ */ L("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ I(w, {
+							htmlFor: "company",
+							children: "Company"
+						}), /* @__PURE__ */ I(C, {
+							id: "company",
+							value: i.company,
+							onChange: (e) => a((t) => ({
+								...t,
+								company: e.target.value
+							})),
+							placeholder: "Company name (for B2B accounts)"
+						})]
+					})
+				]
+			})] })]
+		})]
+	});
+}
+function B() {
+	let { customerId: T } = se(), { basePath: E, navigate: D } = p(), { customer: O, isLoading: k, error: B, refetch: V } = h(T), { updateCustomer: fe } = g(), { orders: H, isLoading: pe } = m({ filters: { customerId: T } }), { message: U, notify: me } = ae(), [W, G] = F(!1), [K, q] = F(!1), [J, Y] = F(null), [X, Z] = F({
+		name: "",
+		email: "",
+		phone: "",
+		company: ""
+	});
+	oe(() => {
+		O && Z({
+			name: O.name,
+			email: O.email,
+			phone: O.phone,
+			company: O.company ?? ""
+		});
+	}, [O]);
+	let he = () => D?.(f(E, "customers")), Q = (e) => D?.(f(E, e)), $ = () => {
+		Y(null), G(!0);
+	};
+	return T ? k ? /* @__PURE__ */ I(te, { message: "Loading customer details..." }) : B || !O ? /* @__PURE__ */ I(ee, {
+		title: "Customer not found",
+		onRetry: V
+	}) : /* @__PURE__ */ L(A, {
+		title: O.name,
+		subtitle: O.company || O.email,
+		icon: /* @__PURE__ */ I(u, { size: 24 }),
+		headerActions: /* @__PURE__ */ L("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ L(v, {
+				variant: "outline",
+				onClick: he,
+				children: [/* @__PURE__ */ I(e, { size: 16 }), " Back"]
+			}), W ? /* @__PURE__ */ L(ce, { children: [/* @__PURE__ */ L(v, {
+				variant: "outline",
+				onClick: () => {
+					Y(null), G(!1), O && Z({
+						name: O.name,
+						email: O.email,
+						phone: O.phone,
+						company: O.company ?? ""
+					});
+				},
+				disabled: K,
+				children: [/* @__PURE__ */ I(d, { size: 16 }), " Cancel"]
+			}), /* @__PURE__ */ L(v, {
+				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__ */ I(s, { size: 16 }),
+					" ",
+					K ? "Saving…" : "Save"
+				]
+			})] }) : /* @__PURE__ */ L(v, {
+				onClick: $,
+				children: [/* @__PURE__ */ I(c, { size: 16 }), " Edit"]
+			})]
+		}),
+		headerContent: /* @__PURE__ */ L("div", {
+			className: "flex items-center gap-4",
+			children: [
+				/* @__PURE__ */ I(re, { type: O.type }),
+				/* @__PURE__ */ I(_, {
+					variant: O.isActive ? "default" : "secondary",
+					children: O.isActive ? "Active" : "Inactive"
+				}),
+				/* @__PURE__ */ L("div", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ I(l, {
+						size: 16,
+						className: "text-status-warning-text fill-current"
+					}), /* @__PURE__ */ I("span", {
+						className: "font-medium",
+						children: O.rating.toFixed(1)
+					})]
+				})
+			]
+		}),
+		children: [
+			/* @__PURE__ */ I(z, {
+				icon: /* @__PURE__ */ I(u, { 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__ */ I(le, {
+				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__ */ I(n, { size: 16 }),
+					onClick: () => Q("orders/new")
+				}, {
+					id: "edit",
+					label: "Update contact details",
+					description: "Keep email, phone and address current.",
+					icon: /* @__PURE__ */ I(c, { size: 16 }),
+					onClick: $
+				}]
+			}),
+			U && /* @__PURE__ */ I("div", {
+				className: "mb-2",
+				children: /* @__PURE__ */ I(ie, { message: U })
+			}),
+			/* @__PURE__ */ L("div", {
+				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+				children: [/* @__PURE__ */ L("div", {
+					className: "lg:col-span-2 space-y-6",
+					children: [
+						/* @__PURE__ */ L(R, { children: [/* @__PURE__ */ I("h2", {
+							className: "text-base font-semibold text-text-primary mb-4",
+							children: "Contact Information"
+						}), W ? /* @__PURE__ */ L("div", {
+							className: "space-y-4",
+							children: [/* @__PURE__ */ I(j, { message: J }), /* @__PURE__ */ L("div", {
+								className: "grid grid-cols-1 md:grid-cols-2 gap-4",
+								children: [
+									/* @__PURE__ */ L("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ L(w, {
+											htmlFor: "edit-name",
+											children: ["Name ", /* @__PURE__ */ I("span", {
+												className: "text-status-error-text",
+												children: "*"
+											})]
+										}), /* @__PURE__ */ I(C, {
+											id: "edit-name",
+											value: X.name,
+											onChange: (e) => Z((t) => ({
+												...t,
+												name: e.target.value
+											}))
+										})]
+									}),
+									/* @__PURE__ */ L("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ I(w, {
+											htmlFor: "edit-company",
+											children: "Company"
+										}), /* @__PURE__ */ I(C, {
+											id: "edit-company",
+											value: X.company,
+											onChange: (e) => Z((t) => ({
+												...t,
+												company: e.target.value
+											})),
+											placeholder: "Company name (for B2B accounts)"
+										})]
+									}),
+									/* @__PURE__ */ L("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ I(w, {
+											htmlFor: "edit-email",
+											children: "Email"
+										}), /* @__PURE__ */ I(C, {
+											id: "edit-email",
+											type: "email",
+											value: X.email,
+											onChange: (e) => Z((t) => ({
+												...t,
+												email: e.target.value
+											}))
+										})]
+									}),
+									/* @__PURE__ */ L("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ I(w, {
+											htmlFor: "edit-phone",
+											children: "Phone"
+										}), /* @__PURE__ */ I(C, {
+											id: "edit-phone",
+											value: X.phone,
+											onChange: (e) => Z((t) => ({
+												...t,
+												phone: e.target.value
+											}))
+										})]
+									})
+								]
+							})]
+						}) : /* @__PURE__ */ L("div", {
+							className: "grid grid-cols-1 md:grid-cols-2 gap-6",
+							children: [/* @__PURE__ */ L("div", {
+								className: "space-y-4",
+								children: [/* @__PURE__ */ L("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ I(r, {
+										size: 18,
+										className: "text-text-secondary"
+									}), /* @__PURE__ */ L("div", { children: [/* @__PURE__ */ I("p", {
+										className: "text-sm text-text-secondary",
+										children: "Email"
+									}), /* @__PURE__ */ I("p", {
+										className: "font-medium",
+										children: O.email || "—"
+									})] })]
+								}), /* @__PURE__ */ L("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ I(o, {
+										size: 18,
+										className: "text-text-secondary"
+									}), /* @__PURE__ */ L("div", { children: [/* @__PURE__ */ I("p", {
+										className: "text-sm text-text-secondary",
+										children: "Phone"
+									}), /* @__PURE__ */ I("p", {
+										className: "font-medium",
+										children: O.phone || "—"
+									})] })]
+								})]
+							}), /* @__PURE__ */ L("div", {
+								className: "space-y-4",
+								children: [O.company && /* @__PURE__ */ L("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ I(t, {
+										size: 18,
+										className: "text-text-secondary"
+									}), /* @__PURE__ */ L("div", { children: [/* @__PURE__ */ I("p", {
+										className: "text-sm text-text-secondary",
+										children: "Company"
+									}), /* @__PURE__ */ I("p", {
+										className: "font-medium",
+										children: O.company
+									})] })]
+								}), (() => {
+									let e = ue(O.website);
+									return e ? /* @__PURE__ */ L("div", { children: [/* @__PURE__ */ I("p", {
+										className: "text-sm text-text-secondary",
+										children: "Website"
+									}), /* @__PURE__ */ I("a", {
+										href: e,
+										target: "_blank",
+										rel: "noopener noreferrer",
+										className: "text-primary hover:underline",
+										children: e
+									})] }) : null;
+								})()]
+							})]
+						})] }),
+						/* @__PURE__ */ L(y, { children: [/* @__PURE__ */ I(x, { children: /* @__PURE__ */ L(S, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ I(i, { size: 18 }), " Address"]
+						}) }), /* @__PURE__ */ I(b, { children: /* @__PURE__ */ I("p", { children: M(O.address) }) })] }),
+						O.notes && /* @__PURE__ */ L(y, { children: [/* @__PURE__ */ I(x, { children: /* @__PURE__ */ L(S, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ I(n, { size: 18 }), " Notes"]
+						}) }), /* @__PURE__ */ I(b, { children: /* @__PURE__ */ I("p", { children: O.notes }) })] }),
+						/* @__PURE__ */ L(y, { children: [/* @__PURE__ */ L(x, {
+							className: "flex flex-row items-center justify-between",
+							children: [/* @__PURE__ */ L(S, {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ I(a, { size: 18 }), " Orders"]
+							}), /* @__PURE__ */ L(v, {
+								variant: "outline",
+								size: "sm",
+								onClick: () => Q("orders/new"),
+								children: [/* @__PURE__ */ I(n, { size: 14 }), " New order"]
+							})]
+						}), /* @__PURE__ */ I(b, { children: pe ? /* @__PURE__ */ I("p", {
+							className: "text-text-secondary text-center py-4",
+							children: "Loading orders…"
+						}) : H.length > 0 ? /* @__PURE__ */ I("div", {
+							className: "space-y-2",
+							children: H.map((e) => /* @__PURE__ */ L("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__ */ L("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ I("p", {
+										className: "font-medium truncate",
+										children: e.orderNumber
+									}), /* @__PURE__ */ L("p", {
+										className: "text-sm text-text-secondary",
+										children: [
+											P(e.createdAt, "relative"),
+											" ·",
+											" ",
+											N(e.pricing.total)
+										]
+									})]
+								}), /* @__PURE__ */ I(ne, {
+									status: e.status,
+									type: "order",
+									size: "sm"
+								})]
+							}, e.id))
+						}) : /* @__PURE__ */ L("div", {
+							className: "text-center py-6",
+							children: [
+								/* @__PURE__ */ I(a, {
+									size: 32,
+									className: "mx-auto mb-2 text-text-secondary opacity-50"
+								}),
+								/* @__PURE__ */ I("p", {
+									className: "text-text-secondary",
+									children: "No orders yet for this customer"
+								}),
+								/* @__PURE__ */ I("button", {
+									type: "button",
+									onClick: () => Q("orders/new"),
+									className: "mt-1 text-sm text-primary hover:underline",
+									children: "Book their first delivery"
+								})
+							]
+						}) })] })
+					]
+				}), /* @__PURE__ */ L("div", {
+					className: "space-y-6",
+					children: [/* @__PURE__ */ L(y, { children: [/* @__PURE__ */ I(x, { children: /* @__PURE__ */ I(S, { children: "Business Details" }) }), /* @__PURE__ */ L(b, {
+						className: "space-y-3",
+						children: [
+							O.businessLicense && /* @__PURE__ */ L("div", { children: [/* @__PURE__ */ I("p", {
+								className: "text-sm text-text-secondary",
+								children: "Business License"
+							}), /* @__PURE__ */ I("p", {
+								className: "font-mono",
+								children: O.businessLicense
+							})] }),
+							O.taxId && /* @__PURE__ */ L("div", { children: [/* @__PURE__ */ I("p", {
+								className: "text-sm text-text-secondary",
+								children: "Tax ID"
+							}), /* @__PURE__ */ I("p", {
+								className: "font-mono",
+								children: O.taxId
+							})] }),
+							/* @__PURE__ */ L("div", { children: [/* @__PURE__ */ I("p", {
+								className: "text-sm text-text-secondary",
+								children: "Preferred Contact"
+							}), /* @__PURE__ */ I("p", {
+								className: "capitalize",
+								children: O.preferredContactMethod
+							})] }),
+							/* @__PURE__ */ L("div", { children: [/* @__PURE__ */ I("p", {
+								className: "text-sm text-text-secondary",
+								children: "Marketing Opt-in"
+							}), /* @__PURE__ */ I(_, {
+								variant: O.marketingOptIn ? "default" : "secondary",
+								children: O.marketingOptIn ? "Yes" : "No"
+							})] })
+						]
+					})] }), /* @__PURE__ */ L(y, { children: [/* @__PURE__ */ I(x, { children: /* @__PURE__ */ I(S, { children: "Account Info" }) }), /* @__PURE__ */ L(b, {
+						className: "space-y-3",
+						children: [/* @__PURE__ */ L("div", { children: [/* @__PURE__ */ I("p", {
+							className: "text-sm text-text-secondary",
+							children: "Created"
+						}), /* @__PURE__ */ I("p", { children: P(O.createdAt, "full") })] }), /* @__PURE__ */ L("div", { children: [/* @__PURE__ */ I("p", {
+							className: "text-sm text-text-secondary",
+							children: "Last Updated"
+						}), /* @__PURE__ */ I("p", { children: P(O.updatedAt, "relative") })] })]
+					})] })]
+				})]
+			})
+		]
+	}) : /* @__PURE__ */ I(de, {});
+}
+//#endregion
+export { B as default };