Started a flight view

2026-04-06 11:13:35 +10:00
parent 968272754e
commit b53c92de36
5 changed files with 101 additions and 4 deletions
@@ -28,8 +28,8 @@ const submit = () => {
                    <v-col cols="12">
                        <v-text-field
                            v-model="form.name"
-                            label="Name"
-                            autocomplete="name"
+                            label="Username"
+                            autocomplete="username"
                            autofocus
                            :error-messages="form.errors.name"
                        />
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import MainLayout from "@/Layouts/MainLayout.vue";
+import { Head } from '@inertiajs/vue3';
+
+defineOptions({
+    layout: MainLayout
+})
+
+defineProps<{
+    user: {
+        id: number
+        name: string
+        email: string
+    }
+    flights: {
+        id: number
+        departure: string
+        arrival: string
+        flight_number: string
+        date: string
+    }[]
+}>()
+</script>
+
+<template>
+    <Head :title="`${user.name}'s Flights`" />
+
+    <div class="p-6">
+        <h1 class="text-2xl font-bold mb-6">{{ user.name }}'s Flights</h1>
+
+        <table class="w-full border-collapse border border-gray-300">
+            <thead>
+            <tr class="bg-gray-100">
+                <th class="border border-gray-300 px-4 py-2 text-left">Flight</th>
+                <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>
+            </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>
+            </tr>
+            <tr v-if="flights.length === 0">
+                <td colspan="4" class="border border-gray-300 px-4 py-2 text-center text-gray-500">
+                    No flights found.
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<style scoped>
+</style>