From 3bda018996baf8e781d68473c5193d03b38f734c Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Sat, 18 Apr 2026 18:42:51 +0300
Subject: [PATCH] Surface dayChange offsets in accordion time columns

Angular stamps a small '-1' (or '+1') next to the time whenever the
transition start/end falls on a different calendar day than the leg
itself (e.g. registration opening the day before a 00:05 departure).
Read start.dayChange.value and end.dayChange.value on each transition
and render the offset as a superscript next to the time. Keeps the
blue accent color used elsewhere in the row for date lines.
---
 .../FlightDetailsAccordion.scss               |  8 +++++
 .../details-panels/FlightDetailsAccordion.tsx | 32 ++++++++++++++-----
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss b/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
index 16dcfafd..21aa3ea9 100644
--- a/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
+++ b/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
@@ -139,6 +139,14 @@
     color: #222;
   }
 
+  &__day-change {
+    margin-left: 6px;
+    font-size: 11px;
+    font-weight: 500;
+    color: #2457ff;
+    vertical-align: super;
+  }
+
   &__time-date {
     font-size: 12px;
     color: #2457ff;
diff --git a/src/features/online-board/components/details-panels/FlightDetailsAccordion.tsx b/src/features/online-board/components/details-panels/FlightDetailsAccordion.tsx
index 3d3aeb46..82feaef9 100644
--- a/src/features/online-board/components/details-panels/FlightDetailsAccordion.tsx
+++ b/src/features/online-board/components/details-panels/FlightDetailsAccordion.tsx
@@ -85,22 +85,38 @@ function TransitionTimes({
   testId: string;
 }): JSX.Element {
   const { t } = useTranslation();
-  const start = item.start?.local;
-  const end = item.end?.local;
+  const start = item.start;
+  const end = item.end;
+  const startDayChange = start?.dayChange?.value ?? 0;
+  const endDayChange = end?.dayChange?.value ?? 0;
   return (
     <div className="details-row__times" data-testid={testId}>
-      {start && (
+      {start?.local && (
         <div className="details-row__time-col">
           <div className="details-row__time-label">{t("SHARED.TIME-START")}</div>
-          <div className="details-row__time-value">{formatLocalTime(start)}</div>
-          <div className="details-row__time-date">{formatDayMonthYear(start)}</div>
+          <div className="details-row__time-value">
+            {formatLocalTime(start.local)}
+            {startDayChange !== 0 && (
+              <span className="details-row__day-change">
+                {startDayChange > 0 ? `+${startDayChange}` : startDayChange}
+              </span>
+            )}
+          </div>
+          <div className="details-row__time-date">{formatDayMonthYear(start.local)}</div>
         </div>
       )}
-      {end && (
+      {end?.local && (
         <div className="details-row__time-col">
           <div className="details-row__time-label">{t("SHARED.TIME-END")}</div>
-          <div className="details-row__time-value">{formatLocalTime(end)}</div>
-          <div className="details-row__time-date">{formatDayMonthYear(end)}</div>
+          <div className="details-row__time-value">
+            {formatLocalTime(end.local)}
+            {endDayChange !== 0 && (
+              <span className="details-row__day-change">
+                {endDayChange > 0 ? `+${endDayChange}` : endDayChange}
+              </span>
+            )}
+          </div>
+          <div className="details-row__time-date">{formatDayMonthYear(end.local)}</div>
         </div>
       )}
     </div>