@burdenoff/microfe-movethewheels 2026.930.1 → 2026.930.3

package/dist/pages/VehicleDetailsPage.js

@@ -19,15 +19,16 @@ import { FormError as L } from "../components/FormError.js";
 import { Notice as R, useNotice as z } from "../components/Notice.js";
 import { formatDate as B, getInitials as V } from "../utils/formatters.js";
 import { DocumentsCard as H } from "../components/DocumentsCard.js";
-import { useRecordVehicleService as U } from "../hooks/useFleetIntelligence.js";
-import { VehicleServiceCard as W } from "../components/VehicleServiceCard.js";
+import { useRefetchOnLeaveEdit as U } from "../hooks/useRefetchOnLeaveEdit.js";
+import { useRecordVehicleService as W } from "../hooks/useFleetIntelligence.js";
+import { VehicleServiceCard as ee } from "../components/VehicleServiceCard.js";
 import { useEffect as G, useState as K } from "react";
-import { useLocation as ee, useParams as te } from "react-router";
+import { useLocation as te, useParams as ne } from "react-router";
 import { jsx as q, jsxs as J } from "react/jsx-runtime";
-import { useI18n as ne } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { EmphasisPanel as Y, NextSteps as re, PagePurpose as X, ResponsiveDialog as Z, ResponsiveDialogContent as Q, ResponsiveDialogDescription as $, ResponsiveDialogFooter as ie, ResponsiveDialogHeader as ae, ResponsiveDialogTitle as oe } from "@burdenoff/fe-libs/ui";
+import { useI18n as re } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { EmphasisPanel as Y, NextSteps as ie, PagePurpose as X, ResponsiveDialog as Z, ResponsiveDialogContent as Q, ResponsiveDialogDescription as $, ResponsiveDialogFooter as ae, ResponsiveDialogHeader as oe, ResponsiveDialogTitle as se } from "@burdenoff/fe-libs/ui";
 //#region src/movethewheels/pages/VehicleDetailsPage.tsx
-var se = [
+var ce = [
 	{
 		value: "TRUCK",
 		label: "Truck"
@@ -60,10 +61,10 @@ var se = [
 		value: "DRONE",
 		label: "Drone"
 	}
-], ce = Object.entries(P).map(([e, t]) => ({
+], le = Object.entries(P).map(([e, t]) => ({
 	value: e,
 	label: t
-})), le = [
+})), ue = [
 	{
 		value: "DIESEL",
 		label: "Diesel"
@@ -84,7 +85,7 @@ var se = [
 		value: "HYBRID",
 		label: "Hybrid"
 	}
-], ue = [
+], de = [
 	{
 		value: "owned",
 		label: "Owned"
@@ -98,7 +99,7 @@ var se = [
 		label: "Rented"
 	}
 ];
-function de({ editId: t }) {
+function fe({ editId: t }) {
 	let { basePath: n, navigate: r } = d(), { createVehicle: i, updateVehicle: o, deleteVehicle: l } = p(), { vehicle: h } = m(t), g = !!t, [_, T] = K({
 		vehicleNumber: "",
 		type: "VAN",
@@ -240,7 +241,7 @@ function de({ editId: t }) {
 										children: [/* @__PURE__ */ q(k, {
 											id: "type",
 											children: /* @__PURE__ */ q(A, {})
-										}), /* @__PURE__ */ q(D, { children: se.map((e) => /* @__PURE__ */ q(O, {
+										}), /* @__PURE__ */ q(D, { children: ce.map((e) => /* @__PURE__ */ q(O, {
 											value: e.value,
 											children: e.label
 										}, e.value)) })]
@@ -314,7 +315,7 @@ function de({ editId: t }) {
 											children: [/* @__PURE__ */ q(k, {
 												id: "ownershipType",
 												children: /* @__PURE__ */ q(A, { placeholder: "Select ownership" })
-											}), /* @__PURE__ */ q(D, { children: ue.map((e) => /* @__PURE__ */ q(O, {
+											}), /* @__PURE__ */ q(D, { children: de.map((e) => /* @__PURE__ */ q(O, {
 												value: e.value,
 												children: e.label
 											}, e.value)) })]
@@ -352,7 +353,7 @@ function de({ editId: t }) {
 											children: [/* @__PURE__ */ q(k, {
 												id: "vehicleStatus",
 												children: /* @__PURE__ */ q(A, {})
-											}), /* @__PURE__ */ q(D, { children: ce.map((e) => /* @__PURE__ */ q(O, {
+											}), /* @__PURE__ */ q(D, { children: le.map((e) => /* @__PURE__ */ q(O, {
 												value: e.value,
 												children: e.label
 											}, e.value)) })]
@@ -370,7 +371,7 @@ function de({ editId: t }) {
 									}), /* @__PURE__ */ J(E, {
 										value: _.fuelType || void 0,
 										onValueChange: (e) => {
-											let t = le.find((t) => t.value === e)?.value;
+											let t = ue.find((t) => t.value === e)?.value;
 											T((e) => ({
 												...e,
 												fuelType: t ?? ""
@@ -379,7 +380,7 @@ function de({ editId: t }) {
 										children: [/* @__PURE__ */ q(k, {
 											id: "fuelType",
 											children: /* @__PURE__ */ q(A, { placeholder: "Select fuel type" })
-										}), /* @__PURE__ */ q(D, { children: le.map((e) => /* @__PURE__ */ q(O, {
+										}), /* @__PURE__ */ q(D, { children: ue.map((e) => /* @__PURE__ */ q(O, {
 											value: e.value,
 											children: e.label
 										}, e.value)) })]
@@ -484,7 +485,7 @@ function de({ editId: t }) {
 				open: I,
 				onOpenChange: R,
 				children: /* @__PURE__ */ J(Q, { children: [
-					/* @__PURE__ */ J(ae, { children: [/* @__PURE__ */ q(oe, { children: "Delete this vehicle?" }), /* @__PURE__ */ J($, { children: [
+					/* @__PURE__ */ J(oe, { children: [/* @__PURE__ */ q(se, { children: "Delete this vehicle?" }), /* @__PURE__ */ J($, { children: [
 						"This removes ",
 						_.vehicleNumber || "this vehicle",
 						" from the active fleet. It cannot be undone from here."
@@ -493,7 +494,7 @@ function de({ editId: t }) {
 						className: "px-1",
 						children: /* @__PURE__ */ q(L, { message: V })
 					}),
-					/* @__PURE__ */ J(ie, { children: [/* @__PURE__ */ q(v, {
+					/* @__PURE__ */ J(ae, { children: [/* @__PURE__ */ q(v, {
 						variant: "outline",
 						onClick: () => R(!1),
 						disabled: z,
@@ -520,12 +521,14 @@ function de({ editId: t }) {
 		]
 	});
 }
-function fe() {
-	let { vehicleId: a } = te(), { basePath: s, navigate: f } = d(), { vehicle: p, isLoading: C, error: w, refetch: E } = m(a), D = U(), { message: O, notify: k } = z(), { t: A } = ne(), P = (e, t) => {
+function pe() {
+	let { vehicleId: a } = ne(), { basePath: s, navigate: f } = d(), { vehicle: p, isLoading: C, error: w, refetch: E } = m(a), D = W(), { message: O, notify: k } = z(), { t: A } = re(), P = (e, t) => {
 		let n = A(e);
 		return n === e ? t : n;
-	}, L = ee().pathname.endsWith("/edit"), { drivers: G, isLoading: K, error: Z } = h(L ? void 0 : a), Q = () => f?.(u(s, "fleet/vehicles")), $ = (e) => f?.(u(s, e));
-	return a ? L ? /* @__PURE__ */ q(de, { editId: a }) : C ? /* @__PURE__ */ q(M, { message: "Loading vehicle details..." }) : w || !p ? /* @__PURE__ */ q(j, {
+	}, L = te().pathname.endsWith("/edit");
+	U(L, E);
+	let { drivers: G, isLoading: K, error: Z } = h(L ? void 0 : a), Q = () => f?.(u(s, "fleet/vehicles")), $ = (e) => f?.(u(s, e));
+	return a ? L ? /* @__PURE__ */ q(fe, { editId: a }) : C ? /* @__PURE__ */ q(M, { message: "Loading vehicle details..." }) : w || !p ? /* @__PURE__ */ q(j, {
 		title: "Vehicle not found",
 		onRetry: E
 	}) : /* @__PURE__ */ J(N, {
@@ -555,7 +558,7 @@ function fe() {
 				icon: /* @__PURE__ */ q(c, { size: 18 }),
 				children: "The full record for this vehicle — specs, capacity, fuel and mileage, who is driving it and where it is right now. Use it to confirm a vehicle is fuelled, crewed and the right size before dispatching it on a delivery."
 			}),
-			/* @__PURE__ */ q(re, {
+			/* @__PURE__ */ q(ie, {
 				storageKey: "movethewheels-vehicle-details",
 				steps: [{
 					id: "assign",
@@ -773,7 +776,7 @@ function fe() {
 								})]
 							}, e.id))
 						})] }),
-						/* @__PURE__ */ q(W, {
+						/* @__PURE__ */ q(ee, {
 							vehicle: p,
 							t: P,
 							onRecord: async (e) => {
@@ -794,7 +797,7 @@ function fe() {
 				})]
 			})
 		]
-	}) : /* @__PURE__ */ q(de, {});
+	}) : /* @__PURE__ */ q(fe, {});
 }
 //#endregion
-export { fe as default };
+export { pe as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-movethewheels",
-  "version": "2026.930.1",
+  "version": "2026.930.3",
   "description": "Burdenoff MoveTheWheels Microfrontend - Logistics & Supply Chain Management Platform",
   "type": "module",
   "files": [

package/src/movethewheels/hooks/useFleet.ts

@@ -75,6 +75,7 @@ interface UseFleetResult {
   updateVehicle: (id: string, input: CreateVehicleInput) => Promise<Vehicle>;
   updateDriver: (id: string, input: UpdateDriverInput) => Promise<Driver>;
   deleteVehicle: (id: string) => Promise<void>;
+  deleteDriver: (id: string) => Promise<void>;
 }
 
 export interface ApiVehicle {
@@ -256,6 +257,12 @@ const GET_DRIVER_QUERY = `
   }
 `;
 
+const DELETE_DRIVER_MUTATION = `
+  mutation DeleteDriver($id: ID!) {
+    deleteDriver(id: $id)
+  }
+`;
+
 const DELETE_VEHICLE_MUTATION = `
   mutation DeleteVehicle($id: ID!) {
     deleteVehicle(id: $id)
@@ -891,6 +898,16 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
     [graphQLOptions]
   );
 
+  const deleteDriver = useCallback(
+    async (id: string): Promise<void> => {
+      await executeGraphQL<{ deleteDriver: boolean }>(graphQLOptions, DELETE_DRIVER_MUTATION, {
+        id,
+      });
+      setDrivers((previous) => previous.filter((item) => item.id !== id));
+    },
+    [graphQLOptions]
+  );
+
   return {
     vehicles,
     drivers,
@@ -904,6 +921,7 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
     updateVehicle,
     updateDriver,
     deleteVehicle,
+    deleteDriver,
   };
 }
 

package/src/movethewheels/hooks/useRefetchOnLeaveEdit.ts

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Detail pages render their `/edit` form from the same route component, so the
+ * component (and its record hook) stays mounted across edit → detail. Without a
+ * refetch the detail view keeps showing the pre-edit record. Call `refetch`
+ * exactly when the edit route is left, never on the initial mount.
+ */
+export function useRefetchOnLeaveEdit(isEditRoute: boolean, refetch: () => void): void {
+  const wasEditing = useRef(isEditRoute);
+
+  useEffect(() => {
+    if (wasEditing.current && !isEditRoute) {
+      refetch();
+    }
+    wasEditing.current = isEditRoute;
+  }, [isEditRoute, refetch]);
+}

package/src/movethewheels/pages/DriverDetailsPage.tsx

@@ -15,6 +15,7 @@ import {
   MapPin,
   Save,
   UserX,
+  Trash2,
   Truck,
   StickyNote,
 } from 'lucide-react';
@@ -57,6 +58,7 @@ import {
   type UpdateDriverInput,
 } from '../hooks/useFleet';
 import { useDebouncedValue } from '../hooks/useDebouncedValue';
+import { useRefetchOnLeaveEdit } from '../hooks/useRefetchOnLeaveEdit';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency, formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -119,7 +121,7 @@ const emptyForm: DriverFormState = {
 
 function NewDriverForm({ editId }: { editId?: string }) {
   const { basePath, navigate } = useMoveTheWheels();
-  const { createDriver, updateDriver } = useFleet();
+  const { createDriver, updateDriver, deleteDriver } = useFleet();
   const { driver, refetch: refetchDriver } = useDriver(editId);
   const isEditing = !!editId;
   const [form, setForm] = useState<DriverFormState>(emptyForm);
@@ -129,6 +131,9 @@ function NewDriverForm({ editId }: { editId?: string }) {
   const [dismissReason, setDismissReason] = useState('');
   const [dismissing, setDismissing] = useState(false);
   const [dismissError, setDismissError] = useState<string | null>(null);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
 
   const [vehicleSearch, setVehicleSearch] = useState('');
   const debouncedVehicleSearch = useDebouncedValue(vehicleSearch);
@@ -249,6 +254,21 @@ function NewDriverForm({ editId }: { editId?: string }) {
     }
   };
 
+  const handleDelete = async () => {
+    if (!editId) return;
+    setDeleting(true);
+    setDeleteError(null);
+    try {
+      await deleteDriver(editId);
+      setDeleteOpen(false);
+      navigate?.(joinPath(basePath, 'fleet/drivers'));
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : 'Failed to delete driver.');
+    } finally {
+      setDeleting(false);
+    }
+  };
+
   const alreadyDismissed = isEditing && Boolean(driver?.terminatedAt);
 
   return (
@@ -584,8 +604,60 @@ function NewDriverForm({ editId }: { editId?: string }) {
             </CardContent>
           </Card>
         )}
+
+        {isEditing && (
+          <Card className="border-status-error-border">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-status-error-text">
+                <Trash2 size={18} /> Delete Driver
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="mb-3 text-sm text-text-secondary">
+                Removes this driver record, for example one entered by mistake, and unlinks them
+                from any vehicle. To keep delivery history for someone who has left, dismiss them
+                instead. This cannot be undone from here.
+              </p>
+              <Button
+                type="button"
+                variant="outline"
+                className="border-status-error-border text-status-error-text hover:bg-status-error-bg-subtle"
+                onClick={() => setDeleteOpen(true)}
+              >
+                <Trash2 size={16} /> Delete this driver
+              </Button>
+            </CardContent>
+          </Card>
+        )}
       </form>
 
+      <ResponsiveDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <ResponsiveDialogContent>
+          <ResponsiveDialogHeader>
+            <ResponsiveDialogTitle>Delete this driver?</ResponsiveDialogTitle>
+            <ResponsiveDialogDescription>
+              This removes {`${form.firstName} ${form.lastName}`.trim() || 'this driver'} and
+              unlinks them from any vehicle. It cannot be undone from here.
+            </ResponsiveDialogDescription>
+          </ResponsiveDialogHeader>
+          <div className="px-1">
+            <FormError message={deleteError} />
+          </div>
+          <ResponsiveDialogFooter>
+            <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>
+              Cancel
+            </Button>
+            <Button
+              className="bg-status-error-text text-text-inverse hover:opacity-90"
+              onClick={handleDelete}
+              disabled={deleting}
+            >
+              {deleting ? 'Deleting...' : 'Delete driver'}
+            </Button>
+          </ResponsiveDialogFooter>
+        </ResponsiveDialogContent>
+      </ResponsiveDialog>
+
       <ResponsiveDialog open={dismissOpen} onOpenChange={setDismissOpen}>
         <ResponsiveDialogContent>
           <ResponsiveDialogHeader>
@@ -631,6 +703,7 @@ export default function DriverDetailsPage() {
   const isEditRoute = useLocation().pathname.endsWith('/edit');
   const { basePath, navigate } = useMoveTheWheels();
   const { driver, isLoading, error, refetch } = useDriver(driverId);
+  useRefetchOnLeaveEdit(isEditRoute, refetch);
   const { vehicle: assignedVehicle } = useVehicle(driver?.assignedVehicle);
 
   const goBack = () => navigate?.(joinPath(basePath, 'fleet/drivers'));

package/src/movethewheels/pages/ProductDetailsPage.tsx

@@ -42,6 +42,7 @@ import {
   ResponsiveDialogDescription,
 } from '@burdenoff/fe-libs/ui';
 import { useProduct, useInventory, useProductStockLevels } from '../hooks/useInventory';
+import { useRefetchOnLeaveEdit } from '../hooks/useRefetchOnLeaveEdit';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -326,6 +327,7 @@ export default function ProductDetailsPage() {
   const { product, isLoading, error, refetch } = useProduct(productId);
   const { deleteProduct } = useInventory();
   const isEditRoute = useLocation().pathname.endsWith('/edit');
+  useRefetchOnLeaveEdit(isEditRoute, refetch);
   const [deleteOpen, setDeleteOpen] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [deleteError, setDeleteError] = useState<string | null>(null);

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -53,6 +53,7 @@ import { EntityCombobox } from '../components/EntityCombobox';
 import { useRoute, useRoutes } from '../hooks/useRoutes';
 import { useVehicles, useVehicle, useDrivers, useDriver } from '../hooks/useFleet';
 import { useAssignmentSuggestions } from '../hooks/useFleetIntelligence';
+import { useRefetchOnLeaveEdit } from '../hooks/useRefetchOnLeaveEdit';
 import { AssignmentSuggestions } from '../components/AssignmentSuggestions';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
@@ -436,6 +437,7 @@ export default function RouteDetailsPage() {
   const isEditRoute = useLocation().pathname.endsWith('/edit');
   const { basePath, navigate } = useMoveTheWheels();
   const { route, isLoading, error, refetch } = useRoute(routeId);
+  useRefetchOnLeaveEdit(isEditRoute, refetch);
   const { optimizeRoute, updateRoute, deleteRoute } = useRoutes();
   const suggestions = useAssignmentSuggestions(routeId);
   const { t: translate } = useI18n();

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -50,6 +50,7 @@ import { useVehicle, useVehicleDrivers, useFleet, toApiVehicleStatus } from '../
 import type { VehicleFuelType, VehicleStatus } from '../types';
 import { VEHICLE_STATUS_LABELS } from '../constants';
 import { useRecordVehicleService } from '../hooks/useFleetIntelligence';
+import { useRefetchOnLeaveEdit } from '../hooks/useRefetchOnLeaveEdit';
 import { VehicleServiceCard } from '../components/VehicleServiceCard';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate, getInitials } from '../utils/formatters';
@@ -494,6 +495,7 @@ export default function VehicleDetailsPage() {
     return value === key ? fallback : value;
   };
   const isEditRoute = useLocation().pathname.endsWith('/edit');
+  useRefetchOnLeaveEdit(isEditRoute, refetch);
   // Who is behind the wheel — resolved through DriverFilterInput.vehicleId, the
   // same link `assignDriverVehicle` writes.
   const {