Updated Map View

app/Http/Controllers/Auth/AuthenticatedSessionController.php

@@ -33,7 +33,7 @@ class AuthenticatedSessionController extends Controller
 
         $request->session()->regenerate();
 
-        return redirect()->intended(route('dashboard', absolute: false));
+        return redirect()->intended(route('home', absolute: false));
     }
 
     /**

app/Http/Controllers/FlightProfileController.php

@@ -10,6 +10,25 @@ use Inertia\Inertia;
 
 class FlightProfileController extends Controller
 {
+    public function index(){
+        if (auth()->check()) {
+            $user = auth()->user();
+            $defaultPage = $user->resolved_settings['default_login_page'];
+
+            $route = match ($defaultPage) {
+                'feed_first' => $user->following()->count() > 0 ? 'feed' : 'profile.view',
+                'feed' => 'feed',
+                'profile' => 'profile.view',
+                'dashboard' => 'dashboard',
+            };
+
+            $args = $route == 'profile.view' ? $user->name : null;
+
+            return redirect()->route($route, $args);
+        }
+        return redirect()->route('login');
+    }
+
     public static function getUserFlightApiURL(User $user){
         return '/data/user/'.$user->name.'/flights';
     }
@@ -43,7 +62,25 @@ class FlightProfileController extends Controller
 
     public function view(User $user)
     {
-        return $this->departureBoard($user);
+        $loggedInUser = auth()->user();
+
+        $isPrivate = $user->resolved_settings['private_profile'];
+
+        if ($isPrivate && $user->id !== $loggedInUser?->id) {
+            if (!$loggedInUser || !$loggedInUser->isFollowing($user)) {
+                abort(404);
+            }
+        }
+
+        $defaultView = $loggedInUser ? $loggedInUser->resolved_settings['default_profile_view'] : 'map';
+
+        return match($defaultView) {
+            'boarding-passes' => $this->boardingPasses($user),
+            'map' => $this->map($user),
+            'departure-board' => $this->departureBoard($user),
+            'achievements' => redirect()->route('profile.achievements', $user->name),
+        };
+
     }
 
     public function flight(User $user, UserFlight $userFlight)

app/Settings/SettingsRegistry.php

@@ -44,14 +44,14 @@ class SettingsRegistry
             [
                 'key'     => 'default_login_page',
                 'type'    => 'select',
-                'label'   => 'Default Page After Login',
+                'label'   => 'Default Page',
                 'category' => 'FlightsGoneBy Settings',
                 'default' => 'feed_first',
                 'options' => [
-                    ['value' => 'feed_first', 'label' => 'Feed if Following People, Profile if Not'],
+                    ['value' => 'feed_first', 'label' => 'My Feed if Following People, My Profile if Not'],
-                    ['value' => 'profile', 'label' => 'Your Profile'],
+                    ['value' => 'profile', 'label' => 'My Profile'],
-                    ['value' => 'feed', 'label' => 'Your Feed'],
+                    ['value' => 'feed', 'label' => 'My Feed'],
-                    ['value' => 'dashboard', 'label' => 'Your Dashboard'],
+                    ['value' => 'dashboard', 'label' => 'My Dashboard'],
                 ],
             ],
             [

package-lock.json

@@ -19,6 +19,7 @@
                 "@inertiajs/vue3": "^2.0.0",
                 "@tailwindcss/forms": "^0.5.3",
                 "@tailwindcss/vite": "^4.0.0",
+                "@types/geojson": "^7946.0.16",
                 "@types/leaflet": "^1.9.21",
                 "@types/node": "^25.5.0",
                 "@vitejs/plugin-vue": "^6.0.0",

package.json

@@ -11,6 +11,7 @@
         "@inertiajs/vue3": "^2.0.0",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/vite": "^4.0.0",
+        "@types/geojson": "^7946.0.16",
         "@types/leaflet": "^1.9.21",
         "@types/node": "^25.5.0",
         "@vitejs/plugin-vue": "^6.0.0",

resources/js/Components/FlightsGoneBy/AircraftToolTip.vue

@@ -4,6 +4,11 @@ import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
 import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
 import WakeTurbulence from "@/Components/FlightsGoneBy/WakeTurbulence.vue";
 import LiveryImage from "@/Components/FlightsGoneBy/LiveryImage.vue";
+import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
+import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
+import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
+import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
+import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
 
 defineProps<{
     aircraft: Aircraft
@@ -26,99 +31,36 @@ function formatEngineType(type: string): string {
             </div>
         </template>
 
-        <div class="tooltip-header">
+        <ToolTipHeader>
-            <span class="designator">{{ aircraft.manufacturer_code }} {{ aircraft.model_full_name }}</span>
+            {{ aircraft.manufacturer_code }} {{ aircraft.model_full_name }}
+        </ToolTipHeader>
 
-        </div>
+        <ToolTipName>
-
-        <div class="tooltip-name">
             <InlineBadge variant="generic">
                 {{aircraft.designator }}
             </InlineBadge>
             <InlineBadge variant="generic">
                 <WakeTurbulence :value="aircraft.wtc" />
             </InlineBadge>
-        </div>
+        </ToolTipName>
 
-        <div class="tooltip-divider" />
+        <ToolTipDivider/>
 
-        <div class="tooltip-rows">
+        <ToolTipRows>
-            <div class="tooltip-row">
+            <ToolTipRow label="Engines" :value="aircraft.engine_count + 'x ' + formatEngineType(aircraft.engine_type)" />
-                <span class="tooltip-label">Engines</span>
+        </ToolTipRows>
-                <span class="tooltip-value">{{ aircraft.engine_count }}x {{ formatEngineType(aircraft.engine_type) }}</span>
-            </div>
-        </div>
 
-        <div class="tooltip-divider" v-if="flight?.livery_url" />
+        <ToolTipDivider v-if="flight?.livery_url" />
-        <div class="tooltip-rows" v-if="flight?.livery_url">
+        <ToolTipRows v-if="flight?.livery_url">
             <LiveryImage :flight="flight" />
-        </div>
+        </ToolTipRows>
-        <div class="tooltip-divider" v-if="flight?.aircraft_registration" />
+        <ToolTipDivider v-if="flight?.aircraft_registration" />
-        <div class="tooltip-rows" v-if="flight?.aircraft_registration">
+        <ToolTipRows v-if="flight?.aircraft_registration">
-            <div class="tooltip-row">
+            <ToolTipRow label="Registration" :value="flight.aircraft_registration" />
-                <span class="tooltip-label">Registration</span>
+        </ToolTipRows>
-                <span class="tooltip-value">{{ flight.aircraft_registration}}</span>
-            </div>
-        </div>
     </GlassTooltip>
 </template>
 
 <style scoped>
-.tooltip-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.75rem;
-}
 
-.designator {
-    color: #e8eaf0;
-    letter-spacing: 0.06em;
-    line-height: 1;
-}
-
-.badges {
-    display: flex;
-    gap: 0.3rem;
-}
-
-.tooltip-name {
-    display:flex;
-    gap: 4px;
-    margin-top: 0.2rem;
-    line-height: 1.3;
-}
-
-
-.tooltip-divider {
-    height: 1px;
-    background: var(--table-border, rgba(255,255,255,0.08));
-}
-
-.tooltip-rows {
-    display: flex;
-    flex-direction: column;
-    gap: 0.3rem;
-}
-
-.tooltip-row {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 1rem;
-}
-
-.tooltip-label {
-    font-family: 'Share Tech Mono', monospace;
-    font-size: 0.6rem;
-    letter-spacing: 0.15em;
-    color: var(--muted, #445566);
-    flex-shrink: 0;
-}
-
-.tooltip-value {
-    font-size: 0.78rem;
-    color: var(--text, #c8cdd8);
-    text-align: right;
-}
 </style>

resources/js/Components/FlightsGoneBy/AirlineLogo.vue

@@ -5,6 +5,11 @@ import {usePage} from "@inertiajs/vue3";
 import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
 import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
 import AllianceLogo from "@/Components/FlightsGoneBy/AllianceLogo.vue";
+import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
+import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
+import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
+import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
+import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
 
 const page = usePage<SharedProps>().props;
 
@@ -33,26 +38,21 @@ const size = computed(() => props.size ? props.size + 'px' : '30px');
         </template>
 
         <div class="airline-tooltip-content">
-            <div class="tooltip-header">
+            <ToolTipHeader>
                 <div class="logo-title">
                     <span class="airline-logo-tooltip" :style="logoStyle"></span>
                     <span class="airline-name">{{ airline.name }}</span>
                 </div>
-                <div v-if="airline.iata_code || airline.icao_code" class="codes">
+            </ToolTipHeader>
+            <ToolTipName v-if="airline.iata_code || airline.icao_code">
                     <InlineBadge v-if="airline.iata_code" variant="generic">{{ airline.iata_code }}</InlineBadge>
                     <InlineBadge v-if="airline.icao_code" variant="generic">{{ airline.icao_code }}</InlineBadge>
                     <AllianceLogo v-if="airline?.alliance" :alliance="airline?.alliance" size="24" />
-                </div>
+            </ToolTipName>
-            </div>
+           <ToolTipDivider />
-            <div class="tooltip-divider"></div>
+            <ToolTipRows v-if="airline.country">
-            <div class="tooltip-meta">
+                <ToolTipRow label="Country" :value="airline.country.name" :countryCode="airline.country.code" />
-                <span
+            </ToolTipRows>
-                    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>
     </GlassTooltip>
     <span v-else class="airline-logo"></span>
@@ -77,45 +77,4 @@ span.airline-logo {
     align-items: center;
     gap: 10px;
 }
-
-.codes{
-    width:100%;
-    display: flex;
-    gap: 4px;
-    padding-top:1em;
-    justify-content:flex-start;
-}
-
-
-.airline-name {
-    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;
-}
-
 </style>

resources/js/Components/FlightsGoneBy/AirportToolTip.vue

@@ -2,6 +2,12 @@
 import { Airport } from "@/Types/types";
 import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
 import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
+import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
+import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
+import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
+import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
+import CountryRow from "@/Components/FlightsGoneBy/Tooltips/CountryRow.vue";
+import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
 
 defineProps<{
     airport: Airport
@@ -12,9 +18,6 @@ function formatElevation(ft: number | null): string | null {
     return `${ft.toLocaleString()} ft`
 }
 
-function formatType(type: string): string {
-    return type.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
-}
 </script>
 
 <template>
@@ -26,46 +29,21 @@ function formatType(type: string): string {
         </template>
 
         <div class="airport-tooltip">
-            <!-- Header -->
+            <ToolTipHeader>{{ airport.name }}</ToolTipHeader>
-            <div class="tooltip-header">
+
-                <div class="tooltip-codes">
+                <ToolTipName>
-                    <div><span class="iata">{{ airport.name }}</span></div>
-                    <div class="code-badges">
                     <InlineBadge v-if="airport.iata_code" variant="generic">{{ airport.iata_code }}</InlineBadge>
                     <InlineBadge v-if="airport.icao_code" variant="generic">{{ airport.icao_code }}</InlineBadge>
-                    </div>
+                </ToolTipName>
-                </div>
-            </div>
-            <div class="tooltip-divider" />
 
-            <!-- Details -->
+            <ToolTipDivider />
-            <div class="tooltip-rows">
+            <ToolTipRows>
-                <div v-if="airport.municipality" class="tooltip-row">
+                <ToolTipRow v-if="airport.municipality" label="City" :value="airport.municipality" />
-                    <span class="tooltip-label">City</span>
+                <CountryRow :country="airport.region?.country" />
-                    <span class="tooltip-value">{{ airport.municipality }}</span>
+                <ToolTipRow v-if="airport.elevation_ft !== null" label="Elevation" :value="formatElevation(airport.elevation_ft)" />
-                </div>
+                <ToolTipRow label="Timezone" :value="airport.timezone" />
-                <div v-if="airport.municipality" class="tooltip-row">
+                <ToolTipRow label="Coordinates" :value="airport.latitude_deg.toFixed(4) + ', ' + airport.longitude_deg.toFixed(4)" />
-                    <span class="tooltip-label">Country</span>
+            </ToolTipRows>
-                    <span class="tooltip-value"  v-if="airport.region?.country">
-                        <span>{{airport.region.country.name}}&nbsp;</span>
-                        <span class="fi" :class="`fi-${airport.region.country.code.toLowerCase()}`"></span>
-                    </span>
-                </div>
-                <div v-if="airport.elevation_ft !== null" class="tooltip-row">
-                    <span class="tooltip-label">Elevation</span>
-                    <span class="tooltip-value">{{ formatElevation(airport.elevation_ft) }}</span>
-                </div>
-                <div class="tooltip-row">
-                    <span class="tooltip-label">Timezone</span>
-                    <span class="tooltip-value tz">{{ airport.timezone }}</span>
-                </div>
-                <div class="tooltip-row">
-                    <span class="tooltip-label">Coordinates</span>
-                    <span class="tooltip-value coords">
-                        {{ airport.latitude_deg.toFixed(4) }}, {{ airport.longitude_deg.toFixed(4) }}
-                    </span>
-                </div>
-            </div>
         </div>
     </GlassTooltip>
 </template>
@@ -74,78 +52,4 @@ function formatType(type: string): string {
 .airport-tooltip {
     display: contents;
 }
-
-.fi{
-    padding:0.25em;
-}
-
-.tooltip-header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 0.75rem;
-}
-
-.iata{
-    font-size:1.2em;
-}
-
-.tooltip-codes {
-    display: flex;
-    flex-direction: column;
-    align-items: baseline;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-}
-
-.code-badges {
-    display: flex;
-    gap: 0.3rem;
-    flex-wrap: wrap;
-}
-
-.tooltip-divider {
-    height: 1px;
-    background: var(--table-border, rgba(255,255,255,0.08));
-}
-
-.tooltip-rows {
-    display: flex;
-    flex-direction: column;
-    gap: 0.3rem;
-}
-
-.tooltip-row {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 1rem;
-}
-
-.tooltip-label {
-    font-family: 'Share Tech Mono', monospace;
-    font-size: 0.6rem;
-    letter-spacing: 0.15em;
-    color: var(--muted, #445566);
-    flex-shrink: 0;
-}
-
-.tooltip-value {
-    font-size: 0.78rem;
-    color: var(--text, #c8cdd8);
-    text-align: right;
-}
-
-.tz {
-    font-family: 'Share Tech Mono', monospace;
-    font-size: 0.7rem;
-    letter-spacing: 0.03em;
-}
-
-.coords {
-    font-family: 'Share Tech Mono', monospace;
-    font-size: 0.68rem;
-    color: var(--muted, #556677);
-    letter-spacing: 0.03em;
-}
 </style>

resources/js/Components/FlightsGoneBy/FlightStatsBar.vue

@@ -40,7 +40,9 @@
             </template>
             <template v-if="upcomingDistanceKm">
                 <div :class="totalDistanceKm ? 'stat-upcoming' : 'stat-primary'">
-                    <span :class="totalDistanceKm ? 'stat-upcoming-num' : 'stat-num'"><Distance :unit="page.auth?.user?.resolved_settings?.distance_unit" includeSpace :value="upcomingDistanceKm"/></span>
+                    <span :class="totalDistanceKm ? 'stat-upcoming-num' : 'stat-num'"><Distance :unit="page.auth?.user?.resolved_settings?.distance_unit" includeSpace :value="upcomingDistanceKm"/>
+                        <span :class="upcomingDistanceKm ? 'stat-upcoming-lbl' : 'unit'"> upcoming</span>
+                    </span>
                 </div>
             </template>
         </div>

resources/js/Components/FlightsGoneBy/FlightToolTip.vue

@@ -3,6 +3,12 @@ import { Flight } from "@/Types/types";
 import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
 import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
 import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
+import LiveryImage from "@/Components/FlightsGoneBy/LiveryImage.vue";
+import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
+import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
+import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
+import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
+import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
 
 defineProps<{
     flight: Flight
@@ -17,101 +23,45 @@ defineProps<{
             </div>
         </template>
 
-        <div class="tooltip-header">
+        <ToolTipHeader>
             <span class="designator">
                 <AirlineLogo hideTooltip :airline="flight.airline" size="24" />
                 {{ flight.flight_number || `${flight.departure_airport.display_code}-${flight.arrival_airport.display_code}` }}
             </span>
-        </div>
+        </ToolTipHeader>
 
-        <div class="tooltip-name">
+        <ToolTipName>
             <InlineBadge variant="generic">{{ flight.departure_airport.display_code }}</InlineBadge>
             <span class="arrow">→</span>
             <InlineBadge variant="generic">{{ flight.arrival_airport.display_code }}</InlineBadge>
-        </div>
+        </ToolTipName>
 
-        <div class="tooltip-divider" />
+        <ToolTipDivider />
 
-        <div class="tooltip-rows">
+        <ToolTipRows v-if="flight.livery_url">
-            <div class="tooltip-row">
+            <LiveryImage :flight="flight" />
-                <span class="tooltip-label">From</span>
+        </ToolTipRows>
-                <span class="tooltip-value">{{ flight.departure_airport.municipality }}</span>
+
-            </div>
+        <ToolTipDivider v-if="flight.livery_url" />
-            <div class="tooltip-row">
+
-                <span class="tooltip-label">To</span>
+        <ToolTipRows>
-                <span class="tooltip-value">{{ flight.arrival_airport.municipality }}</span>
+            <ToolTipRow label="From" :value="flight.departure_airport.municipality" />
-            </div>
+            <ToolTipRow label="To" :value="flight.arrival_airport.municipality" />
-            <div class="tooltip-row" v-if="flight.airline">
+            <ToolTipRow label="Airline" :value="flight.airline.name" v-if="flight.airline" />
-                <span class="tooltip-label">Airline</span>
+            <ToolTipRow label="Aircraft" :value="flight.aircraft?.display_name_short"  v-if="flight.aircraft" />
-                <span class="tooltip-value">{{ flight.airline.name }}</span>
+            <ToolTipRow label="Date" :value="flight.departure_date_display" />
-            </div>
+        </ToolTipRows>
-            <div class="tooltip-row" v-if="flight.aircraft">
-                <span class="tooltip-label">Aircraft</span>
-                <span class="tooltip-value">{{ flight.aircraft?.display_name_short }}</span>
-            </div>
-            <div class="tooltip-row">
-                <span class="tooltip-label">Date</span>
-                <span class="tooltip-value">{{ flight.departure_date_display }}</span>
-            </div>
-        </div>
     </GlassTooltip>
 </template>
 
 <style scoped>
-.tooltip-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.75rem;
-}
-
 .designator {
     display:inline-flex;
     color: #e8eaf0;
 }
 
-.tooltip-name {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    margin-top: 0.2rem;
-    line-height: 1.3;
-}
-
 .arrow {
     font-size: 0.75rem;
     color: var(--muted, #445566);
 }
-
-.tooltip-divider {
-    height: 1px;
-    background: var(--table-border, rgba(255,255,255,0.08));
-}
-
-.tooltip-rows {
-    display: flex;
-    flex-direction: column;
-    gap: 0.3rem;
-}
-
-.tooltip-row {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 1rem;
-}
-
-.tooltip-label {
-    font-family: 'Share Tech Mono', monospace;
-    font-size: 0.6rem;
-    letter-spacing: 0.15em;
-    color: var(--muted, #445566);
-    flex-shrink: 0;
-}
-
-.tooltip-value {
-    font-size: 0.78rem;
-    color: var(--text, #c8cdd8);
-    text-align: right;
-}
 </style>

resources/js/Components/FlightsGoneBy/Panels/RoutePanel.vue

@@ -13,7 +13,7 @@ defineProps<{
 <template>
     <Panel label="Route">
         <div class="map-placeholder">
-            <FlightMap :flights="[flight]" />
+            <FlightMap :flights="[flight]" :showLegend="false" />
         </div>
         <DetailRows>
             <DetailRow label="Distance" :value="flight.distance + 'km'" />

resources/js/Components/FlightsGoneBy/Tooltips/CountryRow.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
+import {Country} from "@/Types/types";
+
+defineProps<{
+    country: Country | null | undefined
+}>()
+</script>
+
+<template>
+    <ToolTipRow label="Country" :value="country?.name ?? null" :countryCode="country?.code" />
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="tooltip-divider"></div>
+</template>
+
+<style scoped>
+.tooltip-divider {
+    height: 1px;
+    background: var(--table-border, rgba(255,255,255,0.08));
+}
+</style>

resources/js/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="tooltip-header">
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+.tooltip-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+}
+</style>

resources/js/Components/FlightsGoneBy/Tooltips/ToolTipName.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="tooltip-name">
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+.tooltip-name {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: 0.2rem;
+    line-height: 1.3;
+}
+</style>

resources/js/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+    defineProps<{
+        label: string
+        value: string | null
+        countryCode?: string
+    }>()
+</script>
+
+<template>
+    <div class="tooltip-row">
+        <span class="tooltip-label">{{label}}</span>
+        <span v-if="!countryCode" class="tooltip-value">{{value}}</span>
+        <span v-if="countryCode" class="tooltip-value">
+            <span class="fi" :class="`fi-${countryCode.toLowerCase()}`" /> {{value}}
+        </span>
+    </div>
+</template>
+
+<style scoped>
+    .tooltip-row {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: 1rem;
+    }
+
+    .tooltip-label {
+        font-family: 'Share Tech Mono', monospace;
+        font-size: 0.6rem;
+        letter-spacing: 0.15em;
+        color: var(--muted, #445566);
+        flex-shrink: 0;
+        text-transform: uppercase;
+    }
+
+    .tooltip-value {
+        font-size: 0.78rem;
+        color: var(--text, #c8cdd8);
+        text-align: right;
+    }
+
+    .fi{
+        font-size: 1rem;
+        padding: 0.25rem;
+    }
+</style>

resources/js/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="tooltip-rows">
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+.tooltip-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+}
+</style>

routes/web.php

@@ -29,13 +29,7 @@ use Inertia\Inertia;
  */
 Route::domain(config('app.domain'))->group(
     function() {
-        Route::get('/', function () {
+        Route::get('/', [FlightProfileController::class, 'index'])->name('home');
-            if (auth()->check()) {
-                return redirect()->route('profile.view', auth()->user()->name);
-            }
-            return redirect()->route('login');
-        });
-
 
 
         Route::get('/dashboard', function () {