@burdenoff/microfe-movethewheels 2026.930.2 → 2026.930.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-movethewheels",
-  "version": "2026.930.2",
+  "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/pages/DriverDetailsPage.tsx

@@ -15,6 +15,7 @@ import {
   MapPin,
   Save,
   UserX,
+  Trash2,
   Truck,
   StickyNote,
 } from 'lucide-react';
@@ -120,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);
@@ -130,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);
@@ -250,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 (
@@ -585,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>