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

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

@@ -4,7 +4,8 @@ import { Building2, Package, TrainFront, Weight, X } from "lucide-react";
 import type { TrainScheduleDetail } from "@/types/trainScheduling";
 import type { BookingDetailData } from "./BookingDetailModal";
 import { RemoveBookingConfirmModal, type RemovalTarget } from "./RemoveBookingConfirmModal";
-import { useScheduleMutations } from "@/hooks/trainScheduling/useTrainScheduling";
+import { useMutation } from "@tanstack/react-query";
+import { api } from "@/services/api";
 import { useToast } from "@/hooks/use-toast";
 import { freightBrand } from "@/theme/freight-brand";
 
@@ -22,7 +23,7 @@ export const AssignedBookingsPanel = ({
   onSelect,
 }: AssignedBookingsPanelProps) => {
   const { toast } = useToast();
-  const unassign = useScheduleMutations(scheduleId).unassign;
+  const unassign = useMutation(api.trainScheduling.unassignBooking.mutationOptions());
   const isDispatched = scheduleDetail.status === "DISPATCHED";
   const [removalTarget, setRemovalTarget] = useState<RemovalTarget | null>(null);
 

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

@@ -8,10 +8,8 @@ import { UnassignedBookingsPanel } from "./UnassignedBookingsPanel";
 import { RemovalLogPanel } from "./RemovalLogPanel";
 import { BatchBookingList } from "./BatchBookingList";
 import { BookingDetailModal, type BookingDetailData } from "./BookingDetailModal";
-import {
-  useCompositionRemovals,
-  useUnassignedBookings,
-} from "@/hooks/trainScheduling/useTrainScheduling";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/services/api";
 import { freightBrand } from "@/theme/freight-brand";
 
 interface CompositionBookingTabsProps {
@@ -47,8 +45,18 @@ export const CompositionBookingTabs = ({
   const [detailBooking, setDetailBooking] = useState<BookingDetailData | null>(null);
   const [tab, setTab] = useState<TabKey>("assigned");
 
-  const unassignedQuery = useUnassignedBookings(scheduleId);
-  const removalsQuery = useCompositionRemovals(scheduleId);
+  const unassignedQuery = useQuery(
+    api.trainScheduling.unassignedBookings.queryOptions({
+      input: { scheduleId },
+      enabled: Boolean(scheduleId),
+    }),
+  );
+  const removalsQuery = useQuery(
+    api.trainScheduling.compositionRemovals.queryOptions({
+      input: { scheduleId },
+      enabled: Boolean(scheduleId),
+    }),
+  );
 
   const { assignedCount } = useMemo(() => {
     const wagons = scheduleDetail.trainSet?.wagons ?? [];

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

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Group, TextInput, Text } from "@mantine/core";
-import { useUpdateContainerItem } from "@/hooks/trainScheduling/useTrainScheduling";
+import { useMutation } from "@tanstack/react-query";
+import { api } from "@/services/api";
 
 interface ContainerNumberInputProps {
   value: string | null;
@@ -19,13 +20,16 @@ export const ContainerNumberInput = ({
   const [inputValue, setInputValue] = useState(value ?? "");
   const [error, setError] = useState<string | null>(null);
 
-  const updateMutation = useUpdateContainerItem(scheduleId);
+  const updateMutation = useMutation(
+    api.trainScheduling.updateContainerItem.mutationOptions(),
+  );
   const isLoading = updateMutation.isPending;
 
   const handleSave = async () => {
     try {
       setError(null);
       await updateMutation.mutateAsync({
+        scheduleId,
         itemId,
         containerNumber: inputValue || null,
       });

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

@@ -1,13 +1,19 @@
 import { Box, Card, Group, Stack, Text, ThemeIcon } from "@mantine/core";
 import { History, PackageX } from "lucide-react";
-import { useCompositionRemovals } from "@/hooks/trainScheduling/useTrainScheduling";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/services/api";
 
 interface RemovalLogPanelProps {
   scheduleId: string;
 }
 
 export const RemovalLogPanel = ({ scheduleId }: RemovalLogPanelProps) => {
-  const removalQuery = useCompositionRemovals(scheduleId);
+  const removalQuery = useQuery(
+    api.trainScheduling.compositionRemovals.queryOptions({
+      input: { scheduleId },
+      enabled: Boolean(scheduleId),
+    }),
+  );
 
   if (removalQuery.isLoading) {
     return (

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

@@ -6,7 +6,8 @@ import { TrainStatsBar } from "./TrainStatsBar";
 import { WagonCard } from "./WagonCard";
 import { InteractiveTrainConsist } from "./InteractiveTrainConsist";
 import { RemoveBookingModal } from "./RemoveBookingModal";
-import { useScheduleMutations, useRemoveWagonSlot } from "@/hooks/trainScheduling/useTrainScheduling";
+import { useMutation } from "@tanstack/react-query";
+import { api } from "@/services/api";
 import { freightBrand } from "@/theme/freight-brand";
 
 type Wagon = TrainScheduleDetail["trainSet"]["wagons"][number];
@@ -47,8 +48,12 @@ export const TrainConsistView = ({
   const [selectedWagonId, setSelectedWagonId] = useState<string | null>(null);
   const [removeModalOpen, setRemoveModalOpen] = useState(false);
 
-  const unassignMutation = useScheduleMutations(scheduleId).unassign;
-  const removeWagonMutation = useRemoveWagonSlot(scheduleId);
+  const unassignMutation = useMutation(
+    api.trainScheduling.unassignBooking.mutationOptions(),
+  );
+  const removeWagonMutation = useMutation(
+    api.trainScheduling.removeWagonSlot.mutationOptions(),
+  );
 
   const trainSet = scheduleDetail.trainSet;
   const wagons = trainSet?.wagons ?? [];
@@ -83,7 +88,7 @@ export const TrainConsistView = ({
 
   const handleRemoveWagon = async (wagonId: string) => {
     if (confirm("Are you sure you want to remove this wagon slot?")) {
-      await removeWagonMutation.mutateAsync(wagonId);
+      await removeWagonMutation.mutateAsync({ scheduleId, wagonId });
       setSelectedWagonId(null);
     }
   };

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

@@ -1,9 +1,7 @@
 import { Badge, Box, Button, Card, Group, Stack, Text, ThemeIcon, Tooltip } from "@mantine/core";
 import { AlertTriangle, Container as ContainerIcon, MapPin, Plus, TrainFront } from "lucide-react";
-import {
-  useUnassignedBookings,
-  useScheduleMutations,
-} from "@/hooks/trainScheduling/useTrainScheduling";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { api } from "@/services/api";
 import { useToast } from "@/hooks/use-toast";
 import type { FleetAvailabilityRow } from "@/types/trainScheduling";
 import type { BookingDetailData } from "./BookingDetailModal";
@@ -73,8 +71,15 @@ export const UnassignedBookingsPanel = ({
   onSelect,
 }: UnassignedBookingsPanelProps) => {
   const { toast } = useToast();
-  const unassignedQuery = useUnassignedBookings(scheduleId);
-  const assignMutation = useScheduleMutations(scheduleId).assignUnassigned;
+  const unassignedQuery = useQuery(
+    api.trainScheduling.unassignedBookings.queryOptions({
+      input: { scheduleId },
+      enabled: Boolean(scheduleId),
+    }),
+  );
+  const assignMutation = useMutation(
+    api.trainScheduling.assignUnassignedBooking.mutationOptions(),
+  );
 
   const handleAssign = async (bookingId: string, reference: string | null) => {
     try {