Started a flight view

app/Http/Controllers/FlightProfileController.php

@@ -13,7 +13,17 @@ class FlightProfileController extends Controller
     {
         $user = User::whereRaw(DB::raw('LOWER(name) = ?'), [strtolower($username)])->firstOrFail();
 
-        $flights = UserFlight::where('user_id', $user->id)->get();
+        $flights = UserFlight::where('user_id', $user->id)
+            ->with([
+                'departureAirport',
+                'arrivalAirport',
+                'airline',
+                'aircraft',
+                'seatType',
+                'flightReason',
+                'flightClass',
+            ])
+            ->get();
 
         return Inertia::render('FlightProfile', [
             'user' => $user,

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>