style: finalize the style of the dashboard

apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusTabs.tsx

@@ -1,3 +1,4 @@
+import { Badge, ScrollArea, Tabs } from "@mantine/core";
 import {
   CheckCircle,
   ClipboardCheck,
@@ -8,13 +9,12 @@ import {
   Wallet,
   XCircle,
 } from "lucide-react";
-import { Badge, Tabs } from "@mantine/core";
 
+import "@/components/overview/overview.css";
 import {
   BOOKING_LIST_TABS,
   type BookingStatusTabKey,
 } from "@/features/bookings/booking-status.config";
-import "@/components/overview/overview.css";
 
 const TAB_ICONS: Record<BookingStatusTabKey, React.ReactNode> = {
   all: <LayoutGrid size={17} strokeWidth={1.85} />,
@@ -47,8 +47,9 @@ export function BookingStatusTabs({
       keepMounted={false}
       classNames={{ list: "ov-tablist", tab: "ov-tab" }}
     >
-      <Tabs.List>
-        {BOOKING_LIST_TABS.map((tab) => {
+      <ScrollArea type="auto" scrollbarSize={6} offsetScrollbars="x">
+        <Tabs.List style={{ flexWrap: "nowrap", width: "max-content" }}>
+          {BOOKING_LIST_TABS.map((tab) => {
           const isActive = active === tab.key;
           const count = counts?.[tab.key];
           return (
@@ -56,6 +57,7 @@ export function BookingStatusTabs({
               key={tab.key}
               value={tab.key}
               leftSection={TAB_ICONS[tab.key]}
+              size={"sm"}
               rightSection={
                 count !== undefined ? (
                   <Badge
@@ -77,8 +79,9 @@ export function BookingStatusTabs({
               {tab.label}
             </Tabs.Tab>
           );
-        })}
-      </Tabs.List>
+          })}
+        </Tabs.List>
+      </ScrollArea>
     </Tabs>
   );
 }

apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineCardGrid.tsx

@@ -1,5 +1,5 @@
 import type { OnChangeFn, PaginationState } from "@tanstack/react-table";
-import { Stack, Group, Text, Card, SimpleGrid } from "@mantine/core";
+import { Stack, Group, Text, Card, SimpleGrid, Skeleton } from "@mantine/core";
 
 import type { RuleEngineResourceConfig } from "@/pages/ruleEngine/config/resources";
 import type { RuleEngineRecord } from "@/types/rule-engine";
@@ -99,13 +99,16 @@ const RuleEngineCardGrid = ({
       <Stack gap="md" p="md">
         <SimpleGrid cols={{ base: 1, sm: 2, md: 2, lg: 3 }} spacing="md">
           {Array.from({ length: 6 }).map((_, index) => (
-            <Card key={index} p="md" radius="lg" withBorder style={{ height: "280px", background: "var(--mantine-color-gray-0)" }}>
-              <div style={{ animation: "pulse 2s infinite", opacity: 0.5 }}>
-                <div style={{ height: "20px", background: "var(--mantine-color-gray-3)", borderRadius: "4px", marginBottom: "12px" }} />
-                <div style={{ height: "16px", background: "var(--mantine-color-gray-3)", borderRadius: "4px", marginBottom: "20px", width: "80%" }} />
-                <div style={{ height: "16px", background: "var(--mantine-color-gray-3)", borderRadius: "4px", marginBottom: "8px" }} />
-                <div style={{ height: "16px", background: "var(--mantine-color-gray-3)", borderRadius: "4px" }} />
-              </div>
+            <Card key={index} p="lg">
+              <Group gap="sm" mb="md">
+                <Skeleton height={44} width={44} radius="md" />
+                <Stack gap={6} style={{ flex: 1 }}>
+                  <Skeleton height={14} width="70%" radius="sm" />
+                  <Skeleton height={10} width="40%" radius="sm" />
+                </Stack>
+              </Group>
+              <Skeleton height={12} radius="sm" mb={8} />
+              <Skeleton height={12} width="80%" radius="sm" />
             </Card>
           ))}
         </SimpleGrid>
@@ -124,8 +127,8 @@ const RuleEngineCardGrid = ({
     );
   }
 
-  const avatarBg = "#f1f5f9";
-  const avatarText = "#475569";
+  const avatarBg = "var(--mantine-color-gray-1)";
+  const avatarText = "var(--mantine-color-gray-7)";
 
   return (
     <Stack gap="md" p="md">
@@ -152,24 +155,7 @@ const RuleEngineCardGrid = ({
             <Card
               key={record.id}
               p="lg"
-              radius="lg"
-              withBorder
-              style={{
-                background: "white",
-                border: "1px solid var(--mantine-color-gray-2)",
-                display: "flex",
-                flexDirection: "column",
-                transition: "all 0.2s ease",
-                cursor: "pointer",
-              }}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.08)";
-                e.currentTarget.style.borderColor = "var(--mantine-color-gray-3)";
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.boxShadow = "none";
-                e.currentTarget.style.borderColor = "var(--mantine-color-gray-2)";
-              }}
+              style={{ display: "flex", flexDirection: "column" }}
             >
               <Group justify="space-between" align="flex-start" mb="md">
                 <Group gap="sm" style={{ flex: 1, minWidth: 0 }}>
@@ -207,7 +193,7 @@ const RuleEngineCardGrid = ({
               </Group>
 
               {(subtitle || presentation.detailColumns.length > 0) && (
-                <Stack gap="xs" style={{ flex: 1, marginBottom: "md" }}>
+                <Stack gap="xs" mb="md" style={{ flex: 1 }}>
                   {subtitle && (
                     <Group gap="xs">
                       <Text size="xs" c="dimmed" fw={500}>
@@ -234,7 +220,7 @@ const RuleEngineCardGrid = ({
                 </Stack>
               )}
 
-              <Group justify="flex-end" gap="xs" style={{ borderTop: "1px solid var(--mantine-color-gray-1)", paddingTop: "md" }}>
+              <Group justify="flex-end" gap="xs" pt="md" style={{ borderTop: "1px solid var(--mantine-color-gray-2)" }}>
                 <RuleEngineRecordActions
                   record={record}
                   config={config}

apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineFormDialog.tsx

@@ -119,15 +119,6 @@ const resolveSelectValue = (
 
 const inputStyles = {
   label: { fontWeight: 600, marginBottom: 6, color: "var(--mantine-color-gray-8)" },
-  input: {
-    borderColor: "#e2e8f0",
-    background: "white",
-    transition: "border-color 0.15s ease, box-shadow 0.15s ease",
-    "&:focus": {
-      borderColor: "var(--freight-brand)",
-      boxShadow: "0 0 0 3px var(--freight-brand-ring)",
-    },
-  },
 } as const;
 
 const FieldLabel = ({ label, required }: { label: string; required?: boolean }) => (
@@ -228,8 +219,8 @@ const RuleEngineFormDialog = ({
           px="md"
           style={{
             minHeight: 42,
-            background: "#f8fafc",
-            border: "1px solid #e2e8f0",
+            background: "var(--mantine-color-gray-0)",
+            border: "1px solid var(--mantine-color-gray-3)",
             borderRadius: "var(--mantine-radius-md)",
           }}
         >

apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineStyles.ts

@@ -40,7 +40,7 @@ export const ruleEngineCard = {
     "group flex flex-col overflow-hidden rounded-lg border border-border bg-card shadow-sm transition-shadow duration-200 hover:shadow-md",
   header: "border-b border-border bg-muted/25 px-3 py-2.5 sm:px-4 sm:py-3.5",
   avatar:
-    "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-[#f1f5f9] text-xs font-semibold text-slate-600 sm:h-10 sm:w-10 sm:text-sm",
+    "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted text-xs font-semibold text-muted-foreground sm:h-10 sm:w-10 sm:text-sm",
   title: "truncate text-sm font-semibold text-foreground sm:text-[15px]",
   meta: "text-xs text-muted-foreground",
   detailLabel:

apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx

@@ -1,5 +1,7 @@
 import {
   ActionIcon,
+  Box,
+  Button,
   Card,
   Group,
   Stack,
@@ -7,14 +9,26 @@ import {
   Text,
   TextInput,
 } from "@mantine/core";
-import { ArrowRight, Calendar, Package, Search, User, X } from "lucide-react";
+import {
+  AlertTriangle,
+  ArrowRight,
+  Calendar,
+  CheckCircle2,
+  Clock,
+  LayoutList,
+  Package,
+  Plus,
+  RefreshCw,
+  Search,
+  User,
+  X,
+} from "lucide-react";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { BookingActionsMenu } from "@/components/bookings/BookingActionsMenu";
 import { BookingApprovalProgressCell } from "@/components/bookings/BookingApprovalProgressCell";
 import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
-import { BookingRequestsHeader } from "@/components/bookings/BookingRequestsHeader";
 import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
 import {
   BookingStatusTabs,
@@ -24,7 +38,7 @@ import { BookingTableEmpty } from "@/components/bookings/BookingTableEmpty";
 import { OperationsBookingQueue } from "@/components/bookings/OperationsBookingQueue";
 import { OperationsScheduledBookings } from "@/components/bookings/OperationsScheduledBookings";
 import { bookingTable } from "@/components/bookings/booking-ui.styles";
-import { PageContainer } from "@/components/page";
+import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
 import { AllocateBookingWizard } from "@/components/trainScheduling/AllocateBookingWizard";
 import { BOOKING_LIST_TABS } from "@/features/bookings/booking-status.config";
 import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
@@ -33,7 +47,6 @@ import {
   useBookingList,
   useBookingListSummary,
 } from "@/hooks/bookings/useBookings";
-import { cn } from "@/lib/utils";
 import type { BookingListFilter } from "@/services/bookings.service";
 import type { BookingListRow } from "@/types/booking";
 import {
@@ -50,13 +63,25 @@ function getStatusesForTab(tab: BookingStatusTabKey): string | undefined {
   return match.statuses.join(",");
 }
 
+function formatDate(value: string | null | undefined): string {
+  if (!value) return "—";
+  const d = new Date(value);
+  return Number.isNaN(d.getTime())
+    ? "—"
+    : d.toLocaleDateString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+}
+
 type OperationsSubTab = "ready" | "scheduled";
 
 export default function BookingRequestsPage() {
   const navigate = useNavigate();
   const { pagination, setPagination } = usePagination({ pageSize: 10 });
   const [query, setQuery] = useState("");
-  const [activeTab, setActiveTab] = useState<BookingStatusTabKey>("in_approval");
+  const [activeTab, setActiveTab] = useState<BookingStatusTabKey>("all");
   const [operationsSubTab, setOperationsSubTab] = useState<OperationsSubTab>("ready");
   const [allocateOpen, setAllocateOpen] = useState(false);
   const [allocateIds, setAllocateIds] = useState<string[]>([]);
@@ -251,7 +276,7 @@ export default function BookingRequestsPage() {
       cell: ({ row }) => (
         <span className="inline-flex items-center gap-1.5 text-sm text-muted-foreground">
           <Calendar className="size-3.5" />
-          {row.original.scheduledDate}
+          {formatDate(row.original.scheduledDate)}
         </span>
       ),
     },
@@ -262,29 +287,9 @@ export default function BookingRequestsPage() {
         <BookingPriorityBadge score={row.original.priorityScore} />
       ),
     },
-    {
-      id: "amount",
-      header: () => (
-        <span className={bookingTable.headerCell}>Amount</span>
-      ),
-      cell: ({ row }) => {
-        const b = row.original;
-        return (
-          <span className="font-mono text-sm font-semibold tabular-nums text-foreground">
-            {b.paymentCurrency}{" "}
-            {b.totalAmount.toLocaleString(undefined, {
-              minimumFractionDigits: 2,
-            })}
-          </span>
-        );
-      },
-    },
     {
       id: "actions",
       size: 140,
-      header: () => (
-        <span className={bookingTable.headerCell}>Actions</span>
-      ),
       cell: ({ row }) => (
         <BookingActionsMenu
           row={row.original}
@@ -298,13 +303,58 @@ export default function BookingRequestsPage() {
   return (
     <PageContainer>
       <Stack gap="lg">
-          <BookingRequestsHeader
-            metrics={metrics}
-            tabs={tabCounts}
+          <PageHeader
+            title="Booking requests"
+            subtitle="Review, approve, and schedule freight booking requests."
+            action={
+              <>
+                <Button
+                  color="edr-green"
+                  leftSection={<Plus size={18} />}
+                  onClick={() => navigate("/dashboard/booking-requests/new")}
+                >
+                  Create booking
+                </Button>
+                <Button
+                  variant="default"
+                  leftSection={<RefreshCw size={16} />}
+                  loading={isFetching}
+                  onClick={handleRefresh}
+                >
+                  Refresh
+                </Button>
+              </>
+            }
+          />
+
+          <KpiStrip
             loading={summaryLoading}
-            isFetching={isFetching}
-            onCreate={() => navigate("/dashboard/booking-requests/new")}
-            onRefresh={handleRefresh}
+            items={[
+              {
+                label: "In queue",
+                value: metrics?.inQueue ?? 0,
+                icon: LayoutList,
+                color: "edr-green",
+              },
+              {
+                label: "Needs action",
+                value: metrics?.needsAction ?? 0,
+                icon: Clock,
+                color: "yellow",
+              },
+              {
+                label: "Urgent",
+                value: metrics?.urgent ?? 0,
+                icon: AlertTriangle,
+                color: "red",
+              },
+              {
+                label: "Completed",
+                value: tabCounts?.completed ?? 0,
+                icon: CheckCircle2,
+                color: "edr-green",
+              },
+            ]}
           />
 
           <BookingStatusTabs
@@ -316,75 +366,81 @@ export default function BookingRequestsPage() {
             counts={tabCounts}
           />
 
-          <Card p="md" radius="lg" withBorder>
-            <Stack gap="md">
-              <Group justify="space-between" gap="md" wrap="wrap">
-                <TextInput
-                  placeholder="Search reference or customer…"
-                  leftSection={<Search size={18} />}
-                  value={query}
-                  onChange={(e) => setQuery(e.target.value)}
-                  rightSection={
-                    query && (
-                      <ActionIcon
-                        size="sm"
-                        color="gray"
-                        radius="md"
-                        variant="transparent"
-                        onClick={() => setQuery("")}
-                      >
-                        <X size={16} />
-                      </ActionIcon>
-                    )
-                  }
-                  style={{ flex: 1, minWidth: "200px" }}
-                  radius="lg"
-                />
-                <Text size="sm" c="dimmed">
-                  {total} record{total !== 1 ? "s" : ""}
-                </Text>
-              </Group>
+          <Card p={0}>
+            <Stack gap={0}>
+              <Box px="md" pt="md" pb="sm" w="100%">
+                <Group justify="space-between" gap="md" wrap="wrap">
+                  <TextInput
+                    placeholder="Search reference or customer…"
+                    leftSection={<Search size={18} />}
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    rightSection={
+                      query && (
+                        <ActionIcon
+                          size="sm"
+                          color="gray"
+                          radius="md"
+                          variant="transparent"
+                          onClick={() => setQuery("")}
+                        >
+                          <X size={16} />
+                        </ActionIcon>
+                      )
+                    }
+                    style={{ flex: 1, minWidth: "200px" }}
+                    radius="lg"
+                  />
+                  <Text size="sm" c="dimmed">
+                    {total} record{total !== 1 ? "s" : ""}
+                  </Text>
+                </Group>
+              </Box>
 
               {isOperationsTab ? (
-                <Stack gap="md">
-                  <Tabs
-                    value={operationsSubTab}
-                    onChange={(value) =>
-                      setOperationsSubTab((value as OperationsSubTab) ?? "ready")
-                    }
-                  >
-                    <Tabs.List>
-                      <Tabs.Tab value="ready">Ready to allocate</Tabs.Tab>
-                      <Tabs.Tab value="scheduled">On train / scheduled</Tabs.Tab>
-                    </Tabs.List>
-                  </Tabs>
-                  {isError ? (
-                    <BookingTableEmpty
-                      isError
-                      hasSearch={false}
-                      onRetry={handleRefresh}
-                    />
-                  ) : operationsSubTab === "ready" ? (
-                    <OperationsBookingQueue
-                      bookings={rows}
-                      isLoading={isLoading}
-                      onAllocate={handleAllocateFromQueue}
-                    />
-                  ) : (
-                    <OperationsScheduledBookings
-                      bookings={rows}
-                      isLoading={isLoading}
-                    />
-                  )}
-                </Stack>
+                <Box px="md" pb="md">
+                  <Stack gap="md">
+                    <Tabs
+                      value={operationsSubTab}
+                      onChange={(value) =>
+                        setOperationsSubTab((value as OperationsSubTab) ?? "ready")
+                      }
+                    >
+                      <Tabs.List>
+                        <Tabs.Tab value="ready">Ready to allocate</Tabs.Tab>
+                        <Tabs.Tab value="scheduled">On train / scheduled</Tabs.Tab>
+                      </Tabs.List>
+                    </Tabs>
+                    {isError ? (
+                      <BookingTableEmpty
+                        isError
+                        hasSearch={false}
+                        onRetry={handleRefresh}
+                      />
+                    ) : operationsSubTab === "ready" ? (
+                      <OperationsBookingQueue
+                        bookings={rows}
+                        isLoading={isLoading}
+                        onAllocate={handleAllocateFromQueue}
+                      />
+                    ) : (
+                      <OperationsScheduledBookings
+                        bookings={rows}
+                        isLoading={isLoading}
+                      />
+                    )}
+                  </Stack>
+                </Box>
               ) : showEmpty ? (
-                <BookingTableEmpty
-                  isError={isError}
-                  hasSearch={hasSearch}
-                  onRetry={handleRefresh}
-                />
+                <Box px="md" pb="md">
+                  <BookingTableEmpty
+                    isError={isError}
+                    hasSearch={hasSearch}
+                    onRetry={handleRefresh}
+                  />
+                </Box>
               ) : (
-                <div style={{ overflowX: "auto" }}>
+                <Box style={{ overflowX: "auto" }} w="100%">
                   <DataTable
                     columns={columns}
                     data={rows}
@@ -402,16 +458,10 @@ export default function BookingRequestsPage() {
                       manualPagination: true,
                       pageCount,
                     }}
-                    containerClassName={cn(
-                      "border-0 shadow-none",
-                      "[&_thead_tr]:border-b [&_thead_tr]:border-border/50",
-                      "[&_thead_th]:bg-muted/20 [&_thead_th]:backdrop-blur-sm",
-                      "[&_tbody_tr]:group/tr [&_tbody_tr]:cursor-pointer [&_tbody_tr]:border-b [&_tbody_tr]:border-border/30",
-                      "[&_tbody_tr]:transition-colors [&_tbody_tr:hover]:bg-muted/20",
-                    )}
+                    containerClassName="border-0 shadow-none bg-transparent"
                     footer={DataTableFooter}
                   />
-                </div>
+                </Box>
               )}
             </Stack>
           </Card>

apps/edr-freight-web/backoffice/src/pages/documents/FileUploadSettingsPage.tsx

@@ -1,33 +1,47 @@
 import { useMemo, useState } from "react";
 import {
-  AlertCircle,
-  Filter,
+  ActionIcon,
+  Badge,
+  Box,
+  Button,
+  Card,
+  Code,
+  Group,
+  Stack,
+  Table,
+  Text,
+  TextInput,
+  ThemeIcon,
+} from "@mantine/core";
+import {
   FileUp,
   HardDrive,
   Layers,
-  Loader2,
   Paperclip,
   Pencil,
   Plus,
   Search,
   Settings,
   Trash2,
+  X,
 } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+
+import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
+import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
+import { api } from "@/services/api";
+import { useDeleteFileUploadSetting } from "@/hooks/useFileUploadSettings";
+import { getMinFiles, type FileUploadSetting } from "@/types/fileUploadSettings";
+import { DataTable, type ColumnDef } from "@edr/ui-common";
 
-// import Breadcrumbs from "@/components/Breadcrumbs";
 import EditFileUploadSettingDialog from "./EditFileUploadSettingDialog";
 import ManageFileUploadFieldsDialog from "./ManageFileUploadFieldsDialog";
 import DeleteFileUploadSettingDialog from "./DeleteFileUploadSettingDialog";
-import Breadcrumbs from "@/components/ui/Breadcrumbs";
-import { getMinFiles } from "@/types/fileUploadSettings";
-import { useQuery } from "@tanstack/react-query";
-import { api } from "@/services/api";
-import { useDeleteFileUploadSetting } from "@/hooks/useFileUploadSettings";
 
 export default function FileUploadSettingsPage() {
   const [query, setQuery] = useState("");
 
-  const { data, isLoading, isError, error } = useQuery(
+  const { data, isLoading, isError, error, refetch } = useQuery(
     api.fileUploadSettings.list.queryOptions(),
   );
   const deleteMutation = useDeleteFileUploadSetting();
@@ -66,397 +80,298 @@ export default function FileUploadSettingsPage() {
     0,
   );
 
-  return (
-    <div className="min-h-screen bg-slate-50 p-6">
-      <div className="mx-auto max-w-7xl space-y-6">
-        <Breadcrumbs
-          items={[
-            { label: "Admin", href: "/admin" },
-            { label: "File Upload Settings" },
-          ]}
-        />
+  const columns = useMemo<ColumnDef<FileUploadSetting>[]>(() => {
+    const headerClassName = ruleEngineTable.headerCell;
+    const cellClassName = ruleEngineTable.bodyCell;
+    return [
+      {
+        id: "setting",
+        header: "Setting",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => {
+          const s = row.original;
+          return (
+            <Group gap="sm" wrap="nowrap">
+              <ThemeIcon size={40} radius="md" variant="light" color="edr-green">
+                <FileUp size={18} />
+              </ThemeIcon>
+              <Stack gap={0} style={{ minWidth: 0, maxWidth: 260 }}>
+                <Text size="sm" fw={600} lh={1.2} truncate>
+                  {s.label}
+                </Text>
+                <Text size="xs" c="dimmed" truncate>
+                  {s.description ?? "No description"}
+                </Text>
+              </Stack>
+            </Group>
+          );
+        },
+      },
+      {
+        id: "code",
+        header: "Code",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => <Code>{row.original.code}</Code>,
+      },
+      {
+        id: "entity",
+        header: "Entity",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => (
+          <Badge variant="light" color="gray" tt="capitalize">
+            {row.original.entity ?? "—"}
+          </Badge>
+        ),
+      },
+      {
+        id: "fields",
+        header: "Fields",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => (
+          <Group gap={6} wrap="nowrap">
+            <Paperclip size={15} color="var(--mantine-color-edr-green-6)" />
+            <Text size="sm" fw={500}>
+              {row.original.fields.length}
+            </Text>
+          </Group>
+        ),
+      },
+      {
+        id: "requiredMulti",
+        header: "Required / Multi",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => {
+          const required = row.original.fields.filter((f) => f.isRequired).length;
+          const multi = row.original.fields.filter((f) => f.isMultiple).length;
+          return (
+            <Group gap={6} wrap="nowrap">
+              <Badge variant="light" color="edr-green">
+                {required} required
+              </Badge>
+              <Badge variant="light" color="gray">
+                {multi} multi
+              </Badge>
+            </Group>
+          );
+        },
+      },
+      {
+        id: "maxSize",
+        header: "Max size",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => {
+          const maxSize = Math.max(
+            0,
+            ...row.original.fields.map((f) => f.maxSizeMb),
+          );
+          return (
+            <Group gap={6} wrap="nowrap">
+              <HardDrive size={15} color="var(--mantine-color-gray-5)" />
+              <Text size="sm">{maxSize ? `${maxSize} MB` : "—"}</Text>
+            </Group>
+          );
+        },
+      },
+      {
+        id: "actions",
+        header: "Actions",
+        meta: {
+          headerClassName,
+          cellClassName: `${cellClassName} whitespace-nowrap`,
+        },
+        cell: ({ row }) => {
+          const setting = row.original;
+          return (
+            <Group gap="xs" justify="flex-end" wrap="nowrap">
+              <ManageFileUploadFieldsDialog setting={setting}>
+                <Button
+                  variant="default"
+                  size="xs"
+                  leftSection={<Paperclip size={14} />}
+                >
+                  Fields
+                </Button>
+              </ManageFileUploadFieldsDialog>
 
-        {/* Header */}
-        <div className="flex flex-col gap-4 rounded-3xl bg-white p-6 shadow-sm md:flex-row md:items-center md:justify-between">
-          <div>
-            <h1 className="text-3xl font-bold tracking-tight text-slate-900">
-              File Upload Settings
-            </h1>
-            <p className="mt-1 text-sm text-slate-500">
-              Define the file inputs every form in the platform should render —
-              required/optional, single/multiple, allowed types and size.
-            </p>
-          </div>
+              <EditFileUploadSettingDialog mode="edit" setting={setting}>
+                <ActionIcon variant="default" aria-label="Edit setting">
+                  <Pencil size={16} />
+                </ActionIcon>
+              </EditFileUploadSettingDialog>
 
-          <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
-            <div className="relative w-full sm:w-80">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
-              <input
-                type="search"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="Search by code, label, or file key..."
-                className="h-10 w-full rounded-2xl border border-slate-200 bg-white pl-10 pr-4 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-[#10B981]/50 focus:ring-2 focus:ring-[#10B981]/20"
-              />
-            </div>
-
-            <EditFileUploadSettingDialog mode="create">
-              <button
-                type="button"
-                className="inline-flex w-35 items-center justify-center gap-2 rounded-md bg-[#10B981] px-4 py-2 text-sm font-medium text-white transition hover:bg-[#10B981]/90"
+              <DeleteFileUploadSettingDialog
+                settingLabel={setting.label}
+                settingCode={setting.code}
+                onConfirm={() => deleteMutation.mutate(setting.id)}
               >
-                <Plus className="h-4 w-4" />
-                New Setting
-              </button>
-            </EditFileUploadSettingDialog>
-          </div>
-        </div>
+                <ActionIcon
+                  variant="default"
+                  color="red"
+                  disabled={deleteMutation.isPending}
+                  aria-label="Delete setting"
+                >
+                  <Trash2 size={16} />
+                </ActionIcon>
+              </DeleteFileUploadSettingDialog>
+            </Group>
+          );
+        },
+      },
+    ];
+  }, [deleteMutation]);
 
-        {/* Stats */}
-        <div className="grid gap-4 md:grid-cols-4">
-          <StatCard
-            title="Settings"
-            value={String(fileUploadSettings.length)}
-            icon={<Settings className="h-5 w-5" />}
-          />
-          <StatCard
-            title="Total Fields"
-            value={String(totalFields)}
-            icon={<Paperclip className="h-5 w-5" />}
-          />
-          <StatCard
-            title="Required"
-            value={String(requiredFields)}
-            icon={<FileUp className="h-5 w-5" />}
-          />
-          <StatCard
-            title="Multi-file"
-            value={String(multiFields)}
-            icon={<Layers className="h-5 w-5" />}
-          />
-        </div>
+  const tableStatus = isLoading ? "loading" : isError ? "error" : "success";
 
-        {/* Table */}
-        <div className="overflow-hidden rounded-3xl bg-white shadow-sm">
-          <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4">
-            <div>
-              <h2 className="text-lg font-semibold text-slate-900">
-                Registered File Upload Groups
-              </h2>
-              <p className="text-sm text-slate-500">
-                Every group a form can reference by code.
-              </p>
-            </div>
+  return (
+    <PageContainer>
+      <PageHeader
+        title="File upload settings"
+        subtitle="Define the file inputs every form in the platform should render — required/optional, single/multiple, allowed types and size."
+        action={
+          <EditFileUploadSettingDialog mode="create">
+            <Button leftSection={<Plus size={18} />}>New setting</Button>
+          </EditFileUploadSettingDialog>
+        }
+      />
 
-            <button className="inline-flex items-center gap-2 rounded-2xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]">
-              <Filter className="h-4 w-4" />
-              Filter
-            </button>
-          </div>
+      <KpiStrip
+        loading={isLoading}
+        items={[
+          { label: "Settings", value: fileUploadSettings.length, icon: Settings },
+          { label: "Total fields", value: totalFields, icon: Paperclip },
+          { label: "Required", value: requiredFields, icon: FileUp },
+          { label: "Multi-file", value: multiFields, icon: Layers },
+        ]}
+      />
 
-          <div className="overflow-x-auto">
-            <table className="w-full min-w-[1100px] whitespace-nowrap text-left">
-              <thead className="bg-slate-50 text-sm text-slate-500">
-                <tr>
-                  <th className="px-6 py-4 font-medium">Setting</th>
-                  <th className="px-6 py-4 font-medium">Code</th>
-                  <th className="px-6 py-4 font-medium">Entity</th>
-                  <th className="px-6 py-4 font-medium">Fields</th>
-                  <th className="px-6 py-4 font-medium">Required / Multi</th>
-                  <th className="px-6 py-4 font-medium">Max Size</th>
-                  <th className="px-6 py-4 font-medium text-right">Actions</th>
-                </tr>
-              </thead>
+      <Card p={0}>
+        <Stack gap={0}>
+          <Box px="md" pt="md" pb="sm" w="100%">
+            <TextInput
+              placeholder="Search by code, label, or file key…"
+              leftSection={<Search size={18} />}
+              value={query}
+              onChange={(e) => setQuery(e.currentTarget.value)}
+              rightSection={
+                query ? (
+                  <ActionIcon
+                    size="sm"
+                    color="gray"
+                    variant="transparent"
+                    onClick={() => setQuery("")}
+                    aria-label="Clear search"
+                  >
+                    <X size={16} />
+                  </ActionIcon>
+                ) : null
+              }
+              style={{ maxWidth: 420 }}
+            />
+          </Box>
 
-              <tbody>
-                {isLoading ? (
-                  <tr>
-                    <td colSpan={7} className="px-6 py-12 text-center">
-                      <Loader2 className="mx-auto h-6 w-6 animate-spin text-[#10B981]" />
-                      <p className="mt-2 text-sm text-slate-500">
-                        Loading file upload settings…
-                      </p>
-                    </td>
-                  </tr>
-                ) : isError ? (
-                  <tr>
-                    <td colSpan={7} className="px-6 py-12 text-center">
-                      <AlertCircle className="mx-auto h-6 w-6 text-red-500" />
-                      <p className="mt-2 text-sm text-red-600">
-                        Failed to load settings.{" "}
-                        {error instanceof Error ? error.message : "Unknown error."}
-                      </p>
-                    </td>
-                  </tr>
-                ) : filtered.length === 0 ? (
-                  <tr>
-                    <td
-                      colSpan={7}
-                      className="px-6 py-12 text-center text-sm text-slate-500"
-                    >
-                      {fileUploadSettings.length === 0
-                        ? "No file upload settings yet. Click \"New Setting\" to add one."
-                        : "No file upload settings match your search."}
-                    </td>
-                  </tr>
-                ) : (
-                  filtered.map((setting) => {
-                    const required = setting.fields.filter(
-                      (f: any) => f.isRequired,
-                    ).length;
-                    const multi = setting.fields.filter(
-                      (f: any) => f.isMultiple,
-                    ).length;
-                    const maxSize = Math.max(
-                      0,
-                      ...setting.fields.map((f) => f.maxSizeMb),
-                    );
+          <Box style={{ overflowX: "auto" }} w="100%">
+            <DataTable
+              columns={columns}
+              data={filtered}
+              status={tableStatus}
+              error={
+                isError
+                  ? {
+                      message: "Failed to load settings.",
+                      description:
+                        error instanceof Error ? error.message : "Unknown error.",
+                      onRetry: () => void refetch(),
+                    }
+                  : undefined
+              }
+              emptyMessage={
+                query.trim()
+                  ? "No file upload settings match your search."
+                  : 'No file upload settings yet. Click "New setting" to add one.'
+              }
+              containerClassName="border-0 shadow-none bg-transparent min-w-[920px]"
+            />
+          </Box>
+        </Stack>
+      </Card>
 
-                    return (
-                      <tr
-                        key={setting.id}
-                        className="border-t border-slate-100 transition hover:bg-[#10B981]/5"
-                      >
-                        <td className="px-6 py-4">
-                          <div className="flex items-center gap-3">
-                            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#10B981] text-white">
-                              <FileUp className="h-5 w-5" />
-                            </div>
-                            <div>
-                              <p className="font-medium text-slate-900">
-                                {setting.label}
-                              </p>
-                              <p className="text-xs text-slate-500">
-                                {setting.description ?? "No description"}
-                              </p>
-                            </div>
-                          </div>
-                        </td>
+      <BehaviorReferenceCard />
+    </PageContainer>
+  );
+}
 
-                        <td className="px-6 py-4">
-                          <span className="rounded-md bg-slate-100 px-2 py-1 font-mono text-xs text-slate-700">
-                            {setting.code}
-                          </span>
-                        </td>
+/**
+ * Static reference: how `min_files` / `max_files` are derived from the
+ * Required × Multiple toggles. Documentation aid for whoever wires uploaders.
+ */
+function BehaviorReferenceCard() {
+  const rows: { required: boolean; multiple: boolean; min: string; max: string }[] =
+    [
+      { required: false, multiple: false, min: "0", max: "1" },
+      { required: true, multiple: false, min: "1", max: "1" },
+      { required: false, multiple: true, min: "0", max: "field.maxFiles" },
+      { required: true, multiple: true, min: "1", max: "field.maxFiles" },
+    ];
 
-                        <td className="px-6 py-4">
-                          <span className="inline-flex rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium capitalize text-slate-600">
-                            {setting.entity ?? "—"}
-                          </span>
-                        </td>
+  return (
+    <Card>
+      <Stack gap="xs">
+        <Text fw={600}>Required × Multiple behavior</Text>
+        <Text size="sm" c="dimmed">
+          Min and max file counts are derived from these two toggles. The
+          &quot;Max files&quot; you set on a field is only used when{" "}
+          <Text span fw={600}>
+            Multiple
+          </Text>{" "}
+          is on.
+        </Text>
 
-                        <td className="px-6 py-4">
-                          <div className="flex items-center gap-2 text-sm text-slate-700">
-                            <Paperclip className="h-4 w-4 text-[#10B981]" />
-                            <span className="font-medium">
-                              {setting.fields.length}
-                            </span>
-                          </div>
-                        </td>
+        <Table mt="sm" striped withRowBorders={false} verticalSpacing="xs">
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Required</Table.Th>
+              <Table.Th>Multiple</Table.Th>
+              <Table.Th>min_files</Table.Th>
+              <Table.Th>max_files</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {rows.map((r) => (
+              <Table.Tr key={`${r.required}-${r.multiple}`}>
+                <Table.Td>
+                  <Badge variant="light" color={r.required ? "edr-green" : "gray"}>
+                    {r.required ? "Required" : "Optional"}
+                  </Badge>
+                </Table.Td>
+                <Table.Td>
+                  <Badge variant="light" color={r.multiple ? "edr-green" : "gray"}>
+                    {r.multiple ? "Multiple" : "Single"}
+                  </Badge>
+                </Table.Td>
+                <Table.Td>
+                  <Code>{r.min}</Code>
+                </Table.Td>
+                <Table.Td>
+                  <Code>{r.max}</Code>
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
 
-                        <td className="px-6 py-4 text-sm text-slate-700">
-                          <div className="flex flex-wrap items-center gap-1">
-                            <Chip>{required} required</Chip>
-                            <Chip muted>{multi} multi</Chip>
-                          </div>
-                        </td>
-
-                        <td className="px-6 py-4 text-sm text-slate-700">
-                          <div className="flex items-center gap-1.5">
-                            <HardDrive className="h-4 w-4 text-slate-400" />
-                            {maxSize ? `${maxSize} MB` : "—"}
-                          </div>
-                        </td>
-
-                        <td className="px-6 py-4">
-                          <div className="flex justify-end gap-2">
-                            <ManageFileUploadFieldsDialog setting={setting}>
-                              <button
-                                type="button"
-                                className="inline-flex items-center gap-1 rounded-xl border border-slate-200 px-3 py-1.5 text-xs font-medium text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-                              >
-                                <Paperclip className="h-3.5 w-3.5" />
-                                Fields
-                              </button>
-                            </ManageFileUploadFieldsDialog>
-
-                            <EditFileUploadSettingDialog
-                              mode="edit"
-                              setting={setting}
-                            >
-                              <button
-                                type="button"
-                                className="rounded-xl border border-slate-200 p-2 text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-                              >
-                                <Pencil className="h-4 w-4" />
-                              </button>
-                            </EditFileUploadSettingDialog>
-
-                            <DeleteFileUploadSettingDialog
-                              settingLabel={setting.label}
-                              settingCode={setting.code}
-                              onConfirm={() =>
-                                deleteMutation.mutate(setting.id)
-                              }
-                            >
-                              <button
-                                type="button"
-                                disabled={deleteMutation.isPending}
-                                className="rounded-xl border border-red-200 p-2 text-red-600 transition hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50"
-                              >
-                                <Trash2 className="h-4 w-4" />
-                              </button>
-                            </DeleteFileUploadSettingDialog>
-                          </div>
-                        </td>
-                      </tr>
-                    );
-                  })
-                )}
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        {/* Behavior reference card */}
-        <div className="rounded-3xl bg-white p-6 shadow-sm">
-          <h2 className="text-lg font-semibold text-slate-900">
-            Required × Multiple behavior
-          </h2>
-          <p className="mt-1 text-sm text-slate-500">
-            Min and max file counts are derived from these two toggles. The
-            "Max Files" you set on a field is only used when{" "}
-            <span className="font-medium">Multiple</span> is on.
-          </p>
-          <div className="mt-4 overflow-x-auto">
-            <table className="w-full whitespace-nowrap text-left text-sm">
-              <thead className="text-xs text-slate-500">
-                <tr>
-                  <th className="py-2 font-medium">Required</th>
-                  <th className="py-2 font-medium">Multiple</th>
-                  <th className="py-2 font-medium">min_files</th>
-                  <th className="py-2 font-medium">max_files</th>
-                </tr>
-              </thead>
-              <tbody>
-                <BehaviorRow
-                  required={false}
-                  multiple={false}
-                  min="0"
-                  max="1"
-                />
-                <BehaviorRow
-                  required={true}
-                  multiple={false}
-                  min="1"
-                  max="1"
-                />
-                <BehaviorRow
-                  required={false}
-                  multiple={true}
-                  min="0"
-                  max="field.maxFiles"
-                />
-                <BehaviorRow
-                  required={true}
-                  multiple={true}
-                  min="1"
-                  max="field.maxFiles"
-                />
-              </tbody>
-            </table>
-          </div>
-          <p className="mt-3 text-xs text-slate-500">
-            Helpers <span className="font-mono">getMinFiles</span> and{" "}
-            <span className="font-mono">getEffectiveMaxFiles</span> live in{" "}
-            <span className="font-mono">@/types/fileUploadSettings</span> — use
-            them when wiring real uploaders. Example: a field with{" "}
-            <span className="font-mono">isRequired=false</span>,{" "}
-            <span className="font-mono">isMultiple=true</span>,{" "}
-            <span className="font-mono">maxFiles=5</span> gives{" "}
-            <span className="font-mono">{getMinFiles({
-              id: "demo",
-              fileKey: "demo",
-              fileLabel: "demo",
+        <Text size="xs" c="dimmed">
+          Helpers <Code>getMinFiles</Code> and <Code>getEffectiveMaxFiles</Code>{" "}
+          live in <Code>@/types/fileUploadSettings</Code> — use them when wiring
+          real uploaders. Example: a field with <Code>isRequired=false</Code>,{" "}
+          <Code>isMultiple=true</Code>, <Code>maxFiles=5</Code> gives min{" "}
+          <Code>
+            {getMinFiles({
               isRequired: false,
-              isMultiple: true,
-              maxFiles: 5,
-              allowedExtensions: [],
-              maxSizeMb: 1,
-            })}</span>
-            …5.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function BehaviorRow({
-  required,
-  multiple,
-  min,
-  max,
-}: {
-  required: boolean;
-  multiple: boolean;
-  min: string;
-  max: string;
-}) {
-  return (
-    <tr className="border-t border-slate-100">
-      <td className="py-2.5">
-        <Chip muted={!required}>{required ? "Required" : "Optional"}</Chip>
-      </td>
-      <td className="py-2.5">
-        <Chip muted={!multiple}>{multiple ? "Multiple" : "Single"}</Chip>
-      </td>
-      <td className="py-2.5 font-mono text-slate-700">{min}</td>
-      <td className="py-2.5 font-mono text-slate-700">{max}</td>
-    </tr>
-  );
-}
-
-function Chip({
-  children,
-  muted = false,
-}: {
-  children: React.ReactNode;
-  muted?: boolean;
-}) {
-  return (
-    <span
-      className={
-        muted
-          ? "rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-600"
-          : "rounded-full bg-[#10B981]/10 px-2 py-0.5 text-xs font-medium text-[#10B981]"
-      }
-    >
-      {children}
-    </span>
-  );
-}
-
-function StatCard({
-  title,
-  value,
-  icon,
-}: {
-  title: string;
-  value: string;
-  icon: React.ReactNode;
-}) {
-  return (
-    <div className="rounded-3xl bg-white p-6 shadow-sm transition hover:shadow-md hover:ring-1 hover:ring-[#10B981]/20">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-sm text-slate-500">{title}</p>
-          <h3 className="mt-2 text-3xl font-bold text-slate-900">{value}</h3>
-        </div>
-        <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#10B981] text-white">
-          {icon}
-        </div>
-      </div>
-    </div>
+            })}
+          </Code>{" "}
+          …5.
+        </Text>
+      </Stack>
+    </Card>
   );
 }

apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx

@@ -1,25 +1,35 @@
-import { useEffect, useMemo, useState } from "react";
-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 {
+  Archive,
+  Circle,
+  CircleCheck,
+  CircleSlash,
+  Layers,
+  Link2,
+  Plus,
+  Wrench,
+  type LucideIcon,
+} from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { Navigate, useLocation } from "react-router-dom";
 
-import { PageContainer } from "@/components/page";
 import FleetCardGrid from "@/components/fleet/FleetCardGrid";
 import FleetFormDialog from "@/components/fleet/FleetFormDialog";
 import FleetRecordActions from "@/components/fleet/FleetRecordActions";
 import FleetToolbar from "@/components/fleet/FleetToolbar";
 import { formatFleetCell, registerFleetOptionLabels } from "@/components/fleet/fleetFormat";
 import { useFleetViewMode } from "@/components/fleet/useFleetViewMode";
+import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
+import { useFleetList, useFleetMutations } from "@/hooks/fleet/useFleet";
 import { useCargoTypes } from "@/hooks/use-cargo-types";
 import { useContainerTypes } from "@/hooks/use-container-types";
-import { useWagonTypes } from "@/hooks/use-wagon-types";
-import { useFleetList, useFleetMutations } from "@/hooks/fleet/useFleet";
-import { useContainers } from "@/hooks/useContainers";
 import { useToast } from "@/hooks/use-toast";
+import { useWagonTypes } from "@/hooks/use-wagon-types";
+import { useContainers } from "@/hooks/useContainers";
 import { useRouteYards } from "@/hooks/useRoutes";
 import { useWagons } from "@/hooks/useWagons";
-import type { FleetListFilters } from "@/services/fleet/fleet.service";
 import {
   FLEET_SELECT_NONE,
   getFleetResource,
@@ -27,11 +37,27 @@ import {
   type FleetFormFieldDef,
   type FleetResourceSlug,
 } from "@/pages/fleet/config/resources";
-import type { FleetRecord } from "@/services/fleet/fleet.service";
+import type { FleetListFilters, FleetRecord } from "@/services/fleet/fleet.service";
 import { DataTable, DataTableFooter, usePagination } from "@edr/ui-common";
 
 const DEFAULT_SLUG: FleetResourceSlug = "locomotives";
 
+const FLEET_STATUS_META: Record<
+  string,
+  { label: string; icon: LucideIcon; color: string }
+> = {
+  AVAILABLE: { label: "Available", icon: CircleCheck, color: "edr-green" },
+  ASSIGNED: { label: "Assigned", icon: Link2, color: "blue" },
+  MAINTENANCE: { label: "Maintenance", icon: Wrench, color: "yellow" },
+  OUT_OF_SERVICE: { label: "Out of service", icon: CircleSlash, color: "red" },
+  RETIRED: { label: "Retired", icon: Archive, color: "gray" },
+};
+
+const humanizeStatus = (status: string) => {
+  const text = status.replace(/_/g, " ").toLowerCase();
+  return text.charAt(0).toUpperCase() + text.slice(1);
+};
+
 const FleetResourcePage = () => {
   const location = useLocation();
   const slug = getFleetSlugFromPath(location.pathname) ?? DEFAULT_SLUG;
@@ -250,6 +276,39 @@ const FleetResourcePage = () => {
 
   const tableStatus = isLoading ? "loading" : isError ? "error" : "success";
 
+  const kpiItems = useMemo(() => {
+    const items = [
+      {
+        label: `Total ${config?.label.toLowerCase() ?? ""}`,
+        value: allRows.length,
+        icon: Layers,
+        color: "edr-green",
+      },
+    ];
+    if (hasStatusColumn) {
+      const counts = new Map<string, number>();
+      for (const row of allRows) {
+        const status = String(
+          (row as unknown as Record<string, unknown>).status ?? "",
+        );
+        if (status) counts.set(status, (counts.get(status) ?? 0) + 1);
+      }
+      const top = [...counts.entries()]
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, 4);
+      for (const [status, count] of top) {
+        const meta = FLEET_STATUS_META[status];
+        items.push({
+          label: meta?.label ?? humanizeStatus(status),
+          value: count,
+          icon: meta?.icon ?? Circle,
+          color: meta?.color ?? "gray",
+        });
+      }
+    }
+    return items.slice(0, 5);
+  }, [allRows, hasStatusColumn, config?.label]);
+
   if (!config) {
     return <Navigate to="/dashboard/locomotives" replace />;
   }
@@ -293,6 +352,24 @@ const FleetResourcePage = () => {
 
   return (
     <PageContainer>
+      <PageHeader
+        title={config.label}
+        subtitle={config.subtitle}
+        action={
+          <Button
+            leftSection={<Plus size={18} />}
+            onClick={() => {
+              setEditing(null);
+              setFormOpen(true);
+            }}
+          >
+            {config.addLabel}
+          </Button>
+        }
+      />
+
+      <KpiStrip loading={isLoading} items={kpiItems} />
+
       <Card radius="lg" padding={0} withBorder>
         <Stack gap={0}>
           <Box px="md" pt="md" pb="sm" w="100%">
@@ -301,11 +378,6 @@ const FleetResourcePage = () => {
               onSearchChange={setSearch}
               searchPlaceholder={config.searchPlaceholder}
               showSearch={config.supportsSearch}
-              addLabel={config.addLabel}
-              onAdd={() => {
-                setEditing(null);
-                setFormOpen(true);
-              }}
               viewMode={viewMode}
               onViewModeChange={setViewMode}
               filters={
@@ -316,7 +388,6 @@ const FleetResourcePage = () => {
                         key={filter.key}
                         size="sm"
                         radius="lg"
-                        label={filter.label}
                         value={filter.value}
                         onChange={(v) => {
                           if (!v) return;

apps/edr-freight-web/backoffice/src/pages/fleet/RoutesPage.tsx

@@ -1,5 +1,5 @@
 import { FormEvent, useMemo, useState } from "react";
-import { Edit, Eye, Trash2 } from "lucide-react";
+import { Ban, CircleCheck, Edit, Eye, Plus, Route as RouteIcon, Trash2 } from "lucide-react";
 import type { ColumnDef } from "@edr/ui-common";
 import {
   ActionIcon,
@@ -17,7 +17,7 @@ import {
   Tooltip,
 } from "@mantine/core";
 
-import { PageContainer } from "@/components/page";
+import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
 import FleetToolbar from "@/components/fleet/FleetToolbar";
 import { useFleetViewMode } from "@/components/fleet/useFleetViewMode";
 import RuleEngineListFooter from "@/components/ruleEngine/RuleEngineListFooter";
@@ -102,6 +102,9 @@ export default function RoutesPage() {
     return filteredRoutes.slice(start, start + pagination.pageSize);
   }, [filteredRoutes, pagination.pageIndex, pagination.pageSize]);
 
+  const allRoutes = routesQuery.data ?? [];
+  const activeCount = allRoutes.filter((route) => route.isActive).length;
+
   const yardOptions = useMemo(
     () =>
       (yardsQuery.data ?? []).map((yard) => ({
@@ -281,6 +284,30 @@ export default function RoutesPage() {
 
   return (
     <PageContainer>
+      <PageHeader
+        title="Routes"
+        subtitle="Define rail corridors and their ordered yard stops used by train scheduling."
+        action={
+          <Button leftSection={<Plus size={18} />} onClick={openCreate}>
+            Add route
+          </Button>
+        }
+      />
+
+      <KpiStrip
+        loading={routesQuery.isLoading}
+        items={[
+          { label: "Total routes", value: allRoutes.length, icon: RouteIcon },
+          { label: "Active", value: activeCount, icon: CircleCheck, color: "edr-green" },
+          {
+            label: "Inactive",
+            value: allRoutes.length - activeCount,
+            icon: Ban,
+            color: "gray",
+          },
+        ]}
+      />
+
       <Card radius="lg" padding={0} withBorder>
         <Stack gap={0}>
           <Box px="md" pt="md" pb="sm" w="100%">
@@ -288,8 +315,6 @@ export default function RoutesPage() {
               search={search}
               onSearchChange={setSearch}
               searchPlaceholder="Search routes…"
-              addLabel="Add Route"
-              onAdd={openCreate}
               viewMode={viewMode}
               onViewModeChange={setViewMode}
             />

apps/edr-freight-web/backoffice/src/pages/payments/PaymentsPage.tsx

@@ -1,5 +1,6 @@
 import {
   ActionIcon,
+  Box,
   Card,
   Group,
   Badge as MantineBadge,
@@ -268,49 +269,51 @@ export default function PaymentsPage() {
         </Tabs.List>
       </Tabs>
 
-      <Card padding="md">
-        <Stack gap="md">
-          <Group justify="space-between" gap="md" wrap="wrap">
-            <TextInput
-              placeholder="Search order, booking, or transaction…"
-              leftSection={<Search size={18} />}
-              value={query}
-              onChange={(e) => {
-                setQuery(e.target.value);
-                setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
-              }}
-              rightSection={
-                query && (
-                  <ActionIcon
-                    size="sm"
-                    color="gray"
-                    radius="md"
-                    variant="transparent"
-                    onClick={() => setQuery("")}
-                  >
-                    <X size={16} />
-                  </ActionIcon>
-                )
-              }
-              style={{ flex: 1, minWidth: "200px" }}
-            />
-            <Select
-              placeholder="All methods"
-              clearable
-              data={METHOD_OPTIONS}
-              value={method}
-              onChange={(value) => {
-                setMethod(value);
-                setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
-              }}
-              style={{ minWidth: 180 }}
-            />
-            <Text size="sm" c="dimmed">
-              {total} record{total !== 1 ? "s" : ""}
-            </Text>
-          </Group>
+      <Card p={0}>
+        <Stack gap={0}>
+          <Box px="md" pt="md" pb="sm" w="100%">
+            <Group justify="space-between" gap="md" wrap="wrap">
+              <TextInput
+                placeholder="Search order, booking, or transaction…"
+                leftSection={<Search size={18} />}
+                value={query}
+                onChange={(e) => {
+                  setQuery(e.target.value);
+                  setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                }}
+                rightSection={
+                  query && (
+                    <ActionIcon
+                      size="sm"
+                      color="gray"
+                      radius="md"
+                      variant="transparent"
+                      onClick={() => setQuery("")}
+                    >
+                      <X size={16} />
+                    </ActionIcon>
+                  )
+                }
+                style={{ flex: 1, minWidth: "200px" }}
+              />
+              <Select
+                placeholder="All methods"
+                clearable
+                data={METHOD_OPTIONS}
+                value={method}
+                onChange={(value) => {
+                  setMethod(value);
+                  setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                }}
+                style={{ minWidth: 180 }}
+              />
+              <Text size="sm" c="dimmed">
+                {total} record{total !== 1 ? "s" : ""}
+              </Text>
+            </Group>
+          </Box>
 
-          <div style={{ overflowX: "auto" }}>
+          <Box style={{ overflowX: "auto" }} w="100%">
             <DataTable
               columns={columns}
               data={rows}
@@ -327,9 +330,10 @@ export default function PaymentsPage() {
                 manualPagination: true,
                 pageCount,
               }}
+              containerClassName="border-0 shadow-none bg-transparent"
               footer={DataTableFooter}
             />
-          </div>
+          </Box>
         </Stack>
       </Card>
     </PageContainer>

apps/edr-freight-web/backoffice/src/pages/ruleEngine/RuleEngineResourcePage.tsx

@@ -3,9 +3,10 @@ import { Navigate, useLocation, useParams } from "react-router-dom";
 import { useAuth } from "@/auth/useAuth";
 import { canAccessRuleEngineResource } from "@/lib/permissions";
 import type { ColumnDef } from "@tanstack/react-table";
-import { Loader2 } from "lucide-react";
-import { Card, Button, Modal, Stack, Group, Text, List } from "@mantine/core";
+import { Box, Card, Button, Modal, Stack, Group, Text, List, Loader } from "@mantine/core";
+import { Plus } from "lucide-react";
 
+import { PageContainer, PageHeader } from "@/components/page";
 import RuleEngineCardGrid from "@/components/ruleEngine/RuleEngineCardGrid";
 import RuleEngineFormDialog from "@/components/ruleEngine/RuleEngineFormDialog";
 import ManageRuleEngineOrderDialog from "@/components/ruleEngine/ManageRuleEngineOrderDialog";
@@ -325,31 +326,44 @@ const RuleEngineResourcePage = () => {
   };
 
   const itemLabel = config.label.toLowerCase();
+  const addLabel = `Add ${config.label.replace(/s$/, "")}`;
 
   return (
-    <Stack gap="lg">
-      <Card p="lg" radius="lg" withBorder style={{ background: "white", boxShadow: "0 1px 3px rgba(0, 0, 0, 0.05)" }}>
-        <Stack gap="md">
-          <RuleEngineToolbar
-            search={search}
-            onSearchChange={
-              config.supportsSearch
-                ? (v) => {
-                    setSearch(v);
-                    setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
-                  }
-                : undefined
-            }
-            showSearch={Boolean(config.supportsSearch)}
-            searchPlaceholder={config.searchPlaceholder}
-            onAdd={canManage ? openCreate : undefined}
-            addLabel={`Add ${config.label.replace(/s$/, "")}`}
-            onManageOrder={
-              canManage && config.orderConfig ? () => setOrderDialogOpen(true) : undefined
-            }
-            viewMode={viewMode}
-            onViewModeChange={setViewMode}
-          />
+    <PageContainer>
+      <PageHeader
+        title={config.label}
+        subtitle={config.subtitle}
+        action={
+          canManage ? (
+            <Button leftSection={<Plus size={18} />} onClick={openCreate}>
+              {addLabel}
+            </Button>
+          ) : undefined
+        }
+      />
+
+      <Card p={0}>
+        <Stack gap={0}>
+          <Box px="md" pt="md" pb="sm" w="100%">
+            <RuleEngineToolbar
+              search={search}
+              onSearchChange={
+                config.supportsSearch
+                  ? (v) => {
+                      setSearch(v);
+                      setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                    }
+                  : undefined
+              }
+              showSearch={Boolean(config.supportsSearch)}
+              searchPlaceholder={config.searchPlaceholder}
+              onManageOrder={
+                canManage && config.orderConfig ? () => setOrderDialogOpen(true) : undefined
+              }
+              viewMode={viewMode}
+              onViewModeChange={setViewMode}
+            />
+          </Box>
 
           {viewMode === "table" ? (
             <DataTable
@@ -378,8 +392,7 @@ const RuleEngineResourcePage = () => {
                 state: { pagination },
                 onPaginationChange: setPagination,
               }}
-              containerClassName="border-0 shadow-none [&_[data-slot=table-row]]:border-border"
-              footerClassName="border-t border-border bg-card"
+              containerClassName="border-0 shadow-none bg-transparent"
               footer={({ table, pagination: footerPagination }) => (
                 <DataTableFooter
                   table={table}
@@ -473,16 +486,15 @@ const RuleEngineResourcePage = () => {
             </Button>
             <Button
               color="red"
-              disabled={remove.isPending}
+              loading={remove.isPending}
               onClick={() => {
                 if (!deleteTarget) return;
                 remove.mutate(deleteTarget.id, {
                   onSuccess: () => setDeleteTarget(null),
                 });
               }}
-              leftSection={remove.isPending && <Loader2 size={16} />}
             >
-              {remove.isPending ? "Deleting..." : "Delete"}
+              Delete
             </Button>
           </Group>
         </Stack>
@@ -498,7 +510,7 @@ const RuleEngineResourcePage = () => {
         <Stack gap="md">
           {chainLoading ? (
             <Group justify="center" p="xl">
-              <Loader2 size={32} style={{ animation: "spin 1s linear infinite" }} />
+              <Loader />
             </Group>
           ) : (
             <>
@@ -524,7 +536,7 @@ const RuleEngineResourcePage = () => {
           )}
         </Stack>
       </Modal>
-    </Stack>
+    </PageContainer>
   );
 };
 

apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2ListPage.tsx

@@ -1,6 +1,3 @@
-import { useEffect, useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { isAxiosError } from "axios";
 import type { ColumnDef } from "@edr/ui-common";
 import {
   ActionIcon,
@@ -17,6 +14,7 @@ import {
   TextInput,
   ThemeIcon,
 } from "@mantine/core";
+import { isAxiosError } from "axios";
 import {
   ArrowRight,
   Ban,
@@ -28,24 +26,26 @@ import {
   Train,
   Weight,
 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
 
-import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
 import FleetToolbar from "@/components/fleet/FleetToolbar";
 import { useFleetViewMode } from "@/components/fleet/useFleetViewMode";
+import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
+import RuleEngineListFooter from "@/components/ruleEngine/RuleEngineListFooter";
+import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
 import { FreightTypeBadge } from "@/components/trainScheduling/ScheduleStatusBadge";
 import {
   RouteCorridor,
   StatusPill,
 } from "@/components/trainScheduling/scheduleVisuals";
-import RuleEngineListFooter from "@/components/ruleEngine/RuleEngineListFooter";
-import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
-import { useRoutes } from "@/hooks/useRoutes";
 import {
   useAvailableLocomotives,
   useScheduleList,
   useScheduleMutations,
 } from "@/hooks/trainScheduling/useTrainScheduling";
 import { useToast } from "@/hooks/use-toast";
+import { useRoutes } from "@/hooks/useRoutes";
 import type { TrainScheduleListItem } from "@/types/trainScheduling";
 import { DataTable, DataTableFooter, usePagination } from "@edr/ui-common";
 
@@ -262,7 +262,7 @@ export default function TrainScheduleV2ListPage() {
       },
       {
         id: "actions",
-        header: "Actions",
+        size:32,
         meta: { headerClassName, cellClassName: `${cellClassName} whitespace-nowrap` },
         cell: ({ row }) => {
           const schedule = row.original;