style: inter module integration

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

@@ -14,6 +14,7 @@ import {
 } from "@mantine/core";
 import { ChevronDown, ChevronRight, Info, Train, Weight } from "lucide-react";
 
+import { EntityLink } from "@/components/detail";
 import type { TrainScheduleDetail } from "@/types/trainScheduling";
 
 /**
@@ -254,15 +255,19 @@ export function LegCapacityPanel({ schedule }: { schedule: TrainScheduleDetail }
                                     {e.bookings.map((b) => (
                                       <Table.Tr key={b.bookingId}>
                                         <Table.Td w="50%">
-                                          <Text size="sm" fw={500} style={{ whiteSpace: "nowrap" }}>
-                                            {b.reference}
+                                          <Group gap={4} wrap="nowrap" style={{ whiteSpace: "nowrap" }}>
+                                            <EntityLink
+                                              to={`/dashboard/booking-requests/${b.bookingId}`}
+                                              label={b.reference}
+                                              size="sm"
+                                              fw={500}
+                                            />
                                             {b.route ? (
                                               <Text span size="xs" c="dimmed">
-                                                {" "}
                                                 ({b.route})
                                               </Text>
                                             ) : null}
-                                          </Text>
+                                          </Group>
                                         </Table.Td>
                                         <Table.Td w="25%">
                                           <Group gap={4} wrap="nowrap">

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

@@ -36,6 +36,7 @@ import {
 import { CountdownTimer } from "@edr/ui-common";
 
 import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
+import { EntityLink } from "@/components/detail";
 import { api } from "@/services/api";
 import { useToast } from "@/hooks/use-toast";
 import type {
@@ -601,6 +602,7 @@ export function ScheduleWorkspacePanel({
             {pool.map((b) => (
               <BookingCard
                 key={b.id}
+                bookingId={b.id}
                 reference={b.reference}
                 customer={b.customer}
                 weightTons={b.weightTons}
@@ -711,6 +713,7 @@ export function ScheduleWorkspacePanel({
                     return (
                       <BookingCard
                         key={b.id}
+                        bookingId={b.id}
                         reference={ref}
                         customer={b.customer}
                         weightTons={b.weightTons}
@@ -985,6 +988,7 @@ function PanelColumn({
 }
 
 function BookingCard({
+  bookingId,
   reference,
   customer,
   weightTons,
@@ -996,6 +1000,8 @@ function BookingCard({
   leg,
   right,
 }: {
+  /** When set, the reference links to the booking's detail page. */
+  bookingId?: string;
   reference: string;
   customer?: string | null;
   weightTons?: number | null;
@@ -1030,9 +1036,18 @@ function BookingCard({
       <Group justify="space-between" align="center" wrap="nowrap" gap="sm">
         <Stack gap={3} style={{ minWidth: 0 }}>
           <Group gap={8} align="center" wrap="nowrap">
-            <Text size="sm" fw={700} truncate>
-              {reference}
-            </Text>
+            {bookingId ? (
+              <EntityLink
+                to={`/dashboard/booking-requests/${bookingId}`}
+                label={reference}
+                size="sm"
+                fw={700}
+              />
+            ) : (
+              <Text size="sm" fw={700} truncate>
+                {reference}
+              </Text>
+            )}
             {status ? <BookingStatusBadge status={status} /> : null}
             {intercity ? (
               <Tooltip

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

@@ -1,5 +1,6 @@
 import { Badge, Card, Group, Progress, SimpleGrid, Stack, Text, ThemeIcon } from "@mantine/core";
 import { Box, Package } from "lucide-react";
+import { EntityLink } from "@/components/detail";
 import type { TrainScheduleWagonAllocation, WagonPlanRow } from "@/types/trainScheduling";
 
 type WagonSlot = (WagonPlanRow & {
@@ -159,9 +160,12 @@ export function WagonPlanGrid({
                       <Card key={`${alloc.bookingId}-${index}`} padding="xs" radius="md" bg="gray.0">
                         <Stack gap={2}>
                           <Group justify="space-between" gap="xs">
-                            <Text size="xs" fw={500} lineClamp={1}>
-                              {alloc.bookingReference ?? alloc.bookingId}
-                            </Text>
+                            <EntityLink
+                              to={`/dashboard/booking-requests/${alloc.bookingId}`}
+                              label={alloc.bookingReference ?? alloc.bookingId}
+                              size="xs"
+                              fw={500}
+                            />
                             {label === "BULK" ? (
                               <Text size="xs" c="dimmed">
                                 {alloc.allocatedWeightTons}T cargo