@burdenoff/microfe-movethewheels 2026.703.1 → 2026.703.2

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -2,8 +2,9 @@
  * Vehicle Details Page
  */
 
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Truck, ArrowLeft, MapPin, Fuel, Wrench, FileText, Edit } from 'lucide-react';
+import { Truck, ArrowLeft, MapPin, Fuel, Wrench, FileText, Edit, Save } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { StatusBadge, VehicleTypeBadge } from '../components/StatusBadge';
 import {
@@ -14,12 +15,166 @@ import {
   Button,
   Badge,
   Progress,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useVehicle } from '../hooks/useFleet';
+import { useVehicle, useFleet } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { FormError } from '../components/FormError';
+
+const VEHICLE_TYPE_OPTIONS = [
+  { value: 'TRUCK', label: 'Truck' },
+  { value: 'VAN', label: 'Van' },
+  { value: 'MOTORCYCLE', label: 'Motorcycle' },
+  { value: 'BICYCLE', label: 'Bicycle' },
+  { value: 'FLATBED', label: 'Flatbed' },
+  { value: 'REFRIGERATED', label: 'Refrigerated' },
+  { value: 'SEMI_TRAILER', label: 'Semi-Trailer' },
+  { value: 'DRONE', label: 'Drone' },
+];
+
+function NewVehicleForm() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { createVehicle } = useFleet();
+  const [form, setForm] = useState({
+    vehicleNumber: '',
+    type: 'VAN',
+    make: '',
+    model: '',
+    licensePlate: '',
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const goBack = () => navigate?.(joinPath(basePath, 'fleet/vehicles'));
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!form.vehicleNumber.trim()) {
+      setError('Vehicle number is required.');
+      return;
+    }
+    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}`));
+    } catch (err) {
+      console.error('Failed to create vehicle:', err);
+      setError(err instanceof Error ? err.message : 'Failed to create vehicle. Please try again.');
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <PageLayout
+      title="Add Vehicle"
+      subtitle="Register a new vehicle in your fleet"
+      icon={<Truck size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={goBack} disabled={submitting}>
+            <ArrowLeft size={16} /> Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={submitting}>
+            <Save size={16} /> {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.
+      </PagePurpose>
+
+      <form onSubmit={handleSubmit} className="max-w-2xl space-y-6">
+        <FormError message={error} />
+        <EmphasisPanel>
+          <h2 className="text-base font-semibold text-text-primary mb-4">Vehicle Details</h2>
+          <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="vehicleNumber">
+                  Vehicle Number <span className="text-status-error-text">*</span>
+                </Label>
+                <Input
+                  id="vehicleNumber"
+                  value={form.vehicleNumber}
+                  onChange={(e) => setForm((prev) => ({ ...prev, vehicleNumber: e.target.value }))}
+                  placeholder="MTW-001"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="type">
+                  Type <span className="text-status-error-text">*</span>
+                </Label>
+                <Select
+                  value={form.type}
+                  onValueChange={(value) => setForm((prev) => ({ ...prev, type: value }))}
+                >
+                  <SelectTrigger id="type">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {VEHICLE_TYPE_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="make">Make</Label>
+                <Input
+                  id="make"
+                  value={form.make}
+                  onChange={(e) => setForm((prev) => ({ ...prev, make: e.target.value }))}
+                  placeholder="Ford"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="model">Model</Label>
+                <Input
+                  id="model"
+                  value={form.model}
+                  onChange={(e) => setForm((prev) => ({ ...prev, model: e.target.value }))}
+                  placeholder="Transit"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="licensePlate">License Plate</Label>
+                <Input
+                  id="licensePlate"
+                  value={form.licensePlate}
+                  onChange={(e) => setForm((prev) => ({ ...prev, licensePlate: e.target.value }))}
+                  placeholder="ABC-1234"
+                />
+              </div>
+            </div>
+          </div>
+        </EmphasisPanel>
+      </form>
+    </PageLayout>
+  );
+}
 
 export default function VehicleDetailsPage() {
   const { vehicleId } = useParams<{ vehicleId: string }>();
@@ -29,6 +184,7 @@ export default function VehicleDetailsPage() {
   const goBack = () => navigate?.(joinPath(basePath, 'fleet/vehicles'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
+  if (!vehicleId) return <NewVehicleForm />;
   if (isLoading) return <LoadingState message="Loading vehicle details..." />;
   if (error || !vehicle) return <ErrorState title="Vehicle not found" onRetry={refetch} />;
 

package/src/movethewheels/pages/VehiclesPage.tsx

@@ -95,7 +95,11 @@ export default function VehiclesPage() {
       icon={<Truck size={24} />}
       headerActions={
         <CTAOverflowMenu
-          primary={{ label: 'Add Vehicle', icon: <Plus size={16} />, onSelect: () => {} }}
+          primary={{
+            label: 'Add Vehicle',
+            icon: <Plus size={16} />,
+            onSelect: () => goTo('fleet/vehicles/new'),
+          }}
           actions={[
             { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
             { label: 'Export', icon: <Download size={16} />, onSelect: () => {} },

package/src/movethewheels/pages/WarehouseDetailsPage.tsx

@@ -2,8 +2,9 @@
  * Warehouse Details Page
  */
 
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Warehouse, ArrowLeft, Edit, MapPin, Clock, Users, Box } from 'lucide-react';
+import { Warehouse, ArrowLeft, Edit, MapPin, Clock, Users, Box, Save } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import {
   Card,
@@ -13,12 +14,232 @@ import {
   Button,
   Badge,
   Progress,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useWarehouse } from '../hooks/useInventory';
+import { useWarehouse, useInventory } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatAddress } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { FormError } from '../components/FormError';
+
+const WAREHOUSE_TYPE_OPTIONS = [
+  { value: 'DISTRIBUTION', label: 'Distribution' },
+  { value: 'FULFILLMENT', label: 'Fulfillment' },
+  { value: 'COLD_STORAGE', label: 'Cold Storage' },
+  { value: 'CROSS_DOCK', label: 'Cross-Dock' },
+  { value: 'RETAIL', label: 'Retail' },
+];
+
+function NewWarehouseForm() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { createWarehouse } = useInventory();
+  const [form, setForm] = useState({
+    code: '',
+    name: '',
+    type: 'DISTRIBUTION',
+    street: '',
+    city: '',
+    state: '',
+    postalCode: '',
+    country: 'USA',
+    totalCapacity: '',
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const goBack = () => navigate?.(joinPath(basePath, 'inventory/warehouses'));
+
+  const update = (field: keyof typeof form, value: string) =>
+    setForm((prev) => ({ ...prev, [field]: value }));
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!form.code.trim() || !form.name.trim()) {
+      setError('Warehouse code and name are required.');
+      return;
+    }
+    if (!form.street.trim() || !form.city.trim()) {
+      setError('A street and city are required for the warehouse address.');
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      const totalCapacity = form.totalCapacity.trim() ? Number(form.totalCapacity) : undefined;
+      const created = await createWarehouse({
+        code: form.code.trim(),
+        name: form.name.trim(),
+        type: form.type,
+        address: {
+          street: form.street.trim(),
+          city: form.city.trim(),
+          state: form.state.trim(),
+          postalCode: form.postalCode.trim(),
+          country: form.country.trim(),
+        },
+        totalCapacity:
+          totalCapacity !== undefined && !Number.isNaN(totalCapacity) ? totalCapacity : undefined,
+      });
+      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.');
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <PageLayout
+      title="Add Warehouse"
+      subtitle="Register a storage and fulfilment site"
+      icon={<Warehouse size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={goBack} disabled={submitting}>
+            <ArrowLeft size={16} /> Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={submitting}>
+            <Save size={16} /> {submitting ? 'Saving...' : 'Add Warehouse'}
+          </Button>
+        </div>
+      }
+    >
+      <PagePurpose icon={<Warehouse size={18} />}>
+        Add a warehouse so you can store inventory and fulfil orders from it. A code, name, type and
+        location get it on the network — set a total capacity to track utilization.
+      </PagePurpose>
+
+      <form onSubmit={handleSubmit} className="max-w-2xl space-y-6">
+        <FormError message={error} />
+        <EmphasisPanel>
+          <h2 className="text-base font-semibold text-text-primary mb-4">Warehouse Details</h2>
+          <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="code">
+                  Code <span className="text-status-error-text">*</span>
+                </Label>
+                <Input
+                  id="code"
+                  value={form.code}
+                  onChange={(e) => update('code', e.target.value)}
+                  placeholder="WH-SF-01"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="name">
+                  Name <span className="text-status-error-text">*</span>
+                </Label>
+                <Input
+                  id="name"
+                  value={form.name}
+                  onChange={(e) => update('name', e.target.value)}
+                  placeholder="San Francisco DC"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="type">
+                  Type <span className="text-status-error-text">*</span>
+                </Label>
+                <Select value={form.type} onValueChange={(value) => update('type', value)}>
+                  <SelectTrigger id="type">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {WAREHOUSE_TYPE_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="totalCapacity">Total Capacity (sq ft)</Label>
+              <Input
+                id="totalCapacity"
+                type="number"
+                min="0"
+                value={form.totalCapacity}
+                onChange={(e) => update('totalCapacity', e.target.value)}
+                placeholder="50000"
+              />
+            </div>
+          </div>
+        </EmphasisPanel>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <MapPin size={18} /> Address <span className="text-status-error-text">*</span>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="street">Street</Label>
+              <Input
+                id="street"
+                value={form.street}
+                onChange={(e) => update('street', e.target.value)}
+                placeholder="500 Industrial Way"
+              />
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="city">City</Label>
+                <Input
+                  id="city"
+                  value={form.city}
+                  onChange={(e) => update('city', e.target.value)}
+                  placeholder="San Francisco"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="state">State</Label>
+                <Input
+                  id="state"
+                  value={form.state}
+                  onChange={(e) => update('state', e.target.value)}
+                  placeholder="CA"
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="postalCode">ZIP / Postal Code</Label>
+                <Input
+                  id="postalCode"
+                  value={form.postalCode}
+                  onChange={(e) => update('postalCode', e.target.value)}
+                  placeholder="94103"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="country">Country</Label>
+                <Input
+                  id="country"
+                  value={form.country}
+                  onChange={(e) => update('country', e.target.value)}
+                  placeholder="USA"
+                />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </form>
+    </PageLayout>
+  );
+}
 
 export default function WarehouseDetailsPage() {
   const { warehouseId } = useParams<{ warehouseId: string }>();
@@ -28,6 +249,7 @@ export default function WarehouseDetailsPage() {
   const goBack = () => navigate?.(joinPath(basePath, 'inventory/warehouses'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
+  if (!warehouseId) return <NewWarehouseForm />;
   if (isLoading) return <LoadingState message="Loading warehouse details..." />;
   if (error || !warehouse) return <ErrorState title="Warehouse not found" onRetry={refetch} />;
 

package/src/movethewheels/pages/WarehousesPage.tsx

@@ -99,7 +99,11 @@ export default function WarehousesPage() {
       icon={<Warehouse size={24} />}
       headerActions={
         <CTAOverflowMenu
-          primary={{ label: 'Add Warehouse', icon: <Plus size={16} />, onSelect: () => {} }}
+          primary={{
+            label: 'Add Warehouse',
+            icon: <Plus size={16} />,
+            onSelect: () => goTo('inventory/warehouses/new'),
+          }}
           actions={[{ label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() }]}
         />
       }