@burdenoff/microfe-movethewheels 2026.703.8 → 2026.704.1

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/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,7 +115,14 @@ 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>
       }
@@ -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/ProductDetailsPage.tsx

@@ -2,8 +2,8 @@
  * Product 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 { Package, ArrowLeft, Edit, Box, DollarSign, Tag, Save } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import {
@@ -23,9 +23,11 @@ import { formatCurrency } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
 import { FormError } from '../components/FormError';
 
-function NewProductForm() {
+function NewProductForm({ editId }: { editId?: string }) {
   const { basePath, navigate } = useMoveTheWheels();
-  const { createProduct } = useInventory();
+  const { createProduct, updateProduct } = useInventory();
+  const { product } = useProduct(editId);
+  const isEditing = !!editId;
   const [form, setForm] = useState({
     name: '',
     sku: '',
@@ -36,6 +38,18 @@ function NewProductForm() {
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  useEffect(() => {
+    if (editId && product) {
+      setForm({
+        name: product.name ?? '',
+        sku: product.sku ?? '',
+        category: product.category ?? '',
+        brand: product.brand ?? '',
+        weight: product.weight != null ? String(product.weight) : '',
+      });
+    }
+  }, [editId, product]);
+
   const goBack = () => navigate?.(joinPath(basePath, 'inventory/products'));
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -48,14 +62,25 @@ function NewProductForm() {
     setError(null);
     try {
       const weight = form.weight.trim() ? Number(form.weight) : undefined;
-      const created = await createProduct({
-        name: form.name.trim(),
-        sku: form.sku.trim(),
-        category: form.category.trim() || undefined,
-        brand: form.brand.trim() || undefined,
-        weight: weight !== undefined && !Number.isNaN(weight) ? weight : undefined,
-      });
-      navigate?.(joinPath(basePath, `inventory/products/${created.id}`));
+      if (isEditing && editId) {
+        const updated = await updateProduct(editId, {
+          name: form.name.trim(),
+          sku: form.sku.trim(),
+          category: form.category.trim() || undefined,
+          brand: form.brand.trim() || undefined,
+          weight: weight !== undefined && !Number.isNaN(weight) ? weight : undefined,
+        });
+        navigate?.(joinPath(basePath, `inventory/products/${updated.id}`));
+      } else {
+        const created = await createProduct({
+          name: form.name.trim(),
+          sku: form.sku.trim(),
+          category: form.category.trim() || undefined,
+          brand: form.brand.trim() || undefined,
+          weight: weight !== undefined && !Number.isNaN(weight) ? weight : undefined,
+        });
+        navigate?.(joinPath(basePath, `inventory/products/${created.id}`));
+      }
     } catch (err) {
       console.error('Failed to create product:', err);
       setError(err instanceof Error ? err.message : 'Failed to create product. Please try again.');
@@ -65,7 +90,7 @@ function NewProductForm() {
 
   return (
     <PageLayout
-      title="Add Product"
+      title={isEditing ? 'Edit Product' : 'Add Product'}
       subtitle="Add an item to your catalog"
       icon={<Package size={24} />}
       headerActions={
@@ -74,7 +99,14 @@ function NewProductForm() {
             <ArrowLeft size={16} /> Cancel
           </Button>
           <Button onClick={handleSubmit} disabled={submitting}>
-            <Save size={16} /> {submitting ? 'Saving...' : 'Add Product'}
+            <Save size={16} />{' '}
+            {isEditing
+              ? submitting
+                ? 'Saving...'
+                : 'Save Changes'
+              : submitting
+                ? 'Saving...'
+                : 'Add Product'}
           </Button>
         </div>
       }
@@ -158,11 +190,13 @@ export default function ProductDetailsPage() {
   const { productId } = useParams<{ productId: string }>();
   const { basePath, navigate } = useMoveTheWheels();
   const { product, isLoading, error, refetch } = useProduct(productId);
+  const isEditRoute = useLocation().pathname.endsWith('/edit');
 
   const goBack = () => navigate?.(joinPath(basePath, 'inventory/products'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
   if (!productId) return <NewProductForm />;
+  if (isEditRoute) return <NewProductForm editId={productId} />;
   if (isLoading) return <LoadingState message="Loading product details..." />;
   if (error || !product) return <ErrorState title="Product not found" onRetry={refetch} />;
 
@@ -176,7 +210,9 @@ export default function ProductDetailsPage() {
           <Button variant="outline" onClick={goBack}>
             <ArrowLeft size={16} /> Back
           </Button>
-          <Button>
+          <Button
+            onClick={() => navigate?.(joinPath(basePath, `inventory/products/${productId}/edit`))}
+          >
             <Edit size={16} /> Edit
           </Button>
         </div>

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -2,8 +2,8 @@
  * Route Details Page
  */
 
-import { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useParams, useLocation } from 'react-router-dom';
 import {
   Navigation,
   ArrowLeft,
@@ -56,10 +56,12 @@ const ROUTE_STATUS_OPTIONS: { value: RouteType['status']; label: string }[] = [
   { value: 'cancelled', label: 'Cancelled' },
 ];
 
-function NewRouteForm() {
+function NewRouteForm({ editId }: { editId?: string }) {
   const { basePath, navigate } = useMoveTheWheels();
-  const { createRoute } = useRoutes();
+  const { createRoute, updateRoute } = useRoutes();
+  const { route } = useRoute(editId);
   const { vehicles, drivers } = useFleet();
+  const isEditing = !!editId;
   const [form, setForm] = useState<{
     name: string;
     status: RouteType['status'];
@@ -76,6 +78,24 @@ function NewRouteForm() {
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // When editing, prefill the form from the loaded route once it resolves.
+  useEffect(() => {
+    if (!editId || !route) return;
+    setForm({
+      name: route.name || '',
+      status: route.status,
+      vehicleId: route.vehicleId || '',
+      driverId: route.driverId || '',
+      stops:
+        route.stops.length > 0
+          ? route.stops.map((stop) => ({
+              address: formatAddress(stop.address) || stop.address.street || '',
+              type: stop.type,
+            }))
+          : [{ address: '', type: 'delivery' }],
+    });
+  }, [editId, route]);
+
   const goBack = () => navigate?.(joinPath(basePath, 'routes'));
 
   const addStop = () =>
@@ -135,6 +155,17 @@ function NewRouteForm() {
         duration: 0,
         status: 'pending',
       }));
+      if (isEditing) {
+        const updated = await updateRoute(editId, {
+          name: form.name.trim(),
+          status: form.status,
+          vehicleId: form.vehicleId || undefined,
+          driverId: form.driverId || undefined,
+          stops,
+        });
+        navigate?.(joinPath(basePath, `routes/${updated.id}`));
+        return;
+      }
       const created = await createRoute({
         name: form.name.trim(),
         status: form.status,
@@ -152,7 +183,7 @@ function NewRouteForm() {
 
   return (
     <PageLayout
-      title="Create Route"
+      title={isEditing ? 'Edit Route' : 'Create Route'}
       subtitle="Plan a new delivery route"
       icon={<Navigation size={24} />}
       headerActions={
@@ -161,7 +192,14 @@ function NewRouteForm() {
             <ArrowLeft size={16} /> Cancel
           </Button>
           <Button onClick={handleSubmit} disabled={submitting}>
-            <Save size={16} /> {submitting ? 'Saving...' : 'Create Route'}
+            <Save size={16} />{' '}
+            {isEditing
+              ? submitting
+                ? 'Saving...'
+                : 'Save Changes'
+              : submitting
+                ? 'Saving...'
+                : 'Create Route'}
           </Button>
         </div>
       }
@@ -333,6 +371,7 @@ function NewRouteForm() {
 
 export default function RouteDetailsPage() {
   const { routeId } = useParams<{ routeId: string }>();
+  const isEditRoute = useLocation().pathname.endsWith('/edit');
   const { basePath, navigate } = useMoveTheWheels();
   const { route, isLoading, error, refetch } = useRoute(routeId);
   const { optimizeRoute } = useRoutes();
@@ -363,6 +402,11 @@ export default function RouteDetailsPage() {
     return <NewRouteForm />;
   }
 
+  // Handle edit route form
+  if (isEditRoute) {
+    return <NewRouteForm editId={routeId} />;
+  }
+
   if (isLoading) return <LoadingState message="Loading route details..." />;
   if (error || !route) return <ErrorState title="Route not found" onRetry={refetch} />;
 
@@ -397,7 +441,7 @@ export default function RouteDetailsPage() {
               <Zap size={16} /> {optimizing ? 'Optimizing…' : 'Optimize'}
             </Button>
           )}
-          <Button>
+          <Button onClick={() => navigate?.(joinPath(basePath, `routes/${routeId}/edit`))}>
             <Edit size={16} /> Edit
           </Button>
         </div>