Add countdown timer component and integrate phase deadlines in booking windows

apps/edr-freight-web/backoffice/src/components/trainScheduling/ScheduleWorkspacePanel.tsx

@@ -28,6 +28,8 @@ import {
   X,
 } from "lucide-react";
 
+import { CountdownTimer } from "@edr/ui-common";
+
 import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
 import { api } from "@/services/api";
 import { useToast } from "@/hooks/use-toast";
@@ -45,6 +47,32 @@ interface ScheduleWorkspacePanelProps {
 
 const GREEN = "var(--mantine-color-edr-green-6)";
 
+/**
+ * Deadline + label for the window phase this schedule is currently in.
+ * Phases run: window open (windowClosesAt) → document review (docReviewEndsAt)
+ * → payment (paymentPhaseEndsAt). Display only. Returns null off-phase.
+ */
+function phaseCountdown(
+  schedule: TrainScheduleDetail,
+): { label: string; deadline: string } | null {
+  switch (schedule.windowPhase) {
+    case "OPEN":
+      return schedule.windowClosesAt
+        ? { label: "Booking window closes in", deadline: schedule.windowClosesAt }
+        : null;
+    case "DOC_REVIEW":
+      return schedule.docReviewEndsAt
+        ? { label: "Document review ends in", deadline: schedule.docReviewEndsAt }
+        : null;
+    case "PAYMENT":
+      return schedule.paymentPhaseEndsAt
+        ? { label: "Payment window ends in", deadline: schedule.paymentPhaseEndsAt }
+        : null;
+    default:
+      return null;
+  }
+}
+
 /** Cargo weight already allocated to this train (sum of on-train bookings). */
 function usedWeight(schedule: TrainScheduleDetail): number {
   return (schedule.bookings ?? []).reduce(
@@ -248,6 +276,25 @@ export function ScheduleWorkspacePanel({
           </Box>
         </Group>
 
+        {(() => {
+          const cd = phaseCountdown(schedule);
+          return cd ? (
+            <Group
+              gap={8}
+              p="xs"
+              wrap="nowrap"
+              align="center"
+              style={{
+                borderRadius: 10,
+                background: "var(--mantine-color-blue-0)",
+                border: "1px solid var(--mantine-color-blue-2)",
+              }}
+            >
+              <CountdownTimer deadline={cd.deadline} label={cd.label} size="sm" />
+            </Group>
+          ) : null;
+        })()}
+
         {over ? (
           <Group
             gap={8}