@burdenoff/microfe-movethewheels 2026.703.1 → 2026.703.3

package/src/movethewheels/pages/OrdersListPage.tsx

@@ -168,7 +168,7 @@ export default function OrdersListPage() {
             {
               label: t('movethewheels.orders.actions.export', 'Export'),
               icon: <Download size={16} />,
-              onSelect: () => {},
+              onSelect: () => goTo('import-export'),
             },
           ]}
         />

package/src/movethewheels/pages/ProductDetailsPage.tsx

@@ -2,15 +2,157 @@
  * Product Details Page
  */
 
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Package, ArrowLeft, Edit, Box, DollarSign, Tag } from 'lucide-react';
+import { Package, ArrowLeft, Edit, Box, DollarSign, Tag, Save } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
-import { Card, CardContent, CardHeader, CardTitle, Button, Badge } from '../components/ui';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  Input,
+  Label,
+} from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useProduct } from '../hooks/useInventory';
+import { useProduct, useInventory } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { FormError } from '../components/FormError';
+
+function NewProductForm() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { createProduct } = useInventory();
+  const [form, setForm] = useState({
+    name: '',
+    sku: '',
+    category: '',
+    brand: '',
+    weight: '',
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const goBack = () => navigate?.(joinPath(basePath, 'inventory/products'));
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!form.name.trim() || !form.sku.trim()) {
+      setError('Product name and SKU are required.');
+      return;
+    }
+    setSubmitting(true);
+    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}`));
+    } catch (err) {
+      console.error('Failed to create product:', err);
+      setError(err instanceof Error ? err.message : 'Failed to create product. Please try again.');
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <PageLayout
+      title="Add Product"
+      subtitle="Add an item to your catalog"
+      icon={<Package 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 Product'}
+          </Button>
+        </div>
+      }
+    >
+      <PagePurpose icon={<Package size={18} />}>
+        Add a product so it can be added to orders and stocked in warehouses. A name and SKU are all
+        it takes to start — category, brand and weight help with picking, pricing and routing.
+      </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">Product 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="Wireless Headphones"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="sku">
+                  SKU <span className="text-status-error-text">*</span>
+                </Label>
+                <Input
+                  id="sku"
+                  value={form.sku}
+                  onChange={(e) => setForm((prev) => ({ ...prev, sku: e.target.value }))}
+                  placeholder="SKU-001"
+                  required
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="category">Category</Label>
+                <Input
+                  id="category"
+                  value={form.category}
+                  onChange={(e) => setForm((prev) => ({ ...prev, category: e.target.value }))}
+                  placeholder="Electronics"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="brand">Brand</Label>
+                <Input
+                  id="brand"
+                  value={form.brand}
+                  onChange={(e) => setForm((prev) => ({ ...prev, brand: e.target.value }))}
+                  placeholder="Acme"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="weight">Weight (kg)</Label>
+                <Input
+                  id="weight"
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={form.weight}
+                  onChange={(e) => setForm((prev) => ({ ...prev, weight: e.target.value }))}
+                  placeholder="0.5"
+                />
+              </div>
+            </div>
+          </div>
+        </EmphasisPanel>
+      </form>
+    </PageLayout>
+  );
+}
 
 export default function ProductDetailsPage() {
   const { productId } = useParams<{ productId: string }>();
@@ -20,6 +162,7 @@ export default function ProductDetailsPage() {
   const goBack = () => navigate?.(joinPath(basePath, 'inventory/products'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
+  if (!productId) return <NewProductForm />;
   if (isLoading) return <LoadingState message="Loading product details..." />;
   if (error || !product) return <ErrorState title="Product not found" onRetry={refetch} />;
 

package/src/movethewheels/pages/ProductsPage.tsx

@@ -98,10 +98,14 @@ export default function ProductsPage() {
       icon={<Package size={24} />}
       headerActions={
         <CTAOverflowMenu
-          primary={{ label: 'Add Product', icon: <Plus size={16} />, onSelect: () => {} }}
+          primary={{
+            label: 'Add Product',
+            icon: <Plus size={16} />,
+            onSelect: () => goTo('inventory/products/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/RouteDetailsPage.tsx

@@ -2,17 +2,298 @@
  * Route Details Page
  */
 
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Navigation, ArrowLeft, Edit, MapPin, Clock, Zap, CheckCircle } from 'lucide-react';
-import { PageLayout, LoadingState, ErrorState, EmptyState } from '../components/PageLayout';
+import {
+  Navigation,
+  ArrowLeft,
+  Edit,
+  MapPin,
+  Clock,
+  Zap,
+  CheckCircle,
+  Plus,
+  Trash2,
+  Save,
+} from 'lucide-react';
+import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { StatusBadge } 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 { useRoute, useRoutes } from '../hooks/useRoutes';
+import { useFleet } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate, formatAddress } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
 import { ROUTE_STATUS_COLORS } from '../constants';
+import { FormError } from '../components/FormError';
+import type { Route as RouteType, RouteStop } from '../types';
+
+const ROUTE_STATUS_OPTIONS: { value: RouteType['status']; label: string }[] = [
+  { value: 'planned', label: 'Planned' },
+  { value: 'in_progress', label: 'In Progress' },
+  { value: 'completed', label: 'Completed' },
+  { value: 'cancelled', label: 'Cancelled' },
+];
+
+function NewRouteForm() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { createRoute } = useRoutes();
+  const { vehicles, drivers } = useFleet();
+  const [form, setForm] = useState<{
+    name: string;
+    status: RouteType['status'];
+    vehicleId: string;
+    driverId: string;
+    stops: { address: string; type: 'pickup' | 'delivery' }[];
+  }>({
+    name: '',
+    status: 'planned',
+    vehicleId: '',
+    driverId: '',
+    stops: [{ address: '', type: 'delivery' }],
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const goBack = () => navigate?.(joinPath(basePath, 'routes'));
+
+  const addStop = () =>
+    setForm((prev) => ({
+      ...prev,
+      stops: [...prev.stops, { address: '', type: 'delivery' }],
+    }));
+
+  const removeStop = (index: number) =>
+    setForm((prev) => ({
+      ...prev,
+      stops: prev.stops.filter((_, i) => i !== index),
+    }));
+
+  const updateStop = (index: number, field: 'address' | 'type', value: string) =>
+    setForm((prev) => ({
+      ...prev,
+      stops: prev.stops.map((stop, i) => (i === index ? { ...stop, [field]: value } : stop)),
+    }));
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!form.name.trim()) {
+      setError('Route name is required.');
+      return;
+    }
+    const filledStops = form.stops.filter((stop) => stop.address.trim());
+    if (filledStops.length === 0) {
+      setError('Add at least one stop with an address.');
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      const stops: RouteStop[] = filledStops.map((stop, index) => ({
+        id: `stop-${index + 1}`,
+        orderId: '',
+        sequence: index + 1,
+        address: {
+          street: stop.address.trim(),
+          city: '',
+          state: '',
+          postalCode: '',
+          country: '',
+        },
+        type: stop.type,
+        scheduledTime: new Date(),
+        duration: 0,
+        status: 'pending',
+      }));
+      const created = await createRoute({
+        name: form.name.trim(),
+        status: form.status,
+        vehicleId: form.vehicleId || undefined,
+        driverId: form.driverId || undefined,
+        stops,
+      });
+      navigate?.(joinPath(basePath, `routes/${created.id}`));
+    } catch (err) {
+      console.error('Failed to create route:', err);
+      setError(err instanceof Error ? err.message : 'Failed to create route. Please try again.');
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <PageLayout
+      title="Create Route"
+      subtitle="Plan a new delivery route"
+      icon={<Navigation 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 Route'}
+          </Button>
+        </div>
+      }
+    >
+      <PagePurpose icon={<Navigation size={18} />}>
+        Plan a new delivery route — name it, list the stops to visit, and optionally assign a vehicle
+        and driver. Once created you can optimize it to sequence the stops into the shortest run.
+      </PagePurpose>
+
+      <form onSubmit={handleSubmit} className="max-w-3xl space-y-6">
+        <FormError message={error} />
+
+        <EmphasisPanel>
+          <h2 className="text-base font-semibold text-text-primary mb-4">Route 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">
+                  Route 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="Downtown morning run"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="status">Status</Label>
+                <Select
+                  value={form.status}
+                  onValueChange={(value) =>
+                    setForm((prev) => ({ ...prev, status: value as RouteType['status'] }))
+                  }
+                >
+                  <SelectTrigger id="status">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {ROUTE_STATUS_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-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="vehicle">Vehicle (optional)</Label>
+                <Select
+                  value={form.vehicleId}
+                  onValueChange={(value) => setForm((prev) => ({ ...prev, vehicleId: value }))}
+                >
+                  <SelectTrigger id="vehicle">
+                    <SelectValue placeholder="Assign later" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {vehicles.map((vehicle) => (
+                      <SelectItem key={vehicle.id} value={vehicle.id}>
+                        {vehicle.vehicleNumber} ({vehicle.type})
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="driver">Driver (optional)</Label>
+                <Select
+                  value={form.driverId}
+                  onValueChange={(value) => setForm((prev) => ({ ...prev, driverId: value }))}
+                >
+                  <SelectTrigger id="driver">
+                    <SelectValue placeholder="Assign later" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {drivers.map((driver) => (
+                      <SelectItem key={driver.id} value={driver.id}>
+                        {driver.fullName} ({driver.employeeId})
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </div>
+        </EmphasisPanel>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle>
+              Stops <span className="text-status-error-text">*</span>
+            </CardTitle>
+            <Button type="button" variant="outline" size="sm" onClick={addStop}>
+              <Plus size={16} /> Add Stop
+            </Button>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {form.stops.map((stop, index) => (
+              <div key={index} className="grid grid-cols-1 md:grid-cols-12 gap-3 items-end">
+                <div className="md:col-span-7 space-y-2">
+                  <Label htmlFor={`stop-address-${index}`}>Stop {index + 1} address</Label>
+                  <Input
+                    id={`stop-address-${index}`}
+                    value={stop.address}
+                    onChange={(e) => updateStop(index, 'address', e.target.value)}
+                    placeholder="123 Main St, San Francisco, CA"
+                  />
+                </div>
+                <div className="md:col-span-4 space-y-2">
+                  <Label htmlFor={`stop-type-${index}`}>Type</Label>
+                  <Select
+                    value={stop.type}
+                    onValueChange={(value) => updateStop(index, 'type', value)}
+                  >
+                    <SelectTrigger id={`stop-type-${index}`}>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="pickup">Pickup</SelectItem>
+                      <SelectItem value="delivery">Delivery</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="md:col-span-1 flex justify-end">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="text-status-error-text"
+                    onClick={() => removeStop(index)}
+                    disabled={form.stops.length === 1}
+                    aria-label={`Remove stop ${index + 1}`}
+                  >
+                    <Trash2 size={16} />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </form>
+    </PageLayout>
+  );
+}
 
 export default function RouteDetailsPage() {
   const { routeId } = useParams<{ routeId: string }>();
@@ -25,28 +306,7 @@ export default function RouteDetailsPage() {
 
   // Handle new route form
   if (!routeId) {
-    return (
-      <PageLayout
-        title="Create Route"
-        subtitle="Plan a new delivery route"
-        icon={<Navigation size={24} />}
-        headerActions={
-          <Button variant="outline" onClick={goBack}>
-            <ArrowLeft size={16} /> Back
-          </Button>
-        }
-      >
-        <PagePurpose icon={<Navigation size={18} />}>
-          Plan a new delivery route — pick the stops to visit, and the optimizer will sequence them
-          into the shortest driving plan so one driver can cover them in a single run.
-        </PagePurpose>
-        <EmptyState
-          illustration="onboarding"
-          title="Build your route"
-          description="The route planner lets you add stops, set the running order, and optimize for distance and time."
-        />
-      </PageLayout>
-    );
+    return <NewRouteForm />;
   }
 
   if (isLoading) return <LoadingState message="Loading route details..." />;