@burdenoff/microfe-movethewheels 2026.703.8 → 2026.704.1

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,7 +116,14 @@ 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>
       }
@@ -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/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,8 +103,14 @@ 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(
@@ -99,7 +122,7 @@ function NewWarehouseForm() {
 
   return (
     <PageLayout
-      title="Add Warehouse"
+      title={isEditing ? 'Edit Warehouse' : 'Add Warehouse'}
       subtitle="Register a storage and fulfilment site"
       icon={<Warehouse size={24} />}
       headerActions={
@@ -108,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>
       }
@@ -246,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} />;
 
@@ -267,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;