From 3447394e3214830749e1b529a3131be0a1df436d Mon Sep 17 00:00:00 2001
From: Marshal <marshal@example.com>
Date: Sun, 5 Jul 2026 10:22:58 +0000
Subject: [PATCH] add bookings management and settings

---
 .../dto/update-schedule-window-rule.dto.ts    |  62 ++
 .../train-scheduling.controller.ts            |  15 +
 .../train-scheduling.service.ts               | 100 ++
 .../BookingWindowSettingsModal.tsx            | 409 ++++++++
 .../backoffice/src/constants/URLS.ts          |   2 +
 .../TrainScheduleV2DetailPage.tsx             |  26 +-
 .../TrainScheduleV2ListPage.tsx               |  18 +
 .../TrainSchedulingGlobalRulesPage.tsx        |  16 +-
 .../backoffice/src/services/api.ts            |  13 +
 .../src/services/trainScheduling.service.ts   |  12 +
 .../backoffice/src/types/trainScheduling.ts   |  25 +
 apps/edr-freight-web/portal/src/App.tsx       |  16 +-
 .../src/pages/bookings/BookingsListPage.tsx   | 912 ++++++++++++++++++
 13 files changed, 1617 insertions(+), 9 deletions(-)
 create mode 100644 apps/edr-freight-api/src/modules/train-scheduling/dto/update-schedule-window-rule.dto.ts
 create mode 100644 apps/edr-freight-web/backoffice/src/components/trainScheduling/BookingWindowSettingsModal.tsx
 create mode 100644 apps/edr-freight-web/portal/src/pages/bookings/BookingsListPage.tsx

diff --git a/apps/edr-freight-api/src/modules/train-scheduling/dto/update-schedule-window-rule.dto.ts b/apps/edr-freight-api/src/modules/train-scheduling/dto/update-schedule-window-rule.dto.ts
new file mode 100644
index 000000000..9232de29e
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-scheduling/dto/update-schedule-window-rule.dto.ts
@@ -0,0 +1,62 @@
+import { ApiPropertyOptional } from '@nestjs/swagger';
+import { Type } from 'class-transformer';
+import { IsInt, IsNumber, IsOptional, Max, Min } from 'class-validator';
+
+/**
+ * Per-schedule booking-window rule override (staff action on the ops board).
+ * Every field is optional — only the ones sent are changed; the rest keep the
+ * schedule's existing snapshot. Mirrors the window fields of the global rules DTO.
+ */
+export class UpdateScheduleWindowRuleDto {
+  @ApiPropertyOptional({ example: 8, description: 'Local EAT hour the booking desk opens each day' })
+  @IsOptional()
+  @Type(() => Number)
+  @IsInt()
+  @Min(0)
+  @Max(23)
+  windowOpenHour?: number;
+
+  @ApiPropertyOptional({
+    example: 17,
+    description:
+      'Local EAT hour the booking desk shuts each day; a not-yet-full window resumes next morning at windowOpenHour. Equal to windowOpenHour = 24-hour desk',
+  })
+  @IsOptional()
+  @Type(() => Number)
+  @IsInt()
+  @Min(0)
+  @Max(23)
+  windowCloseHour?: number;
+
+  @ApiPropertyOptional({ example: 3, description: 'How long each booking cycle stays open, in hours' })
+  @IsOptional()
+  @Type(() => Number)
+  @IsNumber()
+  @Min(0.0166)
+  @Max(12)
+  windowDurationHours?: number;
+
+  @ApiPropertyOptional({ example: 30, description: 'Max staff document-review minutes after the window closes' })
+  @IsOptional()
+  @Type(() => Number)
+  @IsInt()
+  @Min(0)
+  docReviewMinutes?: number;
+
+  @ApiPropertyOptional({ example: 60, description: 'Customer payment window minutes' })
+  @IsOptional()
+  @Type(() => Number)
+  @IsInt()
+  @Min(1)
+  paymentWindowMinutes?: number;
+
+  @ApiPropertyOptional({
+    example: 3,
+    description: 'Days before departure the booking window starts (re-derives the window start)',
+  })
+  @IsOptional()
+  @Type(() => Number)
+  @IsInt()
+  @Min(0)
+  importWindowLeadDays?: number;
+}
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.controller.ts b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.controller.ts
index 773e4738a..38ebd7be5 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.controller.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.controller.ts
@@ -42,6 +42,7 @@ import { BookableSchedulesQueryDto } from "./dto/bookable-schedules-query.dto";
 import { AvailableDaysQueryDto } from "./dto/available-days-query.dto";
 import { AvailableDaysForCargoQueryDto } from "./dto/available-days-for-cargo-query.dto";
 import { UpdateTrainSchedulingGlobalRulesDto } from "./dto/update-train-scheduling-global-rules.dto";
+import { UpdateScheduleWindowRuleDto } from "./dto/update-schedule-window-rule.dto";
 import { TrainSchedulingService } from "./train-scheduling.service";
 import { BookingBatchService } from "./booking-batch.service";
 import { BookingWindowService } from "./booking-window.service";
@@ -519,6 +520,20 @@ export class TrainSchedulingController {
     return this.trainSchedulingService.getContainerTrainScheduleById(id);
   }
 
+  @Patch("schedules/:id/window-rule")
+  @TrainSchedulingManage()
+  @ApiOperation({
+    summary:
+      "Override the booking-window rule for one schedule (open/close hour, duration, doc-review, payment, lead days) — only before the window opens",
+  })
+  async updateScheduleWindowRule(
+    @Param("id", ParseUUIDPipe) id: string,
+    @Body() dto: UpdateScheduleWindowRuleDto,
+  ) {
+    await this.trainSchedulingService.updateScheduleWindowRule(id, dto);
+    return this.trainSchedulingService.getContainerTrainScheduleById(id);
+  }
+
   @Post("schedules/:id/doc-review-complete")
   @TrainSchedulingManage()
   @ApiOperation({
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts
index 1f676f0f3..877d58786 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts
@@ -64,6 +64,7 @@ import {
   UploadImportDjiboutiDocumentDto,
 } from './dto/import-djibouti-operation.dto';
 import { UpdateTrainSchedulingGlobalRulesDto } from './dto/update-train-scheduling-global-rules.dto';
+import { UpdateScheduleWindowRuleDto } from './dto/update-schedule-window-rule.dto';
 import { type BookingWindowConfig } from './booking-window.config';
 import {
   buildCappedWagonPlan,
@@ -331,6 +332,87 @@ export class TrainSchedulingService {
     return saved;
   }
 
+  /**
+   * Override the booking-window rule for ONE schedule (staff action on the ops
+   * board). Only the fields provided are changed; the rest keep the schedule's
+   * existing snapshot (falling back to the live global config for legacy rows).
+   * The window must not have opened yet — an OPEN/past schedule stays frozen so
+   * customers keep the times they were shown. windowOpensAt/ClosesAt are
+   * re-derived from the merged rule, and the snapshot is updated so the board
+   * draws the new cycles.
+   */
+  async updateScheduleWindowRule(
+    id: string,
+    dto: UpdateScheduleWindowRuleDto,
+  ): Promise<TrainSchedule> {
+    const schedule = await this.trainSchedulesRepository.findById(id);
+    if (!schedule) {
+      throw new NotFoundException(`Train schedule ${id} not found`);
+    }
+    if (schedule.windowPhase !== 'PRE_WINDOW') {
+      throw new BadRequestException(
+        'Booking window settings can only be changed before the window opens ' +
+          `(this schedule is "${schedule.windowPhase ?? 'not window-managed'}").`,
+      );
+    }
+    const now = new Date();
+    if (!schedule.scheduledDepartureDate || schedule.scheduledDepartureDate <= now) {
+      throw new BadRequestException(
+        'This schedule has already departed or has no departure date.',
+      );
+    }
+
+    // Merge the override onto the schedule's current effective rule (its snapshot,
+    // or the live config where a legacy row has no snapshot).
+    const liveCfg = await this.getWindowConfig();
+    const merged: BookingWindowConfig = {
+      importWindowLeadDays:
+        dto.importWindowLeadDays ??
+        schedule.ruleImportWindowLeadDays ??
+        liveCfg.importWindowLeadDays,
+      exportBookingLeadHours:
+        schedule.ruleExportBookingLeadHours ?? liveCfg.exportBookingLeadHours,
+      windowOpenHour:
+        dto.windowOpenHour ?? schedule.ruleWindowOpenHour ?? liveCfg.windowOpenHour,
+      windowCloseHour:
+        dto.windowCloseHour ?? schedule.ruleWindowCloseHour ?? liveCfg.windowCloseHour,
+      windowDurationHours:
+        dto.windowDurationHours ??
+        (schedule.ruleWindowDurationHours != null
+          ? Number(schedule.ruleWindowDurationHours)
+          : liveCfg.windowDurationHours),
+      // The reopen gap is doc review + payment; keep the config values unless the
+      // override changes them, so the derived snapshot delay stays consistent.
+      docReviewMinutes: dto.docReviewMinutes ?? liveCfg.docReviewMinutes,
+      paymentWindowMinutes: dto.paymentWindowMinutes ?? liveCfg.paymentWindowMinutes,
+      reopenDelayMinutes: liveCfg.reopenDelayMinutes,
+    };
+
+    if (merged.windowCloseHour < merged.windowOpenHour) {
+      throw new BadRequestException(
+        `Window close hour (${merged.windowCloseHour}) must be on or after the open hour ` +
+          `(${merged.windowOpenHour}); set them equal for a 24-hour desk.`,
+      );
+    }
+
+    const times =
+      schedule.direction === 'EXPORT'
+        ? computeExportWindowTimes(schedule.scheduledDepartureDate, merged)
+        : computeImportWindowTimes(schedule.scheduledDepartureDate, merged, now);
+
+    await this.dataSource.getRepository(TrainSchedule).update(id, {
+      windowOpensAt: times.windowOpensAt,
+      windowClosesAt: times.windowClosesAt,
+      ...windowRuleSnapshot(merged),
+    });
+    this.logger.log(
+      `Booking-window rule overridden for schedule ${id} — reopens ${times.windowOpensAt.toISOString()}`,
+    );
+
+    const fresh = await this.trainSchedulesRepository.findById(id);
+    return fresh ?? schedule;
+  }
+
   /**
    * Re-derive windowOpensAt/windowClosesAt for schedules whose booking window has
    * not opened yet (windowPhase === 'PRE_WINDOW', still Draft/Scheduled, departure
@@ -3677,6 +3759,8 @@ export class TrainSchedulingService {
       .flatMap((w) => w.allocations ?? [])
       .map((a) => a.id);
 
+    const windowCfg = await this.getWindowConfig();
+
     const [containerItems, bulkLoads] = await Promise.all([
       allocationIds.length
         ? this.wagonAllocationContainerItemsRepository.findAll({
@@ -3723,6 +3807,22 @@ export class TrainSchedulingService {
       paymentPhaseEndsAt: schedule.paymentPhaseEndsAt
         ? schedule.paymentPhaseEndsAt.toISOString()
         : null,
+      // Per-schedule booking-window rule snapshot — powers the "Booking window
+      // settings" editor on the ops board (prefill + save one schedule's
+      // override). docReview/payment are not snapshotted per schedule (only their
+      // sum, as reopenDelayMinutes), so the editor prefills them from live config.
+      windowRule: {
+        windowOpenHour: schedule.ruleWindowOpenHour ?? null,
+        windowCloseHour: schedule.ruleWindowCloseHour ?? null,
+        windowDurationHours:
+          schedule.ruleWindowDurationHours != null
+            ? Number(schedule.ruleWindowDurationHours)
+            : null,
+        reopenDelayMinutes: schedule.ruleReopenDelayMinutes ?? null,
+        importWindowLeadDays: schedule.ruleImportWindowLeadDays ?? null,
+        docReviewMinutes: windowCfg.docReviewMinutes,
+        paymentWindowMinutes: windowCfg.paymentWindowMinutes,
+      },
       route: schedule.route
         ? { id: schedule.route.id, name: formatRouteLabel(schedule.route) }
         : null,
diff --git a/apps/edr-freight-web/backoffice/src/components/trainScheduling/BookingWindowSettingsModal.tsx b/apps/edr-freight-web/backoffice/src/components/trainScheduling/BookingWindowSettingsModal.tsx
new file mode 100644
index 000000000..e31ad6a20
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/BookingWindowSettingsModal.tsx
@@ -0,0 +1,409 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  Alert,
+  Badge,
+  Box,
+  Button,
+  Divider,
+  Group,
+  Loader,
+  Modal,
+  NumberInput,
+  Select,
+  Stack,
+  Switch,
+  Text,
+  ThemeIcon,
+} from "@mantine/core";
+import { isAxiosError } from "axios";
+import { Clock, Info, Moon, Sun } from "lucide-react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+import DurationField from "@/components/trainScheduling/DurationField";
+import { api } from "@/services/api";
+import { useToast } from "@/hooks/use-toast";
+import type { UpdateScheduleWindowRulePayload } from "@/types/trainScheduling";
+
+/** Fallbacks matching the API's global-rules defaults (used when a field is null). */
+const DEFAULTS = {
+  windowOpenHour: 8,
+  windowCloseHour: 17,
+  windowDurationHours: 3,
+  docReviewMinutes: 30,
+  paymentWindowMinutes: 60,
+  importWindowLeadDays: 3,
+};
+
+/** 12-hour label for an EAT hour 0–23, e.g. 8 → "8:00 AM", 17 → "5:00 PM". */
+function hourLabel(hour: number): string {
+  const period = hour < 12 ? "AM" : "PM";
+  const h12 = hour % 12 === 0 ? 12 : hour % 12;
+  return `${h12}:00 ${period}`;
+}
+
+const HOUR_OPTIONS = Array.from({ length: 24 }, (_, h) => ({
+  value: String(h),
+  label: `${hourLabel(h)}  ·  ${String(h).padStart(2, "0")}:00`,
+}));
+
+interface FormState {
+  windowOpenHour: number;
+  windowCloseHour: number;
+  windowDurationHours: number | "";
+  docReviewMinutes: number | "";
+  paymentWindowMinutes: number | "";
+  importWindowLeadDays: number | "";
+}
+
+function parseError(error: unknown, fallback: string): string {
+  if (isAxiosError(error)) {
+    const message = error.response?.data?.message;
+    if (Array.isArray(message)) return message.join(", ");
+    if (typeof message === "string") return message;
+  }
+  return fallback;
+}
+
+export interface BookingWindowSettingsModalProps {
+  scheduleId: string | null;
+  opened: boolean;
+  onClose: () => void;
+  /** Called after a successful save (e.g. to refetch a list). */
+  onSaved?: () => void;
+}
+
+/**
+ * Per-schedule booking-window settings editor. Prefills from the schedule's own
+ * rule snapshot, lets staff tune the daily desk hours / durations for just that
+ * train, and saves an override. Only editable before the window opens.
+ */
+export default function BookingWindowSettingsModal({
+  scheduleId,
+  opened,
+  onClose,
+  onSaved,
+}: BookingWindowSettingsModalProps) {
+  const { toast } = useToast();
+
+  const detailQuery = useQuery({
+    ...api.trainScheduling.scheduleDetail.queryOptions({
+      input: { id: scheduleId ?? "" },
+    }),
+    enabled: opened && Boolean(scheduleId),
+  });
+  const schedule = detailQuery.data;
+
+  const save = useMutation(
+    api.trainScheduling.updateScheduleWindowRule.mutationOptions(),
+  );
+
+  const [form, setForm] = useState<FormState | null>(null);
+
+  // Seed the form from the schedule's snapshot once it loads (or when reopened).
+  useEffect(() => {
+    if (!opened || !schedule) return;
+    const r = schedule.windowRule;
+    setForm({
+      windowOpenHour: r?.windowOpenHour ?? DEFAULTS.windowOpenHour,
+      windowCloseHour: r?.windowCloseHour ?? DEFAULTS.windowCloseHour,
+      windowDurationHours: r?.windowDurationHours ?? DEFAULTS.windowDurationHours,
+      docReviewMinutes: r?.docReviewMinutes ?? DEFAULTS.docReviewMinutes,
+      paymentWindowMinutes:
+        r?.paymentWindowMinutes ?? DEFAULTS.paymentWindowMinutes,
+      importWindowLeadDays:
+        r?.importWindowLeadDays ?? DEFAULTS.importWindowLeadDays,
+    });
+  }, [opened, schedule]);
+
+  const isExport = schedule?.direction === "EXPORT";
+  const canEdit = schedule?.windowPhase === "PRE_WINDOW";
+  const is24h =
+    form != null && form.windowOpenHour === form.windowCloseHour;
+  const closeBeforeOpen =
+    form != null && form.windowCloseHour < form.windowOpenHour;
+
+  const reopenSummary = useMemo(() => {
+    if (!form) return "";
+    const doc = Number(form.docReviewMinutes) || 0;
+    const pay = Number(form.paymentWindowMinutes) || 0;
+    const total = doc + pay;
+    const h = Math.floor(total / 60);
+    const m = total % 60;
+    const parts = [h ? `${h}h` : "", m ? `${m}m` : ""].filter(Boolean);
+    return parts.length ? parts.join(" ") : "0m";
+  }, [form]);
+
+  const handleSave = async () => {
+    if (!scheduleId || !form) return;
+    // Numeric fields must hold real values.
+    const duration = Number(form.windowDurationHours);
+    const doc = Number(form.docReviewMinutes);
+    const pay = Number(form.paymentWindowMinutes);
+    const lead = Number(form.importWindowLeadDays);
+    if (
+      form.windowDurationHours === "" ||
+      form.docReviewMinutes === "" ||
+      form.paymentWindowMinutes === "" ||
+      form.importWindowLeadDays === "" ||
+      !Number.isFinite(duration) ||
+      !Number.isFinite(doc) ||
+      !Number.isFinite(pay) ||
+      !Number.isFinite(lead)
+    ) {
+      toast({
+        title: "Fill every field before saving",
+        variant: "destructive",
+      });
+      return;
+    }
+    if (closeBeforeOpen) {
+      toast({
+        title: "Close hour must be on or after the open hour",
+        description: "Set them equal for a 24-hour desk.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const payload: UpdateScheduleWindowRulePayload = {
+      windowOpenHour: form.windowOpenHour,
+      windowCloseHour: form.windowCloseHour,
+      windowDurationHours: duration,
+      docReviewMinutes: doc,
+      paymentWindowMinutes: pay,
+      importWindowLeadDays: lead,
+    };
+
+    try {
+      await save.mutateAsync({ id: scheduleId, payload });
+      toast({ title: "Booking window settings updated" });
+      onSaved?.();
+      onClose();
+    } catch (err) {
+      toast({
+        title: "Update failed",
+        description: parseError(err, "Could not update booking window"),
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      centered
+      radius="lg"
+      size="lg"
+      title={
+        <Group gap="sm">
+          <ThemeIcon variant="light" color="edr-green" radius="md" size={34}>
+            <Clock size={18} />
+          </ThemeIcon>
+          <Box>
+            <Text fw={600} lh={1.2}>
+              Booking window settings
+            </Text>
+            <Text size="xs" c="dimmed" lh={1.2}>
+              {schedule?.route?.name ?? "This schedule only"}
+            </Text>
+          </Box>
+        </Group>
+      }
+    >
+      {detailQuery.isLoading || !form ? (
+        <Group justify="center" py="xl">
+          <Loader size="sm" />
+        </Group>
+      ) : !canEdit ? (
+        <Alert
+          variant="light"
+          color="yellow"
+          icon={<Info size={16} />}
+          title="Window already open"
+        >
+          Booking window settings can only be changed before the window opens.
+          This schedule is currently{" "}
+          <b>{String(schedule?.windowPhase ?? "not window-managed")}</b>.
+        </Alert>
+      ) : (
+        <Stack gap="lg">
+          {isExport ? (
+            <Alert variant="light" color="blue" icon={<Info size={16} />}>
+              Export schedules use a single FCFS lead window — the daily desk
+              hours below don't apply, only the lead time does.
+            </Alert>
+          ) : null}
+
+          {/* ── Daily desk hours ─────────────────────────────────────────── */}
+          <Box>
+            <Group justify="space-between" align="center" mb={6}>
+              <Text size="sm" fw={600}>
+                Daily desk hours (EAT)
+              </Text>
+              {is24h ? (
+                <Badge
+                  variant="light"
+                  color="grape"
+                  leftSection={<Moon size={12} />}
+                >
+                  24-hour desk
+                </Badge>
+              ) : (
+                <Badge
+                  variant="light"
+                  color="edr-green"
+                  leftSection={<Sun size={12} />}
+                >
+                  {hourLabel(form.windowOpenHour)} – {hourLabel(form.windowCloseHour)}
+                </Badge>
+              )}
+            </Group>
+            <Group grow align="flex-start">
+              <Select
+                label="Opens"
+                data={HOUR_OPTIONS}
+                value={String(form.windowOpenHour)}
+                onChange={(v) =>
+                  v != null &&
+                  setForm((f) => f && { ...f, windowOpenHour: Number(v) })
+                }
+                allowDeselect={false}
+                comboboxProps={{ withinPortal: true }}
+                disabled={isExport}
+              />
+              <Select
+                label="Closes"
+                data={HOUR_OPTIONS}
+                value={String(form.windowCloseHour)}
+                onChange={(v) =>
+                  v != null &&
+                  setForm((f) => f && { ...f, windowCloseHour: Number(v) })
+                }
+                allowDeselect={false}
+                comboboxProps={{ withinPortal: true }}
+                error={closeBeforeOpen ? "Must be ≥ open hour" : undefined}
+                disabled={isExport}
+              />
+            </Group>
+            <Switch
+              mt="sm"
+              size="sm"
+              color="grape"
+              label="Run 24 hours a day (never pause overnight)"
+              checked={is24h}
+              disabled={isExport}
+              onChange={(e) =>
+                setForm((f) => {
+                  if (!f) return f;
+                  // On → close == open (24h desk). Off → restore a normal ~9h
+                  // day, always kept ≥ open hour so it never lands invalid.
+                  const close = e.currentTarget.checked
+                    ? f.windowOpenHour
+                    : Math.min(23, f.windowOpenHour + 9);
+                  return { ...f, windowCloseHour: close };
+                })
+              }
+            />
+            {!isExport ? (
+              <Text size="xs" c="dimmed" mt={6}>
+                A not-yet-full train pauses at the close hour and resumes the next
+                morning at the open hour, every day until it fills or departs.
+              </Text>
+            ) : null}
+          </Box>
+
+          <Divider />
+
+          {/* ── Cycle timing ─────────────────────────────────────────────── */}
+          <Box>
+            <Text size="sm" fw={600} mb={6}>
+              Cycle timing
+            </Text>
+            <Stack gap="sm">
+              <DurationField
+                label="Window duration"
+                description="How long each booking cycle stays open before it closes for review"
+                value={form.windowDurationHours}
+                nativeUnit="hours"
+                onChange={(v) =>
+                  setForm((f) => f && { ...f, windowDurationHours: v })
+                }
+                min={0.0166}
+                disabled={isExport}
+              />
+              <Group grow align="flex-start">
+                <DurationField
+                  label="Document review"
+                  description="Staff time to accept documents after the window closes"
+                  value={form.docReviewMinutes}
+                  nativeUnit="minutes"
+                  onChange={(v) =>
+                    setForm((f) => f && { ...f, docReviewMinutes: v })
+                  }
+                  min={0}
+                  disabled={isExport}
+                />
+                <DurationField
+                  label="Payment window"
+                  description="Time a selected customer has to pay"
+                  value={form.paymentWindowMinutes}
+                  nativeUnit="minutes"
+                  onChange={(v) =>
+                    setForm((f) => f && { ...f, paymentWindowMinutes: v })
+                  }
+                  min={1}
+                  disabled={isExport}
+                />
+              </Group>
+              {!isExport ? (
+                <Text size="xs" c="dimmed">
+                  Reopen gap after each cycle = document review + payment ={" "}
+                  <b>{reopenSummary}</b>.
+                </Text>
+              ) : null}
+            </Stack>
+          </Box>
+
+          <Divider />
+
+          {/* ── Lead time ────────────────────────────────────────────────── */}
+          <NumberInput
+            label={isExport ? "Booking lead (days)" : "Window lead (days)"}
+            description={
+              isExport
+                ? "How many days before departure export booking opens"
+                : "How many days before departure the booking window starts"
+            }
+            value={form.importWindowLeadDays}
+            onChange={(v) =>
+              setForm(
+                (f) =>
+                  f && {
+                    ...f,
+                    importWindowLeadDays: v === "" ? "" : Number(v),
+                  },
+              )
+            }
+            min={0}
+            clampBehavior="none"
+            allowDecimal={false}
+          />
+
+          <Group justify="flex-end" mt="xs">
+            <Button variant="default" onClick={onClose} disabled={save.isPending}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleSave}
+              loading={save.isPending}
+              disabled={closeBeforeOpen}
+            >
+              Save settings
+            </Button>
+          </Group>
+        </Stack>
+      )}
+    </Modal>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/constants/URLS.ts b/apps/edr-freight-web/backoffice/src/constants/URLS.ts
index 8112b4299..e1199b4ed 100644
--- a/apps/edr-freight-web/backoffice/src/constants/URLS.ts
+++ b/apps/edr-freight-web/backoffice/src/constants/URLS.ts
@@ -281,6 +281,8 @@ export const URL_CONSTANTS = {
       `/train-scheduling/schedules/${id}/assign-unassigned-booking`,
     BOOKING_WINDOW: (id: string) =>
       `/train-scheduling/schedules/${id}/booking-window`,
+    WINDOW_RULE: (id: string) =>
+      `/train-scheduling/schedules/${id}/window-rule`,
     CONTRACT_BOOKING_WINDOWS: (contractId: string) =>
       `/train-scheduling/contracts/${contractId}/booking-windows`,
     MARK_BOOKING_PAID: (bookingId: string) =>
diff --git a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2DetailPage.tsx b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2DetailPage.tsx
index 958049a63..1c7110a5e 100644
--- a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2DetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2DetailPage.tsx
@@ -20,6 +20,7 @@ import {
   ArrowLeft,
   CalendarClock,
   CheckCircle2,
+  Clock,
   Container as ContainerIcon,
   Eye,
   FileText,
@@ -47,7 +48,8 @@ import { ContainerPlacementGrid } from "@/components/trainScheduling/ContainerPl
 import { FleetAvailabilitySummary } from "@/components/trainScheduling/FleetAvailabilitySummary";
 import { ImportLoadingConfirmationPanel } from "@/components/trainScheduling/ImportLoadingConfirmationPanel";
 import { RescheduleTrainDialog } from "@/components/trainScheduling/RescheduleTrainDialog";
-import { ScheduleBatchPanel } from "@/components/trainScheduling/ScheduleBatchPanel";
+import BookingWindowSettingsModal from "@/components/trainScheduling/BookingWindowSettingsModal";
+// import { ScheduleBatchPanel } from "@/components/trainScheduling/ScheduleBatchPanel";
 import { ScheduleBookingsStep } from "@/components/trainScheduling/ScheduleBookingsStep";
 import { ScheduleWorkspacePanel } from "@/components/trainScheduling/ScheduleWorkspacePanel";
 import { FreightTypeBadge } from "@/components/trainScheduling/ScheduleStatusBadge";
@@ -95,6 +97,7 @@ export default function TrainScheduleV2DetailPage() {
   const [previewResult, setPreviewResult] = useState<TrainSchedulePreviewResponse | null>(null);
   const [containerPlacements, setContainerPlacements] = useState<ContainerPlacement[]>([]);
   const [maintenanceOpen, setMaintenanceOpen] = useState(false);
+  const [windowSettingsOpen, setWindowSettingsOpen] = useState(false);
   const [gatepassSecuredAt, setGatepassSecuredAt] = useState("");
   const [gatepassReference, setGatepassReference] = useState("");
   const [gatepassFileUrl, setGatepassFileUrl] = useState("");
@@ -886,6 +889,18 @@ export default function TrainScheduleV2DetailPage() {
                   Track train
                 </Button>
               ) : null}
+              {schedule.windowPhase === "PRE_WINDOW" ? (
+                <Button
+                  variant="light"
+                  color="edr-green"
+                  radius="lg"
+                  size="sm"
+                  leftSection={<Clock size={16} />}
+                  onClick={() => setWindowSettingsOpen(true)}
+                >
+                  Window settings
+                </Button>
+              ) : null}
               {["DRAFT", "SCHEDULED"].includes(schedule.status) ? (
                 <Button
                   variant="default"
@@ -1126,7 +1141,7 @@ export default function TrainScheduleV2DetailPage() {
         </Stack>
       </Paper>
 
-            <ScheduleBatchPanel schedule={schedule} />
+            {/* <ScheduleBatchPanel schedule={schedule} /> */}
           </Stack>
         </Tabs.Panel>
 
@@ -1150,6 +1165,13 @@ export default function TrainScheduleV2DetailPage() {
           onComplete={() => void detailQuery.refetch()}
         />
       ) : null}
+
+      <BookingWindowSettingsModal
+        scheduleId={scheduleId ?? null}
+        opened={windowSettingsOpen}
+        onClose={() => setWindowSettingsOpen(false)}
+        onSaved={() => void detailQuery.refetch()}
+      />
     </PageContainer>
   );
 }
diff --git a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2ListPage.tsx b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2ListPage.tsx
index ff2c2b433..1d84ed80c 100644
--- a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2ListPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2ListPage.tsx
@@ -20,6 +20,7 @@ import {
   ArrowRight,
   Ban,
   CalendarClock,
+  Clock,
   Eye,
   MoreHorizontal,
   Navigation,
@@ -36,6 +37,7 @@ 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 BookingWindowSettingsModal from "@/components/trainScheduling/BookingWindowSettingsModal";
 import {
   locomotiveOption,
   showScheduleWarnings,
@@ -86,6 +88,7 @@ export default function TrainScheduleV2ListPage() {
   const [statusFilter, setStatusFilter] = useState("ALL");
   const [freightFilter, setFreightFilter] = useState("ALL");
   const [createOpen, setCreateOpen] = useState(false);
+  const [windowSettingsId, setWindowSettingsId] = useState<string | null>(null);
   const [routeId, setRouteId] = useState("");
   const [scheduleDate, setScheduleDate] = useState("");
   const [locomotiveIds, setLocomotiveIds] = useState<string[]>([]);
@@ -315,6 +318,14 @@ export default function TrainScheduleV2ListPage() {
                       Track
                     </Menu.Item>
                   ) : null}
+                  {["DRAFT", "SCHEDULED"].includes(schedule.status) ? (
+                    <Menu.Item
+                      leftSection={<Clock size={15} />}
+                      onClick={() => setWindowSettingsId(schedule.id)}
+                    >
+                      Booking window settings
+                    </Menu.Item>
+                  ) : null}
                   {["DRAFT", "SCHEDULED"].includes(schedule.status) ? (
                     <Menu.Item
                       color="red"
@@ -583,6 +594,13 @@ export default function TrainScheduleV2ListPage() {
           </Group>
         </Stack>
       </Modal>
+
+      <BookingWindowSettingsModal
+        scheduleId={windowSettingsId}
+        opened={windowSettingsId != null}
+        onClose={() => setWindowSettingsId(null)}
+        onSaved={() => void schedulesQuery.refetch()}
+      />
     </PageContainer>
   );
 }
diff --git a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainSchedulingGlobalRulesPage.tsx b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainSchedulingGlobalRulesPage.tsx
index 4cccd35b4..c71235640 100644
--- a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainSchedulingGlobalRulesPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainSchedulingGlobalRulesPage.tsx
@@ -58,6 +58,7 @@ export default function TrainSchedulingGlobalRulesPage() {
       "importWindowLeadDays",
       "exportBookingLeadHours",
       "windowOpenHour",
+      "windowCloseHour",
       "windowDurationHours",
       "docReviewMinutes",
       "paymentWindowMinutes",
@@ -196,7 +197,7 @@ export default function TrainSchedulingGlobalRulesPage() {
           />
           <NumberInput
             label="Window open hour (EAT)"
-            description="Local hour the import window opens on its booking day (e.g. 8 = 08:00)"
+            description="Local hour the booking desk opens each day (e.g. 8 = 08:00)"
             value={form.windowOpenHour ?? ""}
             onChange={(value) =>
               setForm((current) => ({ ...current, windowOpenHour: value }))
@@ -207,6 +208,19 @@ export default function TrainSchedulingGlobalRulesPage() {
             max={23}
             disabled={loading}
           />
+          <NumberInput
+            label="Window close hour (EAT)"
+            description="Local hour the booking desk shuts each day; a not-yet-full window resumes next morning at the open hour. Set equal to the open hour for a 24-hour desk."
+            value={form.windowCloseHour ?? ""}
+            onChange={(value) =>
+              setForm((current) => ({ ...current, windowCloseHour: value }))
+            }
+            clampBehavior="none"
+            allowDecimal
+            min={0}
+            max={23}
+            disabled={loading}
+          />
           <DurationField
             label="Window duration"
             description="How long the import booking window stays open"
diff --git a/apps/edr-freight-web/backoffice/src/services/api.ts b/apps/edr-freight-web/backoffice/src/services/api.ts
index 7c6746ec7..428fcd973 100644
--- a/apps/edr-freight-web/backoffice/src/services/api.ts
+++ b/apps/edr-freight-web/backoffice/src/services/api.ts
@@ -58,6 +58,7 @@ import type {
   TrainScheduleDetail,
   TrainScheduleFilters,
   TrainScheduleListItem,
+  UpdateScheduleWindowRulePayload,
   TrainSchedulePreviewPayload,
   TrainSchedulePreviewResponse,
   TrainTrackResponse,
@@ -438,6 +439,18 @@ export const api = {
       () => TRAIN_SCHEDULING_INVALIDATIONS,
     ),
 
+    updateScheduleWindowRule: endpoint<
+      { id: string; payload: UpdateScheduleWindowRulePayload },
+      TrainScheduleDetail
+    >(
+      "train-scheduling",
+      "update-schedule-window-rule",
+      ({ id, payload }) =>
+        trainSchedulingService.updateScheduleWindowRule(id, payload),
+      undefined,
+      () => TRAIN_SCHEDULING_INVALIDATIONS,
+    ),
+
     markBookingPaid: endpoint<string, void>(
       "train-scheduling",
       "mark-booking-paid",
diff --git a/apps/edr-freight-web/backoffice/src/services/trainScheduling.service.ts b/apps/edr-freight-web/backoffice/src/services/trainScheduling.service.ts
index aa178d4b7..941b18877 100644
--- a/apps/edr-freight-web/backoffice/src/services/trainScheduling.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/trainScheduling.service.ts
@@ -23,6 +23,7 @@ import type {
   RecordCheckpointPayload,
   StaffBookingWindow,
   TrainScheduleDetail,
+  UpdateScheduleWindowRulePayload,
   TrainScheduleFilters,
   TrainScheduleListItem,
   TrainSchedulePreviewPayload,
@@ -210,6 +211,17 @@ export const trainSchedulingService = {
     return unwrap(response.data);
   },
 
+  updateScheduleWindowRule: async (
+    scheduleId: string,
+    payload: UpdateScheduleWindowRulePayload,
+  ): Promise<TrainScheduleDetail> => {
+    const response = await client.patch<TrainScheduleDetail>(
+      URL_CONSTANTS.TRAIN_SCHEDULING.WINDOW_RULE(scheduleId),
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
   markBookingPaid: async (bookingId: string): Promise<void> => {
     await client.post(
       URL_CONSTANTS.TRAIN_SCHEDULING.MARK_BOOKING_PAID(bookingId),
diff --git a/apps/edr-freight-web/backoffice/src/types/trainScheduling.ts b/apps/edr-freight-web/backoffice/src/types/trainScheduling.ts
index d629311ee..6d77402dd 100644
--- a/apps/edr-freight-web/backoffice/src/types/trainScheduling.ts
+++ b/apps/edr-freight-web/backoffice/src/types/trainScheduling.ts
@@ -108,6 +108,7 @@ export interface TrainSchedulingGlobalRules {
   importWindowLeadDays: number;
   exportBookingLeadHours: number;
   windowOpenHour: number;
+  windowCloseHour: number;
   windowDurationHours: number;
   docReviewMinutes: number;
   paymentWindowMinutes: number;
@@ -399,6 +400,28 @@ export interface TrainScheduleWagonAllocation {
   } | null;
 }
 
+/** Per-schedule booking-window rule snapshot (null fields fall back to global config). */
+export interface ScheduleWindowRule {
+  windowOpenHour: number | null;
+  windowCloseHour: number | null;
+  windowDurationHours: number | null;
+  reopenDelayMinutes: number | null;
+  importWindowLeadDays: number | null;
+  /** Live global values (not snapshotted per schedule) — editor prefill baseline. */
+  docReviewMinutes: number;
+  paymentWindowMinutes: number;
+}
+
+/** Editable window-rule override for one schedule; every field optional. */
+export interface UpdateScheduleWindowRulePayload {
+  windowOpenHour?: number;
+  windowCloseHour?: number;
+  windowDurationHours?: number;
+  docReviewMinutes?: number;
+  paymentWindowMinutes?: number;
+  importWindowLeadDays?: number;
+}
+
 export interface TrainScheduleDetail {
   id: string;
   status: TrainScheduleStatus | string;
@@ -411,6 +434,8 @@ export interface TrainScheduleDetail {
   windowClosesAt?: string | null;
   docReviewEndsAt?: string | null;
   paymentPhaseEndsAt?: string | null;
+  /** Booking-window rule snapshot — prefills the per-schedule settings editor. */
+  windowRule?: ScheduleWindowRule | null;
   route?: {
     id: string;
     name: string;
diff --git a/apps/edr-freight-web/portal/src/App.tsx b/apps/edr-freight-web/portal/src/App.tsx
index 02be21620..7567c485d 100644
--- a/apps/edr-freight-web/portal/src/App.tsx
+++ b/apps/edr-freight-web/portal/src/App.tsx
@@ -5,6 +5,7 @@ import {
   Layers,
   Loader2,
   MapPin,
+  Package,
   Receipt,
   Settings,
 } from "lucide-react";
@@ -35,6 +36,7 @@ import InvoiceDetailPage from "./pages/billing/InvoiceDetailPage";
 import InvoicesList from "./pages/billing/InvoicesList";
 import BookingContractPage from "./pages/bookings/BookingContractPage";
 import BookingDetailPage from "./pages/bookings/BookingDetailPage";
+import BookingsListPage from "./pages/bookings/BookingsListPage";
 import EditBookingPage from "./pages/bookings/EditBookingPage";
 import ContractClearanceFlow from "./pages/contracts/ContractClearanceFlow";
 import ContractDetailPage from "./pages/contracts/ContractDetailPage";
@@ -184,6 +186,11 @@ const sidebarItems: SidebarItem[] = [
     href: "/contracts",
     icon: <Layers size={18} />,
   },
+  {
+    label: "Bookings",
+    href: "/bookings",
+    icon: <Package size={18} />,
+  },
   {
     label: "Tracking",
     href: "/tracking",
@@ -255,12 +262,9 @@ const App = () => {
             }
           >
             <Route path="/portal" element={<MyPortalPage />} />
-            {/* Bookings live under contracts now — the standalone list is gone.
-                Legacy /bookings* entry points redirect into the contract flow. */}
-            <Route
-              path="/bookings"
-              element={<Navigate to="/contracts" replace />}
-            />
+            {/* Bookings are created against a contract, but the full list is
+                browsable here. New-booking entry still routes via a contract. */}
+            <Route path="/bookings" element={<BookingsListPage />} />
             <Route
               path="/bookings/new"
               element={<Navigate to="/contracts/new" replace />}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/BookingsListPage.tsx b/apps/edr-freight-web/portal/src/pages/bookings/BookingsListPage.tsx
new file mode 100644
index 000000000..9a19393c8
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingsListPage.tsx
@@ -0,0 +1,912 @@
+import { useMemo, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Card,
+  Group,
+  Menu,
+  Paper,
+  Select,
+  SimpleGrid,
+  Stack,
+  Text,
+  TextInput,
+  ThemeIcon,
+  Title,
+} from "@mantine/core";
+import type { LucideIcon } from "lucide-react";
+import {
+  ArrowRight,
+  CheckCircle2,
+  FileEdit,
+  LayoutList,
+  MoreVertical,
+  Package,
+  Plus,
+  Search,
+  Train,
+  Wallet,
+  X,
+} from "lucide-react";
+
+import { ShipmentTrackingModal } from "./tracking/ShipmentTrackingModal";
+import { PayNowButton } from "./payments/PayNowButton";
+import { BookingActionButton } from "./clearance/BookingActionButton";
+import { bookingHasInlineAction } from "./clearance/bookingNextAction";
+import {
+  BookingTypeBadge,
+  CargoModeCell,
+  PaymentBadge,
+  SchedulingCell,
+} from "./booking-display";
+
+import { api } from "@/services/api";
+import type { BookingListFilter } from "@/services/bookings.service";
+import { STATUS_CONFIG } from "@/pages/MyPortalPage/constants";
+import type { Freight } from "@edr/types";
+import {
+  DataTable,
+  DataTableFooter,
+  type ColumnDef,
+  usePagination,
+} from "@edr/ui-common";
+
+// Bookings that have left (or are leaving) the yard can be tracked live.
+const TRACKABLE_STATUSES = new Set([
+  "PAID",
+  "IN_TRANSIT",
+  "COMPLETED",
+  "DELIVERED",
+]);
+
+// ── Status filter options (grouped by lifecycle) ──────────────────────────────
+
+const STATUS_FILTERS = [
+  {
+    key: "all",
+    label: "All bookings",
+    statuses: undefined as string | undefined,
+  },
+  {
+    key: "active",
+    label: "In progress",
+    statuses:
+      "SUBMITTED,CHANGES_REQUESTED,PENDING_APPROVAL,APPROVED_PENDING_SIGNATURE,APPROVED,CONTRACT_READY,SIGNED_CUSTOMER,FULLY_EXECUTED,PENDING_CONSOLIDATION,CONSOLIDATED",
+  },
+  { key: "draft", label: "Drafts", statuses: "DRAFT" },
+  {
+    key: "payment",
+    label: "Awaiting payment",
+    statuses:
+      "SELECTED_FOR_BATCH,PNR_GENERATED,PAYMENT_VERIFICATION_IN_PROGRESS,EXPIRED",
+  },
+  { key: "transit", label: "In transit", statuses: "PAID,IN_TRANSIT" },
+  { key: "done", label: "Completed", statuses: "COMPLETED,DELIVERED" },
+  {
+    key: "closed",
+    label: "Cancelled / rejected",
+    statuses: "CANCELLED,REJECTED",
+  },
+] as const;
+
+type StatusFilterKey = (typeof STATUS_FILTERS)[number]["key"];
+
+const SELECT_DATA = STATUS_FILTERS.map((f) => ({
+  value: f.key,
+  label: f.label,
+}));
+
+// Sort options — server-side ordering on the booking list.
+const SORT_OPTIONS = [
+  { value: "createdAt:DESC", label: "Newest first" },
+  { value: "createdAt:ASC", label: "Oldest first" },
+  { value: "scheduledDate:ASC", label: "Ship date ↑" },
+  { value: "scheduledDate:DESC", label: "Ship date ↓" },
+  { value: "reference:ASC", label: "Reference A–Z" },
+  { value: "reference:DESC", label: "Reference Z–A" },
+] as const;
+
+// ── Summary stat cards (clickable lifecycle filters) ──────────────────────────
+
+const STAT_CARDS: Array<{
+  key: StatusFilterKey;
+  label: string;
+  icon: LucideIcon;
+  iconBg: string;
+  iconColor: string;
+}> = [
+  {
+    key: "all",
+    label: "All bookings",
+    icon: LayoutList,
+    iconBg: "#ECF6F1",
+    iconColor: "#0A8A5F",
+  },
+  {
+    key: "active",
+    label: "In progress",
+    icon: Package,
+    iconBg: "#FDF3E0",
+    iconColor: "#C77F09",
+  },
+  {
+    key: "payment",
+    label: "Awaiting payment",
+    icon: Wallet,
+    iconBg: "#FEF6E6",
+    iconColor: "#F2A516",
+  },
+  {
+    key: "draft",
+    label: "Drafts",
+    icon: FileEdit,
+    iconBg: "#F1F4F7",
+    iconColor: "#475569",
+  },
+  {
+    key: "done",
+    label: "Completed",
+    icon: CheckCircle2,
+    iconBg: "#ECF6F1",
+    iconColor: "#0A8A5F",
+  },
+];
+
+// ── Status badge (reuses the shared portal status config) ─────────────────────
+
+function StatusBadge({ status }: { status: string }) {
+  const cfg = STATUS_CONFIG[status];
+  const label = cfg?.badgeLabel ?? status.replace(/_/g, " ");
+  const bg = cfg ? `var(--mantine-color-${cfg.badgeBg}-0, #F1F4F7)` : "#F1F4F7";
+  const text = cfg
+    ? `var(--mantine-color-${cfg.badgeText}-7, #475569)`
+    : "#475569";
+  const dot = cfg
+    ? `var(--mantine-color-${cfg.badgeDot}-6, #94A3B8)`
+    : "#94A3B8";
+  return (
+    <Group
+      gap={6}
+      align="center"
+      wrap="nowrap"
+      style={{
+        display: "inline-flex",
+        borderRadius: 999,
+        backgroundColor: bg,
+        padding: "5px 11px",
+      }}
+    >
+      <Box
+        style={{
+          width: 6,
+          height: 6,
+          borderRadius: "50%",
+          backgroundColor: dot,
+          flexShrink: 0,
+        }}
+      />
+      <Text fz={11} fw={700} style={{ color: text, whiteSpace: "nowrap" }}>
+        {label}
+      </Text>
+    </Group>
+  );
+}
+
+// ── Context-sensitive action button ───────────────────────────────────────────
+
+function PrimaryAction({
+  booking,
+  onNavigate,
+}: {
+  booking: Freight.IBooking;
+  onNavigate: (path: string) => void;
+}) {
+  const { status, id } = booking;
+  const go = () => onNavigate(`/bookings/${id}`);
+  // A general contract is payable as soon as it's FULLY_EXECUTED (signed); a
+  // one-time booking only after it's SELECTED_FOR_BATCH.
+  const isGeneralContract = booking.bookingType === "GENERAL_CONTRACT";
+  if (status === "DRAFT") {
+    return (
+      <Button
+        size="xs"
+        radius="md"
+        fw={700}
+        fz={13}
+        rightSection={<ArrowRight size={14} />}
+        style={{
+          backgroundColor: "var(--mantine-color-edr-ink-0)",
+          color: "#fff",
+        }}
+        onClick={go}
+      >
+        Continue
+      </Button>
+    );
+  }
+  // CHANGES_REQUESTED + clearance/operation steps are handled in place by a
+  // modal (update & resubmit, upload clearance docs, schedule & proceed).
+  if (bookingHasInlineAction(booking)) {
+    return <BookingActionButton booking={booking} size="xs" />;
+  }
+  const payableStatus = isGeneralContract
+    ? "FULLY_EXECUTED"
+    : "SELECTED_FOR_BATCH";
+  if (status === payableStatus && booking.paymentStatus !== "PAID") {
+    return <PayNowButton booking={booking} />;
+  }
+  return (
+    <Button
+      size="xs"
+      radius="md"
+      variant="default"
+      fw={600}
+      fz={13}
+      onClick={go}
+    >
+      View
+    </Button>
+  );
+}
+
+function ColHeader({ label }: { label: string }) {
+  return (
+    <Text
+      fz={11}
+      fw={700}
+      c="edr-muted"
+      style={{
+        letterSpacing: "0.6px",
+        textTransform: "uppercase",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {label}
+    </Text>
+  );
+}
+
+const hMeta = { headerClassName: "bg-[#F4F7FA]" };
+
+function fmtDate(iso?: string | null): string {
+  if (!iso) return "";
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime())
+    ? ""
+    : d.toLocaleDateString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+}
+
+// ── Main component ────────────────────────────────────────────────────────────
+
+// Lightweight count query for a single lifecycle filter (reads only `total`).
+function useStatusCount(statuses: string | undefined): number | undefined {
+  const { data } = useQuery(
+    api.bookings.list.queryOptions({
+      input: { statuses, page: 1, pageSize: 1 },
+      staleTime: 30_000,
+    }),
+  );
+  return data?.meta?.total;
+}
+
+function StatCard({
+  card,
+  active,
+  count,
+  onSelect,
+}: {
+  card: (typeof STAT_CARDS)[number];
+  active: boolean;
+  count: number | undefined;
+  onSelect: () => void;
+}) {
+  const Icon = card.icon;
+  return (
+    <Paper
+      role="button"
+      tabIndex={0}
+      onClick={onSelect}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect();
+        }
+      }}
+      p="md"
+      radius="lg"
+      withBorder
+      style={{
+        cursor: "pointer",
+        transition: "box-shadow 140ms ease, border-color 140ms ease",
+        borderColor: active ? "#F2A516" : "var(--mantine-color-edr-border-0)",
+        boxShadow: active ? "0 0 0 1px #F2A516" : "none",
+      }}
+    >
+      <Group gap={12} wrap="nowrap" align="center">
+        <Box
+          style={{
+            width: 42,
+            height: 42,
+            borderRadius: 11,
+            flexShrink: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: card.iconBg,
+            color: card.iconColor,
+          }}
+        >
+          <Icon size={20} strokeWidth={2} />
+        </Box>
+        <Box style={{ minWidth: 0 }}>
+          <Text fz={24} fw={800} lh={1.05} c="edr-text">
+            {count ?? "—"}
+          </Text>
+          <Text fz={12} fw={600} c="edr-muted" truncate>
+            {card.label}
+          </Text>
+        </Box>
+      </Group>
+    </Paper>
+  );
+}
+
+export default function BookingsListPage() {
+  const navigate = useNavigate();
+  const { pagination, setPagination } = usePagination({ pageSize: 10 });
+  const [statusFilter, setStatusFilter] = useState<StatusFilterKey>("all");
+  const [query, setQuery] = useState("");
+  const [typeFilter, setTypeFilter] = useState<string | null>(null);
+  const [freightFilter, setFreightFilter] = useState<string | null>(null);
+  const [sort, setSort] = useState<string>("createdAt:DESC");
+  const [createdFrom, setCreatedFrom] = useState<string>("");
+  const [createdTo, setCreatedTo] = useState<string>("");
+  const [trackingBooking, setTrackingBooking] =
+    useState<Freight.IBooking | null>(null);
+
+  const statuses = STATUS_FILTERS.find((t) => t.key === statusFilter)?.statuses;
+  const [sortBy, sortOrder] = sort.split(":") as [string, "ASC" | "DESC"];
+
+  const resetPage = () =>
+    setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+
+  const selectFilter = (key: StatusFilterKey) => {
+    setStatusFilter(key);
+    resetPage();
+  };
+
+  const hasExtraFilters =
+    !!typeFilter || !!freightFilter || !!createdFrom || !!createdTo;
+  const clearExtraFilters = () => {
+    setTypeFilter(null);
+    setFreightFilter(null);
+    setCreatedFrom("");
+    setCreatedTo("");
+    resetPage();
+  };
+
+  const filter: BookingListFilter = useMemo(
+    () => ({
+      statuses,
+      bookingType: typeFilter ?? undefined,
+      freightType: freightFilter ?? undefined,
+      createdFrom: createdFrom || undefined,
+      // include the whole selected end day
+      createdTo: createdTo ? `${createdTo}T23:59:59.999Z` : undefined,
+      page: pagination.pageIndex + 1,
+      pageSize: pagination.pageSize,
+      sortBy,
+      sortOrder,
+    }),
+    [
+      statuses,
+      typeFilter,
+      freightFilter,
+      createdFrom,
+      createdTo,
+      pagination.pageIndex,
+      pagination.pageSize,
+      sortBy,
+      sortOrder,
+    ],
+  );
+
+  const { data, isLoading, isError } = useQuery(
+    api.bookings.list.queryOptions({ input: filter }),
+  );
+
+  // Per-card lifecycle counts (one cheap query each, total-only).
+  const allCount = useStatusCount(undefined);
+  const activeCount = useStatusCount(
+    STATUS_FILTERS.find((f) => f.key === "active")!.statuses,
+  );
+  const paymentCount = useStatusCount(
+    STATUS_FILTERS.find((f) => f.key === "payment")!.statuses,
+  );
+  const draftCount = useStatusCount(
+    STATUS_FILTERS.find((f) => f.key === "draft")!.statuses,
+  );
+  const doneCount = useStatusCount(
+    STATUS_FILTERS.find((f) => f.key === "done")!.statuses,
+  );
+  const cardCounts: Record<StatusFilterKey, number | undefined> = {
+    all: allCount,
+    active: activeCount,
+    payment: paymentCount,
+    draft: draftCount,
+    done: doneCount,
+    transit: undefined,
+    closed: undefined,
+  };
+
+  const allItems = data?.items ?? [];
+  const total = data?.meta?.total ?? allItems.length;
+
+  // Server handles status + pagination; reference search is applied on the page.
+  const rows = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return allItems;
+    return allItems.filter((b) =>
+      [b.reference, b.originYard?.label, b.destinationYard?.label]
+        .filter(Boolean)
+        .some((v) => String(v).toLowerCase().includes(q)),
+    );
+  }, [allItems, query]);
+
+  const pageCount = Math.max(1, Math.ceil(total / pagination.pageSize));
+  const dataTableStatus = isLoading ? "loading" : isError ? "error" : "success";
+  const showEmpty = !isLoading && !isError && rows.length === 0;
+
+  const columns: ColumnDef<Freight.IBooking>[] = [
+    {
+      id: "booking",
+      size: 244,
+      meta: hMeta,
+      header: () => <ColHeader label="Booking" />,
+      cell: ({ row }) => {
+        const b = row.original;
+        const cargoLabel =
+          b.freightType === "BULK" ? "Bulk cargo" : "Container";
+        return (
+          <Group gap={12} wrap="nowrap" align="center">
+            <Box
+              style={{
+                width: 36,
+                height: 36,
+                borderRadius: 9,
+                flexShrink: 0,
+                backgroundColor: "var(--mantine-color-edr-soft-0)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <Package
+                size={18}
+                color="var(--mantine-color-edr-green-7)"
+                strokeWidth={2}
+              />
+            </Box>
+            <Box style={{ minWidth: 0 }}>
+              <Text fz={14} fw={700} c="edr-text" truncate>
+                {b.reference}
+              </Text>
+              <Text fz={12} c="edr-muted">
+                {cargoLabel}
+              </Text>
+            </Box>
+          </Group>
+        );
+      },
+    },
+    {
+      id: "type",
+      size: 150,
+      meta: hMeta,
+      header: () => <ColHeader label="Type" />,
+      cell: ({ row }) => <BookingTypeBadge booking={row.original} />,
+    },
+    {
+      id: "cargo",
+      size: 168,
+      meta: hMeta,
+      header: () => <ColHeader label="Cargo" />,
+      cell: ({ row }) => <CargoModeCell booking={row.original} />,
+    },
+    {
+      id: "route",
+      size: 196,
+      meta: hMeta,
+      header: () => <ColHeader label="Route" />,
+      cell: ({ row }) => {
+        const b = row.original;
+        const origin = b.originYard?.label ?? b.originYard?.code ?? "—";
+        const dest = b.destinationYard?.label ?? b.destinationYard?.code ?? "—";
+        const sub = fmtDate(b.scheduledDate ?? b.createdAt);
+        return (
+          <Box>
+            <Text fz={13} fw={600} c="edr-text">
+              {origin} → {dest}
+            </Text>
+            {sub && (
+              <Text fz={12} c="edr-muted">
+                {sub}
+              </Text>
+            )}
+          </Box>
+        );
+      },
+    },
+    {
+      id: "payment",
+      size: 130,
+      meta: hMeta,
+      header: () => <ColHeader label="Payment" />,
+      cell: ({ row }) => <PaymentBadge status={row.original.paymentStatus} />,
+    },
+    {
+      id: "scheduling",
+      size: 140,
+      meta: hMeta,
+      header: () => <ColHeader label="Train" />,
+      cell: ({ row }) => <SchedulingCell booking={row.original} />,
+    },
+    {
+      id: "status",
+      size: 190,
+      meta: hMeta,
+      header: () => <ColHeader label="Status" />,
+      cell: ({ row }) => <StatusBadge status={row.original.status} />,
+    },
+    {
+      id: "amount",
+      size: 140,
+      meta: hMeta,
+      header: () => <ColHeader label="Amount" />,
+      cell: ({ row }) => {
+        const b = row.original as Freight.IBooking & {
+          totalAmount?: number;
+          amount?: number;
+        };
+        const amount = b.totalAmount ?? b.amount ?? null;
+        if (!amount) {
+          return (
+            <Text fz={14} fw={700} style={{ color: "#94A3B8" }}>
+              —
+            </Text>
+          );
+        }
+        return (
+          <Text fz={14} fw={700} c="edr-text">
+            ETB {amount.toLocaleString()}
+          </Text>
+        );
+      },
+    },
+    {
+      id: "actions",
+      meta: hMeta,
+      header: () => null,
+      cell: ({ row }) => {
+        const booking = row.original;
+        const trackable = TRACKABLE_STATUSES.has(booking.status);
+        return (
+          <Group
+            justify="flex-end"
+            gap={8}
+            wrap="nowrap"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {trackable && (
+              <Button
+                size="xs"
+                radius="md"
+                variant="light"
+                color="edr-green"
+                fw={700}
+                fz={13}
+                leftSection={<Train size={14} />}
+                onClick={() => setTrackingBooking(booking)}
+              >
+                Track
+              </Button>
+            )}
+            <PrimaryAction booking={booking} onNavigate={navigate} />
+            <Menu position="bottom-end" withinPortal shadow="md" radius="md">
+              <Menu.Target>
+                <ActionIcon
+                  variant="transparent"
+                  size={30}
+                  radius="md"
+                  aria-label="More options"
+                >
+                  <MoreVertical size={16} color="#9AA8B5" />
+                </ActionIcon>
+              </Menu.Target>
+              <Menu.Dropdown>
+                <Menu.Item onClick={() => navigate(`/bookings/${booking.id}`)}>
+                  View details
+                </Menu.Item>
+                {trackable && (
+                  <Menu.Item
+                    leftSection={<Train size={15} />}
+                    onClick={() => setTrackingBooking(booking)}
+                  >
+                    Track shipment
+                  </Menu.Item>
+                )}
+              </Menu.Dropdown>
+            </Menu>
+          </Group>
+        );
+      },
+    },
+  ];
+
+  return (
+    <Box style={{ padding: "28px 32px 32px" }}>
+      <Stack gap="lg">
+        {/* ── Page header ─────────────────────────────────────────────── */}
+        <Group justify="space-between" align="flex-end" wrap="wrap" gap="md">
+          <Box>
+            <Group gap={10} align="center">
+              <Title
+                order={1}
+                fw={800}
+                fz={26}
+                style={{ letterSpacing: "-0.01em" }}
+              >
+                Bookings
+              </Title>
+            </Group>
+            <Text size="sm" c="edr-muted" mt={4}>
+              Track every cargo booking — from draft to delivery.
+            </Text>
+          </Box>
+          <Button
+            component={Link}
+            to="/contracts"
+            color="edr-green"
+            radius="md"
+            leftSection={<Plus size={16} />}
+          >
+            New booking
+          </Button>
+        </Group>
+
+        {/* ── Summary stat cards ──────────────────────────────────────── */}
+        <SimpleGrid cols={{ base: 2, sm: 3, lg: 5 }} spacing="md">
+          {STAT_CARDS.map((card) => (
+            <StatCard
+              key={card.key}
+              card={card}
+              active={statusFilter === card.key}
+              count={cardCounts[card.key]}
+              onSelect={() => selectFilter(card.key)}
+            />
+          ))}
+        </SimpleGrid>
+
+        {/* ── Bookings table card ──────────────────────────────────────── */}
+        <Card p={0} style={{ overflow: "hidden" }}>
+          <Group
+            justify="space-between"
+            gap={12}
+            px={20}
+            py={14}
+            wrap="wrap"
+            style={{
+              borderBottom: "1px solid var(--mantine-color-edr-border-0)",
+            }}
+          >
+            <Group gap={10} wrap="wrap" style={{ flex: 1, minWidth: 260 }}>
+              <TextInput
+                placeholder="Search reference or route…"
+                leftSection={<Search size={16} />}
+                value={query}
+                onChange={(e) => setQuery(e.currentTarget.value)}
+                rightSection={
+                  query ? (
+                    <ActionIcon
+                      size="sm"
+                      variant="transparent"
+                      color="gray"
+                      onClick={() => setQuery("")}
+                    >
+                      <X size={14} />
+                    </ActionIcon>
+                  ) : null
+                }
+                radius="md"
+                style={{ flex: 1, minWidth: 200, maxWidth: 340 }}
+              />
+              <Select
+                data={SELECT_DATA}
+                value={statusFilter}
+                onChange={(value) =>
+                  selectFilter((value as StatusFilterKey) ?? "all")
+                }
+                allowDeselect={false}
+                radius="md"
+                checkIconPosition="right"
+                comboboxProps={{ withinPortal: true }}
+                style={{ width: 190 }}
+                aria-label="Filter by status"
+              />
+              <Select
+                placeholder="Any type"
+                data={[
+                  { value: "ONE_TIME", label: "One-time" },
+                  { value: "GENERAL_CONTRACT", label: "General contract" },
+                ]}
+                value={typeFilter}
+                onChange={(v) => {
+                  setTypeFilter(v);
+                  resetPage();
+                }}
+                clearable
+                radius="md"
+                comboboxProps={{ withinPortal: true }}
+                style={{ width: 170 }}
+                aria-label="Filter by booking type"
+              />
+              <Select
+                placeholder="Any cargo"
+                data={[
+                  { value: "CONTAINER", label: "Container" },
+                  { value: "BULK", label: "Bulk" },
+                ]}
+                value={freightFilter}
+                onChange={(v) => {
+                  setFreightFilter(v);
+                  resetPage();
+                }}
+                clearable
+                radius="md"
+                comboboxProps={{ withinPortal: true }}
+                style={{ width: 150 }}
+                aria-label="Filter by cargo type"
+              />
+              <Select
+                data={SORT_OPTIONS.map((o) => ({
+                  value: o.value,
+                  label: o.label,
+                }))}
+                value={sort}
+                onChange={(v) => {
+                  setSort(v ?? "createdAt:DESC");
+                  resetPage();
+                }}
+                allowDeselect={false}
+                radius="md"
+                comboboxProps={{ withinPortal: true }}
+                style={{ width: 160 }}
+                aria-label="Sort bookings"
+              />
+              <TextInput
+                type="date"
+                value={createdFrom}
+                onChange={(e) => {
+                  setCreatedFrom(e.currentTarget.value);
+                  resetPage();
+                }}
+                radius="md"
+                style={{ width: 150 }}
+                aria-label="Created from"
+                placeholder="From"
+              />
+              <TextInput
+                type="date"
+                value={createdTo}
+                onChange={(e) => {
+                  setCreatedTo(e.currentTarget.value);
+                  resetPage();
+                }}
+                radius="md"
+                style={{ width: 150 }}
+                aria-label="Created to"
+                placeholder="To"
+              />
+              {hasExtraFilters && (
+                <Button
+                  variant="subtle"
+                  color="gray"
+                  radius="md"
+                  size="sm"
+                  leftSection={<X size={14} />}
+                  onClick={clearExtraFilters}
+                >
+                  Clear
+                </Button>
+              )}
+            </Group>
+            <Text fz={12} c="edr-muted">
+              {total} booking{total !== 1 ? "s" : ""}
+            </Text>
+          </Group>
+
+          {showEmpty ? (
+            <Stack align="center" gap={4} px="lg" py={64} ta="center">
+              <ThemeIcon
+                size={56}
+                radius="lg"
+                color="edr-green"
+                variant="light"
+                mb="xs"
+              >
+                <Package size={28} />
+              </ThemeIcon>
+              <Text size="sm" fw={600} c="edr-text">
+                {query
+                  ? "No bookings match your search"
+                  : "No bookings here yet"}
+              </Text>
+              <Text size="xs" c="edr-muted" maw={320}>
+                {query
+                  ? "Try a different reference or clear the search."
+                  : "Bookings are created against a contract. Open a contract to book a shipment."}
+              </Text>
+              {!query && (
+                <Button
+                  component={Link}
+                  to="/contracts"
+                  size="sm"
+                  mt="md"
+                  variant="light"
+                  color="edr-green"
+                >
+                  Go to contracts
+                </Button>
+              )}
+            </Stack>
+          ) : (
+            <DataTable
+              columns={columns}
+              data={rows}
+              status={dataTableStatus}
+              onRowClick={(row) =>
+                navigate(`/bookings/${(row as Freight.IBooking).id}`)
+              }
+              pagination={{
+                pageIndex: pagination.pageIndex,
+                pageSize: pagination.pageSize,
+                pageCount,
+                totalCount: total,
+              }}
+              tableOptions={{
+                state: { pagination },
+                onPaginationChange: setPagination,
+                manualPagination: true,
+                pageCount,
+              }}
+              containerClassName="border-0 shadow-none rounded-none"
+              footer={DataTableFooter}
+            />
+          )}
+        </Card>
+      </Stack>
+
+      <ShipmentTrackingModal
+        opened={trackingBooking !== null}
+        onClose={() => setTrackingBooking(null)}
+        bookingId={trackingBooking?.id ?? ""}
+        bookingReference={trackingBooking?.reference ?? ""}
+        originLabel={
+          trackingBooking?.originYard?.label ??
+          trackingBooking?.originYard?.code
+        }
+        destinationLabel={
+          trackingBooking?.destinationYard?.label ??
+          trackingBooking?.destinationYard?.code
+        }
+      />
+    </Box>
+  );
+}