feat: implement wagon transfer management modals and page

- Add TransferFulfillModal for fulfilling wagon transfer requests.
- Create TransferRequestFormModal for filing new wagon transfer requests.
- Introduce TransferCloseShortModal for closing requests that cannot be fully fulfilled.
- Develop WagonTransfersPage to manage and display wagon transfer requests.
- Implement utility functions for handling wagon transfer request data and UI components.
- Enhance UI with Mantine components for better user experience.

apps/edr-freight-web/backoffice/src/services/api.ts

@@ -1,3 +1,5 @@
+import type { PaginatedResponse } from "@edr/types";
+
 import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
 import type { FleetResourceSlug } from "@/pages/fleet/config/resources";
 import type { BookingDetail } from "@/types/booking";
@@ -208,6 +210,7 @@ import {
   type CreateTransferRequestPayload,
   type BulkFulfillResult,
   type TransferHistory,
+  type TransferRequestListFilter,
 } from "./wagon.service";
 import { warehouseService } from "./warehouse.service";
 
@@ -1719,14 +1722,14 @@ export const api = {
 
   wagonTransferRequests: {
     list: endpoint<
-      { status?: WagonTransferRequest["status"] },
-      WagonTransferRequest[]
+      { filter?: TransferRequestListFilter },
+      PaginatedResponse<WagonTransferRequest>
     >(
       "wagonTransferRequests",
       "list",
-      ({ status }) =>
-        wagonTransferRequestService.list(status).then((r) => r.data),
-      ({ status }) => ["wagonTransferRequests", "list", status ?? "ALL"],
+      ({ filter }) =>
+        wagonTransferRequestService.list(filter).then((r) => r.data),
+      ({ filter }) => ["wagonTransferRequests", "list", filter ?? {}],
     ),
 
     getById: endpoint<{ id: string }, WagonTransferRequest>(
@@ -1774,19 +1777,47 @@ export const api = {
       () => [["wagonTransferRequests"]],
     ),
 
-    history: endpoint<void, TransferHistory>(
+    closeShort: endpoint<{ id: string; note?: string }, WagonTransferRequest>(
       "wagonTransferRequests",
-      "history",
-      () => wagonTransferRequestService.myHistory().then((r) => r.data),
-      () => ["wagonTransferRequests", "history", "mine"],
+      "closeShort",
+      ({ id, note }) =>
+        wagonTransferRequestService.closeShort(id, note).then((r) => r.data),
+      undefined,
+      () => [["wagonTransferRequests"]],
     ),
 
-    historyAll: endpoint<{ userId?: string }, TransferHistory>(
+    history: endpoint<{ page?: number; pageSize?: number }, TransferHistory>(
+      "wagonTransferRequests",
+      "history",
+      ({ page, pageSize }) =>
+        wagonTransferRequestService.myHistory(page, pageSize).then((r) => r.data),
+      ({ page, pageSize }) => [
+        "wagonTransferRequests",
+        "history",
+        "mine",
+        page ?? 1,
+        pageSize ?? 20,
+      ],
+    ),
+
+    historyAll: endpoint<
+      { userId?: string; page?: number; pageSize?: number },
+      TransferHistory
+    >(
       "wagonTransferRequests",
       "historyAll",
-      ({ userId }) =>
-        wagonTransferRequestService.allHistory(userId).then((r) => r.data),
-      ({ userId }) => ["wagonTransferRequests", "history", "all", userId ?? ""],
+      ({ userId, page, pageSize }) =>
+        wagonTransferRequestService
+          .allHistory(userId, page, pageSize)
+          .then((r) => r.data),
+      ({ userId, page, pageSize }) => [
+        "wagonTransferRequests",
+        "history",
+        "all",
+        userId ?? "",
+        page ?? 1,
+        pageSize ?? 20,
+      ],
     ),
   },