@burdenoff/microfe-movethewheels 2026.830.5 → 2026.920.1

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -41,6 +41,9 @@ import { RouteMap, type RouteStop as MapRouteStop } from '../components/maps';
 import { firstRealLatLng } from '../utils/mapMarkers';
 import { useRoute, useRoutes } from '../hooks/useRoutes';
 import { useFleet } from '../hooks/useFleet';
+import { useAssignmentSuggestions } from '../hooks/useFleetIntelligence';
+import { AssignmentSuggestions } from '../components/AssignmentSuggestions';
+import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate, formatAddress, formatCurrency } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -374,7 +377,13 @@ export default function RouteDetailsPage() {
   const isEditRoute = useLocation().pathname.endsWith('/edit');
   const { basePath, navigate } = useMoveTheWheels();
   const { route, isLoading, error, refetch } = useRoute(routeId);
-  const { optimizeRoute } = useRoutes();
+  const { optimizeRoute, updateRoute } = useRoutes();
+  const suggestions = useAssignmentSuggestions(routeId);
+  const { t: translate } = useI18n();
+  const t = (key: string, fallback: string): string => {
+    const value = translate(key);
+    return value === key ? fallback : value;
+  };
   const { message: notice, notify } = useNotice();
   const [optimizeError, setOptimizeError] = useState<string | null>(null);
   const [optimizing, setOptimizing] = useState(false);
@@ -397,6 +406,16 @@ export default function RouteDetailsPage() {
     }
   };
 
+  // A rejected assignment (vehicle in maintenance, licence expired, already on a
+  // live route) throws with the server's message, which the suggestions card shows.
+  const handleAssign = async (patch: { vehicleId?: string; driverId?: string }) => {
+    if (!routeId) return;
+    await updateRoute(routeId, patch);
+    notify(t('movethewheels.routes.suggest.done', 'Assignment saved.'));
+    refetch();
+    suggestions.refetch();
+  };
+
   // Handle new route form
   if (!routeId) {
     return <NewRouteForm />;
@@ -594,6 +613,19 @@ export default function RouteDetailsPage() {
         </div>
 
         <div className="space-y-6">
+          {(route.status === 'planned' || route.status === 'in_progress') && (
+            <AssignmentSuggestions
+              suggestions={suggestions.data}
+              isLoading={suggestions.isLoading}
+              error={suggestions.error}
+              onRetry={suggestions.refetch}
+              assignedVehicleId={route.vehicleId || undefined}
+              assignedDriverId={route.driverId || undefined}
+              onAssign={handleAssign}
+              t={t}
+            />
+          )}
+
           {/* Route Info — the page's single emphasis zone */}
           <EmphasisPanel className="space-y-4">
             <h2 className="text-base font-semibold text-text-primary">Route Info</h2>

package/src/movethewheels/pages/ShippingRatesPage.tsx

@@ -0,0 +1,216 @@
+/**
+ * Shipping Rates Page
+ *
+ * Compare live courier rates between two pincodes across the platform's
+ * carriers (Shiprocket first). Nothing to set up: the carrier accounts belong
+ * to the platform. Read-only — comparing never books a shipment or spends
+ * carrier credit.
+ */
+
+import { useState, type FormEvent } from 'react';
+import { Scale } from 'lucide-react';
+
+import { FormError } from '../components/FormError';
+import { PageLayout } from '../components/PageLayout';
+import { ShippingQuoteResults } from '../components/ShippingQuoteResults';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Switch,
+} from '../components/ui';
+import { useTr } from '../hooks';
+import {
+  useShippingQuotes,
+  type ShippingQuoteInput,
+  type ShippingQuoteResult,
+} from '../hooks/useShippingCarriers';
+
+const POSTCODE = /^[1-9]\d{5}$/;
+
+const optionalNumber = (value: string): number | undefined => {
+  const parsed = Number(value);
+  return value.trim() !== '' && Number.isFinite(parsed) ? parsed : undefined;
+};
+
+export default function ShippingRatesPage() {
+  const tr = useTr();
+  const fetchQuotes = useShippingQuotes();
+
+  const [pickup, setPickup] = useState('');
+  const [delivery, setDelivery] = useState('');
+  const [weight, setWeight] = useState('');
+  const [length, setLength] = useState('');
+  const [width, setWidth] = useState('');
+  const [height, setHeight] = useState('');
+  const [cod, setCod] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<ShippingQuoteResult | null>(null);
+
+  const handleCompare = async (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+
+    const weightKg = optionalNumber(weight);
+    if (!POSTCODE.test(pickup) || !POSTCODE.test(delivery)) {
+      setError(
+        tr(
+          'movethewheels.shipping.form.postcodeError',
+          'Enter valid 6-digit pickup and delivery postcodes'
+        )
+      );
+      return;
+    }
+    if (weightKg === undefined || weightKg <= 0) {
+      setError(tr('movethewheels.shipping.form.weightError', 'Enter the package weight in kg'));
+      return;
+    }
+    const dims = [optionalNumber(length), optionalNumber(width), optionalNumber(height)];
+    const given = dims.filter((d) => d !== undefined).length;
+    if (given !== 0 && given !== 3) {
+      setError(
+        tr(
+          'movethewheels.shipping.form.dimensionsError',
+          'Enter length, width and height together, or leave all three empty'
+        )
+      );
+      return;
+    }
+
+    const input: ShippingQuoteInput = {
+      pickupPostcode: pickup,
+      deliveryPostcode: delivery,
+      weightKg,
+      cod,
+      ...(given === 3 ? { lengthCm: dims[0], widthCm: dims[1], heightCm: dims[2] } : {}),
+    };
+
+    setIsLoading(true);
+    try {
+      setResult(await fetchQuotes(input));
+    } catch (e: unknown) {
+      setResult(null);
+      setError(
+        e instanceof Error
+          ? e.message
+          : tr('movethewheels.shipping.form.failed', 'Could not fetch rates')
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <PageLayout
+      title={tr('movethewheels.shipping.title', 'Compare Rates')}
+      subtitle={tr(
+        'movethewheels.shipping.subtitle',
+        'Enter a pickup and a delivery pincode to see every courier available for that route, with price and delivery time.'
+      )}
+      icon={<Scale size={24} />}
+    >
+      <div className="space-y-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>{tr('movethewheels.shipping.form.title', 'Shipment details')}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={(event) => void handleCompare(event)} className="space-y-4">
+              <div className="grid gap-3 sm:grid-cols-3">
+                <div className="space-y-1">
+                  <Label htmlFor="rate-pickup">
+                    {tr('movethewheels.shipping.form.pickup', 'Pickup postcode')}
+                  </Label>
+                  <Input
+                    id="rate-pickup"
+                    inputMode="numeric"
+                    maxLength={6}
+                    value={pickup}
+                    onChange={(e) => setPickup(e.target.value.trim())}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="rate-delivery">
+                    {tr('movethewheels.shipping.form.delivery', 'Delivery postcode')}
+                  </Label>
+                  <Input
+                    id="rate-delivery"
+                    inputMode="numeric"
+                    maxLength={6}
+                    value={delivery}
+                    onChange={(e) => setDelivery(e.target.value.trim())}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="rate-weight">
+                    {tr('movethewheels.shipping.form.weight', 'Weight (kg)')}
+                  </Label>
+                  <Input
+                    id="rate-weight"
+                    inputMode="decimal"
+                    value={weight}
+                    onChange={(e) => setWeight(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="grid gap-3 sm:grid-cols-3">
+                <div className="space-y-1">
+                  <Label htmlFor="rate-length">
+                    {tr('movethewheels.shipping.form.length', 'Length (cm, optional)')}
+                  </Label>
+                  <Input
+                    id="rate-length"
+                    inputMode="decimal"
+                    value={length}
+                    onChange={(e) => setLength(e.target.value)}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="rate-width">
+                    {tr('movethewheels.shipping.form.width', 'Width (cm, optional)')}
+                  </Label>
+                  <Input
+                    id="rate-width"
+                    inputMode="decimal"
+                    value={width}
+                    onChange={(e) => setWidth(e.target.value)}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="rate-height">
+                    {tr('movethewheels.shipping.form.height', 'Height (cm, optional)')}
+                  </Label>
+                  <Input
+                    id="rate-height"
+                    inputMode="decimal"
+                    value={height}
+                    onChange={(e) => setHeight(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <Switch id="rate-cod" checked={cod} onCheckedChange={setCod} />
+                <Label htmlFor="rate-cod">
+                  {tr('movethewheels.shipping.form.cod', 'Cash on delivery')}
+                </Label>
+              </div>
+              <FormError message={error} />
+              <Button type="submit" disabled={isLoading}>
+                {isLoading
+                  ? tr('movethewheels.shipping.form.comparing', 'Comparing…')
+                  : tr('movethewheels.shipping.form.compare', 'Compare rates')}
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+
+        {result && <ShippingQuoteResults result={result} t={tr} />}
+      </div>
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -26,10 +26,14 @@ import {
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useVehicle, useVehicleDrivers, useFleet } from '../hooks/useFleet';
+import { useRecordVehicleService } from '../hooks/useFleetIntelligence';
+import { VehicleServiceCard } from '../components/VehicleServiceCard';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate, getInitials } from '../utils/formatters';
+import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
 import { joinPath } from '../utils/navigation';
 import { FormError } from '../components/FormError';
+import { Notice, useNotice } from '../components/Notice';
 import { DocumentsCard } from '../components/DocumentsCard';
 
 const VEHICLE_TYPE_OPTIONS = [
@@ -214,6 +218,13 @@ export default function VehicleDetailsPage() {
   const { vehicleId } = useParams<{ vehicleId: string }>();
   const { basePath, navigate } = useMoveTheWheels();
   const { vehicle, isLoading, error, refetch } = useVehicle(vehicleId);
+  const recordService = useRecordVehicleService();
+  const { message: notice, notify } = useNotice();
+  const { t: translate } = useI18n();
+  const t = (key: string, fallback: string): string => {
+    const value = translate(key);
+    return value === key ? fallback : value;
+  };
   const isEditRoute = useLocation().pathname.endsWith('/edit');
   // Who is behind the wheel — resolved through DriverFilterInput.vehicleId, the
   // same link `assignDriverVehicle` writes.
@@ -285,6 +296,12 @@ export default function VehicleDetailsPage() {
         ]}
       />
 
+      {notice && (
+        <div className="mb-2">
+          <Notice message={notice} />
+        </div>
+      )}
+
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-2 space-y-6">
           {/* Vehicle Information — the page's single emphasis zone */}
@@ -440,6 +457,16 @@ export default function VehicleDetailsPage() {
             </CardContent>
           </Card>
 
+          <VehicleServiceCard
+            vehicle={vehicle}
+            t={t}
+            onRecord={async (input) => {
+              await recordService(vehicle.id, input);
+              notify(t('movethewheels.vehicles.service.saved', 'Service recorded.'));
+              refetch();
+            }}
+          />
+
           {vehicle.currentLocation && (
             <Card>
               <CardHeader>

package/src/movethewheels/types/index.ts

@@ -341,6 +341,8 @@ export interface Vehicle {
   currentLocation?: Location;
   lastMaintenance?: Date;
   nextMaintenance?: Date;
+  /** Odometer reading (km) at which the next service is due. */
+  nextMaintenanceMileage?: number;
   fuelLevel?: number;
   mileage?: number;
   documents: VehicleDocument[];

package/src/movethewheels/utils/graphqlClient.ts

@@ -132,6 +132,19 @@ export async function executeGraphQL<TData>(
   }
 }
 
+/** Best-effort: the joined `errors[].message` of a non-2xx GraphQL response, or null. */
+async function readGraphqlErrorMessage(response: Response): Promise<string | null> {
+  try {
+    const payload = (await response.json()) as { errors?: Array<{ message?: string }> };
+    const messages = (payload.errors ?? [])
+      .map((item) => item.message)
+      .filter((message): message is string => typeof message === 'string' && message.length > 0);
+    return messages.length > 0 ? messages.join('; ') : null;
+  } catch {
+    return null;
+  }
+}
+
 async function runWithRetries<TData>(
   url: string,
   headers: Record<string, string>,
@@ -156,7 +169,13 @@ async function runWithRetries<TData>(
       });
 
       if (!response.ok) {
-        lastError = new Error(`GraphQL request failed with status ${response.status}`);
+        // Transient statuses are retried on the status alone. For anything else the
+        // service often answers 4xx with a well-formed GraphQL error (e.g. a business
+        // rule rejection) — show that message rather than a bare status code.
+        const detail = isTransientStatus(response.status)
+          ? null
+          : await readGraphqlErrorMessage(response);
+        lastError = new Error(detail ?? `GraphQL request failed with status ${response.status}`);
         if (canRetry && isTransientStatus(response.status)) continue;
         throw lastError;
       }