display actual flight info

client/src/components/Dashboard/FlightCard/FlightCard.tsx

@@ -11,16 +11,17 @@ interface IFlightCard {
 function FlightCard({ flight, extraInfo }: IFlightCard) {
   return (
     <>
-      <div className='flight-card'>
-        <span>{flight.id}</span>
-        {extraInfo && <span>Departure Time: {new Date(flight.departureTime).toLocaleString()}</span>}
-        {extraInfo && <span>Arrival Time: {new Date(flight.arrivalTime).toLocaleString()}</span>}
-        <span className='flight-path'>{airportCode(flight.origin)} - {airportCode(flight.destination)}</span>
-        <span>{flight.origin} - {flight.destination}</span>
-        <Link to={'/flight/' + flight.id}>View Flight</Link>
-      </div>
+
+    <div className='flight-card'>
+      <span>Flight Number: {flight.id}</span>
+      <span>Departure Time: {new Date(flight.departureTime).toLocaleString()}</span>
+      <span>Arrival Time: {new Date(flight.arrivalTime).toLocaleString()}</span>
+      <span className='flight-path'>{flight.origin} - {flight.destination}</span>
+      <Link to={'/Flight/' + flight.id}>View Flight</Link>
+    </div>
     </>
   );
 }
 
 export default FlightCard;
+

client/src/components/Dashboard/Flights/Flights.scss

@@ -22,6 +22,7 @@
   border-radius: 5px;
   background-color: var(--main);
   color: white;
+  margin-left: 25px;
 }
 
 .view-more:hover {

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

@@ -7,7 +7,8 @@ import { Link } from 'react-router-dom';
 
 function Flights() {
   const data = useLoaderData() as ICustomerDashboardData | IAirlineDashboardData;
-
+  console.log(data)
+  console.log("bitch pls")
   if (data.type === 'customer') {
     return (
       <>
@@ -20,8 +21,9 @@ function Flights() {
           </div>
           <div className='flight-list'>
             {data.upcomingFlights.length > 0
-              ? data.upcomingFlights.slice(0,3).map((flight) => {
-                  return <FlightCard key={flight.id} flight={flight}></FlightCard>
+              ? data.upcomingFlights.slice(0,3).map((item) => {
+                  // Only pass the flight data to the FlightCard
+                  return <FlightCard key={item.flight.id} flight={item.flight}></FlightCard>
                 })
               : <div>No Upcoming Flights</div>}
           </div>
@@ -33,23 +35,25 @@ function Flights() {
             <button type='button' className='view-more'>View more</button>
           </div>
           <div className='flight-list'>
-            {data.upcomingFlights.length > 0
-              ? data.flightsHistory.slice(0,3).map((flight) => {
-                  return <FlightCard key={flight.id} flight={flight}></FlightCard>
+            {data.flightsHistory.length > 0
+              ? data.flightsHistory.slice(0,3).map((item) => {
+                  // Only pass the flight data to the FlightCard
+                  return <FlightCard key={item.flight.id} flight={item.flight}></FlightCard>
                 })
               : <div>No Flights History</div>}
           </div>
         </div>
       </>
     );
-  } else {
+  }
+  else {
     return (
       <>
         <div className='flights'>
           <div className='flex-row'>
-            <span className='flights-title'>Upcoming Flights</span>
+            <span className='flights-title'>Flights List</span>
             <Link to="/register-flight">
-              <button type='button' className='add-flight'>Add flight</button>
+              <button type='button' className='view-more'>Add flight</button>
             </Link>
           </div>
           <div className='flight-list'>

client/src/services/Dashboard/AirlineDashboard.ts

@@ -34,12 +34,13 @@ export interface IAirlineDashboardData {
 export async function GetAirlineDashboardData({request}: {request: Request}): Promise<IAirlineDashboardData> {
   try {
     const id = getSearchParam(request.url, 'id');
-    const result = await Api.get(`Flight?airlineId=${id}`, { withCredentials: true });
+    const response = await Api.get(`Flight?airlineId=${id}`, { withCredentials: true });
+    const flights = response.data.$values;
     return {
       type: 'airline',
-      flightList : result.data
+      flightList: flights
     };
   } catch (error) {
     throw error;
   }
-}
+}
\ No newline at end of file

client/src/services/Dashboard/CustomerDashboard.ts

@@ -31,10 +31,10 @@ export interface ICustomerDashboardData {
   flightsHistory: IFlight[];
 }
 
-export async function GetCustomerDashboardData({ request } : { request: Request }): Promise<ICustomerDashboardData> {
+export async function GetCustomerDashboardData(): Promise<ICustomerDashboardData> {
   try {
-    const upcomingFlights = Api.get('', {withCredentials: true});
-    const flightsHistory = Api.get('', {withCredentials: true});
+    const upcomingFlights = Api.get('Booking/upcoming', { withCredentials: true });
+    const flightsHistory = Api.get('Booking/history', { withCredentials: true });
     const [uData, hData] = await Promise.all([upcomingFlights, flightsHistory]);
 
     return {
@@ -46,3 +46,4 @@ export async function GetCustomerDashboardData({ request } : { request: Request
     throw error;
   }
 }
+