Merge pull request #588 from Tria-plc/freight_feature/usermanagement

fix issues
2026-08-28 13:40:57 +00:00 · 2026-07-09 23:27:02 +03:00
parent 0a73d968b8 e4429592d3
commit 516dfd4032
29 changed files with 1143 additions and 147 deletions
--- a/apps/edr-freight-web/backoffice/src/components/trainScheduling/TrainCompositionDiagram.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/TrainCompositionDiagram.tsx
@@ -16,6 +16,7 @@ type DiagramWagonInput = {
  sequenceNo: number;
  capacityTons: number;
  assignedWeightTons: number;
+  tareWeightTons?: number | null;
  slotLoadType?: string | null;
  wagonType?: { code?: string | null } | null;
  wagonTypeCode?: string | null;
@@ -33,6 +34,7 @@ type NormalizedWagon = {
  sequenceNo: number;
  capacityTons: number;
  assignedWeightTons: number;
+  tareWeightTons: number;
  wagonTypeCode: string | null;
  physicalWagonNumber: string | null;
  isEmpty: boolean;
@@ -69,6 +71,7 @@ function normalizeWagon(w: DiagramWagonInput, freightType?: string | null): Norm
    sequenceNo: w.sequenceNo,
    capacityTons: Number(w.capacityTons) || 0,
    assignedWeightTons: Number(w.assignedWeightTons) || 0,
+    tareWeightTons: Number(w.tareWeightTons) || 0,
    wagonTypeCode: w.wagonType?.code ?? w.wagonTypeCode ?? null,
    physicalWagonNumber: w.physicalWagonNumber ?? null,
    isEmpty: allocations.length === 0,
@@ -278,7 +281,9 @@ function WagonCar({ wagon }: { wagon: NormalizedWagon }) {
        wagon.bookingRefs.length ? wagon.bookingRefs.join(", ") : ""
      }${
        wagon.containerNumbers.length ? `\nContainers: ${wagon.containerNumbers.join(", ")}` : ""
-      }${wagon.cargoDescription ? `\n${wagon.cargoDescription}` : ""}\nLoad: ${wagon.assignedWeightTons}/${wagon.capacityTons}T (${utilization}%)`;
+      }${wagon.cargoDescription ? `\n${wagon.cargoDescription}` : ""}\nLoad: ${wagon.assignedWeightTons}/${wagon.capacityTons}T (${utilization}%)${
+        wagon.tareWeightTons ? `\nTare: ${wagon.tareWeightTons}T` : ""
+      }`;

  // container blocks: one per container number (cap visual at 2 = TEU per wagon)
  const blocks = wagon.containerNumbers.slice(0, 2);
@@ -523,15 +528,22 @@ export function TrainCompositionDiagram({
    const assigned = normalized.filter((w) => !w.isEmpty).length;
    const totalWeight = normalized.reduce((s, w) => s + w.assignedWeightTons, 0);
    const totalCapacity = normalized.reduce((s, w) => s + w.capacityTons, 0);
+    // Every coupled wagon's tare is hauled — empty ones included — so the
+    // locomotive pull limit is measured against gross (tare + cargo), the same
+    // ceiling the allocation engine spends from.
+    const totalTare = normalized.reduce((s, w) => s + w.tareWeightTons, 0);
+    const grossWeight = totalWeight + totalTare;
    return {
      total: normalized.length,
      assigned,
      empty: normalized.length - assigned,
      totalWeight: Math.round(totalWeight * 100) / 100,
+      totalTare: Math.round(totalTare * 100) / 100,
+      grossWeight: Math.round(grossWeight * 100) / 100,
      totalCapacity,
      pullUtil:
        locomotive?.maxPullWeightTons && locomotive.maxPullWeightTons > 0
-          ? Math.min(100, Math.round((totalWeight / locomotive.maxPullWeightTons) * 100))
+          ? Math.min(100, Math.round((grossWeight / locomotive.maxPullWeightTons) * 100))
          : null,
    };
  }, [normalized, locomotive]);
@@ -598,12 +610,30 @@ export function TrainCompositionDiagram({
              }}
            >
              <Text size="xs" fw={700} c="dark.4">
-                {stats.totalWeight}T
+                {stats.totalWeight}T cargo
              </Text>
              <Text size="xs" c="dimmed">
                of {stats.totalCapacity}T capacity
              </Text>
            </Group>
+            {stats.totalTare > 0 ? (
+              <Group
+                gap={6}
+                style={{
+                  padding: "4px 12px",
+                  borderRadius: 999,
+                  background: "var(--mantine-color-gray-0)",
+                  border: "1px solid var(--mantine-color-gray-2)",
+                }}
+              >
+                <Text size="xs" fw={700} c="dark.4">
+                  {stats.grossWeight}T gross
+                </Text>
+                <Text size="xs" c="dimmed">
+                  incl. {stats.totalTare}T tare
+                </Text>
+              </Group>
+            ) : null}
            <Group gap="xs">
              <LegendDot color="cyan" label="Container" />
              <LegendDot color="orange" label="Bulk" />
@@ -626,7 +656,10 @@ export function TrainCompositionDiagram({
              <Group gap={6} wrap="nowrap">
                <Gauge size={14} color={freightBrand.primary} />
                <Text size="xs" fw={700} c="edr-green.8">
-                  Locomotive load · {stats.totalWeight}T of {locomotive?.maxPullWeightTons}T
+                  Locomotive load ·{" "}
+                  {stats.totalTare > 0
+                    ? `${stats.grossWeight}T of ${locomotive?.maxPullWeightTons}T (${stats.totalWeight}T cargo + ${stats.totalTare}T tare)`
+                    : `${stats.totalWeight}T of ${locomotive?.maxPullWeightTons}T`}
                </Text>
              </Group>
              <Text size="sm" fw={800} c={stats.pullUtil > 95 ? "red.7" : "edr-green.7"}>
--- a/apps/edr-freight-web/backoffice/src/constants/QUERY_KEYS.ts
+++ b/apps/edr-freight-web/backoffice/src/constants/QUERY_KEYS.ts
@@ -103,7 +103,8 @@ export const QUERY_KEYS = {
    schedules: () => ["train-scheduling", "schedules"] as const,
    scheduleById: (id: string) => ["train-scheduling", "schedule", id] as const,
    track: (id: string) => ["train-scheduling", "track", id] as const,
-    batchBoard: () => ["train-scheduling", "batch-board"] as const,
+    batchBoard: (filters?: unknown) =>
+      ["train-scheduling", "batch-board", "list", filters ?? {}] as const,
    batchBoardDetail: (scheduleId: string) =>
      ["train-scheduling", "batch-board", scheduleId] as const,
    unassignedBookings: (id: string) =>
--- a/apps/edr-freight-web/backoffice/src/features/contracts/mapContractListRow.ts
+++ b/apps/edr-freight-web/backoffice/src/features/contracts/mapContractListRow.ts
@@ -80,7 +80,7 @@ export function toContractListRow(contract: Freight.IContract): ContractListRow
    approvalSteps: contract.approvalSteps,
    customerLabel: contract.isGovernment
      ? (contract.governmentInstitution ?? "Government")
-      : (contract.companyId ?? "—"),
+      : (contract.company?.name ?? "—"),
    status: contract.status,
    contractKind: contract.contractKind,
    tradeDirection: contract.tradeDirection,
--- a/apps/edr-freight-web/backoffice/src/lib/queryClient.ts
+++ b/apps/edr-freight-web/backoffice/src/lib/queryClient.ts
@@ -28,6 +28,10 @@ export const queryClient = new QueryClient({
    queries: {
      retry: 1,
      staleTime: 30_000,
+      // Data freshness is driven by mutation invalidation (MutationCache above),
+      // socket pushes, and explicit polling — not by tab focus. Focus refetch
+      // just re-fires every mounted query each time the window is refocused.
+      refetchOnWindowFocus: false,
    },
  },
 });
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
@@ -4,18 +4,21 @@ import {
  Button,
  Card,
  Group,
+  MultiSelect,
  Select,
  Stack,
  Tabs,
  Text,
  TextInput,
 } from "@mantine/core";
+import { DateInput } from "@mantine/dates";
 import {
  AlertTriangle,
  ArrowRight,
  Calendar,
  CheckCircle2,
  Clock,
+  FilterX,
  LayoutList,
  Package,
  Plus,
@@ -26,6 +29,7 @@ import {
 } from "lucide-react";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";

 import { BookingActionsMenu } from "@/components/bookings/BookingActionsMenu";
 import { BookingApprovalProgressCell } from "@/components/bookings/BookingApprovalProgressCell";
@@ -43,6 +47,7 @@ import {
  useBookingList,
  useBookingListSummary,
 } from "@/hooks/bookings/useBookings";
+import { api } from "@/services/api";
 import type { BookingListFilter } from "@/services/bookings.service";
 import type { BookingListRow } from "@/types/booking";
 import {
@@ -77,6 +82,33 @@ const FREIGHT_TYPE_OPTIONS = [
  { value: "BULK", label: "Bulk" },
 ];

+const PAYMENT_STATUS_OPTIONS = [
+  { value: "PENDING", label: "Payment pending" },
+  { value: "PNR_GENERATED", label: "PNR generated" },
+  { value: "VERIFICATION_IN_PROGRESS", label: "Verification in progress" },
+  { value: "PAID", label: "Paid" },
+  { value: "FAILED", label: "Payment failed" },
+];
+
+const OWNERSHIP_OPTIONS = [
+  { value: "true", label: "Government" },
+  { value: "false", label: "Private" },
+];
+
+/** Local start-of-day → ISO, for inclusive "from" date filters. */
+function startOfDayIso(d: Date): string {
+  const x = new Date(d);
+  x.setHours(0, 0, 0, 0);
+  return x.toISOString();
+}
+
+/** Local end-of-day → ISO, for inclusive "to" date filters. */
+function endOfDayIso(d: Date): string {
+  const x = new Date(d);
+  x.setHours(23, 59, 59, 999);
+  return x.toISOString();
+}
+
 function formatDate(value: string | null | undefined): string {
  if (!value) return "—";
  const d = new Date(value);
@@ -95,10 +127,18 @@ export default function BookingRequestsPage() {
  const [query, setQuery] = useState("");
  // Booking-kind tabs (one-time vs general contract) replace the old status tabs.
  const [kindTab, setKindTab] = useState<BookingKindTab>("ONE_TIME");
-  // Per-tab filter selects (each nullable = "all").
-  const [statusFilter, setStatusFilter] = useState<string | null>(null);
+  // Per-tab filter controls (empty/null = "all").
+  const [statusFilter, setStatusFilter] = useState<string[]>([]);
  const [directionFilter, setDirectionFilter] = useState<string | null>(null);
  const [freightTypeFilter, setFreightTypeFilter] = useState<string | null>(null);
+  const [paymentStatusFilter, setPaymentStatusFilter] = useState<string | null>(null);
+  const [ownershipFilter, setOwnershipFilter] = useState<string | null>(null);
+  const [originYardFilter, setOriginYardFilter] = useState<string | null>(null);
+  const [destinationYardFilter, setDestinationYardFilter] = useState<string | null>(null);
+  const [createdFrom, setCreatedFrom] = useState<Date | null>(null);
+  const [createdTo, setCreatedTo] = useState<Date | null>(null);
+  const [scheduledFrom, setScheduledFrom] = useState<Date | null>(null);
+  const [scheduledTo, setScheduledTo] = useState<Date | null>(null);
  const [allocateOpen, setAllocateOpen] = useState(false);
  const [allocateIds, setAllocateIds] = useState<string[]>([]);
  const suppressRowClickRef = useRef(false);
@@ -118,9 +158,21 @@ export default function BookingRequestsPage() {
      // React Query cache key per kind tab.
      tab: kindTab,
      bookingType: kindTab,
-      ...(statusFilter ? { statuses: statusFilter } : {}),
+      ...(statusFilter.length ? { statuses: statusFilter.join(",") } : {}),
      ...(directionFilter ? { tradeDirection: directionFilter } : {}),
      ...(freightTypeFilter ? { freightType: freightTypeFilter } : {}),
+      ...(paymentStatusFilter ? { paymentStatus: paymentStatusFilter } : {}),
+      ...(ownershipFilter
+        ? { isGovernment: ownershipFilter as "true" | "false" }
+        : {}),
+      ...(originYardFilter ? { originYardId: originYardFilter } : {}),
+      ...(destinationYardFilter
+        ? { destinationYardId: destinationYardFilter }
+        : {}),
+      ...(createdFrom ? { createdFrom: startOfDayIso(createdFrom) } : {}),
+      ...(createdTo ? { createdTo: endOfDayIso(createdTo) } : {}),
+      ...(scheduledFrom ? { scheduledFrom: startOfDayIso(scheduledFrom) } : {}),
+      ...(scheduledTo ? { scheduledTo: endOfDayIso(scheduledTo) } : {}),
    };
  }, [
    pagination.pageIndex,
@@ -129,6 +181,14 @@ export default function BookingRequestsPage() {
    statusFilter,
    directionFilter,
    freightTypeFilter,
+    paymentStatusFilter,
+    ownershipFilter,
+    originYardFilter,
+    destinationYardFilter,
+    createdFrom,
+    createdTo,
+    scheduledFrom,
+    scheduledTo,
  ]);

  const { data, isLoading, isError, refetch, isFetching } = useBookingList(filter);
@@ -142,6 +202,49 @@ export default function BookingRequestsPage() {
    refetch: refetchSummary,
  } = useBookingListSummary(filter);

+  // Yard options for the origin/destination filters (shared routes reference list).
+  const { data: yardRefs } = useQuery(
+    api.routes.yards.queryOptions({ staleTime: 5 * 60_000 }),
+  );
+  const yardOptions = useMemo(
+    () =>
+      (yardRefs ?? []).map((y) => ({
+        value: y.id,
+        label: y.label ?? y.code,
+      })),
+    [yardRefs],
+  );
+
+  const resetPage = useCallback(() => {
+    setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+  }, [setPagination, pagination.pageSize]);
+
+  const activeFilterCount =
+    (statusFilter.length ? 1 : 0) +
+    (directionFilter ? 1 : 0) +
+    (freightTypeFilter ? 1 : 0) +
+    (paymentStatusFilter ? 1 : 0) +
+    (ownershipFilter ? 1 : 0) +
+    (originYardFilter ? 1 : 0) +
+    (destinationYardFilter ? 1 : 0) +
+    (createdFrom || createdTo ? 1 : 0) +
+    (scheduledFrom || scheduledTo ? 1 : 0);
+
+  const clearFilters = useCallback(() => {
+    setStatusFilter([]);
+    setDirectionFilter(null);
+    setFreightTypeFilter(null);
+    setPaymentStatusFilter(null);
+    setOwnershipFilter(null);
+    setOriginYardFilter(null);
+    setDestinationYardFilter(null);
+    setCreatedFrom(null);
+    setCreatedTo(null);
+    setScheduledFrom(null);
+    setScheduledTo(null);
+    resetPage();
+  }, [resetPage]);
+
  const rows = useMemo(() => {
    const items = (data?.items ?? []).map(toBookingListRow);
    const q = query.trim().toLowerCase();
@@ -415,18 +518,44 @@ export default function BookingRequestsPage() {
                    </Text>
                  </Group>
                  <Group gap="sm" wrap="wrap">
-                    <Select
-                      placeholder="All statuses"
+                    <MultiSelect
+                      placeholder={statusFilter.length ? undefined : "All statuses"}
                      data={STATUS_OPTIONS}
                      value={statusFilter}
                      onChange={(v) => {
                        setStatusFilter(v);
-                        setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                        resetPage();
                      }}
                      clearable
                      searchable
                      radius="lg"
-                      style={{ minWidth: 200 }}
+                      style={{ minWidth: 220 }}
+                    />
+                    <Select
+                      placeholder="All origins"
+                      data={yardOptions}
+                      value={originYardFilter}
+                      onChange={(v) => {
+                        setOriginYardFilter(v);
+                        resetPage();
+                      }}
+                      clearable
+                      searchable
+                      radius="lg"
+                      style={{ minWidth: 180 }}
+                    />
+                    <Select
+                      placeholder="All destinations"
+                      data={yardOptions}
+                      value={destinationYardFilter}
+                      onChange={(v) => {
+                        setDestinationYardFilter(v);
+                        resetPage();
+                      }}
+                      clearable
+                      searchable
+                      radius="lg"
+                      style={{ minWidth: 180 }}
                    />
                    <Select
                      placeholder="All directions"
@@ -434,11 +563,11 @@ export default function BookingRequestsPage() {
                      value={directionFilter}
                      onChange={(v) => {
                        setDirectionFilter(v);
-                        setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                        resetPage();
                      }}
                      clearable
                      radius="lg"
-                      style={{ minWidth: 170 }}
+                      style={{ minWidth: 150 }}
                    />
                    <Select
                      placeholder="All freight types"
@@ -446,13 +575,98 @@ export default function BookingRequestsPage() {
                      value={freightTypeFilter}
                      onChange={(v) => {
                        setFreightTypeFilter(v);
-                        setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                        resetPage();
                      }}
                      clearable
                      radius="lg"
-                      style={{ minWidth: 170 }}
+                      style={{ minWidth: 150 }}
                    />
                  </Group>
+                  <Group gap="sm" wrap="wrap">
+                    <Select
+                      placeholder="All payment statuses"
+                      data={PAYMENT_STATUS_OPTIONS}
+                      value={paymentStatusFilter}
+                      onChange={(v) => {
+                        setPaymentStatusFilter(v);
+                        resetPage();
+                      }}
+                      clearable
+                      radius="lg"
+                      style={{ minWidth: 180 }}
+                    />
+                    <Select
+                      placeholder="Gov / Private"
+                      data={OWNERSHIP_OPTIONS}
+                      value={ownershipFilter}
+                      onChange={(v) => {
+                        setOwnershipFilter(v);
+                        resetPage();
+                      }}
+                      clearable
+                      radius="lg"
+                      style={{ minWidth: 140 }}
+                    />
+                    <DateInput
+                      placeholder="Created from"
+                      value={createdFrom}
+                      onChange={(v) => {
+                        setCreatedFrom(v ? new Date(v) : null);
+                        resetPage();
+                      }}
+                      maxDate={createdTo ?? undefined}
+                      clearable
+                      radius="lg"
+                      style={{ minWidth: 140 }}
+                    />
+                    <DateInput
+                      placeholder="Created to"
+                      value={createdTo}
+                      onChange={(v) => {
+                        setCreatedTo(v ? new Date(v) : null);
+                        resetPage();
+                      }}
+                      minDate={createdFrom ?? undefined}
+                      clearable
+                      radius="lg"
+                      style={{ minWidth: 140 }}
+                    />
+                    <DateInput
+                      placeholder="Scheduled from"
+                      value={scheduledFrom}
+                      onChange={(v) => {
+                        setScheduledFrom(v ? new Date(v) : null);
+                        resetPage();
+                      }}
+                      maxDate={scheduledTo ?? undefined}
+                      clearable
+                      radius="lg"
+                      style={{ minWidth: 150 }}
+                    />
+                    <DateInput
+                      placeholder="Scheduled to"
+                      value={scheduledTo}
+                      onChange={(v) => {
+                        setScheduledTo(v ? new Date(v) : null);
+                        resetPage();
+                      }}
+                      minDate={scheduledFrom ?? undefined}
+                      clearable
+                      radius="lg"
+                      style={{ minWidth: 150 }}
+                    />
+                    {activeFilterCount > 0 ? (
+                      <Button
+                        variant="subtle"
+                        color="gray"
+                        radius="lg"
+                        leftSection={<FilterX size={16} />}
+                        onClick={clearFilters}
+                      >
+                        Clear filters ({activeFilterCount})
+                      </Button>
+                    ) : null}
+                  </Group>
                </Stack>
              </Box>

--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestDetailPage.tsx
@@ -302,7 +302,7 @@ export default function ContractRequestDetailPage() {

  const customerLabel = contract.isGovernment
    ? (contract.governmentInstitution ?? "Government")
-    : (contract.companyId ?? "—");
+    : (contract.company?.name ?? "—");

  return (
    <PageContainer>
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestsPage.tsx
@@ -133,21 +133,21 @@ export default function ContractRequestsPage() {
  const columns: ColumnDef<ContractListRow>[] = [
    {
      id: "contract",
-      header: () => <span className={bookingTable.headerCell}>Contract</span>,
+      header: () => <span className={bookingTable.headerCell}>Customer</span>,
      cell: ({ row }) => {
        const c = row.original;
        return (
          <div className="flex items-center gap-3 py-1.5">
            <div className={bookingTable.rowIcon}>
-              <FileText className="size-4" strokeWidth={1.75} />
+              <User className="size-4" strokeWidth={1.75} />
            </div>
            <div className="min-w-0">
              <p className="truncate font-medium text-foreground">
-                {c.reference}
+                {c.customerLabel}
              </p>
              <p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
-                <User className="size-3 shrink-0 opacity-70" />
-                {c.customerLabel}
+                <FileText className="size-3 shrink-0 opacity-70" />
+                {c.reference}
              </p>
            </div>
          </div>
--- a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchBoardPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchBoardPage.tsx
@@ -1,8 +1,9 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
  ActionIcon,
  Alert,
+  Badge,
  Box,
  Button,
  Card,
@@ -16,10 +17,15 @@ import {
  Stack,
  Text,
  ThemeIcon,
+  Tooltip,
 } from "@mantine/core";
+import { DateInput } from "@mantine/dates";
+import { useDebouncedValue } from "@mantine/hooks";
 import {
  AlertTriangle,
+  ArrowDownWideNarrow,
  ArrowRight,
+  ArrowUpNarrowWide,
  CalendarClock,
  CalendarDays,
  Eye,
@@ -47,9 +53,31 @@ import {
 import { RouteCorridor } from "@/components/trainScheduling/scheduleVisuals";
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
 import { FREIGHT_BRAND, FREIGHT_BRAND_DARK } from "@/theme/freight-brand";
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { api } from "@/services/api";
-import type { BatchBoardSchedule } from "@/types/trainScheduling";
+import type {
+  BatchBoardFilters,
+  BatchBoardSchedule,
+  BatchBoardSortField,
+  TrainScheduleStatus,
+} from "@/types/trainScheduling";
+
+const STATUS_BADGE: Record<string, { color: string; label: string }> = {
+  DRAFT: { color: "gray", label: "Draft" },
+  SCHEDULED: { color: "blue", label: "Scheduled" },
+  DISPATCHED: { color: "orange", label: "Dispatched" },
+  ARRIVED: { color: "green", label: "Arrived" },
+  CANCELLED: { color: "red", label: "Cancelled" },
+};
+
+function StatusBadge({ status }: { status: string }) {
+  const meta = STATUS_BADGE[status] ?? { color: "gray", label: status };
+  return (
+    <Badge variant="light" color={meta.color} radius="sm">
+      {meta.label}
+    </Badge>
+  );
+}

 const fmtTons = (n: number) =>
  `${n.toLocaleString(undefined, { maximumFractionDigits: 1 })} t`;
@@ -237,7 +265,8 @@ function ScheduleCard({ schedule }: { schedule: BatchBoardSchedule }) {
                c="dimmed"
                style={{ letterSpacing: 0.8 }}
              >
-                Freight schedule · {schedule.status}
+                {schedule.scheduleReference ?? "Freight schedule"} ·{" "}
+                {schedule.status}
              </Text>
            </Box>
          </Group>
@@ -395,15 +424,73 @@ function CardSkeleton() {

 export default function BatchBoardPage() {
  const navigate = useNavigate();
-  const { data, isLoading, isError, isFetching, refetch } = useQuery(
-    api.trainScheduling.batchBoard.queryOptions({ refetchInterval: 30_000 }),
-  );
  const { viewMode, setViewMode } = useFleetViewMode("batch-board");
-  const { pagination, setPagination } = usePagination({ pageSize: 10 });
+  const { pagination, setPagination } = usePagination({ pageSize: 12 });
  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebouncedValue(search, 300);
+  const [statusFilter, setStatusFilter] = useState("ALL");
  const [windowFilter, setWindowFilter] = useState("ALL");
+  const [sortBy, setSortBy] = useState<BatchBoardSortField>("createdAt");
+  const [sortOrder, setSortOrder] = useState<"ASC" | "DESC">("DESC");
+  const [departureFrom, setDepartureFrom] = useState<Date | null>(null);
+  const [departureTo, setDepartureTo] = useState<Date | null>(null);

-  const schedules = data ?? [];
+  // Every knob maps straight onto the server-side batch-board query — the API
+  // filters, searches, sorts and paginates; this page just renders the page.
+  const filters = useMemo((): BatchBoardFilters => {
+    const endOfDay = (d: Date) =>
+      new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59, 999);
+    return {
+      page: pagination.pageIndex + 1,
+      pageSize: pagination.pageSize,
+      search: debouncedSearch.trim() || undefined,
+      statuses:
+        statusFilter === "ALL"
+          ? undefined
+          : [statusFilter as TrainScheduleStatus],
+      bookingWindowStatus:
+        windowFilter === "ALL"
+          ? undefined
+          : (windowFilter as "OPEN" | "FULL" | "CLOSED"),
+      departureFrom: departureFrom ? departureFrom.toISOString() : undefined,
+      departureTo: departureTo ? endOfDay(departureTo).toISOString() : undefined,
+      sortBy,
+      sortOrder,
+    };
+  }, [
+    pagination,
+    debouncedSearch,
+    statusFilter,
+    windowFilter,
+    departureFrom,
+    departureTo,
+    sortBy,
+    sortOrder,
+  ]);
+
+  // Any filter change restarts from the first page.
+  useEffect(() => {
+    setPagination((p) => ({ ...p, pageIndex: 0 }));
+  }, [
+    debouncedSearch,
+    statusFilter,
+    windowFilter,
+    departureFrom,
+    departureTo,
+    sortBy,
+    sortOrder,
+    setPagination,
+  ]);
+
+  const { data, isLoading, isError, isFetching, refetch } = useQuery({
+    ...api.trainScheduling.batchBoard.queryOptions({ input: { filters } }),
+    refetchInterval: 30_000,
+    placeholderData: keepPreviousData,
+  });
+
+  const schedules = data?.items ?? [];
+  const total = data?.total ?? 0;
+  const pageCount = data?.totalPages ?? 1;

  const summary = useMemo(() => {
    const openWindows = schedules.filter((s) => s.bookingWindowStatus === "OPEN").length;
@@ -412,33 +499,6 @@ export default function BatchBoardPage() {
    return { openWindows, totalBookings, totalWagons };
  }, [schedules]);

-  const filtered = useMemo(() => {
-    const query = search.trim().toLowerCase();
-    return schedules.filter((s) => {
-      if (windowFilter !== "ALL" && s.bookingWindowStatus !== windowFilter) return false;
-      if (!query) return true;
-      const haystack = [
-        s.trainNumber,
-        s.routeName,
-        s.origin,
-        s.destination,
-        s.locomotive?.code,
-        s.status,
-        s.bookingWindowStatus,
-      ]
-        .filter(Boolean)
-        .join(" ")
-        .toLowerCase();
-      return haystack.includes(query);
-    });
-  }, [schedules, search, windowFilter]);
-
-  const pageCount = Math.max(1, Math.ceil(filtered.length / pagination.pageSize));
-  const paged = useMemo(() => {
-    const start = pagination.pageIndex * pagination.pageSize;
-    return filtered.slice(start, start + pagination.pageSize);
-  }, [filtered, pagination]);
-
  const columns = useMemo((): ColumnDef<BatchBoardSchedule>[] => {
    const headerClassName = ruleEngineTable.headerCell;
    const cellClassName = ruleEngineTable.bodyCell;
@@ -456,6 +516,11 @@ export default function BatchBoardPage() {
              <Text size="sm" fw={700} lh={1.2} truncate>
                {row.original.trainNumber ?? row.original.routeName ?? "Schedule"}
              </Text>
+              {row.original.scheduleReference ? (
+                <Text size="10px" fw={600} c="dimmed" lh={1.2}>
+                  {row.original.scheduleReference}
+                </Text>
+              ) : null}
              <Box maw={220}>
                <RouteCorridor
                  origin={row.original.origin}
@@ -502,6 +567,30 @@ export default function BatchBoardPage() {
          );
        },
      },
+      {
+        id: "status",
+        header: "Status",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => <StatusBadge status={row.original.status} />,
+      },
+      {
+        id: "created",
+        header: "Created",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => {
+          const { day, time } = splitDate(row.original.createdAt);
+          return (
+            <Stack gap={0}>
+              <Text size="sm" fw={600} lh={1.2}>
+                {day}
+              </Text>
+              <Text size="xs" c="dimmed" lh={1.2}>
+                {time || "—"}
+              </Text>
+            </Stack>
+          );
+        },
+      },
      {
        id: "window",
        header: "Window",
@@ -623,7 +712,7 @@ export default function BatchBoardPage() {
    <PageContainer>
      <PageHeader
        title="Batch Board"
-        subtitle="Active schedules and their booking windows."
+        subtitle="All import schedules — live and historical — with their booking windows."
        action={
          <Button variant="default" loading={isFetching} onClick={() => void refetch()}>
            Refresh
@@ -635,21 +724,21 @@ export default function BatchBoardPage() {
        loading={isLoading}
        items={[
          {
-            label: "Active schedules",
-            value: schedules.length,
-            hint: "on the board right now",
+            label: "Schedules",
+            value: total,
+            hint: "matching the current filters",
            icon: Train,
          },
          {
            label: "Open windows",
            value: summary.openWindows,
-            hint: "accepting bookings",
+            hint: "accepting bookings (this page)",
            icon: CalendarDays,
          },
          {
            label: "Bookings in play",
            value: summary.totalBookings,
-            hint: `${summary.totalWagons} wagons allocated`,
+            hint: `${summary.totalWagons} wagons allocated (this page)`,
            icon: Package,
          },
        ]}
@@ -661,24 +750,96 @@ export default function BatchBoardPage() {
            <FleetToolbar
              search={search}
              onSearchChange={setSearch}
-              searchPlaceholder="Search schedules…"
+              searchPlaceholder="Search train, route, station, loco…"
              viewMode={viewMode}
              onViewModeChange={setViewMode}
              filters={
-                <Select
-                  size="sm"
-                  radius="lg"
-                  value={windowFilter}
-                  onChange={(v) => v && setWindowFilter(v)}
-                  data={[
-                    { value: "ALL", label: "All windows" },
-                    { value: "OPEN", label: "Open" },
-                    { value: "FULL", label: "Full" },
-                    { value: "CLOSED", label: "Closed" },
-                  ]}
-                  w={150}
-                  styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
-                />
+                <Group gap="xs" wrap="wrap">
+                  <Select
+                    size="sm"
+                    radius="lg"
+                    value={statusFilter}
+                    onChange={(v) => v && setStatusFilter(v)}
+                    data={[
+                      { value: "ALL", label: "All statuses" },
+                      { value: "DRAFT", label: "Draft" },
+                      { value: "SCHEDULED", label: "Scheduled" },
+                      { value: "DISPATCHED", label: "Dispatched" },
+                      { value: "ARRIVED", label: "Arrived" },
+                      { value: "CANCELLED", label: "Cancelled" },
+                    ]}
+                    w={150}
+                    styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
+                  />
+                  <Select
+                    size="sm"
+                    radius="lg"
+                    value={windowFilter}
+                    onChange={(v) => v && setWindowFilter(v)}
+                    data={[
+                      { value: "ALL", label: "All windows" },
+                      { value: "OPEN", label: "Open" },
+                      { value: "FULL", label: "Full" },
+                      { value: "CLOSED", label: "Closed" },
+                    ]}
+                    w={140}
+                    styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
+                  />
+                  <DateInput
+                    size="sm"
+                    radius="lg"
+                    placeholder="Departs from"
+                    value={departureFrom}
+                    onChange={(v) => setDepartureFrom(v ? new Date(v) : null)}
+                    clearable
+                    w={140}
+                    styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
+                  />
+                  <DateInput
+                    size="sm"
+                    radius="lg"
+                    placeholder="Departs to"
+                    value={departureTo}
+                    onChange={(v) => setDepartureTo(v ? new Date(v) : null)}
+                    clearable
+                    w={140}
+                    styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
+                  />
+                  <Select
+                    size="sm"
+                    radius="lg"
+                    value={sortBy}
+                    onChange={(v) => v && setSortBy(v as BatchBoardSortField)}
+                    data={[
+                      { value: "createdAt", label: "Sort: Created" },
+                      { value: "scheduledDepartureDate", label: "Sort: Departure" },
+                      { value: "trainNumber", label: "Sort: Train no." },
+                      { value: "status", label: "Sort: Status" },
+                    ]}
+                    w={160}
+                    styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
+                  />
+                  <Tooltip
+                    label={sortOrder === "DESC" ? "Newest / Z–A first" : "Oldest / A–Z first"}
+                    withArrow
+                  >
+                    <ActionIcon
+                      variant="default"
+                      size={36}
+                      radius="lg"
+                      aria-label="Toggle sort direction"
+                      onClick={() =>
+                        setSortOrder((o) => (o === "DESC" ? "ASC" : "DESC"))
+                      }
+                    >
+                      {sortOrder === "DESC" ? (
+                        <ArrowDownWideNarrow size={16} />
+                      ) : (
+                        <ArrowUpNarrowWide size={16} />
+                      )}
+                    </ActionIcon>
+                  </Tooltip>
+                </Group>
              }
            />
          </Box>
@@ -686,7 +847,7 @@ export default function BatchBoardPage() {
          {viewMode === "table" ? (
            <DataTable
              columns={columns}
-              data={paged}
+              data={schedules}
              status={tableStatus}
              onRowClick={(schedule) =>
                navigate(`/dashboard/operations/batch-board/${schedule.scheduleId}`)
@@ -699,12 +860,12 @@ export default function BatchBoardPage() {
                    }
                  : undefined
              }
-              emptyMessage="No active schedules"
+              emptyMessage="No schedules match the current filters"
              pagination={{
                pageIndex: pagination.pageIndex,
                pageSize: pagination.pageSize,
                pageCount,
-                totalCount: filtered.length,
+                totalCount: total,
              }}
              tableOptions={{
                manualPagination: true,
@@ -727,7 +888,7 @@ export default function BatchBoardPage() {
              <CardSkeleton />
              <CardSkeleton />
            </SimpleGrid>
-          ) : filtered.length === 0 ? (
+          ) : schedules.length === 0 ? (
            <Paper radius="lg" p={48} m="md" bg="gray.0">
              <Stack align="center" gap="sm">
                <Box
@@ -745,20 +906,52 @@ export default function BatchBoardPage() {
                  <Inbox size={28} color="var(--mantine-color-gray-5)" />
                </Box>
                <Text fw={700} c="gray.7">
-                  No active schedules
+                  No schedules match the current filters
                </Text>
                <Text size="sm" c="dimmed" ta="center" maw={380}>
-                  Schedules with an open booking window appear here. Create or activate a
-                  schedule to get started.
+                  Every import schedule — live and historical — appears here. Loosen the
+                  filters or clear the search to see more.
                </Text>
              </Stack>
            </Paper>
          ) : (
-            <SimpleGrid cols={{ base: 1, md: 2, lg: 3, xl: 4 }} spacing="lg" p="md">
-              {filtered.map((s) => (
-                <ScheduleCard key={s.scheduleId} schedule={s} />
-              ))}
-            </SimpleGrid>
+            <>
+              <SimpleGrid cols={{ base: 1, md: 2, lg: 3, xl: 4 }} spacing="lg" p="md">
+                {schedules.map((s) => (
+                  <ScheduleCard key={s.scheduleId} schedule={s} />
+                ))}
+              </SimpleGrid>
+              <Group justify="space-between" px="md" pb="md">
+                <Text size="sm" c="dimmed">
+                  {total} schedule{total === 1 ? "" : "s"}
+                </Text>
+                <Group gap="xs">
+                  <Button
+                    variant="default"
+                    size="xs"
+                    disabled={pagination.pageIndex === 0}
+                    onClick={() =>
+                      setPagination((p) => ({ ...p, pageIndex: p.pageIndex - 1 }))
+                    }
+                  >
+                    Previous
+                  </Button>
+                  <Text size="sm" c="dimmed">
+                    Page {pagination.pageIndex + 1} of {pageCount}
+                  </Text>
+                  <Button
+                    variant="default"
+                    size="xs"
+                    disabled={pagination.pageIndex + 1 >= pageCount}
+                    onClick={() =>
+                      setPagination((p) => ({ ...p, pageIndex: p.pageIndex + 1 }))
+                    }
+                  >
+                    Next
+                  </Button>
+                </Group>
+              </Group>
+            </>
          )}
        </Stack>
      </Card>
--- a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchScheduleDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchScheduleDetailPage.tsx
@@ -25,6 +25,7 @@ import {
  ClipboardCheck,
  Clock,
  FileSignature,
+  Hash,
  Hourglass,
  Layers,
  Package,
@@ -621,6 +622,9 @@ export default function BatchScheduleDetailPage() {
    api.trainScheduling.scheduleDetail.queryOptions({
      input: { id: scheduleId ?? "", freightType: "CONTAINER" },
      enabled: Boolean(scheduleId),
+      // Composition data only changes through mutations, which invalidate the
+      // whole train-scheduling root — no need to refetch on remounts in between.
+      staleTime: 5 * 60_000,
    }),
  );

@@ -744,7 +748,13 @@ export default function BatchScheduleDetailPage() {
        items={[
          { label: "Operations" },
          { label: "Batch board", href: "/dashboard/operations/batch-board" },
-          { label: data.trainNumber ?? data.routeName ?? "Schedule" },
+          {
+            label:
+              data.scheduleReference ??
+              data.trainNumber ??
+              data.routeName ??
+              "Schedule",
+          },
        ]}
      />

@@ -791,6 +801,11 @@ export default function BatchScheduleDetailPage() {
                  <Title order={2} fw={800}>
                    {data.trainNumber ?? data.routeName ?? "Schedule"}
                  </Title>
+                  {data.scheduleReference ? (
+                    <HeroChip icon={<Hash size={12} />}>
+                      {data.scheduleReference}
+                    </HeroChip>
+                  ) : null}
                  <WindowStatusPill status={data.bookingWindowStatus} />
                  {data.windowPhase ? (
                    <WindowPhasePill
--- a/apps/edr-freight-web/backoffice/src/services/api.ts
+++ b/apps/edr-freight-web/backoffice/src/services/api.ts
@@ -44,7 +44,8 @@ import {
 } from "@/types/rule-engine";
 import type {
  AssignBookingsPayload,
-  BatchBoardSchedule,
+  BatchBoardFilters,
+  BatchBoardListResponse,
  BatchBoardScheduleDetail,
  BookableSchedule,
  BookingWindow,
@@ -223,11 +224,14 @@ export const api = {
      () => QUERY_KEYS.TRAIN_SCHEDULING.schedules(),
    ),

-    batchBoard: endpoint<void, BatchBoardSchedule[]>(
+    batchBoard: endpoint<
+      { filters?: BatchBoardFilters },
+      BatchBoardListResponse
+    >(
      "train-scheduling",
      "batch-board",
-      () => trainSchedulingService.getBatchBoard(),
-      () => QUERY_KEYS.TRAIN_SCHEDULING.batchBoard(),
+      ({ filters }) => trainSchedulingService.getBatchBoard(filters),
+      ({ filters }) => QUERY_KEYS.TRAIN_SCHEDULING.batchBoard(filters),
    ),

    allBookingWindows: endpoint<void, StaffBookingWindow[]>(
--- a/apps/edr-freight-web/backoffice/src/services/bookings.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/bookings.service.ts
@@ -21,6 +21,19 @@ export interface BookingListFilter {
  bookingType?: string;
  tradeDirection?: string;
  paymentCurrency?: string;
+  paymentStatus?: string;
+  /** ISO date-time — bookings created on/after. */
+  createdFrom?: string;
+  /** ISO date-time — bookings created on/before (pass end-of-day for inclusive). */
+  createdTo?: string;
+  /** ISO date-time — bookings scheduled on/after. */
+  scheduledFrom?: string;
+  /** ISO date-time — bookings scheduled on/before (pass end-of-day for inclusive). */
+  scheduledTo?: string;
+  originYardId?: string;
+  destinationYardId?: string;
+  /** "true" = government bookings only, "false" = private only. */
+  isGovernment?: "true" | "false";
  page?: number;
  pageSize?: number;
  sortBy?: string;
@@ -130,6 +143,14 @@ export const bookingsService = {
      if (filter.bookingType) params.bookingType = filter.bookingType;
      if (filter.tradeDirection) params.tradeDirection = filter.tradeDirection;
      if (filter.paymentCurrency) params.paymentCurrency = filter.paymentCurrency;
+      if (filter.paymentStatus) params.paymentStatus = filter.paymentStatus;
+      if (filter.createdFrom) params.createdFrom = filter.createdFrom;
+      if (filter.createdTo) params.createdTo = filter.createdTo;
+      if (filter.scheduledFrom) params.scheduledFrom = filter.scheduledFrom;
+      if (filter.scheduledTo) params.scheduledTo = filter.scheduledTo;
+      if (filter.originYardId) params.originYardId = filter.originYardId;
+      if (filter.destinationYardId) params.destinationYardId = filter.destinationYardId;
+      if (filter.isGovernment) params.isGovernment = filter.isGovernment;
    }
    const response = await client.get<BookingListSummary>(B.LIST_SUMMARY, {
      params,
@@ -154,6 +175,14 @@ export const bookingsService = {
      if (filter.bookingType) params.bookingType = filter.bookingType;
      if (filter.tradeDirection) params.tradeDirection = filter.tradeDirection;
      if (filter.paymentCurrency) params.paymentCurrency = filter.paymentCurrency;
+      if (filter.paymentStatus) params.paymentStatus = filter.paymentStatus;
+      if (filter.createdFrom) params.createdFrom = filter.createdFrom;
+      if (filter.createdTo) params.createdTo = filter.createdTo;
+      if (filter.scheduledFrom) params.scheduledFrom = filter.scheduledFrom;
+      if (filter.scheduledTo) params.scheduledTo = filter.scheduledTo;
+      if (filter.originYardId) params.originYardId = filter.originYardId;
+      if (filter.destinationYardId) params.destinationYardId = filter.destinationYardId;
+      if (filter.isGovernment) params.isGovernment = filter.isGovernment;
    }
    const response = await client.get<PaginatedBookings>(B.BASE, {
      params,
--- a/apps/edr-freight-web/backoffice/src/services/trainScheduling.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/trainScheduling.service.ts
@@ -3,7 +3,8 @@ import { api as client } from "../auth/http";
 import { unwrap } from "@/utils/endpoint";
 import { URL_CONSTANTS } from "@/constants/URLS";
 import type {
-  BatchBoardSchedule,
+  BatchBoardFilters,
+  BatchBoardListResponse,
  BatchBoardScheduleDetail,
  BookableSchedule,
  BookingWindow,
@@ -100,9 +101,25 @@ export const trainSchedulingService = {
    return unwrap(response.data);
  },

-  getBatchBoard: async (): Promise<BatchBoardSchedule[]> => {
-    const response = await client.get<BatchBoardSchedule[]>(
+  getBatchBoard: async (
+    filters: BatchBoardFilters = {},
+  ): Promise<BatchBoardListResponse> => {
+    const params: Record<string, string | number> = {};
+    if (filters.page) params.page = filters.page;
+    if (filters.pageSize) params.pageSize = filters.pageSize;
+    if (filters.statuses?.length) params.statuses = filters.statuses.join(",");
+    if (filters.bookingWindowStatus)
+      params.bookingWindowStatus = filters.bookingWindowStatus;
+    if (filters.search?.trim()) params.search = filters.search.trim();
+    if (filters.departureFrom) params.departureFrom = filters.departureFrom;
+    if (filters.departureTo) params.departureTo = filters.departureTo;
+    if (filters.createdFrom) params.createdFrom = filters.createdFrom;
+    if (filters.createdTo) params.createdTo = filters.createdTo;
+    if (filters.sortBy) params.sortBy = filters.sortBy;
+    if (filters.sortOrder) params.sortOrder = filters.sortOrder;
+    const response = await client.get<BatchBoardListResponse>(
      URL_CONSTANTS.TRAIN_SCHEDULING.BATCH_BOARD,
+      { params },
    );
    return unwrap(response.data);
  },
--- a/apps/edr-freight-web/backoffice/src/types/trainScheduling.ts
+++ b/apps/edr-freight-web/backoffice/src/types/trainScheduling.ts
@@ -257,11 +257,14 @@ export interface StaffBookingWindow {

 export interface BatchBoardSchedule {
  scheduleId: string;
+  /** Human-facing schedule reference (S-YYYY-NNNNN). */
+  scheduleReference: string | null;
  trainNumber: string | null;
  routeName: string | null;
  origin: string | null;
  destination: string | null;
  scheduleDate: string | null;
+  createdAt: string | null;
  status: string;
  bookingWindowStatus: string;
  direction: string | null;
@@ -300,6 +303,37 @@ export interface BatchBoardSchedule {
  bookings: BatchBoardBooking[];
 }

+export type BatchBoardSortField =
+  | "createdAt"
+  | "scheduledDepartureDate"
+  | "trainNumber"
+  | "status";
+
+/** Server-side filters for the paginated batch board list. */
+export interface BatchBoardFilters {
+  page?: number;
+  pageSize?: number;
+  /** Subset of schedule statuses; omit for all (incl. arrived/cancelled). */
+  statuses?: TrainScheduleStatus[];
+  bookingWindowStatus?: "OPEN" | "FULL" | "CLOSED";
+  /** Matches train number, route yards, stations, locomotive code. */
+  search?: string;
+  departureFrom?: string;
+  departureTo?: string;
+  createdFrom?: string;
+  createdTo?: string;
+  sortBy?: BatchBoardSortField;
+  sortOrder?: "ASC" | "DESC";
+}
+
+export interface BatchBoardListResponse {
+  items: BatchBoardSchedule[];
+  total: number;
+  page: number;
+  pageSize: number;
+  totalPages: number;
+}
+
 export type BookingAllocationStatus =
  | "NOT_ATTEMPTED"
  | "ASSIGNED"
@@ -337,6 +371,8 @@ export interface BatchWindowGroup {

 export interface BatchBoardScheduleDetail {
  scheduleId: string;
+  /** Human-facing schedule reference (S-YYYY-NNNNN). */
+  scheduleReference: string | null;
  trainNumber: string | null;
  routeName: string | null;
  origin: string | null;
@@ -506,6 +542,8 @@ export interface TrainScheduleDetail {
      capacityTons: number;
      lengthMeters: number;
      assignedWeightTons: number;
+      /** Empty-wagon weight from the wagon type — gross = tare + cargo. */
+      tareWeightTons?: number | null;
      status?: string;
      physicalWagonId?: string | null;
      physicalWagonNumber?: string | null;