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/App.tsx

@@ -1,4 +1,5 @@
 import {
+  ArrowLeftRight,
   Boxes,
   Building2,
   Container,
@@ -86,6 +87,7 @@ import DropdownSettingsPage from "./pages/dropdown_settings/DropdownSettingsPage
 import ContractTemplatesPage from "./pages/contract_templates/ContractTemplatesPage";
 import ContractTemplateEditorPage from "./pages/contract_templates/ContractTemplateEditorPage";
 import FleetResourcePage from "./pages/fleet/FleetResourcePage";
+import WagonTransfersPage from "./pages/wagons/WagonTransfersPage";
 import VehicleDetailPage from "./pages/fleet/VehicleDetailPage";
 import DriverDetailPage from "./pages/fleet/DriverDetailPage";
 import RoutesPage from "./pages/fleet/RoutesPage";
@@ -297,6 +299,15 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
             icon: <Truck />,
             permission: [FREIGHT_PERMS.wagons.view, FREIGHT_PERMS.fleet.view],
           },
+          {
+            label: "Wagon Transfers",
+            href: "/dashboard/wagon-transfers",
+            icon: <ArrowLeftRight />,
+            permission: [
+              FREIGHT_PERMS.wagons.transferView,
+              FREIGHT_PERMS.wagons.view,
+            ],
+          },
           {
             label: "Vehicles",
             href: "/dashboard/vehicles",
@@ -1180,6 +1191,19 @@ const App = () => {
             </RequirePermission>
           }
         />
+        <Route
+          path="wagon-transfers"
+          element={
+            <RequirePermission
+              permission={[
+                FREIGHT_PERMS.wagons.transferView,
+                FREIGHT_PERMS.wagons.view,
+              ]}
+            >
+              <WagonTransfersPage />
+            </RequirePermission>
+          }
+        />
         <Route
           path="containers"
           element={
@@ -1410,6 +1434,19 @@ const App = () => {
             </RequirePermission>
           }
         />
+        <Route
+          path="wagon-transfers"
+          element={
+            <RequirePermission
+              permission={[
+                FREIGHT_PERMS.wagons.transferView,
+                FREIGHT_PERMS.wagons.view,
+              ]}
+            >
+              <WagonTransfersPage />
+            </RequirePermission>
+          }
+        />
         <Route
           path="containers"
           element={