@burdenoff/microfe-movethewheels 2026.822.1 → 2026.827.1

package/dist/pages/DriversPage.js

@@ -1,99 +1,179 @@
 import { Coffee as e } from "../node_modules/lucide-react/dist/esm/icons/coffee.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 { Star as i } from "../node_modules/lucide-react/dist/esm/icons/star.js";
-import { UserCheck as a } from "../node_modules/lucide-react/dist/esm/icons/user-check.js";
-import { UserMinus as o } from "../node_modules/lucide-react/dist/esm/icons/user-minus.js";
-import { Users as s } from "../node_modules/lucide-react/dist/esm/icons/users.js";
-import { joinPath as c } from "../utils/navigation.js";
-import { useMoveTheWheels as l } from "../providers/MoveTheWheelsProvider.js";
-import { useDrivers as u, useFleetStats as d } from "../hooks/useFleet.js";
-import { Avatar as f, AvatarFallback as p } from "../components/ui.js";
-import { PageLayout as m } from "../components/PageLayout.js";
-import { MetricCard as h, MetricGrid as g } from "../components/MetricCard.js";
-import { StatusBadge as _ } from "../components/StatusBadge.js";
-import { DataTable as v } from "../components/DataTable.js";
-import { formatDate as y } from "../utils/formatters.js";
-import { useState as b } from "react";
-import { jsx as x, jsxs as S } from "react/jsx-runtime";
-import { CTAOverflowMenu as C, PagePurpose as w } from "@burdenoff/fe-libs/ui";
+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 i } from "../node_modules/lucide-react/dist/esm/icons/refresh-cw.js";
+import { Star as a } from "../node_modules/lucide-react/dist/esm/icons/star.js";
+import { Truck as o } from "../node_modules/lucide-react/dist/esm/icons/truck.js";
+import { UserCheck as s } from "../node_modules/lucide-react/dist/esm/icons/user-check.js";
+import { UserMinus as c } from "../node_modules/lucide-react/dist/esm/icons/user-minus.js";
+import { Users as l } from "../node_modules/lucide-react/dist/esm/icons/users.js";
+import { joinPath as u } from "../utils/navigation.js";
+import { useMoveTheWheels as d } from "../providers/MoveTheWheelsProvider.js";
+import { useDriverStatusCounts as f, useDrivers as ee, useFleetStats as te, useVehicles as p } from "../hooks/useFleet.js";
+import { Avatar as ne, AvatarFallback as m, Button as re, Card as ie, CardContent as h, Select as g, SelectContent as _, SelectItem as v, SelectTrigger as y, SelectValue as b } from "../components/ui.js";
+import { PageLayout as x } from "../components/PageLayout.js";
+import { MetricCard as S, MetricGrid as C } from "../components/MetricCard.js";
+import { StatusBadge as w } from "../components/StatusBadge.js";
+import { DataTable as T } from "../components/DataTable.js";
+import { formatDate as E } from "../utils/formatters.js";
+import { useMemo as D, 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/DriversPage.tsx
-function T() {
-	let { basePath: T, navigate: E } = l(), [D, O] = b(0), [k, A] = b(25), { drivers: j, isLoading: M, error: N, refetch: P } = u({
-		limit: k,
-		offset: D * k
-	}), { stats: F } = d(), I = F.totalDrivers, L = (e) => E?.(c(T, e));
-	return /* @__PURE__ */ S(m, {
+var N = [
+	{
+		value: "all",
+		label: "All statuses"
+	},
+	{
+		value: "available",
+		label: "Available"
+	},
+	{
+		value: "busy",
+		label: "On delivery"
+	},
+	{
+		value: "on_break",
+		label: "On break"
+	},
+	{
+		value: "offline",
+		label: "Off duty"
+	}
+];
+function P() {
+	let { basePath: P, navigate: F } = d(), [I, L] = O(0), [R, z] = O(25), [B, V] = O("all"), [H, U] = O("all"), { drivers: W, isLoading: G, error: K, refetch: q } = ee({
+		limit: R,
+		offset: I * R,
+		status: B === "all" ? void 0 : B
+	}), { stats: J } = te(), { counts: Y } = f(), { vehicles: X } = p({ limit: 500 }), ae = D(() => new Map(X.map((e) => [e.id, e.vehicleNumber])), [X]), Z = J.totalDrivers, oe = D(() => Array.from(new Set(W.map((e) => e.licenseType).filter(Boolean))).sort((e, t) => e.localeCompare(t)), [W]), se = D(() => H === "all" ? W : W.filter((e) => e.licenseType === H), [W, H]), Q = B !== "all" || H !== "all", $ = (e) => F?.(u(P, e));
+	return /* @__PURE__ */ A(x, {
 		title: "Drivers",
-		subtitle: `${I} drivers`,
-		icon: /* @__PURE__ */ x(s, { size: 24 }),
-		headerActions: /* @__PURE__ */ x(C, {
+		subtitle: `${Z} drivers`,
+		icon: /* @__PURE__ */ k(l, { size: 24 }),
+		headerActions: /* @__PURE__ */ k(j, {
 			primary: {
 				label: "Add Driver",
-				icon: /* @__PURE__ */ x(n, { size: 16 }),
-				onSelect: () => L("fleet/drivers/new")
+				icon: /* @__PURE__ */ k(r, { size: 16 }),
+				onSelect: () => $("fleet/drivers/new")
 			},
 			actions: [{
 				label: "Refresh",
-				icon: /* @__PURE__ */ x(r, { size: 16 }),
-				onSelect: () => P()
+				icon: /* @__PURE__ */ k(i, { size: 16 }),
+				onSelect: () => q()
 			}, {
 				label: "Export",
-				icon: /* @__PURE__ */ x(t, { size: 16 }),
-				onSelect: () => L("import-export")
+				icon: /* @__PURE__ */ k(t, { size: 16 }),
+				onSelect: () => $("import-export")
 			}]
 		}),
 		children: [
-			/* @__PURE__ */ x(w, {
-				icon: /* @__PURE__ */ x(s, { size: 18 }),
-				children: "Your delivery workforce. Track each driver's availability, performance rating, completed deliveries and license status here — open a driver to review their history before assigning them to an order or route."
+			/* @__PURE__ */ k(M, {
+				icon: /* @__PURE__ */ k(l, { size: 18 }),
+				children: "Your delivery workforce. Track each driver's availability, rating, licence status, contact number and the vehicle they are on — open a driver to review their record before assigning them to an order or route."
 			}),
-			/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
+			/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
 				className: "mb-3 text-sm font-medium text-text-secondary",
 				children: "Workforce at a glance"
-			}), /* @__PURE__ */ S(g, {
+			}), /* @__PURE__ */ A(C, {
 				columns: 4,
 				children: [
-					/* @__PURE__ */ x(h, {
+					/* @__PURE__ */ k(S, {
 						label: "On duty",
-						value: F.driversByStatus.available + F.driversByStatus.busy,
-						icon: /* @__PURE__ */ x(a, { size: 20 }),
+						value: J.driversByStatus.available + J.driversByStatus.busy,
+						icon: /* @__PURE__ */ k(s, { size: 20 }),
 						accent: "success",
 						subtitle: "Available or delivering"
 					}),
-					/* @__PURE__ */ x(h, {
+					/* @__PURE__ */ k(S, {
 						label: "On break",
-						value: F.driversByStatus.on_break,
-						icon: /* @__PURE__ */ x(e, { size: 20 }),
-						accent: "warning"
+						value: Y.onBreak,
+						icon: /* @__PURE__ */ k(e, { size: 20 }),
+						accent: "warning",
+						subtitle: "Back on shift shortly"
 					}),
-					/* @__PURE__ */ x(h, {
+					/* @__PURE__ */ k(S, {
 						label: "Off duty",
-						value: F.driversByStatus.offline,
-						icon: /* @__PURE__ */ x(o, { size: 20 }),
-						accent: "neutral"
+						value: Y.offDuty,
+						icon: /* @__PURE__ */ k(c, { size: 20 }),
+						accent: "neutral",
+						subtitle: Y.inactive > 0 ? `${Y.inactive} inactive` : void 0
 					}),
-					/* @__PURE__ */ x(h, {
+					/* @__PURE__ */ k(S, {
 						label: "Avg rating",
-						value: F.avgDriverRating > 0 ? F.avgDriverRating.toFixed(1) : "—",
-						icon: /* @__PURE__ */ x(i, { size: 20 }),
+						value: J.avgDriverRating > 0 ? J.avgDriverRating.toFixed(1) : "—",
+						icon: /* @__PURE__ */ k(a, { size: 20 }),
 						accent: "brand",
-						subtitle: `${I} drivers`
+						subtitle: `${Z} drivers`
 					})
 				]
 			})] }),
-			/* @__PURE__ */ x(v, {
+			/* @__PURE__ */ k(ie, { children: /* @__PURE__ */ k(h, {
+				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(g, {
+							value: B,
+							onValueChange: (e) => {
+								V(e), L(0);
+							},
+							children: [/* @__PURE__ */ k(y, {
+								className: "w-[180px]",
+								children: /* @__PURE__ */ k(b, { placeholder: "Status" })
+							}), /* @__PURE__ */ k(_, { children: N.map((e) => /* @__PURE__ */ k(v, {
+								value: e.value,
+								children: e.label
+							}, e.value)) })]
+						}),
+						/* @__PURE__ */ A(g, {
+							value: H,
+							onValueChange: U,
+							children: [/* @__PURE__ */ k(y, {
+								className: "w-[180px]",
+								children: /* @__PURE__ */ k(b, { placeholder: "License class" })
+							}), /* @__PURE__ */ A(_, { children: [/* @__PURE__ */ k(v, {
+								value: "all",
+								children: "All licence classes"
+							}), oe.map((e) => /* @__PURE__ */ k(v, {
+								value: e,
+								children: e
+							}, e))] })]
+						}),
+						Q && /* @__PURE__ */ k(re, {
+							variant: "ghost",
+							size: "sm",
+							onClick: () => {
+								V("all"), U("all"), L(0);
+							},
+							children: "Clear filters"
+						})
+					]
+				})
+			}) }),
+			/* @__PURE__ */ k(T, {
 				columns: [
 					{
 						id: "driver",
 						header: "Driver",
-						cell: (e) => /* @__PURE__ */ S("div", {
+						cell: (e) => /* @__PURE__ */ A("div", {
 							className: "flex items-center gap-3",
-							children: [/* @__PURE__ */ x(f, { children: /* @__PURE__ */ x(p, { children: e.fullName.split(" ").map((e) => e[0]).join("") }) }), /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
+							children: [/* @__PURE__ */ k(ne, { children: /* @__PURE__ */ k(m, { children: e.fullName.split(" ").map((e) => e[0]).join("") }) }), /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
 								className: "font-medium",
 								children: e.fullName
-							}), /* @__PURE__ */ x("p", {
+							}), /* @__PURE__ */ k("p", {
 								className: "text-sm text-text-secondary",
 								children: e.employeeId
 							})] })]
@@ -104,87 +184,101 @@ function T() {
 						header: "Status",
 						accessorKey: "status",
 						sortable: !0,
-						cell: (e) => /* @__PURE__ */ x(_, {
+						cell: (e) => /* @__PURE__ */ k(w, {
 							status: e.status,
 							type: "driver"
 						})
 					},
 					{
-						id: "rating",
-						header: "Rating",
-						cell: (e) => /* @__PURE__ */ S("div", {
-							className: "flex items-center gap-1",
-							children: [
-								/* @__PURE__ */ x(i, {
-									size: 14,
-									className: "text-status-warning-text fill-current"
-								}),
-								/* @__PURE__ */ x("span", {
-									className: "font-medium",
-									children: e.ratings.overall.toFixed(1)
-								}),
-								/* @__PURE__ */ S("span", {
-									className: "text-text-secondary text-sm",
-									children: [
-										"(",
-										e.ratings.totalRatings,
-										")"
-									]
-								})
-							]
+						id: "license",
+						header: "License",
+						cell: (e) => /* @__PURE__ */ A("div", {
+							className: "text-sm",
+							children: [/* @__PURE__ */ k("p", { children: e.licenseType }), /* @__PURE__ */ A("p", {
+								className: "text-text-secondary",
+								children: ["Exp: ", E(e.licenseExpiry, "short")]
+							})]
 						})
 					},
 					{
-						id: "deliveries",
-						header: "Deliveries",
-						accessorKey: "completedOrders",
-						sortable: !0,
-						cell: (e) => /* @__PURE__ */ x("span", {
-							className: "font-medium",
-							children: e.completedOrders.toLocaleString()
+						id: "phone",
+						header: "Phone",
+						accessorKey: "phone",
+						cell: (e) => e.phone ? /* @__PURE__ */ k("a", {
+							href: `tel:${e.phone}`,
+							className: "text-sm hover:underline",
+							onClick: (e) => e.stopPropagation(),
+							children: e.phone
+						}) : /* @__PURE__ */ k("span", {
+							className: "text-sm text-text-secondary",
+							children: "—"
 						})
 					},
 					{
-						id: "license",
-						header: "License",
-						cell: (e) => /* @__PURE__ */ S("div", {
-							className: "text-sm",
-							children: [/* @__PURE__ */ x("p", { children: e.licenseType }), /* @__PURE__ */ S("p", {
-								className: "text-text-secondary",
-								children: ["Exp: ", y(e.licenseExpiry, "short")]
+						id: "rating",
+						header: "Rating",
+						cell: (e) => e.ratings.overall > 0 ? /* @__PURE__ */ A("div", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ k(a, {
+								size: 14,
+								className: "text-status-warning-text fill-current"
+							}), /* @__PURE__ */ k("span", {
+								className: "font-medium",
+								children: e.ratings.overall.toFixed(1)
 							})]
+						}) : /* @__PURE__ */ k("span", {
+							className: "text-sm text-text-secondary",
+							children: "Not rated"
 						})
 					},
+					{
+						id: "vehicle",
+						header: "Assigned vehicle",
+						cell: (e) => {
+							if (!e.assignedVehicle) return /* @__PURE__ */ k("span", {
+								className: "text-sm text-text-secondary",
+								children: "Unassigned"
+							});
+							let t = ae.get(e.assignedVehicle);
+							return /* @__PURE__ */ A("span", {
+								className: "inline-flex items-center gap-1.5 text-sm font-medium",
+								children: [/* @__PURE__ */ k(o, {
+									size: 14,
+									className: "text-text-secondary"
+								}), t ?? "Assigned"]
+							});
+						}
+					},
 					{
 						id: "joined",
 						header: "Join Date",
 						accessorKey: "joinDate",
 						sortable: !0,
-						cell: (e) => y(e.joinDate, "short")
+						cell: (e) => E(e.joinDate, "short")
 					}
 				],
-				data: j,
-				isLoading: M,
-				error: N,
-				onRetry: P,
+				data: se,
+				isLoading: G,
+				error: K,
+				onRetry: q,
 				searchable: !0,
 				searchPlaceholder: "Search drivers...",
 				searchFields: ["fullName", "employeeId"],
-				onRowClick: (e) => L(`fleet/drivers/${e.id}`),
+				onRowClick: (e) => $(`fleet/drivers/${e.id}`),
 				getRowId: (e) => e.id,
-				pageIndex: D,
-				pageSize: k,
-				onPageChange: O,
+				pageIndex: I,
+				pageSize: R,
+				onPageChange: L,
 				onPageSizeChange: (e) => {
-					A(e), O(0);
+					z(e), L(0);
 				},
-				totalItems: I,
+				totalItems: Q ? void 0 : Z,
 				emptyIllustration: "empty-people",
-				emptyTitle: "No drivers yet",
-				emptyDescription: "Add drivers to start assigning deliveries and routes."
+				emptyTitle: Q ? "No drivers match these filters" : "No drivers yet",
+				emptyDescription: Q ? "Clear the status or licence-class filter to see the rest of the roster." : "Add drivers to start assigning deliveries and routes."
 			})
 		]
 	});
 }
 //#endregion
-export { T as default };
+export { P as default };