Flight.tsx

import { useLoaderData } from 'react-router-dom';
import { IFlight } from '../../services/Dashboard/CustomerDashboard';
import './Flight.scss';

function Flight() {
  const data = useLoaderData() as IFlight;

  return (
    <>
      <div className='flight'>
        <div className='card flight-data-card'>
          <span className='flight-data-title'>Flight Details</span>

          <div className='flight-data-item'>
            <span className='flight-data-label'>ID: </span>
            <span className='flight-data-value'>{data.id}</span>
          </div>

          <div className='flight-data-item'>
            <span className='flight-data-label'>Origin: </span>
            <span className='flight-data-value'>{data.origin}</span>
          </div>

          <div className='flight-data-item'>
            <span className='flight-data-label'>Destination: </span>
            <span className='flight-data-value'>{data.destination}</span>
          </div>

          <div className='flight-data-item'>
            <span className='flight-data-label'>Departure Time: </span>
            <span className='flight-data-value'>{new Date(data.departureTime).toLocaleString()}</span>
          </div>

          <div className='flight-data-item'>
            <span className='flight-data-label'>Arrival Time: </span>
            <span className='flight-data-value'>{new Date(data.arrivalTime).toLocaleString()}</span>
          </div>

          <div className='flight-data-item'>
            <span className='flight-data-label'>Economy Capacity: </span>
            <span className='flight-data-value'>{data.economyCapacity}</span>
          </div>

          <div className='flight-data-item'>
            <span className='flight-data-label'>Business Capacity: </span>
            <span className='flight-data-value'>{data.businessCapacity}</span>
          </div>

          <div className='flight-data-item'>
            <span className='flight-data-label'>Economy Price: </span>
            <span className='flight-data-value'>{data.economyPrice}</span>
          </div>

          <div className='flight-data-item'>
            <span className='flight-data-label'>Business Price: </span>
            <span className='flight-data-value'>{data.businessPrice}</span>
          </div>
        </div>
      </div>
    </>
  );
}

export default Flight;