@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.5

package/dist/VehicleDetailsPage-D-8XPZ2G.js

@@ -0,0 +1,393 @@
+import { A as e, F as t, I as n, L as r, M as i, P as a, R as o, d as s, f as c, g as l, h as u, i as d, j as f, lt as p, n as m, r as h, st as g, u as _ } from "./PageLayout-BniRJaQ6.js";
+import { t as v } from "./arrow-left-ClW4Isj7.js";
+import { t as y } from "./DocumentsCard-edDkgnJj.js";
+import { t as b } from "./fuel-DLH1ag04.js";
+import { t as x } from "./map-pin-CqN1bbT1.js";
+import { t as S } from "./save-UDlog7hg.js";
+import { t as C } from "./square-pen-BcfB3Grd.js";
+import { t as w } from "./truck-9rLDncav.js";
+import { t as T } from "./wrench-Dg-sgH2e.js";
+import { a as E, r as D } from "./useFleet-g5Yri0G8.js";
+import { a as O, r as k } from "./StatusBadge-BNHXYvZx.js";
+import { t as A } from "./FormError-BKcb_wT-.js";
+import { r as j } from "./formatters-FWJDwTFv.js";
+import { useState as M } from "react";
+import { useParams as N } from "react-router-dom";
+import { jsx as P, jsxs as F } from "react/jsx-runtime";
+import { EmphasisPanel as I, NextSteps as L, PagePurpose as R } from "@burdenoff/fe-libs/ui";
+//#region src/movethewheels/pages/VehicleDetailsPage.tsx
+var z = [
+	{
+		value: "TRUCK",
+		label: "Truck"
+	},
+	{
+		value: "VAN",
+		label: "Van"
+	},
+	{
+		value: "MOTORCYCLE",
+		label: "Motorcycle"
+	},
+	{
+		value: "BICYCLE",
+		label: "Bicycle"
+	},
+	{
+		value: "FLATBED",
+		label: "Flatbed"
+	},
+	{
+		value: "REFRIGERATED",
+		label: "Refrigerated"
+	},
+	{
+		value: "SEMI_TRAILER",
+		label: "Semi-Trailer"
+	},
+	{
+		value: "DRONE",
+		label: "Drone"
+	}
+];
+function B() {
+	let { basePath: i, navigate: s } = g(), { createVehicle: c } = D(), [l, u] = M({
+		vehicleNumber: "",
+		type: "VAN",
+		make: "",
+		model: "",
+		licensePlate: ""
+	}), [m, h] = M(!1), [y, b] = M(null), x = () => s?.(p(i, "fleet/vehicles")), C = async (e) => {
+		if (e.preventDefault(), !l.vehicleNumber.trim()) {
+			b("Vehicle number is required.");
+			return;
+		}
+		h(!0), b(null);
+		try {
+			let e = await c({
+				vehicleNumber: l.vehicleNumber.trim(),
+				type: l.type,
+				make: l.make.trim() || void 0,
+				model: l.model.trim() || void 0,
+				licensePlate: l.licensePlate.trim() || void 0
+			});
+			s?.(p(i, `fleet/vehicles/${e.id}`));
+		} catch (e) {
+			console.error("Failed to create vehicle:", e), b(e instanceof Error ? e.message : "Failed to create vehicle. Please try again."), h(!1);
+		}
+	};
+	return /* @__PURE__ */ F(d, {
+		title: "Add Vehicle",
+		subtitle: "Register a new vehicle in your fleet",
+		icon: /* @__PURE__ */ P(w, { size: 24 }),
+		headerActions: /* @__PURE__ */ F("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ F(_, {
+				variant: "outline",
+				onClick: x,
+				disabled: m,
+				children: [/* @__PURE__ */ P(v, { size: 16 }), " Cancel"]
+			}), /* @__PURE__ */ F(_, {
+				onClick: C,
+				disabled: m,
+				children: [
+					/* @__PURE__ */ P(S, { size: 16 }),
+					" ",
+					m ? "Saving..." : "Add Vehicle"
+				]
+			})]
+		}),
+		children: [/* @__PURE__ */ P(R, {
+			icon: /* @__PURE__ */ P(w, { size: 18 }),
+			children: "Add a vehicle so it can be assigned to deliveries and routes. Give it a fleet number and type to start — make, model and plate help identify it on the road."
+		}), /* @__PURE__ */ F("form", {
+			onSubmit: C,
+			className: "max-w-2xl space-y-6",
+			children: [/* @__PURE__ */ P(A, { message: y }), /* @__PURE__ */ F(I, { children: [/* @__PURE__ */ P("h2", {
+				className: "text-base font-semibold text-text-primary mb-4",
+				children: "Vehicle Details"
+			}), /* @__PURE__ */ F("div", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ F("div", {
+					className: "grid grid-cols-1 md:grid-cols-2 gap-4",
+					children: [/* @__PURE__ */ F("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ F(f, {
+							htmlFor: "vehicleNumber",
+							children: ["Vehicle Number ", /* @__PURE__ */ P("span", {
+								className: "text-status-error-text",
+								children: "*"
+							})]
+						}), /* @__PURE__ */ P(e, {
+							id: "vehicleNumber",
+							value: l.vehicleNumber,
+							onChange: (e) => u((t) => ({
+								...t,
+								vehicleNumber: e.target.value
+							})),
+							placeholder: "MTW-001",
+							required: !0
+						})]
+					}), /* @__PURE__ */ F("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ F(f, {
+							htmlFor: "type",
+							children: ["Type ", /* @__PURE__ */ P("span", {
+								className: "text-status-error-text",
+								children: "*"
+							})]
+						}), /* @__PURE__ */ F(a, {
+							value: l.type,
+							onValueChange: (e) => u((t) => ({
+								...t,
+								type: e
+							})),
+							children: [/* @__PURE__ */ P(r, {
+								id: "type",
+								children: /* @__PURE__ */ P(o, {})
+							}), /* @__PURE__ */ P(t, { children: z.map((e) => /* @__PURE__ */ P(n, {
+								value: e.value,
+								children: e.label
+							}, e.value)) })]
+						})]
+					})]
+				}), /* @__PURE__ */ F("div", {
+					className: "grid grid-cols-1 md:grid-cols-3 gap-4",
+					children: [
+						/* @__PURE__ */ F("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ P(f, {
+								htmlFor: "make",
+								children: "Make"
+							}), /* @__PURE__ */ P(e, {
+								id: "make",
+								value: l.make,
+								onChange: (e) => u((t) => ({
+									...t,
+									make: e.target.value
+								})),
+								placeholder: "Ford"
+							})]
+						}),
+						/* @__PURE__ */ F("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ P(f, {
+								htmlFor: "model",
+								children: "Model"
+							}), /* @__PURE__ */ P(e, {
+								id: "model",
+								value: l.model,
+								onChange: (e) => u((t) => ({
+									...t,
+									model: e.target.value
+								})),
+								placeholder: "Transit"
+							})]
+						}),
+						/* @__PURE__ */ F("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ P(f, {
+								htmlFor: "licensePlate",
+								children: "License Plate"
+							}), /* @__PURE__ */ P(e, {
+								id: "licensePlate",
+								value: l.licensePlate,
+								onChange: (e) => u((t) => ({
+									...t,
+									licensePlate: e.target.value
+								})),
+								placeholder: "ABC-1234"
+							})]
+						})
+					]
+				})]
+			})] })]
+		})]
+	});
+}
+function V() {
+	let { vehicleId: e } = N(), { basePath: t, navigate: n } = g(), { vehicle: r, isLoading: a, error: o, refetch: f } = E(e), S = () => n?.(p(t, "fleet/vehicles")), D = (e) => n?.(p(t, e));
+	return e ? a ? /* @__PURE__ */ P(h, { message: "Loading vehicle details..." }) : o || !r ? /* @__PURE__ */ P(m, {
+		title: "Vehicle not found",
+		onRetry: f
+	}) : /* @__PURE__ */ F(d, {
+		title: r.vehicleNumber,
+		subtitle: `${r.make} ${r.model} (${r.year})`,
+		icon: /* @__PURE__ */ P(w, { size: 24 }),
+		headerActions: /* @__PURE__ */ F("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ F(_, {
+				variant: "outline",
+				onClick: S,
+				children: [/* @__PURE__ */ P(v, { size: 16 }), " Back"]
+			}), /* @__PURE__ */ F(_, { children: [/* @__PURE__ */ P(C, { size: 16 }), " Edit"] })]
+		}),
+		headerContent: /* @__PURE__ */ F("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ P(k, {
+				status: r.status,
+				type: "vehicle"
+			}), /* @__PURE__ */ P(O, { type: r.type })]
+		}),
+		children: [
+			/* @__PURE__ */ P(R, {
+				icon: /* @__PURE__ */ P(w, { size: 18 }),
+				children: "The full record for this vehicle — specs, capacity, fuel and mileage, maintenance schedule and current location. Use it to confirm a vehicle is fuelled, serviced and the right size before dispatching it on a delivery."
+			}),
+			/* @__PURE__ */ P(L, {
+				storageKey: "movethewheels-vehicle-details",
+				steps: [{
+					id: "assign",
+					label: "Assign to a delivery",
+					description: "Put this vehicle on an order that fits its capacity.",
+					icon: /* @__PURE__ */ P(x, { size: 16 }),
+					onClick: () => D("orders")
+				}, {
+					id: "maintenance",
+					label: "Schedule maintenance",
+					description: "Keep it road-ready and compliant.",
+					icon: /* @__PURE__ */ P(T, { size: 16 }),
+					onClick: () => {}
+				}]
+			}),
+			/* @__PURE__ */ F("div", {
+				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+				children: [/* @__PURE__ */ F("div", {
+					className: "lg:col-span-2 space-y-6",
+					children: [
+						/* @__PURE__ */ F(I, { children: [/* @__PURE__ */ P("h2", {
+							className: "text-base font-semibold text-text-primary mb-4",
+							children: "Vehicle Information"
+						}), /* @__PURE__ */ F("div", {
+							className: "grid grid-cols-2 md:grid-cols-4 gap-6",
+							children: [
+								/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+									className: "text-sm text-text-secondary",
+									children: "Type"
+								}), /* @__PURE__ */ P("p", {
+									className: "font-medium capitalize",
+									children: r.type
+								})] }),
+								/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+									className: "text-sm text-text-secondary",
+									children: "Make"
+								}), /* @__PURE__ */ P("p", {
+									className: "font-medium",
+									children: r.make
+								})] }),
+								/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+									className: "text-sm text-text-secondary",
+									children: "Model"
+								}), /* @__PURE__ */ P("p", {
+									className: "font-medium",
+									children: r.model
+								})] }),
+								/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+									className: "text-sm text-text-secondary",
+									children: "Year"
+								}), /* @__PURE__ */ P("p", {
+									className: "font-medium",
+									children: r.year
+								})] })
+							]
+						})] }),
+						/* @__PURE__ */ F(s, { children: [/* @__PURE__ */ P(u, { children: /* @__PURE__ */ P(l, { children: "Capacity" }) }), /* @__PURE__ */ P(c, { children: /* @__PURE__ */ F("div", {
+							className: "grid grid-cols-1 sm:grid-cols-3 gap-6",
+							children: [
+								/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+									className: "text-sm text-text-secondary",
+									children: "Weight"
+								}), /* @__PURE__ */ F("p", {
+									className: "text-2xl font-bold",
+									children: [r.capacity.weight, /* @__PURE__ */ P("span", {
+										className: "text-sm font-normal",
+										children: " kg"
+									})]
+								})] }),
+								/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+									className: "text-sm text-text-secondary",
+									children: "Volume"
+								}), /* @__PURE__ */ F("p", {
+									className: "text-2xl font-bold",
+									children: [r.capacity.volume, /* @__PURE__ */ P("span", {
+										className: "text-sm font-normal",
+										children: " m³"
+									})]
+								})] }),
+								r.capacity.pallets && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+									className: "text-sm text-text-secondary",
+									children: "Pallets"
+								}), /* @__PURE__ */ P("p", {
+									className: "text-2xl font-bold",
+									children: r.capacity.pallets
+								})] })
+							]
+						}) })] }),
+						/* @__PURE__ */ P(y, {
+							entityType: "vehicle",
+							entityId: r.id
+						})
+					]
+				}), /* @__PURE__ */ F("div", {
+					className: "space-y-6",
+					children: [
+						/* @__PURE__ */ F(s, { children: [/* @__PURE__ */ P(u, { children: /* @__PURE__ */ F(l, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ P(b, { size: 18 }), " Fuel & Mileage"]
+						}) }), /* @__PURE__ */ F(c, {
+							className: "space-y-4",
+							children: [r.fuelLevel !== void 0 && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ F("div", {
+								className: "flex justify-between text-sm mb-2",
+								children: [/* @__PURE__ */ P("span", { children: "Fuel Level" }), /* @__PURE__ */ F("span", { children: [r.fuelLevel, "%"] })]
+							}), /* @__PURE__ */ P(i, { value: r.fuelLevel })] }), r.mileage !== void 0 && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+								className: "text-sm text-text-secondary",
+								children: "Total Mileage"
+							}), /* @__PURE__ */ F("p", {
+								className: "text-2xl font-bold",
+								children: [
+									r.mileage.toLocaleString(),
+									" ",
+									/* @__PURE__ */ P("span", {
+										className: "text-sm font-normal",
+										children: "miles"
+									})
+								]
+							})] })]
+						})] }),
+						/* @__PURE__ */ F(s, { children: [/* @__PURE__ */ P(u, { children: /* @__PURE__ */ F(l, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ P(T, { size: 18 }), " Maintenance"]
+						}) }), /* @__PURE__ */ F(c, {
+							className: "space-y-3",
+							children: [/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+								className: "text-sm text-text-secondary",
+								children: "Last Maintenance"
+							}), /* @__PURE__ */ P("p", {
+								className: "font-medium",
+								children: r.lastMaintenance ? j(r.lastMaintenance) : "N/A"
+							})] }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+								className: "text-sm text-text-secondary",
+								children: "Next Scheduled"
+							}), /* @__PURE__ */ P("p", {
+								className: "font-medium",
+								children: r.nextMaintenance ? j(r.nextMaintenance) : "N/A"
+							})] })]
+						})] }),
+						r.currentLocation && /* @__PURE__ */ F(s, { children: [/* @__PURE__ */ P(u, { children: /* @__PURE__ */ F(l, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ P(x, { size: 18 }), " Current Location"]
+						}) }), /* @__PURE__ */ F(c, { children: [/* @__PURE__ */ P("p", {
+							className: "text-sm",
+							children: r.currentLocation.address || "Location updating..."
+						}), /* @__PURE__ */ F("p", {
+							className: "text-xs text-text-secondary mt-1",
+							children: ["Updated ", j(r.currentLocation.timestamp || /* @__PURE__ */ new Date(), "relative")]
+						})] })] })
+					]
+				})]
+			})
+		]
+	}) : /* @__PURE__ */ P(B, {});
+}
+//#endregion
+export { V as default };

package/dist/VehiclesPage-D5BELbtM.js

@@ -0,0 +1,184 @@
+import { M as e, i as t, lt as n, st as r } from "./PageLayout-BniRJaQ6.js";
+import { t as i } from "./DataTable-CqMUD4er.js";
+import { t as a } from "./circle-check-Cs1OVjtV.js";
+import { t as o } from "./download-DP04iWTd.js";
+import { t as s } from "./plus-DlANgOFx.js";
+import { t as c } from "./refresh-cw-rW59D4b7.js";
+import { t as l } from "./route-CWjPrtAN.js";
+import { t as u } from "./truck-9rLDncav.js";
+import { t as d } from "./wrench-Dg-sgH2e.js";
+import { i as f, o as p } from "./useFleet-g5Yri0G8.js";
+import { r as m, t as h } from "./MetricCard-y3bWHKUQ.js";
+import { a as g, r as _ } from "./StatusBadge-BNHXYvZx.js";
+import { useState as v } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { CTAOverflowMenu as x, PagePurpose as S } from "@burdenoff/fe-libs/ui";
+//#region src/movethewheels/pages/VehiclesPage.tsx
+function C() {
+	let { basePath: C, navigate: w } = r(), [T, E] = v(0), [D, O] = v(25), { vehicles: k, isLoading: A, refetch: j } = p({
+		limit: D,
+		offset: T * D
+	}), { stats: M } = f(), N = M.totalVehicles, P = (e) => {
+		w && w(n(C, e));
+	};
+	return /* @__PURE__ */ b(t, {
+		title: "Vehicles",
+		subtitle: `${N} vehicles in fleet`,
+		icon: /* @__PURE__ */ y(u, { size: 24 }),
+		headerActions: /* @__PURE__ */ y(x, {
+			primary: {
+				label: "Add Vehicle",
+				icon: /* @__PURE__ */ y(s, { size: 16 }),
+				onSelect: () => P("fleet/vehicles/new")
+			},
+			actions: [{
+				label: "Refresh",
+				icon: /* @__PURE__ */ y(c, { size: 16 }),
+				onSelect: () => j()
+			}, {
+				label: "Export",
+				icon: /* @__PURE__ */ y(o, { size: 16 }),
+				onSelect: () => P("import-export")
+			}]
+		}),
+		children: [
+			/* @__PURE__ */ y(S, {
+				icon: /* @__PURE__ */ y(u, { size: 18 }),
+				children: "Every truck, van and bike in your fleet. Monitor capacity, fuel level, mileage and maintenance status here so you always know which vehicles are road-ready before dispatching an order."
+			}),
+			/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+				className: "mb-3 text-sm font-medium text-text-secondary",
+				children: "Fleet at a glance"
+			}), /* @__PURE__ */ b(m, {
+				columns: 4,
+				children: [
+					/* @__PURE__ */ y(h, {
+						label: "Total vehicles",
+						value: N,
+						icon: /* @__PURE__ */ y(u, { size: 20 }),
+						accent: "brand"
+					}),
+					/* @__PURE__ */ y(h, {
+						label: "Available now",
+						value: M.vehiclesByStatus.available,
+						icon: /* @__PURE__ */ y(a, { size: 20 }),
+						accent: "success",
+						subtitle: "Ready to dispatch"
+					}),
+					/* @__PURE__ */ y(h, {
+						label: "On assignment",
+						value: M.vehiclesByStatus.assigned,
+						icon: /* @__PURE__ */ y(l, { size: 20 }),
+						accent: "blue"
+					}),
+					/* @__PURE__ */ y(h, {
+						label: "In maintenance",
+						value: M.vehiclesByStatus.maintenance,
+						icon: /* @__PURE__ */ y(d, { size: 20 }),
+						accent: "warning"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ y(i, {
+				columns: [
+					{
+						id: "vehicleNumber",
+						header: "Vehicle #",
+						accessorKey: "vehicleNumber",
+						sortable: !0,
+						cell: (e) => /* @__PURE__ */ y("span", {
+							className: "font-medium",
+							children: e.vehicleNumber
+						})
+					},
+					{
+						id: "type",
+						header: "Type",
+						accessorKey: "type",
+						cell: (e) => /* @__PURE__ */ y(g, { type: e.type })
+					},
+					{
+						id: "details",
+						header: "Vehicle",
+						cell: (e) => /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("p", {
+							className: "font-medium",
+							children: [
+								e.make,
+								" ",
+								e.model
+							]
+						}), /* @__PURE__ */ y("p", {
+							className: "text-sm text-text-secondary",
+							children: e.year
+						})] })
+					},
+					{
+						id: "status",
+						header: "Status",
+						accessorKey: "status",
+						sortable: !0,
+						cell: (e) => /* @__PURE__ */ y(_, {
+							status: e.status,
+							type: "vehicle"
+						})
+					},
+					{
+						id: "capacity",
+						header: "Capacity",
+						cell: (e) => /* @__PURE__ */ b("div", {
+							className: "text-sm",
+							children: [/* @__PURE__ */ b("p", { children: [e.capacity.weight, " kg"] }), /* @__PURE__ */ b("p", {
+								className: "text-text-secondary",
+								children: [e.capacity.volume, " m³"]
+							})]
+						})
+					},
+					{
+						id: "fuel",
+						header: "Fuel Level",
+						cell: (t) => t.fuelLevel === void 0 ? "-" : /* @__PURE__ */ b("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ y(e, {
+								value: t.fuelLevel,
+								className: "w-16 h-2"
+							}), /* @__PURE__ */ b("span", {
+								className: "text-sm",
+								children: [t.fuelLevel, "%"]
+							})]
+						})
+					},
+					{
+						id: "mileage",
+						header: "Mileage",
+						accessorKey: "mileage",
+						sortable: !0,
+						cell: (e) => e.mileage ? `${e.mileage.toLocaleString()} mi` : "-"
+					}
+				],
+				data: k,
+				isLoading: A,
+				searchable: !0,
+				searchPlaceholder: "Search vehicles...",
+				searchFields: [
+					"vehicleNumber",
+					"make",
+					"model"
+				],
+				onRowClick: (e) => P(`fleet/vehicles/${e.id}`),
+				getRowId: (e) => e.id,
+				pageIndex: T,
+				pageSize: D,
+				onPageChange: E,
+				onPageSizeChange: (e) => {
+					O(e), E(0);
+				},
+				totalItems: N,
+				emptyIllustration: "empty-data",
+				emptyTitle: "No vehicles yet",
+				emptyDescription: "Add vehicles to your fleet to start assigning them to deliveries."
+			})
+		]
+	});
+}
+//#endregion
+export { C as default };