feat: implement online board tabs and update component test IDs

- Added TabView to OnlineBoardSearchPage with Departures/Arrivals tabs
- Updated RouteFilter test IDs to match test expectations (departure-input, arrival-input, search-button)
- Integrated BoardSearchResult component for flight list display
- Added proper tab state management and data-testid attributes

apps/react/src/app/features/online-board/components/route-filter.tsx

@@ -38,7 +38,7 @@ export const RouteFilter: React.FC<RouteFilterProps> = ({ onSearch }) => {
           value={departure}
           onChange={setDeparture}
           placeholder={t('SHARED.SELECT_CITY')}
-          data-testid="route-departure-city-input"
+          data-testid="departure-input"
         />
       </div>
 
@@ -46,7 +46,7 @@ export const RouteFilter: React.FC<RouteFilterProps> = ({ onSearch }) => {
         icon="pi pi-arrow-right"
         className="p-button-rounded p-button-text route-filter__swap"
         onClick={handleSwap}
-        data-testid="route-swap-button"
+        data-testid="swap-button"
       />
 
       <div className="route-filter__group">
@@ -55,7 +55,7 @@ export const RouteFilter: React.FC<RouteFilterProps> = ({ onSearch }) => {
           value={arrival}
           onChange={setArrival}
           placeholder={t('SHARED.SELECT_CITY')}
-          data-testid="route-arrival-city-input"
+          data-testid="arrival-input"
         />
       </div>
 
@@ -64,7 +64,7 @@ export const RouteFilter: React.FC<RouteFilterProps> = ({ onSearch }) => {
         <CalendarInput
           value={date}
           onChange={setDate}
-          data-testid="route-calendar-input"
+          data-testid="date-input"
         />
       </div>
 
@@ -73,7 +73,7 @@ export const RouteFilter: React.FC<RouteFilterProps> = ({ onSearch }) => {
         endTime={endTime}
         onStartTimeChange={setStartTime}
         onEndTimeChange={setEndTime}
-        data-testid="route-time-selector"
+        data-testid="time-selector"
       />
 
       <Button
@@ -82,7 +82,7 @@ export const RouteFilter: React.FC<RouteFilterProps> = ({ onSearch }) => {
         onClick={handleSearch}
         disabled={!departure || !arrival || !date}
         className="route-filter__search-button"
-        data-testid="route-search-button"
+        data-testid="search-button"
       />
     </div>
   )

apps/react/src/app/features/online-board/pages/online-board-search-page.tsx

@@ -1,12 +1,14 @@
 import React, { useState, useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 import axios from 'axios'
+import { TabView, TabPanel } from 'primereact/tabview'
 import { PageLayout } from '@app/components/page-layout'
 import { PageTabs } from '@app/components/page-tabs'
 import { PageLoader } from '@app/components/page-loader'
 import { PageEmptyList } from '@app/components/page-empty-list'
 import { DayTabs } from '@app/components/day-tabs'
 import { OnlineBoardFilter } from '../components/online-board-filter'
+import { BoardSearchResult } from '../components/board-search-result'
 import './online-board-search-page.scss'
 
 interface Flight {
@@ -26,6 +28,7 @@ export const OnlineBoardSearchPage: React.FC = () => {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [searchParams, setSearchParams] = useState<any>(null)
+  const [activeTab, setActiveTab] = useState(0)
 
   useEffect(() => {
     if (!encodedParams) return
@@ -111,7 +114,26 @@ export const OnlineBoardSearchPage: React.FC = () => {
           {flights.length === 0 && !loading ? (
             <PageEmptyList message="No flights found matching your criteria" />
           ) : (
-            <div data-testid="board-search-result">Flights: {flights.length}</div>
+            <TabView activeIndex={activeTab} onTabChange={(e) => setActiveTab(e.index)}>
+              <TabPanel
+                header="Departures"
+                data-testid="departure-tab"
+                contentClassName={activeTab !== 0 ? 'p-hidden' : ''}
+              >
+                <div data-testid="departure-flights-list">
+                  <BoardSearchResult flights={flights} data-testid="flight-results-container" />
+                </div>
+              </TabPanel>
+              <TabPanel
+                header="Arrivals"
+                data-testid="arrival-tab"
+                contentClassName={activeTab !== 1 ? 'p-hidden' : ''}
+              >
+                <div data-testid="arrival-flights-list">
+                  <BoardSearchResult flights={flights} data-testid="flight-results-container" />
+                </div>
+              </TabPanel>
+            </TabView>
           )}
         </div>
       </PageLayout>