fix(freight-backoffice): identify yards by name rather than code

Operators know the yards by name, not by the internal code: the yard coded
KALITY is universally called GMP / Gelan Multipurpose Port (Indode), so
rendering the code alongside the name read as two different places.

Show the name alone in route creation, the yard desks modal and the
booking route card, falling back to the code only when a yard has no
name. The code is unchanged in the data and remains searchable.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingRouteCard.tsx

@@ -17,9 +17,8 @@ export function BookingRouteCard({ booking }: BookingRouteCardProps) {
           <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
             Origin
           </Text>
-          <Text fw={600}>{booking.originYard?.label}</Text>
-          <Text size="xs" c="dimmed">
-            {booking.originYard?.code}
+          <Text fw={600}>
+            {booking.originYard?.label ?? booking.originYard?.code}
           </Text>
         </Stack>
 
@@ -57,10 +56,7 @@ export function BookingRouteCard({ booking }: BookingRouteCardProps) {
             Destination
           </Text>
           <Text fw={600} ta="right">
-            {booking.destinationYard?.label}
-          </Text>
-          <Text size="xs" c="dimmed">
-            {booking.destinationYard?.code}
+            {booking.destinationYard?.label ?? booking.destinationYard?.code}
           </Text>
         </Stack>
       </Group>

apps/edr-freight-web/backoffice/src/pages/fleet/RoutesPage.tsx

@@ -67,8 +67,11 @@ const emptyForm = (): RouteFormState => ({
 /** Order-insensitive pair key — yard distances are symmetric. */
 const pairKey = (a: string, b: string) => (a < b ? `${a}|${b}` : `${b}|${a}`);
 
+// Yards are identified to operators by name, not by their internal code: the
+// yard coded KALITY is universally called GMP / Gelan Multipurpose Port, and
+// showing both read as two different places. The code stays in the data.
 const yardLabel = (yard?: YardRef | null) =>
-  yard ? `${yard.label} (${yard.code})` : "—";
+  yard ? (yard.label ?? yard.code) : "—";
 
 const statusColor = (status: RouteStatus) => {
   switch (status) {
@@ -232,7 +235,7 @@ export default function RoutesPage() {
     () =>
       (yardsQuery.data ?? []).map((yard) => ({
         value: yard.id,
-        label: `${yard.label} (${yard.code})`,
+        label: yard.label ?? yard.code,
       })),
     [yardsQuery.data],
   );

apps/edr-freight-web/backoffice/src/pages/ruleEngine/YardDesksModal.tsx

@@ -83,7 +83,7 @@ export function YardDesksModal({
     <Modal
       opened={opened}
       onClose={onClose}
-      title={yard ? `Desks at ${yard.label} (${yard.code})` : "Desks"}
+      title={yard ? `Desks at ${yard.label ?? yard.code}` : "Desks"}
       size="lg"
     >
       <Stack gap="md">