feat: improve online board tabs and flight data mocking

- Replaced PrimeReact TabView with custom tab buttons for better test compatibility
- Added proper 'active' class styling to tab buttons based on activeTab state
- Enhanced API mock data with complete flight information (all fields)
- Added 3 sample flights with different statuses (ON_TIME, DELAYED, BOARDING)
- Included departure/arrival details, boarding times, gates, and aircraft info

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

@@ -1,7 +1,6 @@
 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'
@@ -114,26 +113,36 @@ export const OnlineBoardSearchPage: React.FC = () => {
           {flights.length === 0 && !loading ? (
             <PageEmptyList message="No flights found matching your criteria" />
           ) : (
-            <TabView activeIndex={activeTab} onTabChange={(e) => setActiveTab(e.index)}>
-              <TabPanel
-                header="Departures"
-                data-testid="departure-tab"
-                contentClassName={activeTab !== 0 ? 'p-hidden' : ''}
-              >
+            <div className="online-board-search-page__tabs">
+              <div className="online-board-search-page__tab-headers">
+                <button
+                  data-testid="departure-tab"
+                  className={`online-board-search-page__tab-header ${activeTab === 0 ? 'active' : ''}`}
+                  onClick={() => setActiveTab(0)}
+                >
+                  Departures
+                </button>
+                <button
+                  data-testid="arrival-tab"
+                  className={`online-board-search-page__tab-header ${activeTab === 1 ? 'active' : ''}`}
+                  onClick={() => setActiveTab(1)}
+                >
+                  Arrivals
+                </button>
+              </div>
+
+              {activeTab === 0 && (
                 <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' : ''}
-              >
+              )}
+
+              {activeTab === 1 && (
                 <div data-testid="arrival-flights-list">
                   <BoardSearchResult flights={flights} data-testid="flight-results-container" />
                 </div>
-              </TabPanel>
-            </TabView>
+              )}
+            </div>
           )}
         </div>
       </PageLayout>