@burdenoff/microfe-movethewheels 2026.626.2 → 2026.703.2

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -2,16 +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 }>();
@@ -24,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..." />;
@@ -60,13 +321,6 @@ export default function RouteDetailsPage() {
     }
   };
 
-  const statusColors = {
-    planned: { bg: 'bg-blue-100', text: 'text-blue-700' },
-    in_progress: { bg: 'bg-yellow-100', text: 'text-yellow-700' },
-    completed: { bg: 'bg-green-100', text: 'text-green-700' },
-    cancelled: { bg: 'bg-red-100', text: 'text-red-700' },
-  };
-
   return (
     <PageLayout
       title={route.name}
@@ -89,7 +343,7 @@ export default function RouteDetailsPage() {
       }
       headerContent={
         <div className="flex gap-2">
-          <StatusBadge status={route.status} customColors={statusColors[route.status]} />
+          <StatusBadge status={route.status} customColors={ROUTE_STATUS_COLORS[route.status]} />
           <Badge variant={route.optimized ? 'default' : 'secondary'}>
             {route.optimized ? 'Optimized' : 'Not Optimized'}
           </Badge>
@@ -159,7 +413,7 @@ export default function RouteDetailsPage() {
                   <div key={stop.id} className="flex gap-4">
                     <div className="relative">
                       <div
-                        className={`w-8 h-8 rounded-full flex items-center justify-center ${stop.status === 'completed' ? 'bg-green-500 text-white' : 'bg-bg-sunken'}`}
+                        className={`w-8 h-8 rounded-full flex items-center justify-center ${stop.status === 'completed' ? 'bg-status-success-text text-text-inverse' : 'bg-bg-sunken'}`}
                       >
                         {stop.status === 'completed' ? <CheckCircle size={16} /> : stop.sequence}
                       </div>
@@ -188,7 +442,7 @@ export default function RouteDetailsPage() {
                             Scheduled: {formatDate(stop.scheduledTime, 'time')}
                           </p>
                           {stop.actualTime && (
-                            <p className="text-sm text-green-600">
+                            <p className="text-sm text-status-success-text">
                               Actual: {formatDate(stop.actualTime, 'time')}
                             </p>
                           )}
@@ -267,7 +521,7 @@ export default function RouteDetailsPage() {
                 {route.trafficConditions.map((tc, i) => (
                   <div
                     key={i}
-                    className={`p-2 rounded mb-2 ${tc.condition === 'severe' ? 'bg-red-50' : tc.condition === 'heavy' ? 'bg-orange-50' : 'bg-yellow-50'}`}
+                    className={`p-2 rounded mb-2 ${tc.condition === 'severe' ? 'bg-status-error-bg-subtle' : tc.condition === 'heavy' ? 'bg-status-warning-bg-subtle' : 'bg-status-warning-bg-subtle'}`}
                   >
                     <p className="text-sm font-medium capitalize">{tc.condition} traffic</p>
                     <p className="text-xs text-text-secondary">

package/src/movethewheels/pages/RoutesPage.tsx

@@ -12,6 +12,7 @@ import { useRoutes } from '../hooks/useRoutes';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { ROUTE_STATUS_COLORS } from '../constants';
 import type { Route } from '../types';
 
 export default function RoutesPage() {
@@ -33,15 +34,9 @@ export default function RoutesPage() {
       header: 'Status',
       accessorKey: 'status',
       sortable: true,
-      cell: (row) => {
-        const colors = {
-          planned: { bg: 'bg-blue-100', text: 'text-blue-700' },
-          in_progress: { bg: 'bg-yellow-100', text: 'text-yellow-700' },
-          completed: { bg: 'bg-green-100', text: 'text-green-700' },
-          cancelled: { bg: 'bg-red-100', text: 'text-red-700' },
-        };
-        return <StatusBadge status={row.status} customColors={colors[row.status]} />;
-      },
+      cell: (row) => (
+        <StatusBadge status={row.status} customColors={ROUTE_STATUS_COLORS[row.status]} />
+      ),
     },
     {
       id: 'stops',