@burdenoff/microfe-movethewheels 2026.703.1 → 2026.703.3

package/src/movethewheels/hooks/useFleet.ts

@@ -7,6 +7,24 @@ interface UseFleetOptions {
   filters?: FleetFilter;
 }
 
+export interface CreateVehicleInput {
+  vehicleNumber: string;
+  /** VehicleType enum value, e.g. `TRUCK`, `VAN`. */
+  type: string;
+  make?: string;
+  model?: string;
+  licensePlate?: string;
+}
+
+export interface CreateDriverInput {
+  employeeId: string;
+  firstName: string;
+  lastName: string;
+  email?: string;
+  phone?: string;
+  licenseNumber?: string;
+}
+
 interface UseFleetResult {
   vehicles: Vehicle[];
   drivers: Driver[];
@@ -15,6 +33,8 @@ interface UseFleetResult {
   isLoading: boolean;
   error: Error | null;
   refetch: () => void;
+  createVehicle: (input: CreateVehicleInput) => Promise<Vehicle>;
+  createDriver: (input: CreateDriverInput) => Promise<Driver>;
 }
 
 interface ApiVehicle {
@@ -189,6 +209,46 @@ const UPDATE_DRIVER_STATUS_MUTATION = `
   }
 `;
 
+const CREATE_VEHICLE_MUTATION = `
+  mutation CreateVehicle($input: CreateVehicleInput!) {
+    createVehicle(input: $input) {
+      id
+      vehicleNumber
+      type
+      make
+      model
+      year
+      capacity
+      status
+      currentLocation
+      fuelLevel
+      mileage
+      createdAt
+      updatedAt
+    }
+  }
+`;
+
+const CREATE_DRIVER_MUTATION = `
+  mutation CreateDriver($input: CreateDriverInput!) {
+    createDriver(input: $input) {
+      id
+      userId
+      firstName
+      lastName
+      employeeId
+      licenseNumber
+      licenseClass
+      licenseExpiry
+      status
+      currentLocation
+      rating
+      vehicleId
+      createdAt
+    }
+  }
+`;
+
 const FLEET_STATS_QUERY = `
   query GetFleetStats {
     fleetStats {
@@ -416,6 +476,51 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
     void load();
   }, [load]);
 
+  const createVehicle = useCallback(
+    async (input: CreateVehicleInput): Promise<Vehicle> => {
+      const data = await executeGraphQL<{ createVehicle: ApiVehicle }>(
+        graphQLOptions,
+        CREATE_VEHICLE_MUTATION,
+        {
+          input: {
+            vehicleNumber: input.vehicleNumber,
+            type: input.type,
+            make: input.make,
+            model: input.model,
+            licensePlate: input.licensePlate,
+          },
+        }
+      );
+      const created = mapVehicle(data.createVehicle);
+      setVehicles((previous) => [created, ...previous]);
+      return created;
+    },
+    [graphQLOptions]
+  );
+
+  const createDriver = useCallback(
+    async (input: CreateDriverInput): Promise<Driver> => {
+      const data = await executeGraphQL<{ createDriver: ApiDriver }>(
+        graphQLOptions,
+        CREATE_DRIVER_MUTATION,
+        {
+          input: {
+            employeeId: input.employeeId,
+            firstName: input.firstName,
+            lastName: input.lastName,
+            email: input.email,
+            phone: input.phone,
+            licenseNumber: input.licenseNumber,
+          },
+        }
+      );
+      const created = mapDriver(data.createDriver);
+      setDrivers((previous) => [created, ...previous]);
+      return created;
+    },
+    [graphQLOptions]
+  );
+
   return {
     vehicles,
     drivers,
@@ -424,6 +529,8 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
     isLoading,
     error,
     refetch,
+    createVehicle,
+    createDriver,
   };
 }
 

package/src/movethewheels/hooks/useInventory.ts

@@ -7,6 +7,29 @@ interface UseInventoryOptions {
   filters?: InventoryFilter;
 }
 
+export interface CreateProductInput {
+  name: string;
+  sku: string;
+  category?: string;
+  brand?: string;
+  weight?: number;
+}
+
+export interface CreateWarehouseInput {
+  code: string;
+  name: string;
+  /** WarehouseType enum value, e.g. `DISTRIBUTION`, `FULFILLMENT`. */
+  type: string;
+  address: {
+    street: string;
+    city: string;
+    state: string;
+    postalCode: string;
+    country: string;
+  };
+  totalCapacity?: number;
+}
+
 interface UseInventoryResult {
   inventory: Inventory[];
   products: Product[];
@@ -22,6 +45,8 @@ interface UseInventoryResult {
     productId: string,
     quantity: number
   ) => Promise<void>;
+  createProduct: (input: CreateProductInput) => Promise<Product>;
+  createWarehouse: (input: CreateWarehouseInput) => Promise<Warehouse>;
 }
 
 interface ApiInventoryItem {
@@ -166,6 +191,42 @@ const INVENTORY_STATS_QUERY = `
   }
 `;
 
+const CREATE_PRODUCT_MUTATION = `
+  mutation CreateProduct($input: CreateProductInput!) {
+    createProduct(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) {
+      id
+      name
+      code
+      type
+      address
+      totalCapacity
+      usedCapacity
+      createdAt
+    }
+  }
+`;
+
 const ADJUST_INVENTORY_MUTATION = `
   mutation AdjustInventoryStock($input: AdjustInventoryStockInput!) {
     adjustInventoryStock(input: $input) {
@@ -412,6 +473,50 @@ export function useInventory(options: UseInventoryOptions = {}): UseInventoryRes
     [inventory, updateStock]
   );
 
+  const createProduct = useCallback(
+    async (input: CreateProductInput): Promise<Product> => {
+      const data = await executeGraphQL<{ createProduct: ApiProduct }>(
+        graphQLOptions,
+        CREATE_PRODUCT_MUTATION,
+        {
+          input: {
+            name: input.name,
+            sku: input.sku,
+            category: input.category,
+            brand: input.brand,
+            weight: input.weight,
+          },
+        }
+      );
+      const created = mapProduct(data.createProduct);
+      setProducts((previous) => [created, ...previous]);
+      return created;
+    },
+    [graphQLOptions]
+  );
+
+  const createWarehouse = useCallback(
+    async (input: CreateWarehouseInput): Promise<Warehouse> => {
+      const data = await executeGraphQL<{ createWarehouse: ApiWarehouse }>(
+        graphQLOptions,
+        CREATE_WAREHOUSE_MUTATION,
+        {
+          input: {
+            code: input.code,
+            name: input.name,
+            type: input.type,
+            address: input.address,
+            totalCapacity: input.totalCapacity,
+          },
+        }
+      );
+      const created = mapWarehouse(data.createWarehouse);
+      setWarehouses((previous) => [created, ...previous]);
+      return created;
+    },
+    [graphQLOptions]
+  );
+
   return {
     inventory,
     products,
@@ -422,6 +527,8 @@ export function useInventory(options: UseInventoryOptions = {}): UseInventoryRes
     refetch,
     updateStock,
     transferStock,
+    createProduct,
+    createWarehouse,
   };
 }
 

package/src/movethewheels/pages/CustomerDetailsPage.tsx

@@ -2,6 +2,7 @@
  * Customer Details Page
  */
 
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
   Users,
@@ -13,15 +14,164 @@ import {
   Star,
   Building,
   FileText,
+  Save,
 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { TypeBadge } from '../components/StatusBadge';
-import { Card, CardContent, CardHeader, CardTitle, Button, Badge } from '../components/ui';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useCustomer } from '../hooks/useCustomers';
+import { useCustomer, useCustomers } from '../hooks/useCustomers';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatAddress, formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { FormError } from '../components/FormError';
+
+function NewCustomerForm() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { createCustomer } = useCustomers();
+  const [form, setForm] = useState({
+    name: '',
+    type: 'b2c' as 'b2b' | 'b2c',
+    email: '',
+    phone: '',
+    company: '',
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const goBack = () => navigate?.(joinPath(basePath, 'customers'));
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!form.name.trim()) {
+      setError('Customer name is required.');
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      const created = await createCustomer({
+        name: form.name.trim(),
+        type: form.type,
+        email: form.email.trim() || undefined,
+        phone: form.phone.trim() || undefined,
+        company: form.company.trim() || undefined,
+      });
+      navigate?.(joinPath(basePath, `customers/${created.id}`));
+    } catch (err) {
+      console.error('Failed to create customer:', err);
+      setError(err instanceof Error ? err.message : 'Failed to create customer. Please try again.');
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <PageLayout
+      title="New Customer"
+      subtitle="Add a new customer to your account"
+      icon={<Users 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...' : 'Create Customer'}
+          </Button>
+        </div>
+      }
+    >
+      <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.
+      </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">Customer 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="name">
+                  Name <span className="text-status-error-text">*</span>
+                </Label>
+                <Input
+                  id="name"
+                  value={form.name}
+                  onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
+                  placeholder="Acme Corp or Jane Doe"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="type">Customer Type</Label>
+                <Select
+                  value={form.type}
+                  onValueChange={(value) =>
+                    setForm((prev) => ({ ...prev, type: value as 'b2b' | 'b2c' }))
+                  }
+                >
+                  <SelectTrigger id="type">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="b2c">B2C (Individual)</SelectItem>
+                    <SelectItem value="b2b">B2B (Business)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={form.email}
+                  onChange={(e) => setForm((prev) => ({ ...prev, email: e.target.value }))}
+                  placeholder="customer@example.com"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="phone">Phone</Label>
+                <Input
+                  id="phone"
+                  value={form.phone}
+                  onChange={(e) => setForm((prev) => ({ ...prev, phone: e.target.value }))}
+                  placeholder="+1-555-0100"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="company">Company</Label>
+              <Input
+                id="company"
+                value={form.company}
+                onChange={(e) => setForm((prev) => ({ ...prev, company: e.target.value }))}
+                placeholder="Company name (for B2B accounts)"
+              />
+            </div>
+          </div>
+        </EmphasisPanel>
+      </form>
+    </PageLayout>
+  );
+}
 
 export default function CustomerDetailsPage() {
   const { customerId } = useParams<{ customerId: string }>();
@@ -33,24 +183,7 @@ export default function CustomerDetailsPage() {
 
   // Handle new customer form
   if (!customerId) {
-    return (
-      <PageLayout
-        title="New Customer"
-        subtitle="Add a new customer"
-        icon={<Users size={24} />}
-        headerActions={
-          <Button variant="outline" onClick={goBack}>
-            <ArrowLeft size={16} /> Back
-          </Button>
-        }
-      >
-        <Card>
-          <CardContent className="p-8 text-center">
-            <p className="text-text-secondary">Customer creation form would go here</p>
-          </CardContent>
-        </Card>
-      </PageLayout>
-    );
+    return <NewCustomerForm />;
   }
 
   if (isLoading) return <LoadingState message="Loading customer details..." />;

package/src/movethewheels/pages/CustomersPage.tsx

@@ -96,7 +96,7 @@ export default function CustomersPage() {
           }}
           actions={[
             { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
-            { label: 'Export', icon: <Download size={16} />, onSelect: () => {} },
+            { label: 'Export', icon: <Download size={16} />, onSelect: () => goTo('import-export') },
           ]}
         />
       }

package/src/movethewheels/pages/DriverDetailsPage.tsx

@@ -2,8 +2,19 @@
  * Driver Details Page
  */
 
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Users, ArrowLeft, Star, DollarSign, Clock, FileText, Edit, MapPin } from 'lucide-react';
+import {
+  Users,
+  ArrowLeft,
+  Star,
+  DollarSign,
+  Clock,
+  FileText,
+  Edit,
+  MapPin,
+  Save,
+} from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { StatusBadge } from '../components/StatusBadge';
 import {
@@ -14,12 +25,157 @@ import {
   Button,
   Badge,
   Progress,
+  Input,
+  Label,
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useDriver } from '../hooks/useFleet';
+import { useDriver, useFleet } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency, formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { FormError } from '../components/FormError';
+
+function NewDriverForm() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { createDriver } = useFleet();
+  const [form, setForm] = useState({
+    employeeId: '',
+    firstName: '',
+    lastName: '',
+    email: '',
+    phone: '',
+    licenseNumber: '',
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const goBack = () => navigate?.(joinPath(basePath, 'fleet/drivers'));
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!form.employeeId.trim() || !form.firstName.trim() || !form.lastName.trim()) {
+      setError('Employee ID, first name and last name are required.');
+      return;
+    }
+    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}`));
+    } catch (err) {
+      console.error('Failed to create driver:', err);
+      setError(err instanceof Error ? err.message : 'Failed to create driver. Please try again.');
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <PageLayout
+      title="Add Driver"
+      subtitle="Add a driver to your workforce"
+      icon={<Users 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 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.
+      </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">Driver 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="employeeId">
+                  Employee ID <span className="text-status-error-text">*</span>
+                </Label>
+                <Input
+                  id="employeeId"
+                  value={form.employeeId}
+                  onChange={(e) => setForm((prev) => ({ ...prev, employeeId: e.target.value }))}
+                  placeholder="EMP-001"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="firstName">
+                  First Name <span className="text-status-error-text">*</span>
+                </Label>
+                <Input
+                  id="firstName"
+                  value={form.firstName}
+                  onChange={(e) => setForm((prev) => ({ ...prev, firstName: e.target.value }))}
+                  placeholder="Jane"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="lastName">
+                  Last Name <span className="text-status-error-text">*</span>
+                </Label>
+                <Input
+                  id="lastName"
+                  value={form.lastName}
+                  onChange={(e) => setForm((prev) => ({ ...prev, lastName: e.target.value }))}
+                  placeholder="Doe"
+                  required
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={form.email}
+                  onChange={(e) => setForm((prev) => ({ ...prev, email: e.target.value }))}
+                  placeholder="jane.doe@example.com"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="phone">Phone</Label>
+                <Input
+                  id="phone"
+                  value={form.phone}
+                  onChange={(e) => setForm((prev) => ({ ...prev, phone: e.target.value }))}
+                  placeholder="+1-555-0100"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="licenseNumber">License Number</Label>
+                <Input
+                  id="licenseNumber"
+                  value={form.licenseNumber}
+                  onChange={(e) => setForm((prev) => ({ ...prev, licenseNumber: e.target.value }))}
+                  placeholder="D1234567"
+                />
+              </div>
+            </div>
+          </div>
+        </EmphasisPanel>
+      </form>
+    </PageLayout>
+  );
+}
 
 export default function DriverDetailsPage() {
   const { driverId } = useParams<{ driverId: string }>();
@@ -29,6 +185,7 @@ export default function DriverDetailsPage() {
   const goBack = () => navigate?.(joinPath(basePath, 'fleet/drivers'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
+  if (!driverId) return <NewDriverForm />;
   if (isLoading) return <LoadingState message="Loading driver details..." />;
   if (error || !driver) return <ErrorState title="Driver not found" onRetry={refetch} />;
 

package/src/movethewheels/pages/DriversPage.tsx

@@ -92,10 +92,14 @@ export default function DriversPage() {
       icon={<Users size={24} />}
       headerActions={
         <CTAOverflowMenu
-          primary={{ label: 'Add Driver', icon: <Plus size={16} />, onSelect: () => {} }}
+          primary={{
+            label: 'Add Driver',
+            icon: <Plus size={16} />,
+            onSelect: () => goTo('fleet/drivers/new'),
+          }}
           actions={[
             { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
-            { label: 'Export', icon: <Download size={16} />, onSelect: () => {} },
+            { label: 'Export', icon: <Download size={16} />, onSelect: () => goTo('import-export') },
           ]}
         />
       }

package/src/movethewheels/pages/InventoryPage.tsx

@@ -42,7 +42,7 @@ export default function InventoryPage() {
           primary={{
             label: t('movethewheels.inventory.actions.addProduct', 'Add Product'),
             icon: <Plus size={16} />,
-            onSelect: () => {},
+            onSelect: () => goTo('inventory/products/new'),
           }}
           actions={[
             {