@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.5

package/dist/OrderDetailsPage-CwYHwk1K.js

@@ -0,0 +1,584 @@
+import { F as e, G as t, H as ee, I as n, K as te, L as r, P as i, R as a, U as ne, W as o, d as s, f as c, g as l, h as u, i as re, j as d, l as f, lt as p, n as ie, q as m, r as ae, st as oe, u as h, ut as g, z as _ } from "./PageLayout-BniRJaQ6.js";
+import { t as se } from "./arrow-left-ClW4Isj7.js";
+import { t as ce } from "./arrow-right-CmKOmIkh.js";
+import { t as v } from "./circle-check-big-C-p4eNwn.js";
+import { t as le } from "./clock-dRGG4rkF.js";
+import { t as ue } from "./dollar-sign-B6RoYHHz.js";
+import { t as de } from "./DocumentsCard-edDkgnJj.js";
+import { t as fe } from "./file-text-BuDx4hZp.js";
+import { n as pe, t as me } from "./Notice-DOO-tjpV.js";
+import { n as he, t as y } from "./phone-Cl32EXKW.js";
+import { t as b } from "./map-pin-CqN1bbT1.js";
+import { t as x } from "./package-DmRF7iQD.js";
+import { t as S } from "./square-pen-BcfB3Grd.js";
+import { t as ge } from "./truck-9rLDncav.js";
+import { t as _e } from "./user-check-IMhk-qkX.js";
+import { t as ve } from "./user-DU51el3m.js";
+import { r as ye, t as be } from "./useOrders-BSiqo61w.js";
+import { r as xe } from "./useFleet-g5Yri0G8.js";
+import { i as Se, n as Ce, r as C, t as we } from "./StatusBadge-BNHXYvZx.js";
+import { t as Te } from "./FormError-BKcb_wT-.js";
+import { n as w, r as T, t as E } from "./formatters-FWJDwTFv.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 Ee, PagePurpose as De } from "@burdenoff/fe-libs/ui";
+//#region node_modules/lucide-react/dist/esm/icons/circle-x.js
+var Oe = g("CircleX", [
+	["circle", {
+		cx: "12",
+		cy: "12",
+		r: "10",
+		key: "1mglay"
+	}],
+	["path", {
+		d: "m15 9-6 6",
+		key: "1uzhvr"
+	}],
+	["path", {
+		d: "m9 9 6 6",
+		key: "z0biqf"
+	}]
+]), M = g("Printer", [
+	["path", {
+		d: "M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2",
+		key: "143wyd"
+	}],
+	["path", {
+		d: "M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6",
+		key: "1itne7"
+	}],
+	["rect", {
+		x: "6",
+		y: "14",
+		width: "12",
+		height: "8",
+		rx: "1",
+		key: "1ue0tg"
+	}]
+]), N = [
+	"pending",
+	"confirmed",
+	"assigned",
+	"picked_up",
+	"in_transit",
+	"out_for_delivery",
+	"delivered"
+], P = {
+	pending: "Pending",
+	confirmed: "Confirmed",
+	assigned: "Assigned",
+	picked_up: "Picked Up",
+	in_transit: "In Transit",
+	out_for_delivery: "Out for Delivery",
+	delivered: "Delivered",
+	cancelled: "Cancelled",
+	failed: "Failed"
+};
+function ke(e) {
+	let t = N.indexOf(e);
+	return t === -1 || t >= N.length - 1 ? null : N[t + 1];
+}
+function F() {
+	let { orderId: g } = O(), { basePath: N, navigate: F } = oe(), { order: I, isLoading: Ae, error: je, refetch: L } = be(g), { updateOrder: Me, updateOrderStatus: Ne } = ye(), { vehicles: Pe, drivers: Fe } = xe(), { message: R, notify: z } = pe(), [B, V] = D(""), [H, U] = D(""), [W, G] = D(!1), [K, q] = D(!1), [J, Y] = D(null), X = Pe.filter((e) => e.status === "available" || e.id === I?.vehicleId), Z = Fe.filter((e) => e.status === "available" || e.id === I?.driverId), Ie = async () => {
+		if (!g || !B && !H) {
+			Y("Pick a vehicle and/or a driver to assign.");
+			return;
+		}
+		G(!0), Y(null);
+		try {
+			await Me(g, {
+				vehicleId: B || void 0,
+				driverId: H || void 0
+			}), z("Assignment updated."), V(""), U(""), L();
+		} catch (e) {
+			Y(e instanceof Error ? e.message : "Failed to update assignment.");
+		} finally {
+			G(!1);
+		}
+	}, Q = async (e, t) => {
+		if (g) {
+			q(!0), Y(null);
+			try {
+				await Ne(g, e), z(t), L();
+			} catch (e) {
+				Y(e instanceof Error ? e.message : "Failed to update status.");
+			} finally {
+				q(!1);
+			}
+		}
+	}, $ = (e) => {
+		F && F(p(N, e));
+	};
+	return Ae ? /* @__PURE__ */ k(ae, { message: "Loading order details..." }) : je || !I ? /* @__PURE__ */ k(ie, {
+		title: "Order not found",
+		message: "The order you're looking for doesn't exist or has been removed.",
+		onRetry: L
+	}) : /* @__PURE__ */ A(re, {
+		title: I.orderNumber,
+		subtitle: `Created ${T(I.createdAt, "full")}`,
+		icon: /* @__PURE__ */ k(x, { size: 24 }),
+		headerActions: /* @__PURE__ */ A("div", {
+			className: "flex gap-2",
+			children: [
+				/* @__PURE__ */ A(h, {
+					variant: "outline",
+					onClick: () => {
+						F && F(p(N, "orders"));
+					},
+					children: [/* @__PURE__ */ k(se, { size: 16 }), "Back"]
+				}),
+				/* @__PURE__ */ A(h, {
+					variant: "outline",
+					children: [/* @__PURE__ */ k(M, { size: 16 }), "Print"]
+				}),
+				/* @__PURE__ */ A(h, {
+					onClick: () => $(`orders/${g}/edit`),
+					children: [/* @__PURE__ */ k(S, { size: 16 }), "Edit"]
+				})
+			]
+		}),
+		headerContent: /* @__PURE__ */ A("div", {
+			className: "flex flex-wrap gap-2",
+			children: [
+				/* @__PURE__ */ k(C, {
+					status: I.status,
+					type: "order"
+				}),
+				/* @__PURE__ */ k(Ce, { priority: I.priority }),
+				/* @__PURE__ */ k(Se, { type: I.orderType }),
+				/* @__PURE__ */ k(we, { status: I.pricing.paymentStatus })
+			]
+		}),
+		children: [
+			/* @__PURE__ */ k(De, {
+				icon: /* @__PURE__ */ k(x, { size: 18 }),
+				children: "Everything about this one delivery in a single place — who it's for, where it's going, what's inside, the running cost and the full status history. Use this page to review the order, hand it to a driver, print the docket, or jump into live tracking."
+			}),
+			/* @__PURE__ */ k(Ee, {
+				storageKey: "movethewheels-order-details",
+				steps: [
+					{
+						id: "track",
+						label: "Track this order live",
+						description: "See where the shipment is right now on the map.",
+						icon: /* @__PURE__ */ k(b, { size: 16 }),
+						onClick: () => $(`tracking?order=${I.id}`)
+					},
+					{
+						id: "edit",
+						label: "Edit order details",
+						description: "Update items, addresses or instructions before dispatch.",
+						icon: /* @__PURE__ */ k(S, { size: 16 }),
+						onClick: () => $(`orders/${g}/edit`)
+					},
+					{
+						id: "print",
+						label: "Print the delivery docket",
+						description: "Generate a printable copy for the driver or warehouse.",
+						icon: /* @__PURE__ */ k(M, { size: 16 }),
+						onClick: () => window.print()
+					}
+				]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+				children: [/* @__PURE__ */ A("div", {
+					className: "lg:col-span-2 space-y-6",
+					children: [
+						/* @__PURE__ */ A(s, { children: [/* @__PURE__ */ k(u, { children: /* @__PURE__ */ A(l, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ k(ve, { size: 18 }), "Customer Information"]
+						}) }), /* @__PURE__ */ k(c, { children: /* @__PURE__ */ A("div", {
+							className: "grid grid-cols-1 md:grid-cols-2 gap-6",
+							children: [/* @__PURE__ */ A("div", { children: [
+								/* @__PURE__ */ k("h4", {
+									className: "font-medium mb-2",
+									children: I.customerInfo.name
+								}),
+								I.customerInfo.company && /* @__PURE__ */ k("p", {
+									className: "text-sm text-text-secondary mb-2",
+									children: I.customerInfo.company
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "space-y-1 text-sm",
+									children: [/* @__PURE__ */ A("p", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ k(he, {
+											size: 14,
+											className: "text-text-secondary"
+										}), I.customerInfo.email]
+									}), /* @__PURE__ */ A("p", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ k(y, {
+											size: 14,
+											className: "text-text-secondary"
+										}), I.customerInfo.phone]
+									})]
+								})
+							] }), /* @__PURE__ */ A("div", { children: [I.customerInfo.preferredDeliveryTime && /* @__PURE__ */ A("div", {
+								className: "mb-2",
+								children: [/* @__PURE__ */ k("p", {
+									className: "text-sm text-text-secondary",
+									children: "Preferred Delivery Time"
+								}), /* @__PURE__ */ k("p", {
+									className: "text-sm",
+									children: I.customerInfo.preferredDeliveryTime
+								})]
+							}), I.customerInfo.deliveryInstructions && /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
+								className: "text-sm text-text-secondary",
+								children: "Delivery Instructions"
+							}), /* @__PURE__ */ k("p", {
+								className: "text-sm",
+								children: I.customerInfo.deliveryInstructions
+							})] })] })]
+						}) })] }),
+						/* @__PURE__ */ A(s, { children: [/* @__PURE__ */ k(u, { children: /* @__PURE__ */ A(l, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ k(b, { size: 18 }), "Addresses"]
+						}) }), /* @__PURE__ */ k(c, { children: /* @__PURE__ */ A("div", {
+							className: "grid grid-cols-1 md:grid-cols-2 gap-6",
+							children: [/* @__PURE__ */ A("div", { children: [
+								/* @__PURE__ */ k("h4", {
+									className: "font-medium mb-2 flex items-center gap-2",
+									children: /* @__PURE__ */ k(f, {
+										variant: "outline",
+										children: "Pickup"
+									})
+								}),
+								/* @__PURE__ */ k("p", {
+									className: "text-sm",
+									children: E(I.pickupAddress)
+								}),
+								I.scheduledPickup && /* @__PURE__ */ A("p", {
+									className: "text-sm text-text-secondary mt-2",
+									children: ["Scheduled: ", T(I.scheduledPickup, "full")]
+								}),
+								I.actualPickup && /* @__PURE__ */ A("p", {
+									className: "text-sm text-status-success-text mt-1",
+									children: [
+										/* @__PURE__ */ k(v, {
+											size: 14,
+											className: "inline mr-1"
+										}),
+										"Picked up: ",
+										T(I.actualPickup, "full")
+									]
+								})
+							] }), /* @__PURE__ */ A("div", { children: [
+								/* @__PURE__ */ k("h4", {
+									className: "font-medium mb-2 flex items-center gap-2",
+									children: /* @__PURE__ */ k(f, {
+										variant: "outline",
+										children: "Delivery"
+									})
+								}),
+								/* @__PURE__ */ k("p", {
+									className: "text-sm",
+									children: E(I.deliveryAddress)
+								}),
+								I.scheduledDelivery && /* @__PURE__ */ A("p", {
+									className: "text-sm text-text-secondary mt-2",
+									children: ["Scheduled: ", T(I.scheduledDelivery, "full")]
+								}),
+								I.actualDelivery && /* @__PURE__ */ A("p", {
+									className: "text-sm text-status-success-text mt-1",
+									children: [
+										/* @__PURE__ */ k(v, {
+											size: 14,
+											className: "inline mr-1"
+										}),
+										"Delivered: ",
+										T(I.actualDelivery, "full")
+									]
+								})
+							] })]
+						}) })] }),
+						/* @__PURE__ */ A(s, { children: [/* @__PURE__ */ k(u, { children: /* @__PURE__ */ A(l, {
+							className: "flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ k(x, { size: 18 }),
+								"Order Items (",
+								I.items.length,
+								")"
+							]
+						}) }), /* @__PURE__ */ k(c, {
+							className: "p-0",
+							children: /* @__PURE__ */ A(ee, { children: [/* @__PURE__ */ k(te, { children: /* @__PURE__ */ A(m, { children: [
+								/* @__PURE__ */ k(t, { children: "Item" }),
+								/* @__PURE__ */ k(t, { children: "SKU" }),
+								/* @__PURE__ */ k(t, {
+									className: "text-center",
+									children: "Qty"
+								}),
+								/* @__PURE__ */ k(t, {
+									className: "text-right",
+									children: "Unit Price"
+								}),
+								/* @__PURE__ */ k(t, {
+									className: "text-right",
+									children: "Total"
+								})
+							] }) }), /* @__PURE__ */ k(ne, { children: I.items.map((e) => /* @__PURE__ */ A(m, { children: [
+								/* @__PURE__ */ k(o, { children: /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
+									className: "font-medium",
+									children: e.name
+								}), e.description && /* @__PURE__ */ k("p", {
+									className: "text-sm text-text-secondary",
+									children: e.description
+								})] }) }),
+								/* @__PURE__ */ k(o, {
+									className: "font-mono text-sm",
+									children: e.sku
+								}),
+								/* @__PURE__ */ k(o, {
+									className: "text-center",
+									children: e.quantity
+								}),
+								/* @__PURE__ */ k(o, {
+									className: "text-right",
+									children: w(e.value)
+								}),
+								/* @__PURE__ */ k(o, {
+									className: "text-right font-medium",
+									children: w(e.value * e.quantity)
+								})
+							] }, e.id)) })] })
+						})] }),
+						/* @__PURE__ */ A(s, { children: [/* @__PURE__ */ k(u, { children: /* @__PURE__ */ A(l, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ k(le, { size: 18 }), "Order Timeline"]
+						}) }), /* @__PURE__ */ k(c, { children: /* @__PURE__ */ k("div", {
+							className: "relative",
+							children: I.timeline.map((e, t) => /* @__PURE__ */ A("div", {
+								className: "flex gap-4 pb-6 last:pb-0",
+								children: [/* @__PURE__ */ A("div", {
+									className: "relative",
+									children: [/* @__PURE__ */ k("div", { className: "w-3 h-3 rounded-full bg-action-primary-bg mt-1.5" }), t < I.timeline.length - 1 && /* @__PURE__ */ k("div", { className: "absolute top-4 left-1.5 w-px h-full -ml-px bg-border" })]
+								}), /* @__PURE__ */ A("div", {
+									className: "flex-1",
+									children: [
+										/* @__PURE__ */ A("div", {
+											className: "flex items-center gap-2 mb-1",
+											children: [/* @__PURE__ */ k(C, {
+												status: e.status,
+												type: "order",
+												size: "sm"
+											}), /* @__PURE__ */ k("span", {
+												className: "text-sm text-text-secondary",
+												children: T(e.timestamp, "full")
+											})]
+										}),
+										e.notes && /* @__PURE__ */ k("p", {
+											className: "text-sm",
+											children: e.notes
+										}),
+										/* @__PURE__ */ A("p", {
+											className: "text-xs text-text-secondary",
+											children: ["by ", e.performedBy]
+										})
+									]
+								})]
+							}, t))
+						}) })] })
+					]
+				}), /* @__PURE__ */ A("div", {
+					className: "space-y-6",
+					children: [
+						/* @__PURE__ */ A(j, { children: [/* @__PURE__ */ A("h2", {
+							className: "flex items-center gap-2 text-base font-semibold text-text-primary mb-4",
+							children: [/* @__PURE__ */ k(ue, { size: 18 }), "Order Summary"]
+						}), /* @__PURE__ */ A("div", {
+							className: "space-y-3",
+							children: [
+								/* @__PURE__ */ A("div", {
+									className: "flex justify-between text-sm",
+									children: [/* @__PURE__ */ k("span", {
+										className: "text-text-secondary",
+										children: "Subtotal"
+									}), /* @__PURE__ */ k("span", { children: w(I.pricing.subtotal) })]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "flex justify-between text-sm",
+									children: [/* @__PURE__ */ k("span", {
+										className: "text-text-secondary",
+										children: "Delivery"
+									}), /* @__PURE__ */ k("span", { children: w(I.pricing.fees.delivery) })]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "flex justify-between text-sm",
+									children: [/* @__PURE__ */ k("span", {
+										className: "text-text-secondary",
+										children: "Handling"
+									}), /* @__PURE__ */ k("span", { children: w(I.pricing.fees.handling) })]
+								}),
+								I.pricing.fees.insurance && /* @__PURE__ */ A("div", {
+									className: "flex justify-between text-sm",
+									children: [/* @__PURE__ */ k("span", {
+										className: "text-text-secondary",
+										children: "Insurance"
+									}), /* @__PURE__ */ k("span", { children: w(I.pricing.fees.insurance) })]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "flex justify-between text-sm",
+									children: [/* @__PURE__ */ k("span", {
+										className: "text-text-secondary",
+										children: "Taxes"
+									}), /* @__PURE__ */ k("span", { children: w(I.pricing.taxes) })]
+								}),
+								/* @__PURE__ */ k(_, {}),
+								/* @__PURE__ */ A("div", {
+									className: "flex justify-between font-medium",
+									children: [/* @__PURE__ */ k("span", { children: "Total" }), /* @__PURE__ */ k("span", {
+										className: "text-lg",
+										children: w(I.pricing.total)
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "pt-2",
+									children: [/* @__PURE__ */ k("p", {
+										className: "text-sm text-text-secondary",
+										children: "Payment Method"
+									}), /* @__PURE__ */ k("p", {
+										className: "text-sm capitalize",
+										children: I.pricing.paymentMethod.replace("_", " ")
+									})]
+								})
+							]
+						})] }),
+						/* @__PURE__ */ A(s, { children: [/* @__PURE__ */ k(u, { children: /* @__PURE__ */ A(l, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ k(ge, { size: 18 }), "Assignment"]
+						}) }), /* @__PURE__ */ k(c, { children: /* @__PURE__ */ A("div", {
+							className: "space-y-4",
+							children: [
+								J && /* @__PURE__ */ k(Te, { message: J }),
+								R && /* @__PURE__ */ k(me, { message: R }),
+								/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
+									className: "text-sm text-text-secondary",
+									children: "Tracking Number"
+								}), /* @__PURE__ */ k("p", {
+									className: "text-sm font-mono",
+									children: I.trackingNumber || "—"
+								})] }),
+								/* @__PURE__ */ k(_, {}),
+								/* @__PURE__ */ A("div", {
+									className: "space-y-3",
+									children: [
+										/* @__PURE__ */ A("div", {
+											className: "space-y-1.5",
+											children: [/* @__PURE__ */ k(d, {
+												htmlFor: "assign-vehicle",
+												children: "Vehicle"
+											}), /* @__PURE__ */ A(i, {
+												value: B,
+												onValueChange: V,
+												children: [/* @__PURE__ */ k(r, {
+													id: "assign-vehicle",
+													children: /* @__PURE__ */ k(a, { placeholder: I.vehicleId ? `Current: ${I.vehicleId}` : "Select a vehicle" })
+												}), /* @__PURE__ */ k(e, { children: X.length === 0 ? /* @__PURE__ */ k(n, {
+													value: "none",
+													disabled: !0,
+													children: "No available vehicles"
+												}) : X.map((e) => /* @__PURE__ */ A(n, {
+													value: e.id,
+													children: [
+														e.vehicleNumber,
+														" (",
+														e.type,
+														")"
+													]
+												}, e.id)) })]
+											})]
+										}),
+										/* @__PURE__ */ A("div", {
+											className: "space-y-1.5",
+											children: [/* @__PURE__ */ k(d, {
+												htmlFor: "assign-driver",
+												children: "Driver"
+											}), /* @__PURE__ */ A(i, {
+												value: H,
+												onValueChange: U,
+												children: [/* @__PURE__ */ k(r, {
+													id: "assign-driver",
+													children: /* @__PURE__ */ k(a, { placeholder: I.driverId ? `Current: ${I.driverId}` : "Select a driver" })
+												}), /* @__PURE__ */ k(e, { children: Z.length === 0 ? /* @__PURE__ */ k(n, {
+													value: "none",
+													disabled: !0,
+													children: "No available drivers"
+												}) : Z.map((e) => /* @__PURE__ */ A(n, {
+													value: e.id,
+													children: [
+														e.fullName,
+														" (",
+														e.employeeId,
+														")"
+													]
+												}, e.id)) })]
+											})]
+										}),
+										/* @__PURE__ */ A(h, {
+											className: "w-full",
+											onClick: Ie,
+											disabled: W || !B && !H,
+											children: [/* @__PURE__ */ k(_e, { size: 16 }), W ? "Assigning…" : "Assign driver & vehicle"]
+										})
+									]
+								}),
+								/* @__PURE__ */ k(_, {}),
+								/* @__PURE__ */ A("div", {
+									className: "space-y-2",
+									children: [
+										/* @__PURE__ */ A("p", {
+											className: "text-sm text-text-secondary",
+											children: ["Current status: ", /* @__PURE__ */ k("span", {
+												className: "font-medium",
+												children: P[I.status]
+											})]
+										}),
+										(() => {
+											let e = ke(I.status);
+											return e ? /* @__PURE__ */ A(h, {
+												variant: "outline",
+												className: "w-full",
+												onClick: () => Q(e, `Order advanced to ${P[e]}.`),
+												disabled: K,
+												children: [/* @__PURE__ */ k(ce, { size: 16 }), K ? "Updating…" : `Advance to ${P[e]}`]
+											}) : null;
+										})(),
+										I.status !== "cancelled" && I.status !== "delivered" && /* @__PURE__ */ A(h, {
+											variant: "outline",
+											className: "w-full text-status-error-text",
+											onClick: () => Q("cancelled", "Order cancelled."),
+											disabled: K,
+											children: [/* @__PURE__ */ k(Oe, { size: 16 }), "Cancel order"]
+										})
+									]
+								}),
+								/* @__PURE__ */ A(h, {
+									variant: "outline",
+									className: "w-full",
+									onClick: () => $(`tracking?order=${I.id}`),
+									children: [/* @__PURE__ */ k(b, { size: 16 }), "Track Order"]
+								})
+							]
+						}) })] }),
+						/* @__PURE__ */ k(de, {
+							entityType: "order",
+							entityId: I.id
+						}),
+						I.specialInstructions && /* @__PURE__ */ A(s, { children: [/* @__PURE__ */ k(u, { children: /* @__PURE__ */ A(l, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ k(fe, { size: 18 }), "Special Instructions"]
+						}) }), /* @__PURE__ */ k(c, { children: /* @__PURE__ */ k("p", {
+							className: "text-sm",
+							children: I.specialInstructions
+						}) })] })
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { F as default };