automate the schedule

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

@@ -44,6 +44,7 @@ import toast from "react-hot-toast";
 
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
 import { bookingsService } from "@/services/bookings.service";
+import { useBookableSchedules } from "@/hooks/trainScheduling/useTrainScheduling";
 import { api } from "@/auth/http";
 import { unwrap } from "@/utils/endpoint";
 import { URL_CONSTANTS } from "@/constants/URLS";
@@ -165,6 +166,7 @@ export default function NewBookingPage() {
   const [freightType, setFreightType] = useState<FreightType>("CONTAINER");
   const [originYardId, setOriginYardId] = useState<string | null>(null);
   const [destinationYardId, setDestinationYardId] = useState<string | null>(null);
+  const [trainScheduleId, setTrainScheduleId] = useState<string | null>(null);
   const [serviceTypeId, setServiceTypeId] = useState<string | null>(null);
   const [scheduledDate, setScheduledDate] = useState("");
   const [tradeDirection, setTradeDirection] = useState("IMPORT");
@@ -207,6 +209,17 @@ export default function NewBookingPage() {
       c.id,
   }));
 
+  const { data: bookableSchedules, isLoading: schedulesLoading } = useBookableSchedules(
+    originYardId,
+    destinationYardId,
+  );
+  const scheduleOptions = (bookableSchedules ?? []).map((s) => ({
+    value: s.id,
+    label: `${s.routeName ?? `${s.origin} → ${s.destination}`} · ${new Date(
+      s.scheduleDate,
+    ).toLocaleString()} · ${s.remainingWagons}/${s.maxWagons} wagons free`,
+  }));
+
   const yards = (refData?.yard ?? []).map((y) => ({ value: y.id, label: y.name ?? y.code }));
   const services = (refData?.service ?? []).map((s) => ({ value: s.id, label: s.name ?? s.code }));
   const shippingLines = (refData?.shipping_line ?? []).map((s) => ({ value: s.id, label: s.name ?? s.code }));
@@ -253,6 +266,7 @@ export default function NewBookingPage() {
     Boolean(originYardId) &&
     Boolean(destinationYardId) &&
     !sameYard &&
+    Boolean(trainScheduleId) &&
     Boolean(serviceTypeId) &&
     Boolean(scheduledDate) &&
     (isGovernment ? governmentInstitution.trim().length >= 2 : Boolean(companyId)) &&
@@ -280,6 +294,7 @@ export default function NewBookingPage() {
         scheduledDate: scheduledDate ? new Date(scheduledDate).toISOString() : new Date().toISOString(),
         originYardId,
         destinationYardId,
+        trainScheduleId: trainScheduleId || undefined,
         serviceTypeId,
         shippingLineId: shippingLineId || undefined,
         firstMilePickupAddress: firstMilePickupAddress.trim() || undefined,
@@ -420,7 +435,10 @@ export default function NewBookingPage() {
                     placeholder="Select origin"
                     data={yards}
                     value={originYardId}
-                    onChange={setOriginYardId}
+                    onChange={(v) => {
+                      setOriginYardId(v);
+                      setTrainScheduleId(null);
+                    }}
                     searchable
                     disabled={isLoading}
                     error={sameYard ? "Same as destination" : undefined}
@@ -430,12 +448,31 @@ export default function NewBookingPage() {
                     placeholder="Select destination"
                     data={yards}
                     value={destinationYardId}
-                    onChange={setDestinationYardId}
+                    onChange={(v) => {
+                      setDestinationYardId(v);
+                      setTrainScheduleId(null);
+                    }}
                     searchable
                     disabled={isLoading}
                     error={sameYard ? "Same as origin" : undefined}
                   />
                 </Group>
+                <Select
+                  label="Train schedule"
+                  placeholder={
+                    originYardId && destinationYardId
+                      ? "Select an open schedule on this route"
+                      : "Pick origin & destination first"
+                  }
+                  data={scheduleOptions}
+                  value={trainScheduleId}
+                  onChange={setTrainScheduleId}
+                  searchable
+                  required
+                  disabled={!originYardId || !destinationYardId || schedulesLoading}
+                  nothingFoundMessage="No open schedules on this route"
+                  description="The booking will be batched against this schedule once its contract is signed."
+                />
                 <Group grow>
                   <Select
                     label="Service type"

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

@@ -52,6 +52,7 @@ import {
   scheduleBrand,
 } from "@/components/trainScheduling/scheduleVisuals";
 import { RescheduleTrainDialog } from "@/components/trainScheduling/RescheduleTrainDialog";
+import { ScheduleBatchPanel } from "@/components/trainScheduling/ScheduleBatchPanel";
 import { WorkflowRail, WorkflowStep } from "@/components/trainScheduling/WorkflowStep";
 import { shouldShowContainerPlacementStep } from "@/components/trainScheduling/schedulingContainerStep.util";
 import { WagonPlanGrid } from "@/components/trainScheduling/WagonPlanGrid";
@@ -902,6 +903,8 @@ export default function TrainScheduleV2DetailPage() {
         </Stack>
       </Paper>
 
+      <ScheduleBatchPanel schedule={schedule} />
+
       {scheduleId ? (
         <RescheduleTrainDialog
           scheduleId={scheduleId}