refactor: migrate from most of the custom hooks into the api.ts

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

@@ -1,7 +1,3 @@
-import { useEffect, useMemo, useState } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useNavigate } from "react-router-dom";
-import { isAxiosError } from "axios";
 import {
   ActionIcon,
   Badge,
@@ -23,6 +19,8 @@ import {
   ThemeIcon,
   Tooltip,
 } from "@mantine/core";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { isAxiosError } from "axios";
 import {
   AlertTriangle,
   ArrowLeft,
@@ -40,14 +38,16 @@ import {
   Trash2,
   Weight,
 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
 import toast from "react-hot-toast";
+import { useNavigate } from "react-router-dom";
 
-import Breadcrumbs from "@/components/ui/Breadcrumbs";
-import { bookingsService } from "@/services/bookings.service";
-import { useAvailableDays } from "@/hooks/trainScheduling/useTrainScheduling";
 import { api } from "@/auth/http";
-import { unwrap } from "@/utils/endpoint";
+import Breadcrumbs from "@/components/ui/Breadcrumbs";
 import { URL_CONSTANTS } from "@/constants/URLS";
+import { api as appApi } from "@/services/api";
+import { bookingsService } from "@/services/bookings.service";
+import { unwrap } from "@/utils/endpoint";
 
 interface CompanyOption {
   id: string;
@@ -234,9 +234,11 @@ export default function NewBookingPage() {
 
   // Day-level pool: fetch only the days that have a departure on the route (no
   // train, no capacity). The batch engine assigns the train after booking.
-  const { data: availableDays, isLoading: daysLoading } = useAvailableDays(
-    originYardId,
-    destinationYardId,
+  const { data: availableDays, isLoading: daysLoading } = useQuery(
+    appApi.trainScheduling.availableDays.queryOptions({
+      input: { originYardId, destinationYardId },
+      enabled: Boolean(originYardId && destinationYardId),
+    }),
   );
   const dayOptions = (availableDays ?? []).map((day) => ({
     value: day,
@@ -392,7 +394,7 @@ export default function NewBookingPage() {
         </Button>
       </Group>
 
-      <Grid gutter="lg" mt="lg">
+      <Grid gap="lg" mt="lg">
         {/* LEFT — form */}
         <Grid.Col span={{ base: 12, lg: 8 }}>
           <Stack gap="lg">
@@ -453,7 +455,6 @@ export default function NewBookingPage() {
                     value={originYardId}
                     onChange={(v) => {
                       setOriginYardId(v);
-                      setTrainScheduleId(null);
                     }}
                     searchable
                     disabled={isLoading}