@burdenoff/microfe-movethewheels 2026.925.2 → 2026.925.3

package/dist/pages/VehiclesPage.js

@@ -1,97 +1,146 @@
 import { CircleCheck as e } from "../node_modules/lucide-react/dist/esm/icons/circle-check.js";
 import { Download as t } from "../node_modules/lucide-react/dist/esm/icons/download.js";
-import { Plus as n } from "../node_modules/lucide-react/dist/esm/icons/plus.js";
-import { RefreshCw as r } from "../node_modules/lucide-react/dist/esm/icons/refresh-cw.js";
+import { Filter as n } from "../node_modules/lucide-react/dist/esm/icons/filter.js";
+import { Plus as r } from "../node_modules/lucide-react/dist/esm/icons/plus.js";
+import { RefreshCw as ee } from "../node_modules/lucide-react/dist/esm/icons/refresh-cw.js";
 import { Route as i } from "../node_modules/lucide-react/dist/esm/icons/route.js";
 import { Truck as a } from "../node_modules/lucide-react/dist/esm/icons/truck.js";
 import { Wrench as o } from "../node_modules/lucide-react/dist/esm/icons/wrench.js";
 import { joinPath as s } from "../utils/navigation.js";
 import { useMoveTheWheels as c } from "../providers/MoveTheWheelsProvider.js";
 import { useFleetStats as l, useVehicles as u } from "../hooks/useFleet.js";
-import { Progress as d } from "../components/ui.js";
-import { PageLayout as f } from "../components/PageLayout.js";
-import { MetricCard as p, MetricGrid as m } from "../components/MetricCard.js";
-import { StatusBadge as h, VehicleTypeBadge as g } from "../components/StatusBadge.js";
-import { DataTable as _ } from "../components/DataTable.js";
-import { useDebouncedValue as v } from "../hooks/useDebouncedValue.js";
-import { useState as y } from "react";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
-import { CTAOverflowMenu as S, PagePurpose as C } from "@burdenoff/fe-libs/ui";
+import { Button as d, Card as f, CardContent as p, Progress as m, Select as h, SelectContent as g, SelectItem as _, SelectTrigger as v, SelectValue as y } from "../components/ui.js";
+import { PageLayout as b } from "../components/PageLayout.js";
+import { MetricCard as x, MetricGrid as S } from "../components/MetricCard.js";
+import { VEHICLE_STATUS_LABELS as C } from "../constants/index.js";
+import { StatusBadge as w, VehicleTypeBadge as T } from "../components/StatusBadge.js";
+import { DataTable as E } from "../components/DataTable.js";
+import { useDebouncedValue as D } from "../hooks/useDebouncedValue.js";
+import { useState as O } from "react";
+import { jsx as k, jsxs as A } from "react/jsx-runtime";
+import { CTAOverflowMenu as j, PagePurpose as M } from "@burdenoff/fe-libs/ui";
 //#region src/movethewheels/pages/VehiclesPage.tsx
-function w() {
-	let { basePath: w, navigate: T } = c(), [E, D] = y(0), [O, k] = y(25), [A, j] = y(""), M = v(A), { vehicles: N, totalVehicles: P, hasMore: F, isLoading: I, error: L, refetch: R } = u({
-		limit: O,
-		offset: E * O,
-		search: M || void 0
-	}), { stats: z } = l(), B = z.totalVehicles, V = (e) => {
-		T && T(s(w, e));
+var N = [{
+	value: "all",
+	label: "All statuses"
+}, ...Object.entries(C).map(([e, t]) => ({
+	value: e,
+	label: t
+}))];
+function P() {
+	let { basePath: C, navigate: P } = c(), [F, I] = O(0), [L, R] = O(25), [z, B] = O(""), [V, H] = O("all"), U = D(z), { vehicles: W, totalVehicles: G, hasMore: K, isLoading: q, error: J, refetch: Y } = u({
+		limit: L,
+		offset: F * L,
+		search: U || void 0,
+		status: V === "all" ? void 0 : V
+	}), X = V !== "all" || z.length > 0, { stats: Z } = l(), Q = Z.totalVehicles, $ = (e) => {
+		P && P(s(C, e));
 	};
-	return /* @__PURE__ */ x(f, {
+	return /* @__PURE__ */ A(b, {
 		title: "Vehicles",
-		subtitle: `${B} vehicles in fleet`,
-		icon: /* @__PURE__ */ b(a, { size: 24 }),
-		headerActions: /* @__PURE__ */ b(S, {
+		subtitle: `${Q} vehicles in fleet`,
+		icon: /* @__PURE__ */ k(a, { size: 24 }),
+		headerActions: /* @__PURE__ */ k(j, {
 			primary: {
 				label: "Add Vehicle",
-				icon: /* @__PURE__ */ b(n, { size: 16 }),
-				onSelect: () => V("fleet/vehicles/new")
+				icon: /* @__PURE__ */ k(r, { size: 16 }),
+				onSelect: () => $("fleet/vehicles/new")
 			},
 			actions: [{
 				label: "Refresh",
-				icon: /* @__PURE__ */ b(r, { size: 16 }),
-				onSelect: () => R()
+				icon: /* @__PURE__ */ k(ee, { size: 16 }),
+				onSelect: () => Y()
 			}, {
 				label: "Export",
-				icon: /* @__PURE__ */ b(t, { size: 16 }),
-				onSelect: () => V("import-export")
+				icon: /* @__PURE__ */ k(t, { size: 16 }),
+				onSelect: () => $("import-export")
 			}]
 		}),
 		children: [
-			/* @__PURE__ */ b(C, {
-				icon: /* @__PURE__ */ b(a, { size: 18 }),
+			/* @__PURE__ */ k(M, {
+				icon: /* @__PURE__ */ k(a, { 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__ */ x("div", { children: [/* @__PURE__ */ b("p", {
+			/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
 				className: "mb-3 text-sm font-medium text-text-secondary",
 				children: "Fleet at a glance"
-			}), /* @__PURE__ */ x(m, {
+			}), /* @__PURE__ */ A(S, {
 				columns: 4,
 				children: [
-					/* @__PURE__ */ b(p, {
+					/* @__PURE__ */ k(x, {
 						label: "Total vehicles",
-						value: B,
-						icon: /* @__PURE__ */ b(a, { size: 20 }),
+						value: Q,
+						icon: /* @__PURE__ */ k(a, { size: 20 }),
 						accent: "brand"
 					}),
-					/* @__PURE__ */ b(p, {
+					/* @__PURE__ */ k(x, {
 						label: "Available now",
-						value: z.vehiclesByStatus.available,
-						icon: /* @__PURE__ */ b(e, { size: 20 }),
+						value: Z.vehiclesByStatus.available,
+						icon: /* @__PURE__ */ k(e, { size: 20 }),
 						accent: "success",
 						subtitle: "Ready to dispatch"
 					}),
-					/* @__PURE__ */ b(p, {
+					/* @__PURE__ */ k(x, {
 						label: "On assignment",
-						value: z.vehiclesByStatus.assigned,
-						icon: /* @__PURE__ */ b(i, { size: 20 }),
+						value: Z.vehiclesByStatus.assigned,
+						icon: /* @__PURE__ */ k(i, { size: 20 }),
 						accent: "blue"
 					}),
-					/* @__PURE__ */ b(p, {
+					/* @__PURE__ */ k(x, {
 						label: "In maintenance",
-						value: z.vehiclesByStatus.maintenance,
-						icon: /* @__PURE__ */ b(o, { size: 20 }),
+						value: Z.vehiclesByStatus.maintenance,
+						icon: /* @__PURE__ */ k(o, { size: 20 }),
 						accent: "warning"
 					})
 				]
 			})] }),
-			/* @__PURE__ */ b(_, {
+			/* @__PURE__ */ k(f, { children: /* @__PURE__ */ k(p, {
+				className: "p-4",
+				children: /* @__PURE__ */ A("div", {
+					className: "flex flex-wrap items-center gap-4",
+					children: [
+						/* @__PURE__ */ A("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ k(n, {
+								size: 16,
+								className: "text-text-secondary"
+							}), /* @__PURE__ */ k("span", {
+								className: "text-sm font-medium",
+								children: "Filters:"
+							})]
+						}),
+						/* @__PURE__ */ A(h, {
+							value: V,
+							onValueChange: (e) => {
+								H(e), I(0);
+							},
+							children: [/* @__PURE__ */ k(v, {
+								className: "w-[180px]",
+								children: /* @__PURE__ */ k(y, { placeholder: "Status" })
+							}), /* @__PURE__ */ k(g, { children: N.map((e) => /* @__PURE__ */ k(_, {
+								value: e.value,
+								children: e.label
+							}, e.value)) })]
+						}),
+						X && /* @__PURE__ */ k(d, {
+							variant: "ghost",
+							size: "sm",
+							onClick: () => {
+								H("all"), B(""), I(0);
+							},
+							children: "Clear filters"
+						})
+					]
+				})
+			}) }),
+			/* @__PURE__ */ k(E, {
 				columns: [
 					{
 						id: "vehicleNumber",
 						header: "Vehicle #",
 						accessorKey: "vehicleNumber",
 						sortable: !0,
-						cell: (e) => /* @__PURE__ */ b("span", {
+						cell: (e) => /* @__PURE__ */ k("span", {
 							className: "font-medium",
 							children: e.vehicleNumber
 						})
@@ -100,21 +149,21 @@ function w() {
 						id: "type",
 						header: "Type",
 						accessorKey: "type",
-						cell: (e) => /* @__PURE__ */ b(g, { type: e.type })
+						cell: (e) => /* @__PURE__ */ k(T, { type: e.type })
 					},
 					{
 						id: "details",
 						header: "Vehicle",
-						cell: (e) => /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ x("p", {
+						cell: (e) => /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ A("p", {
 							className: "font-medium",
 							children: [
 								e.make,
 								" ",
 								e.model
 							]
-						}), /* @__PURE__ */ b("p", {
+						}), /* @__PURE__ */ k("p", {
 							className: "text-sm text-text-secondary",
-							children: e.year
+							children: e.year ?? "—"
 						})] })
 					},
 					{
@@ -122,7 +171,7 @@ function w() {
 						header: "Status",
 						accessorKey: "status",
 						sortable: !0,
-						cell: (e) => /* @__PURE__ */ b(h, {
+						cell: (e) => /* @__PURE__ */ k(w, {
 							status: e.status,
 							type: "vehicle"
 						})
@@ -130,9 +179,9 @@ function w() {
 					{
 						id: "capacity",
 						header: "Capacity",
-						cell: (e) => /* @__PURE__ */ x("div", {
+						cell: (e) => /* @__PURE__ */ A("div", {
 							className: "text-sm",
-							children: [/* @__PURE__ */ x("p", { children: [e.capacity.weight, " kg"] }), /* @__PURE__ */ x("p", {
+							children: [/* @__PURE__ */ A("p", { children: [e.capacity.weight, " kg"] }), /* @__PURE__ */ A("p", {
 								className: "text-text-secondary",
 								children: [e.capacity.volume, " m³"]
 							})]
@@ -141,12 +190,12 @@ function w() {
 					{
 						id: "fuel",
 						header: "Fuel Level",
-						cell: (e) => e.fuelLevel === void 0 ? "-" : /* @__PURE__ */ x("div", {
+						cell: (e) => e.fuelLevel === void 0 ? "-" : /* @__PURE__ */ A("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ b(d, {
+							children: [/* @__PURE__ */ k(m, {
 								value: e.fuelLevel,
 								className: "w-16 h-2"
-							}), /* @__PURE__ */ x("span", {
+							}), /* @__PURE__ */ A("span", {
 								className: "text-sm",
 								children: [e.fuelLevel, "%"]
 							})]
@@ -160,10 +209,10 @@ function w() {
 						cell: (e) => e.mileage ? `${e.mileage.toLocaleString()} mi` : "-"
 					}
 				],
-				data: N,
-				isLoading: I,
-				error: L,
-				onRetry: R,
+				data: W,
+				isLoading: q,
+				error: J,
+				onRetry: Y,
 				searchable: !0,
 				searchPlaceholder: "Search vehicles...",
 				searchFields: [
@@ -171,20 +220,20 @@ function w() {
 					"make",
 					"model"
 				],
-				searchQuery: A,
+				searchQuery: z,
 				onSearchQueryChange: (e) => {
-					j(e), D(0);
+					B(e), I(0);
 				},
-				onRowClick: (e) => V(`fleet/vehicles/${e.id}`),
+				onRowClick: (e) => $(`fleet/vehicles/${e.id}`),
 				getRowId: (e) => e.id,
-				pageIndex: E,
-				pageSize: O,
-				onPageChange: D,
+				pageIndex: F,
+				pageSize: L,
+				onPageChange: I,
 				onPageSizeChange: (e) => {
-					k(e), D(0);
+					R(e), I(0);
 				},
-				totalItems: P,
-				hasNextPage: F,
+				totalItems: G,
+				hasNextPage: K,
 				emptyIllustration: "empty-data",
 				emptyTitle: "No vehicles yet",
 				emptyDescription: "Add vehicles to your fleet to start assigning them to deliveries."
@@ -193,4 +242,4 @@ function w() {
 	});
 }
 //#endregion
-export { w as default };
+export { P as default };