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/pages/fleet/FleetResourcePage.tsx

@@ -9,7 +9,7 @@ import { canFleetAction, hasPermission, FREIGHT_PERMS } from "@/lib/permissions"
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
 import { Inbox, Plus, Warehouse } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-import { Navigate, useLocation } from "react-router-dom";
+import { Link, Navigate, useLocation } from "react-router-dom";
 
 import FleetCardGrid from "@/components/fleet/FleetCardGrid";
 import FleetFormDialog from "@/components/fleet/FleetFormDialog";
@@ -19,7 +19,6 @@ import FleetToolbar from "@/components/fleet/FleetToolbar";
 import { matchesDayRange } from "@/hooks/useListControls";
 import WagonMovementHistoryModal from "@/components/fleet/WagonMovementHistoryModal";
 import WagonYardWorkspaceModal from "@/components/wagons/WagonYardWorkspaceModal";
-import WagonTransferRequestsModal from "@/components/wagons/WagonTransferRequestsModal";
 import { formatFleetCell, registerFleetOptionLabels } from "@/components/fleet/fleetFormat";
 import { useFleetViewMode } from "@/components/fleet/useFleetViewMode";
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
@@ -67,7 +66,6 @@ const FleetResourcePage = () => {
   const [historyTarget, setHistoryTarget] = useState<FleetRecord | null>(null);
   const [selectedDriver, setSelectedDriver] = useState<string>("");
   const [wagonWorkspaceOpen, setWagonWorkspaceOpen] = useState(false);
-  const [transferRequestsOpen, setTransferRequestsOpen] = useState(false);
   const { viewMode, setViewMode } = useFleetViewMode(slug);
 
   const serverListFilters = useMemo((): FleetListFilters | undefined => {
@@ -90,6 +88,11 @@ const FleetResourcePage = () => {
     if (trainNumber && trainNumber !== "ALL") {
       (filters as { trainNumber?: string }).trainNumber = trainNumber;
     }
+    // Wagons only: narrow the fleet to one wagon type (the API filters on it).
+    const wagonTypeId = listFilterValues.wagonTypeId;
+    if (wagonTypeId && wagonTypeId !== "ALL") {
+      (filters as { wagonTypeId?: string }).wagonTypeId = wagonTypeId;
+    }
     if (slug !== "locomotives" && search.trim()) {
       filters.search = search.trim();
     }
@@ -449,12 +452,15 @@ const FleetResourcePage = () => {
                   </Button>
                 ) : null}
                 {canTransfer ? (
+                  // The desk is its own page now (list + fulfil + history with
+                  // pagination); this is just the way in from the fleet list.
                   <Button
+                    component={Link}
+                    to="/dashboard/wagon-transfers"
                     variant="light"
                     color="grape"
                     leftSection={<Inbox size={16} />}
                     styles={{ label: { fontWeight: 500 } }}
-                    onClick={() => setTransferRequestsOpen(true)}
                   >
                     Transfer Requests
                   </Button>
@@ -713,13 +719,6 @@ const FleetResourcePage = () => {
         />
       ) : null}
 
-      {slug === "wagons" ? (
-        <WagonTransferRequestsModal
-          opened={transferRequestsOpen}
-          onClose={() => setTransferRequestsOpen(false)}
-        />
-      ) : null}
-
       {slug === "wagons" ? (
         <WagonMovementHistoryModal
           opened={Boolean(historyTarget)}

apps/edr-freight-web/backoffice/src/pages/fleet/config/resources.ts

@@ -305,6 +305,12 @@ export const FLEET_RESOURCES: FleetResourceConfig[] = [
         allLabel: "All statuses",
         options: WAGON_STATUS_OPTIONS,
       },
+      {
+        key: "wagonTypeId",
+        label: "Wagon type",
+        allLabel: "All types",
+        dynamicOptions: "wagonTypes",
+      },
       {
         key: "currentYardId",
         label: "Current Yard",