@burdenoff/microfe-movethewheels 2026.822.1 → 2026.827.1

package/src/movethewheels/pages/CreateOrderPage.tsx

@@ -6,7 +6,7 @@
 
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router';
-import { Package, ArrowLeft, Save, Plus, Trash2, Users, MapPin } from 'lucide-react';
+import { Package, ArrowLeft, Save, Plus, Trash2, Users, MapPin, CalendarClock } from 'lucide-react';
 import { PageLayout, EmptyState } from '../components/PageLayout';
 import { FormError } from '../components/FormError';
 import {
@@ -31,6 +31,22 @@ import { useCustomers } from '../hooks/useCustomers';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { joinPath } from '../utils/navigation';
 
+/**
+ * `<input type="datetime-local">` needs a `YYYY-MM-DDTHH:mm` string in LOCAL
+ * time — `Date.toISOString()` would shift the value by the UTC offset and show
+ * the operator a different slot than the one stored. Returns '' for no date.
+ */
+function toDateTimeLocalValue(date: Date | undefined): string {
+  if (!date || Number.isNaN(date.getTime())) {
+    return '';
+  }
+  const pad = (value: number) => String(value).padStart(2, '0');
+  return (
+    `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}` +
+    `T${pad(date.getHours())}:${pad(date.getMinutes())}`
+  );
+}
+
 export default function CreateOrderPage() {
   const { orderId } = useParams<{ orderId: string }>();
   const { basePath, navigate } = useMoveTheWheels();
@@ -58,6 +74,7 @@ export default function CreateOrderPage() {
       country: order?.deliveryAddress.country || 'USA',
     },
     items: order?.items || [],
+    scheduledDelivery: toDateTimeLocalValue(order?.scheduledDelivery),
     specialInstructions: order?.specialInstructions || '',
   });
 
@@ -89,6 +106,7 @@ export default function CreateOrderPage() {
         country: order.deliveryAddress.country || 'USA',
       },
       items: order.items || [],
+      scheduledDelivery: toDateTimeLocalValue(order.scheduledDelivery),
       specialInstructions: order.specialInstructions || '',
     });
   }, [order]);
@@ -113,6 +131,9 @@ export default function CreateOrderPage() {
     if (formData.items.length === 0) {
       return 'Add at least one item to the order.';
     }
+    if (formData.scheduledDelivery && Number.isNaN(Date.parse(formData.scheduledDelivery))) {
+      return 'Enter a valid scheduled delivery date and time.';
+    }
     return null;
   };
 
@@ -146,6 +167,8 @@ export default function CreateOrderPage() {
         pickupAddress: formData.pickupAddress,
         deliveryAddress: formData.deliveryAddress,
         items: formData.items,
+        // `null` clears an existing slot on edit; the service field is nullable.
+        scheduledDelivery: formData.scheduledDelivery ? new Date(formData.scheduledDelivery) : null,
         specialInstructions: formData.specialInstructions,
       };
 
@@ -466,7 +489,7 @@ export default function CreateOrderPage() {
                 {formData.items.map((item, index) => (
                   <div key={item.id}>
                     {index > 0 && <Separator className="my-4" />}
-                    <div className="grid grid-cols-1 md:grid-cols-6 gap-4">
+                    <div className="grid grid-cols-1 md:grid-cols-7 gap-4">
                       <div className="md:col-span-2 space-y-2">
                         <Label>Item Name</Label>
                         <Input
@@ -494,6 +517,18 @@ export default function CreateOrderPage() {
                           }
                         />
                       </div>
+                      <div className="space-y-2">
+                        <Label>Weight (kg)</Label>
+                        <Input
+                          type="number"
+                          min="0"
+                          step="0.1"
+                          value={item.weight}
+                          onChange={(e) =>
+                            updateItem(index, 'weight', parseFloat(e.target.value) || 0)
+                          }
+                        />
+                      </div>
                       <div className="space-y-2">
                         <Label>Value ($)</Label>
                         <Input
@@ -525,18 +560,40 @@ export default function CreateOrderPage() {
           </CardContent>
         </Card>
 
-        {/* Special Instructions */}
+        {/* Scheduling & handling notes */}
         <Card>
           <CardHeader>
-            <CardTitle>Special Instructions</CardTitle>
+            <CardTitle>Scheduling &amp; Handling</CardTitle>
           </CardHeader>
           <CardContent>
-            <Textarea
-              value={formData.specialInstructions}
-              onChange={(e) => updateField('specialInstructions', e.target.value)}
-              placeholder="Any special handling or delivery instructions..."
-              rows={4}
-            />
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <div className="space-y-2">
+                <Label htmlFor="scheduledDelivery" className="flex items-center gap-1.5">
+                  <CalendarClock size={14} className="text-text-secondary" />
+                  Scheduled Delivery
+                </Label>
+                <Input
+                  id="scheduledDelivery"
+                  type="datetime-local"
+                  value={formData.scheduledDelivery}
+                  onChange={(e) => updateField('scheduledDelivery', e.target.value)}
+                />
+                <p className="text-xs text-text-secondary">
+                  The delivery window promised to the customer. Leave blank to dispatch as soon as a
+                  driver is free.
+                </p>
+              </div>
+              <div className="md:col-span-2 space-y-2">
+                <Label htmlFor="specialInstructions">Special Instructions</Label>
+                <Textarea
+                  id="specialInstructions"
+                  value={formData.specialInstructions}
+                  onChange={(e) => updateField('specialInstructions', e.target.value)}
+                  placeholder="Any special handling or delivery instructions..."
+                  rows={4}
+                />
+              </div>
+            </div>
           </CardContent>
         </Card>
       </form>

package/src/movethewheels/pages/DeliveryCapturePage.tsx

@@ -38,6 +38,8 @@ import {
   Textarea,
 } from '../components/ui';
 import { SignaturePad, type SignaturePadHandle } from '../components/SignaturePad';
+import { StatusBadge, PriorityBadge } from '../components/StatusBadge';
+import { mapOrderPriority, mapOrderStatus } from '../hooks/useOrders';
 import { FormError } from '../components/FormError';
 import { Notice, useNotice } from '../components/Notice';
 import {
@@ -284,6 +286,12 @@ export default function DeliveryCapturePage() {
                     <p className="font-medium flex items-center gap-2">
                       <Package size={16} /> {job.deliveryJobNumber}
                     </p>
+                    {/* Stop state + urgency, straight off the job record — a driver
+                        needs to know which stop is already out for delivery. */}
+                    <div className="flex flex-wrap items-center gap-1.5 py-1">
+                      <StatusBadge status={mapOrderStatus(job.status)} type="order" size="sm" />
+                      <PriorityBadge priority={mapOrderPriority(job.priority)} size="sm" />
+                    </div>
                     {job.deliveryAddress && (
                       <p className="text-sm text-text-secondary truncate">
                         {formatAddress(job.deliveryAddress)}

package/src/movethewheels/pages/DriversPage.tsx

@@ -2,32 +2,92 @@
  * Drivers Page - List of all drivers
  */
 
-import { useState } from 'react';
-import { Users, Plus, RefreshCw, Download, Star, UserCheck, Coffee, UserMinus } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import {
+  Users,
+  Plus,
+  RefreshCw,
+  Download,
+  Star,
+  UserCheck,
+  Coffee,
+  UserMinus,
+  Filter,
+  Truck,
+} from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge } from '../components/StatusBadge';
-import { Avatar, AvatarFallback } from '../components/ui';
+import {
+  Avatar,
+  AvatarFallback,
+  Button,
+  Card,
+  CardContent,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../components/ui';
 import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useDrivers, useFleetStats } from '../hooks/useFleet';
+import { useDrivers, useDriverStatusCounts, useFleetStats, useVehicles } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
-import type { Driver } from '../types';
+import type { Driver, DriverStatus } from '../types';
+
+const STATUS_OPTIONS: Array<{ value: DriverStatus | 'all'; label: string }> = [
+  { value: 'all', label: 'All statuses' },
+  { value: 'available', label: 'Available' },
+  { value: 'busy', label: 'On delivery' },
+  { value: 'on_break', label: 'On break' },
+  { value: 'offline', label: 'Off duty' },
+];
 
 export default function DriversPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
+  const [statusFilter, setStatusFilter] = useState<DriverStatus | 'all'>('all');
+  const [licenseClassFilter, setLicenseClassFilter] = useState<string>('all');
   const { drivers, isLoading, error, refetch } = useDrivers({
     limit: pageSize,
     offset: page * pageSize,
+    status: statusFilter === 'all' ? undefined : statusFilter,
   });
   // Workforce totals + tiles from the live aggregate, not the current page.
   const { stats } = useFleetStats();
+  // Exact ON_BREAK / OFF_DUTY / INACTIVE counts — fleetStats cannot split these.
+  const { counts } = useDriverStatusCounts();
+  // Drivers carry only `vehicleId`; the roster shows the fleet number, so the
+  // vehicle list is joined client-side into an id -> number lookup.
+  const { vehicles } = useVehicles({ limit: 500 });
+  const vehicleNumberById = useMemo(
+    () => new Map(vehicles.map((vehicle) => [vehicle.id, vehicle.vehicleNumber])),
+    [vehicles]
+  );
   const totalDrivers = stats.totalDrivers;
 
+  // `DriverFilterInput` has no licenseClass, so this narrowing is applied to the
+  // fetched page only — never presented as a workspace-wide count.
+  const licenseClasses = useMemo(
+    () =>
+      Array.from(new Set(drivers.map((driver) => driver.licenseType).filter(Boolean))).sort(
+        (a, b) => a.localeCompare(b)
+      ),
+    [drivers]
+  );
+  const visibleDrivers = useMemo(
+    () =>
+      licenseClassFilter === 'all'
+        ? drivers
+        : drivers.filter((driver) => driver.licenseType === licenseClassFilter),
+    [drivers, licenseClassFilter]
+  );
+  const filtersActive = statusFilter !== 'all' || licenseClassFilter !== 'all';
+
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
   const columns: Column<Driver>[] = [
@@ -58,24 +118,6 @@ export default function DriversPage() {
       sortable: true,
       cell: (row) => <StatusBadge status={row.status} type="driver" />,
     },
-    {
-      id: 'rating',
-      header: 'Rating',
-      cell: (row) => (
-        <div className="flex items-center gap-1">
-          <Star size={14} className="text-status-warning-text fill-current" />
-          <span className="font-medium">{row.ratings.overall.toFixed(1)}</span>
-          <span className="text-text-secondary text-sm">({row.ratings.totalRatings})</span>
-        </div>
-      ),
-    },
-    {
-      id: 'deliveries',
-      header: 'Deliveries',
-      accessorKey: 'completedOrders',
-      sortable: true,
-      cell: (row) => <span className="font-medium">{row.completedOrders.toLocaleString()}</span>,
-    },
     {
       id: 'license',
       header: 'License',
@@ -86,6 +128,52 @@ export default function DriversPage() {
         </div>
       ),
     },
+    {
+      id: 'phone',
+      header: 'Phone',
+      accessorKey: 'phone',
+      cell: (row) =>
+        row.phone ? (
+          <a
+            href={`tel:${row.phone}`}
+            className="text-sm hover:underline"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {row.phone}
+          </a>
+        ) : (
+          <span className="text-sm text-text-secondary">—</span>
+        ),
+    },
+    {
+      id: 'rating',
+      header: 'Rating',
+      cell: (row) =>
+        row.ratings.overall > 0 ? (
+          <div className="flex items-center gap-1">
+            <Star size={14} className="text-status-warning-text fill-current" />
+            <span className="font-medium">{row.ratings.overall.toFixed(1)}</span>
+          </div>
+        ) : (
+          <span className="text-sm text-text-secondary">Not rated</span>
+        ),
+    },
+    {
+      id: 'vehicle',
+      header: 'Assigned vehicle',
+      cell: (row) => {
+        if (!row.assignedVehicle) {
+          return <span className="text-sm text-text-secondary">Unassigned</span>;
+        }
+        const vehicleNumber = vehicleNumberById.get(row.assignedVehicle);
+        return (
+          <span className="inline-flex items-center gap-1.5 text-sm font-medium">
+            <Truck size={14} className="text-text-secondary" />
+            {vehicleNumber ?? 'Assigned'}
+          </span>
+        );
+      },
+    },
     {
       id: 'joined',
       header: 'Join Date',
@@ -119,8 +207,8 @@ export default function DriversPage() {
       }
     >
       <PagePurpose icon={<Users size={18} />}>
-        Your delivery workforce. Track each driver&apos;s availability, performance rating,
-        completed deliveries and license status here — open a driver to review their history before
+        Your delivery workforce. Track each driver&apos;s availability, rating, licence status,
+        contact number and the vehicle they are on — open a driver to review their record before
         assigning them to an order or route.
       </PagePurpose>
 
@@ -137,15 +225,17 @@ export default function DriversPage() {
           />
           <MetricCard
             label="On break"
-            value={stats.driversByStatus.on_break}
+            value={counts.onBreak}
             icon={<Coffee size={20} />}
             accent="warning"
+            subtitle="Back on shift shortly"
           />
           <MetricCard
             label="Off duty"
-            value={stats.driversByStatus.offline}
+            value={counts.offDuty}
             icon={<UserMinus size={20} />}
             accent="neutral"
+            subtitle={counts.inactive > 0 ? `${counts.inactive} inactive` : undefined}
           />
           <MetricCard
             label="Avg rating"
@@ -157,9 +247,65 @@ export default function DriversPage() {
         </MetricGrid>
       </div>
 
+      {/* Filters */}
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex flex-wrap items-center gap-4">
+            <div className="flex items-center gap-2">
+              <Filter size={16} className="text-text-secondary" />
+              <span className="text-sm font-medium">Filters:</span>
+            </div>
+            <Select
+              value={statusFilter}
+              onValueChange={(value) => {
+                setStatusFilter(value as DriverStatus | 'all');
+                setPage(0);
+              }}
+            >
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Status" />
+              </SelectTrigger>
+              <SelectContent>
+                {STATUS_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select value={licenseClassFilter} onValueChange={setLicenseClassFilter}>
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="License class" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All licence classes</SelectItem>
+                {licenseClasses.map((licenseClass) => (
+                  <SelectItem key={licenseClass} value={licenseClass}>
+                    {licenseClass}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {filtersActive && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  setStatusFilter('all');
+                  setLicenseClassFilter('all');
+                  setPage(0);
+                }}
+              >
+                Clear filters
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
       <DataTable
         columns={columns}
-        data={drivers}
+        data={visibleDrivers}
         isLoading={isLoading}
         error={error}
         onRetry={refetch}
@@ -175,10 +321,14 @@ export default function DriversPage() {
           setPageSize(size);
           setPage(0);
         }}
-        totalItems={totalDrivers}
+        totalItems={filtersActive ? undefined : totalDrivers}
         emptyIllustration="empty-people"
-        emptyTitle="No drivers yet"
-        emptyDescription="Add drivers to start assigning deliveries and routes."
+        emptyTitle={filtersActive ? 'No drivers match these filters' : 'No drivers yet'}
+        emptyDescription={
+          filtersActive
+            ? 'Clear the status or licence-class filter to see the rest of the roster.'
+            : 'Add drivers to start assigning deliveries and routes.'
+        }
       />
     </PageLayout>
   );