@burdenoff/microfe-movethewheels 2026.703.2 → 2026.703.4

package/dist/CustomerDetailsPage-BCeMmOFe.js

@@ -0,0 +1,615 @@
+import { A as e, F as t, I as n, L as r, P as i, R as a, ct as o, d as s, f as c, g as l, h as u, i as d, j as f, l as p, lt as m, n as h, ot as g, r as _, u as v } from "./PageLayout-D4LDHJJq.js";
+import { t as y } from "./arrow-left-n48Y-Wis.js";
+import { t as b } from "./file-text-D-1uvLZG.js";
+import { n as x, t as S } from "./Notice-CSoDYKw9.js";
+import { n as ee, t as te } from "./phone-DVSZHt_j.js";
+import { t as ne } from "./map-pin-Dznl5l40.js";
+import { t as C } from "./package-CcRttV2N.js";
+import { t as w } from "./save-DJE8Fpdv.js";
+import { t as T } from "./square-pen-D-6JYrVQ.js";
+import { t as re } from "./star-BpRlUZuU.js";
+import { t as E } from "./users-CCrq-w0C.js";
+import { t as ie } from "./x-tMeDMcCw.js";
+import { r as ae } from "./useOrders-B465S2nt.js";
+import { r as D, t as O } from "./useCustomers-BPW4__PR.js";
+import { i as k, r as oe } from "./StatusBadge-C87mDpDP.js";
+import { t as A } from "./FormError-cuLV2jVD.js";
+import { n as se, r as j, t as ce } from "./formatters-BQr-aR5W.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 = m("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: s, navigate: c } = g(), { createCustomer: l } = D(), [u, p] = M({
+		name: "",
+		type: "b2c",
+		email: "",
+		phone: "",
+		company: ""
+	}), [m, h] = M(!1), [_, b] = M(null), x = () => c?.(o(s, "customers")), S = async (e) => {
+		if (e.preventDefault(), !u.name.trim()) {
+			b("Customer name is required.");
+			return;
+		}
+		h(!0), b(null);
+		try {
+			let e = await l({
+				name: u.name.trim(),
+				type: u.type,
+				email: u.email.trim() || void 0,
+				phone: u.phone.trim() || void 0,
+				company: u.company.trim() || void 0
+			});
+			c?.(o(s, `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(d, {
+		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(v, {
+				variant: "outline",
+				onClick: x,
+				disabled: m,
+				children: [/* @__PURE__ */ N(y, { size: 16 }), " Cancel"]
+			}), /* @__PURE__ */ P(v, {
+				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: _ }), /* @__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(f, {
+								htmlFor: "name",
+								children: ["Name ", /* @__PURE__ */ N("span", {
+									className: "text-status-error-text",
+									children: "*"
+								})]
+							}), /* @__PURE__ */ N(e, {
+								id: "name",
+								value: u.name,
+								onChange: (e) => p((t) => ({
+									...t,
+									name: e.target.value
+								})),
+								placeholder: "Acme Corp or Jane Doe",
+								required: !0
+							})]
+						}), /* @__PURE__ */ P("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ N(f, {
+								htmlFor: "type",
+								children: "Customer Type"
+							}), /* @__PURE__ */ P(i, {
+								value: u.type,
+								onValueChange: (e) => p((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(f, {
+								htmlFor: "email",
+								children: "Email"
+							}), /* @__PURE__ */ N(e, {
+								id: "email",
+								type: "email",
+								value: u.email,
+								onChange: (e) => p((t) => ({
+									...t,
+									email: e.target.value
+								})),
+								placeholder: "customer@example.com"
+							})]
+						}), /* @__PURE__ */ P("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ N(f, {
+								htmlFor: "phone",
+								children: "Phone"
+							}), /* @__PURE__ */ N(e, {
+								id: "phone",
+								value: u.phone,
+								onChange: (e) => p((t) => ({
+									...t,
+									phone: e.target.value
+								})),
+								placeholder: "+1-555-0100"
+							})]
+						})]
+					}),
+					/* @__PURE__ */ P("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ N(f, {
+							htmlFor: "company",
+							children: "Company"
+						}), /* @__PURE__ */ N(e, {
+							id: "company",
+							value: u.company,
+							onChange: (e) => p((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: m, 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?.(o(n, "customers")), Q = (e) => r?.(o(n, e)), $ = () => {
+		Y(null), G(!0);
+	};
+	return t ? a ? /* @__PURE__ */ N(_, { message: "Loading customer details..." }) : m || !i ? /* @__PURE__ */ N(h, {
+		title: "Customer not found",
+		onRetry: V
+	}) : /* @__PURE__ */ P(d, {
+		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(v, {
+				variant: "outline",
+				onClick: he,
+				children: [/* @__PURE__ */ N(y, { size: 16 }), " Back"]
+			}), W ? /* @__PURE__ */ P(de, { children: [/* @__PURE__ */ P(v, {
+				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(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__ */ N(w, { size: 16 }),
+					" ",
+					K ? "Saving…" : "Save"
+				]
+			})] }) : /* @__PURE__ */ P(v, {
+				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(p, {
+					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(f, {
+											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(f, {
+											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(f, {
+											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(f, {
+											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(s, { children: [/* @__PURE__ */ N(u, { children: /* @__PURE__ */ P(l, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ N(ne, { size: 18 }), " Address"]
+						}) }), /* @__PURE__ */ N(c, { children: /* @__PURE__ */ N("p", { children: ce(i.address) }) })] }),
+						i.notes && /* @__PURE__ */ P(s, { children: [/* @__PURE__ */ N(u, { children: /* @__PURE__ */ P(l, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ N(b, { size: 18 }), " Notes"]
+						}) }), /* @__PURE__ */ N(c, { children: /* @__PURE__ */ N("p", { children: i.notes }) })] }),
+						/* @__PURE__ */ P(s, { children: [/* @__PURE__ */ P(u, {
+							className: "flex flex-row items-center justify-between",
+							children: [/* @__PURE__ */ P(l, {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ N(C, { size: 18 }), " Orders"]
+							}), /* @__PURE__ */ P(v, {
+								variant: "outline",
+								size: "sm",
+								onClick: () => Q("orders/new"),
+								children: [/* @__PURE__ */ N(b, { size: 14 }), " New order"]
+							})]
+						}), /* @__PURE__ */ N(c, { 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(s, { children: [/* @__PURE__ */ N(u, { children: /* @__PURE__ */ N(l, { children: "Business Details" }) }), /* @__PURE__ */ P(c, {
+						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(p, {
+								variant: i.marketingOptIn ? "default" : "secondary",
+								children: i.marketingOptIn ? "Yes" : "No"
+							})] })
+						]
+					})] }), /* @__PURE__ */ P(s, { children: [/* @__PURE__ */ N(u, { children: /* @__PURE__ */ N(l, { children: "Account Info" }) }), /* @__PURE__ */ P(c, {
+						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 };