@burdenoff/microfe-movethewheels 2026.830.5 → 2026.920.1

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: [],

package/src/movethewheels/hooks/useFleetIntelligence.ts

@@ -0,0 +1,226 @@
+/**
+ * Fleet intelligence hooks — compliance/maintenance alerts, dispatch
+ * suggestions for a route, and logging a completed vehicle service.
+ *
+ * All three sit on top of wspace-movethewheels-svc's fleet module; the ranking
+ * and alert rules live server-side so every surface (web, CLI, MCP) agrees.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { executeGraphQL } from '../utils/graphqlClient';
+
+export type FleetAlertType =
+  | 'LICENSE_EXPIRED'
+  | 'LICENSE_EXPIRING'
+  | 'MAINTENANCE_OVERDUE'
+  | 'MAINTENANCE_DUE_SOON';
+export type FleetAlertSeverity = 'CRITICAL' | 'WARNING';
+export type FleetAlertSubjectType = 'VEHICLE' | 'DRIVER';
+
+export interface FleetAlert {
+  id: string;
+  type: FleetAlertType;
+  severity: FleetAlertSeverity;
+  subjectType: FleetAlertSubjectType;
+  subjectId: string;
+  subjectName: string;
+  message: string;
+  dueDate: string | null;
+  daysUntilDue: number | null;
+  kmUntilDue: number | null;
+}
+
+export interface VehicleSuggestion {
+  score: number;
+  reasons: string[];
+  vehicle: { id: string; vehicleNumber: string; make: string | null; model: string | null };
+}
+
+export interface DriverSuggestion {
+  score: number;
+  reasons: string[];
+  driver: { id: string; firstName: string; lastName: string; rating: number | null };
+}
+
+export interface AssignmentSuggestions {
+  routeId: string;
+  vehicles: VehicleSuggestion[];
+  drivers: DriverSuggestion[];
+}
+
+export interface RecordVehicleServiceInput {
+  /** ISO date-time. Defaults to now on the server. */
+  serviceDate?: string;
+  mileage?: number;
+  intervalDays?: number;
+  intervalKm?: number;
+}
+
+const FLEET_ALERTS_QUERY = `
+  query FleetAlerts {
+    fleetAlerts {
+      id
+      type
+      severity
+      subjectType
+      subjectId
+      subjectName
+      message
+      dueDate
+      daysUntilDue
+      kmUntilDue
+    }
+  }
+`;
+
+const ASSIGNMENT_SUGGESTIONS_QUERY = `
+  query AssignmentSuggestions($routeId: ID!, $limit: Int) {
+    assignmentSuggestions(routeId: $routeId, limit: $limit) {
+      routeId
+      vehicles {
+        score
+        reasons
+        vehicle {
+          id
+          vehicleNumber
+          make
+          model
+        }
+      }
+      drivers {
+        score
+        reasons
+        driver {
+          id
+          firstName
+          lastName
+          rating
+        }
+      }
+    }
+  }
+`;
+
+const RECORD_VEHICLE_SERVICE_MUTATION = `
+  mutation RecordVehicleService($id: ID!, $input: RecordVehicleServiceInput!) {
+    recordVehicleService(id: $id, input: $input) {
+      id
+      status
+      mileage
+      lastServiceDate
+      nextServiceDueDate
+      nextServiceDueMileage
+    }
+  }
+`;
+
+function useGraphqlOptions() {
+  const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
+    useMoveTheWheels();
+  return useMemo(
+    () => ({
+      apiGatewayUrl,
+      authToken,
+      workspaceToken,
+      workspaceId,
+      tenantId,
+      actorId: currentUser?.id,
+    }),
+    [apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser?.id]
+  );
+}
+
+interface AsyncResource<T> {
+  data: T;
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => void;
+}
+
+export function useFleetAlerts(): AsyncResource<FleetAlert[]> {
+  const graphQLOptions = useGraphqlOptions();
+  const [data, setData] = useState<FleetAlert[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [nonce, setNonce] = useState(0);
+
+  useEffect(() => {
+    let active = true;
+    setIsLoading(true);
+    setError(null);
+    executeGraphQL<{ fleetAlerts: FleetAlert[] }>(graphQLOptions, FLEET_ALERTS_QUERY)
+      .then((result) => {
+        if (active) setData(result.fleetAlerts);
+      })
+      .catch((e: unknown) => {
+        if (active) setError(e instanceof Error ? e : new Error('Failed to load fleet alerts'));
+      })
+      .finally(() => {
+        if (active) setIsLoading(false);
+      });
+    return () => {
+      active = false;
+    };
+  }, [graphQLOptions, nonce]);
+
+  const refetch = useCallback(() => setNonce((n) => n + 1), []);
+  return { data, isLoading, error, refetch };
+}
+
+const EMPTY_SUGGESTIONS: AssignmentSuggestions = { routeId: '', vehicles: [], drivers: [] };
+
+export function useAssignmentSuggestions(
+  routeId: string | undefined,
+  limit = 3
+): AsyncResource<AssignmentSuggestions> {
+  const graphQLOptions = useGraphqlOptions();
+  const [data, setData] = useState<AssignmentSuggestions>(EMPTY_SUGGESTIONS);
+  const [isLoading, setIsLoading] = useState(Boolean(routeId));
+  const [error, setError] = useState<Error | null>(null);
+  const [nonce, setNonce] = useState(0);
+
+  useEffect(() => {
+    if (!routeId) {
+      setData(EMPTY_SUGGESTIONS);
+      setIsLoading(false);
+      return undefined;
+    }
+    let active = true;
+    setIsLoading(true);
+    setError(null);
+    executeGraphQL<{ assignmentSuggestions: AssignmentSuggestions }>(
+      graphQLOptions,
+      ASSIGNMENT_SUGGESTIONS_QUERY,
+      { routeId, limit }
+    )
+      .then((result) => {
+        if (active) setData(result.assignmentSuggestions);
+      })
+      .catch((e: unknown) => {
+        if (active) setError(e instanceof Error ? e : new Error('Failed to load suggestions'));
+      })
+      .finally(() => {
+        if (active) setIsLoading(false);
+      });
+    return () => {
+      active = false;
+    };
+  }, [graphQLOptions, routeId, limit, nonce]);
+
+  const refetch = useCallback(() => setNonce((n) => n + 1), []);
+  return { data, isLoading, error, refetch };
+}
+
+export function useRecordVehicleService() {
+  const graphQLOptions = useGraphqlOptions();
+  return useCallback(
+    async (vehicleId: string, input: RecordVehicleServiceInput): Promise<void> => {
+      await executeGraphQL(graphQLOptions, RECORD_VEHICLE_SERVICE_MUTATION, {
+        id: vehicleId,
+        input,
+      });
+    },
+    [graphQLOptions]
+  );
+}

package/src/movethewheels/hooks/useShippingCarriers.ts

@@ -0,0 +1,110 @@
+/**
+ * Shipping rate comparison — every carrier's price for one pincode pair, on top
+ * of wspace-movethewheels-svc's carrier module. The carrier accounts belong to
+ * the platform, so there is nothing for a workspace to configure.
+ */
+
+import { useCallback, useMemo } from 'react';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { executeGraphQL } from '../utils/graphqlClient';
+
+export type CarrierProvider = 'SHIPROCKET';
+export type CarrierServiceMode = 'SURFACE' | 'AIR';
+
+export interface ShippingQuoteInput {
+  pickupPostcode: string;
+  deliveryPostcode: string;
+  weightKg: number;
+  lengthCm?: number;
+  widthCm?: number;
+  heightCm?: number;
+  cod?: boolean;
+}
+
+export interface ShippingQuote {
+  provider: CarrierProvider;
+  courierId: string;
+  courierName: string;
+  price: number;
+  currency: string;
+  estimatedDeliveryDays: number | null;
+  estimatedDeliveryDate: string | null;
+  rating: number | null;
+  mode: CarrierServiceMode | null;
+  isRecommended: boolean;
+  isCheapest: boolean;
+  isFastest: boolean;
+}
+
+export interface CarrierOutcome {
+  provider: CarrierProvider;
+  ok: boolean;
+  quoteCount: number;
+  errorMessage: string | null;
+}
+
+export interface ShippingQuoteResult {
+  chargeableWeightKg: number;
+  quotes: ShippingQuote[];
+  providers: CarrierOutcome[];
+}
+
+const SHIPPING_QUOTES_QUERY = `
+  query ShippingQuotes($input: ShippingQuoteInput!) {
+    shippingQuotes(input: $input) {
+      chargeableWeightKg
+      quotes {
+        provider
+        courierId
+        courierName
+        price
+        currency
+        estimatedDeliveryDays
+        estimatedDeliveryDate
+        rating
+        mode
+        isRecommended
+        isCheapest
+        isFastest
+      }
+      providers {
+        provider
+        ok
+        quoteCount
+        errorMessage
+      }
+    }
+  }
+`;
+
+function useGraphqlOptions() {
+  const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
+    useMoveTheWheels();
+  return useMemo(
+    () => ({
+      apiGatewayUrl,
+      authToken,
+      workspaceToken,
+      workspaceId,
+      tenantId,
+      actorId: currentUser?.id,
+    }),
+    [apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser?.id]
+  );
+}
+
+/** Imperative: a comparison is something the operator asks for, not page-load data. */
+export function useShippingQuotes() {
+  const graphQLOptions = useGraphqlOptions();
+  return useCallback(
+    async (input: ShippingQuoteInput): Promise<ShippingQuoteResult> => {
+      const result = await executeGraphQL<{ shippingQuotes: ShippingQuoteResult }>(
+        graphQLOptions,
+        SHIPPING_QUOTES_QUERY,
+        { input }
+      );
+      return result.shippingQuotes;
+    },
+    [graphQLOptions]
+  );
+}

package/src/movethewheels/pages/FleetPage.tsx

@@ -20,6 +20,8 @@ import {
 } from '../components/ui';
 import { CTAOverflowMenu, EmphasisPanel, PagePurpose, NextSteps } from '@burdenoff/fe-libs/ui';
 import { useFleetStats, useVehicles, useDrivers } from '../hooks/useFleet';
+import { useFleetAlerts, type FleetAlert } from '../hooks/useFleetIntelligence';
+import { FleetAlertsPanel } from '../components/FleetAlertsPanel';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
 import { joinPath } from '../utils/navigation';
@@ -50,6 +52,13 @@ export default function FleetPage() {
     refetch: refetchDrivers,
   } = useDrivers();
 
+  const {
+    data: alerts,
+    isLoading: alertsLoading,
+    error: alertsError,
+    refetch: refetchAlerts,
+  } = useFleetAlerts();
+
   const isLoading = statsLoading || vehiclesLoading || driversLoading;
   const error = statsError ?? vehiclesError ?? driversError;
   const refetchAll = () => {
@@ -64,6 +73,9 @@ export default function FleetPage() {
     }
   };
 
+  const openAlert = (alert: FleetAlert) =>
+    goTo(`fleet/${alert.subjectType === 'VEHICLE' ? 'vehicles' : 'drivers'}/${alert.subjectId}`);
+
   const onRowKeyDown = (e: React.KeyboardEvent, action: () => void) => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
@@ -136,6 +148,15 @@ export default function FleetPage() {
         ]}
       />
 
+      <FleetAlertsPanel
+        alerts={alerts}
+        isLoading={alertsLoading}
+        error={alertsError}
+        onRetry={refetchAlerts}
+        onOpen={openAlert}
+        t={t}
+      />
+
       {/* Key Metrics */}
       {error && !isLoading ? (
         <Card className="border-status-error-border">