flights_web/docs/parity-report/REPORT.md

Visual Parity Report — Angular vs React (full coverage)

Date: 2026-04-19 Tool: Playwright MCP (@playwright/mcp) Angular reference: https://flights.test.aeroflot.ru/{locale}/... React under test: http://localhost:8080/{locale}/... (pnpm dev:full proxy) Locales tested: ru-ru (primary), en-en (sample) Viewports: desktop 1440×900, mobile 375×812 Test scenarios:

• Route SVO ↔ LED, 19 Apr 2026 (today)
• Flight SU 6497, 19 Apr 2026
• Departure ex-SVO / Arrival in LED
• Schedule one-way SVO→LED, week of 19–26 Apr 2026
• Flights map (no filter)

Screenshots in screenshots-v2/. Legend: 🟢 visually equivalent · 🟡 minor diffs (spacing, dev chrome) · 🟠 functional/content gap · 🔴 major regression.

---

At a glance

#	Page	URL pattern	Desktop	Mobile	EN
1	Onlineboard start	/{locale}/onlineboard	🟢	🟢	🟢
2	Onlineboard route results	/{locale}/onlineboard/route/{dep}-{arr}-{date}	🟢	🟢	🟡
3	Onlineboard departure-only	/{locale}/onlineboard/departure/{dep}-{date}	🟢	—	—
4	Onlineboard arrival-only	/{locale}/onlineboard/arrival/{arr}-{date}	🟢	—	—
5	Onlineboard flight-number search	/{locale}/onlineboard/flight/{carrier}{num}-{date}	🟢	—	—
6	Flight details (single flight)	/{locale}/onlineboard/{carrier}{num}-{date}	🟠	🟠	🟠
7	Schedule start	/{locale}/schedule	🟢	—	—
8	Schedule route results (one-way)	/{locale}/schedule/route/{dep}-{arr}-{from}-{to}	🔴	—	—
9	Schedule route results (round-trip)	/{locale}/schedule/route/.../...	🔴	—	—
10	Schedule flight details	/{locale}/schedule/{flightId}	not tested	—	—
11	Flights map	/{locale}/flights-map	🟡	🟡	—
12	Popular requests panel (inline)	embedded on 1, 7	🟢	🟢	🟢
13	Error pages (404/500)	/error/{code}	not tested	—	—
14	Smoke / health	/{locale}/smoke	not user-facing	—	—

---

URL surface

Both apps now use the same BCP-47-like URL contract: /{xx-xx}/... where both halves are the language code (/ru-ru/, /en-en/, /zh-zh/, /ja-ja/, /de-de/, …). Bare short codes (/ru/onlineboard) auto-redirect to canonical (/ru-ru/onlineboard) on the React side; Angular config redirects the same way. ✅ URL parity.

---

1. Onlineboard — start page

Angular	React

Diffs:

• Angular shows test-env chrome React hides (orange "Тестовая версия", "rc/2026-04-06", dev counter "383", chat-widget bubble). Out of scope.
• Date input placeholder: Angular ДД.ММ.ГГГГ vs React Сегодня (filled when date is today). React's behaviour matches Angular's loaded state once a date is picked.
• Form-row vertical spacing slightly tighter in React (~6 px less between inputs).
• 4 info tiles, popular-requests block, breadcrumb — pixel-equivalent.

🟢 Equivalent.

2. Onlineboard — route results (/onlineboard/route/SVO-LED-20260419)

Angular	React

Diffs:

• Both auto-expand the same closest-to-now flight (SU 6579) with the Время + Посадка accordion. Layout, columns, and label order match.
• Angular shows the actual arrival time (20:22) as primary with the scheduled time (20:25) struck-through; React shows 20:25 primary with 20:22 in the expanded panel. Both convey the same data, slightly different emphasis.
• Date-tab strip (18 апр – 24 апр) and current-day highlight identical.
• React keeps the filter "Дата рейса" / "Время рейса" rows visible after submit; Angular hides them. Minor.

🟢 Equivalent on layout; 🟡 minor on time-emphasis treatment.

3. Onlineboard — departure-only (/onlineboard/departure/SVO-20260419)

Angular	React

Diffs:

• Angular's Город прилета field defaults to Все направления; React leaves it empty. Functionally equivalent (both query "all destinations from SVO"); cosmetic.
• Both list flights to varied destinations (Сыктывкар, Махачкала, Ереван, Санкт-Петербург, …) with the same time/airline/airport columns.
• Same card-expansion behaviour.

🟢 Equivalent.

4. Onlineboard — arrival-only (/onlineboard/arrival/LED-20260419)

Angular	React

Diffs:

• Same Все направления placeholder difference as #3.
• Boarding section in Angular labelled Высадка (deboarding); React labels it Посадка (boarding) but with the same fields. Consider switching React to Высадка for arrival-direction flights to match Angular wording.
• Status pill colours match: green check-mark (Прибыл), blue plane (Вылетел).

🟢 Equivalent on layout; 🟡 boarding/deboarding label.

5. Onlineboard — flight-number search (/onlineboard/flight/SU6497-20260419)

Equivalent to the route-results page in chrome (same OnlineBoardSearchPage shell). Both render a single-card list filtered to the flight number, with the same expanded card. H1 heading reads Рейс: SU 6497, Сегодня on both. 🟢 Equivalent.

6. Flight details — full page (/onlineboard/SU6497-20260419)

Angular	React

Diffs:

• H1 wording matches: Информация о рейсе: SU 6497, Москва - Санкт-Петербург.
• Carrier logo (RU): Angular renders the RU variant РОССИЯ (Cyrillic); React serves the EN variant ROSSIYA (Latin) even on the Russian site. 🔴 Bug — BoardDetailsHeader's OperatorLogo is still passing locale="en" or the asset fallback is wrong. The fix that landed for FlightCard didn't reach the details-page header.
• Sidebar mini-list: Angular shows arrows pointing right between origin/destination; React's mini-list item is plainer (just times + cities, no arrows). Angular uses the localised Прибыл time; React shows blank status row in the mini-list.
• Регистрация row times: Angular shows 16:00 ⁻¹ (with a small superscript day-change marker for the day-before start) plus 15:15 end time; React shows the same. ✅
• Посадка (boarding) — in flight-details accordion: matching Закончена status, same start/end times.
• Высадка (deboarding) row: matching status + times.
• Последнее обновление stamp: both show fresh client-side load timestamp. ✅
• Footer note * Время прилета и расстояния являются расчётными...: present on both.

🟠 — H1 + accordion match Angular; the carrier-logo locale slip is the only visible regression.

7. Schedule — start page

Angular	React

Diffs:

• Date-range field: Angular shows placeholder ДД.ММ.ГГГГ - ДД.ММ.ГГГГ; React fills with the default current-week range 19.04.2026 - 26.04.2026 (calendar shows actual values). React's behaviour matches Angular's after the calendar mounts.
• 4 info tiles, popular-requests block, "Расписание рейсов Аэрофлота" SEO body — equivalent.

🟢 Equivalent.

8. Schedule — route results, one-way (/schedule/route/SVO-LED-20260419-20260426)

Angular	React

Diffs (major):

• Day-grouping headers: Angular groups flights by day (Воскресенье 19 Апреля); React shows a flat list with no day grouping.
• Code-share + multi-leg expansion: Angular shows multi-carrier flights bundled (SU 1942, SU 6532 with two airline logos), then a route diagram (4ч.25мин. + 2ч.20мин. transfer + 5ч.10мин.) and the legs broken out below. React renders each leg as a separate row with no diagram, no transfer pill, and no parent-flight grouping.
• Column headers: Angular has a sortable header row (РЕЙС / АВИАКОМПАНИЯ, БОРТ / ВЫЛЕТ / ВРЕМЯ В ПУТИ / ПРИЛЕТ) with sort arrows on ВЫЛЕТ and ПРИЛЕТ; React shows no headers.
• Date-range tab strip: Angular shows weekly windows (13 апр - 19 апр, 20 апр - 26 апр, …); React shows daily tabs (17 апр., 18 апр., 19 апреля, …).
• Aircraft model: Angular shows Airbus A321 / Airbus A319 per leg; React doesn't show aircraft model in the row.
• Action buttons: Angular has both Статус рейса and Детали рейса per flight; React has only Детали рейса.
• Вы искали (search history) sidebar accordion: Angular has one; React has it elsewhere or not at all on this page.

🔴 Major regression — schedule results page is the largest gap in the entire app. The React page is essentially the onlineboard list reskinned, missing all of: day grouping, multi-leg/code-share grouping, transfer diagram, sortable headers, weekly date tabs, aircraft column, and the secondary action button.

9. Schedule — route results, round-trip

Not separately captured in this run. Same structural gaps as #8 are expected (Angular shows two side-by-side panels for outbound + return, each with full grouping). 🔴

10. Schedule — flight details

Not captured. Angular has a dedicated detail page reachable via Детали рейса/Статус рейса buttons; React's catch-all route handles this URL but renders the onlineboard details page. Worth a dedicated capture pass.

11. Flights map

Angular	React

Diffs:

• Origin marker: Angular shows red dot on Москва (geolocation result). React shows no marker — useGeolocationDefault() either silently failed or the headless Playwright didn't grant permission. In a real browser with geo enabled both should show the dot.
• Default zoom/extent: Angular includes Санкт-Петербург at top of viewport; React's viewport is shifted south, cutting off SPb. Both use Leaflet center [53,45] zoom 5; the diff is viewport-width and tile-loading order, not code.
• Swap arrows: vertical blue ↑↓ on both. ✅
• City labels: text-only with text-shadow halo on both. ✅
• Form panel: no Найдите свой маршрут header on either. ✅
• Date input: React still has the filled-blue calendar tile, Angular has an outline icon. Minor.

🟡 Minor — geo marker + slight zoom drift.

12. Popular requests panel

Embedded inline on Onlineboard start (#1) and Schedule start (#7). Renders 4 items in 2 columns; each is Маршрут: City - City, Номер рейса: SU XXXX, Вылет: City, or Прилет: City. Both apps use a service singleton (Angular *FiltersStateService) / sessionStorage prefill (React) to hand off click data without polluting the URL — confirmed in earlier patches. 🟢

13. Error pages

The React app has /error/{code}/page.tsx covering 404/500/etc. with a localised header + search box. Angular has /error-pages/error-page with the same shape. Not captured this round (need a deliberately broken URL); structurally aligned per the code.

14. Smoke / health

/{locale}/smoke is React-only — used by health-check probes. No Angular equivalent expected.

---

English (/en-en/) — locale parity sample

Angular	React

Diffs:

• All form labels (Flight number, Route, City of departure, City of destination, Flight date, Search) — match.
• Date tabs (18 Apr, April 19, 20 Apr, …): Angular uses apr lowercase weekday-relative form; React capitalised Apr. Minor.
• Status pills (Arrived, In flight, Scheduled) — match.
• Carrier logos — both render the EN variants ROSSIYA / AEROFLOT. ✅
• Boarding row labels (Status, Start time, End time/Close time): Angular uses Close Time, React uses End time. Cosmetic.

🟢 Equivalent. EN translation now complete (was 21 keys empty before — all filled).

---

Mobile (375×812)

Onlineboard start

Angular	React

Diffs:

• Both surface the 3-day quick-pick row (19 Вс. Апреля / 20 Пн. Апреля / 21 Вт. Апреля) above the manual ДД.ММ.ГГГГ input. ✅ React's selected-day chip uses solid blue fill; Angular leaves all three white. Minor.
• Tabs (Онлайн-Табло / Расписание / Карта полетов) — match.
• Form fields, swap arrow, accordion behaviour — match.

🟢 Equivalent.

Flight details

Angular	React

Diffs:

• Carrier logo: Angular РОССИЯ (RU); React ROSSIYA (EN). Same bug as desktop #6. 🔴
• Both show the date-picker (19 Апреля 2026 / Сегодня) and the back-to-board button.
• Both show the same flight-progress timeline (16:00 → 17:23 with Прибыл, strikethrough scheduled 17:25).
• Both show the same По расписанию / Фактическое time blocks.
• Last-update stamp (Последнее обновление: 19:09 19.04.2026) — both fresh client-load time. ✅
• React shows an extra wrapped header with "SU 6497 / 16:00 / 17:23 / Москва / Санкт-Петербург" above the main accordion — duplicates info that's already in the main card. Angular doesn't have this duplicate.

🟠 — Carrier logo locale + duplicate sidebar-card on mobile.

---

Cross-cutting findings

What's already at parity ✅

• URL contract (BCP-47 /xx-xx/, both halves matching).
• 9-language i18n coverage (RU complete, EN complete after this round, others have file-level coverage from the prior project).
• API client locale (now mutable, follows [lang]/layout.tsx) — cities/airports/statuses respond in the active language.
• Onlineboard start, route, departure, arrival, flight-search pages — visually equivalent.
• Schedule start page — equivalent.
• Popular requests panel + cross-page prefill via sessionStorage.
• Mobile day-quick-pick (3-day chip row).
• Flights map: swap arrows, city labels, form panel header, leaflet tooltip styling.
• Last-update stamp using client-side load time (matches Angular's flight.lastUpdate = new Date()).
• Share menu (translated labels + brand-icon-on-top layout).
• Footer note * Время в системе - МЕСТНОЕ. on search results.
• Boarding-status leading dot (grey for Уточняется).

Open gaps 🟠/🔴

Severity	Page	Gap
🔴	Schedule results (#8, #9)	No day grouping, no code-share/multi-leg bundling, no transfer-diagram, no sortable headers, no weekly date tabs, no aircraft column, missing Статус рейса button. Schedule is a markedly different feature in Angular than what React currently ships.
🔴	Flight-details carrier logo (#6, mobile)	BoardDetailsHeader still serves the EN logo variant on Russian pages. FlightCard was fixed in the i18n migration, but the details-page header was missed. One-line fix in BoardDetailsHeader.tsx to pass useLocale().language.
🟠	Flight-details mobile (#6)	React renders an extra summary-card above the main details card that Angular doesn't have.
🟠	Onlineboard arrival (#4)	Boarding-row label says Посадка for arrival-direction flights; Angular says Высадка.
🟡	Onlineboard departure/arrival (#3, #4)	Empty Город прилета / Город вылета field instead of Angular's Все направления placeholder.
🟡	Flights map	Default origin red dot (geo-driven, not code).
🟡	Flights map calendar icon	Filled blue tile vs Angular outline icon (PrimeReact theme).
🟡	Onlineboard route filter	Date / time inputs stay visible after submit; Angular hides them.
🟡	EN tabs label casing	Apr vs apr weekday header.

Items intentionally divergent

• React [lang]/smoke route — health probe, not present in Angular.
• React [lang]/popular route was deleted to match Angular's 404 (popular requests are inline only).
• React in-page test/dev chrome (Тестовая версия badge, env counter, chat widget) — Angular reflects the test-env deployment; React's dev:full is dev-only.

---

Recommended priorities

P0 — content correctness on the Russian site:

1. Fix BoardDetailsHeader to pass useLocale().language to OperatorLogo so RU pages get РОССИЯ not ROSSIYA (desktop + mobile #6).

P1 — feature gaps on schedule: 2. Schedule results page (#8) — port Angular's day-grouped, multi-leg / code-share bundled, weekly-date-tab layout. This is the single biggest UX gap remaining in the React app. 3. Schedule round-trip results — same approach, two-pane.

P2 — small parity wins: 4. Mobile flight-details: drop the duplicate summary card above the main details card (#6 mobile). 5. Onlineboard arrival page: rename boarding row to Высадка when direction = arrival (#4). 6. Departure / arrival pages: prefill the opposite-direction field with Все направления placeholder (#3, #4).

P3 — polish: 7. Onlineboard route filter: hide Дата рейса / Время рейса rows post-submit. 8. Flights map: outline calendar icon instead of filled blue tile. 9. EN onlineboard date tabs: lowercase short month name to match Angular (apr not Apr).