Merge pull request #68 from Tria-plc/freight/feature/booking-integration

freight/feature/booking integration
2026-09-07 16:35:42 +00:00 · 2026-06-03 11:26:35 +03:00
parent 0eeb0e0d6f dab72217e1
commit 36a8002163
22 changed files with 733 additions and 412 deletions
--- a/apps/edr-freight-web/backoffice/src/hooks/hooks/useBookings.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/hooks/useBookings.ts
@@ -1,16 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-
-import { bookingsService } from "../services/bookings.service";
-
-export const useBookings = () =>
-  useQuery({
-    queryKey: ["bookings"],
-    queryFn: bookingsService.list,
-  });
-
-export const useBooking = (id: string) =>
-  useQuery({
-    queryKey: ["bookings", id],
-    queryFn: () => bookingsService.get(id),
-    enabled: Boolean(id),
-  });
--- a/apps/edr-freight-web/backoffice/src/hooks/hooks/useConsignments.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/hooks/useConsignments.ts
@@ -1,16 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-
-import { consignmentsService } from "../services/consignments.service";
-
-export const useConsignments = () =>
-  useQuery({
-    queryKey: ["consignments"],
-    queryFn: consignmentsService.list,
-  });
-
-export const useConsignment = (id: string) =>
-  useQuery({
-    queryKey: ["consignments", id],
-    queryFn: () => consignmentsService.get(id),
-    enabled: Boolean(id),
-  });
--- a/apps/edr-freight-web/backoffice/src/hooks/hooks/useCustomers.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/hooks/useCustomers.ts
@@ -1,50 +0,0 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-
-import { customersService } from "@/services/customers.service";
-import type {
-  CreateCustomerDto,
-  UpdateCustomerDto,
-} from "@/types/customers";
-
-const KEY = ["customers"] as const;
-
-export const useCustomers = () =>
-  useQuery({
-    queryKey: KEY,
-    queryFn: customersService.list,
-  });
-
-export const useCustomer = (id: string | undefined) =>
-  useQuery({
-    queryKey: [...KEY, "id", id],
-    queryFn: () => customersService.getById(id!),
-    enabled: Boolean(id),
-  });
-
-export const useCreateCustomer = () => {
-  const qc = useQueryClient();
-  return useMutation({
-    mutationFn: (dto: CreateCustomerDto) => customersService.create(dto),
-    onSuccess: () => qc.invalidateQueries({ queryKey: KEY }),
-  });
-};
-
-export const useUpdateCustomer = () => {
-  const qc = useQueryClient();
-  return useMutation({
-    mutationFn: ({ id, dto }: { id: string; dto: UpdateCustomerDto }) =>
-      customersService.update(id, dto),
-    onSuccess: (_data, { id }) => {
-      qc.invalidateQueries({ queryKey: KEY });
-      qc.invalidateQueries({ queryKey: [...KEY, "id", id] });
-    },
-  });
-};
-
-export const useDeleteCustomer = () => {
-  const qc = useQueryClient();
-  return useMutation({
-    mutationFn: (id: string) => customersService.remove(id),
-    onSuccess: () => qc.invalidateQueries({ queryKey: KEY }),
-  });
-};
--- a/apps/edr-freight-web/backoffice/src/hooks/hooks/useTracking.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/hooks/useTracking.ts
@@ -1,10 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-
-import { trackingService } from "../services/tracking.service";
-
-export const useTracking = (consignmentId: string) =>
-  useQuery({
-    queryKey: ["tracking", consignmentId],
-    queryFn: () => trackingService.forConsignment(consignmentId),
-    enabled: Boolean(consignmentId),
-  });
--- a/apps/edr-freight-web/backoffice/src/hooks/rule-engine/useRuleEngine.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/rule-engine/useRuleEngine.ts
@@ -1,11 +1,8 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import toast from "react-hot-toast";

-import { QUERY_KEYS } from "@/constants/TANSTACK_QUEY_KEY";
-import {
-  ruleEngineService,
-  type RuleEngineListParams,
-} from "@/services/ruleEngine/ruleEngine.service";
+import { api } from "@/services/api";
+import type { RuleEngineListParams } from "@/services/ruleEngine/ruleEngine.service";
 import { RULE_ENGINE_SELECT_NONE } from "@/pages/ruleEngine/config/resources";
 import type {
  ApproveRatePayload,
@@ -16,26 +13,29 @@ import type {
 const CARGO_TYPE_PARENT_PAGE_SIZE = 500;
 const CONTAINER_TYPE_OPTIONS_PAGE_SIZE = 500;

+const listKey = (resource: RuleEngineResourceSlug) =>
+  ["rule-engine", resource] as const;
+
 export const useRuleEngineList = (
  resource: RuleEngineResourceSlug,
  params: RuleEngineListParams,
 ) =>
-  useQuery({
-    queryKey: [...QUERY_KEYS.RULE_ENGINE.list(resource), params],
-    queryFn: () => ruleEngineService.list<RuleEngineRecord>(resource, params),
-  });
+  useQuery(
+    api.ruleEngine.list.queryOptions({
+      input: { resource, params },
+    }),
+  );

 export const useCargoTypeParentOptions = (excludeId?: string, enabled = true) =>
  useQuery({
-    queryKey: [
-      ...QUERY_KEYS.RULE_ENGINE.list("cargo-types"),
-      "parent-options",
-      excludeId ?? "",
-    ],
+    queryKey: api.ruleEngine.list.queryKey({
+      resource: "cargo-types",
+      params: { page: 1, pageSize: CARGO_TYPE_PARENT_PAGE_SIZE },
+    }),
    queryFn: () =>
-      ruleEngineService.list<RuleEngineRecord>("cargo-types", {
-        page: 1,
-        pageSize: CARGO_TYPE_PARENT_PAGE_SIZE,
+      api.ruleEngine.list.call({
+        resource: "cargo-types",
+        params: { page: 1, pageSize: CARGO_TYPE_PARENT_PAGE_SIZE },
      }),
    enabled,
    select: (result) => {
@@ -46,7 +46,9 @@ export const useCargoTypeParentOptions = (excludeId?: string, enabled = true) =>
          const name = String(row.cargoTypeName ?? "").trim();
          const code = String(row.code ?? "").trim();
          const label =
-            name && code ? `${name} (${code})` : name || code || String(row.id);
+            name && code
+              ? `${name} (${code})`
+              : name || code || String(row.id);
          return { label, value: String(row.id) };
        });
      return [noneOption, ...parents];
@@ -84,20 +86,20 @@ export const useContainerTypeOptions = (enabled = true) =>
  });

 export const useApprovalChain = (enabled: boolean) =>
-  useQuery({
-    queryKey: QUERY_KEYS.RULE_ENGINE.chain,
-    queryFn: () => ruleEngineService.getApprovalChain(),
-    enabled,
-  });
+  useQuery(
+    api.ruleEngine.getApprovalChain.queryOptions({
+      enabled,
+    }),
+  );

 export const useRuleEngineMutations = (resource: RuleEngineResourceSlug) => {
  const qc = useQueryClient();
  const invalidate = () =>
-    qc.invalidateQueries({ queryKey: QUERY_KEYS.RULE_ENGINE.list(resource) });
+    qc.invalidateQueries({ queryKey: listKey(resource) });

  const create = useMutation({
    mutationFn: (payload: Record<string, unknown>) =>
-      ruleEngineService.create(resource, payload),
+      api.ruleEngine.create.call({ resource, payload }),
    onSuccess: () => {
      toast.success("Created successfully");
      invalidate();
@@ -112,7 +114,7 @@ export const useRuleEngineMutations = (resource: RuleEngineResourceSlug) => {
    }: {
      id: string;
      payload: Record<string, unknown>;
-    }) => ruleEngineService.update(resource, id, payload),
+    }) => api.ruleEngine.update.call({ resource, id, payload }),
    onSuccess: () => {
      toast.success("Updated successfully");
      invalidate();
@@ -121,7 +123,8 @@ export const useRuleEngineMutations = (resource: RuleEngineResourceSlug) => {
  });

  const remove = useMutation({
-    mutationFn: (id: string) => ruleEngineService.remove(resource, id),
+    mutationFn: (id: string) =>
+      api.ruleEngine.remove.call({ resource, id }),
    onSuccess: () => {
      toast.success("Deleted successfully");
      invalidate();
@@ -135,10 +138,10 @@ export const useRuleEngineMutations = (resource: RuleEngineResourceSlug) => {
 export const useRateWorkflow = () => {
  const qc = useQueryClient();
  const invalidate = () =>
-    qc.invalidateQueries({ queryKey: QUERY_KEYS.RULE_ENGINE.list("rates") });
+    qc.invalidateQueries({ queryKey: listKey("rates") });

  const submit = useMutation({
-    mutationFn: (id: string) => ruleEngineService.submitRate(id),
+    mutationFn: (id: string) => api.ruleEngine.submitRate.call({ id }),
    onSuccess: () => {
      toast.success("Rate submitted for approval");
      invalidate();
@@ -147,8 +150,13 @@ export const useRateWorkflow = () => {
  });

  const approve = useMutation({
-    mutationFn: ({ id, payload }: { id: string; payload: ApproveRatePayload }) =>
-      ruleEngineService.approveRate(id, payload),
+    mutationFn: ({
+      id,
+      payload,
+    }: {
+      id: string;
+      payload: ApproveRatePayload;
+    }) => api.ruleEngine.approveRate.call({ id, payload }),
    onSuccess: () => {
      toast.success("Rate approved");
      invalidate();
--- a/apps/edr-freight-web/backoffice/src/hooks/useBookings.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/useBookings.ts
@@ -0,0 +1,48 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { api } from "@/services/api";
+import type { BookingListFilter } from "@/services/bookings.service";
+
+export const useBookingList = (filter?: BookingListFilter) => {
+  const input = { filter };
+  return {
+    queryKey: api.bookings.list.queryKey(input),
+    queryFn: () => api.bookings.list.call(input),
+  };
+};
+
+export const useBooking = (id: string) => ({
+  queryKey: api.bookings.getById.queryKey({ id }),
+  queryFn: () => api.bookings.getById.call({ id }),
+  enabled: Boolean(id),
+});
+
+export const useUpdateBookingStatus = () => {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      id,
+      action,
+      reason,
+    }: {
+      id: string;
+      action: string;
+      reason?: string;
+    }) => api.bookings.updateStatus.call({ id, action, reason }),
+    onSuccess: (_data, { id }) => {
+      qc.invalidateQueries({ queryKey: api.bookings.list.queryKey() });
+      qc.invalidateQueries({
+        queryKey: api.bookings.getById.queryKey({ id }),
+      });
+    },
+  });
+};
+
+export const useDeleteBooking = () => {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => api.bookings.remove.call({ id }),
+    onSuccess: () =>
+      qc.invalidateQueries({ queryKey: api.bookings.list.queryKey() }),
+  });
+};
--- a/apps/edr-freight-web/backoffice/src/hooks/useDropdownSettings.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/useDropdownSettings.ts
@@ -1,6 +1,6 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";

-import { dropdownSettingsService } from "@/services/dropdownSettings.service";
+import { api } from "@/services/api";
 import type {
  CreateDropdownOptionDto,
  CreateDropdownSettingDto,
@@ -8,38 +8,15 @@ import type {
  UpdateDropdownSettingDto,
 } from "@/types/dropdownSettings";

-const KEY = ["dropdown-settings"] as const;
-
-/* ------------------------------ Queries ------------------------------ */
-
-export const useDropdownSettings = () =>
-  useQuery({
-    queryKey: KEY,
-    queryFn: dropdownSettingsService.list,
-  });
-
-export const useDropdownSetting = (id: string) =>
-  useQuery({
-    queryKey: [...KEY, "id", id],
-    queryFn: () => dropdownSettingsService.getById(id),
-    enabled: Boolean(id),
-  });
-
-export const useDropdownSettingByCode = (code: string) =>
-  useQuery({
-    queryKey: [...KEY, "code", code],
-    queryFn: () => dropdownSettingsService.getByCode(code),
-    enabled: Boolean(code),
-  });
-
 /* ----------------------------- Mutations ----------------------------- */

 export const useCreateDropdownSetting = () => {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: (dto: CreateDropdownSettingDto) =>
-      dropdownSettingsService.create(dto),
-    onSuccess: () => qc.invalidateQueries({ queryKey: KEY }),
+      api.dropdownSettings.create.call(dto),
+    onSuccess: () =>
+      qc.invalidateQueries({ queryKey: api.dropdownSettings.list.queryKey() }),
  });
 };

@@ -52,10 +29,12 @@ export const useUpdateDropdownSetting = () => {
    }: {
      id: string;
      dto: UpdateDropdownSettingDto;
-    }) => dropdownSettingsService.update(id, dto),
+    }) => api.dropdownSettings.update.call({ id, dto }),
    onSuccess: (_data, { id }) => {
-      qc.invalidateQueries({ queryKey: KEY });
-      qc.invalidateQueries({ queryKey: [...KEY, "id", id] });
+      qc.invalidateQueries({ queryKey: api.dropdownSettings.list.queryKey() });
+      qc.invalidateQueries({
+        queryKey: api.dropdownSettings.getById.queryKey({ id }),
+      });
    },
  });
 };
@@ -63,8 +42,9 @@ export const useUpdateDropdownSetting = () => {
 export const useDeleteDropdownSetting = () => {
  const qc = useQueryClient();
  return useMutation({
-    mutationFn: (id: string) => dropdownSettingsService.remove(id),
-    onSuccess: () => qc.invalidateQueries({ queryKey: KEY }),
+    mutationFn: (id: string) => api.dropdownSettings.remove.call({ id }),
+    onSuccess: () =>
+      qc.invalidateQueries({ queryKey: api.dropdownSettings.list.queryKey() }),
  });
 };

@@ -77,10 +57,12 @@ export const useReplaceDropdownOptions = () => {
    }: {
      settingId: string;
      options: CreateDropdownOptionDto[];
-    }) => dropdownSettingsService.replaceOptions(settingId, options),
+    }) => api.dropdownSettings.replaceOptions.call({ id: settingId, options }),
    onSuccess: (_data, { settingId }) => {
-      qc.invalidateQueries({ queryKey: KEY });
-      qc.invalidateQueries({ queryKey: [...KEY, "id", settingId] });
+      qc.invalidateQueries({ queryKey: api.dropdownSettings.list.queryKey() });
+      qc.invalidateQueries({
+        queryKey: api.dropdownSettings.getById.queryKey({ id: settingId }),
+      });
    },
  });
 };
@@ -94,10 +76,12 @@ export const useAddDropdownOption = () => {
    }: {
      settingId: string;
      dto: CreateDropdownOptionDto;
-    }) => dropdownSettingsService.addOption(settingId, dto),
+    }) => api.dropdownSettings.addOption.call({ id: settingId, dto }),
    onSuccess: (_data, { settingId }) => {
-      qc.invalidateQueries({ queryKey: KEY });
-      qc.invalidateQueries({ queryKey: [...KEY, "id", settingId] });
+      qc.invalidateQueries({ queryKey: api.dropdownSettings.list.queryKey() });
+      qc.invalidateQueries({
+        queryKey: api.dropdownSettings.getById.queryKey({ id: settingId }),
+      });
    },
  });
 };
@@ -111,8 +95,9 @@ export const useUpdateDropdownOption = () => {
    }: {
      optionId: string;
      dto: UpdateDropdownOptionDto;
-    }) => dropdownSettingsService.updateOption(optionId, dto),
-    onSuccess: () => qc.invalidateQueries({ queryKey: KEY }),
+    }) => api.dropdownSettings.updateOption.call({ optionId, dto }),
+    onSuccess: () =>
+      qc.invalidateQueries({ queryKey: api.dropdownSettings.list.queryKey() }),
  });
 };

@@ -120,7 +105,8 @@ export const useRemoveDropdownOption = () => {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: (optionId: string) =>
-      dropdownSettingsService.removeOption(optionId),
-    onSuccess: () => qc.invalidateQueries({ queryKey: KEY }),
+      api.dropdownSettings.removeOption.call({ optionId }),
+    onSuccess: () =>
+      qc.invalidateQueries({ queryKey: api.dropdownSettings.list.queryKey() }),
  });
 };
--- a/apps/edr-freight-web/backoffice/src/hooks/useFileUploadSettings.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/useFileUploadSettings.ts
@@ -1,6 +1,6 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";

-import { fileUploadSettingsService } from "@/services/fileUploadSettings.service";
+import { api } from "@/services/api";
 import type {
  CreateFileUploadFieldDto,
  CreateFileUploadSettingDto,
@@ -8,38 +8,17 @@ import type {
  UpdateFileUploadSettingDto,
 } from "@/types/fileUploadSettings";

-const KEY = ["file-upload-settings"] as const;
-
-/* ------------------------------ Queries ------------------------------ */
-
-export const useFileUploadSettings = () =>
-  useQuery({
-    queryKey: KEY,
-    queryFn: fileUploadSettingsService.list,
-  });
-
-export const useFileUploadSetting = (id: string) =>
-  useQuery({
-    queryKey: [...KEY, "id", id],
-    queryFn: () => fileUploadSettingsService.getById(id),
-    enabled: Boolean(id),
-  });
-
-export const useFileUploadSettingByCode = (code: string) =>
-  useQuery({
-    queryKey: [...KEY, "code", code],
-    queryFn: () => fileUploadSettingsService.getByCode(code),
-    enabled: Boolean(code),
-  });
-
 /* ----------------------------- Mutations ----------------------------- */

 export const useCreateFileUploadSetting = () => {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: (dto: CreateFileUploadSettingDto) =>
-      fileUploadSettingsService.create(dto),
-    onSuccess: () => qc.invalidateQueries({ queryKey: KEY }),
+      api.fileUploadSettings.create.call(dto),
+    onSuccess: () =>
+      qc.invalidateQueries({
+        queryKey: api.fileUploadSettings.list.queryKey(),
+      }),
  });
 };

@@ -52,10 +31,14 @@ export const useUpdateFileUploadSetting = () => {
    }: {
      id: string;
      dto: UpdateFileUploadSettingDto;
-    }) => fileUploadSettingsService.update(id, dto),
+    }) => api.fileUploadSettings.update.call({ id, dto }),
    onSuccess: (_data, { id }) => {
-      qc.invalidateQueries({ queryKey: KEY });
-      qc.invalidateQueries({ queryKey: [...KEY, "id", id] });
+      qc.invalidateQueries({
+        queryKey: api.fileUploadSettings.list.queryKey(),
+      });
+      qc.invalidateQueries({
+        queryKey: api.fileUploadSettings.getById.queryKey({ id }),
+      });
    },
  });
 };
@@ -63,8 +46,11 @@ export const useUpdateFileUploadSetting = () => {
 export const useDeleteFileUploadSetting = () => {
  const qc = useQueryClient();
  return useMutation({
-    mutationFn: (id: string) => fileUploadSettingsService.remove(id),
-    onSuccess: () => qc.invalidateQueries({ queryKey: KEY }),
+    mutationFn: (id: string) => api.fileUploadSettings.remove.call({ id }),
+    onSuccess: () =>
+      qc.invalidateQueries({
+        queryKey: api.fileUploadSettings.list.queryKey(),
+      }),
  });
 };

@@ -77,10 +63,14 @@ export const useReplaceFileUploadFields = () => {
    }: {
      settingId: string;
      fields: CreateFileUploadFieldDto[];
-    }) => fileUploadSettingsService.replaceFields(settingId, fields),
+    }) => api.fileUploadSettings.replaceFields.call({ id: settingId, fields }),
    onSuccess: (_data, { settingId }) => {
-      qc.invalidateQueries({ queryKey: KEY });
-      qc.invalidateQueries({ queryKey: [...KEY, "id", settingId] });
+      qc.invalidateQueries({
+        queryKey: api.fileUploadSettings.list.queryKey(),
+      });
+      qc.invalidateQueries({
+        queryKey: api.fileUploadSettings.getById.queryKey({ id: settingId }),
+      });
    },
  });
 };
@@ -94,10 +84,14 @@ export const useAddFileUploadField = () => {
    }: {
      settingId: string;
      dto: CreateFileUploadFieldDto;
-    }) => fileUploadSettingsService.addField(settingId, dto),
+    }) => api.fileUploadSettings.addField.call({ settingId, dto }),
    onSuccess: (_data, { settingId }) => {
-      qc.invalidateQueries({ queryKey: KEY });
-      qc.invalidateQueries({ queryKey: [...KEY, "id", settingId] });
+      qc.invalidateQueries({
+        queryKey: api.fileUploadSettings.list.queryKey(),
+      });
+      qc.invalidateQueries({
+        queryKey: api.fileUploadSettings.getById.queryKey({ id: settingId }),
+      });
    },
  });
 };
@@ -111,8 +105,11 @@ export const useUpdateFileUploadField = () => {
    }: {
      fieldId: string;
      dto: UpdateFileUploadFieldDto;
-    }) => fileUploadSettingsService.updateField(fieldId, dto),
-    onSuccess: () => qc.invalidateQueries({ queryKey: KEY }),
+    }) => api.fileUploadSettings.updateField.call({ fieldId, dto }),
+    onSuccess: () =>
+      qc.invalidateQueries({
+        queryKey: api.fileUploadSettings.list.queryKey(),
+      }),
  });
 };

@@ -120,7 +117,10 @@ export const useRemoveFileUploadField = () => {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: (fieldId: string) =>
-      fileUploadSettingsService.removeField(fieldId),
-    onSuccess: () => qc.invalidateQueries({ queryKey: KEY }),
+      api.fileUploadSettings.removeField.call({ fieldId }),
+    onSuccess: () =>
+      qc.invalidateQueries({
+        queryKey: api.fileUploadSettings.list.queryKey(),
+      }),
  });
 };
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx
@@ -1,5 +1,5 @@
-import { useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 import {
  AlertCircle,
  AlertTriangle,
@@ -27,14 +27,9 @@ import {

 import Breadcrumbs from "@/components/ui/Breadcrumbs";
 import { cn } from "@/lib/utils";
-import {
-  getBookingRequestById,
-  getBookingRequests,
-  saveBookingRequestsToStorage,
-  updateBookingRequestStatus,
-  BOOKING_STATUSES,
-  type BookingRequest,
-} from "./booking-requests.mock";
+import { api } from "@/services/api";
+import { useUpdateBookingStatus } from "@/hooks/useBookings";
+import { mapBookingToRequest, BOOKING_STATUSES } from "./booking-requests.mock";
 import {
  Badge,
  Button,
@@ -233,9 +228,16 @@ const STATUS_CONFIG: Record<
 export default function BookingRequestDetailPage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
-  const [booking, setBooking] = useState<BookingRequest | undefined>(
-    id ? getBookingRequestById(id) : undefined,
+
+  const { data: bookingData } = useQuery(
+    api.bookings.getById.queryOptions({
+      input: { id: id ?? "" },
+      enabled: Boolean(id),
+    }),
  );
+  const updateStatus = useUpdateBookingStatus();
+
+  const booking = bookingData ? mapBookingToRequest(bookingData) : undefined;

  if (!booking) {
    return (
@@ -270,20 +272,20 @@ export default function BookingRequestDetailPage() {
    booking.status,
  );

+  const isPending = updateStatus.isPending;
+
  function handleApprove() {
    if (!booking) return;
-    const nextStatus =
+    const action =
      booking.status === "RFQ_SUBMITTED"
-        ? ("QUOTATION_SENT" as const)
-        : ("APPROVED" as const);
-    updateBookingRequestStatus(booking.id, nextStatus);
-    setBooking(getBookingRequestById(booking.id));
+        ? "SEND_QUOTATION"
+        : "APPROVE";
+    updateStatus.mutate({ id: booking.id, action });
  }

  function handleReject() {
    if (!booking) return;
-    updateBookingRequestStatus(booking.id, "CANCELLED");
-    setBooking(getBookingRequestById(booking.id));
+    updateStatus.mutate({ id: booking.id, action: "CANCEL", reason: "Cancelled by backoffice" });
  }

  return (
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 import {
  AlertCircle,
  ArrowRight,
@@ -18,10 +19,11 @@ import {

 import Breadcrumbs from "@/components/ui/Breadcrumbs";
 import { cn } from "@/lib/utils";
+import { api } from "@/services/api";
 import {
-  getBookingRequests,
  BOOKING_STATUSES,
  type BookingRequest,
+  mapBookingToRequest,
 } from "./booking-requests.mock";
 import {
  DataTable,
@@ -153,7 +155,13 @@ export default function BookingRequestsPage() {
  const [query, setQuery] = useState("");
  const [statusFilter, setStatusFilter] = useState<string | null>(null);

-  const bookingRequests = useMemo(() => getBookingRequests(), []);
+  const { data: bookingData } = useQuery(
+    api.bookings.list.queryOptions({ input: { filter: { page: pagination.pageIndex + 1, pageSize: pagination.pageSize } } }),
+  );
+  const bookingRequests = useMemo(
+    () => (bookingData?.items ?? []).map(mapBookingToRequest),
+    [bookingData],
+  );

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/booking-requests.mock.ts
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/booking-requests.mock.ts
@@ -1,3 +1,5 @@
+import type { Freight } from "@edr/types";
+
 export interface BookingRequest {
  id: string;
  reference: string;
@@ -131,6 +133,36 @@ export function updateBookingRequestStatus(id: string, newStatus: (typeof BOOKIN
  saveBookingRequestsToStorage(requests);
 }

+export function mapBookingToRequest(booking: Freight.IBooking): BookingRequest {
+  return {
+    id: booking.id,
+    reference: booking.reference,
+    customer: booking.customerId,
+    status: booking.status as BookingRequest["status"],
+    scheduledDate: booking.scheduledDate,
+    totalAmount: booking.totalAmount,
+    paymentStatus: booking.paymentStatus,
+    contractType: booking.contractType,
+    serviceType:
+      booking.serviceType === "RAIL_ONLY" ? "RAIL" : (booking.serviceType as string),
+    tradeDirection: booking.tradeDirection as string,
+    originYard: booking.originStation,
+    destinationYard: booking.destinationStation,
+    cargoType: booking.freightType ?? booking.freightSubtype ?? "",
+    cargoTotalWeightVgm: booking.cargoTotalWeightVgm,
+    isHazardous: booking.isHazardous,
+    paymentCurrency: booking.paymentCurrency,
+    priorityScore: booking.priorityScore,
+    firstMilePickupAddress: booking.firstMilePickupAddress ?? null,
+    lastMileDeliveryAddress: booking.lastMileDeliveryAddress ?? null,
+    shippingLine: null,
+    pnrCode: null,
+    createdBy: booking.customerId,
+    createdAt: booking.createdAt,
+    updatedAt: booking.updatedAt,
+  };
+}
+
 export function getBookingRequests(): BookingRequest[] {
  if (typeof window === "undefined" || !window.localStorage) {
    return INITIAL_REQUESTS;
--- a/apps/edr-freight-web/backoffice/src/pages/documents/FileUploadSettingsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/documents/FileUploadSettingsPage.tsx
@@ -20,12 +20,16 @@ import ManageFileUploadFieldsDialog from "./ManageFileUploadFieldsDialog";
 import DeleteFileUploadSettingDialog from "./DeleteFileUploadSettingDialog";
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
 import { getMinFiles } from "@/types/fileUploadSettings";
-import { useDeleteFileUploadSetting, useFileUploadSettings } from "@/hooks/useFileUploadSettings";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/services/api";
+import { useDeleteFileUploadSetting } from "@/hooks/useFileUploadSettings";

 export default function FileUploadSettingsPage() {
  const [query, setQuery] = useState("");

-  const { data, isLoading, isError, error } = useFileUploadSettings();
+  const { data, isLoading, isError, error } = useQuery(
+    api.fileUploadSettings.list.queryOptions(),
+  );
  const deleteMutation = useDeleteFileUploadSetting();

  const fileUploadSettings = useMemo(
--- a/apps/edr-freight-web/backoffice/src/pages/dropdown_settings/DropdownSettingsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/dropdown_settings/DropdownSettingsPage.tsx
@@ -21,10 +21,9 @@ import Breadcrumbs from "@/components/ui/Breadcrumbs";
 import EditDropdownSettingDialog from "./EditDropdownSettingDialog";
 import ManageDropdownOptionsDialog from "./ManageDropdownOptionsDialog";
 import DeleteDropdownSettingDialog from "./DeleteDropdownSettingDialog";
-import {
-  useDeleteDropdownSetting,
-  useDropdownSettings,
-} from "@/hooks/useDropdownSettings";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/services/api";
+import { useDeleteDropdownSetting } from "@/hooks/useDropdownSettings";
 import type { DropdownSetting } from "@/types/dropdownSettings";
 import {
  DataTable,
@@ -86,7 +85,9 @@ export default function DropdownSettingsPage() {
    return () => cancelAnimationFrame(id);
  }, [activeDialog]);

-  const { data, isLoading, isError, error } = useDropdownSettings();
+  const { data, isLoading, isError, error } = useQuery(
+    api.dropdownSettings.list.queryOptions(),
+  );
  const deleteMutation = useDeleteDropdownSetting();

  const dropdownSettings = useMemo<DropdownSetting[]>(
--- a/apps/edr-freight-web/backoffice/src/services/api.ts
+++ b/apps/edr-freight-web/backoffice/src/services/api.ts
@@ -0,0 +1,251 @@
+import { endpoint } from "@/utils/endpoint";
+import type {
+  CreateFileUploadFieldDto,
+  CreateFileUploadSettingDto,
+  FileUploadField,
+  FileUploadSetting,
+  UpdateFileUploadFieldDto,
+  UpdateFileUploadSettingDto,
+} from "@/types/fileUploadSettings";
+import {
+  CreateDropdownOptionDto,
+  CreateDropdownSettingDto,
+  DropdownOption,
+  DropdownSetting,
+  UpdateDropdownOptionDto,
+  UpdateDropdownSettingDto,
+} from "@/types/dropdownSettings";
+import {
+  ApproveRatePayload,
+  RuleEngineListResult,
+  RuleEngineRecord,
+  RuleEngineResourceSlug,
+} from "@/types/rule-engine";
+import { fileUploadSettingsService } from "./fileUploadSettings.service";
+import { dropdownSettingsService } from "./dropdownSettings.service";
+import {
+  ruleEngineService,
+  RuleEngineListParams,
+} from "./ruleEngine/ruleEngine.service";
+import { bookingsService, BookingListFilter } from "./bookings.service";
+import type { Freight, PaginatedResponse } from "@edr/types";
+
+export const api = {
+  fileUploadSettings: {
+    list: endpoint<void, FileUploadSetting[]>(
+      "file-upload-settings",
+      "list",
+      fileUploadSettingsService.list,
+    ),
+
+    getById: endpoint<{ id: string }, FileUploadSetting>(
+      "file-upload-settings",
+      "getById",
+      ({ id }) => fileUploadSettingsService.getById(id),
+    ),
+
+    getByCode: endpoint<{ code: string }, FileUploadSetting>(
+      "file-upload-settings",
+      "getByCode",
+      ({ code }) => fileUploadSettingsService.getByCode(code),
+    ),
+
+    create: endpoint<CreateFileUploadSettingDto, FileUploadSetting>(
+      "file-upload-settings",
+      "create",
+      (payload) => fileUploadSettingsService.create(payload),
+    ),
+
+    update: endpoint<
+      { id: string; dto: UpdateFileUploadSettingDto },
+      FileUploadSetting
+    >("file-upload-settings", "update", ({ id, dto }) =>
+      fileUploadSettingsService.update(id, dto),
+    ),
+
+    remove: endpoint<{ id: string }, void>(
+      "file-upload-settings",
+      "remove",
+      ({ id }) => fileUploadSettingsService.remove(id),
+    ),
+
+    replaceFields: endpoint<
+      { id: string; fields: CreateFileUploadFieldDto[] },
+      FileUploadField[]
+    >("file-upload-settings", "replaceFields", ({ id, fields }) =>
+      fileUploadSettingsService.replaceFields(id, fields),
+    ),
+
+    addField: endpoint<
+      { settingId: string; dto: CreateFileUploadFieldDto },
+      FileUploadField
+    >("file-upload-settings", "addField", ({ settingId, dto }) =>
+      fileUploadSettingsService.addField(settingId, dto),
+    ),
+
+    updateField: endpoint<
+      { fieldId: string; dto: UpdateFileUploadFieldDto },
+      FileUploadField
+    >("file-upload-settings", "updateField", ({ fieldId, dto }) =>
+      fileUploadSettingsService.updateField(fieldId, dto),
+    ),
+
+    removeField: endpoint<{ fieldId: string }, void>(
+      "file-upload-settings",
+      "removeField",
+      ({ fieldId }) => fileUploadSettingsService.removeField(fieldId),
+    ),
+  },
+
+  dropdownSettings: {
+    list: endpoint<void, DropdownSetting[]>(
+      "dropdown-settings",
+      "list",
+      dropdownSettingsService.list,
+    ),
+
+    getById: endpoint<{ id: string }, DropdownSetting>(
+      "dropdown-settings",
+      "getById",
+      ({ id }) => dropdownSettingsService.getById(id),
+    ),
+
+    getByCode: endpoint<{ code: string }, DropdownSetting>(
+      "dropdown-settings",
+      "getByCode",
+      ({ code }) => dropdownSettingsService.getByCode(code),
+    ),
+
+    create: endpoint<CreateDropdownSettingDto, DropdownSetting>(
+      "dropdown-settings",
+      "create",
+      (payload) => dropdownSettingsService.create(payload),
+    ),
+
+    update: endpoint<
+      { id: string; dto: UpdateDropdownSettingDto },
+      DropdownSetting
+    >("dropdown-settings", "update", ({ id, dto }) =>
+      dropdownSettingsService.update(id, dto),
+    ),
+
+    remove: endpoint<{ id: string }, void>(
+      "dropdown-settings",
+      "remove",
+      ({ id }) => dropdownSettingsService.remove(id),
+    ),
+
+    replaceOptions: endpoint<
+      { id: string; options: CreateDropdownOptionDto[] },
+      DropdownOption[]
+    >("dropdown-settings", "replaceOptions", ({ id, options }) =>
+      dropdownSettingsService.replaceOptions(id, options),
+    ),
+
+    addOption: endpoint<
+      { id: string; dto: CreateDropdownOptionDto },
+      DropdownOption
+    >("dropdown-settings", "addOption", ({ id, dto }) =>
+      dropdownSettingsService.addOption(id, dto),
+    ),
+
+    updateOption: endpoint<
+      { optionId: string; dto: UpdateDropdownOptionDto },
+      DropdownOption
+    >("dropdown-settings", "updateOption", ({ optionId, dto }) =>
+      dropdownSettingsService.updateOption(optionId, dto),
+    ),
+
+    removeOption: endpoint<{ optionId: string }, void>(
+      "dropdown-settings",
+      "removeOption",
+      ({ optionId }) => dropdownSettingsService.removeOption(optionId),
+    ),
+  },
+
+  ruleEngine: {
+    list: endpoint<
+      { resource: RuleEngineResourceSlug; params?: RuleEngineListParams },
+      RuleEngineListResult<RuleEngineRecord>
+    >("rule-engine", "list", ({ resource, params }) =>
+      ruleEngineService.list(resource, params),
+    ),
+
+    getById: endpoint<
+      { resource: RuleEngineResourceSlug; id: string },
+      RuleEngineRecord
+    >("rule-engine", "getById", ({ resource, id }) =>
+      ruleEngineService.getById(resource, id),
+    ),
+
+    create: endpoint<
+      { resource: RuleEngineResourceSlug; payload: Record<string, unknown> },
+      RuleEngineRecord
+    >("rule-engine", "create", ({ resource, payload }) =>
+      ruleEngineService.create(resource, payload),
+    ),
+
+    update: endpoint<
+      {
+        resource: RuleEngineResourceSlug;
+        id: string;
+        payload: Record<string, unknown>;
+      },
+      RuleEngineRecord
+    >("rule-engine", "update", ({ resource, id, payload }) =>
+      ruleEngineService.update(resource, id, payload),
+    ),
+
+    remove: endpoint<
+      { resource: RuleEngineResourceSlug; id: string },
+      void
+    >("rule-engine", "remove", ({ resource, id }) =>
+      ruleEngineService.remove(resource, id),
+    ),
+
+    submitRate: endpoint<{ id: string }, RuleEngineRecord>(
+      "rule-engine",
+      "submitRate",
+      ({ id }) => ruleEngineService.submitRate(id),
+    ),
+
+    approveRate: endpoint<
+      { id: string; payload: ApproveRatePayload },
+      RuleEngineRecord
+    >("rule-engine", "approveRate", ({ id, payload }) =>
+      ruleEngineService.approveRate(id, payload),
+    ),
+
+    getApprovalChain: endpoint<void, RuleEngineRecord[]>(
+      "rule-engine",
+      "getApprovalChain",
+      () => ruleEngineService.getApprovalChain(),
+    ),
+  },
+
+  bookings: {
+    list: endpoint<
+      { filter?: BookingListFilter },
+      PaginatedResponse<Freight.IBooking>
+    >("bookings", "list", ({ filter }) => bookingsService.list(filter)),
+
+    getById: endpoint<{ id: string }, Freight.IBooking>(
+      "bookings",
+      "getById",
+      ({ id }) => bookingsService.getById(id),
+    ),
+
+    updateStatus: endpoint<
+      { id: string; action: string; reason?: string },
+      Freight.IBooking
+    >("bookings", "updateStatus", ({ id, action, reason }) =>
+      bookingsService.updateStatus(id, { action, reason }),
+    ),
+
+    remove: endpoint<{ id: string }, void>(
+      "bookings",
+      "remove",
+      ({ id }) => bookingsService.remove(id),
+    ),
+  },
+};
--- a/apps/edr-freight-web/backoffice/src/services/bookings.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/bookings.service.ts
@@ -0,0 +1,51 @@
+import type { Freight, PaginatedResponse } from "@edr/types";
+
+import { api as client } from "../auth/http";
+import { unwrap } from "@/utils/endpoint";
+import { URL_CONSTANTS } from "@/constants/URLS";
+
+const BASE = URL_CONSTANTS.BOOKINGS.BASE;
+
+export interface BookingListFilter {
+  status?: string;
+  customerId?: string;
+  search?: string;
+  page?: number;
+  pageSize?: number;
+  sortBy?: string;
+  sortOrder?: "ASC" | "DESC";
+}
+
+export const bookingsService = {
+  list: async (
+    filter?: BookingListFilter,
+  ): Promise<PaginatedResponse<Freight.IBooking>> => {
+    const response = await client.get<PaginatedResponse<Freight.IBooking>>(
+      BASE,
+      { params: filter },
+    );
+    return unwrap(response.data);
+  },
+
+  getById: async (id: string): Promise<Freight.IBooking> => {
+    const response = await client.get<Freight.IBooking>(
+      URL_CONSTANTS.BOOKINGS.BY_ID(id),
+    );
+    return unwrap(response.data);
+  },
+
+  updateStatus: async (
+    id: string,
+    payload: { action: string; reason?: string },
+  ): Promise<Freight.IBooking> => {
+    const response = await client.patch<Freight.IBooking>(
+      `${URL_CONSTANTS.BOOKINGS.BY_ID(id)}/status`,
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  remove: async (id: string): Promise<void> => {
+    await client.delete(URL_CONSTANTS.BOOKINGS.BY_ID(id));
+  },
+};
--- a/apps/edr-freight-web/backoffice/src/services/fileUploadSettings.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/fileUploadSettings.service.ts
@@ -8,10 +8,8 @@ import type {
  UpdateFileUploadFieldDto,
  UpdateFileUploadSettingDto,
 } from "@/types/fileUploadSettings";
-import { URL_CONSTANTS } from "@/constants/URLS";
-import { QUERY_KEYS } from "@/constants/TANSTACK_QUEY_KEY";
 import { ApiResponse } from "@/types/apiResponse";
-import { endpoint, unwrap } from "@/utils/endpoint";
+import { unwrap } from "@/utils/endpoint";

 const BASE = "/file-upload-settings";

@@ -124,14 +122,3 @@ export const fileUploadSettingsService = {
    await client.delete(`${BASE}/fields/${fieldId}`);
  },
 };
-
-export const getFileUploadSettingByCode = endpoint<string, FileUploadSetting>(
-  QUERY_KEYS.FILES.FILE_UPLOAD_SETTINGS,
-  QUERY_KEYS.FILES.BY_CODE,
-  (code: any) =>
-    client
-      .get<
-        ApiResponse<FileUploadSetting>
-      >(`${URL_CONSTANTS.FILES.FILE_UPLOAD_SETTINGS_BY_CODE}/${code}`)
-      .then((res: any) => res.data.data),
-);
--- a/apps/edr-freight-web/backoffice/src/utils/result.ts
+++ b/apps/edr-freight-web/backoffice/src/utils/result.ts
@@ -0,0 +1,29 @@
+export type Result<T, E = { code: string; message: string; statusCode?: number }> =
+  | { success: true; data: T }
+  | { success: false; error: E };
+
+export type ApiError = {
+  code: string;
+  message: string;
+  statusCode?: number;
+};
+
+export function extractApiError(err: unknown): ApiError {
+  if (err && typeof err === "object") {
+    const obj = err as Record<string, unknown>;
+    const response = obj.response as Record<string, unknown> | undefined;
+    if (response) {
+      const statusCode = response.status as number | undefined;
+      const data = response.data as Record<string, unknown> | undefined;
+      return {
+        code: (data?.error as string) || (data?.message as string) || "api_error",
+        message: (data?.message as string) || (data?.error as string) || "An unexpected error occurred",
+        statusCode,
+      };
+    }
+    if (obj.message && typeof obj.message === "string") {
+      return { code: "client_error", message: obj.message };
+    }
+  }
+  return { code: "unknown_error", message: "An unexpected error occurred" };
+}