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

apps/edr-freight-web/backoffice/src/pages/fleet/FleetCrudPages.tsx

@@ -36,30 +36,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@edr/ui-common';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { useCargoTypes } from '@/hooks/use-cargo-types';
-import { useContainerTypes } from '@/hooks/use-container-types';
-import {
-  useCreateWagonType,
-  useDeleteWagonType,
-  useUpdateWagonType,
-  useWagonTypes,
-} from '@/hooks/use-wagon-types';
 import { useToast } from '@/hooks/use-toast';
-import {
-  useContainers,
-  useCreateContainer,
-  useDeleteContainer,
-  useUpdateContainer,
-} from '@/hooks/useContainers';
-import { useCreateTrain, useDeleteTrain, useTrains, useUpdateTrain } from '@/hooks/useTrains';
-import { useRouteYards } from '@/hooks/useRoutes';
-import { useCreateWagon, useDeleteWagon, useUpdateWagon, useWagons } from '@/hooks/useWagons';
-import {
-  useCreateLocomotive,
-  useDecommissionLocomotive,
-  useLocomotives,
-  useUpdateLocomotive,
-} from '@/hooks/useLocomotives';
 import type { Cargo } from '@/services/cargoService';
 import { DeliverCargoDialog } from '@/components/cargoes/DeliverCargoDialog';
 import type { Container } from '@/services/containerService';
@@ -513,7 +490,7 @@ const optionLabel = (options: { value: string; label: string }[], value?: string
   options.find((option) => option.value === value)?.label ?? value ?? '-';
 
 export function TrainMasterDataPage() {
-  const query = useTrains();
+  const query = useQuery(api.trains.list.queryOptions());
   return (
     <FleetCrudPage<Train>
       title="Trains"
@@ -521,9 +498,9 @@ export function TrainMasterDataPage() {
       addLabel="Add Train"
       data={query.data}
       isLoading={query.isLoading}
-      create={useCreateTrain()}
-      update={useUpdateTrain()}
-      remove={useDeleteTrain()}
+      create={useMutation(api.trains.create.mutationOptions())}
+      update={useMutation(api.trains.update.mutationOptions())}
+      remove={useMutation(api.trains.remove.mutationOptions())}
       searchText={(train) => [train.code, train.trainNumber, train.trainName, train.status].join(' ')}
       columns={[
         { key: 'code', label: 'Code' },
@@ -548,10 +525,10 @@ export function TrainMasterDataPage() {
 }
 
 export function WagonTypesCrudPage() {
-  const query = useWagonTypes();
-  const create = useCreateWagonType();
-  const update = useUpdateWagonType();
-  const remove = useDeleteWagonType();
+  const query = useQuery(api.wagonTypes.list.queryOptions());
+  const create = useMutation(api.wagonTypes.create.mutationOptions());
+  const update = useMutation(api.wagonTypes.update.mutationOptions());
+  const remove = useMutation(api.wagonTypes.remove.mutationOptions());
   const { toast } = useToast();
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(1);
@@ -898,9 +875,9 @@ export function WagonTypesCrudPage() {
 }
 
 export function WagonsCrudPage() {
-  const query = useWagons();
-  const { data: wagonTypes = [] } = useWagonTypes();
-  const { data: yards = [] } = useRouteYards();
+  const query = useQuery(api.wagons.list.queryOptions({ input: {} }));
+  const { data: wagonTypes = [] } = useQuery(api.wagonTypes.list.queryOptions());
+  const { data: yards = [] } = useQuery(api.routes.yards.queryOptions());
   const wagonTypeOptions = wagonTypes.map((type: any) => ({
     value: type.id,
     label: `${type.code} - ${type.name}`,
@@ -916,9 +893,9 @@ export function WagonsCrudPage() {
       addLabel="Add Wagon"
       data={query.data}
       isLoading={query.isLoading}
-      create={useCreateWagon()}
-      update={useUpdateWagon()}
-      remove={useDeleteWagon()}
+      create={useMutation(api.wagons.create.mutationOptions())}
+      update={useMutation(api.wagons.update.mutationOptions())}
+      remove={useMutation(api.wagons.remove.mutationOptions())}
       searchText={(wagon) => [
         wagon.wagonNumber,
         wagon.wagonTypeId,
@@ -986,9 +963,11 @@ export function WagonsCrudPage() {
 }
 
 export function ContainersCrudPage() {
-  const query = useContainers();
-  const { data: containerTypes = [] } = useContainerTypes();
-  const { data: wagons = [] } = useWagons();
+  const query = useQuery(api.containers.list.queryOptions());
+  const { data: containerTypes = [] } = useQuery(
+    api.containerTypes.list.queryOptions({ staleTime: Infinity }),
+  );
+  const { data: wagons = [] } = useQuery(api.wagons.list.queryOptions({ input: {} }));
   const containerTypeOptions = containerTypes.map((type: any) => ({
     value: type.id,
     label: type.label ?? type.name ?? type.code,
@@ -1004,9 +983,9 @@ export function ContainersCrudPage() {
       addLabel="Add Container"
       data={query.data}
       isLoading={query.isLoading}
-      create={useCreateContainer()}
-      update={useUpdateContainer()}
-      remove={useDeleteContainer()}
+      create={useMutation(api.containers.create.mutationOptions())}
+      update={useMutation(api.containers.update.mutationOptions())}
+      remove={useMutation(api.containers.remove.mutationOptions())}
       searchText={(container) => [container.containerNumber, container.containerTypeId, container.wagonId, container.status].join(' ')}
       columns={[
         { key: 'containerNumber', label: 'Number' },
@@ -1044,8 +1023,10 @@ export function ContainersCrudPage() {
 
 export function CargoesCrudPage() {
   const query = useQuery(api.cargoes.list.queryOptions());
-  const { data: cargoTypes = [] } = useCargoTypes();
-  const { data: containers = [] } = useContainers();
+  const { data: cargoTypes = [] } = useQuery(
+    api.cargoTypes.list.queryOptions({ staleTime: Infinity }),
+  );
+  const { data: containers = [] } = useQuery(api.containers.list.queryOptions());
   const cargoTypeOptions = cargoTypes.map((type: any) => ({
     value: type.id,
     label: type.cargoTypeName ?? type.cargo_type_name ?? type.name ?? type.code,
@@ -1112,7 +1093,7 @@ export function CargoesCrudPage() {
 }
 
 export function LocomotivesCrudPage() {
-  const query = useLocomotives();
+  const query = useQuery(api.locomotives.list.queryOptions());
 
   return (
     <FleetCrudPage<Locomotive>
@@ -1122,9 +1103,9 @@ export function LocomotivesCrudPage() {
       addLabel="Add Locomotive"
       data={query.data}
       isLoading={query.isLoading}
-      create={useCreateLocomotive()}
-      update={useUpdateLocomotive()}
-      remove={useDecommissionLocomotive()}
+      create={useMutation(api.locomotives.create.mutationOptions())}
+      update={useMutation(api.locomotives.update.mutationOptions())}
+      remove={useMutation(api.locomotives.decommission.mutationOptions())}
       removeActionLabel="Decommission"
       removeConfirmMessage="Decommission this locomotive?"
       removeSuccessMessage="Locomotive decommissioned"

apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx

@@ -1,5 +1,8 @@
 import type { ColumnDef } from "@edr/ui-common";
 import { Box, Button, Card, Group, Modal, Select, Stack, Text } from "@mantine/core";
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+import { api } from "@/services/api";
 import {
   Archive,
   Circle,
@@ -22,14 +25,7 @@ import { formatFleetCell, registerFleetOptionLabels } from "@/components/fleet/f
 import { useFleetViewMode } from "@/components/fleet/useFleetViewMode";
 import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
-import { useFleetList, useFleetMutations } from "@/hooks/fleet/useFleet";
-import { useCargoTypes } from "@/hooks/use-cargo-types";
-import { useContainerTypes } from "@/hooks/use-container-types";
 import { useToast } from "@/hooks/use-toast";
-import { useWagonTypes } from "@/hooks/use-wagon-types";
-import { useContainers } from "@/hooks/useContainers";
-import { useRouteYards } from "@/hooks/useRoutes";
-import { useWagons } from "@/hooks/useWagons";
 import {
   FLEET_SELECT_NONE,
   getFleetResource,
@@ -90,15 +86,31 @@ const FleetResourcePage = () => {
     return filters;
   }, [slug, listFilterValues, search]);
 
-  const { data: allRows = [], isLoading, isError, error } = useFleetList(slug, serverListFilters);
-  const { create, update, remove } = useFleetMutations(slug);
+  const { data: allRows = [], isLoading, isError, error } = useQuery(
+    api.fleet.list.queryOptions({ input: { slug, filters: serverListFilters } }),
+  );
+  const create = useMutation(api.fleet.create.mutationOptions());
+  const update = useMutation(api.fleet.update.mutationOptions());
+  const remove = useMutation(api.fleet.remove.mutationOptions());
 
-  const { data: wagonTypes = [], isLoading: wagonTypesLoading } = useWagonTypes();
-  const { data: containerTypes = [], isLoading: containerTypesLoading } = useContainerTypes();
-  const { data: cargoTypes = [], isLoading: cargoTypesLoading } = useCargoTypes();
-  const { data: wagons = [], isLoading: wagonsLoading } = useWagons();
-  const { data: containers = [], isLoading: containersLoading } = useContainers();
-  const { data: yards = [], isLoading: yardsLoading } = useRouteYards();
+  const { data: wagonTypes = [], isLoading: wagonTypesLoading } = useQuery(
+    api.wagonTypes.list.queryOptions(),
+  );
+  const { data: containerTypes = [], isLoading: containerTypesLoading } = useQuery(
+    api.containerTypes.list.queryOptions({ staleTime: Infinity }),
+  );
+  const { data: cargoTypes = [], isLoading: cargoTypesLoading } = useQuery(
+    api.cargoTypes.list.queryOptions({ staleTime: Infinity }),
+  );
+  const { data: wagons = [], isLoading: wagonsLoading } = useQuery(
+    api.wagons.list.queryOptions({ input: {} }),
+  );
+  const { data: containers = [], isLoading: containersLoading } = useQuery(
+    api.containers.list.queryOptions(),
+  );
+  const { data: yards = [], isLoading: yardsLoading } = useQuery(
+    api.routes.yards.queryOptions(),
+  );
 
   useEffect(() => {
     setPagination((prev) => ({ pageIndex: 0, pageSize: prev.pageSize }));
@@ -316,10 +328,10 @@ const FleetResourcePage = () => {
   const handleFormSubmit = async (values: Record<string, unknown>) => {
     try {
       if (editing && "id" in editing) {
-        await update.mutateAsync({ id: String(editing.id), data: values });
+        await update.mutateAsync({ slug, id: String(editing.id), data: values });
         toast({ title: `${config.entityLabel} updated` });
       } else {
-        await create.mutateAsync(values);
+        await create.mutateAsync({ slug, data: values });
         toast({ title: `${config.entityLabel} created` });
       }
       setFormOpen(false);
@@ -335,7 +347,7 @@ const FleetResourcePage = () => {
   const handleRemove = async () => {
     if (!removeTarget || !("id" in removeTarget)) return;
     try {
-      await remove.mutateAsync(String(removeTarget.id));
+      await remove.mutateAsync({ slug, id: String(removeTarget.id) });
       toast({
         title: config.removeSuccessMessage ?? `${config.entityLabel} removed`,
       });

apps/edr-freight-web/backoffice/src/pages/fleet/RoutesPage.tsx

@@ -17,18 +17,14 @@ import {
   Tooltip,
 } from "@mantine/core";
 
+import { useMutation, useQuery } from "@tanstack/react-query";
+
 import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
 import FleetToolbar from "@/components/fleet/FleetToolbar";
 import { useFleetViewMode } from "@/components/fleet/useFleetViewMode";
 import RuleEngineListFooter from "@/components/ruleEngine/RuleEngineListFooter";
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
-import {
-  useCreateRoute,
-  useDeactivateRoute,
-  useRouteYards,
-  useRoutes,
-  useUpdateRoute,
-} from "@/hooks/useRoutes";
+import { api } from "@/services/api";
 import { useToast } from "@/hooks/use-toast";
 import type { RouteRecord, YardRef } from "@/services/routes.service";
 import { DataTable, DataTableFooter, usePagination } from "@edr/ui-common";
@@ -71,11 +67,11 @@ export default function RoutesPage() {
   const { pagination, setPagination } = usePagination({ pageSize: 10 });
   const { toast } = useToast();
 
-  const routesQuery = useRoutes();
-  const yardsQuery = useRouteYards();
-  const createMutation = useCreateRoute();
-  const updateMutation = useUpdateRoute();
-  const deactivateMutation = useDeactivateRoute();
+  const routesQuery = useQuery(api.routes.list.queryOptions());
+  const yardsQuery = useQuery(api.routes.yards.queryOptions());
+  const createMutation = useMutation(api.routes.create.mutationOptions());
+  const updateMutation = useMutation(api.routes.update.mutationOptions());
+  const deactivateMutation = useMutation(api.routes.deactivate.mutationOptions());
 
   const filteredRoutes = useMemo(() => {
     const query = search.trim().toLowerCase();