@burdenoff/microfe-movethewheels 2026.703.7 → 2026.704.1

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>

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -2,8 +2,8 @@
  * Vehicle 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 { Truck, ArrowLeft, MapPin, Fuel, Wrench, Edit, Save } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { StatusBadge, VehicleTypeBadge } from '../components/StatusBadge';
@@ -41,9 +41,11 @@ const VEHICLE_TYPE_OPTIONS = [
   { value: 'DRONE', label: 'Drone' },
 ];
 
-function NewVehicleForm() {
+function NewVehicleForm({ editId }: { editId?: string }) {
   const { basePath, navigate } = useMoveTheWheels();
-  const { createVehicle } = useFleet();
+  const { createVehicle, updateVehicle } = useFleet();
+  const { vehicle } = useVehicle(editId);
+  const isEditing = !!editId;
   const [form, setForm] = useState({
     vehicleNumber: '',
     type: 'VAN',
@@ -54,6 +56,18 @@ function NewVehicleForm() {
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  useEffect(() => {
+    if (editId && vehicle) {
+      setForm({
+        vehicleNumber: vehicle.vehicleNumber ?? '',
+        type: vehicle.type ? vehicle.type.toUpperCase() : 'VAN',
+        make: vehicle.make ?? '',
+        model: vehicle.model ?? '',
+        licensePlate: vehicle.licensePlate ?? '',
+      });
+    }
+  }, [editId, vehicle]);
+
   const goBack = () => navigate?.(joinPath(basePath, 'fleet/vehicles'));
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -65,14 +79,25 @@ function NewVehicleForm() {
     setSubmitting(true);
     setError(null);
     try {
-      const created = await createVehicle({
-        vehicleNumber: form.vehicleNumber.trim(),
-        type: form.type,
-        make: form.make.trim() || undefined,
-        model: form.model.trim() || undefined,
-        licensePlate: form.licensePlate.trim() || undefined,
-      });
-      navigate?.(joinPath(basePath, `fleet/vehicles/${created.id}`));
+      if (editId) {
+        const updated = await updateVehicle(editId, {
+          vehicleNumber: form.vehicleNumber.trim(),
+          type: form.type,
+          make: form.make.trim() || undefined,
+          model: form.model.trim() || undefined,
+          licensePlate: form.licensePlate.trim() || undefined,
+        });
+        navigate?.(joinPath(basePath, `fleet/vehicles/${updated.id}`));
+      } else {
+        const created = await createVehicle({
+          vehicleNumber: form.vehicleNumber.trim(),
+          type: form.type,
+          make: form.make.trim() || undefined,
+          model: form.model.trim() || undefined,
+          licensePlate: form.licensePlate.trim() || undefined,
+        });
+        navigate?.(joinPath(basePath, `fleet/vehicles/${created.id}`));
+      }
     } catch (err) {
       console.error('Failed to create vehicle:', err);
       setError(err instanceof Error ? err.message : 'Failed to create vehicle. Please try again.');
@@ -82,7 +107,7 @@ function NewVehicleForm() {
 
   return (
     <PageLayout
-      title="Add Vehicle"
+      title={isEditing ? 'Edit Vehicle' : 'Add Vehicle'}
       subtitle="Register a new vehicle in your fleet"
       icon={<Truck size={24} />}
       headerActions={
@@ -91,14 +116,21 @@ function NewVehicleForm() {
             <ArrowLeft size={16} /> Cancel
           </Button>
           <Button onClick={handleSubmit} disabled={submitting}>
-            <Save size={16} /> {submitting ? 'Saving...' : 'Add Vehicle'}
+            <Save size={16} />{' '}
+            {isEditing
+              ? submitting
+                ? 'Saving...'
+                : 'Save Changes'
+              : submitting
+                ? 'Saving...'
+                : 'Add Vehicle'}
           </Button>
         </div>
       }
     >
       <PagePurpose icon={<Truck size={18} />}>
-        Add a vehicle so it can be assigned to deliveries and routes. Give it a fleet number and type
-        to start — make, model and plate help identify it on the road.
+        Add a vehicle so it can be assigned to deliveries and routes. Give it a fleet number and
+        type to start — make, model and plate help identify it on the road.
       </PagePurpose>
 
       <form onSubmit={handleSubmit} className="max-w-2xl space-y-6">
@@ -180,11 +212,13 @@ export default function VehicleDetailsPage() {
   const { vehicleId } = useParams<{ vehicleId: string }>();
   const { basePath, navigate } = useMoveTheWheels();
   const { vehicle, isLoading, error, refetch } = useVehicle(vehicleId);
+  const isEditRoute = useLocation().pathname.endsWith('/edit');
 
   const goBack = () => navigate?.(joinPath(basePath, 'fleet/vehicles'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
   if (!vehicleId) return <NewVehicleForm />;
+  if (isEditRoute) return <NewVehicleForm editId={vehicleId} />;
   if (isLoading) return <LoadingState message="Loading vehicle details..." />;
   if (error || !vehicle) return <ErrorState title="Vehicle not found" onRetry={refetch} />;
 
@@ -198,7 +232,9 @@ export default function VehicleDetailsPage() {
           <Button variant="outline" onClick={goBack}>
             <ArrowLeft size={16} /> Back
           </Button>
-          <Button>
+          <Button
+            onClick={() => navigate?.(joinPath(basePath, 'fleet/vehicles/' + vehicleId + '/edit'))}
+          >
             <Edit size={16} /> Edit
           </Button>
         </div>

package/src/movethewheels/pages/VehiclesPage.tsx

@@ -3,7 +3,15 @@
  */
 
 import { useState } from 'react';
-import { Truck, Plus, RefreshCw, Download, CircleCheck, Route as RouteIcon, Wrench } from 'lucide-react';
+import {
+  Truck,
+  Plus,
+  RefreshCw,
+  Download,
+  CircleCheck,
+  Route as RouteIcon,
+  Wrench,
+} from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';

package/src/movethewheels/pages/WarehouseDetailsPage.tsx

@@ -2,8 +2,8 @@
  * Warehouse 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 { Warehouse, ArrowLeft, Edit, MapPin, Clock, Users, Box, Save } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import {
@@ -37,9 +37,11 @@ const WAREHOUSE_TYPE_OPTIONS = [
   { value: 'RETAIL', label: 'Retail' },
 ];
 
-function NewWarehouseForm() {
+function NewWarehouseForm({ editId }: { editId?: string }) {
   const { basePath, navigate } = useMoveTheWheels();
-  const { createWarehouse } = useInventory();
+  const { createWarehouse, updateWarehouse } = useInventory();
+  const { warehouse } = useWarehouse(editId);
+  const isEditing = !!editId;
   const [form, setForm] = useState({
     code: '',
     name: '',
@@ -54,6 +56,21 @@ function NewWarehouseForm() {
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  useEffect(() => {
+    if (!editId || !warehouse) return;
+    setForm({
+      code: warehouse.code || '',
+      name: warehouse.name || '',
+      type: warehouse.type ? warehouse.type.toUpperCase() : 'DISTRIBUTION',
+      street: warehouse.address.street || '',
+      city: warehouse.address.city || '',
+      state: warehouse.address.state || '',
+      postalCode: warehouse.address.postalCode || '',
+      country: warehouse.address.country || 'USA',
+      totalCapacity: warehouse.capacity.totalSpace ? String(warehouse.capacity.totalSpace) : '',
+    });
+  }, [editId, warehouse]);
+
   const goBack = () => navigate?.(joinPath(basePath, 'inventory/warehouses'));
 
   const update = (field: keyof typeof form, value: string) =>
@@ -73,7 +90,7 @@ function NewWarehouseForm() {
     setError(null);
     try {
       const totalCapacity = form.totalCapacity.trim() ? Number(form.totalCapacity) : undefined;
-      const created = await createWarehouse({
+      const warehouseInput = {
         code: form.code.trim(),
         name: form.name.trim(),
         type: form.type,
@@ -86,18 +103,26 @@ function NewWarehouseForm() {
         },
         totalCapacity:
           totalCapacity !== undefined && !Number.isNaN(totalCapacity) ? totalCapacity : undefined,
-      });
-      navigate?.(joinPath(basePath, `inventory/warehouses/${created.id}`));
+      };
+      if (editId) {
+        await updateWarehouse(editId, warehouseInput);
+        navigate?.(joinPath(basePath, `inventory/warehouses/${editId}`));
+      } else {
+        const created = await createWarehouse(warehouseInput);
+        navigate?.(joinPath(basePath, `inventory/warehouses/${created.id}`));
+      }
     } catch (err) {
       console.error('Failed to create warehouse:', err);
-      setError(err instanceof Error ? err.message : 'Failed to create warehouse. Please try again.');
+      setError(
+        err instanceof Error ? err.message : 'Failed to create warehouse. Please try again.'
+      );
       setSubmitting(false);
     }
   };
 
   return (
     <PageLayout
-      title="Add Warehouse"
+      title={isEditing ? 'Edit Warehouse' : 'Add Warehouse'}
       subtitle="Register a storage and fulfilment site"
       icon={<Warehouse size={24} />}
       headerActions={
@@ -106,7 +131,14 @@ function NewWarehouseForm() {
             <ArrowLeft size={16} /> Cancel
           </Button>
           <Button onClick={handleSubmit} disabled={submitting}>
-            <Save size={16} /> {submitting ? 'Saving...' : 'Add Warehouse'}
+            <Save size={16} />{' '}
+            {isEditing
+              ? submitting
+                ? 'Saving...'
+                : 'Save Changes'
+              : submitting
+                ? 'Saving...'
+                : 'Add Warehouse'}
           </Button>
         </div>
       }
@@ -244,12 +276,14 @@ function NewWarehouseForm() {
 export default function WarehouseDetailsPage() {
   const { warehouseId } = useParams<{ warehouseId: string }>();
   const { basePath, navigate } = useMoveTheWheels();
+  const isEditRoute = useLocation().pathname.endsWith('/edit');
   const { warehouse, isLoading, error, refetch } = useWarehouse(warehouseId);
 
   const goBack = () => navigate?.(joinPath(basePath, 'inventory/warehouses'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
   if (!warehouseId) return <NewWarehouseForm />;
+  if (isEditRoute) return <NewWarehouseForm editId={warehouseId} />;
   if (isLoading) return <LoadingState message="Loading warehouse details..." />;
   if (error || !warehouse) return <ErrorState title="Warehouse not found" onRetry={refetch} />;
 
@@ -265,7 +299,11 @@ export default function WarehouseDetailsPage() {
           <Button variant="outline" onClick={goBack}>
             <ArrowLeft size={16} /> Back
           </Button>
-          <Button>
+          <Button
+            onClick={() =>
+              navigate?.(joinPath(basePath, `inventory/warehouses/${warehouseId}/edit`))
+            }
+          >
             <Edit size={16} /> Edit
           </Button>
         </div>

package/src/movethewheels/types/index.ts

@@ -307,6 +307,7 @@ export interface Vehicle {
   type: VehicleType;
   make: string;
   model: string;
+  licensePlate: string;
   year: number;
   capacity: {
     weight: number;
@@ -339,6 +340,8 @@ export interface Driver {
   id: string;
   userId: string;
   fullName: string;
+  email: string;
+  phone: string;
   employeeId: string;
   licenseNumber: string;
   licenseType: string;

package/src/movethewheels/utils/graphqlClient.ts

@@ -69,6 +69,40 @@ function isAbortError(error: unknown): boolean {
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
+/**
+ * Global in-flight cap across every GraphQL call this MFE makes. The workspace
+ * service runs a single lean replica (no PgBouncer), and a page like the
+ * dashboard fans out ~7 queries at once; multiplied by the retry loop below a
+ * transient blip could balloon into dozens of simultaneous requests and tip the
+ * replica over. A small semaphore keeps the fan-out polite — requests beyond the
+ * limit queue for a moment instead of stampeding the service. 4 is high enough
+ * that normal navigation feels instant, low enough that a burst never floods.
+ */
+const MAX_CONCURRENT = 4;
+let activeRequests = 0;
+const pendingAcquirers: Array<() => void> = [];
+
+function acquireSlot(): Promise<void> {
+  return new Promise((resolve) => {
+    if (activeRequests < MAX_CONCURRENT) {
+      activeRequests += 1;
+      resolve();
+    } else {
+      pendingAcquirers.push(resolve);
+    }
+  });
+}
+
+function releaseSlot(): void {
+  const next = pendingAcquirers.shift();
+  if (next) {
+    // Hand the slot straight to the next waiter — activeRequests stays put.
+    next();
+  } else {
+    activeRequests -= 1;
+  }
+}
+
 export async function executeGraphQL<TData>(
   options: GraphQLRequestOptions,
   query: string,
@@ -88,12 +122,28 @@ export async function executeGraphQL<TData>(
   };
   const body = JSON.stringify({ query, variables });
 
+  // Serialize past the global concurrency cap before doing any network work,
+  // and always release the slot when this call settles (success or failure).
+  await acquireSlot();
+  try {
+    return await runWithRetries<TData>(url, headers, body);
+  } finally {
+    releaseSlot();
+  }
+}
+
+async function runWithRetries<TData>(
+  url: string,
+  headers: Record<string, string>,
+  body: string
+): Promise<TData> {
   let lastError: Error = new Error('GraphQL request failed');
 
   for (let attempt = 0; attempt <= MAX_RETRIES; attempt += 1) {
     const canRetry = attempt < MAX_RETRIES;
     // Exponential backoff with jitter before each retry (not the first attempt).
-    if (attempt > 0) await sleep(Math.min(250 * 2 ** (attempt - 1), 2000) + Math.floor(Math.random() * 150));
+    if (attempt > 0)
+      await sleep(Math.min(250 * 2 ** (attempt - 1), 2000) + Math.floor(Math.random() * 150));
 
     const controller = new AbortController();
     const timeoutId = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);