From eaa006a932f9f773cf7117fc4cfca93cbb959be3 Mon Sep 17 00:00:00 2001
From: marshalyordanos <marshalyordanosseifu@gmail.com>
Date: Thu, 3 Sep 2026 23:25:19 +0300
Subject: [PATCH] feat: add wagon performance report and export functionality

- Implemented  for Excel download of wagon performance report sections, including column width adjustment and timestamped filenames.
- Created  to compute derived wagon performance figures based on movements and status logs, ensuring consistency with API data.
- Enhanced  with new fields for tracking last movement and statistics window days for improved reporting capabilities.
---
 .../wagons/dto/list-wagons-query.dto.ts       |   14 +
 .../src/modules/wagons/wagons.service.ts      |   77 +-
 apps/edr-freight-web/backoffice/src/App.tsx   |   20 +
 .../components/layout/sidebar-sections.tsx    |    6 +
 .../pages/ruleEngine/RateApprovalsSection.tsx |   49 +-
 .../ruleEngine/RuleEngineResourcePage.tsx     |    4 -
 .../wagon-performance/SectionExportButton.tsx |   50 +
 .../WagonPerformanceDetailPage.tsx            | 1004 +++++++++++
 .../WagonPerformancePage.tsx                  | 1533 +++++++++++++++++
 .../pages/wagon-performance/exportSection.ts  |   80 +
 .../wagon-performance/wagonPerformance.ts     |  237 +++
 .../backoffice/src/services/wagon.service.ts  |   12 +
 12 files changed, 3038 insertions(+), 48 deletions(-)
 create mode 100644 apps/edr-freight-web/backoffice/src/pages/wagon-performance/SectionExportButton.tsx
 create mode 100644 apps/edr-freight-web/backoffice/src/pages/wagon-performance/WagonPerformanceDetailPage.tsx
 create mode 100644 apps/edr-freight-web/backoffice/src/pages/wagon-performance/WagonPerformancePage.tsx
 create mode 100644 apps/edr-freight-web/backoffice/src/pages/wagon-performance/exportSection.ts
 create mode 100644 apps/edr-freight-web/backoffice/src/pages/wagon-performance/wagonPerformance.ts

diff --git a/apps/edr-freight-api/src/modules/wagons/dto/list-wagons-query.dto.ts b/apps/edr-freight-api/src/modules/wagons/dto/list-wagons-query.dto.ts
index 1e2db1631..4631430e0 100644
--- a/apps/edr-freight-api/src/modules/wagons/dto/list-wagons-query.dto.ts
+++ b/apps/edr-freight-api/src/modules/wagons/dto/list-wagons-query.dto.ts
@@ -105,4 +105,18 @@ export class ListWagonsQueryDto {
   @IsOptional()
   @IsDateString()
   maintenanceTo?: string;
+
+  @ApiPropertyOptional({
+    description:
+      'Window (days) the per-row load/move counts are counted over. Does not filter rows.',
+    default: 90,
+    minimum: 1,
+    maximum: 3650,
+  })
+  @IsOptional()
+  @Type(() => Number)
+  @IsInt()
+  @Min(1)
+  @Max(3650)
+  statsWindowDays?: number;
 }
diff --git a/apps/edr-freight-api/src/modules/wagons/wagons.service.ts b/apps/edr-freight-api/src/modules/wagons/wagons.service.ts
index f15722b67..1a0de17d7 100644
--- a/apps/edr-freight-api/src/modules/wagons/wagons.service.ts
+++ b/apps/edr-freight-api/src/modules/wagons/wagons.service.ts
@@ -177,6 +177,7 @@ export class WagonsService {
   async findAll(query: ListWagonsQueryDto = {}): Promise<PaginatedResponse<Wagon>> {
     const page = await paginateQuery(this.buildListQuery(query), query, { defaultPageSize: 10 });
     await this.attachStatusDates(page.items);
+    await this.attachMovementStats(page.items, query.statsWindowDays ?? 90);
     return page;
   }
 
@@ -216,6 +217,56 @@ export class WagonsService {
     }
   }
 
+  /**
+   * Per-wagon movement rollups for the wagon performance report: when the
+   * wagon last arrived anywhere (the idle clock), and how many loaded / total
+   * moves it made inside `windowDays`. One grouped query per page, in the same
+   * shape as `attachStatusDates` above — never one request per row.
+   */
+  private async attachMovementStats(wagons: Wagon[], windowDays: number): Promise<void> {
+    if (!wagons.length) return;
+    const since = new Date(Date.now() - windowDays * 24 * 60 * 60 * 1000);
+    const rows: Array<{
+      wagonId: string;
+      lastMovedAt: Date | null;
+      loadsInWindow: string;
+      movesInWindow: string;
+      emptyMovesInWindow: string;
+    }> = await this.dataSource
+      .getRepository(WagonMovement)
+      .createQueryBuilder('m')
+      .select('m.wagon_id', 'wagonId')
+      .addSelect('MAX(m.occurred_at)', 'lastMovedAt')
+      .addSelect(
+        'COUNT(*) FILTER (WHERE m.occurred_at >= :since AND m.kind = :loaded)',
+        'loadsInWindow',
+      )
+      .addSelect(
+        'COUNT(*) FILTER (WHERE m.occurred_at >= :since AND m.kind = :empty)',
+        'emptyMovesInWindow',
+      )
+      .addSelect('COUNT(*) FILTER (WHERE m.occurred_at >= :since)', 'movesInWindow')
+      .where('m.wagon_id IN (:...ids)', { ids: wagons.map((w) => w.id) })
+      .setParameters({
+        since,
+        loaded: WagonMovementKind.Loaded,
+        empty: WagonMovementKind.EmptyReposition,
+      })
+      .groupBy('m.wagon_id')
+      .getRawMany();
+
+    const byId = new Map(rows.map((r) => [r.wagonId, r]));
+    for (const w of wagons) {
+      const r = byId.get(w.id);
+      Object.assign(w, {
+        lastMovedAt: r?.lastMovedAt ?? null,
+        loadsInWindow: Number(r?.loadsInWindow ?? 0),
+        movesInWindow: Number(r?.movesInWindow ?? 0),
+        emptyMovesInWindow: Number(r?.emptyMovesInWindow ?? 0),
+      });
+    }
+  }
+
   async findById(id: string): Promise<Wagon> {
     const wagon = await this.wagonRepo.findOne({
       where: { id },
@@ -328,11 +379,35 @@ export class WagonsService {
   /** Movement ledger for one wagon, newest first (loaded legs, repositions, manual moves). */
   async listMovements(wagonId: string): Promise<WagonMovement[]> {
     await this.findById(wagonId); // 404 on unknown wagon
-    return this.dataSource.getRepository(WagonMovement).find({
+    const movements = await this.dataSource.getRepository(WagonMovement).find({
       where: { wagonId },
       relations: { fromYard: true, toYard: true },
       order: { occurredAt: 'DESC', createdAt: 'DESC' },
     });
+    await this.attachBookingReferences(movements);
+    return movements;
+  }
+
+  /**
+   * Resolve each loaded move's booking to its human reference, so the UI can
+   * show (and link to) "BKG-11284" rather than a raw uuid. One query for the
+   * whole ledger; `wagon_movements` deliberately has no FK to bookings, so
+   * this is a read-time join on primary keys, exactly like the labels in
+   * `wagon-history.service`.
+   */
+  private async attachBookingReferences(movements: WagonMovement[]): Promise<void> {
+    const ids = [...new Set(movements.map((m) => m.bookingId).filter((v): v is string => !!v))];
+    if (!ids.length) return;
+    const rows: Array<{ id: string; reference: string }> = await this.dataSource.query(
+      `SELECT id, reference FROM freight.bookings WHERE id = ANY($1::uuid[])`,
+      [ids],
+    );
+    const byId = new Map(rows.map((r) => [r.id, r.reference]));
+    for (const m of movements) {
+      Object.assign(m, {
+        bookingReference: m.bookingId ? (byId.get(m.bookingId) ?? null) : null,
+      });
+    }
   }
 
   async remove(id: string, userId?: string | null): Promise<void> {
diff --git a/apps/edr-freight-web/backoffice/src/App.tsx b/apps/edr-freight-web/backoffice/src/App.tsx
index f95fe7cca..652a331c7 100644
--- a/apps/edr-freight-web/backoffice/src/App.tsx
+++ b/apps/edr-freight-web/backoffice/src/App.tsx
@@ -62,6 +62,8 @@ import ContractTemplatesPage from "./pages/contract_templates/ContractTemplatesP
 import PortalContentPage from "./pages/portal_content/PortalContentPage";
 import ContractTemplateEditorPage from "./pages/contract_templates/ContractTemplateEditorPage";
 import FleetResourcePage from "./pages/fleet/FleetResourcePage";
+import WagonPerformancePage from "./pages/wagon-performance/WagonPerformancePage";
+import WagonPerformanceDetailPage from "./pages/wagon-performance/WagonPerformanceDetailPage";
 import WagonTransfersPage from "./pages/wagons/WagonTransfersPage";
 import VehicleDetailPage from "./pages/fleet/VehicleDetailPage";
 import DriverDetailPage from "./pages/fleet/DriverDetailPage";
@@ -232,6 +234,24 @@ const App = () => {
             </RequirePermission>
           }
         />
+        {/* Wagon performance — a read-only executive report beside Overview.
+            Separate from the Fleet Management wagons desk, which owns CRUD. */}
+        <Route
+          path="wagon-performance"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.wagons.view}>
+              <WagonPerformancePage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="wagon-performance/:id"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.wagons.view}>
+              <WagonPerformanceDetailPage />
+            </RequirePermission>
+          }
+        />
         {/* One drill-down route per overview domain — the old per-tab charts,
             now each on its own page. Single source of truth for the
             permission gate is OVERVIEW_DOMAINS, shared with the summary
diff --git a/apps/edr-freight-web/backoffice/src/components/layout/sidebar-sections.tsx b/apps/edr-freight-web/backoffice/src/components/layout/sidebar-sections.tsx
index 1180518fc..861b73014 100644
--- a/apps/edr-freight-web/backoffice/src/components/layout/sidebar-sections.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/layout/sidebar-sections.tsx
@@ -69,6 +69,12 @@ export const buildSidebarSections = (
           icon: <LayoutDashboard />,
           permission: FREIGHT_PERMS.overview.view,
         },
+        {
+          label: "Wagon Performance",
+          href: "/dashboard/wagon-performance",
+          icon: <TrainFront />,
+          permission: FREIGHT_PERMS.wagons.view,
+        },
         {
           label: "Customers",
           href: "/dashboard/customers",
diff --git a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/RateApprovalsSection.tsx b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/RateApprovalsSection.tsx
index ce77041eb..45fe2f071 100644
--- a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/RateApprovalsSection.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/RateApprovalsSection.tsx
@@ -1,13 +1,10 @@
-import { useState } from "react";
 import {
   Badge,
   Button,
   Card,
-  Collapse,
   Group,
   Stack,
   Text,
-  Textarea,
   Tooltip,
 } from "@mantine/core";
 import type { UseMutationResult } from "@tanstack/react-query";
@@ -143,9 +140,6 @@ const RateApprovalsSection = ({
   reject,
   refLabels,
 }: RateApprovalsSectionProps) => {
-  const [openId, setOpenId] = useState<string | null>(null);
-  const [notes, setNotes] = useState<Record<string, string>>({});
-
   if (requests.length === 0) return null;
 
   const decidingId = approve.variables?.id ?? reject.variables?.id ?? null;
@@ -165,7 +159,6 @@ const RateApprovalsSection = ({
 
       <Stack gap={8}>
         {requests.map((r) => {
-          const isOpen = openId === r.id;
           const fields = Object.keys(r.payload);
           const rows = summaryRows(r, refLabels);
           // Only the row being decided shows a spinner — the mutation's
@@ -201,21 +194,10 @@ const RateApprovalsSection = ({
                     </Group>
                   ))}
 
-                  <Group gap={6}>
-                    <Text size="xs" c="dimmed">
-                      Submitted {fmtDateTime(r.createdAt)} · {fields.length}{" "}
-                      {fields.length === 1 ? "field" : "fields"} changed
-                    </Text>
-                    {canDecide ? (
-                      <Button
-                        size="compact-xs"
-                        variant="subtle"
-                        onClick={() => setOpenId(isOpen ? null : r.id)}
-                      >
-                        {isOpen ? "Hide note" : "Add a note"}
-                      </Button>
-                    ) : null}
-                  </Group>
+                  <Text size="xs" c="dimmed">
+                    Submitted {fmtDateTime(r.createdAt)} · {fields.length}{" "}
+                    {fields.length === 1 ? "field" : "fields"} changed
+                  </Text>
                 </Stack>
 
                 {canDecide ? (
@@ -228,7 +210,7 @@ const RateApprovalsSection = ({
                       loading={busy && reject.isPending}
                       disabled={busy && approve.isPending}
                       onClick={() =>
-                        reject.mutate({ id: r.id, decisionNote: notes[r.id] || undefined })
+                        reject.mutate({ id: r.id })
                       }
                     >
                       Reject
@@ -240,7 +222,7 @@ const RateApprovalsSection = ({
                       loading={busy && approve.isPending}
                       disabled={busy && reject.isPending}
                       onClick={() =>
-                        approve.mutate({ id: r.id, decisionNote: notes[r.id] || undefined })
+                        approve.mutate({ id: r.id })
                       }
                     >
                       Approve &amp; apply
@@ -255,25 +237,6 @@ const RateApprovalsSection = ({
                 )}
               </Group>
 
-              <Collapse in={isOpen}>
-                {canDecide ? (
-                  <Stack gap={6} mt="sm" pt="sm" style={{ borderTop: "1px solid var(--mantine-color-default-border)" }}>
-                    {/* The change itself is always visible above, so this panel
-                        carries only what the approver adds. */}
-                    <Textarea
-                      size="xs"
-                      autosize
-                      minRows={2}
-                      label="Decision note (optional)"
-                      placeholder="Shown to the requester with your decision"
-                      value={notes[r.id] ?? ""}
-                      onChange={(e) =>
-                        setNotes((prev) => ({ ...prev, [r.id]: e.currentTarget.value }))
-                      }
-                    />
-                  </Stack>
-                ) : null}
-              </Collapse>
             </Card>
           );
         })}
diff --git a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/RuleEngineResourcePage.tsx b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/RuleEngineResourcePage.tsx
index 598ff7324..30906eb1a 100644
--- a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/RuleEngineResourcePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/RuleEngineResourcePage.tsx
@@ -322,10 +322,6 @@ const RuleEngineResourcePage = () => {
   );
   const { data: yardOptions, isLoading: yardOptionsLoading } =
     useYardOptions(usesYardField);
-  const yardLabelById = useMemo(
-    () => Object.fromEntries((yardOptions ?? []).map((y) => [y.value, y.label])),
-    [yardOptions],
-  );
   /**
    * Every id a rate diff can name, in one map. A pending change that swaps the
    * cargo type or the container size stores raw uuids, so without this the
diff --git a/apps/edr-freight-web/backoffice/src/pages/wagon-performance/SectionExportButton.tsx b/apps/edr-freight-web/backoffice/src/pages/wagon-performance/SectionExportButton.tsx
new file mode 100644
index 000000000..a26d15e7c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/wagon-performance/SectionExportButton.tsx
@@ -0,0 +1,50 @@
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { Download } from "lucide-react";
+
+import { useToast } from "@/hooks/use-toast";
+
+export interface SectionExportButtonProps {
+  /** What this button downloads, e.g. "wagon list" — used in the tooltip and toast. */
+  label: string;
+  /** Runs the download; false means there was nothing to write. */
+  onExport: () => boolean;
+  disabled?: boolean;
+}
+
+/**
+ * Excel download for one section of the wagon performance report. Sits in the
+ * section's own header, so what it exports is unambiguous — the block it is
+ * attached to, exactly as filtered on screen.
+ */
+export function SectionExportButton({
+  label,
+  onExport,
+  disabled,
+}: SectionExportButtonProps) {
+  const { toast } = useToast();
+
+  return (
+    <Tooltip label={`Download ${label} as Excel`}>
+      <ActionIcon
+        variant="subtle"
+        color="gray"
+        size="md"
+        aria-label={`Download ${label} as Excel`}
+        disabled={disabled}
+        onClick={(e) => {
+          // The row underneath may navigate; a download must not trigger it.
+          e.stopPropagation();
+          const wrote = onExport();
+          if (!wrote) {
+            toast({
+              title: "Nothing to export",
+              description: `There are no ${label} rows to download yet.`,
+            });
+          }
+        }}
+      >
+        <Download size={16} />
+      </ActionIcon>
+    </Tooltip>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/pages/wagon-performance/WagonPerformanceDetailPage.tsx b/apps/edr-freight-web/backoffice/src/pages/wagon-performance/WagonPerformanceDetailPage.tsx
new file mode 100644
index 000000000..9eb8d0bbc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/wagon-performance/WagonPerformanceDetailPage.tsx
@@ -0,0 +1,1004 @@
+import { useMemo, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import {
+  ActionIcon,
+  Anchor,
+  Badge,
+  Box,
+  Button,
+  Card,
+  Center,
+  Container,
+  Group,
+  Loader,
+  Progress,
+  SegmentedControl,
+  SimpleGrid,
+  Stack,
+  Table,
+  Tabs,
+  Text,
+  Timeline,
+  Title,
+  Tooltip,
+} from "@mantine/core";
+import { Freight } from "@edr/types";
+import {
+  Activity,
+  ArrowLeft,
+  ArrowRight,
+  Boxes,
+  Gauge,
+  History,
+  MapPin,
+  Route,
+  TrainFront,
+  Wrench,
+} from "lucide-react";
+
+import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import { api } from "@/services/api";
+import { formatDate, formatDateTime, humanize } from "@/lib/format";
+import {
+  computeWagonPerformance,
+  daysBetween,
+  daysSince,
+  eventCategoryColor,
+  isOffRoster,
+  movementKindColor,
+  statusColor,
+} from "./wagonPerformance";
+
+const WINDOWS = [
+  { value: "30", label: "30d" },
+  { value: "90", label: "90d" },
+  { value: "365", label: "12mo" },
+];
+
+const CATEGORY_TABS = [
+  { value: "ALL", label: "All" },
+  { value: Freight.WagonEventCategory.Yard, label: "Yard" },
+  { value: Freight.WagonEventCategory.Train, label: "Train" },
+  { value: Freight.WagonEventCategory.Schedule, label: "Schedule" },
+  { value: Freight.WagonEventCategory.Status, label: "Status" },
+  { value: Freight.WagonEventCategory.Cargo, label: "Cargo" },
+  { value: Freight.WagonEventCategory.Lifecycle, label: "Lifecycle" },
+];
+
+const HISTORY_PAGE_SIZE = 50;
+
+const num = (n: number | null | undefined, dash = "—") =>
+  n == null ? dash : n.toLocaleString();
+
+const InfoRow = ({
+  label,
+  value,
+}: {
+  label: string;
+  value: React.ReactNode;
+}) => (
+  <Group justify="space-between" wrap="nowrap" gap="sm">
+    <Text size="xs" c="dimmed" tt="uppercase">
+      {label}
+    </Text>
+    <Text size="sm" fw={500} ta="right">
+      {value}
+    </Text>
+  </Group>
+);
+
+const StatCard = ({
+  label,
+  value,
+  hint,
+  color,
+}: {
+  label: string;
+  value: React.ReactNode;
+  hint?: string;
+  color?: string;
+}) => (
+  <Card withBorder radius="md" padding="md">
+    <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
+      {label}
+    </Text>
+    <Text size="26px" fw={700} lh={1.1} mt={8} c={color}>
+      {value}
+    </Text>
+    {hint ? (
+      <Text size="xs" c="dimmed" mt={6} lh={1.35}>
+        {hint}
+      </Text>
+    ) : null}
+  </Card>
+);
+
+const yardLabel = (
+  yard?: { label?: string; code?: string } | null,
+  fallback = "—",
+) => yard?.label ?? yard?.code ?? fallback;
+
+const Empty = ({ children }: { children: React.ReactNode }) => (
+  <Text size="sm" c="dimmed" py="xl" ta="center">
+    {children}
+  </Text>
+);
+
+/**
+ * One wagon's performance record, opened from the wagon performance report.
+ * Read-only: every figure is derived in the browser from the ledgers the API
+ * returns — see `wagonPerformance` for the definitions shared with the report.
+ */
+const WagonPerformanceDetailPage = () => {
+  const { id = "" } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [windowDays, setWindowDays] = useState("90");
+  const [category, setCategory] = useState<string>("ALL");
+
+  const { data: wagon, isLoading } = useQuery(
+    api.wagons.getById.queryOptions({ input: { id }, enabled: Boolean(id) }),
+  );
+  const { data: movements = [], isLoading: movementsLoading } = useQuery(
+    api.wagons.movements.queryOptions({ input: { id }, enabled: Boolean(id) }),
+  );
+  const { data: statusLogs = [], isLoading: statusLoading } = useQuery(
+    api.wagons.statusHistory.queryOptions({
+      input: { id },
+      enabled: Boolean(id),
+    }),
+  );
+
+  // Unified history is keyset-paged — a long-serving wagon must never load its
+  // whole life at once.
+  const historyInput = useMemo(
+    () => ({
+      id,
+      category:
+        category === "ALL"
+          ? undefined
+          : (category as Freight.WagonEventCategory),
+      limit: HISTORY_PAGE_SIZE,
+    }),
+    [id, category],
+  );
+  const {
+    data: historyPages,
+    isLoading: historyLoading,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+  } = useInfiniteQuery({
+    queryKey: [...api.wagons.history.queryKey(historyInput), "infinite"],
+    queryFn: ({ pageParam }) =>
+      api.wagons.history.call({
+        ...historyInput,
+        cursor: pageParam || undefined,
+      }),
+    initialPageParam: "" as string,
+    getNextPageParam: (last) => last.nextCursor ?? undefined,
+    enabled: Boolean(id),
+  });
+  const events = useMemo(
+    () => historyPages?.pages.flatMap((p) => p.items) ?? [],
+    [historyPages],
+  );
+
+  const windowNum = Number(windowDays);
+  const perf = useMemo(
+    () =>
+      wagon
+        ? computeWagonPerformance(wagon, movements, statusLogs, windowNum)
+        : null,
+    [wagon, movements, statusLogs, windowNum],
+  );
+
+  /** Days parked per yard, from the gaps between consecutive arrivals. */
+  const yardDwell = useMemo(() => {
+    const ordered = [...movements].sort(
+      (a, b) =>
+        new Date(a.occurredAt).getTime() - new Date(b.occurredAt).getTime(),
+    );
+    const totals = new Map<
+      string,
+      { label: string; days: number; visits: number }
+    >();
+    ordered.forEach((m, i) => {
+      const days = daysBetween(
+        m.occurredAt,
+        ordered[i + 1]?.occurredAt ?? null,
+      );
+      if (days == null) return;
+      const prev = totals.get(m.toYardId) ?? {
+        label: yardLabel(m.toYard, "Unknown yard"),
+        days: 0,
+        visits: 0,
+      };
+      totals.set(m.toYardId, {
+        label: prev.label,
+        days: prev.days + days,
+        visits: prev.visits + 1,
+      });
+    });
+    const rows = [...totals.values()].sort((a, b) => b.days - a.days);
+    const max = rows[0]?.days ?? 0;
+    return rows
+      .slice(0, 6)
+      .map((r) => ({ ...r, pct: max > 0 ? (r.days / max) * 100 : 0 }));
+  }, [movements]);
+
+  const movementsInWindow = useMemo(() => {
+    const since = Date.now() - windowNum * 24 * 60 * 60 * 1000;
+    return movements.filter((m) => new Date(m.occurredAt).getTime() >= since);
+  }, [movements, windowNum]);
+
+  /** Off-roster spells reconstructed from the status log, newest first. */
+  const spells = useMemo(() => {
+    const logs = [...statusLogs].sort(
+      (a, b) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+    );
+    return logs
+      .map((log, i) => ({ log, closedBy: logs[i - 1] ?? null }))
+      .filter(({ log }) => isOffRoster(log.toStatus))
+      .map(({ log, closedBy }) => ({
+        id: log.id,
+        status: log.toStatus,
+        startedAt: log.createdAt,
+        endedAt: closedBy?.createdAt ?? null,
+        days: daysBetween(log.createdAt, closedBy?.createdAt ?? null),
+        note: log.note,
+      }));
+  }, [statusLogs]);
+
+  /** Loaded movements are the wagon's cargo record — one row per haul. */
+  const cargoRuns = useMemo(
+    () =>
+      movements
+        .filter((m) => m.kind === Freight.WagonMovementKind.Loaded)
+        .sort(
+          (a, b) =>
+            new Date(b.occurredAt).getTime() - new Date(a.occurredAt).getTime(),
+        ),
+    [movements],
+  );
+
+  if (isLoading) {
+    return (
+      <Center py="xl">
+        <Loader size="sm" />
+      </Center>
+    );
+  }
+
+  if (!wagon) {
+    return (
+      <Container size="xl" py="xl" px="lg">
+        <Text c="dimmed">Wagon not found.</Text>
+      </Container>
+    );
+  }
+
+  const type = wagon.wagonType;
+  const yard = wagon.currentYard ?? wagon.currentLocationYard;
+  const offRoster = isOffRoster(wagon.status);
+  const windowLabel =
+    windowDays === "30"
+      ? "last 30 days"
+      : windowDays === "90"
+        ? "last 90 days"
+        : "last 12 months";
+
+  return (
+    <Container size="xl" py="xl" px="lg">
+      <Breadcrumbs
+        items={[
+          { label: "Overview", href: "/dashboard/overview" },
+          { label: "Wagon performance", href: "/dashboard/wagon-performance" },
+          { label: wagon.wagonNumber },
+        ]}
+      />
+
+      <Card withBorder radius="md" padding="lg" mt="md">
+        <Group justify="space-between" align="flex-start" wrap="wrap" gap="md">
+          <Group align="flex-start" gap="md" wrap="nowrap">
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              size="lg"
+              aria-label="Back to wagon performance"
+              onClick={() => navigate("/dashboard/wagon-performance")}
+            >
+              <ArrowLeft size={18} />
+            </ActionIcon>
+            <div>
+              <Group gap="sm" wrap="wrap">
+                <Title order={2}>{wagon.wagonNumber}</Title>
+                <Badge variant="light" color={statusColor(wagon.status)}>
+                  {humanize(wagon.status)}
+                </Badge>
+                {type?.code ? (
+                  <Badge variant="light" color="gray">
+                    {type.code}
+                  </Badge>
+                ) : null}
+              </Group>
+              <Group gap="lg" mt={8} c="dimmed" wrap="wrap">
+                <Group gap={6} wrap="nowrap">
+                  <MapPin size={13} />
+                  <Text size="sm">{yardLabel(yard, "No yard recorded")}</Text>
+                </Group>
+                {wagon.trainId ? (
+                  <Group gap={6} wrap="nowrap">
+                    <TrainFront size={13} />
+                    <Text size="sm">
+                      Coupled
+                      {wagon.sequenceNumber != null
+                        ? ` · position ${wagon.sequenceNumber}`
+                        : ""}
+                    </Text>
+                  </Group>
+                ) : null}
+                {wagon.exportTrainNumber || wagon.importTrainNumber ? (
+                  <Text size="sm">
+                    Runs{" "}
+                    {[wagon.exportTrainNumber, wagon.importTrainNumber]
+                      .filter(Boolean)
+                      .join(" / ")}
+                  </Text>
+                ) : null}
+                {perf?.lastMovement ? (
+                  <Text size="sm">
+                    Last moved {num(daysSince(perf.lastMovement.occurredAt))}{" "}
+                    days ago
+                  </Text>
+                ) : null}
+              </Group>
+            </div>
+          </Group>
+          <SegmentedControl
+            size="xs"
+            value={windowDays}
+            onChange={setWindowDays}
+            data={WINDOWS}
+          />
+        </Group>
+      </Card>
+
+      <Tabs defaultValue="overview" mt="lg" keepMounted={false}>
+        <Tabs.List>
+          <Tabs.Tab value="overview" leftSection={<Gauge size={14} />}>
+            Overview
+          </Tabs.Tab>
+          <Tabs.Tab value="history" leftSection={<History size={14} />}>
+            History
+          </Tabs.Tab>
+          <Tabs.Tab value="movements" leftSection={<Route size={14} />}>
+            Movements
+          </Tabs.Tab>
+          <Tabs.Tab value="status" leftSection={<Activity size={14} />}>
+            Status log
+          </Tabs.Tab>
+          <Tabs.Tab value="cargo" leftSection={<Boxes size={14} />}>
+            Cargo
+          </Tabs.Tab>
+          <Tabs.Tab value="maintenance" leftSection={<Wrench size={14} />}>
+            Maintenance
+          </Tabs.Tab>
+        </Tabs.List>
+
+        {/* ── OVERVIEW ─────────────────────────────────────── */}
+        <Tabs.Panel value="overview" pt="lg">
+          <Stack gap="lg">
+            <SimpleGrid cols={{ base: 1, sm: 2, lg: 5 }} spacing="md">
+              <StatCard
+                label="Idle days"
+                value={num(perf?.idleDays)}
+                hint={
+                  perf?.lastMovement
+                    ? `In yard since ${formatDate(perf.lastMovement.occurredAt)}`
+                    : "No movement on record"
+                }
+                color={
+                  perf?.idleDays != null && perf.idleDays > 21
+                    ? "red"
+                    : perf?.idleDays != null && perf.idleDays > 10
+                      ? "yellow.8"
+                      : undefined
+                }
+              />
+              <StatCard
+                label="Days off roster"
+                value={offRoster ? num(perf?.downDays) : "—"}
+                hint={
+                  offRoster
+                    ? `Currently ${humanize(wagon.status).toLowerCase()}`
+                    : "In service"
+                }
+                color={offRoster ? "yellow.8" : undefined}
+              />
+              <StatCard
+                label="Times loaded"
+                value={num(perf?.loads)}
+                hint={`Loaded moves, ${windowLabel}`}
+              />
+              <StatCard
+                label="Times moved"
+                value={num(perf?.moves)}
+                hint={`${num(perf?.emptyMoves)} empty · ${num(perf?.manualMoves)} manual`}
+              />
+              <StatCard
+                label="Loaded share"
+                value={perf?.loadedShare == null ? "—" : `${perf.loadedShare}%`}
+                hint={`Share of moves carrying cargo, ${windowLabel}`}
+                color={
+                  perf?.loadedShare == null
+                    ? undefined
+                    : perf.loadedShare >= 60
+                      ? "edr-green"
+                      : perf.loadedShare >= 35
+                        ? "yellow.8"
+                        : "red"
+                }
+              />
+            </SimpleGrid>
+
+            <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="md">
+              <Card withBorder radius="md" padding="md">
+                <Text fw={600} mb="sm">
+                  Specification
+                </Text>
+                <Stack gap="xs">
+                  <InfoRow label="Wagon number" value={wagon.wagonNumber} />
+                  <InfoRow
+                    label="Type"
+                    value={type ? `${type.code} · ${type.name}` : "—"}
+                  />
+                  <InfoRow
+                    label="Capacity"
+                    value={
+                      type?.capacityTons != null
+                        ? `${type.capacityTons} t`
+                        : "—"
+                    }
+                  />
+                  <InfoRow
+                    label="Tare weight"
+                    value={
+                      type?.tareWeightTons != null
+                        ? `${type.tareWeightTons} t`
+                        : "—"
+                    }
+                  />
+                  <InfoRow
+                    label="Length"
+                    value={
+                      type?.lengthMeters != null
+                        ? `${type.lengthMeters} m`
+                        : "—"
+                    }
+                  />
+                  <InfoRow
+                    label="Load types"
+                    value={
+                      type?.supportedLoadTypes?.length
+                        ? type.supportedLoadTypes.map(humanize).join(", ")
+                        : "—"
+                    }
+                  />
+                  <InfoRow label="Current yard" value={yardLabel(yard)} />
+                  <InfoRow
+                    label="Last maintenance"
+                    value={formatDate(wagon.lastMaintenanceAt)}
+                  />
+                </Stack>
+              </Card>
+
+              <Card withBorder radius="md" padding="md">
+                <Text fw={600}>Dwell by yard</Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  Total days parked at each yard, across all recorded movements
+                </Text>
+                {movementsLoading ? (
+                  <Center py="xl">
+                    <Loader size="sm" />
+                  </Center>
+                ) : yardDwell.length === 0 ? (
+                  <Empty>No movements recorded yet.</Empty>
+                ) : (
+                  <Stack gap="sm" mt="md">
+                    {yardDwell.map((y) => (
+                      <div key={y.label}>
+                        <Group justify="space-between" gap="sm" mb={4}>
+                          <Text size="sm">{y.label}</Text>
+                          <Group gap="sm">
+                            <Text size="sm" fw={600}>
+                              {Math.round(y.days)} d
+                            </Text>
+                            <Text size="xs" c="dimmed">
+                              {y.visits} {y.visits === 1 ? "visit" : "visits"}
+                            </Text>
+                          </Group>
+                        </Group>
+                        <Progress
+                          value={y.pct}
+                          size="sm"
+                          radius="xl"
+                          color="edr-green"
+                        />
+                      </div>
+                    ))}
+                  </Stack>
+                )}
+              </Card>
+            </SimpleGrid>
+          </Stack>
+        </Tabs.Panel>
+
+        {/* ── HISTORY (wagon_events) ───────────────────────── */}
+        <Tabs.Panel value="history" pt="lg">
+          <Card withBorder radius="md" padding="md">
+            <SegmentedControl
+              size="xs"
+              fullWidth
+              value={category}
+              onChange={setCategory}
+              data={CATEGORY_TABS}
+              mb="lg"
+            />
+            {historyLoading ? (
+              <Center py="xl">
+                <Loader size="sm" />
+              </Center>
+            ) : events.length === 0 ? (
+              <Empty>
+                Nothing recorded{category === "ALL" ? "" : " in this category"}{" "}
+                yet. Every yard move, coupling, schedule pin, dispatch, status
+                change and load appears here as it happens.
+              </Empty>
+            ) : (
+              <>
+                <Timeline active={events.length} bulletSize={20} lineWidth={2}>
+                  {events.map((e) => (
+                    <Timeline.Item
+                      key={e.id}
+                      title={
+                        <Group gap={8} wrap="wrap">
+                          <Text size="sm" fw={600}>
+                            {humanize(e.type)}
+                          </Text>
+                          <Badge
+                            size="xs"
+                            variant="light"
+                            color={eventCategoryColor(e.category)}
+                          >
+                            {humanize(e.category)}
+                          </Badge>
+                        </Group>
+                      }
+                    >
+                      {/* A yard move reads as a route; everything else as the
+                          before/after pair of whatever value it changed. */}
+                      {e.fromYardLabel || e.toYardLabel ? (
+                        <Group gap={6} wrap="nowrap" mb={4}>
+                          {e.fromYardLabel ? (
+                            <Text size="sm">{e.fromYardLabel}</Text>
+                          ) : null}
+                          {e.fromYardLabel && e.toYardLabel ? (
+                            <ArrowRight size={13} />
+                          ) : null}
+                          {e.toYardLabel ? (
+                            <Text size="sm" fw={500}>
+                              {e.toYardLabel}
+                            </Text>
+                          ) : null}
+                        </Group>
+                      ) : e.fromValue || e.toValue ? (
+                        <Group gap={6} wrap="nowrap" mb={4}>
+                          {e.fromValue ? (
+                            <Text size="sm">{humanize(e.fromValue)}</Text>
+                          ) : null}
+                          {e.fromValue && e.toValue ? (
+                            <ArrowRight size={13} />
+                          ) : null}
+                          {e.toValue ? (
+                            <Text size="sm" fw={500}>
+                              {humanize(e.toValue)}
+                            </Text>
+                          ) : null}
+                        </Group>
+                      ) : null}
+                      {e.reason ? (
+                        <Text size="sm" c="dimmed">
+                          {e.reason}
+                        </Text>
+                      ) : null}
+                      <Text size="xs" c="dimmed" mt={4}>
+                        {[
+                          formatDateTime(e.occurredAt),
+                          e.trainCode ? `Train ${e.trainCode}` : null,
+                          e.scheduleLabel,
+                          e.bookingReference,
+                          e.actorName,
+                        ]
+                          .filter(Boolean)
+                          .join(" · ")}
+                      </Text>
+                    </Timeline.Item>
+                  ))}
+                </Timeline>
+                {hasNextPage ? (
+                  <Center mt="lg">
+                    <Button
+                      size="compact-sm"
+                      variant="subtle"
+                      loading={isFetchingNextPage}
+                      onClick={() => void fetchNextPage()}
+                    >
+                      Load older events
+                    </Button>
+                  </Center>
+                ) : null}
+              </>
+            )}
+          </Card>
+        </Tabs.Panel>
+
+        {/* ── MOVEMENTS (wagon_movements) ──────────────────── */}
+        <Tabs.Panel value="movements" pt="lg">
+          <Card withBorder radius="md" padding={0}>
+            <Group p="md" justify="space-between" wrap="wrap" gap="sm">
+              <Text size="sm" c="dimmed">
+                <strong>{movementsInWindow.length}</strong> moves in the{" "}
+                {windowLabel} — <strong>{perf?.loads ?? 0}</strong> loaded,{" "}
+                <strong>{perf?.emptyMoves ?? 0}</strong> empty repositions,{" "}
+                <strong>{perf?.manualMoves ?? 0}</strong> manual corrections
+              </Text>
+              <Text size="sm" c="dimmed">
+                {movements.length} on record in total
+              </Text>
+            </Group>
+            {movementsLoading ? (
+              <Center py="xl">
+                <Loader size="sm" />
+              </Center>
+            ) : movements.length === 0 ? (
+              <Empty>No movements recorded for this wagon yet.</Empty>
+            ) : (
+              <Table.ScrollContainer minWidth={820}>
+                <Table verticalSpacing="sm" horizontalSpacing="md">
+                  <Table.Thead>
+                    <Table.Tr>
+                      <Table.Th w={170}>Occurred</Table.Th>
+                      <Table.Th w={260}>Route</Table.Th>
+                      <Table.Th w={140}>Kind</Table.Th>
+                      <Table.Th w={120}>Dwell before</Table.Th>
+                      <Table.Th>Note</Table.Th>
+                    </Table.Tr>
+                  </Table.Thead>
+                  <Table.Tbody>
+                    {movements.map((m, i) => {
+                      // Movements are newest-first, so the NEXT row is the
+                      // previous arrival — the dwell that preceded this move.
+                      const previous = movements[i + 1];
+                      const dwell = previous
+                        ? daysBetween(previous.occurredAt, m.occurredAt)
+                        : null;
+                      return (
+                        <Table.Tr key={m.id}>
+                          <Table.Td>
+                            <Text size="sm">
+                              {formatDateTime(m.occurredAt)}
+                            </Text>
+                          </Table.Td>
+                          <Table.Td>
+                            <Group gap={8} wrap="nowrap">
+                              <Text size="sm">
+                                {yardLabel(m.fromYard, "Unknown")}
+                              </Text>
+                              <ArrowRight size={13} />
+                              <Text size="sm" fw={500}>
+                                {yardLabel(m.toYard)}
+                              </Text>
+                            </Group>
+                          </Table.Td>
+                          <Table.Td>
+                            <Badge
+                              size="sm"
+                              variant="light"
+                              color={movementKindColor(m.kind)}
+                            >
+                              {humanize(m.kind)}
+                            </Badge>
+                          </Table.Td>
+                          <Table.Td>
+                            <Text size="sm" fw={600}>
+                              {dwell == null ? "—" : `${dwell.toFixed(1)} d`}
+                            </Text>
+                          </Table.Td>
+                          <Table.Td>
+                            {m.note ? (
+                              <Tooltip label={m.note} multiline w={260}>
+                                <Text size="sm" c="dimmed" lineClamp={1}>
+                                  {m.note}
+                                </Text>
+                              </Tooltip>
+                            ) : (
+                              <Text size="sm" c="dimmed">
+                                —
+                              </Text>
+                            )}
+                          </Table.Td>
+                        </Table.Tr>
+                      );
+                    })}
+                  </Table.Tbody>
+                </Table>
+              </Table.ScrollContainer>
+            )}
+          </Card>
+        </Tabs.Panel>
+
+        {/* ── STATUS LOG (wagon_status_logs) ───────────────── */}
+        <Tabs.Panel value="status" pt="lg">
+          <Card withBorder radius="md" padding={0}>
+            <Group p="md" justify="space-between" wrap="wrap" gap="sm">
+              <Text size="sm" c="dimmed">
+                <strong>{perf?.downDaysInWindow ?? 0}</strong> days off the
+                roster in the {windowLabel} across{" "}
+                <strong>{perf?.spells ?? 0}</strong>{" "}
+                {perf?.spells === 1 ? "spell" : "spells"} — availability{" "}
+                <strong>{perf?.availability ?? 100}%</strong>
+              </Text>
+              <Text size="sm" c="dimmed">
+                {statusLogs.length} changes on record
+              </Text>
+            </Group>
+            {statusLoading ? (
+              <Center py="xl">
+                <Loader size="sm" />
+              </Center>
+            ) : statusLogs.length === 0 ? (
+              <Empty>No status changes recorded for this wagon yet.</Empty>
+            ) : (
+              <Table.ScrollContainer minWidth={760}>
+                <Table verticalSpacing="sm" horizontalSpacing="md">
+                  <Table.Thead>
+                    <Table.Tr>
+                      <Table.Th w={170}>Changed</Table.Th>
+                      <Table.Th w={280}>Transition</Table.Th>
+                      <Table.Th>Note</Table.Th>
+                    </Table.Tr>
+                  </Table.Thead>
+                  <Table.Tbody>
+                    {statusLogs.map((log) => (
+                      <Table.Tr key={log.id}>
+                        <Table.Td>
+                          <Text size="sm">{formatDateTime(log.createdAt)}</Text>
+                        </Table.Td>
+                        <Table.Td>
+                          <Group gap={8} wrap="nowrap">
+                            <Badge
+                              size="sm"
+                              variant="light"
+                              color={statusColor(log.fromStatus)}
+                            >
+                              {humanize(log.fromStatus)}
+                            </Badge>
+                            <ArrowRight size={13} />
+                            <Badge
+                              size="sm"
+                              variant="light"
+                              color={statusColor(log.toStatus)}
+                            >
+                              {humanize(log.toStatus)}
+                            </Badge>
+                          </Group>
+                        </Table.Td>
+                        <Table.Td>
+                          <Text size="sm" c="dimmed">
+                            {log.note ?? "—"}
+                          </Text>
+                        </Table.Td>
+                      </Table.Tr>
+                    ))}
+                  </Table.Tbody>
+                </Table>
+              </Table.ScrollContainer>
+            )}
+          </Card>
+        </Tabs.Panel>
+
+        {/* ── CARGO (loaded movements) ─────────────────────── */}
+        <Tabs.Panel value="cargo" pt="lg">
+          <Card withBorder radius="md" padding={0}>
+            <Group p="md" justify="space-between" wrap="wrap" gap="sm">
+              <Text size="sm" c="dimmed">
+                <strong>{cargoRuns.length}</strong> loaded hauls on record ·{" "}
+                <strong>{perf?.loads ?? 0}</strong> in the {windowLabel}
+              </Text>
+              {type?.capacityTons != null ? (
+                <Text size="sm" c="dimmed">
+                  Rated capacity {type.capacityTons} t
+                </Text>
+              ) : null}
+            </Group>
+            {movementsLoading ? (
+              <Center py="xl">
+                <Loader size="sm" />
+              </Center>
+            ) : cargoRuns.length === 0 ? (
+              <Empty>
+                No loaded hauls recorded yet. A haul appears here when a
+                booking's cargo rides this wagon between yards.
+              </Empty>
+            ) : (
+              <Table.ScrollContainer minWidth={760}>
+                <Table verticalSpacing="sm" horizontalSpacing="md">
+                  <Table.Thead>
+                    <Table.Tr>
+                      <Table.Th w={170}>Loaded</Table.Th>
+                      <Table.Th w={260}>Route</Table.Th>
+                      <Table.Th w={160}>Booking</Table.Th>
+                      <Table.Th>Note</Table.Th>
+                    </Table.Tr>
+                  </Table.Thead>
+                  <Table.Tbody>
+                    {cargoRuns.map((m) => (
+                      <Table.Tr key={m.id}>
+                        <Table.Td>
+                          <Text size="sm">{formatDateTime(m.occurredAt)}</Text>
+                        </Table.Td>
+                        <Table.Td>
+                          <Group gap={8} wrap="nowrap">
+                            <Text size="sm">
+                              {yardLabel(m.fromYard, "Unknown")}
+                            </Text>
+                            <ArrowRight size={13} />
+                            <Text size="sm" fw={500}>
+                              {yardLabel(m.toYard)}
+                            </Text>
+                          </Group>
+                        </Table.Td>
+                        <Table.Td>
+                          {m.bookingId ? (
+                            <Anchor
+                              component={Link}
+                              to={`/dashboard/booking-requests/${m.bookingId}`}
+                              size="sm"
+                              fw={600}
+                            >
+                              {m.bookingReference ?? m.bookingId.slice(0, 8)}
+                            </Anchor>
+                          ) : (
+                            <Text size="sm" c="dimmed">
+                              —
+                            </Text>
+                          )}
+                        </Table.Td>
+                        <Table.Td>
+                          <Text size="sm" c="dimmed">
+                            {m.note ?? "—"}
+                          </Text>
+                        </Table.Td>
+                      </Table.Tr>
+                    ))}
+                  </Table.Tbody>
+                </Table>
+              </Table.ScrollContainer>
+            )}
+          </Card>
+        </Tabs.Panel>
+
+        {/* ── MAINTENANCE (off-roster spells) ──────────────── */}
+        <Tabs.Panel value="maintenance" pt="lg">
+          <Stack gap="lg">
+            <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="md">
+              <StatCard
+                label="Spells"
+                value={num(perf?.spells)}
+                hint={`Off-roster spells in the ${windowLabel}`}
+              />
+              <StatCard
+                label="Days down"
+                value={num(perf?.downDaysInWindow)}
+                hint={`Of ${windowNum} days in the window`}
+                color={
+                  (perf?.downDaysInWindow ?? 0) > 0 ? "yellow.8" : undefined
+                }
+              />
+              <StatCard
+                label="Availability"
+                value={`${perf?.availability ?? 100}%`}
+                hint={`On the roster, ${windowLabel}`}
+                color={(perf?.availability ?? 100) < 90 ? "red" : "edr-green"}
+              />
+              <StatCard
+                label="Current spell"
+                value={offRoster ? num(perf?.downDays) : "—"}
+                hint={offRoster ? "Days in the open spell" : "In service"}
+              />
+            </SimpleGrid>
+
+            <Card withBorder radius="md" padding={0}>
+              <Box p="md">
+                <Text fw={600}>Off-roster spells</Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  Every period this wagon spent in maintenance, detained or
+                  withdrawn
+                </Text>
+              </Box>
+              {statusLoading ? (
+                <Center py="xl">
+                  <Loader size="sm" />
+                </Center>
+              ) : spells.length === 0 ? (
+                <Empty>
+                  This wagon has never left the roster — no maintenance,
+                  detention or withdrawal recorded.
+                </Empty>
+              ) : (
+                <Table.ScrollContainer minWidth={760}>
+                  <Table verticalSpacing="sm" horizontalSpacing="md">
+                    <Table.Thead>
+                      <Table.Tr>
+                        <Table.Th w={170}>Started</Table.Th>
+                        <Table.Th w={150}>Reason</Table.Th>
+                        <Table.Th w={170}>Ended</Table.Th>
+                        <Table.Th w={120}>Days down</Table.Th>
+                        <Table.Th>Note</Table.Th>
+                      </Table.Tr>
+                    </Table.Thead>
+                    <Table.Tbody>
+                      {spells.map((s) => (
+                        <Table.Tr key={s.id}>
+                          <Table.Td>
+                            <Text size="sm">{formatDateTime(s.startedAt)}</Text>
+                          </Table.Td>
+                          <Table.Td>
+                            <Badge
+                              size="sm"
+                              variant="light"
+                              color={statusColor(s.status)}
+                            >
+                              {humanize(s.status)}
+                            </Badge>
+                          </Table.Td>
+                          <Table.Td>
+                            {s.endedAt ? (
+                              <Text size="sm">{formatDateTime(s.endedAt)}</Text>
+                            ) : (
+                              <Badge size="sm" variant="light" color="yellow">
+                                Still open
+                              </Badge>
+                            )}
+                          </Table.Td>
+                          <Table.Td>
+                            <Text
+                              size="sm"
+                              fw={700}
+                              c={(s.days ?? 0) > 30 ? "red" : "yellow.8"}
+                            >
+                              {s.days == null ? "—" : s.days.toFixed(1)}
+                            </Text>
+                          </Table.Td>
+                          <Table.Td>
+                            <Text size="sm" c="dimmed">
+                              {s.note ?? "—"}
+                            </Text>
+                          </Table.Td>
+                        </Table.Tr>
+                      ))}
+                    </Table.Tbody>
+                  </Table>
+                </Table.ScrollContainer>
+              )}
+            </Card>
+          </Stack>
+        </Tabs.Panel>
+      </Tabs>
+    </Container>
+  );
+};
+
+export default WagonPerformanceDetailPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/wagon-performance/WagonPerformancePage.tsx b/apps/edr-freight-web/backoffice/src/pages/wagon-performance/WagonPerformancePage.tsx
new file mode 100644
index 000000000..bb7b7d163
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/wagon-performance/WagonPerformancePage.tsx
@@ -0,0 +1,1533 @@
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import {
+  Badge,
+  Box,
+  Card,
+  Center,
+  Container,
+  Group,
+  Loader,
+  Pagination,
+  Progress,
+  SegmentedControl,
+  Select,
+  SimpleGrid,
+  Stack,
+  Table,
+  Tabs,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+  UnstyledButton,
+} from "@mantine/core";
+import { Freight } from "@edr/types";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChartColumn,
+  ChevronRight,
+  List,
+  MapPin,
+  Search,
+} from "lucide-react";
+
+import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import { api } from "@/services/api";
+import { formatDate, humanize } from "@/lib/format";
+import type { Wagon } from "@/services/wagon.service";
+import {
+  DOWN_THRESHOLD_DAYS,
+  IDLE_THRESHOLD_DAYS,
+  daysSince,
+  idleBand,
+  isOffRoster,
+  statusColor,
+} from "./wagonPerformance";
+import { downloadSheet, downloadSheets } from "./exportSection";
+import { SectionExportButton } from "./SectionExportButton";
+
+const WINDOWS = [
+  { value: "30", label: "30d" },
+  { value: "90", label: "90d" },
+  { value: "365", label: "12mo" },
+];
+
+const STATUS_TABS = [
+  { value: "ALL", label: "All" },
+  { value: Freight.WagonStatus.Available, label: "Available" },
+  { value: Freight.WagonStatus.Assigned, label: "Assigned" },
+  { value: Freight.WagonStatus.Maintenance, label: "Maintenance" },
+  { value: Freight.WagonStatus.Detained, label: "Detained" },
+  { value: Freight.WagonStatus.OutOfService, label: "Withdrawn" },
+];
+
+type SortKey =
+  | "wagonNumber"
+  | "idleDays"
+  | "downDays"
+  | "loads"
+  | "moves"
+  | "share";
+
+const PAGE_SIZE = 25;
+
+/** Idle-day buckets for the distribution chart. */
+const IDLE_BUCKETS: Array<{
+  label: string;
+  min: number;
+  max: number;
+  tone: string;
+}> = [
+  { label: "0–3 d", min: 0, max: 3, tone: "edr-green" },
+  { label: "4–7 d", min: 4, max: 7, tone: "edr-green" },
+  { label: "8–14 d", min: 8, max: 14, tone: "edr-green" },
+  { label: "15–21 d", min: 15, max: 21, tone: "yellow" },
+  { label: "22–45 d", min: 22, max: 45, tone: "red" },
+  { label: "46 d +", min: 46, max: Infinity, tone: "red" },
+];
+
+const StatTile = ({
+  label,
+  value,
+  hint,
+  color,
+}: {
+  label: string;
+  value: React.ReactNode;
+  hint: string;
+  color?: string;
+}) => (
+  <Card withBorder radius="md" padding="md">
+    <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
+      {label}
+    </Text>
+    <Text size="26px" fw={700} lh={1.1} mt={8} c={color}>
+      {value}
+    </Text>
+    <Text size="xs" c="dimmed" mt={6} lh={1.35}>
+      {hint}
+    </Text>
+  </Card>
+);
+
+const SortHeader = ({
+  label,
+  active,
+  desc,
+  onClick,
+  align = "left",
+}: {
+  label: string;
+  active: boolean;
+  desc: boolean;
+  onClick: () => void;
+  align?: "left" | "right";
+}) => (
+  <UnstyledButton onClick={onClick} w="100%">
+    <Group
+      gap={4}
+      wrap="nowrap"
+      justify={align === "right" ? "flex-end" : "flex-start"}
+    >
+      <Text size="xs" fw={600} tt="uppercase" c={active ? undefined : "dimmed"}>
+        {label}
+      </Text>
+      {active ? desc ? <ArrowDown size={12} /> : <ArrowUp size={12} /> : null}
+    </Group>
+  </UnstyledButton>
+);
+
+/** A short ranked list — the "best / worst" boards. */
+const Leaderboard = ({
+  title,
+  subtitle,
+  accent,
+  rows,
+  onOpen,
+}: {
+  title: string;
+  subtitle: string;
+  accent: string;
+  rows: Array<{ id: string; number: string; note: string; value: string }>;
+  onOpen: (id: string) => void;
+}) => (
+  <Card withBorder radius="md" padding={0}>
+    <Box
+      p="md"
+      pb="sm"
+      style={{ borderBottom: "1px solid var(--mantine-color-edr-border-0)" }}
+    >
+      <Group gap={8} wrap="nowrap">
+        <Box
+          w={7}
+          h={7}
+          style={{
+            borderRadius: 2,
+            background: `var(--mantine-color-${accent}-6)`,
+          }}
+        />
+        <Text fw={600} size="sm">
+          {title}
+        </Text>
+      </Group>
+      <Text size="xs" c="dimmed" mt={4}>
+        {subtitle}
+      </Text>
+    </Box>
+    {rows.length === 0 ? (
+      <Text size="sm" c="dimmed" py="lg" ta="center">
+        Nothing to rank yet.
+      </Text>
+    ) : (
+      <Stack gap={0} py={4}>
+        {rows.map((r, i) => (
+          <UnstyledButton
+            key={r.id}
+            onClick={() => onOpen(r.id)}
+            px="md"
+            py={9}
+          >
+            <Group justify="space-between" wrap="nowrap" gap="sm">
+              <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
+                <Text size="xs" fw={600} c="dimmed" w={14}>
+                  {i + 1}
+                </Text>
+                <div style={{ minWidth: 0 }}>
+                  <Text size="sm" fw={600}>
+                    {r.number}
+                  </Text>
+                  <Text size="xs" c="dimmed" truncate>
+                    {r.note}
+                  </Text>
+                </div>
+              </Group>
+              <Text size="sm" fw={700} style={{ whiteSpace: "nowrap" }}>
+                {r.value}
+              </Text>
+            </Group>
+          </UnstyledButton>
+        ))}
+      </Stack>
+    )}
+  </Card>
+);
+
+/**
+ * Wagon performance — the executive report on how the wagon fleet is earning
+ * its keep. Read-only: utilisation, idle stock, load and move counts, the
+ * wagons at each end of the table, and per-yard / per-type breakdowns.
+ *
+ * Deliberately separate from the Fleet Management wagons desk, which owns
+ * wagon CRUD. This page only reads.
+ *
+ * The whole fleet is page-walked once and then filtered, sorted and paged in
+ * the browser: every figure shown is derived (idle days, load counts, shares),
+ * and the API cannot sort by a number it does not store.
+ */
+const WagonPerformancePage = () => {
+  const navigate = useNavigate();
+  const [windowDays, setWindowDays] = useState("90");
+  const [status, setStatus] = useState<string>("ALL");
+  const [yardId, setYardId] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const [sort, setSort] = useState<SortKey>("idleDays");
+  const [desc, setDesc] = useState(true);
+  const [page, setPage] = useState(1);
+  const [tab, setTab] = useState<string>("summary");
+
+  const windowNum = Number(windowDays);
+
+  const { data: wagons = [], isLoading } = useQuery(
+    api.wagons.list.queryOptions({
+      input: { filters: { statsWindowDays: windowNum } },
+    }),
+  );
+  const { data: yards = [] } = useQuery(api.routes.yards.queryOptions());
+
+  const yardOptions = useMemo(
+    () =>
+      (yards as Array<{ id: string; label?: string; code?: string }>).map(
+        (y) => ({
+          value: y.id,
+          label: y.label ?? y.code ?? y.id,
+        }),
+      ),
+    [yards],
+  );
+
+  const openWagon = (id: string) =>
+    navigate(`/dashboard/wagon-performance/${id}`);
+
+  /** Fleet-wide figures — always the whole fleet, never the filtered subset. */
+  const kpis = useMemo(() => {
+    const total = wagons.length;
+    const offRoster = wagons.filter((w) => isOffRoster(w.status)).length;
+    const stranded = wagons.filter(
+      (w) => idleBand(daysSince(w.lastMovedAt)) === "stranded",
+    ).length;
+    const loads = wagons.reduce((s, w) => s + (w.loadsInWindow ?? 0), 0);
+    const moves = wagons.reduce((s, w) => s + (w.movesInWindow ?? 0), 0);
+    const empty = wagons.reduce((s, w) => s + (w.emptyMovesInWindow ?? 0), 0);
+    return {
+      total,
+      inService: total - offRoster,
+      offRoster,
+      stranded,
+      loads,
+      moves,
+      emptyShare: moves > 0 ? Math.round((empty / moves) * 100) : 0,
+      loadedShare: moves > 0 ? Math.round((loads / moves) * 100) : 0,
+      meanLoads: total > 0 ? (loads / total).toFixed(1) : "0.0",
+    };
+  }, [wagons]);
+
+  /** Status mix across the whole fleet. */
+  const statusMix = useMemo(() => {
+    const counts = new Map<Freight.WagonStatus, number>();
+    wagons.forEach((w) =>
+      counts.set(w.status, (counts.get(w.status) ?? 0) + 1),
+    );
+    const total = wagons.length || 1;
+    return [...counts.entries()]
+      .sort((a, b) => b[1] - a[1])
+      .map(([s, count]) => ({
+        status: s,
+        label: humanize(s),
+        count,
+        pct: Math.round((count / total) * 100),
+        color: statusColor(s),
+      }));
+  }, [wagons]);
+
+  /** How idle days are spread across the fleet. */
+  const idleDistribution = useMemo(() => {
+    const counts = IDLE_BUCKETS.map((b) => ({ ...b, count: 0 }));
+    wagons.forEach((w) => {
+      const idle = daysSince(w.lastMovedAt);
+      if (idle == null) return;
+      const bucket = counts.find((b) => idle >= b.min && idle <= b.max);
+      if (bucket) bucket.count += 1;
+    });
+    const max = Math.max(1, ...counts.map((b) => b.count));
+    return counts.map((b) => ({ ...b, pct: (b.count / max) * 100 }));
+  }, [wagons]);
+
+  /** Where the fleet is parked and how stuck it is, per yard. */
+  const byYard = useMemo(() => {
+    const rows = new Map<
+      string,
+      {
+        label: string;
+        wagons: number;
+        idleSum: number;
+        idleCount: number;
+        over: number;
+      }
+    >();
+    wagons.forEach((w) => {
+      const key = w.currentYardId ?? "__none__";
+      const label =
+        w.currentYard?.label ?? w.currentYard?.code ?? "No yard recorded";
+      const prev = rows.get(key) ?? {
+        label,
+        wagons: 0,
+        idleSum: 0,
+        idleCount: 0,
+        over: 0,
+      };
+      const idle = daysSince(w.lastMovedAt);
+      rows.set(key, {
+        label,
+        wagons: prev.wagons + 1,
+        idleSum: prev.idleSum + (idle ?? 0),
+        idleCount: prev.idleCount + (idle == null ? 0 : 1),
+        over: prev.over + (idleBand(idle) === "stranded" ? 1 : 0),
+      });
+    });
+    return [...rows.values()]
+      .map((r) => ({
+        ...r,
+        meanIdle: r.idleCount > 0 ? Math.round(r.idleSum / r.idleCount) : null,
+      }))
+      .sort((a, b) => b.wagons - a.wagons);
+  }, [wagons]);
+
+  /** Which classes of stock earn, and which sit. */
+  const byType = useMemo(() => {
+    const rows = new Map<
+      string,
+      {
+        code: string;
+        name: string;
+        count: number;
+        inService: number;
+        loads: number;
+        moves: number;
+        empty: number;
+        idleSum: number;
+        idleCount: number;
+      }
+    >();
+    wagons.forEach((w) => {
+      const key = w.wagonTypeId ?? "__none__";
+      const prev = rows.get(key) ?? {
+        code: w.wagonType?.code ?? "Unknown",
+        name: w.wagonType?.name ?? "Unclassified",
+        count: 0,
+        inService: 0,
+        loads: 0,
+        moves: 0,
+        empty: 0,
+        idleSum: 0,
+        idleCount: 0,
+      };
+      const idle = daysSince(w.lastMovedAt);
+      rows.set(key, {
+        ...prev,
+        count: prev.count + 1,
+        inService: prev.inService + (isOffRoster(w.status) ? 0 : 1),
+        loads: prev.loads + (w.loadsInWindow ?? 0),
+        moves: prev.moves + (w.movesInWindow ?? 0),
+        empty: prev.empty + (w.emptyMovesInWindow ?? 0),
+        idleSum: prev.idleSum + (idle ?? 0),
+        idleCount: prev.idleCount + (idle == null ? 0 : 1),
+      });
+    });
+    return [...rows.values()]
+      .map((r) => ({
+        ...r,
+        meanIdle: r.idleCount > 0 ? Math.round(r.idleSum / r.idleCount) : null,
+        loadedPct: r.moves > 0 ? Math.round((r.loads / r.moves) * 100) : 0,
+        emptyPct: r.moves > 0 ? Math.round((r.empty / r.moves) * 100) : 0,
+      }))
+      .sort((a, b) => b.count - a.count);
+  }, [wagons]);
+
+  /** Best / worst boards. */
+  const boards = useMemo(() => {
+    const withIdle = wagons
+      .map((w) => ({ w, idle: daysSince(w.lastMovedAt) }))
+      .filter((r): r is { w: Wagon; idle: number } => r.idle != null);
+
+    const yardOf = (w: Wagon) =>
+      w.currentYard?.label ?? w.currentYard?.code ?? "No yard";
+
+    return {
+      hardest: [...wagons]
+        .filter((w) => (w.loadsInWindow ?? 0) > 0)
+        .sort((a, b) => (b.loadsInWindow ?? 0) - (a.loadsInWindow ?? 0))
+        .slice(0, 5)
+        .map((w) => ({
+          id: w.id,
+          number: w.wagonNumber,
+          note: `${w.wagonType?.code ?? "—"} · ${yardOf(w)}`,
+          value: `${w.loadsInWindow ?? 0} loads`,
+        })),
+      stranded: withIdle
+        .sort((a, b) => b.idle - a.idle)
+        .slice(0, 5)
+        .map(({ w, idle }) => ({
+          id: w.id,
+          number: w.wagonNumber,
+          note: `${w.wagonType?.code ?? "—"} · ${yardOf(w)}`,
+          value: `${idle} days`,
+        })),
+      idle: [...wagons]
+        .filter((w) => (w.movesInWindow ?? 0) === 0)
+        .slice(0, 5)
+        .map((w) => ({
+          id: w.id,
+          number: w.wagonNumber,
+          note: `${humanize(w.status)} · ${yardOf(w)}`,
+          value: "no moves",
+        })),
+    };
+  }, [wagons]);
+
+  const rows = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    const filtered = wagons.filter((w) => {
+      if (status !== "ALL" && w.status !== status) return false;
+      if (yardId && w.currentYardId !== yardId) return false;
+      if (!term) return true;
+      const yard = w.currentYard?.label ?? w.currentYard?.code ?? "";
+      return (
+        w.wagonNumber.toLowerCase().includes(term) ||
+        (w.wagonType?.code ?? "").toLowerCase().includes(term) ||
+        yard.toLowerCase().includes(term)
+      );
+    });
+
+    // Missing figures sort last in both directions — a wagon with no movement
+    // on record is not "the least idle", it is unknown.
+    const rank = (w: Wagon): number | null => {
+      switch (sort) {
+        case "idleDays":
+          return daysSince(w.lastMovedAt);
+        case "downDays":
+          return isOffRoster(w.status) ? daysSince(w.lastMaintenanceAt) : null;
+        case "loads":
+          return w.loadsInWindow ?? null;
+        case "moves":
+          return w.movesInWindow ?? null;
+        case "share": {
+          const moves = w.movesInWindow ?? 0;
+          return moves > 0 ? ((w.loadsInWindow ?? 0) / moves) * 100 : null;
+        }
+        default:
+          return null;
+      }
+    };
+
+    return [...filtered].sort((a, b) => {
+      if (sort === "wagonNumber") {
+        const cmp = a.wagonNumber.localeCompare(b.wagonNumber);
+        return desc ? -cmp : cmp;
+      }
+      const x = rank(a);
+      const y = rank(b);
+      if (x == null && y == null) return 0;
+      if (x == null) return 1;
+      if (y == null) return -1;
+      return desc ? y - x : x - y;
+    });
+  }, [wagons, status, yardId, search, sort, desc]);
+
+  const pageCount = Math.max(1, Math.ceil(rows.length / PAGE_SIZE));
+  const current = Math.min(page, pageCount);
+  const pageRows = rows.slice((current - 1) * PAGE_SIZE, current * PAGE_SIZE);
+
+  const toggleSort = (key: SortKey) => {
+    if (sort === key) setDesc((d) => !d);
+    else {
+      setSort(key);
+      setDesc(true);
+    }
+    setPage(1);
+  };
+
+  const windowLabel =
+    windowDays === "30"
+      ? "last 30 days"
+      : windowDays === "90"
+        ? "last 90 days"
+        : "last 12 months";
+
+  /**
+   * Excel row builders — one per section. Each mirrors exactly what that
+   * section renders, so a downloaded figure always reconciles with the screen.
+   * Filenames carry the window so two exports are never confused.
+   */
+  const suffix = `${windowDays}d`;
+
+  const exportKpis = () =>
+    downloadSheet("wagon-performance-summary", "Summary", [
+      {
+        Metric: "Fleet size",
+        Value: kpis.total,
+        Note: "Wagons on the register",
+      },
+      {
+        Metric: "In service",
+        Value: kpis.inService,
+        Note: "Not maintenance/detained/withdrawn",
+      },
+      {
+        Metric: `Idle over ${IDLE_THRESHOLD_DAYS} days`,
+        Value: kpis.stranded,
+        Note: "No movement in the current yard",
+      },
+      {
+        Metric: "Off roster",
+        Value: kpis.offRoster,
+        Note: "Maintenance, detained or withdrawn",
+      },
+      {
+        Metric: "Loads",
+        Value: kpis.loads,
+        Note: `Loaded moves, ${windowLabel}`,
+      },
+      { Metric: "Moves", Value: kpis.moves, Note: `All moves, ${windowLabel}` },
+      {
+        Metric: "Loaded share %",
+        Value: kpis.loadedShare,
+        Note: "Share of moves carrying cargo",
+      },
+      {
+        Metric: "Mean loads per wagon",
+        Value: kpis.meanLoads,
+        Note: windowLabel,
+      },
+    ]);
+
+  const exportStatusMix = () =>
+    downloadSheet(
+      "wagon-status-mix",
+      "Status mix",
+      statusMix.map((r) => ({
+        Status: r.label,
+        Wagons: r.count,
+        "Share %": r.pct,
+      })),
+    );
+
+  const exportIdleDistribution = () =>
+    downloadSheet(
+      "wagon-idle-distribution",
+      "Idle distribution",
+      idleDistribution.map((b) => ({ "Idle days": b.label, Wagons: b.count })),
+    );
+
+  /** All three boards in one workbook, a sheet each. */
+  const exportLeaderboards = () =>
+    downloadSheets(`wagon-leaderboards-${suffix}`, [
+      {
+        name: "Hardest working",
+        rows: boards.hardest.map((r, i) => ({
+          Rank: i + 1,
+          Wagon: r.number,
+          Detail: r.note,
+          Value: r.value,
+        })),
+      },
+      {
+        name: "Longest stranded",
+        rows: boards.stranded.map((r, i) => ({
+          Rank: i + 1,
+          Wagon: r.number,
+          Detail: r.note,
+          Value: r.value,
+        })),
+      },
+      {
+        name: "Not moving",
+        rows: boards.idle.map((r, i) => ({
+          Rank: i + 1,
+          Wagon: r.number,
+          Detail: r.note,
+          Value: r.value,
+        })),
+      },
+    ]);
+
+  const exportByYard = () =>
+    downloadSheet(
+      "wagon-performance-by-yard",
+      "By yard",
+      byYard.map((y) => ({
+        Yard: y.label,
+        Wagons: y.wagons,
+        "Mean idle days": y.meanIdle,
+        [`Over ${IDLE_THRESHOLD_DAYS} days`]: y.over,
+      })),
+    );
+
+  const exportByType = () =>
+    downloadSheet(
+      `wagon-performance-by-type-${suffix}`,
+      "By type",
+      byType.map((t) => ({
+        Type: t.code,
+        Name: t.name,
+        Count: t.count,
+        "In service": t.inService,
+        Loads: t.loads,
+        Moves: t.moves,
+        "Loaded %": t.loadedPct,
+        "Empty %": t.emptyPct,
+        "Mean idle days": t.meanIdle,
+      })),
+    );
+
+  /** The wagon table exports every FILTERED row, not just the visible page. */
+  const exportWagons = () =>
+    downloadSheet(
+      `wagon-performance-list-${suffix}`,
+      "Wagons",
+      rows.map((w) => {
+        const idle = daysSince(w.lastMovedAt);
+        const down = isOffRoster(w.status)
+          ? daysSince(w.lastMaintenanceAt)
+          : null;
+        const loads = w.loadsInWindow ?? 0;
+        const moves = w.movesInWindow ?? 0;
+        return {
+          Wagon: w.wagonNumber,
+          Type: w.wagonType?.code ?? "",
+          "Capacity (t)": w.wagonType?.capacityTons ?? null,
+          Status: humanize(w.status),
+          Yard: w.currentYard?.label ?? w.currentYard?.code ?? "",
+          "Idle days": idle,
+          "Days down": down,
+          Loads: loads,
+          Moves: moves,
+          "Loaded share %":
+            moves > 0 ? Math.round((loads / moves) * 100) : null,
+          "Export run": w.exportTrainNumber ?? "",
+          "Import run": w.importTrainNumber ?? "",
+        };
+      }),
+    );
+
+  return (
+    <Container size="xl" py="xl" px="lg">
+      <Breadcrumbs
+        items={[
+          { label: "Overview", href: "/dashboard/overview" },
+          { label: "Wagon performance" },
+        ]}
+      />
+
+      <Group
+        justify="space-between"
+        align="flex-start"
+        mt="md"
+        mb="lg"
+        wrap="wrap"
+        gap="md"
+      >
+        <div>
+          <Title order={2}>Wagon performance</Title>
+          <Text size="sm" c="dimmed" mt={6} maw={660}>
+            How the wagon fleet is earning its keep — utilisation, idle stock,
+            load counts and the wagons at each end of the table.
+          </Text>
+        </div>
+        <SegmentedControl
+          size="xs"
+          value={windowDays}
+          onChange={(v) => {
+            setWindowDays(v);
+            setPage(1);
+          }}
+          data={WINDOWS}
+        />
+      </Group>
+
+      {isLoading ? (
+        <Center py="xl">
+          <Loader size="sm" />
+        </Center>
+      ) : (
+        <Stack gap="lg">
+          {/* ── Headline figures ─────────────────────────── */}
+          <Group justify="space-between" wrap="nowrap">
+            <Text fw={600}>Fleet summary</Text>
+            <SectionExportButton label="summary" onExport={exportKpis} />
+          </Group>
+          <SimpleGrid cols={{ base: 1, sm: 2, lg: 5 }} spacing="md">
+            <StatTile
+              label="Fleet size"
+              value={kpis.total}
+              hint="Wagons on the register"
+            />
+            <StatTile
+              label="In service"
+              value={kpis.inService}
+              hint={
+                kpis.total > 0
+                  ? `${Math.round((kpis.inService / kpis.total) * 100)}% of the fleet`
+                  : "—"
+              }
+            />
+            <StatTile
+              label={`Idle over ${IDLE_THRESHOLD_DAYS}d`}
+              value={kpis.stranded}
+              hint="No movement in the current yard"
+              color={kpis.stranded > 0 ? "red" : undefined}
+            />
+            <StatTile
+              label="Off roster"
+              value={kpis.offRoster}
+              hint="Maintenance, detained or withdrawn"
+              color={kpis.offRoster > 0 ? "yellow.8" : undefined}
+            />
+            <StatTile
+              label="Loads · moves"
+              value={kpis.loads}
+              hint={`${kpis.moves} moves · mean ${kpis.meanLoads} loads per wagon, ${windowLabel}`}
+            />
+          </SimpleGrid>
+
+          {/* Summary and the full wagon list are separate tabs: the CEO reads
+              the summary, and drills into the table only when a figure
+              prompts a question. */}
+          <Tabs
+            value={tab}
+            onChange={(v) => setTab(v ?? "summary")}
+            keepMounted={false}
+          >
+            <Tabs.List>
+              <Tabs.Tab value="summary" leftSection={<ChartColumn size={14} />}>
+                Summary
+              </Tabs.Tab>
+              <Tabs.Tab value="wagons" leftSection={<List size={14} />}>
+                All wagons
+                <Badge size="xs" variant="light" color="gray" ml={8}>
+                  {wagons.length}
+                </Badge>
+              </Tabs.Tab>
+            </Tabs.List>
+
+            <Tabs.Panel value="summary" pt="lg">
+              <Stack gap="lg">
+                {/* ── Status mix + idle distribution ───────────── */}
+                <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="md">
+                  <Card withBorder radius="md" padding="md">
+                    <Group justify="space-between" wrap="nowrap">
+                      <Text fw={600}>Status mix</Text>
+                      <SectionExportButton
+                        label="status mix"
+                        onExport={exportStatusMix}
+                      />
+                    </Group>
+                    <Text size="xs" c="dimmed" mt={4}>
+                      {kpis.total} wagons on the register
+                    </Text>
+                    {statusMix.length === 0 ? (
+                      <Text size="sm" c="dimmed" py="lg" ta="center">
+                        No wagons registered.
+                      </Text>
+                    ) : (
+                      <>
+                        <Progress.Root size="lg" radius="xl" mt="md" mb="md">
+                          {statusMix.map((s) => (
+                            <Progress.Section
+                              key={s.status}
+                              value={s.pct}
+                              color={s.color}
+                            />
+                          ))}
+                        </Progress.Root>
+                        <Stack gap={9}>
+                          {statusMix.map((s) => (
+                            <Group
+                              key={s.status}
+                              justify="space-between"
+                              gap="sm"
+                            >
+                              <Group gap={9} wrap="nowrap">
+                                <Box
+                                  w={9}
+                                  h={9}
+                                  style={{
+                                    borderRadius: 3,
+                                    background: `var(--mantine-color-${s.color}-6)`,
+                                  }}
+                                />
+                                <Text size="sm">{s.label}</Text>
+                              </Group>
+                              <Group gap="sm">
+                                <Text size="sm" fw={700}>
+                                  {s.count}
+                                </Text>
+                                <Text size="xs" c="dimmed" w={34} ta="right">
+                                  {s.pct}%
+                                </Text>
+                              </Group>
+                            </Group>
+                          ))}
+                        </Stack>
+                      </>
+                    )}
+                  </Card>
+
+                  <Card withBorder radius="md" padding="md">
+                    <Group justify="space-between" wrap="nowrap">
+                      <Text fw={600}>Idle-day distribution</Text>
+                      <SectionExportButton
+                        label="idle distribution"
+                        onExport={exportIdleDistribution}
+                      />
+                    </Group>
+                    <Text size="xs" c="dimmed" mt={4}>
+                      Wagons by days without movement in their current yard
+                    </Text>
+                    <Group
+                      align="flex-end"
+                      gap="md"
+                      h={170}
+                      mt="lg"
+                      wrap="nowrap"
+                    >
+                      {idleDistribution.map((b) => (
+                        <Stack
+                          key={b.label}
+                          gap={6}
+                          align="center"
+                          justify="flex-end"
+                          h="100%"
+                          style={{ flex: 1 }}
+                        >
+                          <Text
+                            size="xs"
+                            fw={700}
+                            c={
+                              b.tone === "red"
+                                ? "red"
+                                : b.tone === "yellow"
+                                  ? "yellow.8"
+                                  : undefined
+                            }
+                          >
+                            {b.count}
+                          </Text>
+                          <Box
+                            w="100%"
+                            h={`${Math.max(3, b.pct)}%`}
+                            style={{
+                              background: `var(--mantine-color-${b.tone}-6)`,
+                              borderRadius: "5px 5px 0 0",
+                              minHeight: 3,
+                            }}
+                          />
+                          <Text
+                            size="xs"
+                            c="dimmed"
+                            style={{ whiteSpace: "nowrap" }}
+                          >
+                            {b.label}
+                          </Text>
+                        </Stack>
+                      ))}
+                    </Group>
+                    <Text
+                      size="xs"
+                      c="dimmed"
+                      mt="md"
+                      pt="sm"
+                      style={{
+                        borderTop:
+                          "1px solid var(--mantine-color-edr-divider-0)",
+                      }}
+                    >
+                      <strong>{kpis.stranded}</strong> wagons have sat over{" "}
+                      {IDLE_THRESHOLD_DAYS} days
+                      {kpis.total > 0
+                        ? ` — ${Math.round((kpis.stranded / kpis.total) * 100)}% of the fleet locked up`
+                        : ""}
+                      .
+                    </Text>
+                  </Card>
+                </SimpleGrid>
+
+                {/* ── Leaderboards ─────────────────────────────── */}
+                <Group justify="space-between" wrap="nowrap">
+                  <Text fw={600}>Leaderboards</Text>
+                  <SectionExportButton
+                    label="leaderboards"
+                    onExport={exportLeaderboards}
+                  />
+                </Group>
+                <SimpleGrid cols={{ base: 1, lg: 3 }} spacing="md">
+                  <Leaderboard
+                    title="Hardest working"
+                    subtitle={`Most loads, ${windowLabel}`}
+                    accent="edr-green"
+                    rows={boards.hardest}
+                    onOpen={openWagon}
+                  />
+                  <Leaderboard
+                    title="Longest stranded"
+                    subtitle="Days without a move in the current yard"
+                    accent="red"
+                    rows={boards.stranded}
+                    onOpen={openWagon}
+                  />
+                  <Leaderboard
+                    title="Not moving at all"
+                    subtitle={`No movement in the ${windowLabel}`}
+                    accent="yellow"
+                    rows={boards.idle}
+                    onOpen={openWagon}
+                  />
+                </SimpleGrid>
+
+                {/* ── By yard ──────────────────────────────────── */}
+                <Card withBorder radius="md" padding={0}>
+                  <Box p="md">
+                    <Group justify="space-between" wrap="nowrap">
+                      <Text fw={600}>By yard</Text>
+                      <SectionExportButton
+                        label="by-yard"
+                        onExport={exportByYard}
+                      />
+                    </Group>
+                    <Text size="xs" c="dimmed" mt={4}>
+                      Where the fleet is parked and how long it stays
+                    </Text>
+                  </Box>
+                  {byYard.length === 0 ? (
+                    <Text size="sm" c="dimmed" py="lg" ta="center">
+                      No wagons to group.
+                    </Text>
+                  ) : (
+                    <Table.ScrollContainer minWidth={640}>
+                      <Table verticalSpacing="sm" horizontalSpacing="md">
+                        <Table.Thead>
+                          <Table.Tr>
+                            <Table.Th>Yard</Table.Th>
+                            <Table.Th w={110} ta="right">
+                              Wagons
+                            </Table.Th>
+                            <Table.Th w={130} ta="right">
+                              Mean idle
+                            </Table.Th>
+                            <Table.Th w={130} ta="right">
+                              Over {IDLE_THRESHOLD_DAYS}d
+                            </Table.Th>
+                          </Table.Tr>
+                        </Table.Thead>
+                        <Table.Tbody>
+                          {byYard.map((y) => (
+                            <Table.Tr key={y.label}>
+                              <Table.Td>
+                                <Text size="sm" fw={600}>
+                                  {y.label}
+                                </Text>
+                              </Table.Td>
+                              <Table.Td ta="right">
+                                <Text size="sm" fw={600}>
+                                  {y.wagons}
+                                </Text>
+                              </Table.Td>
+                              <Table.Td ta="right">
+                                <Text
+                                  size="sm"
+                                  fw={700}
+                                  c={
+                                    y.meanIdle == null
+                                      ? "dimmed"
+                                      : y.meanIdle > IDLE_THRESHOLD_DAYS
+                                        ? "red"
+                                        : y.meanIdle > 10
+                                          ? "yellow.8"
+                                          : undefined
+                                  }
+                                >
+                                  {y.meanIdle == null ? "—" : `${y.meanIdle} d`}
+                                </Text>
+                              </Table.Td>
+                              <Table.Td ta="right">
+                                <Badge
+                                  size="sm"
+                                  variant="light"
+                                  color={y.over > 0 ? "red" : "edr-green"}
+                                >
+                                  {y.over}
+                                </Badge>
+                              </Table.Td>
+                            </Table.Tr>
+                          ))}
+                        </Table.Tbody>
+                      </Table>
+                    </Table.ScrollContainer>
+                  )}
+                </Card>
+
+                {/* ── By wagon type ────────────────────────────── */}
+                <Card withBorder radius="md" padding={0}>
+                  <Group p="md" justify="space-between" wrap="wrap" gap="sm">
+                    <div>
+                      <Text fw={600}>By wagon type</Text>
+                      <Text size="xs" c="dimmed" mt={4}>
+                        Where each class of stock is earning, and where it is
+                        stuck
+                      </Text>
+                    </div>
+                    <Group gap="md">
+                      <Group gap={6}>
+                        <Box
+                          w={11}
+                          h={5}
+                          style={{
+                            borderRadius: 2,
+                            background: "var(--mantine-color-edr-green-6)",
+                          }}
+                        />
+                        <Text size="xs" c="dimmed">
+                          Loaded
+                        </Text>
+                      </Group>
+                      <Group gap={6}>
+                        <Box
+                          w={11}
+                          h={5}
+                          style={{
+                            borderRadius: 2,
+                            background: "var(--mantine-color-teal-4)",
+                          }}
+                        />
+                        <Text size="xs" c="dimmed">
+                          Empty
+                        </Text>
+                      </Group>
+                      <SectionExportButton
+                        label="by-type"
+                        onExport={exportByType}
+                      />
+                    </Group>
+                  </Group>
+                  {byType.length === 0 ? (
+                    <Text size="sm" c="dimmed" py="lg" ta="center">
+                      No wagon types to group.
+                    </Text>
+                  ) : (
+                    <Table.ScrollContainer minWidth={860}>
+                      <Table verticalSpacing="sm" horizontalSpacing="md">
+                        <Table.Thead>
+                          <Table.Tr>
+                            <Table.Th w={180}>Type</Table.Th>
+                            <Table.Th w={90} ta="right">
+                              Count
+                            </Table.Th>
+                            <Table.Th w={110} ta="right">
+                              In service
+                            </Table.Th>
+                            <Table.Th w={210}>Move mix</Table.Th>
+                            <Table.Th w={100} ta="right">
+                              Loads
+                            </Table.Th>
+                            <Table.Th w={100} ta="right">
+                              Moves
+                            </Table.Th>
+                            <Table.Th w={110} ta="right">
+                              Mean idle
+                            </Table.Th>
+                          </Table.Tr>
+                        </Table.Thead>
+                        <Table.Tbody>
+                          {byType.map((t) => (
+                            <Table.Tr key={t.code}>
+                              <Table.Td>
+                                <Text size="sm" fw={600}>
+                                  {t.code}
+                                </Text>
+                                <Text size="xs" c="dimmed">
+                                  {t.name}
+                                </Text>
+                              </Table.Td>
+                              <Table.Td ta="right">
+                                <Text size="sm" fw={600}>
+                                  {t.count}
+                                </Text>
+                              </Table.Td>
+                              <Table.Td ta="right">
+                                <Text size="sm" fw={600}>
+                                  {t.inService}
+                                </Text>
+                              </Table.Td>
+                              <Table.Td>
+                                <Group gap="sm" wrap="nowrap">
+                                  <Progress.Root
+                                    size="sm"
+                                    radius="xl"
+                                    style={{ flex: 1 }}
+                                  >
+                                    <Progress.Section
+                                      value={t.loadedPct}
+                                      color="edr-green"
+                                    />
+                                    <Progress.Section
+                                      value={t.emptyPct}
+                                      color="teal.4"
+                                    />
+                                  </Progress.Root>
+                                  <Text size="xs" fw={600} w={34} ta="right">
+                                    {t.loadedPct}%
+                                  </Text>
+                                </Group>
+                              </Table.Td>
+                              <Table.Td ta="right">
+                                <Text size="sm" fw={600}>
+                                  {t.loads}
+                                </Text>
+                              </Table.Td>
+                              <Table.Td ta="right">
+                                <Text size="sm" fw={600}>
+                                  {t.moves}
+                                </Text>
+                              </Table.Td>
+                              <Table.Td ta="right">
+                                <Text
+                                  size="sm"
+                                  fw={700}
+                                  c={
+                                    t.meanIdle == null
+                                      ? "dimmed"
+                                      : t.meanIdle > IDLE_THRESHOLD_DAYS
+                                        ? "red"
+                                        : undefined
+                                  }
+                                >
+                                  {t.meanIdle == null ? "—" : `${t.meanIdle} d`}
+                                </Text>
+                              </Table.Td>
+                            </Table.Tr>
+                          ))}
+                        </Table.Tbody>
+                      </Table>
+                    </Table.ScrollContainer>
+                  )}
+                </Card>
+              </Stack>
+            </Tabs.Panel>
+
+            <Tabs.Panel value="wagons" pt="lg">
+              {/* ── Per-wagon table ──────────────────────────── */}
+              <Card withBorder radius="md" padding={0}>
+                <Group
+                  p="md"
+                  gap="md"
+                  wrap="wrap"
+                  style={{
+                    borderBottom: "1px solid var(--mantine-color-edr-border-0)",
+                  }}
+                >
+                  <TextInput
+                    placeholder="Search wagon number, type or yard…"
+                    leftSection={<Search size={15} />}
+                    value={search}
+                    onChange={(e) => {
+                      setSearch(e.currentTarget.value);
+                      setPage(1);
+                    }}
+                    style={{ flex: 1, minWidth: 220 }}
+                  />
+                  <SegmentedControl
+                    size="xs"
+                    value={status}
+                    onChange={(v) => {
+                      setStatus(v);
+                      setPage(1);
+                    }}
+                    data={STATUS_TABS}
+                  />
+                  <Select
+                    placeholder="All yards"
+                    data={yardOptions}
+                    value={yardId}
+                    onChange={(v) => {
+                      setYardId(v);
+                      setPage(1);
+                    }}
+                    clearable
+                    leftSection={<MapPin size={15} />}
+                    w={190}
+                  />
+                  <SectionExportButton
+                    label="wagon list"
+                    onExport={exportWagons}
+                  />
+                </Group>
+
+                <Group
+                  px="md"
+                  py="xs"
+                  justify="space-between"
+                  gap="sm"
+                  wrap="wrap"
+                >
+                  <Text size="sm" c="dimmed">
+                    Showing <strong>{pageRows.length}</strong> of{" "}
+                    <strong>{rows.length}</strong>{" "}
+                    {rows.length === 1 ? "wagon" : "wagons"}
+                    {rows.length !== wagons.length
+                      ? ` (${wagons.length} in the fleet)`
+                      : ""}
+                  </Text>
+                  <Text size="sm" c="dimmed">
+                    Counts cover the {windowLabel}
+                  </Text>
+                </Group>
+
+                {rows.length === 0 ? (
+                  <Text size="sm" c="dimmed" py="xl" ta="center">
+                    No wagons match these filters.
+                  </Text>
+                ) : (
+                  <Table.ScrollContainer minWidth={1180}>
+                    <Table
+                      verticalSpacing="sm"
+                      horizontalSpacing="md"
+                      highlightOnHover
+                    >
+                      <Table.Thead>
+                        <Table.Tr>
+                          <Table.Th w={150}>
+                            <SortHeader
+                              label="Wagon"
+                              active={sort === "wagonNumber"}
+                              desc={desc}
+                              onClick={() => toggleSort("wagonNumber")}
+                            />
+                          </Table.Th>
+                          <Table.Th w={130}>Type</Table.Th>
+                          <Table.Th w={130}>Status</Table.Th>
+                          <Table.Th w={160}>Current yard</Table.Th>
+                          <Table.Th w={140}>
+                            <SortHeader
+                              label="Idle days"
+                              active={sort === "idleDays"}
+                              desc={desc}
+                              onClick={() => toggleSort("idleDays")}
+                            />
+                          </Table.Th>
+                          <Table.Th w={115}>
+                            <SortHeader
+                              label="Days down"
+                              active={sort === "downDays"}
+                              desc={desc}
+                              onClick={() => toggleSort("downDays")}
+                            />
+                          </Table.Th>
+                          <Table.Th w={95}>
+                            <SortHeader
+                              label="Loads"
+                              active={sort === "loads"}
+                              desc={desc}
+                              onClick={() => toggleSort("loads")}
+                              align="right"
+                            />
+                          </Table.Th>
+                          <Table.Th w={95}>
+                            <SortHeader
+                              label="Moves"
+                              active={sort === "moves"}
+                              desc={desc}
+                              onClick={() => toggleSort("moves")}
+                              align="right"
+                            />
+                          </Table.Th>
+                          <Table.Th w={165}>
+                            <SortHeader
+                              label="Loaded share"
+                              active={sort === "share"}
+                              desc={desc}
+                              onClick={() => toggleSort("share")}
+                              align="right"
+                            />
+                          </Table.Th>
+                          <Table.Th w={44} />
+                        </Table.Tr>
+                      </Table.Thead>
+                      <Table.Tbody>
+                        {pageRows.map((w) => {
+                          const idle = daysSince(w.lastMovedAt);
+                          const band = idleBand(idle);
+                          const down = isOffRoster(w.status)
+                            ? daysSince(w.lastMaintenanceAt)
+                            : null;
+                          const loads = w.loadsInWindow ?? 0;
+                          const moves = w.movesInWindow ?? 0;
+                          const share =
+                            moves > 0
+                              ? Math.round((loads / moves) * 100)
+                              : null;
+                          const yard = w.currentYard;
+                          return (
+                            <Table.Tr
+                              key={w.id}
+                              style={{ cursor: "pointer" }}
+                              onClick={() => openWagon(w.id)}
+                            >
+                              <Table.Td>
+                                <Group gap="sm" wrap="nowrap">
+                                  <Box
+                                    w={3}
+                                    h={26}
+                                    style={{
+                                      borderRadius: 2,
+                                      background:
+                                        band === "stranded"
+                                          ? "var(--mantine-color-red-6)"
+                                          : band === "watch"
+                                            ? "var(--mantine-color-yellow-6)"
+                                            : "var(--mantine-color-edr-green-5)",
+                                    }}
+                                  />
+                                  <div>
+                                    <Text size="sm" fw={600}>
+                                      {w.wagonNumber}
+                                    </Text>
+                                    {w.exportTrainNumber ||
+                                    w.importTrainNumber ? (
+                                      <Text size="xs" c="dimmed">
+                                        Run{" "}
+                                        {[
+                                          w.exportTrainNumber,
+                                          w.importTrainNumber,
+                                        ]
+                                          .filter(Boolean)
+                                          .join(" / ")}
+                                      </Text>
+                                    ) : null}
+                                  </div>
+                                </Group>
+                              </Table.Td>
+                              <Table.Td>
+                                <Text size="sm">
+                                  {w.wagonType?.code ?? "—"}
+                                </Text>
+                                {w.wagonType?.capacityTons != null ? (
+                                  <Text size="xs" c="dimmed">
+                                    {w.wagonType.capacityTons} t
+                                  </Text>
+                                ) : null}
+                              </Table.Td>
+                              <Table.Td>
+                                <Badge
+                                  size="sm"
+                                  variant="light"
+                                  color={statusColor(w.status)}
+                                >
+                                  {humanize(w.status)}
+                                </Badge>
+                              </Table.Td>
+                              <Table.Td>
+                                <Text size="sm">
+                                  {yard?.label ?? yard?.code ?? "—"}
+                                </Text>
+                              </Table.Td>
+                              <Table.Td>
+                                {idle == null ? (
+                                  <Tooltip label="No movement recorded for this wagon yet">
+                                    <Text size="sm" c="dimmed">
+                                      —
+                                    </Text>
+                                  </Tooltip>
+                                ) : (
+                                  <Group gap={8} wrap="nowrap">
+                                    <Text
+                                      size="sm"
+                                      fw={700}
+                                      c={
+                                        band === "stranded"
+                                          ? "red"
+                                          : band === "watch"
+                                            ? "yellow.8"
+                                            : undefined
+                                      }
+                                    >
+                                      {idle}
+                                    </Text>
+                                    {band === "stranded" || band === "watch" ? (
+                                      <Badge
+                                        size="xs"
+                                        variant="light"
+                                        color={
+                                          band === "stranded" ? "red" : "yellow"
+                                        }
+                                      >
+                                        {band === "stranded"
+                                          ? "Stranded"
+                                          : "Watch"}
+                                      </Badge>
+                                    ) : null}
+                                  </Group>
+                                )}
+                              </Table.Td>
+                              <Table.Td>
+                                {down == null ? (
+                                  <Text size="sm" c="dimmed">
+                                    —
+                                  </Text>
+                                ) : (
+                                  <Tooltip
+                                    label={`Since ${formatDate(w.lastMaintenanceAt)}`}
+                                  >
+                                    <Text
+                                      size="sm"
+                                      fw={700}
+                                      c={
+                                        down > DOWN_THRESHOLD_DAYS
+                                          ? "red"
+                                          : "yellow.8"
+                                      }
+                                    >
+                                      {down}
+                                    </Text>
+                                  </Tooltip>
+                                )}
+                              </Table.Td>
+                              <Table.Td ta="right">
+                                <Text
+                                  size="sm"
+                                  fw={600}
+                                  c={loads === 0 ? "red" : undefined}
+                                >
+                                  {loads}
+                                </Text>
+                              </Table.Td>
+                              <Table.Td ta="right">
+                                <Text size="sm" fw={600}>
+                                  {moves}
+                                </Text>
+                              </Table.Td>
+                              <Table.Td>
+                                {share == null ? (
+                                  <Text size="sm" c="dimmed" ta="right">
+                                    —
+                                  </Text>
+                                ) : (
+                                  <Group
+                                    gap="sm"
+                                    justify="flex-end"
+                                    wrap="nowrap"
+                                  >
+                                    <Progress
+                                      value={share}
+                                      size="sm"
+                                      radius="xl"
+                                      color={
+                                        share >= 60
+                                          ? "edr-green"
+                                          : share >= 35
+                                            ? "yellow"
+                                            : "red"
+                                      }
+                                      w={72}
+                                    />
+                                    <Text size="sm" fw={600} w={38} ta="right">
+                                      {share}%
+                                    </Text>
+                                  </Group>
+                                )}
+                              </Table.Td>
+                              <Table.Td>
+                                <ChevronRight
+                                  size={16}
+                                  color="var(--mantine-color-edr-muted-5)"
+                                />
+                              </Table.Td>
+                            </Table.Tr>
+                          );
+                        })}
+                      </Table.Tbody>
+                    </Table>
+                  </Table.ScrollContainer>
+                )}
+
+                {pageCount > 1 ? (
+                  <Group justify="flex-end" p="md">
+                    <Pagination
+                      size="sm"
+                      value={current}
+                      onChange={setPage}
+                      total={pageCount}
+                    />
+                  </Group>
+                ) : null}
+              </Card>
+            </Tabs.Panel>
+          </Tabs>
+        </Stack>
+      )}
+    </Container>
+  );
+};
+
+export default WagonPerformancePage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/wagon-performance/exportSection.ts b/apps/edr-freight-web/backoffice/src/pages/wagon-performance/exportSection.ts
new file mode 100644
index 000000000..fef95e063
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/wagon-performance/exportSection.ts
@@ -0,0 +1,80 @@
+import * as XLSX from "xlsx";
+
+/**
+ * Excel download for one section of the wagon performance report.
+ *
+ * Each section on the page exports exactly what is on screen — the same rows,
+ * in the same order, honouring the same filters and date window — so a figure
+ * in the spreadsheet always reconciles with the figure the CEO just read.
+ *
+ * Built client-side from data already in the browser: the report holds the
+ * whole fleet in memory (see WagonPerformancePage), so there is nothing to
+ * re-fetch and no server round-trip.
+ */
+
+/** A sheet's worth of rows: ordered column headers plus plain-value records. */
+export interface SheetSpec {
+  /** Sheet tab name. Excel caps these at 31 chars and forbids : \ / ? * [ ]. */
+  name: string;
+  rows: Array<Record<string, string | number | null>>;
+}
+
+/** Excel rejects these in a sheet name, and silently truncates past 31 chars. */
+const safeSheetName = (name: string): string =>
+  name.replace(/[:\\/?*[\]]/g, "-").slice(0, 31) || "Sheet1";
+
+/** Widen each column to its longest cell, so nothing opens as ####. */
+function fitColumns(
+  rows: Array<Record<string, unknown>>,
+): Array<{ wch: number }> {
+  const headers = Object.keys(rows[0] ?? {});
+  return headers.map((h) => {
+    const longest = rows.reduce((max, row) => {
+      const cell = row[h];
+      const len = cell == null ? 0 : String(cell).length;
+      return len > max ? len : max;
+    }, h.length);
+    // Cap the width so one long note cannot push a column off the screen.
+    return { wch: Math.min(Math.max(longest + 2, 10), 60) };
+  });
+}
+
+/** Timestamp suffix so repeated downloads don't overwrite each other. */
+const stamp = (): string => {
+  const d = new Date();
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}-${pad(d.getHours())}${pad(d.getMinutes())}`;
+};
+
+/**
+ * Download one or more sheets as a single .xlsx.
+ *
+ * `filenameBase` gets the timestamp and extension appended. Sheets with no
+ * rows are skipped; if that leaves nothing, the download is skipped entirely
+ * and the function returns false so the caller can say so.
+ */
+export function downloadSheets(
+  filenameBase: string,
+  sheets: SheetSpec[],
+): boolean {
+  const populated = sheets.filter((s) => s.rows.length > 0);
+  if (!populated.length) return false;
+
+  const workbook = XLSX.utils.book_new();
+  for (const spec of populated) {
+    const sheet = XLSX.utils.json_to_sheet(spec.rows);
+    sheet["!cols"] = fitColumns(spec.rows);
+    XLSX.utils.book_append_sheet(workbook, sheet, safeSheetName(spec.name));
+  }
+  XLSX.writeFile(workbook, `${filenameBase}-${stamp()}.xlsx`);
+  return true;
+}
+
+/** Single-sheet convenience wrapper — the shape most sections need. */
+export function downloadSheet(
+  filenameBase: string,
+  sheetName: string,
+  rows: Array<Record<string, string | number | null>>,
+): boolean {
+  return downloadSheets(filenameBase, [{ name: sheetName, rows }]);
+}
diff --git a/apps/edr-freight-web/backoffice/src/pages/wagon-performance/wagonPerformance.ts b/apps/edr-freight-web/backoffice/src/pages/wagon-performance/wagonPerformance.ts
new file mode 100644
index 000000000..393445c12
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/wagon-performance/wagonPerformance.ts
@@ -0,0 +1,237 @@
+/**
+ * Derived wagon performance figures for the CEO's wagon report.
+ *
+ * Nothing here is stored: every number is computed in the browser from the
+ * ledgers the API already returns — `wagon_movements` (relocations),
+ * `wagon_status_logs` (roster flips) and `wagon_events` (unified history).
+ * Keeping the derivation in one place means the report and the wagon record
+ * can never disagree about what "idle" or "utilisation" means.
+ *
+ * This report is READ-ONLY and lives beside the Overview dashboard. It does
+ * not replace the Fleet Management wagons desk, which owns wagon CRUD.
+ */
+import { Freight } from "@edr/types";
+
+import type {
+  Wagon,
+  WagonMovementRecord,
+  WagonStatusLog,
+} from "@/services/wagon.service";
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+/** Days past which a parked wagon is treated as stranded. */
+export const IDLE_THRESHOLD_DAYS = 21;
+
+/** Days off the roster past which a repair is treated as overdue. */
+export const DOWN_THRESHOLD_DAYS = 30;
+
+/** Statuses that take a wagon off the earning roster. */
+export const OFF_ROSTER_STATUSES: Freight.WagonStatus[] = [
+  Freight.WagonStatus.Maintenance,
+  Freight.WagonStatus.Detained,
+  Freight.WagonStatus.OutOfService,
+];
+
+export const isOffRoster = (status: Freight.WagonStatus): boolean =>
+  OFF_ROSTER_STATUSES.includes(status);
+
+/** Whole days between `iso` and now; null when the timestamp is missing. */
+export function daysSince(iso: string | null | undefined): number | null {
+  if (!iso) return null;
+  const t = new Date(iso).getTime();
+  if (Number.isNaN(t)) return null;
+  return Math.max(0, Math.floor((Date.now() - t) / DAY_MS));
+}
+
+/** Fractional days between two timestamps; `to` null means "still open". */
+export function daysBetween(
+  from: string | null | undefined,
+  to: string | null | undefined,
+): number | null {
+  if (!from) return null;
+  const a = new Date(from).getTime();
+  if (Number.isNaN(a)) return null;
+  const b = to ? new Date(to).getTime() : Date.now();
+  if (Number.isNaN(b)) return null;
+  return Math.max(0, (b - a) / DAY_MS);
+}
+
+export interface WagonPerformance {
+  /** Days since the wagon last arrived anywhere — the idle clock. */
+  idleDays: number | null;
+  /** Days in the current off-roster spell; null while in service. */
+  downDays: number | null;
+  loads: number;
+  moves: number;
+  emptyMoves: number;
+  manualMoves: number;
+  /** Share of moves that carried cargo, 0–100; null when nothing moved. */
+  loadedShare: number | null;
+  lastMovement: WagonMovementRecord | null;
+  /** Off-roster spells overlapping the window. */
+  spells: number;
+  /** Days off roster inside the window. */
+  downDaysInWindow: number;
+  /** Share of the window spent on the roster, 0–100. */
+  availability: number;
+}
+
+/**
+ * Roll one wagon's ledgers up into the figures the report shows.
+ *
+ * `windowDays` bounds loads, moves and downtime. Idle days and the current
+ * down spell are "how long has this been true right now" — never windowed.
+ */
+export function computeWagonPerformance(
+  wagon: Pick<Wagon, "status" | "lastMaintenanceAt" | "lastAvailableAt">,
+  movements: WagonMovementRecord[],
+  statusLogs: WagonStatusLog[],
+  windowDays: number,
+): WagonPerformance {
+  const since = Date.now() - windowDays * DAY_MS;
+
+  // Movements arrive newest-first from the API; don't rely on it.
+  const ordered = [...movements].sort(
+    (a, b) =>
+      new Date(b.occurredAt).getTime() - new Date(a.occurredAt).getTime(),
+  );
+  const lastMovement = ordered[0] ?? null;
+
+  const inWindow = ordered.filter((m) => {
+    const t = new Date(m.occurredAt).getTime();
+    return !Number.isNaN(t) && t >= since;
+  });
+
+  const loads = inWindow.filter(
+    (m) => m.kind === Freight.WagonMovementKind.Loaded,
+  ).length;
+  const emptyMoves = inWindow.filter(
+    (m) => m.kind === Freight.WagonMovementKind.EmptyReposition,
+  ).length;
+  const manualMoves = inWindow.filter(
+    (m) => m.kind === Freight.WagonMovementKind.Manual,
+  ).length;
+  const moves = inWindow.length;
+
+  const idleDays = daysSince(lastMovement?.occurredAt ?? null);
+
+  // Newest first, so a flip's "until" is the log entry before it in the array.
+  const logs = [...statusLogs].sort(
+    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+  );
+
+  let downDays: number | null = null;
+  if (isOffRoster(wagon.status)) {
+    const entered = logs.find((l) => l.toStatus === wagon.status);
+    downDays = daysSince(entered?.createdAt ?? wagon.lastMaintenanceAt ?? null);
+  }
+
+  // Downtime inside the window: walk each off-roster entry to the flip that
+  // ended it, clamping both ends to the window.
+  let downDaysInWindow = 0;
+  let spells = 0;
+  logs.forEach((log, i) => {
+    if (!isOffRoster(log.toStatus)) return;
+    const start = new Date(log.createdAt).getTime();
+    if (Number.isNaN(start)) return;
+    const closed = logs[i - 1];
+    const end = closed ? new Date(closed.createdAt).getTime() : Date.now();
+    const from = Math.max(start, since);
+    const to = Math.min(end, Date.now());
+    if (to <= from) return;
+    downDaysInWindow += (to - from) / DAY_MS;
+    spells += 1;
+  });
+
+  const availability =
+    windowDays > 0
+      ? Math.max(
+          0,
+          Math.min(
+            100,
+            Math.round(((windowDays - downDaysInWindow) / windowDays) * 100),
+          ),
+        )
+      : 100;
+
+  return {
+    idleDays,
+    downDays,
+    loads,
+    moves,
+    emptyMoves,
+    manualMoves,
+    loadedShare: moves > 0 ? Math.round((loads / moves) * 100) : null,
+    lastMovement,
+    spells,
+    downDaysInWindow: Math.round(downDaysInWindow),
+    availability,
+  };
+}
+
+/** Mantine colour per wagon status. */
+export function statusColor(status: Freight.WagonStatus): string {
+  switch (status) {
+    case Freight.WagonStatus.Available:
+      return "edr-green";
+    case Freight.WagonStatus.Assigned:
+    case Freight.WagonStatus.ImportReady:
+      return "blue";
+    case Freight.WagonStatus.ExportReady:
+      return "teal";
+    case Freight.WagonStatus.Maintenance:
+      return "yellow";
+    case Freight.WagonStatus.Detained:
+      return "red";
+    case Freight.WagonStatus.OutOfService:
+    default:
+      return "gray";
+  }
+}
+
+/** Mantine colour per movement kind. */
+export function movementKindColor(kind: Freight.WagonMovementKind): string {
+  switch (kind) {
+    case Freight.WagonMovementKind.Loaded:
+      return "edr-green";
+    case Freight.WagonMovementKind.EmptyReposition:
+      return "teal";
+    case Freight.WagonMovementKind.Maintenance:
+      return "yellow";
+    case Freight.WagonMovementKind.Manual:
+    default:
+      return "gray";
+  }
+}
+
+/** Mantine colour per history-event category. */
+export function eventCategoryColor(
+  category: Freight.WagonEventCategory,
+): string {
+  switch (category) {
+    case Freight.WagonEventCategory.Yard:
+      return "yellow";
+    case Freight.WagonEventCategory.Train:
+      return "blue";
+    case Freight.WagonEventCategory.Schedule:
+      return "indigo";
+    case Freight.WagonEventCategory.Cargo:
+      return "edr-green";
+    case Freight.WagonEventCategory.Status:
+      return "orange";
+    case Freight.WagonEventCategory.Lifecycle:
+    default:
+      return "gray";
+  }
+}
+
+/** Idle banding shared by the table and the distribution chart. */
+export function idleBand(
+  idleDays: number | null,
+): "ok" | "watch" | "stranded" | "unknown" {
+  if (idleDays == null) return "unknown";
+  if (idleDays > IDLE_THRESHOLD_DAYS) return "stranded";
+  if (idleDays > Math.round(IDLE_THRESHOLD_DAYS / 2)) return "watch";
+  return "ok";
+}
diff --git a/apps/edr-freight-web/backoffice/src/services/wagon.service.ts b/apps/edr-freight-web/backoffice/src/services/wagon.service.ts
index 4dd17aca1..a48c67310 100644
--- a/apps/edr-freight-web/backoffice/src/services/wagon.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/wagon.service.ts
@@ -29,6 +29,12 @@ export interface Wagon {
   /** Latest status-log flip to MAINTENANCE / to AVAILABLE (list endpoint only). */
   lastMaintenanceAt?: string | null;
   lastAvailableAt?: string | null;
+  /** Newest wagon_movements arrival — the idle clock's start (list endpoint only). */
+  lastMovedAt?: string | null;
+  /** Loaded / empty / total moves inside `statsWindowDays` (list endpoint only). */
+  loadsInWindow?: number;
+  movesInWindow?: number;
+  emptyMovesInWindow?: number;
   currentYardId: string | null;
   currentYard?: { id: string; label?: string; code?: string } | null;
   /** Odd EXPORT run (Ethiopia → Djibouti); null when the wagon is not on a run. */
@@ -55,6 +61,8 @@ export interface WagonListFilters {
    * the latest status-log flip to MAINTENANCE, not a stored column. */
   maintenanceFrom?: string;
   maintenanceTo?: string;
+  /** Window (days) the per-row load/move counts cover. Does not filter rows. */
+  statsWindowDays?: number;
   /** Only read by `getPaged`. */
   page?: number;
   pageSize?: number;
@@ -73,6 +81,8 @@ const wagonListQuery = (filters: WagonListFilters): string => {
   if (filters.createdTo) params.set('createdTo', filters.createdTo);
   if (filters.maintenanceFrom) params.set('maintenanceFrom', filters.maintenanceFrom);
   if (filters.maintenanceTo) params.set('maintenanceTo', filters.maintenanceTo);
+  if (filters.statsWindowDays)
+    params.set('statsWindowDays', String(filters.statsWindowDays));
   if (filters.page) params.set('page', String(filters.page));
   if (filters.pageSize) params.set('pageSize', String(filters.pageSize));
   const qs = params.toString();
@@ -101,6 +111,8 @@ export interface WagonMovementRecord {
   note: string | null;
   createdAt: string;
   wagon?: { id: string; wagonNumber?: string } | null;
+  /** The booking's human reference, joined at read time. Null when unloaded. */
+  bookingReference?: string | null;
 }
 
 /** One row of the wagon status audit trail. Returned newest first by the API. */