test.

client/src/components/Dashboard/Flights/Flights.tsx

@@ -4,6 +4,7 @@ import { IAirlineDashboardData } from '../../../services/Dashboard/AirlineDashbo
 import FlightCard from '../FlightCard/FlightCard';
 import FlightCreationForm from '../../FlightCreationForm/FlightCreationForm';
 import './Flights.scss';
+import { Link } from 'react-router-dom';
 
 function Flights() {
   const data = useLoaderData() as ICustomerDashboardData | IAirlineDashboardData;
@@ -43,8 +44,37 @@ function Flights() {
   } else {
     return (
       <>
-        <div>
-          <FlightCreationForm></FlightCreationForm>
+        <div className='flights'>
+          <div className='flex-row'>
+            <span className='flights-title'>Upcoming Flights</span>
+            <Link to="/register-flight">
+              <button type='button' className='add-flight'>Add flight</button>
+            </Link>
+            <Link to="">
+              <button type='button' className='view-more'>View more</button>
+            </Link>
+          </div>
+          <div className='flight-list'>
+            {data.upcomingFlights.length > 0
+              ? data.upcomingFlights.map((flight) => {
+                  return <FlightCard key={flight.id} flight={flight}></FlightCard>
+                })
+              : <div>No Upcoming Flights</div>}
+          </div>
+        </div>
+  
+        <div className='flights'>
+          <div className='flex-row'>
+            <span className='flights-title'>Flights History</span>
+            <button type='submit' className='view-more'>View more</button>
+          </div>
+          <div className='flight-list'>
+            {data.upcomingFlights.length > 0
+              ? data.flightsHistory.map((flight) => {
+                  return <FlightCard key={flight.id} flight={flight}></FlightCard>
+                })
+              : <div>No Flights History</div>}
+          </div>
         </div>
       </>
     );

client/src/main.tsx

@@ -20,6 +20,7 @@ import { GetFlightData } from './services/Flight/Flight.ts';
 import { GetFlightList } from './services/FlightList/FlightList.ts';
 import { GetBookingList } from './services/BookingList/BookingList.ts';
 import './index.scss';
+import FlightCreationForm from './components/FlightCreationForm/FlightCreationForm.tsx';
 
 const router = createBrowserRouter([
   {
@@ -76,6 +77,10 @@ const router = createBrowserRouter([
             path: 'booking/list',
             loader: GetBookingList,
             element: <BookingList></BookingList>
+          },
+          {
+            path: 'register-flight',
+            element: <FlightCreationForm></FlightCreationForm>
           }
         ]
       }

client/src/services/Dashboard/AirlineDashboard.ts

+export interface ISeat {
+  id: number;
+  classType: number;
+  seatNumber: string;
+  isAvailable: boolean;
+}
+
+export interface ISeats {
+  $id: string;
+  $values: ISeat[];
+}
+
+export interface IFlight {
+  id: number;
+  origin: string;
+  destination: string;
+  arrivalTime: string;
+  departureTime: string;
+  economyCapacity: number;
+  businessCapacity: number;
+  economyPrice: number;
+  businessPrice: number;
+  seats: ISeats
+}
+
 export interface IAirlineDashboardData {
   type: 'airline'
+  upcomingFlights: IFlight[];
+  flightsHistory: IFlight[];
 }
 
 export async function GetAirlineDashboardData(): Promise<IAirlineDashboardData> {
   return {
-    type: 'airline'
+    type: 'airline',
+    upcomingFlights: [],
+    flightsHistory: []
   };
 }