@burdenoff/microfe-movethewheels 2026.830.4 → 2026.918.1

package/src/movethewheels/components/AssignmentSuggestions.tsx

@@ -0,0 +1,234 @@
+/**
+ * AssignmentSuggestions
+ *
+ * Ranked vehicles and drivers that can take a route right now, each with the
+ * reasons behind the ranking, and a one-click assign. Ranking and eligibility
+ * (in service, licence valid, not already on a live route) are decided
+ * server-side by `assignmentSuggestions`; the server also re-checks the same
+ * guardrails when the assignment is saved, so a stale suggestion is rejected
+ * with a clear message rather than silently applied.
+ */
+
+import { useState } from 'react';
+import { Sparkles } from 'lucide-react';
+
+import { FormError } from './FormError';
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, Skeleton } from './ui';
+
+import type { AssignmentSuggestions as Suggestions } from '../hooks/useFleetIntelligence';
+
+interface AssignmentSuggestionsProps {
+  suggestions: Suggestions;
+  isLoading: boolean;
+  error: Error | null;
+  onRetry: () => void;
+  assignedVehicleId?: string;
+  assignedDriverId?: string;
+  onAssign: (patch: { vehicleId?: string; driverId?: string }) => Promise<void>;
+  t: (key: string, fallback: string) => string;
+}
+
+interface RowProps {
+  id: string;
+  label: string;
+  reasons: string[];
+  isBest: boolean;
+  isAssigned: boolean;
+  isPending: boolean;
+  disabled: boolean;
+  onAssign: () => void;
+  t: (key: string, fallback: string) => string;
+}
+
+function SuggestionRow({
+  id,
+  label,
+  reasons,
+  isBest,
+  isAssigned,
+  isPending,
+  disabled,
+  onAssign,
+  t,
+}: RowProps) {
+  return (
+    <li className="flex items-start justify-between gap-3 py-3" data-suggestion-id={id}>
+      <div className="flex-1 min-w-0 space-y-1">
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+          <span className="text-sm font-medium break-words">{label}</span>
+          {isBest && (
+            <Badge variant="secondary">
+              {t('movethewheels.routes.suggest.best', 'Best match')}
+            </Badge>
+          )}
+        </div>
+        <ul className="space-y-0.5">
+          {reasons.map((reason) => (
+            <li key={reason} className="text-xs text-text-secondary">
+              {reason}
+            </li>
+          ))}
+        </ul>
+      </div>
+      <Button
+        size="sm"
+        className="shrink-0"
+        variant={isAssigned ? 'ghost' : 'outline'}
+        disabled={disabled || isAssigned}
+        onClick={onAssign}
+      >
+        {isAssigned
+          ? t('movethewheels.routes.suggest.assigned', 'Assigned')
+          : isPending
+            ? t('movethewheels.routes.suggest.assigning', 'Assigning…')
+            : t('movethewheels.routes.suggest.assign', 'Assign')}
+      </Button>
+    </li>
+  );
+}
+
+export function AssignmentSuggestions({
+  suggestions,
+  isLoading,
+  error,
+  onRetry,
+  assignedVehicleId,
+  assignedDriverId,
+  onAssign,
+  t,
+}: AssignmentSuggestionsProps) {
+  const [pendingId, setPendingId] = useState<string | null>(null);
+  const [assignError, setAssignError] = useState<string | null>(null);
+  const title = t('movethewheels.routes.suggest.title', 'Suggested assignment');
+
+  const assign = async (id: string, patch: { vehicleId?: string; driverId?: string }) => {
+    setPendingId(id);
+    setAssignError(null);
+    try {
+      await onAssign(patch);
+    } catch (e) {
+      setAssignError(e instanceof Error ? e.message : 'Could not assign.');
+    } finally {
+      setPendingId(null);
+    }
+  };
+
+  if (error && !isLoading) {
+    return (
+      <Card className="border-status-error-border">
+        <CardContent className="p-6 text-center space-y-3">
+          <p className="text-status-error-text font-medium">
+            {t('movethewheels.routes.suggest.error', "Couldn't load suggestions")}
+          </p>
+          <p className="text-sm text-text-secondary">{error.message}</p>
+          <Button variant="outline" onClick={onRetry}>
+            {t('movethewheels.fleet.error.retry', 'Retry')}
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>{title}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Skeleton className="h-14 w-full" />
+          <Skeleton className="h-14 w-full" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const { vehicles, drivers } = suggestions;
+  const nothing = vehicles.length === 0 && drivers.length === 0;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Sparkles size={18} aria-hidden="true" />
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <FormError message={assignError} />
+
+        {nothing ? (
+          <p className="text-sm text-text-secondary">
+            {t(
+              'movethewheels.routes.suggest.none',
+              'No vehicle or driver is free right now. Vehicles must be in service and drivers must hold a valid licence and not be on another live route.'
+            )}
+          </p>
+        ) : (
+          <>
+            <section aria-label={t('movethewheels.routes.suggest.vehicles', 'Vehicles')}>
+              <h4 className="text-xs font-semibold uppercase tracking-wide text-text-secondary">
+                {t('movethewheels.routes.suggest.vehicles', 'Vehicles')}
+              </h4>
+              {vehicles.length === 0 ? (
+                <p className="py-3 text-sm text-text-secondary">
+                  {t('movethewheels.routes.suggest.noVehicles', 'No vehicle is free right now.')}
+                </p>
+              ) : (
+                <ul className="divide-y">
+                  {vehicles.map((s, index) => (
+                    <SuggestionRow
+                      key={s.vehicle.id}
+                      id={s.vehicle.id}
+                      label={[
+                        s.vehicle.vehicleNumber,
+                        [s.vehicle.make, s.vehicle.model].filter(Boolean).join(' '),
+                      ]
+                        .filter(Boolean)
+                        .join(' — ')}
+                      reasons={s.reasons}
+                      isBest={index === 0}
+                      isAssigned={assignedVehicleId === s.vehicle.id}
+                      isPending={pendingId === s.vehicle.id}
+                      disabled={pendingId !== null}
+                      onAssign={() => assign(s.vehicle.id, { vehicleId: s.vehicle.id })}
+                      t={t}
+                    />
+                  ))}
+                </ul>
+              )}
+            </section>
+
+            <section aria-label={t('movethewheels.routes.suggest.drivers', 'Drivers')}>
+              <h4 className="text-xs font-semibold uppercase tracking-wide text-text-secondary">
+                {t('movethewheels.routes.suggest.drivers', 'Drivers')}
+              </h4>
+              {drivers.length === 0 ? (
+                <p className="py-3 text-sm text-text-secondary">
+                  {t('movethewheels.routes.suggest.noDrivers', 'No driver is free right now.')}
+                </p>
+              ) : (
+                <ul className="divide-y">
+                  {drivers.map((s, index) => (
+                    <SuggestionRow
+                      key={s.driver.id}
+                      id={s.driver.id}
+                      label={`${s.driver.firstName} ${s.driver.lastName}`.trim()}
+                      reasons={s.reasons}
+                      isBest={index === 0}
+                      isAssigned={assignedDriverId === s.driver.id}
+                      isPending={pendingId === s.driver.id}
+                      disabled={pendingId !== null}
+                      onAssign={() => assign(s.driver.id, { driverId: s.driver.id })}
+                      t={t}
+                    />
+                  ))}
+                </ul>
+              )}
+            </section>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/movethewheels/components/FleetAlertsPanel.tsx

@@ -0,0 +1,148 @@
+/**
+ * FleetAlertsPanel
+ *
+ * "Needs attention" list for the fleet: licences that have lapsed or are about
+ * to, and vehicles that are due or overdue for service. The rules are computed
+ * server-side (`fleetAlerts`); this is a read-side view that links each alert
+ * to the vehicle or driver that needs action.
+ */
+
+import { AlertTriangle, CheckCircle, ChevronRight } from 'lucide-react';
+
+import { StatusBadge } from './StatusBadge';
+import { Button, Card, CardContent, CardHeader, CardTitle, Skeleton } from './ui';
+
+import type { FleetAlert, FleetAlertSeverity } from '../hooks/useFleetIntelligence';
+
+interface FleetAlertsPanelProps {
+  alerts: FleetAlert[];
+  isLoading: boolean;
+  error: Error | null;
+  onRetry: () => void;
+  onOpen: (alert: FleetAlert) => void;
+  t: (key: string, fallback: string) => string;
+}
+
+const SEVERITY_COLORS: Record<FleetAlertSeverity, { bg: string; text: string }> = {
+  CRITICAL: { bg: 'bg-status-error-bg-subtle', text: 'text-status-error-text' },
+  WARNING: { bg: 'bg-status-warning-bg-subtle', text: 'text-status-warning-text' },
+};
+
+const plural = (count: number, unit: string): string => `${count} ${unit}${count === 1 ? '' : 's'}`;
+
+/** Human-readable "how close / how late" for an alert, from its structured due data. */
+export function describeDue(alert: Pick<FleetAlert, 'daysUntilDue' | 'kmUntilDue'>): string {
+  const parts: string[] = [];
+  const { daysUntilDue, kmUntilDue } = alert;
+  if (daysUntilDue !== null) {
+    if (daysUntilDue < 0) parts.push(`${plural(-daysUntilDue, 'day')} overdue`);
+    else if (daysUntilDue === 0) parts.push('due today');
+    else parts.push(`${plural(daysUntilDue, 'day')} left`);
+  }
+  if (kmUntilDue !== null) {
+    const km = Math.round(Math.abs(kmUntilDue));
+    parts.push(kmUntilDue < 0 ? `${km} km overdue` : `${km} km left`);
+  }
+  return parts.join(' · ');
+}
+
+export function FleetAlertsPanel({
+  alerts,
+  isLoading,
+  error,
+  onRetry,
+  onOpen,
+  t,
+}: FleetAlertsPanelProps) {
+  const title = t('movethewheels.fleet.alerts.title', 'Needs attention');
+
+  if (error && !isLoading) {
+    return (
+      <Card className="border-status-error-border">
+        <CardContent className="p-6 text-center space-y-3">
+          <p className="text-status-error-text font-medium">
+            {t('movethewheels.fleet.alerts.error', "Couldn't load fleet alerts")}
+          </p>
+          <p className="text-sm text-text-secondary">{error.message}</p>
+          <Button variant="outline" onClick={onRetry}>
+            {t('movethewheels.fleet.error.retry', 'Retry')}
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>{title}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Skeleton className="h-12 w-full" />
+          <Skeleton className="h-12 w-full" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (alerts.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <CheckCircle size={18} aria-hidden="true" className="text-status-success-text" />
+            {title}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-text-secondary">
+            {t(
+              'movethewheels.fleet.alerts.allClear',
+              'All clear — every licence is valid and no vehicle is due for service.'
+            )}
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <AlertTriangle size={18} aria-hidden="true" className="text-status-warning-text" />
+          {title} ({alerts.length})
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        <ul className="divide-y" aria-label={title}>
+          {alerts.map((alert) => {
+            const detail = describeDue(alert);
+            return (
+              <li key={alert.id}>
+                <button
+                  type="button"
+                  onClick={() => onOpen(alert)}
+                  className="flex w-full items-center gap-3 px-6 py-3 text-left hover:bg-bg-sunken/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg"
+                >
+                  <StatusBadge
+                    status={alert.severity === 'CRITICAL' ? 'Critical' : 'Warning'}
+                    customColors={SEVERITY_COLORS[alert.severity]}
+                    size="sm"
+                    showDot={false}
+                  />
+                  <span className="flex-1 min-w-0">
+                    <span className="block text-sm font-medium truncate">{alert.message}</span>
+                    {detail && <span className="block text-xs text-text-secondary">{detail}</span>}
+                  </span>
+                  <ChevronRight size={16} aria-hidden="true" className="shrink-0" />
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </CardContent>
+    </Card>
+  );
+}

package/src/movethewheels/components/VehicleServiceCard.tsx

@@ -0,0 +1,220 @@
+/**
+ * VehicleServiceCard
+ *
+ * Shows a vehicle's service schedule (last service, next due date/mileage) and
+ * lets an operator log a completed service. Logging a service advances the
+ * odometer, sets the next due markers from the intervals given, and returns a
+ * vehicle that was in the workshop to service — so the "due" alert clears
+ * instead of lingering.
+ */
+
+import { useState } from 'react';
+import { Wrench } from 'lucide-react';
+
+import { FormError } from './FormError';
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label } from './ui';
+
+import type { RecordVehicleServiceInput } from '../hooks/useFleetIntelligence';
+import type { Vehicle } from '../types';
+
+interface VehicleServiceCardProps {
+  vehicle: Vehicle;
+  onRecord: (input: RecordVehicleServiceInput) => Promise<void>;
+  t: (key: string, fallback: string) => string;
+}
+
+const DEFAULT_INTERVAL_DAYS = 90;
+const DEFAULT_INTERVAL_KM = 10000;
+
+const formatDay = (date: Date | undefined): string | null =>
+  date
+    ? date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+    : null;
+
+const toDateInput = (date: Date): string => date.toISOString().slice(0, 10);
+
+/** Empty string -> undefined; otherwise a finite non-negative number, or NaN when invalid. */
+const parseOptionalNumber = (value: string): number | undefined => {
+  if (value.trim() === '') return undefined;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) && parsed >= 0 ? parsed : Number.NaN;
+};
+
+export function VehicleServiceCard({ vehicle, onRecord, t }: VehicleServiceCardProps) {
+  const [open, setOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [form, setForm] = useState({
+    serviceDate: toDateInput(new Date()),
+    mileage: vehicle.mileage !== undefined ? String(vehicle.mileage) : '',
+    intervalDays: String(DEFAULT_INTERVAL_DAYS),
+    intervalKm: String(DEFAULT_INTERVAL_KM),
+  });
+
+  const lastService = formatDay(vehicle.lastMaintenance);
+  const nextDate = formatDay(vehicle.nextMaintenance);
+  const nextMileage = vehicle.nextMaintenanceMileage;
+  const hasSchedule = nextDate !== null || nextMileage !== undefined;
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    const mileage = parseOptionalNumber(form.mileage);
+    const intervalDays = parseOptionalNumber(form.intervalDays);
+    const intervalKm = parseOptionalNumber(form.intervalKm);
+    if ([mileage, intervalDays, intervalKm].some((n) => n !== undefined && Number.isNaN(n))) {
+      setError(t('movethewheels.vehicles.service.invalid', 'Enter valid, non-negative numbers.'));
+      return;
+    }
+    if (intervalKm !== undefined && mileage === undefined && vehicle.mileage === undefined) {
+      setError(
+        t(
+          'movethewheels.vehicles.service.needsMileage',
+          'Enter the odometer reading to set a service-by-distance interval.'
+        )
+      );
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+    try {
+      await onRecord({
+        // Noon UTC keeps the calendar day stable in any timezone.
+        serviceDate: `${form.serviceDate}T12:00:00.000Z`,
+        ...(mileage !== undefined ? { mileage } : {}),
+        ...(intervalDays !== undefined ? { intervalDays: Math.round(intervalDays) } : {}),
+        ...(intervalKm !== undefined ? { intervalKm } : {}),
+      });
+      setOpen(false);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Could not record the service.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Wrench size={18} aria-hidden="true" />
+          {t('movethewheels.vehicles.service.title', 'Service schedule')}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <dl className="grid grid-cols-2 gap-4 text-sm">
+          <div>
+            <dt className="text-text-secondary">
+              {t('movethewheels.vehicles.service.last', 'Last service')}
+            </dt>
+            <dd className="font-medium">
+              {lastService ?? t('movethewheels.vehicles.service.none', 'Not recorded')}
+            </dd>
+          </div>
+          <div>
+            <dt className="text-text-secondary">
+              {t('movethewheels.vehicles.service.next', 'Next service due')}
+            </dt>
+            <dd className="font-medium">
+              {hasSchedule
+                ? [
+                    nextDate,
+                    nextMileage !== undefined ? `${nextMileage.toLocaleString()} km` : null,
+                  ]
+                    .filter(Boolean)
+                    .join(' / ')
+                : t('movethewheels.vehicles.service.noSchedule', 'No schedule set')}
+            </dd>
+          </div>
+        </dl>
+
+        {!open ? (
+          <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
+            {t('movethewheels.vehicles.service.record', 'Record service')}
+          </Button>
+        ) : (
+          <form onSubmit={submit} className="space-y-3">
+            <FormError message={error} />
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label htmlFor="service-date">
+                  {t('movethewheels.vehicles.service.date', 'Service date')}
+                </Label>
+                <Input
+                  id="service-date"
+                  type="date"
+                  required
+                  value={form.serviceDate}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    setForm((f) => ({ ...f, serviceDate: e.target.value }))
+                  }
+                />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="service-mileage">
+                  {t('movethewheels.vehicles.service.mileage', 'Odometer (km)')}
+                </Label>
+                <Input
+                  id="service-mileage"
+                  type="number"
+                  min={0}
+                  value={form.mileage}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    setForm((f) => ({ ...f, mileage: e.target.value }))
+                  }
+                />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="service-interval-days">
+                  {t('movethewheels.vehicles.service.intervalDays', 'Next service in (days)')}
+                </Label>
+                <Input
+                  id="service-interval-days"
+                  type="number"
+                  min={0}
+                  value={form.intervalDays}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    setForm((f) => ({ ...f, intervalDays: e.target.value }))
+                  }
+                />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="service-interval-km">
+                  {t('movethewheels.vehicles.service.intervalKm', 'Next service in (km)')}
+                </Label>
+                <Input
+                  id="service-interval-km"
+                  type="number"
+                  min={0}
+                  value={form.intervalKm}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    setForm((f) => ({ ...f, intervalKm: e.target.value }))
+                  }
+                />
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <Button type="submit" size="sm" disabled={saving}>
+                {saving
+                  ? t('movethewheels.vehicles.service.saving', 'Saving…')
+                  : t('movethewheels.vehicles.service.save', 'Save service')}
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                disabled={saving}
+                onClick={() => {
+                  setOpen(false);
+                  setError(null);
+                }}
+              >
+                {t('movethewheels.vehicles.service.cancel', 'Cancel')}
+              </Button>
+            </div>
+          </form>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/movethewheels/hooks/useFleet.ts

@@ -53,6 +53,9 @@ interface ApiVehicle {
   currentLocation?: Record<string, unknown> | null;
   fuelLevel?: number | null;
   mileage?: number | null;
+  lastServiceDate?: string | null;
+  nextServiceDueDate?: string | null;
+  nextServiceDueMileage?: number | null;
   createdAt: string;
   updatedAt?: string;
 }
@@ -91,6 +94,9 @@ const LIST_VEHICLES_QUERY = `
       currentLocation
       fuelLevel
       mileage
+      lastServiceDate
+      nextServiceDueDate
+      nextServiceDueMileage
       createdAt
       updatedAt
     }
@@ -135,6 +141,9 @@ const GET_VEHICLE_QUERY = `
       currentLocation
       fuelLevel
       mileage
+      lastServiceDate
+      nextServiceDueDate
+      nextServiceDueMileage
       createdAt
       updatedAt
     }
@@ -424,8 +433,9 @@ function mapVehicle(vehicle: ApiVehicle): Vehicle {
           timestamp: new Date(),
         }
       : undefined,
-    lastMaintenance: undefined,
-    nextMaintenance: undefined,
+    lastMaintenance: vehicle.lastServiceDate ? new Date(vehicle.lastServiceDate) : undefined,
+    nextMaintenance: vehicle.nextServiceDueDate ? new Date(vehicle.nextServiceDueDate) : undefined,
+    nextMaintenanceMileage: vehicle.nextServiceDueMileage ?? undefined,
     fuelLevel: vehicle.fuelLevel ?? undefined,
     mileage: vehicle.mileage ?? undefined,
     documents: [],