@burdenoff/microfe-movethewheels 2026.830.5 → 2026.920.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/ShippingQuoteResults.tsx

@@ -0,0 +1,199 @@
+/**
+ * ShippingQuoteResults
+ *
+ * Every courier option from every carrier for one pincode pair, cheapest first,
+ * with the cheapest and fastest called out. A carrier that failed is listed
+ * with its reason instead of silently missing from the comparison.
+ *
+ * Wide screens get a table. On a phone a table pushes the price — the one
+ * number people compare on — off-screen, so each courier is a card instead.
+ */
+
+import { AlertTriangle } from 'lucide-react';
+
+import { StatusBadge } from './StatusBadge';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './ui';
+
+import type { ShippingQuote, ShippingQuoteResult } from '../hooks/useShippingCarriers';
+import { formatCurrency } from '../utils/formatters';
+
+interface ShippingQuoteResultsProps {
+  result: ShippingQuoteResult;
+  t: (key: string, fallback: string) => string;
+}
+
+const HIGHLIGHT = { bg: 'bg-status-success-bg-subtle', text: 'text-status-success-text' };
+const INFO = { bg: 'bg-status-info-bg-subtle', text: 'text-status-info-text' };
+
+function transit(quote: ShippingQuote, t: ShippingQuoteResultsProps['t']): string {
+  if (quote.estimatedDeliveryDays === null) return quote.estimatedDeliveryDate ?? '—';
+  const unit =
+    quote.estimatedDeliveryDays === 1
+      ? t('movethewheels.shipping.results.day', 'day')
+      : t('movethewheels.shipping.results.days', 'days');
+  const days = `${quote.estimatedDeliveryDays} ${unit}`;
+  return quote.estimatedDeliveryDate ? `${days} · ${quote.estimatedDeliveryDate}` : days;
+}
+
+function modeLabel(quote: ShippingQuote, t: ShippingQuoteResultsProps['t']): string {
+  if (quote.mode === 'AIR') return t('movethewheels.shipping.results.air', 'Air');
+  if (quote.mode === 'SURFACE') return t('movethewheels.shipping.results.surface', 'Surface');
+  return '—';
+}
+
+function QuoteBadges({ quote, t }: { quote: ShippingQuote; t: ShippingQuoteResultsProps['t'] }) {
+  return (
+    <>
+      {quote.isCheapest && (
+        <StatusBadge
+          status={t('movethewheels.shipping.results.cheapest', 'Cheapest')}
+          customColors={HIGHLIGHT}
+          size="sm"
+          showDot={false}
+        />
+      )}
+      {quote.isFastest && (
+        <StatusBadge
+          status={t('movethewheels.shipping.results.fastest', 'Fastest')}
+          customColors={INFO}
+          size="sm"
+          showDot={false}
+        />
+      )}
+      {quote.isRecommended && (
+        <StatusBadge
+          status={t('movethewheels.shipping.results.recommended', 'Recommended')}
+          customColors={INFO}
+          size="sm"
+          showDot={false}
+        />
+      )}
+    </>
+  );
+}
+
+export function ShippingQuoteResults({ result, t }: ShippingQuoteResultsProps) {
+  const failed = result.providers.filter((provider) => !provider.ok);
+
+  return (
+    <div className="space-y-4">
+      {failed.map((provider) => (
+        <div
+          key={provider.provider}
+          role="alert"
+          className="flex items-start gap-2 rounded-lg border border-status-warning-border bg-status-warning-bg-subtle px-4 py-3 text-sm text-status-warning-text"
+        >
+          <AlertTriangle size={18} className="mt-0.5 shrink-0" aria-hidden="true" />
+          <span>{provider.errorMessage}</span>
+        </div>
+      ))}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            {t('movethewheels.shipping.results.title', 'Courier options')} ({result.quotes.length})
+          </CardTitle>
+          <p className="text-sm text-text-secondary">
+            {t('movethewheels.shipping.results.chargeableWeight', 'Charged on')}{' '}
+            {result.chargeableWeightKg} kg
+          </p>
+        </CardHeader>
+        <CardContent className="p-0">
+          {result.quotes.length === 0 ? (
+            <p className="px-6 pb-6 text-sm text-text-secondary">
+              {failed.length > 0
+                ? t(
+                    'movethewheels.shipping.results.allFailed',
+                    'No rates could be fetched — see the message above.'
+                  )
+                : t(
+                    'movethewheels.shipping.results.noServiceable',
+                    'No courier serves this pincode pair.'
+                  )}
+            </p>
+          ) : (
+            <>
+              <ul
+                className="divide-y md:hidden"
+                aria-label={t('movethewheels.shipping.results.title', 'Courier options')}
+              >
+                {result.quotes.map((quote) => (
+                  <li key={`${quote.provider}:${quote.courierId}`} className="space-y-2 px-4 py-4">
+                    <div className="flex items-start justify-between gap-3">
+                      <span className="min-w-0 font-medium">{quote.courierName}</span>
+                      <span className="shrink-0 text-lg font-semibold">
+                        {formatCurrency(quote.price, quote.currency)}
+                      </span>
+                    </div>
+                    <div className="flex flex-wrap items-center gap-2">
+                      <QuoteBadges quote={quote} t={t} />
+                    </div>
+                    <p className="text-sm text-text-secondary">
+                      {[
+                        modeLabel(quote, t),
+                        transit(quote, t),
+                        quote.rating === null ? null : `${quote.rating.toFixed(1)} ★`,
+                      ]
+                        .filter((part) => part !== '—' && part !== null)
+                        .join(' · ')}
+                    </p>
+                  </li>
+                ))}
+              </ul>
+              <div className="hidden md:block">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>
+                        {t('movethewheels.shipping.results.courier', 'Courier')}
+                      </TableHead>
+                      <TableHead>{t('movethewheels.shipping.results.mode', 'Mode')}</TableHead>
+                      <TableHead>
+                        {t('movethewheels.shipping.results.transit', 'Estimated delivery')}
+                      </TableHead>
+                      <TableHead>{t('movethewheels.shipping.results.rating', 'Rating')}</TableHead>
+                      <TableHead className="text-right">
+                        {t('movethewheels.shipping.results.price', 'Price')}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {result.quotes.map((quote) => (
+                      <TableRow key={`${quote.provider}:${quote.courierId}`}>
+                        <TableCell>
+                          <div className="flex flex-wrap items-center gap-2">
+                            <span className="font-medium">{quote.courierName}</span>
+                            <QuoteBadges quote={quote} t={t} />
+                          </div>
+                        </TableCell>
+                        <TableCell>{modeLabel(quote, t)}</TableCell>
+                        <TableCell>{transit(quote, t)}</TableCell>
+                        <TableCell>
+                          {quote.rating === null ? '—' : quote.rating.toFixed(1)}
+                        </TableCell>
+                        <TableCell className="text-right font-medium">
+                          {formatCurrency(quote.price, quote.currency)}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}