Started a flight view

resources/js/Pages/FlightProfile.vue

@@ -6,19 +6,63 @@ defineOptions({
     layout: MainLayout
 })
 
+interface Airport {
+    id: number
+    name: string
+    iata_code: string
+}
+
+interface Airline {
+    id: number
+    name: string
+    iata_code: string
+}
+
+interface Aircraft {
+    id: number
+    model_full_name: string
+    designator: string
+}
+
+interface SeatType {
+    id: number
+    name: string
+}
+
+interface FlightReason {
+    id: number
+    name: string
+}
+
+interface FlightClass {
+    id: number
+    name: string
+}
+
+interface Flight {
+    id: number
+    flight_number: string | null
+    departure_date: string
+    arrival_date: string
+    aircraft_registration: string | null
+    seat_number: string | null
+    note: string | null
+    departure_airport: Airport
+    arrival_airport: Airport
+    airline: Airline | null
+    aircraft: Aircraft | null
+    seat_type: SeatType | null
+    flight_reason: FlightReason | null
+    flight_class: FlightClass | null
+}
+
 defineProps<{
     user: {
         id: number
         name: string
         email: string
     }
-    flights: {
-        id: number
-        departure: string
-        arrival: string
-        flight_number: string
-        date: string
-    }[]
+    flights: Flight[]
 }>()
 </script>
 
@@ -35,17 +79,25 @@ defineProps<{
                 <th class="border border-gray-300 px-4 py-2 text-left">Departure</th>
                 <th class="border border-gray-300 px-4 py-2 text-left">Arrival</th>
                 <th class="border border-gray-300 px-4 py-2 text-left">Date</th>
+                <th class="border border-gray-300 px-4 py-2 text-left">Airline</th>
+                <th class="border border-gray-300 px-4 py-2 text-left">Aircraft</th>
+                <th class="border border-gray-300 px-4 py-2 text-left">Class</th>
+                <th class="border border-gray-300 px-4 py-2 text-left">Seat</th>
             </tr>
             </thead>
             <tbody>
             <tr v-for="flight in flights" :key="flight.id" class="hover:bg-gray-50">
-                <td class="border border-gray-300 px-4 py-2">{{ flight.flight_number }}</td>
-                <td class="border border-gray-300 px-4 py-2">{{ flight.departure }}</td>
-                <td class="border border-gray-300 px-4 py-2">{{ flight.arrival }}</td>
-                <td class="border border-gray-300 px-4 py-2">{{ flight.date }}</td>
+                <td class="border border-gray-300 px-4 py-2">{{ flight.flight_number ?? '—' }}</td>
+                <td class="border border-gray-300 px-4 py-2">{{ flight.departure_airport.iata_code }}</td>
+                <td class="border border-gray-300 px-4 py-2">{{ flight.arrival_airport.iata_code }}</td>
+                <td class="border border-gray-300 px-4 py-2">{{ flight.departure_date }}</td>
+                <td class="border border-gray-300 px-4 py-2">{{ flight.airline?.name ?? '—' }}</td>
+                <td class="border border-gray-300 px-4 py-2">{{ flight.aircraft?.designator ?? '—' }}</td>
+                <td class="border border-gray-300 px-4 py-2">{{ flight.flight_class?.name ?? '—' }}</td>
+                <td class="border border-gray-300 px-4 py-2">{{ flight.seat_number ?? '—' }}</td>
             </tr>
             <tr v-if="flights.length === 0">
-                <td colspan="4" class="border border-gray-300 px-4 py-2 text-center text-gray-500">
+                <td colspan="8" class="border border-gray-300 px-4 py-2 text-center text-gray-500">
                     No flights found.
                 </td>
             </tr>
@@ -53,6 +105,3 @@ defineProps<{
         </table>
     </div>
 </template>
-
-<style scoped>
-</style>