Merge branch 'freight/feat/booking-schedule' into freight/develop

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

@@ -1,21 +1,21 @@
-import { useParams, useNavigate } from "react-router-dom";
-import { Container, Stack, Grid } from "@mantine/core";
+import { Container, Grid, Stack } from "@mantine/core";
+import { useNavigate, useParams } from "react-router-dom";
 
-import Breadcrumbs from "@/components/ui/Breadcrumbs";
 import {
-  detailStyles,
-  type BookingDetailView,
-  BookingDetailToolbar,
-  BookingDetailHeader,
-  BookingLifecycleStepper,
-  BookingRouteCard,
-  BookingContainersCard,
   BookingApprovalCard,
-  BookingReviewNotesCard,
-  BookingPaymentCard,
-  BookingFactsCard,
+  BookingContainersCard,
+  BookingDetailToolbar,
   BookingDocumentsCard,
+  BookingFactsCard,
+  BookingLifecycleStepper,
+  BookingPaymentCard,
+  BookingPaymentCountdownCard,
+  BookingReviewNotesCard,
+  BookingRouteCard,
+  detailStyles,
+  type BookingDetailView
 } from "@/components/bookings/detail";
+import Breadcrumbs from "@/components/ui/Breadcrumbs";
 
 const BookingDetailPage = () => {
   const { id } = useParams<{ id: string }>();
@@ -25,8 +25,9 @@ const BookingDetailPage = () => {
   const booking: BookingDetailView = {
     id: id || "a61955b7-af21-4664-84d3-7e4e66293b6f",
     reference: "BKG-2026-001456",
-    status: "IN_TRANSIT",
+    status: "SELECTED_FOR_BATCH",
     scheduledDate: "2026-06-15",
+    paymentDeadline: "2026-06-18T17:00:00Z",
     totalAmount: 15750.5,
     paymentCurrency: "USD",
     paymentStatus: "PAID",
@@ -138,6 +139,9 @@ const BookingDetailPage = () => {
           {/* RIGHT — summary sidebar */}
           <Grid.Col span={{ base: 12, lg: 4 }}>
             <Stack gap="lg">
+              {booking.status === "SELECTED_FOR_BATCH" && booking.paymentDeadline && (
+                <BookingPaymentCountdownCard paymentDeadline={booking.paymentDeadline} />
+              )}
               <BookingPaymentCard
                 totalAmount={booking.totalAmount}
                 currency={booking.paymentCurrency}