From eeac88f3be6c798a04d8b08fc2a24b7c591f3df8 Mon Sep 17 00:00:00 2001
From: hager <hageritina27@gmail.com>
Date: Sun, 6 Sep 2026 19:37:02 +0000
Subject: [PATCH] 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>
---
 .../components/bookings/detail/BookingRouteCard.tsx    | 10 +++-------
 .../backoffice/src/pages/fleet/RoutesPage.tsx          |  7 +++++--
 .../backoffice/src/pages/ruleEngine/YardDesksModal.tsx |  2 +-
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingRouteCard.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingRouteCard.tsx
index 05fa58100..76478bc4f 100644
--- a/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingRouteCard.tsx
+++ b/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>
diff --git a/apps/edr-freight-web/backoffice/src/pages/fleet/RoutesPage.tsx b/apps/edr-freight-web/backoffice/src/pages/fleet/RoutesPage.tsx
index 6a70596aa..ec31e2f03 100644
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/RoutesPage.tsx
+++ b/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],
   );
diff --git a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/YardDesksModal.tsx b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/YardDesksModal.tsx
index 5a9b6ccf6..18aa450ff 100644
--- a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/YardDesksModal.tsx
+++ b/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">