@burdenoff/microfe-movethewheels 2026.703.4 → 2026.703.5

package/src/movethewheels/pages/TrackingPage.tsx

@@ -4,13 +4,15 @@
  * Track orders by tracking number or order ID.
  */
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { MapPin, Search, Package, Truck, Clock, CheckCircle, AlertCircle } from 'lucide-react';
 import { PageLayout, EmptyState } from '../components/PageLayout';
 import { StatusBadge } from '../components/StatusBadge';
 import { Card, CardContent, CardHeader, CardTitle, Button, Input } from '../components/ui';
 import { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { TrackingMap, type TrackEndpoint, type TrackPoint } from '../components/maps';
+import { firstRealLatLng } from '../utils/mapMarkers';
 import { useOrderTracking } from '../hooks/useTracking';
 import { formatDate, formatAddress } from '../utils/formatters';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
@@ -42,6 +44,42 @@ export default function TrackingPage() {
     }
   };
 
+  // Real geographic view of the shipment: pickup → delivery endpoints, a
+  // breadcrumb trail from timeline events that carry coordinates, and the live
+  // current position. Everything is coordinate-filtered so a shipment with no
+  // GPS data honestly shows the map's empty state instead of a fake route.
+  const mapModel = useMemo(() => {
+    if (!order) return null;
+    const originCoord = firstRealLatLng(order.pickupAddress);
+    const destCoord = firstRealLatLng(order.deliveryAddress);
+    const origin: TrackEndpoint | null = originCoord
+      ? { ...originCoord, label: `Pickup · ${order.pickupAddress.city || 'Origin'}` }
+      : null;
+    const destination: TrackEndpoint | null = destCoord
+      ? { ...destCoord, label: `Delivery · ${order.deliveryAddress.city || 'Destination'}` }
+      : null;
+
+    const trail: TrackPoint[] = order.timeline
+      .map((event): TrackPoint | null => {
+        const coord = event.location ? firstRealLatLng(event.location) : null;
+        return coord
+          ? { lat: coord.lat, lng: coord.lng, timestamp: new Date(event.timestamp).toISOString() }
+          : null;
+      })
+      .filter((point): point is TrackPoint => point !== null);
+
+    const currentCoord = tracking ? firstRealLatLng(tracking.currentLocation) : null;
+    const current: TrackEndpoint | null = currentCoord
+      ? {
+          ...currentCoord,
+          label: tracking?.currentLocation.address || 'Current position',
+        }
+      : null;
+
+    const hasAny = Boolean(origin || destination || current || trail.length > 0);
+    return { origin, destination, trail, current, hasAny };
+  }, [order, tracking]);
+
   return (
     <PageLayout
       title={t('movethewheels.tracking.title', 'Track Shipment')}
@@ -173,6 +211,30 @@ export default function TrackingPage() {
               </div>
             </EmphasisPanel>
 
+            {/* Route Map — real origin/destination + tracking trail + live position */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <MapPin size={18} />
+                  {t('movethewheels.tracking.routeMap.title', 'Route map')}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <TrackingMap
+                  className="overflow-hidden rounded-lg border border-border-seam"
+                  height={320}
+                  origin={mapModel?.origin ?? null}
+                  destination={mapModel?.destination ?? null}
+                  trail={mapModel?.trail ?? []}
+                  current={mapModel?.current ?? null}
+                  emptyMessage={t(
+                    'movethewheels.tracking.routeMap.empty',
+                    'No location coordinates recorded for this shipment yet'
+                  )}
+                />
+              </CardContent>
+            </Card>
+
             {/* Progress Timeline */}
             <Card>
               <CardHeader>
@@ -351,14 +413,22 @@ export default function TrackingPage() {
                 </CardTitle>
               </CardHeader>
               <CardContent>
-                <div className="aspect-video bg-bg-sunken rounded-lg flex items-center justify-center mb-4">
-                  <div className="text-center text-text-secondary">
-                    <MapPin size={32} className="mx-auto mb-2" />
+                {mapModel?.current ? (
+                  <TrackingMap
+                    className="mb-4 overflow-hidden rounded-lg border border-border-seam"
+                    height={180}
+                    current={mapModel.current}
+                    destination={mapModel.destination ?? null}
+                    trail={mapModel.trail}
+                  />
+                ) : (
+                  <div className="mb-4 rounded-lg bg-bg-sunken p-4 text-center text-text-secondary">
+                    <MapPin size={28} className="mx-auto mb-2 opacity-60" />
                     <p className="text-sm">
-                      {t('movethewheels.tracking.location.mapView', 'Map View')}
+                      {t('movethewheels.tracking.location.noFix', 'No live position fix yet')}
                     </p>
                   </div>
-                </div>
+                )}
                 <p className="text-sm">
                   {tracking.currentLocation.address ||
                     t('movethewheels.tracking.location.updating', 'Location updating...')}

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -266,7 +266,7 @@ export default function VehicleDetailsPage() {
               <CardTitle>Capacity</CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="grid grid-cols-3 gap-6">
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
                 <div>
                   <p className="text-sm text-text-secondary">Weight</p>
                   <p className="text-2xl font-bold">

package/src/movethewheels/pages/VehiclesPage.tsx

@@ -3,12 +3,13 @@
  */
 
 import { useState } from 'react';
-import { Truck, Plus, RefreshCw, Download } from 'lucide-react';
+import { Truck, Plus, RefreshCw, Download, CircleCheck, Route as RouteIcon, Wrench } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge, VehicleTypeBadge } from '../components/StatusBadge';
 import { Progress } from '../components/ui';
-import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useVehicles, useFleetStats } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { joinPath } from '../utils/navigation';
@@ -126,28 +127,37 @@ export default function VehiclesPage() {
         an order.
       </PagePurpose>
 
-      {/* Fleet at a glance — the page's single emphasis zone */}
-      <EmphasisPanel>
-        <p className="text-sm font-medium text-text-secondary">Fleet at a glance</p>
-        <div className="mt-3 grid grid-cols-3 gap-4">
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">{totalVehicles}</p>
-            <p className="text-xs text-text-secondary">Total vehicles</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {stats.vehiclesByStatus.available}
-            </p>
-            <p className="text-xs text-text-secondary">Available now</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {stats.vehiclesByStatus.maintenance}
-            </p>
-            <p className="text-xs text-text-secondary">In maintenance</p>
-          </div>
-        </div>
-      </EmphasisPanel>
+      {/* Fleet at a glance — premium stat cards */}
+      <div>
+        <p className="mb-3 text-sm font-medium text-text-secondary">Fleet at a glance</p>
+        <MetricGrid columns={4}>
+          <MetricCard
+            label="Total vehicles"
+            value={totalVehicles}
+            icon={<Truck size={20} />}
+            accent="brand"
+          />
+          <MetricCard
+            label="Available now"
+            value={stats.vehiclesByStatus.available}
+            icon={<CircleCheck size={20} />}
+            accent="success"
+            subtitle="Ready to dispatch"
+          />
+          <MetricCard
+            label="On assignment"
+            value={stats.vehiclesByStatus.assigned}
+            icon={<RouteIcon size={20} />}
+            accent="blue"
+          />
+          <MetricCard
+            label="In maintenance"
+            value={stats.vehiclesByStatus.maintenance}
+            icon={<Wrench size={20} />}
+            accent="warning"
+          />
+        </MetricGrid>
+      </div>
 
       <DataTable
         columns={columns}

package/src/movethewheels/pages/WarehouseDetailsPage.tsx

@@ -326,7 +326,7 @@ export default function WarehouseDetailsPage() {
                   {warehouse.capacity.totalSpace.toLocaleString()} sq ft
                 </p>
               </div>
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div>
                   <p className="text-sm text-text-secondary">Pallets Used</p>
                   <p className="text-2xl font-bold">

package/src/movethewheels/pages/WarehousesPage.tsx

@@ -3,11 +3,12 @@
  */
 
 import { useState } from 'react';
-import { Warehouse, Plus, RefreshCw } from 'lucide-react';
+import { Warehouse, Plus, RefreshCw, CircleCheck, Gauge } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
 import { Badge, Progress } from '../components/ui';
-import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useWarehouses, useWarehouseStats } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { joinPath } from '../utils/navigation';
@@ -121,26 +122,31 @@ export default function WarehousesPage() {
         to balance stock, spot capacity crunches, and decide where to fulfil an order from.
       </PagePurpose>
 
-      {/* Network at a glance — the page's single emphasis zone */}
-      <EmphasisPanel>
-        <p className="text-sm font-medium text-text-secondary">Network at a glance</p>
-        <div className="mt-3 grid grid-cols-3 gap-4">
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">{stats.total}</p>
-            <p className="text-xs text-text-secondary">Total sites</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">{stats.active}</p>
-            <p className="text-xs text-text-secondary">Active</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {stats.total > 0 ? `${Math.round(stats.avgUtilization * 100)}%` : '—'}
-            </p>
-            <p className="text-xs text-text-secondary">Avg utilization</p>
-          </div>
-        </div>
-      </EmphasisPanel>
+      {/* Network at a glance — premium stat cards */}
+      <div>
+        <p className="mb-3 text-sm font-medium text-text-secondary">Network at a glance</p>
+        <MetricGrid columns={3}>
+          <MetricCard
+            label="Total sites"
+            value={stats.total}
+            icon={<Warehouse size={20} />}
+            accent="brand"
+          />
+          <MetricCard
+            label="Active"
+            value={stats.active}
+            icon={<CircleCheck size={20} />}
+            accent="success"
+            subtitle="Fulfilling orders"
+          />
+          <MetricCard
+            label="Avg utilization"
+            value={stats.total > 0 ? `${Math.round(stats.avgUtilization * 100)}%` : '—'}
+            icon={<Gauge size={20} />}
+            accent="blue"
+          />
+        </MetricGrid>
+      </div>
 
       <DataTable
         columns={columns}

package/src/movethewheels/types/index.ts

@@ -691,7 +691,7 @@ export interface Analytics {
     customerSatisfaction: number;
   };
   trends: {
-    dailyOrders: Array<{ date: string; orders: number }>;
+    dailyOrders: Array<{ date: string; orders: number; deliveries: number }>;
     revenue: Array<{ month: string; revenue: number }>;
   };
   fleet: {

package/src/movethewheels/utils/mapMarkers.ts

@@ -0,0 +1,58 @@
+/**
+ * Shared helpers for turning domain records into map markers. Pure functions —
+ * no Leaflet import, so they can be reused by any page without pulling map CSS.
+ */
+import type { MapMarkerStatus } from '../components/maps';
+import type { Address, Location } from '../types';
+
+/**
+ * Map an order/shipment status onto the marker's visual status (drives pin color
+ * and glyph). Anything unrecognised falls back to a neutral pin.
+ */
+export function deliveryMarkerStatus(status: string | undefined): MapMarkerStatus {
+  switch ((status ?? '').toLowerCase()) {
+    case 'in_transit':
+      return 'in_transit';
+    case 'out_for_delivery':
+      return 'active';
+    case 'delivered':
+      return 'delivered';
+    case 'failed':
+    case 'delayed':
+    case 'cancelled':
+      return 'delayed';
+    case 'assigned':
+    case 'picked_up':
+    case 'confirmed':
+      return 'active';
+    default:
+      return 'default';
+  }
+}
+
+/**
+ * First location among the candidates that carries a real (non-null-island)
+ * coordinate, returned as a plain `{ lat, lng }`. Returns null when none do.
+ * Kept coordinate-shape-agnostic so callers pass whichever object they have.
+ */
+export function firstRealLatLng(
+  ...candidates: Array<Location | Address | null | undefined>
+): { lat: number; lng: number } | null {
+  for (const candidate of candidates) {
+    if (!candidate) continue;
+    const lat = candidate.latitude;
+    const lng = candidate.longitude;
+    if (
+      typeof lat === 'number' &&
+      typeof lng === 'number' &&
+      Number.isFinite(lat) &&
+      Number.isFinite(lng) &&
+      !(lat === 0 && lng === 0) &&
+      Math.abs(lat) <= 90 &&
+      Math.abs(lng) <= 180
+    ) {
+      return { lat, lng };
+    }
+  }
+  return null;
+}

package/dist/AnalyticsPage-CMpI1070.js

@@ -1,215 +0,0 @@
-import { M as e, d as t, f as n, g as r, h as i, i as a, u as o } from "./PageLayout-D4LDHJJq.js";
-import { t as s } from "./chart-column-ouzgxIv_.js";
-import { t as c } from "./dollar-sign-CAVU95SO.js";
-import { t as l } from "./package-CcRttV2N.js";
-import { t as u } from "./trending-up-Dz6PqPRj.js";
-import { t as d } from "./truck-D-y2IDzv.js";
-import { t as f } from "./users-CCrq-w0C.js";
-import { a as p, i as m, t as h } from "./useAnalytics-D7HW2XRb.js";
-import { n as g, r as _, t as v } from "./MetricCard-CVBVpu7o.js";
-import { n as y } from "./formatters-BQr-aR5W.js";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
-import { EmphasisPanel as S, PagePurpose as C } from "@burdenoff/fe-libs/ui";
-//#region src/movethewheels/pages/AnalyticsPage.tsx
-function w() {
-	let { analytics: w, isLoading: T, error: E, refetch: D } = h(), { orderData: O } = p(), { fleetData: k } = m();
-	return /* @__PURE__ */ x(a, {
-		title: "Analytics",
-		subtitle: "Business performance and insights",
-		icon: /* @__PURE__ */ b(s, { size: 24 }),
-		children: [
-			/* @__PURE__ */ b(C, {
-				icon: /* @__PURE__ */ b(s, { size: 18 }),
-				children: "See how the operation is really performing. Track order volume, revenue, on-time rate and customer satisfaction over time so you can spot trends, find bottlenecks, and decide where to invest — whether that's more vehicles, better routes, or new customers."
-			}),
-			E && !T ? /* @__PURE__ */ b(t, {
-				className: "border-status-error-border",
-				children: /* @__PURE__ */ x(n, {
-					className: "p-6 text-center space-y-3",
-					children: [
-						/* @__PURE__ */ b("p", {
-							className: "text-status-error-text font-medium",
-							children: "Couldn't load analytics"
-						}),
-						/* @__PURE__ */ b("p", {
-							className: "text-sm text-text-secondary",
-							children: E.message
-						}),
-						/* @__PURE__ */ b(o, {
-							variant: "outline",
-							onClick: D,
-							children: "Retry"
-						})
-					]
-				})
-			}) : T ? /* @__PURE__ */ b(_, {
-				columns: 5,
-				children: Array.from({ length: 5 }).map((e, t) => /* @__PURE__ */ b(g, {}, t))
-			}) : /* @__PURE__ */ x(_, {
-				columns: 5,
-				children: [
-					/* @__PURE__ */ b(v, {
-						label: "Total Orders",
-						value: w.overview.totalOrders.toLocaleString(),
-						icon: /* @__PURE__ */ b(l, { size: 20 })
-					}),
-					/* @__PURE__ */ b(v, {
-						treatment: "glass",
-						glow: !0,
-						label: "Revenue",
-						value: y(w.overview.totalRevenue),
-						icon: /* @__PURE__ */ b(c, { size: 20 })
-					}),
-					/* @__PURE__ */ b(v, {
-						label: "Active Vehicles",
-						value: w.overview.activeVehicles,
-						icon: /* @__PURE__ */ b(d, { size: 20 })
-					}),
-					/* @__PURE__ */ b(v, {
-						label: "On-Time Rate",
-						value: `${w.overview.onTimeDeliveryRate.toFixed(1)}%`,
-						icon: /* @__PURE__ */ b(u, { size: 20 }),
-						changeType: w.overview.onTimeDeliveryRate >= 90 ? "positive" : "neutral"
-					}),
-					/* @__PURE__ */ b(v, {
-						label: "Satisfaction",
-						value: w.overview.customerSatisfaction.toFixed(1),
-						icon: /* @__PURE__ */ b(f, { size: 20 }),
-						subtitle: "out of 5"
-					})
-				]
-			}),
-			/* @__PURE__ */ x("div", {
-				className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
-				children: [/* @__PURE__ */ x(t, { children: [/* @__PURE__ */ b(i, { children: /* @__PURE__ */ b(r, { children: "Order Trends" }) }), /* @__PURE__ */ x(n, { children: [/* @__PURE__ */ b("div", {
-					className: "h-64 flex items-center justify-center bg-bg-sunken/50 rounded-lg",
-					children: /* @__PURE__ */ x("div", {
-						className: "text-center text-text-secondary",
-						children: [
-							/* @__PURE__ */ b(s, {
-								size: 48,
-								className: "mx-auto mb-2 opacity-50"
-							}),
-							/* @__PURE__ */ b("p", { children: "Order trend chart" }),
-							/* @__PURE__ */ b("p", {
-								className: "text-xs",
-								children: "(Chart library integration needed)"
-							})
-						]
-					})
-				}), /* @__PURE__ */ b("div", {
-					className: "mt-4 grid grid-cols-2 sm:grid-cols-4 gap-2",
-					children: O.trends.slice(-4).map((e) => /* @__PURE__ */ x("div", {
-						className: "text-center p-2 bg-bg-sunken/50 rounded",
-						children: [/* @__PURE__ */ b("p", {
-							className: "text-xs text-text-secondary",
-							children: e.date.split("-").slice(1).join("/")
-						}), /* @__PURE__ */ b("p", {
-							className: "font-medium",
-							children: e.orders
-						})]
-					}, e.date))
-				})] })] }), /* @__PURE__ */ x(t, { children: [/* @__PURE__ */ b(i, { children: /* @__PURE__ */ b(r, { children: "Revenue Trends" }) }), /* @__PURE__ */ x(n, { children: [/* @__PURE__ */ b("div", {
-					className: "h-64 flex items-center justify-center bg-bg-sunken/50 rounded-lg",
-					children: /* @__PURE__ */ x("div", {
-						className: "text-center text-text-secondary",
-						children: [/* @__PURE__ */ b(u, {
-							size: 48,
-							className: "mx-auto mb-2 opacity-50"
-						}), /* @__PURE__ */ b("p", { children: "Revenue trend chart" })]
-					})
-				}), /* @__PURE__ */ b("div", {
-					className: "mt-4 grid grid-cols-2 sm:grid-cols-5 gap-2",
-					children: w.trends.revenue.map((e) => /* @__PURE__ */ x("div", {
-						className: "text-center p-2 bg-bg-sunken/50 rounded",
-						children: [/* @__PURE__ */ b("p", {
-							className: "text-xs text-text-secondary",
-							children: e.month
-						}), /* @__PURE__ */ x("p", {
-							className: "font-medium text-sm",
-							children: [y(e.revenue / 1e3), "k"]
-						})]
-					}, e.month))
-				})] })] })]
-			}),
-			/* @__PURE__ */ x("div", {
-				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [
-					/* @__PURE__ */ x(t, { children: [/* @__PURE__ */ b(i, { children: /* @__PURE__ */ b(r, { children: "Orders by Status" }) }), /* @__PURE__ */ b(n, {
-						className: "space-y-3",
-						children: O.byStatus.filter((e) => e.count > 0).map(({ status: t, count: n }) => /* @__PURE__ */ x("div", {
-							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ b("span", {
-								className: "text-sm capitalize",
-								children: t.replace("_", " ")
-							}), /* @__PURE__ */ x("div", {
-								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ b(e, {
-									value: n / w.overview.totalOrders * 100,
-									className: "w-20 h-2"
-								}), /* @__PURE__ */ b("span", {
-									className: "font-medium w-8 text-right",
-									children: n
-								})]
-							})]
-						}, t))
-					})] }),
-					/* @__PURE__ */ x(t, { children: [/* @__PURE__ */ b(i, { children: /* @__PURE__ */ b(r, { children: "Fleet Performance" }) }), /* @__PURE__ */ x(n, {
-						className: "space-y-4",
-						children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ x("div", {
-							className: "flex justify-between text-sm mb-1",
-							children: [/* @__PURE__ */ b("span", { children: "Vehicle Utilization" }), /* @__PURE__ */ x("span", { children: [k.vehicleUtilization.toFixed(0), "%"] })]
-						}), /* @__PURE__ */ b(e, { value: k.vehicleUtilization })] }), k.vehiclesByType.length > 0 && /* @__PURE__ */ x("div", {
-							className: "pt-2",
-							children: [/* @__PURE__ */ b("p", {
-								className: "text-sm text-text-secondary mb-2",
-								children: "Vehicles by Type"
-							}), k.vehiclesByType.map(({ type: e, count: t }) => /* @__PURE__ */ x("div", {
-								className: "flex justify-between text-sm py-1",
-								children: [/* @__PURE__ */ b("span", {
-									className: "capitalize",
-									children: e
-								}), /* @__PURE__ */ b("span", {
-									className: "font-medium",
-									children: t
-								})]
-							}, e))]
-						})]
-					})] }),
-					/* @__PURE__ */ x(S, {
-						className: "space-y-4",
-						children: [
-							/* @__PURE__ */ b("h2", {
-								className: "text-base font-semibold text-text-primary",
-								children: "Performance Metrics"
-							}),
-							/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-								className: "text-sm text-text-secondary",
-								children: "On-Time Delivery"
-							}), /* @__PURE__ */ x("p", {
-								className: "text-2xl font-bold",
-								children: [w.performance.onTimeDelivery.toFixed(1), "%"]
-							})] }),
-							/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-								className: "text-sm text-text-secondary",
-								children: "Customer Satisfaction"
-							}), /* @__PURE__ */ x("p", {
-								className: "text-2xl font-bold",
-								children: [w.overview.customerSatisfaction.toFixed(1), "/5"]
-							})] }),
-							/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-								className: "text-sm text-text-secondary",
-								children: "Driver Ratings"
-							}), /* @__PURE__ */ x("p", {
-								className: "text-2xl font-bold",
-								children: [w.performance.driverRatings.toFixed(1), "/5"]
-							})] })
-						]
-					})
-				]
-			})
-		]
-	});
-}
-//#endregion
-export { w as default };