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/components/trainScheduling/compositionEditor/BookingDetailModal.tsx

@@ -147,7 +147,7 @@ export const BookingDetailModal = ({
                 <Group gap={4} justify="flex-end">
                   {bookingWagons.map((w) => (
                     <Badge key={w.id} size="sm" variant="outline" color="edr-green" radius="sm">
-                      #{w.sequenceNo}
+                      #{w.position ?? w.sequenceNo}
                     </Badge>
                   ))}
                 </Group>

apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/InteractiveTrainConsist.tsx

@@ -281,7 +281,7 @@ function WagonCar({
             {/* header */}
             <Group justify="space-between" px={7} pt={3} wrap="nowrap">
               <Text size="10px" fw={800} c="gray.7">
-                #{wagon.sequenceNo}
+                #{wagon.position ?? wagon.sequenceNo}
               </Text>
               {isEmpty ? (
                 <Text size="8px" c="dimmed" fw={700} style={{ letterSpacing: 0.5 }}>
@@ -425,7 +425,7 @@ function WagonCar({
               </Box>
               <div>
                 <Text size="sm" fw={800}>
-                  Wagon #{wagon.sequenceNo}
+                  Wagon #{wagon.position ?? wagon.sequenceNo}
                 </Text>
                 <Text size="10px" c="dimmed">
                   {wagon.physicalWagonNumber ?? wagon.wagonType?.code ?? "Unassigned"}

apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/RemoveBookingModal.tsx

@@ -45,7 +45,7 @@ export const RemoveBookingModal = ({
               <strong>Gross weight:</strong> {grossTons.toFixed(2)} T
             </Text>
             <Text size="sm">
-              <strong>Wagon Slot:</strong> #{wagon.sequenceNo}
+              <strong>Wagon Slot:</strong> #{wagon.position ?? wagon.sequenceNo}
             </Text>
           </Stack>
         </div>

apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/TrainConsistView.tsx

@@ -217,7 +217,7 @@ export const TrainConsistView = ({
         <Box>
           <Group gap={6} mb={6} wrap="nowrap">
             <Badge variant="light" color="edr-green" radius="sm">
-              Editing wagon #{selectedWagon.sequenceNo}
+              Editing wagon #{selectedWagon.position ?? selectedWagon.sequenceNo}
             </Badge>
             <Text size="xs" c="dimmed">
               Update container numbers, move containers to another wagon, or remove the booking

apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/WagonCard.tsx

@@ -80,7 +80,7 @@ export const WagonCard = ({
             <div>
               <Group gap={4}>
                 <Text size="sm" fw={800}>
-                  Wagon #{wagon.sequenceNo}
+                  Wagon #{wagon.position ?? wagon.sequenceNo}
                 </Text>
                 <Badge size="xs" variant="light" color="edr-green">
                   {wagonType}
@@ -205,7 +205,7 @@ export const WagonCard = ({
                             >
                               <Group gap={6} wrap="nowrap" justify="space-between">
                                 <Text size="xs" fw={600} truncate>
-                                  #{w.sequenceNo} ·{" "}
+                                  #{w.position ?? w.sequenceNo} ·{" "}
                                   {w.physicalWagonNumber ?? w.wagonType?.code ?? "Wagon"}
                                 </Text>
                                 <Badge