@burdenoff/microfe-movethewheels 2026.703.7 → 2026.704.1

package/src/movethewheels/hooks/useFleet.ts

@@ -35,6 +35,8 @@ interface UseFleetResult {
   refetch: () => void;
   createVehicle: (input: CreateVehicleInput) => Promise<Vehicle>;
   createDriver: (input: CreateDriverInput) => Promise<Driver>;
+  updateVehicle: (id: string, input: CreateVehicleInput) => Promise<Vehicle>;
+  updateDriver: (id: string, input: CreateDriverInput) => Promise<Driver>;
 }
 
 interface ApiVehicle {
@@ -43,6 +45,7 @@ interface ApiVehicle {
   type: string;
   make?: string | null;
   model?: string | null;
+  licensePlate?: string | null;
   year?: number | null;
   capacity?: Record<string, unknown> | null;
   status: string;
@@ -58,6 +61,8 @@ interface ApiDriver {
   userId?: string | null;
   firstName: string;
   lastName: string;
+  email?: string | null;
+  phone?: string | null;
   employeeId: string;
   licenseNumber?: string | null;
   licenseClass?: string | null;
@@ -77,6 +82,7 @@ const LIST_VEHICLES_QUERY = `
       type
       make
       model
+      licensePlate
       year
       capacity
       status
@@ -96,6 +102,8 @@ const LIST_DRIVERS_QUERY = `
       userId
       firstName
       lastName
+      email
+      phone
       employeeId
       licenseNumber
       licenseClass
@@ -117,6 +125,7 @@ const GET_VEHICLE_QUERY = `
       type
       make
       model
+      licensePlate
       year
       capacity
       status
@@ -136,6 +145,8 @@ const GET_DRIVER_QUERY = `
       userId
       firstName
       lastName
+      email
+      phone
       employeeId
       licenseNumber
       licenseClass
@@ -157,6 +168,7 @@ const UPDATE_VEHICLE_STATUS_MUTATION = `
       type
       make
       model
+      licensePlate
       year
       capacity
       status
@@ -176,6 +188,8 @@ const ASSIGN_DRIVER_VEHICLE_MUTATION = `
       userId
       firstName
       lastName
+      email
+      phone
       employeeId
       licenseNumber
       licenseClass
@@ -196,6 +210,8 @@ const UPDATE_DRIVER_STATUS_MUTATION = `
       userId
       firstName
       lastName
+      email
+      phone
       employeeId
       licenseNumber
       licenseClass
@@ -217,6 +233,7 @@ const CREATE_VEHICLE_MUTATION = `
       type
       make
       model
+      licensePlate
       year
       capacity
       status
@@ -236,6 +253,51 @@ const CREATE_DRIVER_MUTATION = `
       userId
       firstName
       lastName
+      email
+      phone
+      employeeId
+      licenseNumber
+      licenseClass
+      licenseExpiry
+      status
+      currentLocation
+      rating
+      vehicleId
+      createdAt
+    }
+  }
+`;
+
+const UPDATE_VEHICLE_MUTATION = `
+  mutation UpdateVehicle($id: ID!, $input: UpdateVehicleInput!) {
+    updateVehicle(id: $id, input: $input) {
+      id
+      vehicleNumber
+      type
+      make
+      model
+      licensePlate
+      year
+      capacity
+      status
+      currentLocation
+      fuelLevel
+      mileage
+      createdAt
+      updatedAt
+    }
+  }
+`;
+
+const UPDATE_DRIVER_MUTATION = `
+  mutation UpdateDriver($id: ID!, $input: UpdateDriverInput!) {
+    updateDriver(id: $id, input: $input) {
+      id
+      userId
+      firstName
+      lastName
+      email
+      phone
       employeeId
       licenseNumber
       licenseClass
@@ -323,6 +385,7 @@ function mapVehicle(vehicle: ApiVehicle): Vehicle {
     type: (vehicle.type?.toLowerCase() ?? 'van') as Vehicle['type'],
     make: vehicle.make ?? '',
     model: vehicle.model ?? '',
+    licensePlate: vehicle.licensePlate ?? '',
     year: vehicle.year ?? new Date().getFullYear(),
     capacity: {
       weight: 0,
@@ -353,6 +416,8 @@ function mapDriver(driver: ApiDriver): Driver {
     id: driver.id,
     userId: driver.userId ?? driver.id,
     fullName: `${driver.firstName} ${driver.lastName}`.trim(),
+    email: driver.email ?? '',
+    phone: driver.phone ?? '',
     employeeId: driver.employeeId,
     licenseNumber: driver.licenseNumber ?? '',
     licenseType: driver.licenseClass ?? 'standard',
@@ -523,6 +588,52 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
     [graphQLOptions]
   );
 
+  const updateVehicle = useCallback(
+    async (id: string, input: CreateVehicleInput): Promise<Vehicle> => {
+      const data = await executeGraphQL<{ updateVehicle: ApiVehicle }>(
+        graphQLOptions,
+        UPDATE_VEHICLE_MUTATION,
+        {
+          id,
+          input: {
+            vehicleNumber: input.vehicleNumber,
+            type: input.type,
+            make: input.make,
+            model: input.model,
+            licensePlate: input.licensePlate,
+          },
+        }
+      );
+      const updated = mapVehicle(data.updateVehicle);
+      setVehicles((previous) => previous.map((item) => (item.id === id ? updated : item)));
+      return updated;
+    },
+    [graphQLOptions]
+  );
+
+  const updateDriver = useCallback(
+    async (id: string, input: CreateDriverInput): Promise<Driver> => {
+      const data = await executeGraphQL<{ updateDriver: ApiDriver }>(
+        graphQLOptions,
+        UPDATE_DRIVER_MUTATION,
+        {
+          id,
+          input: {
+            firstName: input.firstName,
+            lastName: input.lastName,
+            email: input.email,
+            phone: input.phone,
+            licenseNumber: input.licenseNumber,
+          },
+        }
+      );
+      const updated = mapDriver(data.updateDriver);
+      setDrivers((previous) => previous.map((item) => (item.id === id ? updated : item)));
+      return updated;
+    },
+    [graphQLOptions]
+  );
+
   return {
     vehicles,
     drivers,
@@ -533,6 +644,8 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
     refetch,
     createVehicle,
     createDriver,
+    updateVehicle,
+    updateDriver,
   };
 }
 

package/src/movethewheels/hooks/useInventory.ts

@@ -47,6 +47,8 @@ interface UseInventoryResult {
   ) => Promise<void>;
   createProduct: (input: CreateProductInput) => Promise<Product>;
   createWarehouse: (input: CreateWarehouseInput) => Promise<Warehouse>;
+  updateProduct: (id: string, input: CreateProductInput) => Promise<Product>;
+  updateWarehouse: (id: string, input: CreateWarehouseInput) => Promise<Warehouse>;
 }
 
 interface ApiInventoryItem {
@@ -212,6 +214,27 @@ const CREATE_PRODUCT_MUTATION = `
   }
 `;
 
+const UPDATE_PRODUCT_MUTATION = `
+  mutation UpdateProduct($id: ID!, $input: UpdateProductInput!) {
+    updateProduct(id: $id, input: $input) {
+      id
+      sku
+      name
+      description
+      category
+      brand
+      dimensions
+      weight
+      value
+      hazardous
+      fragile
+      temperatureControlled
+      createdAt
+      updatedAt
+    }
+  }
+`;
+
 const CREATE_WAREHOUSE_MUTATION = `
   mutation CreateWarehouse($input: CreateWarehouseInput!) {
     createWarehouse(input: $input) {
@@ -227,6 +250,21 @@ const CREATE_WAREHOUSE_MUTATION = `
   }
 `;
 
+const UPDATE_WAREHOUSE_MUTATION = `
+  mutation UpdateWarehouse($id: ID!, $input: UpdateWarehouseInput!) {
+    updateWarehouse(id: $id, input: $input) {
+      id
+      name
+      code
+      type
+      address
+      totalCapacity
+      usedCapacity
+      createdAt
+    }
+  }
+`;
+
 const ADJUST_INVENTORY_MUTATION = `
   mutation AdjustInventoryStock($input: AdjustInventoryStockInput!) {
     adjustInventoryStock(input: $input) {
@@ -519,6 +557,52 @@ export function useInventory(options: UseInventoryOptions = {}): UseInventoryRes
     [graphQLOptions]
   );
 
+  const updateProduct = useCallback(
+    async (id: string, input: CreateProductInput): Promise<Product> => {
+      const data = await executeGraphQL<{ updateProduct: ApiProduct }>(
+        graphQLOptions,
+        UPDATE_PRODUCT_MUTATION,
+        {
+          id,
+          input: {
+            name: input.name,
+            sku: input.sku,
+            category: input.category,
+            brand: input.brand,
+            weight: input.weight,
+          },
+        }
+      );
+      const updated = mapProduct(data.updateProduct);
+      setProducts((previous) => previous.map((item) => (item.id === id ? updated : item)));
+      return updated;
+    },
+    [graphQLOptions]
+  );
+
+  const updateWarehouse = useCallback(
+    async (id: string, input: CreateWarehouseInput): Promise<Warehouse> => {
+      const data = await executeGraphQL<{ updateWarehouse: ApiWarehouse }>(
+        graphQLOptions,
+        UPDATE_WAREHOUSE_MUTATION,
+        {
+          id,
+          input: {
+            code: input.code,
+            name: input.name,
+            type: input.type,
+            address: input.address,
+            totalCapacity: input.totalCapacity,
+          },
+        }
+      );
+      const updated = mapWarehouse(data.updateWarehouse);
+      setWarehouses((previous) => previous.map((item) => (item.id === id ? updated : item)));
+      return updated;
+    },
+    [graphQLOptions]
+  );
+
   return {
     inventory,
     products,
@@ -531,6 +615,8 @@ export function useInventory(options: UseInventoryOptions = {}): UseInventoryRes
     transferStock,
     createProduct,
     createWarehouse,
+    updateProduct,
+    updateWarehouse,
   };
 }
 

package/src/movethewheels/hooks/useSettings.ts

@@ -108,9 +108,16 @@ export function useModuleSettings(): UseModuleSettingsResult {
     [graphQLOptions]
   );
 
+  // Stabilize the preferences reference. Returning `settings?.preferences ?? {}`
+  // inline minted a fresh `{}` on every render while settings was null, which
+  // made SettingsPage's `useMemo(toForm, [preferences])` recompute every render
+  // and its `useEffect(setForm, [loadedForm])` fire in a loop → "Maximum update
+  // depth exceeded" → the page rendered blank behind the shell's error boundary.
+  const preferences = useMemo<ModulePreferences>(() => settings?.preferences ?? {}, [settings]);
+
   return {
     settings,
-    preferences: settings?.preferences ?? {},
+    preferences,
     isLoading,
     isSaving,
     error,

package/src/movethewheels/pages/CreateOrderPage.tsx

@@ -4,7 +4,7 @@
  * Form for creating or editing orders.
  */
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Package, ArrowLeft, Save, Plus, Trash2, Users, MapPin } from 'lucide-react';
 import { PageLayout, EmptyState } from '../components/PageLayout';
@@ -35,7 +35,7 @@ export default function CreateOrderPage() {
   const { orderId } = useParams<{ orderId: string }>();
   const { basePath, navigate } = useMoveTheWheels();
   const { order } = useOrder(orderId);
-  const { createOrder } = useOrders();
+  const { createOrder, updateOrder } = useOrders();
   const { customers } = useCustomers({ limit: 100 });
 
   const isEditing = !!orderId && !!order;
@@ -65,6 +65,36 @@ export default function CreateOrderPage() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [formError, setFormError] = useState<string | null>(null);
 
+  // Prefill the form from the loaded order when editing. `order` arrives
+  // asynchronously after the initial render, so the useState initializers alone
+  // leave the fields blank until this syncs them.
+  useEffect(() => {
+    if (!order) {
+      return;
+    }
+    setFormData({
+      customerId: order.customerId || '',
+      orderType: order.orderType || 'b2c',
+      priority: order.priority || 'normal',
+      pickupAddress: {
+        street: order.pickupAddress.street || '',
+        city: order.pickupAddress.city || '',
+        state: order.pickupAddress.state || '',
+        postalCode: order.pickupAddress.postalCode || '',
+        country: order.pickupAddress.country || 'USA',
+      },
+      deliveryAddress: {
+        street: order.deliveryAddress.street || '',
+        city: order.deliveryAddress.city || '',
+        state: order.deliveryAddress.state || '',
+        postalCode: order.deliveryAddress.postalCode || '',
+        country: order.deliveryAddress.country || 'USA',
+      },
+      items: order.items || [],
+      specialInstructions: order.specialInstructions || '',
+    });
+  }, [order]);
+
   const goBack = () => {
     if (navigate) {
       navigate(joinPath(basePath, 'orders'));
@@ -106,7 +136,7 @@ export default function CreateOrderPage() {
 
     setIsSubmitting(true);
     try {
-      await createOrder({
+      const input = {
         customerId: formData.customerId,
         customerInfo: {
           name: selectedCustomer.name,
@@ -120,12 +150,24 @@ export default function CreateOrderPage() {
         deliveryAddress: formData.deliveryAddress,
         items: formData.items,
         specialInstructions: formData.specialInstructions,
-      });
+      };
 
-      goBack();
+      if (isEditing && orderId) {
+        await updateOrder(orderId, input);
+        if (navigate) {
+          navigate(joinPath(basePath, `orders/${orderId}`));
+        }
+      } else {
+        await createOrder(input);
+        goBack();
+      }
     } catch (error) {
       setFormError(
-        error instanceof Error ? error.message : 'Could not create the order. Please try again.'
+        error instanceof Error
+          ? error.message
+          : isEditing
+            ? 'Could not update the order. Please try again.'
+            : 'Could not create the order. Please try again.'
       );
     } finally {
       setIsSubmitting(false);

package/src/movethewheels/pages/CustomerDetailsPage.tsx

@@ -116,8 +116,9 @@ function NewCustomerForm() {
       }
     >
       <PagePurpose icon={<Users size={18} />}>
-        Add a customer once and their contact details auto-fill every future order you book for them.
-        Only a name is required — add email, phone and company to make deliveries easier to arrange.
+        Add a customer once and their contact details auto-fill every future order you book for
+        them. Only a name is required — add email, phone and company to make deliveries easier to
+        arrange.
       </PagePurpose>
 
       <form onSubmit={handleSubmit} className="max-w-2xl space-y-6">

package/src/movethewheels/pages/DriverDetailsPage.tsx

@@ -2,8 +2,8 @@
  * Driver Details Page
  */
 
-import { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
 import {
   Users,
   ArrowLeft,
@@ -36,9 +36,11 @@ import { joinPath } from '../utils/navigation';
 import { FormError } from '../components/FormError';
 import { DocumentsCard } from '../components/DocumentsCard';
 
-function NewDriverForm() {
+function NewDriverForm({ editId }: { editId?: string }) {
   const { basePath, navigate } = useMoveTheWheels();
-  const { createDriver } = useFleet();
+  const { createDriver, updateDriver } = useFleet();
+  const { driver } = useDriver(editId);
+  const isEditing = !!editId;
   const [form, setForm] = useState({
     employeeId: '',
     firstName: '',
@@ -50,6 +52,19 @@ function NewDriverForm() {
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  useEffect(() => {
+    if (!editId || !driver) return;
+    const [firstName, ...rest] = driver.fullName.trim().split(/\s+/);
+    setForm({
+      employeeId: driver.employeeId || '',
+      firstName: firstName || '',
+      lastName: rest.join(' '),
+      email: driver.email || '',
+      phone: driver.phone || '',
+      licenseNumber: driver.licenseNumber || '',
+    });
+  }, [editId, driver]);
+
   const goBack = () => navigate?.(joinPath(basePath, 'fleet/drivers'));
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -61,25 +76,37 @@ function NewDriverForm() {
     setSubmitting(true);
     setError(null);
     try {
-      const created = await createDriver({
-        employeeId: form.employeeId.trim(),
-        firstName: form.firstName.trim(),
-        lastName: form.lastName.trim(),
-        email: form.email.trim() || undefined,
-        phone: form.phone.trim() || undefined,
-        licenseNumber: form.licenseNumber.trim() || undefined,
-      });
-      navigate?.(joinPath(basePath, `fleet/drivers/${created.id}`));
+      if (editId) {
+        const updated = await updateDriver(editId, {
+          employeeId: form.employeeId.trim(),
+          firstName: form.firstName.trim(),
+          lastName: form.lastName.trim(),
+          email: form.email.trim() || undefined,
+          phone: form.phone.trim() || undefined,
+          licenseNumber: form.licenseNumber.trim() || undefined,
+        });
+        navigate?.(joinPath(basePath, `fleet/drivers/${updated.id}`));
+      } else {
+        const created = await createDriver({
+          employeeId: form.employeeId.trim(),
+          firstName: form.firstName.trim(),
+          lastName: form.lastName.trim(),
+          email: form.email.trim() || undefined,
+          phone: form.phone.trim() || undefined,
+          licenseNumber: form.licenseNumber.trim() || undefined,
+        });
+        navigate?.(joinPath(basePath, `fleet/drivers/${created.id}`));
+      }
     } catch (err) {
-      console.error('Failed to create driver:', err);
-      setError(err instanceof Error ? err.message : 'Failed to create driver. Please try again.');
+      console.error('Failed to save driver:', err);
+      setError(err instanceof Error ? err.message : 'Failed to save driver. Please try again.');
       setSubmitting(false);
     }
   };
 
   return (
     <PageLayout
-      title="Add Driver"
+      title={isEditing ? 'Edit Driver' : 'Add Driver'}
       subtitle="Add a driver to your workforce"
       icon={<Users size={24} />}
       headerActions={
@@ -88,14 +115,21 @@ function NewDriverForm() {
             <ArrowLeft size={16} /> Cancel
           </Button>
           <Button onClick={handleSubmit} disabled={submitting}>
-            <Save size={16} /> {submitting ? 'Saving...' : 'Add Driver'}
+            <Save size={16} />{' '}
+            {isEditing
+              ? submitting
+                ? 'Saving...'
+                : 'Save Changes'
+              : submitting
+                ? 'Saving...'
+                : 'Add Driver'}
           </Button>
         </div>
       }
     >
       <PagePurpose icon={<Users size={18} />}>
-        Add a driver so they can be assigned to orders and routes. An employee ID and name get them on
-        the roster — add contact details and license number to keep the record complete.
+        Add a driver so they can be assigned to orders and routes. An employee ID and name get them
+        on the roster — add contact details and license number to keep the record complete.
       </PagePurpose>
 
       <form onSubmit={handleSubmit} className="max-w-2xl space-y-6">
@@ -180,6 +214,7 @@ function NewDriverForm() {
 
 export default function DriverDetailsPage() {
   const { driverId } = useParams<{ driverId: string }>();
+  const isEditRoute = useLocation().pathname.endsWith('/edit');
   const { basePath, navigate } = useMoveTheWheels();
   const { driver, isLoading, error, refetch } = useDriver(driverId);
 
@@ -187,6 +222,7 @@ export default function DriverDetailsPage() {
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
   if (!driverId) return <NewDriverForm />;
+  if (isEditRoute) return <NewDriverForm editId={driverId} />;
   if (isLoading) return <LoadingState message="Loading driver details..." />;
   if (error || !driver) return <ErrorState title="Driver not found" onRetry={refetch} />;
 
@@ -200,7 +236,9 @@ export default function DriverDetailsPage() {
           <Button variant="outline" onClick={goBack}>
             <ArrowLeft size={16} /> Back
           </Button>
-          <Button>
+          <Button
+            onClick={() => navigate?.(joinPath(basePath, 'fleet/drivers/' + driverId + '/edit'))}
+          >
             <Edit size={16} /> Edit
           </Button>
         </div>

package/src/movethewheels/pages/OrderDetailsPage.tsx

@@ -548,7 +548,8 @@ export default function OrderDetailsPage() {
 
                 <div className="space-y-2">
                   <p className="text-sm text-text-secondary">
-                    Current status: <span className="font-medium">{STATUS_LABELS[order.status]}</span>
+                    Current status:{' '}
+                    <span className="font-medium">{STATUS_LABELS[order.status]}</span>
                   </p>
                   {(() => {
                     const upcoming = nextStatus(order.status);