Started a flight view

app/Http/Controllers/FlightProfileController.php

@@ -17,12 +17,13 @@ class FlightProfileController extends Controller
             ->with([
                 'departureAirport',
                 'arrivalAirport',
-                'airline',
+                'airline.country',
                 'aircraft',
                 'seatType',
                 'flightReason',
                 'flightClass',
             ])
+            ->orderBy('departure_date')
             ->get();
 
         return Inertia::render('FlightProfile', [

app/Models/Airline.php

@@ -4,6 +4,7 @@ namespace App\Models;
 
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
 
 class Airline extends Model
 {
@@ -25,4 +26,9 @@ class Airline extends Model
 
 
     public $timestamps = false;
+
+    public function country(): BelongsTo
+    {
+        return $this->belongsTo(Country::class);
+    }
 }

resources/css/app.css

@@ -10,6 +10,8 @@
     --accent-soft: #0ea5e9;  /* deeper blue */
     --accent-glow: rgba(56, 189, 248, 0.15);
     --border: #1f2937;
+    --table-heading: #ffc107;
+    --table-border: rgba(255,193,7,0.2)
 
 }
 

resources/js/Components/FlightsGoneBy/AirlineLogo.vue

@@ -10,15 +10,57 @@ const props = defineProps<{
 
 const page = usePage<SharedProps>().props;
 const logoUrl = computed(() => `url('${page.logo_api_url}/airlines/logos/tail/id/${props.airline?.id}')`);
+const logoStyle = computed(() => ({
+    width: size.value,
+    height: size.value,
+    backgroundImage: logoUrl.value,
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    display: 'inline-block',
+}));
 const size = computed(() => props.size ? props.size + 'px' : '30px');
 </script>
 
 <template>
-<span></span>
+    <v-tooltip location="top" :open-delay="200">
+        <template #activator="{ props: tooltipProps }">
+            <span class="airline-logo" v-bind="tooltipProps"></span>
+        </template>
+
+        <template #default>
+            <div v-if="airline" class="airline-tooltip glass glass-border">
+                <div class="tooltip-header">
+                    <span class="airline-logo-tooltip" :style="logoStyle"></span>
+                    <span class="airline-name">{{ airline.name }}</span>
+                    <span v-if="airline.IATA_code || airline.ICAO_code" class="codes">
+                        <span v-if="airline.IATA_code" class="code-badge">{{ airline.IATA_code }}</span>
+                        <span v-if="airline.ICAO_code" class="code-badge">{{ airline.ICAO_code }}</span>
+                    </span>
+                </div>
+                <div class="tooltip-divider"></div>
+                <div class="tooltip-meta">
+                    <span
+                        v-if="airline.country"
+                        :class="`fi fi-${airline.country.code.toLowerCase()}`"
+                        class="country-flag"
+                    ></span>
+                    <span v-if="airline.country" class="country-name">{{ airline.country.name }}</span>
+                </div>
+            </div>
+            <span v-else class="airline-tooltip muted">Unknown airline</span>
+        </template>
+    </v-tooltip>
 </template>
 
 <style scoped>
-span{
+
+:deep(.v-overlay__content) {
+    background: transparent !important;
+    box-shadow: none !important;
+    filter: none !important;
+}
+
+span.airline-logo {
     width: v-bind(size);
     height: v-bind(size);
     background-image: v-bind(logoUrl);
@@ -26,4 +68,71 @@ span{
     background-repeat: no-repeat;
     display: inline-block;
 }
+
+.airline-tooltip {
+    background: var(--surface);
+    border: 1px solid var(--table-border);
+    border-radius: 8px;
+    padding: 10px 14px;
+    min-width: 180px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    color: var(--text);
+    font-size: 0.85rem;
+}
+
+.tooltip-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.airline-name {
+    font-weight: 600;
+    color: var(--muted);
+    letter-spacing: 0.03em;
+}
+
+.tooltip-divider {
+    height: 1px;
+    background: var(--table-border);
+}
+
+.tooltip-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--muted);
+}
+
+.country-flag {
+    font-size: 1rem;
+}
+
+.country-name {
+    flex: 1;
+    font-size: 0.8rem;
+}
+
+.codes {
+    display: flex;
+    gap: 4px;
+    margin-left: auto;
+}
+
+.code-badge {
+    background: var(--accent-glow);
+    border: 1px solid var(--accent-soft);
+    color: var(--accent);
+    border-radius: 4px;
+    padding: 1px 6px;
+    font-size: 0.72rem;
+    font-family: monospace;
+    letter-spacing: 0.05em;
+}
+
+.muted {
+    color: var(--muted);
+}
 </style>

resources/js/Components/FlightsGoneBy/FlightListTable.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+
+import FlightClassBadge from "@/Components/FlightsGoneBy/FlightClassBadge.vue";
+import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
+import {Flight} from "@/Types/types";
+
+const props = defineProps<{
+    flights: Flight[]
+}>()
+
+const headers = [
+    { title: 'FLIGHT', key: 'flight_number', sortable: true },
+    { title: 'FROM', key: 'departure_airport', sortable: true },
+    { title: 'TO', key: 'arrival_airport', sortable: true },
+    { title: 'DATE', key: 'departure_date', sortable: true },
+    { title: 'AIRLINE', key: 'airline', sortable: true },
+    { title: 'AIRCRAFT', key: 'aircraft.designator', sortable: true },
+    { title: 'CLASS', key: 'flight_class', sortable: true },
+    { title: 'SEAT', key: 'seat_number', sortable: false },
+]
+
+const CLASS_ORDER: Record<string, number> = {
+    'Unspecified': 0,
+    'Economy': 1,
+    'Premium Economy': 2,
+    'Business': 3,
+    'First': 4,
+    'Private': 5
+}
+
+const customKeySort = {
+    flight_class: (a: Flight['flight_class'], b: Flight['flight_class']) => {
+        return (CLASS_ORDER[a?.name ?? ''] ?? -1) - (CLASS_ORDER[b?.name ?? ''] ?? -1)
+    }
+}
+</script>
+
+<template>
+    <v-data-table
+        :headers="headers"
+        :custom-key-sort="customKeySort"
+        :items="flights"
+        :items-per-page="25"
+        class="departures-table"
+        hover
+    >
+        <!-- Flight number + logo -->
+        <template #item.flight_number="{ item }">
+            <div class="flight-cell">
+                <AirlineLogo size="32" :airline="item.airline" class="airline-logo-img" />
+                <span class="flight-number">{{ item.flight_number}}</span>
+            </div>
+        </template>
+
+        <!-- Departure -->
+        <template #item.departure_airport="{ item }">
+            <span class="iata">{{ item.departure_airport.iata_code }}</span><br/>
+            <span class="city-name">{{ item.departure_airport.municipality }}</span>
+        </template>
+
+        <!-- Arrival -->
+        <template #item.arrival_airport="{ item }">
+            <span class="iata">{{ item.arrival_airport.iata_code }}</span><br/>
+            <span class="city-name">{{ item.arrival_airport.municipality }}</span>
+        </template>
+
+        <!-- Date -->
+        <template #item.departure_date="{ item }">
+            <span class="date-cell">{{ item.departure_date}}</span>
+        </template>
+
+        <!-- Airline -->
+        <template #item.airline="{ item }">
+            <span class="airline-name">{{ item.airline?.name }}</span>
+        </template>
+
+        <!-- Aircraft -->
+        <template #item.aircraft="{ item }">
+            <span class="mono-tag">{{ item.aircraft?.designator }}</span>
+        </template>
+
+        <!-- Class -->
+        <template #item.flight_class="{ item }">
+            <FlightClassBadge :flight-class="item.flight_class" />
+        </template>
+
+        <!-- Seat -->
+        <template #item.seat_number="{ item }">
+            <span class="seat-cell">{{ item.seat_number}}</span>
+        </template>
+
+        <!-- Empty state -->
+        <template #no-data>
+            <div class="no-data">
+                <span>NO FLIGHTS ON RECORD</span>
+            </div>
+        </template>
+    </v-data-table>
+</template>
+
+<style scoped>
+/* ── Vuetify table overrides ── */
+.departures-table {
+    background: transparent !important;
+    color: #c8cdd8 !important;
+    font-family: 'Barlow', sans-serif !important;
+}
+
+/* Header row */
+:deep(.v-data-table-header__content) {
+    font-family: 'Share Tech Mono', monospace !important;
+    font-size: 0.68rem !important;
+    letter-spacing: 0.14em !important;
+    color: #ffc107 !important;
+    font-weight: 400 !important;
+}
+
+:deep(.v-data-table__th) {
+    background: transparent !important;
+    border-bottom: 1px solid rgba(255,193,7,0.15) !important;
+    padding: 0.75rem 1rem !important;
+}
+
+/* Body rows — alternating, no borders */
+:deep(.v-data-table__tr:nth-child(odd)) {
+    background: rgba(255,255,255,0.025) !important;
+}
+
+:deep(.v-data-table__tr:nth-child(even)) {
+    background: transparent !important;
+}
+
+:deep(.v-data-table__tr:hover td) {
+    background: rgba(255,193,7,0.05) !important;
+}
+
+:deep(.v-data-table__td) {
+    border: none !important;
+    padding: 0.7rem 1rem !important;
+    font-size: 0.88rem !important;
+    color: #c8cdd8 !important;
+}
+
+/* Footer / pagination */
+:deep(.v-data-table-footer) {
+    background: transparent !important;
+    border-top: 1px solid rgba(255,255,255,0.06) !important;
+    color: #556 !important;
+    font-family: 'Share Tech Mono', monospace !important;
+    font-size: 0.75rem !important;
+}
+
+:deep(.v-data-table-footer .v-btn) {
+    color: #778 !important;
+}
+
+:deep(.v-data-table-footer .v-btn--active) {
+    color: #ffc107 !important;
+}
+
+/* Sort icon colour */
+:deep(.v-data-table-header__sort-icon) {
+    color: #ffc107 !important;
+    opacity: 0.5;
+}
+
+/* ── Cell styles ── */
+.flight-cell {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer
+}
+
+.airline-logo-img {
+    opacity: 0.85;
+    flex-shrink: 0;
+}
+
+.flight-number {
+    font-family: 'Share Tech Mono', monospace;
+    font-size: 0.9rem;
+    color: #e8eaf0;
+    letter-spacing: 0.06em;
+}
+
+.iata {
+    display: inline-block;
+    font-family: 'Share Tech Mono', monospace;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #e8eaf0;
+    letter-spacing: 0.08em;
+    margin-right: 0.35rem;
+}
+
+.city-name {
+    font-size: 0.75rem;
+    color: #556;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.date-cell {
+    font-family: 'Share Tech Mono', monospace;
+    font-size: 0.82rem;
+    color: #9aa;
+    letter-spacing: 0.04em;
+}
+
+.airline-name {
+    font-size: 0.85rem;
+    color: #b0b8c8;
+}
+
+.mono-tag {
+    font-family: 'Share Tech Mono', monospace;
+    font-size: 0.8rem;
+    color: #778899;
+    letter-spacing: 0.06em;
+}
+
+.seat-cell {
+    font-family: 'Share Tech Mono', monospace;
+    font-size: 0.85rem;
+    color: #c8cdd8;
+}
+
+/* ── Empty state ── */
+.no-data {
+    padding: 3rem;
+    text-align: center;
+    font-family: 'Share Tech Mono', monospace;
+    font-size: 0.8rem;
+    letter-spacing: 0.2em;
+    color: #445;
+}
+</style>

resources/js/Layouts/MainLayout.vue

@@ -4,8 +4,9 @@ import MainFooter from "@/Components/FlightsGoneBy/MainFooter.vue";
 import Radar from "@/Components/FlightsGoneBy/Radar.vue";
 import { usePage, router } from "@inertiajs/vue3";
 import { ref } from "vue";
+import {SharedProps} from "@/Types/types";
 
-const page = usePage();
+const page = usePage<SharedProps>().props;
 const transitionKey = ref(0);
 
 router.on('success', () => {
@@ -45,7 +46,6 @@ footer {
 
 main {
     flex: 1 1 auto;
-    padding: 1rem;
     background: transparent;
     display: flex;
     flex-direction: column;

resources/js/Pages/Dashboard.vue

@@ -34,7 +34,7 @@ const name = computed(() => page?.props?.auth?.user?.name || 'there');
                     </v-btn>
                 </v-col>
                 <v-col cols="12" md="6">
-                    <v-btn size="large" block href="#" prepend-icon="mdi-account-outline">
+                    <v-btn size="large" block :href="`/u/${name}`" prepend-icon="mdi-account-outline">
                         View Profile
                     </v-btn>
                 </v-col>

resources/js/Pages/FlightProfile.vue

@@ -4,6 +4,7 @@ import { Head } from '@inertiajs/vue3';
 import { Flight } from "@/Types/types";
 import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
 import FlightClassBadge from "@/Components/FlightsGoneBy/FlightClassBadge.vue";
+import FlightListTable from "@/Components/FlightsGoneBy/FlightListTable.vue";
 
 defineOptions({
     layout: MainLayout
@@ -18,16 +19,6 @@ defineProps<{
     flights: Flight[]
 }>()
 
-const headers = [
-    { title: 'FLIGHT', key: 'flight_number', sortable: true },
-    { title: 'FROM', key: 'departure_airport', sortable: true },
-    { title: 'TO', key: 'arrival_airport', sortable: true },
-    { title: 'DATE', key: 'departure_date', sortable: true },
-    { title: 'AIRLINE', key: 'airline', sortable: true },
-    { title: 'AIRCRAFT', key: 'aircraft.designator', sortable: true },
-    { title: 'CLASS', key: 'flight_class', sortable: true },
-    { title: 'SEAT', key: 'seat_number', sortable: false },
-]
 </script>
 
 <template>
@@ -45,65 +36,7 @@ const headers = [
             </div>
         </div>
 
-        <v-data-table
+        <FlightListTable :flights="flights" />
-            :headers="headers"
-            :items="flights"
-            :items-per-page="25"
-            class="departures-table"
-            hover
-        >
-            <!-- Flight number + logo -->
-            <template #item.flight_number="{ item }">
-                <div class="flight-cell">
-                    <AirlineLogo size="32" :airline="item.airline" class="airline-logo-img" />
-                    <span class="flight-number">{{ item.flight_number ?? '—' }}</span>
-                </div>
-            </template>
-
-            <!-- Departure -->
-            <template #item.departure_airport="{ item }">
-                <span class="iata">{{ item.departure_airport.iata_code }}</span><br/>
-                <span class="city-name">{{ item.departure_airport.municipality ?? '' }}</span>
-            </template>
-
-            <!-- Arrival -->
-            <template #item.arrival_airport="{ item }">
-                <span class="iata">{{ item.arrival_airport.iata_code }}</span><br/>
-                <span class="city-name">{{ item.arrival_airport.municipality ?? '' }}</span>
-            </template>
-
-            <!-- Date -->
-            <template #item.departure_date="{ item }">
-                <span class="date-cell">{{ item.departure_date }}</span>
-            </template>
-
-            <!-- Airline -->
-            <template #item.airline="{ item }">
-                <span class="airline-name">{{ item.airline?.name ?? '—' }}</span>
-            </template>
-
-            <!-- Aircraft -->
-            <template #item.aircraft="{ item }">
-                <span class="mono-tag">{{ item.aircraft?.designator ?? '—' }}</span>
-            </template>
-
-            <!-- Class -->
-            <template #item.flight_class="{ item }">
-                <FlightClassBadge :flight-class="item.flight_class" />
-            </template>
-
-            <!-- Seat -->
-            <template #item.seat_number="{ item }">
-                <span class="seat-cell">{{ item.seat_number ?? '—' }}</span>
-            </template>
-
-            <!-- Empty state -->
-            <template #no-data>
-                <div class="no-data">
-                    <span>NO FLIGHTS ON RECORD</span>
-                </div>
-            </template>
-        </v-data-table>
     </div>
 </template>
 
@@ -167,139 +100,5 @@ const headers = [
     color: #556;
 }
 
-/* ── Vuetify table overrides ── */
-.departures-table {
-    background: transparent !important;
-    color: #c8cdd8 !important;
-    font-family: 'Barlow', sans-serif !important;
-}
 
-/* Header row */
-:deep(.v-data-table-header__content) {
-    font-family: 'Share Tech Mono', monospace !important;
-    font-size: 0.68rem !important;
-    letter-spacing: 0.14em !important;
-    color: #ffc107 !important;
-    font-weight: 400 !important;
-}
-
-:deep(.v-data-table__th) {
-    background: transparent !important;
-    border-bottom: 1px solid rgba(255,193,7,0.15) !important;
-    padding: 0.75rem 1rem !important;
-}
-
-/* Body rows — alternating, no borders */
-:deep(.v-data-table__tr:nth-child(odd)) {
-    background: rgba(255,255,255,0.025) !important;
-}
-
-:deep(.v-data-table__tr:nth-child(even)) {
-    background: transparent !important;
-}
-
-:deep(.v-data-table__tr:hover td) {
-    background: rgba(255,193,7,0.05) !important;
-}
-
-:deep(.v-data-table__td) {
-    border: none !important;
-    padding: 0.7rem 1rem !important;
-    font-size: 0.88rem !important;
-    color: #c8cdd8 !important;
-}
-
-/* Footer / pagination */
-:deep(.v-data-table-footer) {
-    background: transparent !important;
-    border-top: 1px solid rgba(255,255,255,0.06) !important;
-    color: #556 !important;
-    font-family: 'Share Tech Mono', monospace !important;
-    font-size: 0.75rem !important;
-}
-
-:deep(.v-data-table-footer .v-btn) {
-    color: #778 !important;
-}
-
-:deep(.v-data-table-footer .v-btn--active) {
-    color: #ffc107 !important;
-}
-
-/* Sort icon colour */
-:deep(.v-data-table-header__sort-icon) {
-    color: #ffc107 !important;
-    opacity: 0.5;
-}
-
-/* ── Cell styles ── */
-.flight-cell {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.airline-logo-img {
-    opacity: 0.85;
-    flex-shrink: 0;
-}
-
-.flight-number {
-    font-family: 'Share Tech Mono', monospace;
-    font-size: 0.9rem;
-    color: #e8eaf0;
-    letter-spacing: 0.06em;
-}
-
-.iata {
-    display: inline-block;
-    font-family: 'Share Tech Mono', monospace;
-    font-size: 1rem;
-    font-weight: 600;
-    color: #e8eaf0;
-    letter-spacing: 0.08em;
-    margin-right: 0.35rem;
-}
-
-.city-name {
-    font-size: 0.75rem;
-    color: #556;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.date-cell {
-    font-family: 'Share Tech Mono', monospace;
-    font-size: 0.82rem;
-    color: #9aa;
-    letter-spacing: 0.04em;
-}
-
-.airline-name {
-    font-size: 0.85rem;
-    color: #b0b8c8;
-}
-
-.mono-tag {
-    font-family: 'Share Tech Mono', monospace;
-    font-size: 0.8rem;
-    color: #778899;
-    letter-spacing: 0.06em;
-}
-
-.seat-cell {
-    font-family: 'Share Tech Mono', monospace;
-    font-size: 0.85rem;
-    color: #c8cdd8;
-}
-
-/* ── Empty state ── */
-.no-data {
-    padding: 3rem;
-    text-align: center;
-    font-family: 'Share Tech Mono', monospace;
-    font-size: 0.8rem;
-    letter-spacing: 0.2em;
-    color: #445;
-}
 </style>

resources/js/Types/types.d.ts

@@ -40,6 +40,23 @@ export interface Airport {
     timezone: string
 }
 
+export type Continent = {
+    id: number
+    name: string
+    code: string
+    internal_name:string
+}
+
+export type Country = {
+    id: number
+    code: string
+    name: string
+    created_at: string | null
+    updated_at: string | null
+    continent_id: number
+    continent?: Continent
+}
+
 export interface Airline {
     id: number
     IATA_code: string | null
@@ -49,8 +66,11 @@ export interface Airline {
     active: boolean
     logo: string | null
     country_id: number
+    country?: Country
 }
 
+
+
 export interface Aircraft {
     id: number
     designator: string