@burdenoff/microfe-movethewheels 2026.925.2 → 2026.925.3

package/dist/pages/WarehousesPage.js

@@ -1,85 +1,140 @@
 import { CircleCheck as e } from "../node_modules/lucide-react/dist/esm/icons/circle-check.js";
-import { Gauge as t } from "../node_modules/lucide-react/dist/esm/icons/gauge.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 { Warehouse as i } from "../node_modules/lucide-react/dist/esm/icons/warehouse.js";
-import { joinPath as a } from "../utils/navigation.js";
-import { useMoveTheWheels as o } from "../providers/MoveTheWheelsProvider.js";
-import { useWarehouseStats as s, useWarehouses as c } from "../hooks/useInventory.js";
-import { Badge as l, Progress as u } from "../components/ui.js";
-import { PageLayout as d } from "../components/PageLayout.js";
-import { MetricCard as f, MetricGrid as p } from "../components/MetricCard.js";
-import { DataTable as m } from "../components/DataTable.js";
-import { useDebouncedValue as h } from "../hooks/useDebouncedValue.js";
-import { useState as g } from "react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { CTAOverflowMenu as y, PagePurpose as b } from "@burdenoff/fe-libs/ui";
+import { Filter as t } from "../node_modules/lucide-react/dist/esm/icons/filter.js";
+import { Gauge as n } from "../node_modules/lucide-react/dist/esm/icons/gauge.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 { Warehouse as a } from "../node_modules/lucide-react/dist/esm/icons/warehouse.js";
+import { joinPath as o } from "../utils/navigation.js";
+import { useMoveTheWheels as s } from "../providers/MoveTheWheelsProvider.js";
+import { useWarehouseStats as c, useWarehouses as l } from "../hooks/useInventory.js";
+import { Badge as u, 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 { DataTable as C } from "../components/DataTable.js";
+import { useDebouncedValue as w } from "../hooks/useDebouncedValue.js";
+import { useState as T } from "react";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
+import { CTAOverflowMenu as O, PagePurpose as k } from "@burdenoff/fe-libs/ui";
 //#region src/movethewheels/pages/WarehousesPage.tsx
-function x() {
-	let { basePath: x, navigate: S } = o(), [C, w] = g(0), [T, E] = g(25), [D, O] = g(""), k = h(D), { warehouses: A, totalWarehouses: j, hasMore: M, isLoading: N, error: P, refetch: F } = c({
-		limit: T,
-		offset: C * T,
-		search: k
-	}), { stats: I } = s(), L = (e) => S?.(a(x, e));
-	return /* @__PURE__ */ v(d, {
+var A = [
+	{
+		value: "all",
+		label: "All statuses"
+	},
+	{
+		value: "ACTIVE",
+		label: "Active"
+	},
+	{
+		value: "INACTIVE",
+		label: "Inactive"
+	}
+];
+function j() {
+	let { basePath: j, navigate: M } = s(), [N, P] = T(0), [F, I] = T(25), [L, R] = T(""), [z, B] = T("all"), V = w(L), { warehouses: H, totalWarehouses: U, hasMore: W, isLoading: G, error: K, refetch: q } = l({
+		limit: F,
+		offset: N * F,
+		search: V,
+		status: z === "all" ? void 0 : z
+	}), J = z !== "all" || L.length > 0, { stats: Y } = c(), X = (e) => M?.(o(j, e));
+	return /* @__PURE__ */ D(b, {
 		title: "Warehouses",
-		subtitle: `${I.total} warehouses`,
-		icon: /* @__PURE__ */ _(i, { size: 24 }),
-		headerActions: /* @__PURE__ */ _(y, {
+		subtitle: `${Y.total} warehouses`,
+		icon: /* @__PURE__ */ E(a, { size: 24 }),
+		headerActions: /* @__PURE__ */ E(O, {
 			primary: {
 				label: "Add Warehouse",
-				icon: /* @__PURE__ */ _(n, { size: 16 }),
-				onSelect: () => L("inventory/warehouses/new")
+				icon: /* @__PURE__ */ E(r, { size: 16 }),
+				onSelect: () => X("inventory/warehouses/new")
 			},
 			actions: [{
 				label: "Refresh",
-				icon: /* @__PURE__ */ _(r, { size: 16 }),
-				onSelect: () => F()
+				icon: /* @__PURE__ */ E(i, { size: 16 }),
+				onSelect: () => q()
 			}]
 		}),
 		children: [
-			/* @__PURE__ */ _(b, {
-				icon: /* @__PURE__ */ _(i, { size: 18 }),
+			/* @__PURE__ */ E(k, {
+				icon: /* @__PURE__ */ E(a, { size: 18 }),
 				children: "Your storage and fulfilment sites. Watch space and pallet utilization across each warehouse to balance stock, spot capacity crunches, and decide where to fulfil an order from."
 			}),
-			/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
+			/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
 				className: "mb-3 text-sm font-medium text-text-secondary",
 				children: "Network at a glance"
-			}), /* @__PURE__ */ v(p, {
+			}), /* @__PURE__ */ D(S, {
 				columns: 3,
 				children: [
-					/* @__PURE__ */ _(f, {
+					/* @__PURE__ */ E(x, {
 						label: "Total sites",
-						value: I.total,
-						icon: /* @__PURE__ */ _(i, { size: 20 }),
+						value: Y.total,
+						icon: /* @__PURE__ */ E(a, { size: 20 }),
 						accent: "brand"
 					}),
-					/* @__PURE__ */ _(f, {
+					/* @__PURE__ */ E(x, {
 						label: "Active",
-						value: I.active,
-						icon: /* @__PURE__ */ _(e, { size: 20 }),
+						value: Y.active,
+						icon: /* @__PURE__ */ E(e, { size: 20 }),
 						accent: "success",
 						subtitle: "Fulfilling orders"
 					}),
-					/* @__PURE__ */ _(f, {
+					/* @__PURE__ */ E(x, {
 						label: "Avg utilization",
-						value: I.total > 0 ? `${Math.round(I.avgUtilization * 100)}%` : "—",
-						icon: /* @__PURE__ */ _(t, { size: 20 }),
+						value: Y.total > 0 ? `${Math.round(Y.avgUtilization * 100)}%` : "—",
+						icon: /* @__PURE__ */ E(n, { size: 20 }),
 						accent: "blue"
 					})
 				]
 			})] }),
-			/* @__PURE__ */ _(m, {
+			/* @__PURE__ */ E(f, { children: /* @__PURE__ */ E(p, {
+				className: "p-4",
+				children: /* @__PURE__ */ D("div", {
+					className: "flex flex-wrap items-center gap-4",
+					children: [
+						/* @__PURE__ */ D("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ E(t, {
+								size: 16,
+								className: "text-text-secondary"
+							}), /* @__PURE__ */ E("span", {
+								className: "text-sm font-medium",
+								children: "Filters:"
+							})]
+						}),
+						/* @__PURE__ */ D(h, {
+							value: z,
+							onValueChange: (e) => {
+								B(e), P(0);
+							},
+							children: [/* @__PURE__ */ E(v, {
+								className: "w-[180px]",
+								children: /* @__PURE__ */ E(y, { placeholder: "Status" })
+							}), /* @__PURE__ */ E(g, { children: A.map((e) => /* @__PURE__ */ E(_, {
+								value: e.value,
+								children: e.label
+							}, e.value)) })]
+						}),
+						J && /* @__PURE__ */ E(d, {
+							variant: "ghost",
+							size: "sm",
+							onClick: () => {
+								B("all"), R(""), P(0);
+							},
+							children: "Clear filters"
+						})
+					]
+				})
+			}) }),
+			/* @__PURE__ */ E(C, {
 				columns: [
 					{
 						id: "name",
 						header: "Warehouse",
 						accessorKey: "name",
 						sortable: !0,
-						cell: (e) => /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
+						cell: (e) => /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
 							className: "font-medium",
 							children: e.name
-						}), /* @__PURE__ */ _("p", {
+						}), /* @__PURE__ */ E("p", {
 							className: "text-sm text-text-secondary",
 							children: e.code
 						})] })
@@ -87,11 +142,11 @@ function x() {
 					{
 						id: "location",
 						header: "Location",
-						cell: (e) => /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ v("p", { children: [
+						cell: (e) => /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ D("p", { children: [
 							e.address.city,
 							", ",
 							e.address.state
-						] }), /* @__PURE__ */ _("p", {
+						] }), /* @__PURE__ */ E("p", {
 							className: "text-sm text-text-secondary",
 							children: e.address.country
 						})] })
@@ -100,7 +155,7 @@ function x() {
 						id: "type",
 						header: "Type",
 						accessorKey: "type",
-						cell: (e) => /* @__PURE__ */ _(l, {
+						cell: (e) => /* @__PURE__ */ E(u, {
 							variant: "outline",
 							className: "capitalize",
 							children: e.type.replace("_", " ")
@@ -111,12 +166,12 @@ function x() {
 						header: "Utilization",
 						cell: (e) => {
 							let t = e.capacity.usedSpace / e.capacity.totalSpace * 100;
-							return /* @__PURE__ */ v("div", {
+							return /* @__PURE__ */ D("div", {
 								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ _(u, {
+								children: [/* @__PURE__ */ E(m, {
 									value: t,
 									className: "w-16 h-2"
-								}), /* @__PURE__ */ v("span", {
+								}), /* @__PURE__ */ D("span", {
 									className: "text-sm",
 									children: [t.toFixed(0), "%"]
 								})]
@@ -126,55 +181,49 @@ function x() {
 					{
 						id: "capacity",
 						header: "Capacity",
-						cell: (e) => /* @__PURE__ */ v("div", {
+						cell: (e) => /* @__PURE__ */ D("p", {
 							className: "text-sm",
-							children: [/* @__PURE__ */ v("p", { children: [
+							children: [
 								e.capacity.usedSpace.toLocaleString(),
 								" / ",
 								e.capacity.totalSpace.toLocaleString(),
-								" ",
-								"sq ft"
-							] }), /* @__PURE__ */ v("p", {
-								className: "text-text-secondary",
-								children: [
-									e.capacity.usedPallets,
-									" / ",
-									e.capacity.totalPallets,
-									" pallets"
-								]
-							})]
+								" sq ft"
+							]
 						})
 					},
 					{
 						id: "status",
 						header: "Status",
-						cell: (e) => /* @__PURE__ */ _(l, {
-							variant: e.isActive ? "default" : "secondary",
-							children: e.isActive ? "Active" : "Inactive"
-						})
+						cell: (e) => {
+							let t = e.status.toUpperCase() === "ACTIVE";
+							return /* @__PURE__ */ E(u, {
+								variant: t ? "default" : "secondary",
+								children: t ? "Active" : "Inactive"
+							});
+						}
 					}
 				],
-				data: A,
-				isLoading: N,
-				error: P,
-				onRetry: F,
+				data: H,
+				isLoading: G,
+				error: K,
+				onRetry: q,
 				searchable: !0,
 				searchPlaceholder: "Search warehouses...",
 				searchFields: ["name", "code"],
-				searchQuery: D,
+				searchQuery: L,
 				onSearchQueryChange: (e) => {
-					O(e), w(0);
+					R(e), P(0);
 				},
-				onRowClick: (e) => L(`inventory/warehouses/${e.id}`),
+				onRowClick: (e) => X(`inventory/warehouses/${e.id}`),
 				getRowId: (e) => e.id,
-				pageIndex: C,
-				pageSize: T,
-				onPageChange: w,
+				pageIndex: N,
+				pageSize: F,
+				onPageChange: P,
 				onPageSizeChange: (e) => {
-					E(e), w(0);
+					I(e), P(0);
 				},
-				totalItems: j,
-				hasNextPage: M,
+				totalItems: U,
+				hasNextPage: W,
 				emptyIllustration: "empty-data",
 				emptyTitle: "No warehouses yet",
 				emptyDescription: "Add a warehouse to store inventory and fulfil orders from it."
@@ -183,4 +232,4 @@ function x() {
 	});
 }
 //#endregion
-export { x as default };
+export { j as default };

package/package.json

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

package/src/movethewheels/components/StatusBadge.tsx

@@ -4,6 +4,7 @@ import type { OrderStatus, VehicleStatus, DriverStatus } from '../types';
 import {
   ORDER_STATUS_COLORS,
   VEHICLE_STATUS_COLORS,
+  VEHICLE_STATUS_LABELS,
   DRIVER_STATUS_COLORS,
   DRIVER_STATUS_LABELS,
   PRIORITY_COLORS,
@@ -66,10 +67,14 @@ export function StatusBadge({
   // Format status for display — an explicit label always wins; driver status
   // otherwise renders from the same shared label map the filters use, so the
   // table and the filter dropdown can never drift apart again (BOFF-7909).
+  const sharedLabel =
+    type === 'driver'
+      ? DRIVER_STATUS_LABELS[status]
+      : type === 'vehicle'
+        ? VEHICLE_STATUS_LABELS[status]
+        : undefined;
   const displayStatus =
-    label ??
-    (type === 'driver' ? DRIVER_STATUS_LABELS[status] : undefined) ??
-    status.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+    label ?? sharedLabel ?? status.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
 
   return (
     <Badge

package/src/movethewheels/constants/index.ts

@@ -57,6 +57,15 @@ export const VEHICLE_STATUS_COLORS: Record<string, StatusColor> = {
   assigned: INFO,
   maintenance: WARNING,
   out_of_service: ERROR,
+  decommissioned: NEUTRAL,
+};
+
+export const VEHICLE_STATUS_LABELS: Record<string, string> = {
+  available: 'Available',
+  assigned: 'In Transit',
+  maintenance: 'Maintenance',
+  out_of_service: 'Out of Service',
+  decommissioned: 'Decommissioned',
 };
 
 // Driver status colors

package/src/movethewheels/hooks/useCustomers.ts

@@ -142,9 +142,6 @@ function mapCustomer(customer: ApiCustomer): Customer {
     },
     businessLicense: customer.businessLicense ?? undefined,
     taxId: customer.taxId ?? undefined,
-    preferredContactMethod: 'email',
-    marketingOptIn: false,
-    isActive: !customer.deletedAt,
     rating: customer.rating ?? 0,
     createdAt: new Date(customer.createdAt),
     updatedAt: new Date(customer.updatedAt),

package/src/movethewheels/hooks/useFleet.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
-import type { Driver, DriverStatus, FleetFilter, Vehicle, VehicleStatus } from '../types';
+import type { Driver, DriverStatus, FleetFilter, Location, Vehicle, VehicleStatus } from '../types';
 import { executeGraphQL } from '../utils/graphqlClient';
 
 interface UseFleetOptions {
@@ -22,6 +22,7 @@ export interface CreateVehicleInput {
   status?: string;
   fuelType?: string;
   fuelEfficiencyLPer100Km?: number;
+  capacity?: { weight?: number; volume?: number; pallets?: number };
 }
 
 export interface CreateDriverInput {
@@ -63,6 +64,7 @@ interface UseFleetResult {
   createDriver: (input: CreateDriverInput) => Promise<Driver>;
   updateVehicle: (id: string, input: CreateVehicleInput) => Promise<Vehicle>;
   updateDriver: (id: string, input: UpdateDriverInput) => Promise<Driver>;
+  deleteVehicle: (id: string) => Promise<void>;
 }
 
 export interface ApiVehicle {
@@ -230,6 +232,12 @@ const GET_DRIVER_QUERY = `
   }
 `;
 
+const DELETE_VEHICLE_MUTATION = `
+  mutation DeleteVehicle($id: ID!) {
+    deleteVehicle(id: $id)
+  }
+`;
+
 const UPDATE_VEHICLE_STATUS_MUTATION = `
   mutation UpdateVehicleStatus($id: ID!, $status: VehicleStatus!) {
     updateVehicleStatus(id: $id, status: $status) {
@@ -460,12 +468,19 @@ function mapVehicleStatus(status: string): VehicleStatus {
       return 'assigned';
     case 'MAINTENANCE':
       return 'maintenance';
+    case 'DECOMMISSIONED':
+      return 'decommissioned';
     default:
       return 'out_of_service';
   }
 }
 
-/** Exported so the vehicle edit form's status field can round-trip (BOFF-7909). */
+/**
+ * Exported so the vehicle edit form's status field can round-trip (BOFF-7909).
+ * `decommissioned` must stay distinct from `out_of_service` — collapsing them
+ * used to silently rewrite a DECOMMISSIONED vehicle to INACTIVE on any save
+ * that touched status, even without the user changing it.
+ */
 export function toApiVehicleStatus(status: VehicleStatus): string {
   switch (status) {
     case 'available':
@@ -474,6 +489,8 @@ export function toApiVehicleStatus(status: VehicleStatus): string {
       return 'IN_TRANSIT';
     case 'maintenance':
       return 'MAINTENANCE';
+    case 'decommissioned':
+      return 'DECOMMISSIONED';
     default:
       return 'INACTIVE';
   }
@@ -510,6 +527,33 @@ export function toApiDriverStatus(status: DriverStatus): string {
   }
 }
 
+/**
+ * `currentLocation` is an untyped JSON blob; every real writer (the IoT
+ * telemetry consumer — `toVehicleLocation()` in
+ * wspace-movethewheels-svc/src/events/iot-location-consumer.ts — and the
+ * `updateVehicleLocation`/`updateDriverLocation`-style manual mutations)
+ * stores `lat`/`lng`/`recordedAt`, never `latitude`/`longitude`. Reading the
+ * latter (as this used to) silently produced (0, 0) for every real fix and
+ * fabricated the "last updated" timestamp as "now" on every render. Parse
+ * the actual shape instead.
+ */
+function parseCurrentLocation(
+  raw: Record<string, unknown> | null | undefined
+): Location | undefined {
+  if (!raw) return undefined;
+  const lat = raw.lat as number | undefined;
+  const lng = raw.lng as number | undefined;
+  if (typeof lat !== 'number' || typeof lng !== 'number') return undefined;
+  const recordedAt = raw.recordedAt as string | undefined;
+  return {
+    latitude: lat,
+    longitude: lng,
+    address: (raw.address as string | undefined) ?? undefined,
+    accuracy: typeof raw.accuracy === 'number' ? raw.accuracy : undefined,
+    timestamp: recordedAt ? new Date(recordedAt) : undefined,
+  };
+}
+
 export function mapVehicle(vehicle: ApiVehicle): Vehicle {
   return {
     id: vehicle.id,
@@ -519,7 +563,7 @@ export function mapVehicle(vehicle: ApiVehicle): Vehicle {
     model: vehicle.model ?? '',
     licensePlate: vehicle.licensePlate ?? '',
     ownershipType: vehicle.ownershipType ?? undefined,
-    year: vehicle.year ?? new Date().getFullYear(),
+    year: vehicle.year ?? undefined,
     capacity: {
       weight: 0,
       volume: 0,
@@ -527,14 +571,7 @@ export function mapVehicle(vehicle: ApiVehicle): Vehicle {
     },
     status: mapVehicleStatus(vehicle.status),
     driverId: undefined,
-    currentLocation: vehicle.currentLocation
-      ? {
-          latitude: Number((vehicle.currentLocation.latitude as number | undefined) ?? 0),
-          longitude: Number((vehicle.currentLocation.longitude as number | undefined) ?? 0),
-          address: (vehicle.currentLocation.address as string | undefined) ?? undefined,
-          timestamp: new Date(),
-        }
-      : undefined,
+    currentLocation: parseCurrentLocation(vehicle.currentLocation),
     lastMaintenance: vehicle.lastServiceDate ? new Date(vehicle.lastServiceDate) : undefined,
     nextMaintenance: vehicle.nextServiceDueDate ? new Date(vehicle.nextServiceDueDate) : undefined,
     nextMaintenanceMileage: vehicle.nextServiceDueMileage ?? undefined,
@@ -561,14 +598,7 @@ export function mapDriver(driver: ApiDriver): Driver {
     vehicleIds: driver.vehicleId ? [driver.vehicleId] : [],
     assignedVehicle: driver.vehicleId ?? undefined,
     status: mapDriverStatus(driver.status),
-    currentLocation: driver.currentLocation
-      ? {
-          latitude: Number((driver.currentLocation.latitude as number | undefined) ?? 0),
-          longitude: Number((driver.currentLocation.longitude as number | undefined) ?? 0),
-          address: (driver.currentLocation.address as string | undefined) ?? undefined,
-          timestamp: new Date(),
-        }
-      : undefined,
+    currentLocation: parseCurrentLocation(driver.currentLocation),
     rating: driver.rating ?? 0,
     notes: driver.notes ?? undefined,
     hireDate: driver.hireDate ? new Date(driver.hireDate) : undefined,
@@ -677,6 +707,7 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
             status: input.status,
             fuelType: input.fuelType,
             fuelEfficiencyLPer100Km: input.fuelEfficiencyLPer100Km,
+            capacity: input.capacity,
           },
         }
       );
@@ -738,6 +769,7 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
             status: input.status,
             fuelType: input.fuelType,
             fuelEfficiencyLPer100Km: input.fuelEfficiencyLPer100Km,
+            capacity: input.capacity,
           },
         }
       );
@@ -784,6 +816,16 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
     [graphQLOptions]
   );
 
+  const deleteVehicle = useCallback(
+    async (id: string): Promise<void> => {
+      await executeGraphQL<{ deleteVehicle: boolean }>(graphQLOptions, DELETE_VEHICLE_MUTATION, {
+        id,
+      });
+      setVehicles((previous) => previous.filter((item) => item.id !== id));
+    },
+    [graphQLOptions]
+  );
+
   return {
     vehicles,
     drivers,
@@ -796,6 +838,7 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
     createDriver,
     updateVehicle,
     updateDriver,
+    deleteVehicle,
   };
 }
 
@@ -824,6 +867,7 @@ interface UseVehiclesResult {
   refetch: () => void;
   updateVehicleStatus: (id: string, status: VehicleStatus) => Promise<Vehicle>;
   assignDriver: (vehicleId: string, driverId: string) => Promise<Vehicle>;
+  deleteVehicle: (id: string) => Promise<void>;
 }
 
 export function useVehicles(options: UseVehiclesOptions = {}): UseVehiclesResult {
@@ -918,6 +962,16 @@ export function useVehicles(options: UseVehiclesOptions = {}): UseVehiclesResult
     [graphQLOptions, vehicles]
   );
 
+  const deleteVehicle = useCallback(
+    async (id: string): Promise<void> => {
+      await executeGraphQL<{ deleteVehicle: boolean }>(graphQLOptions, DELETE_VEHICLE_MUTATION, {
+        id,
+      });
+      setVehicles((previous) => previous.filter((item) => item.id !== id));
+    },
+    [graphQLOptions]
+  );
+
   return {
     vehicles,
     totalVehicles,
@@ -927,6 +981,7 @@ export function useVehicles(options: UseVehiclesOptions = {}): UseVehiclesResult
     refetch,
     updateVehicleStatus,
     assignDriver,
+    deleteVehicle,
   };
 }