style: WIP ui updates

2026-08-26 18:42:49 +00:00 · 2026-06-22 07:44:03 +00:00
parent e6101c5514
commit 9a224e9baf
14 changed files with 515 additions and 565 deletions
--- a/apps/edr-freight-web/backoffice/src/components/bookings/detail/booking-detail.styles.ts
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/detail/booking-detail.styles.ts
@@ -55,7 +55,7 @@ export const detailStyles = {
 export function approvalStatusColor(status: string): string {
  switch (status) {
    case "APPROVED":
-      return "green";
+      return "edr-green";
    case "PENDING":
      return "yellow";
    case "REJECTED":
--- a/apps/edr-freight-web/backoffice/src/components/fleet/FleetToolbar.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/fleet/FleetToolbar.tsx
@@ -1,6 +1,6 @@
-import type { ReactNode } from "react";
-import { LayoutGrid, Plus, Search, Table2 } from "lucide-react";
 import { Box, Button, Group, SegmentedControl, TextInput } from "@mantine/core";
+import { LayoutGrid, Plus, Search, Table2 } from "lucide-react";
+import type { ReactNode } from "react";

 import type { FleetViewMode } from "./useFleetViewMode";

@@ -67,7 +67,6 @@ const FleetToolbar = ({
          onChange={(value) => onViewModeChange(value as FleetViewMode)}
          size="sm"
          radius="lg"
-          color="green"
          data={[
            {
              value: "table",
--- a/apps/edr-freight-web/backoffice/src/components/trainScheduling/ScheduleBookingsStep.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/ScheduleBookingsStep.tsx
@@ -1,4 +1,3 @@
-import { ArrowRight, Package, Train } from "lucide-react";
 import {
  Badge,
  Button,
@@ -8,6 +7,7 @@ import {
  Tabs,
  Text,
 } from "@mantine/core";
+import { ArrowRight, Package, Train } from "lucide-react";

 import type { EligibleContainerBooking, FreightType } from "@/types/trainScheduling";

--- a/apps/edr-freight-web/backoffice/src/components/trainScheduling/ScheduleStatusBadge.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/ScheduleStatusBadge.tsx
@@ -3,7 +3,7 @@ import { Badge } from "@mantine/core";
 const STATUS_COLORS: Record<string, string> = {
  DRAFT: "gray",
  SCHEDULED: "blue",
-  DISPATCHED: "green",
+  DISPATCHED: "edr-green",
  ARRIVED: "teal",
  CANCELLED: "red",
 };
@@ -34,7 +34,7 @@ export function SchedulingStatusBadge({ status }: { status?: string | null }) {
    HOLDING: "yellow",
    ELIGIBLE: "blue",
    SCHEDULED: "indigo",
-    DISPATCHED: "green",
+    DISPATCHED: "edr-green",
  };
  return (
    <Badge variant="light" color={colors[status] ?? "gray"} size="sm">
--- a/apps/edr-freight-web/backoffice/src/components/trainScheduling/scheduleVisuals.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/scheduleVisuals.tsx
@@ -32,7 +32,7 @@ const STATUS_META: Record<
  { color: string; dot: string; label?: string }
 > = {
  DRAFT: { color: "gray", dot: "var(--mantine-color-gray-5)" },
-  SCHEDULED: { color: "green", dot: freightBrand.primary },
+  SCHEDULED: { color: "edr-green", dot: freightBrand.primary },
  DISPATCHED: { color: "teal", dot: "var(--mantine-color-teal-6)" },
  ARRIVED: { color: "blue", dot: "var(--mantine-color-blue-6)" },
  CANCELLED: { color: "red", dot: "var(--mantine-color-red-6)" },
--- a/apps/edr-freight-web/backoffice/src/components/ui/Breadcrumbs.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/ui/Breadcrumbs.tsx
@@ -1,6 +1,6 @@
-import { Fragment } from "react";
+import { Anchor, Breadcrumbs as MantineBreadcrumbs, Text } from "@mantine/core";
+import { ChevronRight } from "lucide-react";
 import { Link } from "react-router-dom";
-import { ChevronRight, Home } from "lucide-react";

 export interface BreadcrumbItem {
  label: string;
@@ -12,45 +12,48 @@ export interface BreadcrumbsProps {
 }

 export default function Breadcrumbs({ items }: BreadcrumbsProps) {
-  return (
-    <nav
-      aria-label="Breadcrumb"
-      className="flex items-center text-sm text-slate-500"
-    >
-      <Link
-        to="/"
-        aria-label="Home"
-        className="flex items-center transition hover:text-[var(--freight-brand)]"
-      >
-        {/* <Home className="h-4 w-4" /> */}
-        Dashboard
-      </Link>
+  // The dashboard root is always the first crumb; callers pass only the trail
+  // beyond it.
+  const crumbs: BreadcrumbItem[] = [{ label: "Dashboard", href: "/" }, ...items];

-      {items.map((item, i) => {
-        const isLast = i === items.length - 1;
+  return (
+    <MantineBreadcrumbs
+      separator={<ChevronRight size={14} aria-hidden />}
+      separatorMargin="xs"
+      styles={{
+        root: { flexWrap: "wrap", rowGap: 4 },
+        separator: { color: "var(--mantine-color-edr-muted-5)" },
+      }}
+    >
+      {crumbs.map((item, index) => {
+        const isLast = index === crumbs.length - 1;
+
+        if (item.href && !isLast) {
+          return (
+            <Anchor
+              key={`${item.label}-${index}`}
+              component={Link}
+              to={item.href}
+              size="sm"
+              c="dimmed"
+            >
+              {item.label}
+            </Anchor>
+          );
+        }

        return (
-          <Fragment key={`${item.label}-${i}`}>
-            <ChevronRight className="mx-2 h-4 w-4 text-slate-300" />
-
-            {item.href && !isLast ? (
-              <Link
-                to={item.href}
-                className="transition hover:text-[var(--freight-brand)]"
-              >
-                {item.label}
-              </Link>
-            ) : (
-              <span
-                aria-current={isLast ? "page" : undefined}
-                className="font-medium text-slate-900"
-              >
-                {item.label}
-              </span>
-            )}
-          </Fragment>
+          <Text
+            key={`${item.label}-${index}`}
+            size="sm"
+            fw={isLast ? 600 : 400}
+            c={isLast ? "edr-text" : "dimmed"}
+            aria-current={isLast ? "page" : undefined}
+          >
+            {item.label}
+          </Text>
        );
      })}
-    </nav>
+    </MantineBreadcrumbs>
  );
 }
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx
@@ -12,6 +12,7 @@ import {
  Box,
 } from "@mantine/core";

+import { PageContainer } from "@/components/page";
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
 import { ApprovalStepsCard } from "@/components/bookings/ApprovalStepsCard";
 import { BookingActionsToolbar } from "@/components/bookings/BookingActionsToolbar";
@@ -61,7 +62,7 @@ export default function BookingRequestDetailPage() {

  if (isLoading) {
    return (
-      <Box style={detailStyles.page}>
+      <PageContainer>
        <Center mih="60vh">
          <Stack align="center" gap="md">
            <Loader color="gray" />
@@ -70,13 +71,13 @@ export default function BookingRequestDetailPage() {
            </Text>
          </Stack>
        </Center>
-      </Box>
+      </PageContainer>
    );
  }

  if (isError || !booking) {
    return (
-      <Box style={detailStyles.page}>
+      <PageContainer>
        <Container size="sm" py="xl">
          <Paper radius="md" withBorder p="xl" ta="center" style={detailStyles.card}>
            <Center>
@@ -111,7 +112,7 @@ export default function BookingRequestDetailPage() {
            </Button>
          </Paper>
        </Container>
-      </Box>
+      </PageContainer>
    );
  }

@@ -127,16 +128,15 @@ export default function BookingRequestDetailPage() {
    booking.status === "APPROVED_PENDING_SIGNATURE";

  return (
-    <Box style={detailStyles.page}>
-      <Container size="xxl" py="lg">
-        <Breadcrumbs
-          items={[
-            { label: "Booking requests", href: "/dashboard/booking-requests" },
-            { label: booking.reference },
-          ]}
-        />
+    <PageContainer>
+      <Breadcrumbs
+        items={[
+          { label: "Booking requests", href: "/dashboard/booking-requests" },
+          { label: booking.reference },
+        ]}
+      />

-        <Stack gap="lg" mt="sm">
+      <Stack gap="lg">
          <BookingRequestHero
            booking={booking}
            customerLabel={row.customerLabel}
@@ -190,7 +190,7 @@ export default function BookingRequestDetailPage() {
                  {showContractButton && (
                    <Button
                      fullWidth
-                      color="green"
+                      color="edr-green"
                      leftSection={<FileSignature size={16} />}
                      onClick={() =>
                        navigate(`/dashboard/booking-requests/${booking.id}/contract`)
@@ -206,8 +206,7 @@ export default function BookingRequestDetailPage() {
              </Box>
            </Grid.Col>
          </Grid>
-        </Stack>
-      </Container>
-    </Box>
+      </Stack>
+    </PageContainer>
  );
 }
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
@@ -2,7 +2,6 @@ import { useCallback, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { ArrowRight, Calendar, Package, Search, User, X } from "lucide-react";
 import {
-  Container,
  Stack,
  Group,
  Text,
@@ -12,6 +11,7 @@ import {
  Tabs,
 } from "@mantine/core";

+import { PageContainer } from "@/components/page";
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
 import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
 import {
@@ -297,11 +297,10 @@ export default function BookingRequestsPage() {
  ];

  return (
-    <div style={{ background: "var(--mantine-color-gray-0)", minHeight: "100vh" }}>
-      <Container size="xxl" py="xl">
-        <Breadcrumbs items={[{ label: "Operations" }, { label: "Booking requests" }]} />
+    <PageContainer>
+      <Breadcrumbs items={[{ label: "Operations" }, { label: "Booking requests" }]} />

-        <Stack gap="lg" mt="md">
+      <Stack gap="lg">
          <BookingRequestsHeader
            metrics={metrics}
            tabs={tabCounts}
@@ -320,15 +319,7 @@ export default function BookingRequestsPage() {
            counts={tabCounts}
          />

-          <Card
-            p="md"
-            radius="lg"
-            withBorder
-            style={{
-              background: "white",
-              border: "1px solid var(--mantine-color-gray-2)",
-            }}
-          >
+          <Card p="md" radius="lg" withBorder>
            <Stack gap="md">
              <Group justify="space-between" gap="md" wrap="wrap">
                <TextInput
@@ -441,7 +432,6 @@ export default function BookingRequestsPage() {
            initialBookingIds={allocateIds}
          />
        ) : null}
-      </Container>
-    </div>
+    </PageContainer>
  );
 }
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx
@@ -3,6 +3,7 @@ import { Navigate, useLocation } from "react-router-dom";
 import type { ColumnDef } from "@edr/ui-common";
 import { Box, Button, Card, Group, Modal, Select, Stack, Text } from "@mantine/core";

+import { PageContainer } from "@/components/page";
 import FleetCardGrid from "@/components/fleet/FleetCardGrid";
 import FleetFormDialog from "@/components/fleet/FleetFormDialog";
 import FleetRecordActions from "@/components/fleet/FleetRecordActions";
@@ -291,8 +292,8 @@ const FleetResourcePage = () => {
  const itemLabel = config.label.toLowerCase();

  return (
-    <Stack gap="md">
-      <Card radius="lg" padding={0} withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
+    <PageContainer>
+      <Card radius="lg" padding={0} withBorder>
        <Stack gap={0}>
          <Box px="md" pt="md" pb="sm" w="100%">
            <FleetToolbar
@@ -435,7 +436,7 @@ const FleetResourcePage = () => {
          </Group>
        </Stack>
      </Modal>
-    </Stack>
+    </PageContainer>
  );
 };

--- a/apps/edr-freight-web/backoffice/src/pages/fleet/RoutesPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/fleet/RoutesPage.tsx
@@ -17,6 +17,7 @@ import {
  Tooltip,
 } from "@mantine/core";

+import { PageContainer } from "@/components/page";
 import FleetToolbar from "@/components/fleet/FleetToolbar";
 import { useFleetViewMode } from "@/components/fleet/useFleetViewMode";
 import RuleEngineListFooter from "@/components/ruleEngine/RuleEngineListFooter";
@@ -241,7 +242,7 @@ export default function RoutesPage() {
        header: "Status",
        meta: { headerClassName, cellClassName },
        cell: ({ row }) => (
-          <Badge color={row.original.isActive ? "green" : "gray"} variant="light" size="sm">
+          <Badge color={row.original.isActive ? "edr-green" : "gray"} variant="light" size="sm">
            {row.original.isActive ? "Active" : "Inactive"}
          </Badge>
        ),
@@ -279,8 +280,8 @@ export default function RoutesPage() {
  }, [deactivateMutation.isPending]);

  return (
-    <Stack gap="md">
-      <Card radius="lg" padding={0} withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
+    <PageContainer>
+      <Card radius="lg" padding={0} withBorder>
        <Stack gap={0}>
          <Box px="md" pt="md" pb="sm" w="100%">
            <FleetToolbar
@@ -338,7 +339,7 @@ export default function RoutesPage() {
                      <Stack gap="sm">
                        <Group justify="space-between">
                          <Text fw={600}>{route.name}</Text>
-                          <Badge color={route.isActive ? "green" : "gray"} variant="light" size="sm">
+                          <Badge color={route.isActive ? "edr-green" : "gray"} variant="light" size="sm">
                            {route.isActive ? "Active" : "Inactive"}
                          </Badge>
                        </Group>
@@ -431,7 +432,7 @@ export default function RoutesPage() {
              <Button variant="default" type="button" onClick={resetForm}>
                Cancel
              </Button>
-              <Button color="green" type="submit" loading={isSaving}>
+              <Button color="edr-green" type="submit" loading={isSaving}>
                Save
              </Button>
            </Group>
@@ -484,6 +485,6 @@ export default function RoutesPage() {
          </Stack>
        ) : null}
      </Modal>
-    </Stack>
+    </PageContainer>
  );
 }
--- a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchScheduleDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchScheduleDetailPage.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useMemo, useState } from "react";
-import type { ReactNode } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import {
  Accordion,
@@ -8,13 +7,10 @@ import {
  Badge,
  Box,
  Button,
-  Container,
  Group,
  Loader,
  Paper,
-  SimpleGrid,
  Stack,
-  Table,
  Tabs,
  Text,
  ThemeIcon,
@@ -41,8 +37,11 @@ import {
  Weight,
  XCircle,
 } from "lucide-react";
-import type { LucideIcon } from "lucide-react";

+import { DataTable, type ColumnDef } from "@edr/ui-common";
+
+import { KpiStrip, PageContainer } from "@/components/page";
+import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
 import { TrainCompositionDiagram } from "@/components/trainScheduling/TrainCompositionDiagram";
 import { TrainConsistView, CompositionBookingTabs } from "@/components/trainScheduling/compositionEditor";
@@ -52,8 +51,6 @@ import {
  totalBookingCount,
  WindowStatusPill,
 } from "@/components/trainScheduling/batchVisuals";
-import { MiniRing, MiniSparkline } from "@/components/common/MiniGraph";
-import type { OverviewAccent } from "@/components/overview/overview.styles";
 import { RouteCorridor } from "@/components/trainScheduling/scheduleVisuals";
 import {
  useBatchBoardDetail,
@@ -72,7 +69,7 @@ const STATE_META: Record<
  BatchBoardBookingState,
  { label: string; color: string; icon: typeof CheckCircle2 }
 > = {
-  ALLOCATED: { label: "Allocated", color: "green", icon: CheckCircle2 },
+  ALLOCATED: { label: "Allocated", color: "edr-green", icon: CheckCircle2 },
  SELECTED_FOR_BATCH: { label: "Selected for batch", color: "orange", icon: Clock },
  READY: { label: "Ready for batch", color: "teal", icon: Hourglass },
  WAITING: { label: "Paid · waiting", color: "blue", icon: Hourglass },
@@ -84,7 +81,7 @@ const ALLOC_META: Record<
  BookingAllocationStatus,
  { label: string; color: string }
 > = {
-  ASSIGNED: { label: "Wagons assigned", color: "green" },
+  ASSIGNED: { label: "Wagons assigned", color: "edr-green" },
  NOT_ATTEMPTED: { label: "Not allocated", color: "gray" },
  DEFERRED: { label: "Deferred", color: "orange" },
  FAILED: { label: "Allocation failed", color: "red" },
@@ -151,140 +148,153 @@ function AllocationBadge({
  );
 }

-function BookingTable({ bookings }: { bookings: BatchBoardBookingDetail[] }) {
-  if (!bookings.length) {
-    return (
-      <Text size="sm" c="dimmed" py="sm" ta="center">
-        No bookings in this batch window.
+const bookingCellMeta = {
+  headerClassName: ruleEngineTable.headerCell,
+  cellClassName: ruleEngineTable.bodyCell,
+};
+
+const BOOKING_COLUMNS: ColumnDef<BatchBoardBookingDetail>[] = [
+  {
+    id: "reference",
+    header: "Reference",
+    meta: bookingCellMeta,
+    cell: ({ row }) => {
+      const b = row.original;
+      return (
+        <Group gap={6} wrap="nowrap">
+          <Text size="sm" fw={700} c="dark.5">
+            {b.reference}
+          </Text>
+          {b.isGovernment ? (
+            <Badge size="xs" variant="light" color="grape">
+              Gov
+            </Badge>
+          ) : null}
+        </Group>
+      );
+    },
+  },
+  {
+    id: "customer",
+    header: "Customer",
+    meta: bookingCellMeta,
+    cell: ({ row }) => {
+      const b = row.original;
+      return (
+        <Group gap={8} wrap="nowrap">
+          <Box
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 26,
+              height: 26,
+              borderRadius: 8,
+              flexShrink: 0,
+              background: "#FEF1D5",
+              border: "1px solid #FBD171",
+            }}
+          >
+            <Text size="10px" fw={800} style={{ color: "#B26C09" }}>
+              {initials(b.company)}
+            </Text>
+          </Box>
+          <Text size="sm" c="gray.7" truncate>
+            {b.company}
+          </Text>
+        </Group>
+      );
+    },
+  },
+  {
+    id: "contractSigned",
+    header: "Contract signed",
+    meta: bookingCellMeta,
+    cell: ({ row }) => (
+      <Text size="sm" style={{ whiteSpace: "nowrap" }}>
+        {fmtDateTime(row.original.fullyExecutedAt)} EAT
      </Text>
-    );
-  }
-
-  const th = (label: string) => (
-    <Table.Th
-      style={{
-        fontSize: 11,
-        fontWeight: 700,
-        textTransform: "uppercase",
-        letterSpacing: 0.5,
-        color: "var(--mantine-color-gray-6)",
-        background: "var(--mantine-color-gray-0)",
-        whiteSpace: "nowrap",
-      }}
-    >
-      {label}
-    </Table.Th>
-  );
+    ),
+  },
+  {
+    id: "selectedForBatch",
+    header: "Selected for batch",
+    meta: bookingCellMeta,
+    cell: ({ row }) => {
+      const b = row.original;
+      if (!b.selectedForBatchAt) {
+        return (
+          <Text size="sm" c="dimmed">
+            —
+          </Text>
+        );
+      }
+      return (
+        <>
+          <Text size="sm" style={{ whiteSpace: "nowrap" }}>
+            {fmtDateTime(b.selectedForBatchAt)} EAT
+          </Text>
+          {b.paymentDeadline ? (
+            <Text size="xs" c="orange.7" fw={600} style={{ whiteSpace: "nowrap" }}>
+              Pay by {fmtDateTime(b.paymentDeadline)} EAT
+            </Text>
+          ) : null}
+        </>
+      );
+    },
+  },
+  {
+    id: "capacity",
+    header: "Capacity",
+    meta: bookingCellMeta,
+    cell: ({ row }) => {
+      const b = row.original;
+      return (
+        <Group gap={4} wrap="nowrap">
+          <Badge variant="default" radius="sm" size="sm">
+            {b.wagons}w
+          </Badge>
+          <Badge variant="default" radius="sm" size="sm">
+            {fmtTons(b.weightTons)}
+          </Badge>
+        </Group>
+      );
+    },
+  },
+  {
+    id: "state",
+    header: "Batch state",
+    meta: bookingCellMeta,
+    cell: ({ row }) => <StateBadge state={row.original.state} />,
+  },
+  {
+    id: "allocation",
+    header: "Wagon allocation",
+    meta: bookingCellMeta,
+    cell: ({ row }) => (
+      <AllocationBadge
+        status={row.original.allocationStatus}
+        issue={row.original.allocationIssue}
+      />
+    ),
+  },
+];

+function BookingTable({ bookings }: { bookings: BatchBoardBookingDetail[] }) {
  return (
-    <Box
-      style={{
-        border: "1px solid var(--mantine-color-gray-2)",
-        borderRadius: 12,
-        overflow: "auto",
-      }}
-    >
-      <Table highlightOnHover verticalSpacing="sm" horizontalSpacing="md" miw={760}>
-        <Table.Thead>
-          <Table.Tr>
-            {th("Reference")}
-            {th("Customer")}
-            {th("Contract signed")}
-            {th("Selected for batch")}
-            {th("Capacity")}
-            {th("Batch state")}
-            {th("Wagon allocation")}
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {bookings.map((b) => (
-            <Table.Tr key={b.id}>
-              <Table.Td>
-                <Group gap={6} wrap="nowrap">
-                  <Text size="sm" fw={700} c="dark.5">
-                    {b.reference}
-                  </Text>
-                  {b.isGovernment ? (
-                    <Badge size="xs" variant="light" color="grape">
-                      Gov
-                    </Badge>
-                  ) : null}
-                </Group>
-              </Table.Td>
-              <Table.Td>
-                <Group gap={8} wrap="nowrap">
-                  <Box
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      width: 26,
-                      height: 26,
-                      borderRadius: 8,
-                      flexShrink: 0,
-                      background: "#FEF1D5",
-                      border: "1px solid #FBD171",
-                    }}
-                  >
-                    <Text size="10px" fw={800} style={{ color: "#B26C09" }}>
-                      {initials(b.company)}
-                    </Text>
-                  </Box>
-                  <Text size="sm" c="gray.7" truncate>
-                    {b.company}
-                  </Text>
-                </Group>
-              </Table.Td>
-              <Table.Td>
-                <Text size="sm" style={{ whiteSpace: "nowrap" }}>
-                  {fmtDateTime(b.fullyExecutedAt)} EAT
-                </Text>
-              </Table.Td>
-              <Table.Td>
-                {b.selectedForBatchAt ? (
-                  <>
-                    <Text size="sm" style={{ whiteSpace: "nowrap" }}>
-                      {fmtDateTime(b.selectedForBatchAt)} EAT
-                    </Text>
-                    {b.paymentDeadline ? (
-                      <Text size="xs" c="orange.7" fw={600} style={{ whiteSpace: "nowrap" }}>
-                        Pay by {fmtDateTime(b.paymentDeadline)} EAT
-                      </Text>
-                    ) : null}
-                  </>
-                ) : (
-                  <Text size="sm" c="dimmed">
-                    —
-                  </Text>
-                )}
-              </Table.Td>
-              <Table.Td>
-                <Group gap={4} wrap="nowrap">
-                  <Badge variant="default" radius="sm" size="sm">
-                    {b.wagons}w
-                  </Badge>
-                  <Badge variant="default" radius="sm" size="sm">
-                    {fmtTons(b.weightTons)}
-                  </Badge>
-                </Group>
-              </Table.Td>
-              <Table.Td>
-                <StateBadge state={b.state} />
-              </Table.Td>
-              <Table.Td>
-                <AllocationBadge status={b.allocationStatus} issue={b.allocationIssue} />
-              </Table.Td>
-            </Table.Tr>
-          ))}
-        </Table.Tbody>
-      </Table>
-    </Box>
+    <DataTable
+      columns={BOOKING_COLUMNS}
+      data={bookings}
+      status="success"
+      emptyMessage="No bookings in this batch window."
+      containerClassName="overflow-x-auto rounded-lg border border-edr-border"
+    />
  );
 }

 function WindowCountChips({ counts }: { counts: BatchWindowGroup["counts"] }) {
  const chips: Array<{ value: number; color: string; label: string }> = [
-    { value: counts.allocated, color: "green", label: "allocated" },
+    { value: counts.allocated, color: "edr-green", label: "allocated" },
    { value: counts.selectedForBatch, color: "orange", label: "selected" },
    { value: counts.ready, color: "teal", label: "ready" },
    { value: counts.waiting, color: "blue", label: "waiting" },
@@ -415,66 +425,6 @@ function WindowAccordionItem({ window }: { window: BatchWindowGroup }) {
  );
 }

-/**
- * Light stat card matching the overview look — keeps the explicit numbers.
- * Capacity cards (pct set) show a ring; count cards show an area/line trend.
- */
-function StatCard({
-  icon: Icon,
-  label,
-  value,
-  sub,
-  pct,
-  variant = "area",
-}: {
-  icon: LucideIcon;
-  label: string;
-  value: ReactNode;
-  sub?: string;
-  pct?: number | null;
-  variant?: "area" | "line";
-}) {
-  const ringAccent: OverviewAccent =
-    pct == null ? "gold" : pct >= 100 ? "rose" : pct >= 85 ? "orange" : "gold";
-
-  return (
-    <Paper
-      p="md"
-      radius="lg"
-      withBorder
-      style={{ borderColor: "var(--mantine-color-gray-2)", background: "white" }}
-    >
-      <Stack gap={8}>
-        <Group gap="sm" wrap="nowrap" align="center">
-          <ThemeIcon size={38} radius="md" variant="light" color="#F2A516">
-            <Icon size={19} />
-          </ThemeIcon>
-          <Stack gap={1} style={{ minWidth: 0, flex: 1 }}>
-            <Text fw={800} size="lg" lh={1.05} c="dark.5" style={{ whiteSpace: "nowrap" }}>
-              {value}
-            </Text>
-            <Text size="xs" fw={600} c="dimmed" truncate>
-              {label}
-              {sub ? ` · ${sub}` : ""}
-            </Text>
-          </Stack>
-          {pct != null ? (
-            <MiniRing pct={pct} accent={ringAccent} size={42} stroke={5}>
-              <Text size="9px" fw={800} c="dark.4">
-                {Math.round(pct)}%
-              </Text>
-            </MiniRing>
-          ) : null}
-        </Group>
-
-        {pct == null ? (
-          <MiniSparkline variant={variant} accent="gold" baseline={0.5} seed={label} height={20} />
-        ) : null}
-      </Stack>
-    </Paper>
-  );
-}
-
 export default function BatchScheduleDetailPage() {
  const { scheduleId } = useParams<{ scheduleId: string }>();
  const navigate = useNavigate();
@@ -621,11 +571,11 @@ export default function BatchScheduleDetailPage() {

  if (isLoading || !data) {
    return (
-      <Container fluid py="lg" px="xl">
+      <PageContainer fluid>
        <Group justify="center" py="xl">
-          <Loader color="green" />
+          <Loader color="edr-green" />
        </Group>
-      </Container>
+      </PageContainer>
    );
  }

@@ -641,7 +591,7 @@ export default function BatchScheduleDetailPage() {
  const totalBookings = totalBookingCount(data.counts);

  return (
-    <Container fluid py="lg" px="xl">
+    <PageContainer fluid>
      <Breadcrumbs
        items={[
          { label: "Operations" },
@@ -650,7 +600,7 @@ export default function BatchScheduleDetailPage() {
        ]}
      />

-      <Tabs value={activeTab} onChange={setActiveTab} mt="md">
+      <Tabs value={activeTab} onChange={setActiveTab}>
        <Tabs.List>
          <Tabs.Tab value="overview">Overview</Tabs.Tab>
          <Tabs.Tab value="composition">
@@ -673,7 +623,7 @@ export default function BatchScheduleDetailPage() {
                >
                  Back
                </Button>
-                <Title order={2} fw={800} style={{ color: "#0f172a", letterSpacing: 0.2 }}>
+                <Title order={2} fw={800}>
                  {data.trainNumber ?? data.routeName ?? "Schedule"}
                </Title>
                <WindowStatusPill status={data.bookingWindowStatus} />
@@ -715,7 +665,7 @@ export default function BatchScheduleDetailPage() {
                Refresh
              </Button>
              <Button
-                color="green"
+                color="edr-green"
                radius="md"
                leftSection={<PlayCircle size={16} />}
                loading={runAllocation.isPending}
@@ -725,7 +675,7 @@ export default function BatchScheduleDetailPage() {
              </Button>
              <Button
                variant="light"
-                color="green"
+                color="edr-green"
                radius="md"
                leftSection={<Layers size={16} />}
                onClick={() =>
@@ -743,41 +693,36 @@ export default function BatchScheduleDetailPage() {
            </Alert>
          ) : null}

-          <SimpleGrid cols={{ base: 1, xs: 2, md: 4 }} spacing="md">
-            <StatCard
-              icon={Boxes}
-              label="Allocated wagons"
-              value={data.capacity.allocatedWagons}
-              sub="on this train"
-            />
-            <StatCard
-              icon={Ruler}
-              label="Train length"
-              value={
-                data.capacity.maxLengthMeters
+          <KpiStrip
+            items={[
+              {
+                label: "Allocated wagons",
+                value: data.capacity.allocatedWagons,
+                hint: "on this train",
+                icon: Boxes,
+              },
+              {
+                label: "Train length",
+                value: data.capacity.maxLengthMeters
                  ? `${fmtMeters(data.capacity.allocatedLengthMeters)} / ${fmtMeters(data.capacity.maxLengthMeters)}`
-                  : fmtMeters(data.capacity.allocatedLengthMeters)
-              }
-              pct={lengthPct}
-            />
-            <StatCard
-              icon={Weight}
-              label="Weight"
-              value={
-                data.capacity.maxWeightTons
+                  : fmtMeters(data.capacity.allocatedLengthMeters),
+                icon: Ruler,
+              },
+              {
+                label: "Weight",
+                value: data.capacity.maxWeightTons
                  ? `${fmtTons(data.capacity.usedWeightTons)} / ${fmtTons(data.capacity.maxWeightTons)}`
-                  : fmtTons(data.capacity.usedWeightTons)
-              }
-              pct={weightPct}
-            />
-            <StatCard
-              icon={Package}
-              label="Bookings"
-              value={totalBookings}
-              sub={`${data.counts.allocated} allocated · ${data.counts.expired} expired`}
-              variant="line"
-            />
-          </SimpleGrid>
+                  : fmtTons(data.capacity.usedWeightTons),
+                icon: Weight,
+              },
+              {
+                label: "Bookings",
+                value: totalBookings,
+                hint: `${data.counts.allocated} allocated · ${data.counts.expired} expired`,
+                icon: Package,
+              },
+            ]}
+          />

      {/* Booking pipeline */}
      <Paper
@@ -828,21 +773,9 @@ export default function BatchScheduleDetailPage() {
        style={{ borderColor: "var(--mantine-color-gray-2)" }}
      >
        <Group gap="sm" mb={4} wrap="nowrap" align="flex-start">
-          <Box
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: 38,
-              height: 38,
-              borderRadius: 10,
-              background: "linear-gradient(135deg, #FBD171, #F2A516)",
-              color: "white",
-              flexShrink: 0,
-            }}
-          >
+          <ThemeIcon size={38} radius="md" variant="light" color="#F2A516">
            <Clock size={19} />
-          </Box>
+          </ThemeIcon>
          <Box>
            <Title order={4}>Batch windows (EAT)</Title>
            <Text size="sm" c="dimmed">
@@ -1054,7 +987,7 @@ export default function BatchScheduleDetailPage() {
              style={{ borderColor: "var(--mantine-color-gray-2)" }}
            >
              <Group justify="center">
-                <Loader color="green" size="sm" />
+                <Loader color="edr-green" size="sm" />
                <Text size="sm" c="dimmed">
                  Loading train composition…
                </Text>
@@ -1063,6 +996,6 @@ export default function BatchScheduleDetailPage() {
          )}
        </Tabs.Panel>
      </Tabs>
-    </Container>
+    </PageContainer>
  );
 }
--- a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleTrackPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleTrackPage.tsx
@@ -24,6 +24,7 @@ import {
  Title,
 } from "@mantine/core";

+import { PageContainer } from "@/components/page";
 import { RouteCorridorTrack } from "@/components/trainScheduling/RouteCorridorTrack";
 import { RouteCorridor, StatusPill } from "@/components/trainScheduling/scheduleVisuals";
 import { freightBrand } from "@/theme/freight-brand";
@@ -62,7 +63,7 @@ function MetaStat({
 }) {
  return (
    <Group gap={8} wrap="nowrap" style={{ minWidth: 0 }}>
-      <ThemeIcon size={32} radius="md" variant="light" color="green">
+      <ThemeIcon size={32} radius="md" variant="light" color="edr-green">
        {icon}
      </ThemeIcon>
      <Stack gap={0} style={{ minWidth: 0 }}>
@@ -85,18 +86,22 @@ export default function TrainScheduleTrackPage() {

  if (trackQuery.isLoading) {
    return (
-      <Group justify="center" py="xl">
-        <Loader size="sm" color="green" />
-      </Group>
+      <PageContainer>
+        <Group justify="center" py="xl">
+          <Loader size="sm" color="edr-green" />
+        </Group>
+      </PageContainer>
    );
  }

  const track = trackQuery.data;
  if (!track || !scheduleId) {
    return (
-      <Text c="dimmed" py="xl">
-        Tracking data not found.
-      </Text>
+      <PageContainer>
+        <Text c="dimmed" py="xl">
+          Tracking data not found.
+        </Text>
+      </PageContainer>
    );
  }

@@ -130,7 +135,7 @@ export default function TrainScheduleTrackPage() {
  };

  return (
-    <Stack gap="md" px={{ base: "xs", sm: 0 }} py="md" maw={1080} mx="auto" w="100%">
+    <PageContainer>
      <Button
        component={Link}
        to={`/dashboard/operations/train-scheduling-v2/${scheduleId}`}
@@ -144,7 +149,7 @@ export default function TrainScheduleTrackPage() {
      </Button>

      {/* Header */}
-      <Paper radius="lg" withBorder p="lg" style={{ borderColor: "var(--mantine-color-gray-2)" }}>
+      <Paper radius="lg" withBorder p="lg">
        <Stack gap="lg">
          <Group justify="space-between" align="flex-start" wrap="wrap" gap="md">
            <Group gap="md" align="flex-start" wrap="nowrap" style={{ minWidth: 0 }}>
@@ -169,7 +174,7 @@ export default function TrainScheduleTrackPage() {
                    Train tracking
                  </Title>
                  {track.trainNumber ? (
-                    <Badge variant="light" color="green" radius="sm">
+                    <Badge variant="light" color="edr-green" radius="sm">
                      {track.trainNumber}
                    </Badge>
                  ) : null}
@@ -193,7 +198,7 @@ export default function TrainScheduleTrackPage() {
              <Text size="xs" fw={700} c="gray.7" tt="uppercase" style={{ letterSpacing: 0.4 }}>
                Journey progress
              </Text>
-              <Text size="xs" fw={700} c="green.8">
+              <Text size="xs" fw={700} c="edr-green.8">
                {reached} / {totalStations} stations · {Math.round(clampedPct)}%
              </Text>
            </Group>
@@ -201,7 +206,7 @@ export default function TrainScheduleTrackPage() {
              value={clampedPct}
              size="lg"
              radius="xl"
-              color="green"
+              color="edr-green"
              striped={track.status === "DISPATCHED"}
              animated={track.status === "DISPATCHED"}
            />
@@ -230,10 +235,10 @@ export default function TrainScheduleTrackPage() {
      </Paper>

      {/* Corridor */}
-      <Paper radius="lg" p="lg" withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
+      <Paper radius="lg" p="lg" withBorder>
        <Stack gap="md">
          <Group gap="sm" align="center" wrap="nowrap">
-            <ThemeIcon size={34} radius="md" variant="light" color="green">
+            <ThemeIcon size={34} radius="md" variant="light" color="edr-green">
              <Navigation size={17} />
            </ThemeIcon>
            <Stack gap={0}>
@@ -264,9 +269,9 @@ export default function TrainScheduleTrackPage() {
      </Paper>

      {/* Checkpoint log */}
-      <Paper radius="lg" p="lg" withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
+      <Paper radius="lg" p="lg" withBorder>
        <Group gap="sm" align="center" wrap="nowrap" mb="md">
-          <ThemeIcon size={34} radius="md" variant="light" color="green">
+          <ThemeIcon size={34} radius="md" variant="light" color="edr-green">
            <CheckCircle2 size={17} />
          </ThemeIcon>
          <Stack gap={0}>
@@ -292,7 +297,7 @@ export default function TrainScheduleTrackPage() {
            </Text>
          </Stack>
        ) : (
-          <Timeline active={track.checkpoints.length} bulletSize={22} lineWidth={2} color="green">
+          <Timeline active={track.checkpoints.length} bulletSize={22} lineWidth={2} color="edr-green">
            {track.checkpoints.map((cp) => (
              <Timeline.Item
                key={cp.id}
@@ -306,7 +311,7 @@ export default function TrainScheduleTrackPage() {
                      size="xs"
                      radius="sm"
                      variant="light"
-                      color={cp.kind === "ARRIVED" ? "teal" : cp.kind === "DEPARTED" ? "blue" : "green"}
+                      color={cp.kind === "ARRIVED" ? "teal" : cp.kind === "DEPARTED" ? "blue" : "edr-green"}
                    >
                      {cp.kind}
                    </Badge>
@@ -326,6 +331,6 @@ export default function TrainScheduleTrackPage() {
          </Timeline>
        )}
      </Paper>
-    </Stack>
+    </PageContainer>
  );
 }
--- a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2DetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2DetailPage.tsx
@@ -1,5 +1,17 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Link, useParams } from "react-router-dom";
+import {
+  Badge,
+  Box,
+  Button,
+  Checkbox,
+  Group,
+  Loader,
+  Paper,
+  RingProgress,
+  Stack,
+  Text,
+  ThemeIcon,
+  Title,
+} from "@mantine/core";
 import { isAxiosError } from "axios";
 import {
  ArrowLeft,
@@ -15,48 +27,35 @@ import {
  Train,
  Weight,
 } from "lucide-react";
-import {
-  Badge,
-  Box,
-  Button,
-  Checkbox,
-  Group,
-  Loader,
-  Paper,
-  RingProgress,
-  SimpleGrid,
-  Stack,
-  Text,
-  ThemeIcon,
-  Title,
-} from "@mantine/core";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Link, useParams } from "react-router-dom";

-import { ContainerPlacementGrid } from "@/components/trainScheduling/ContainerPlacementGrid";
+import { KpiStrip, PageContainer } from "@/components/page";
 import {
  autoFillPlacements,
  mergePlacementsWithSaved,
  placementsFromScheduleWagons,
  validateLocalPlacements,
 } from "@/components/trainScheduling/containerPlacement.util";
+import { ContainerPlacementGrid } from "@/components/trainScheduling/ContainerPlacementGrid";
 import { FleetAvailabilitySummary } from "@/components/trainScheduling/FleetAvailabilitySummary";
+import { RescheduleTrainDialog } from "@/components/trainScheduling/RescheduleTrainDialog";
+import { ScheduleBatchPanel } from "@/components/trainScheduling/ScheduleBatchPanel";
 import { ScheduleBookingsStep } from "@/components/trainScheduling/ScheduleBookingsStep";
+import { FreightTypeBadge } from "@/components/trainScheduling/ScheduleStatusBadge";
+import {
+  RouteCorridor,
+  StatusPill,
+  scheduleBrand,
+} from "@/components/trainScheduling/scheduleVisuals";
 import {
  PreviewSummary,
  ScheduleWarningsAlert,
 } from "@/components/trainScheduling/ScheduleWarningsAlert";
-import { FreightTypeBadge } from "@/components/trainScheduling/ScheduleStatusBadge";
-import {
-  RouteCorridor,
-  StatTile,
-  StatusPill,
-  scheduleBrand,
-} from "@/components/trainScheduling/scheduleVisuals";
-import { RescheduleTrainDialog } from "@/components/trainScheduling/RescheduleTrainDialog";
-import { ScheduleBatchPanel } from "@/components/trainScheduling/ScheduleBatchPanel";
-import { WorkflowRail, WorkflowStep } from "@/components/trainScheduling/WorkflowStep";
 import { shouldShowContainerPlacementStep } from "@/components/trainScheduling/schedulingContainerStep.util";
-import { WagonPlanGrid } from "@/components/trainScheduling/WagonPlanGrid";
 import { TrainCompositionDiagram } from "@/components/trainScheduling/TrainCompositionDiagram";
+import { WagonPlanGrid } from "@/components/trainScheduling/WagonPlanGrid";
+import { WorkflowRail, WorkflowStep } from "@/components/trainScheduling/WorkflowStep";
 import {
  useEligibleBookings,
  useScheduleDetail,
@@ -267,17 +266,21 @@ export default function TrainScheduleV2DetailPage() {

  if (detailQuery.isLoading) {
    return (
-      <Group justify="center" py="xl">
-        <Loader size="sm" />
-      </Group>
+      <PageContainer>
+        <Group justify="center" py="xl">
+          <Loader size="sm" />
+        </Group>
+      </PageContainer>
    );
  }

  if (!schedule || !scheduleId) {
    return (
-      <Text c="dimmed" py="xl">
-        Schedule not found
-      </Text>
+      <PageContainer>
+        <Text c="dimmed" py="xl">
+          Schedule not found
+        </Text>
+      </PageContainer>
    );
  }

@@ -405,7 +408,7 @@ export default function TrainScheduleV2DetailPage() {
        return (
          <Badge
            variant="light"
-            color={previewResult.valid ? "green" : "red"}
+            color={previewResult.valid ? "edr-green" : "red"}
            radius="sm"
          >
            {previewResult.valid ? "Plan valid" : "Has issues"}
@@ -413,14 +416,14 @@ export default function TrainScheduleV2DetailPage() {
        );
      }
      return allSelectedIds.length ? (
-        <Badge variant="light" color="green" radius="sm">
+        <Badge variant="light" color="edr-green" radius="sm">
          {allSelectedIds.length} selected
        </Badge>
      ) : null;
    }
    if (key === "wagon" && displayWagonPlan.length) {
      return (
-        <Badge variant="light" color="green" radius="sm">
+        <Badge variant="light" color="edr-green" radius="sm">
          {displayWagonPlan.length} wagons
        </Badge>
      );
@@ -429,7 +432,7 @@ export default function TrainScheduleV2DetailPage() {
      return (
        <Badge
          variant="light"
-          color={containerComplete ? "green" : "yellow"}
+          color={containerComplete ? "edr-green" : "yellow"}
          radius="sm"
        >
          {containerUnits.length} units
@@ -485,7 +488,7 @@ export default function TrainScheduleV2DetailPage() {
                size="sm"
              />
              <Button
-                color="green"
+                color="edr-green"
                radius="md"
                leftSection={<Eye size={16} />}
                loading={preview.isPending}
@@ -532,7 +535,7 @@ export default function TrainScheduleV2DetailPage() {
            <Group>
              {!hasContainerStep ? (
                <Button
-                  color="green"
+                  color="edr-green"
                  radius="md"
                  loading={assign.isPending}
                  onClick={handleAssign}
@@ -541,7 +544,7 @@ export default function TrainScheduleV2DetailPage() {
                </Button>
              ) : (
                <Button
-                  color="green"
+                  color="edr-green"
                  radius="md"
                  rightSection={<ContainerIcon size={16} />}
                  onClick={() => setActiveStep(2)}
@@ -578,7 +581,7 @@ export default function TrainScheduleV2DetailPage() {
          {canEditBookings ? (
            <Group>
              <Button
-                color="green"
+                color="edr-green"
                radius="md"
                loading={assign.isPending}
                onClick={handleAssign}
@@ -629,7 +632,7 @@ export default function TrainScheduleV2DetailPage() {
              <Text fw={600}>Ready to depart</Text>
              <Text size="sm" c="dimmed">
                Finalizing locks the plan and moves the schedule to{" "}
-                <Text span fw={600} c="green.7">
+                <Text span fw={600} c="edr-green.7">
                  SCHEDULED
                </Text>
                . Dispatch then begins rail movement and notifies the yard.
@@ -640,7 +643,7 @@ export default function TrainScheduleV2DetailPage() {
        <Group>
          {canFinalize ? (
            <Button
-              color="green"
+              color="edr-green"
              size="md"
              radius="md"
              leftSection={<CheckCircle2 size={18} />}
@@ -663,7 +666,7 @@ export default function TrainScheduleV2DetailPage() {
          ) : null}
          {canDispatch ? (
            <Button
-              color="green"
+              color="edr-green"
              size="md"
              radius="md"
              leftSection={<Send size={18} />}
@@ -695,7 +698,7 @@ export default function TrainScheduleV2DetailPage() {
  };

  return (
-    <Stack gap="lg">
+    <PageContainer>
      <Button
        component={Link}
        to="/dashboard/operations/train-scheduling-v2"
@@ -711,13 +714,7 @@ export default function TrainScheduleV2DetailPage() {
      <Paper
        radius="xl"
        p="xl"
-        style={{
-          position: "relative",
-          overflow: "hidden",
-          background: "#ffffff",
-          border: "1px solid var(--mantine-color-gray-2)",
-          boxShadow: "0 1px 3px rgba(15,23,42,0.04)",
-        }}
+        style={{ position: "relative", overflow: "hidden" }}
      >
        <Stack gap="lg" style={{ position: "relative" }}>
          <Group justify="space-between" align="flex-start" wrap="wrap">
@@ -758,7 +755,7 @@ export default function TrainScheduleV2DetailPage() {
                <Button
                  component={Link}
                  to={`/dashboard/operations/train-scheduling-v2/${scheduleId}/track`}
-                  color="green"
+                  color="edr-green"
                  radius="lg"
                  size="sm"
                  leftSection={<Navigation size={16} />}
@@ -779,63 +776,12 @@ export default function TrainScheduleV2DetailPage() {
            </Group>
          </Group>

-          <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="md">
-            <StatTile
-              icon={Train}
-              label="Locomotive"
-              value={schedule.trainSet?.locomotive?.code ?? "—"}
-              hint={
-                schedule.trainSet?.locomotive?.currentYardId
-                  ? schedule.trainSet.locomotive.currentYardId === schedule.originStation?.id
-                    ? `At ${schedule.originStation?.label ?? schedule.originStation?.code ?? "origin yard"}`
-                    : "Not at schedule origin yard"
-                  : "No current yard set"
-              }
-              accent="#F2A516"
-              graph="area"
-              graphAccent="gold"
-            />
-            <StatTile
-              icon={Package}
-              label="Bookings"
-              value={schedule.bookings?.length ?? 0}
-              accent="#FB8C2E"
-              graph="line"
-              graphAccent="orange"
-            />
-            <StatTile
-              icon={Weight}
-              label="Wagons / load"
-              value={`${schedule.trainSet?.wagonCount ?? displayWagonPlan.length} · ${
-                schedule.trainSet?.totalWeightTons ?? 0
-              }T`}
-              accent="#F2A516"
-              graph="area"
-              graphAccent="gold"
-            />
-            <StatTile
-              icon={CalendarClock}
-              label="Departure"
-              value={new Date(schedule.scheduledDepartureDate).toLocaleDateString(
-                "en",
-                { month: "short", day: "2-digit" },
-              )}
-              hint={new Date(schedule.scheduledDepartureDate).toLocaleTimeString("en", {
-                hour: "2-digit",
-                minute: "2-digit",
-              })}
-              accent="#FB8C2E"
-              graph="line"
-              graphAccent="orange"
-            />
-          </SimpleGrid>
-
          {previewResult ? (
            <Badge
              size="lg"
              radius="sm"
              variant="light"
-              color={previewResult.valid ? "green" : "red"}
+              color={previewResult.valid ? "edr-green" : "red"}
              leftSection={
                <Box
                  w={8}
@@ -843,7 +789,7 @@ export default function TrainScheduleV2DetailPage() {
                  style={{
                    borderRadius: 999,
                    background: previewResult.valid
-                      ? "var(--mantine-color-green-6)"
+                      ? "var(--mantine-color-edr-green-6)"
                      : "var(--mantine-color-red-6)",
                  }}
                />
@@ -855,17 +801,51 @@ export default function TrainScheduleV2DetailPage() {
        </Stack>
      </Paper>

-      <Paper radius="xl" p="lg" withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
+      <KpiStrip
+        items={[
+          {
+            label: "Locomotive",
+            value: schedule.trainSet?.locomotive?.code ?? "—",
+            hint: schedule.trainSet?.locomotive?.currentYardId
+              ? schedule.trainSet.locomotive.currentYardId === schedule.originStation?.id
+                ? `At ${schedule.originStation?.label ?? schedule.originStation?.code ?? "origin yard"}`
+                : "Not at schedule origin yard"
+              : "No current yard set",
+            icon: Train,
+          },
+          {
+            label: "Bookings",
+            value: schedule.bookings?.length ?? 0,
+            icon: Package,
+          },
+          {
+            label: "Wagons / load",
+            value: `${schedule.trainSet?.wagonCount ?? displayWagonPlan.length} · ${
+              schedule.trainSet?.totalWeightTons ?? 0
+            }T`,
+            icon: Weight,
+          },
+          {
+            label: "Departure",
+            value: new Date(schedule.scheduledDepartureDate).toLocaleDateString("en", {
+              month: "short",
+              day: "2-digit",
+            }),
+            hint: new Date(schedule.scheduledDepartureDate).toLocaleTimeString("en", {
+              hour: "2-digit",
+              minute: "2-digit",
+            }),
+            icon: CalendarClock,
+          },
+        ]}
+      />
+
+      <Paper radius="xl" p="lg">
        <Stack gap="lg">
          {/* Workflow header with ring progress */}
          <Group justify="space-between" align="center" wrap="nowrap">
            <Group gap="md" align="center" wrap="nowrap">
-              <ThemeIcon
-                size={44}
-                radius="md"
-                variant="gradient"
-                gradient={{ from: "green", to: "teal", deg: 135 }}
-              >
+              <ThemeIcon size={44} radius="md" variant="light" color="edr-green">
                <RouteIcon size={22} />
              </ThemeIcon>
              <Stack gap={2}>
@@ -882,9 +862,9 @@ export default function TrainScheduleV2DetailPage() {
              size={64}
              thickness={6}
              roundCaps
-              sections={[{ value: progressPct, color: "green" }]}
+              sections={[{ value: progressPct, color: "edr-green" }]}
              label={
-                <Text ta="center" size="xs" fw={700} c="green.7">
+                <Text ta="center" size="xs" fw={700} c="edr-green.7">
                  {progressPct}%
                </Text>
              }
@@ -928,6 +908,6 @@ export default function TrainScheduleV2DetailPage() {
          onComplete={() => void detailQuery.refetch()}
        />
      ) : null}
-    </Stack>
+    </PageContainer>
  );
 }
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseDetailPage.tsx
@@ -10,12 +10,13 @@ import {
  Loader,
  Stack,
  Select,
-  Table,
  Tabs,
  Text,
 } from '@mantine/core';
 import { ArrowLeft, Boxes, LayoutGrid, Package, Pencil, Plus } from 'lucide-react';

+import { DataTable, type ColumnDef } from '@edr/ui-common';
+
 import { KpiStrip, PageContainer, PageHeader } from '@/components/page';
 import {
  CreateYardModal,
@@ -58,6 +59,90 @@ export default function WarehouseDetailPage() {
    [yards],
  );

+  const yardColumns = useMemo<ColumnDef<WarehouseYard>[]>(
+    () => [
+      { id: 'name', header: 'Name', cell: ({ row }) => row.original.name },
+      { id: 'code', header: 'Code', cell: ({ row }) => row.original.code },
+      { id: 'type', header: 'Type', cell: ({ row }) => humanizeEnum(row.original.type) },
+      {
+        id: 'weight',
+        header: 'Weight (cur / cap)',
+        cell: ({ row }) => formatCapacity(row.original.currentWeight, row.original.capacityWeight),
+      },
+      {
+        id: 'containers',
+        header: 'Containers (cur / cap)',
+        cell: ({ row }) =>
+          formatCapacity(row.original.currentContainers, row.original.capacityContainers),
+      },
+      {
+        id: 'status',
+        header: 'Status',
+        cell: ({ row }) => <WarehouseStatusBadge status={row.original.status} />,
+      },
+      {
+        id: 'actions',
+        header: 'Actions',
+        meta: { headerClassName: 'text-right', cellClassName: 'text-right' },
+        cell: ({ row }) => (
+          <ActionIcon
+            variant="subtle"
+            color="gray"
+            onClick={() => {
+              setEditingYard(row.original);
+              setYardModalOpen(true);
+            }}
+          >
+            <Pencil size={16} />
+          </ActionIcon>
+        ),
+      },
+    ],
+    [],
+  );
+
+  const zoneColumns = useMemo<ColumnDef<WarehouseZone>[]>(
+    () => [
+      { id: 'name', header: 'Name', cell: ({ row }) => row.original.name },
+      { id: 'code', header: 'Code', cell: ({ row }) => row.original.code },
+      { id: 'type', header: 'Type', cell: ({ row }) => humanizeEnum(row.original.type) },
+      {
+        id: 'weight',
+        header: 'Weight (cur / cap)',
+        cell: ({ row }) => formatCapacity(row.original.currentWeight, row.original.capacityWeight),
+      },
+      {
+        id: 'containers',
+        header: 'Containers (cur / cap)',
+        cell: ({ row }) =>
+          formatCapacity(row.original.currentContainers, row.original.capacityContainers),
+      },
+      {
+        id: 'status',
+        header: 'Status',
+        cell: ({ row }) => <WarehouseStatusBadge status={row.original.status} />,
+      },
+      {
+        id: 'actions',
+        header: 'Actions',
+        meta: { headerClassName: 'text-right', cellClassName: 'text-right' },
+        cell: ({ row }) => (
+          <ActionIcon
+            variant="subtle"
+            color="gray"
+            onClick={() => {
+              setEditingZone(row.original);
+              setZoneModalOpen(true);
+            }}
+          >
+            <Pencil size={16} />
+          </ActionIcon>
+        ),
+      },
+    ],
+    [],
+  );
+
  if (isLoading) {
    return (
      <Center mih="60vh">
@@ -154,51 +239,27 @@ export default function WarehouseDetailPage() {
                  </Button>
                </Group>

-                {yards.length === 0 ? (
-                  <Text c="dimmed" ta="center" py="lg">
-                    No yards yet.
-                  </Text>
-                ) : (
-                  <Table highlightOnHover verticalSpacing="sm" striped>
-                    <Table.Thead>
-                      <Table.Tr>
-                        <Table.Th>Name</Table.Th>
-                        <Table.Th>Code</Table.Th>
-                        <Table.Th>Type</Table.Th>
-                        <Table.Th>Weight (cur / cap)</Table.Th>
-                        <Table.Th>Containers (cur / cap)</Table.Th>
-                        <Table.Th>Status</Table.Th>
-                        <Table.Th ta="right">Actions</Table.Th>
-                      </Table.Tr>
-                    </Table.Thead>
-                    <Table.Tbody>
-                      {yards.map((yard) => (
-                        <Table.Tr key={yard.id}>
-                          <Table.Td>{yard.name}</Table.Td>
-                          <Table.Td>{yard.code}</Table.Td>
-                          <Table.Td>{humanizeEnum(yard.type)}</Table.Td>
-                          <Table.Td>{formatCapacity(yard.currentWeight, yard.capacityWeight)}</Table.Td>
-                          <Table.Td>{formatCapacity(yard.currentContainers, yard.capacityContainers)}</Table.Td>
-                          <Table.Td>
-                            <WarehouseStatusBadge status={yard.status} />
-                          </Table.Td>
-                          <Table.Td ta="right">
-                            <ActionIcon
-                              variant="subtle"
-                              color="gray"
-                              onClick={() => {
-                                setEditingYard(yard);
-                                setYardModalOpen(true);
-                              }}
-                            >
-                              <Pencil size={16} />
-                            </ActionIcon>
-                          </Table.Td>
-                        </Table.Tr>
-                      ))}
-                    </Table.Tbody>
-                  </Table>
-                )}
+                <DataTable
+                  columns={yardColumns}
+                  data={yards}
+                  status={
+                    yardsQuery.isLoading
+                      ? 'loading'
+                      : yardsQuery.isError
+                        ? 'error'
+                        : 'success'
+                  }
+                  emptyMessage="No yards yet."
+                  containerClassName="border-0 shadow-none"
+                  error={
+                    yardsQuery.isError
+                      ? {
+                          message: 'Failed to load yards.',
+                          onRetry: () => void yardsQuery.refetch(),
+                        }
+                      : undefined
+                  }
+                />
              </Stack>
            </Card>
          </Tabs.Panel>
@@ -234,50 +295,28 @@ export default function WarehouseDetailPage() {
                  <Text c="dimmed" ta="center" py="lg">
                    Select a yard to view its zones.
                  </Text>
-                ) : (zonesQuery.data ?? []).length === 0 ? (
-                  <Text c="dimmed" ta="center" py="lg">
-                    No zones in this yard yet.
-                  </Text>
                ) : (
-                  <Table highlightOnHover verticalSpacing="sm" striped>
-                    <Table.Thead>
-                      <Table.Tr>
-                        <Table.Th>Name</Table.Th>
-                        <Table.Th>Code</Table.Th>
-                        <Table.Th>Type</Table.Th>
-                        <Table.Th>Weight (cur / cap)</Table.Th>
-                        <Table.Th>Containers (cur / cap)</Table.Th>
-                        <Table.Th>Status</Table.Th>
-                        <Table.Th ta="right">Actions</Table.Th>
-                      </Table.Tr>
-                    </Table.Thead>
-                    <Table.Tbody>
-                      {(zonesQuery.data ?? []).map((zone) => (
-                        <Table.Tr key={zone.id}>
-                          <Table.Td>{zone.name}</Table.Td>
-                          <Table.Td>{zone.code}</Table.Td>
-                          <Table.Td>{humanizeEnum(zone.type)}</Table.Td>
-                          <Table.Td>{formatCapacity(zone.currentWeight, zone.capacityWeight)}</Table.Td>
-                          <Table.Td>{formatCapacity(zone.currentContainers, zone.capacityContainers)}</Table.Td>
-                          <Table.Td>
-                            <WarehouseStatusBadge status={zone.status} />
-                          </Table.Td>
-                          <Table.Td ta="right">
-                            <ActionIcon
-                              variant="subtle"
-                              color="gray"
-                              onClick={() => {
-                                setEditingZone(zone);
-                                setZoneModalOpen(true);
-                              }}
-                            >
-                              <Pencil size={16} />
-                            </ActionIcon>
-                          </Table.Td>
-                        </Table.Tr>
-                      ))}
-                    </Table.Tbody>
-                  </Table>
+                  <DataTable
+                    columns={zoneColumns}
+                    data={zonesQuery.data ?? []}
+                    status={
+                      zonesQuery.isLoading
+                        ? 'loading'
+                        : zonesQuery.isError
+                          ? 'error'
+                          : 'success'
+                    }
+                    emptyMessage="No zones in this yard yet."
+                    containerClassName="border-0 shadow-none"
+                    error={
+                      zonesQuery.isError
+                        ? {
+                            message: 'Failed to load zones.',
+                            onRetry: () => void zonesQuery.refetch(),
+                          }
+                        : undefined
+                    }
+                  />
                )}
              </Stack>
            </Card>