Added Notifications

resources/js/Components/FlightsGoneBy/AchievementCard.vue

@@ -1,13 +1,15 @@
 <!-- AchievementCard.vue -->
 <script setup lang="ts">
-import {Achievement, BadgeVariant, UserAchievement} from "@/Types/types";
+import {Achievement, BadgeVariant, User, UserAchievement} from "@/Types/types";
 import {computed} from "vue";
 import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
 import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
+import {Link} from '@inertiajs/vue3'
 
 const props = defineProps<{
     achievement: Achievement
     userAchievement?: UserAchievement
+    user?: User
 }>()
 
 const progress = computed(() => {
@@ -83,6 +85,9 @@ const difficultyVariant = computed(() => {
                     </div>
 
                     <p class="achievement-description">{{ achievement.short_description }}</p>
+                    <Link v-if="achievement.has_page && user" :href="route('profile.achievement', { user: user.name, achievement: achievement.internal_name })">
+                        View Details
+                    </Link>
 
                     <template v-if="achievement.progressive && progress">
                         <div class="progress-label">

resources/js/Components/FlightsGoneBy/AirlineLogo.vue

@@ -11,6 +11,7 @@ const page = usePage<SharedProps>().props;
 const props = defineProps<{
     airline: Airline | null;
     size?: number | string;
+    hideTooltip?: boolean;
 }>();
 
 const logoUrl = computed(() => `url('${props.airline?.logo_url ?? page.logo_api_url+'/airline/undefined/logo/tail'}')`);
@@ -26,7 +27,7 @@ const size = computed(() => props.size ? props.size + 'px' : '30px');
 </script>
 
 <template>
-    <GlassTooltip>
+    <GlassTooltip v-if="!hideTooltip">
         <template #activator="{ props: tooltipProps }">
             <span class="airline-logo" v-bind="tooltipProps"></span>
         </template>
@@ -54,6 +55,7 @@ const size = computed(() => props.size ? props.size + 'px' : '30px');
             </div>
         </div>
     </GlassTooltip>
+    <span v-else class="airline-logo"></span>
 </template>
 
 <style scoped>

resources/js/Components/FlightsGoneBy/FlightRegionTable.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import {Flight} from "@/Types/types";
+import FlightToolTip from "@/Components/FlightsGoneBy/FlightToolTip.vue";
+import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
+import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
+
+defineProps<{
+    regionCodes: string[]
+    flightsByRegion: Record<string, Flight[]>
+    regionNames?: Record<string, string>
+}>()
+</script>
+
+<template>
+    <table>
+        <tr v-for="code in regionCodes" :key="code">
+            <td>{{ regionNames?.[code] ?? code }}</td>
+            <td>
+                <template v-if="flightsByRegion[code]?.length">
+                    <span style="display:inline-flex; align-items:center; gap:0.25em; flex-wrap:wrap;">
+                        <FlightToolTip
+                            v-for="(flight, index) in flightsByRegion[code].slice(0, 5)"
+                            :key="flight.id"
+                            :flight="flight"
+                        >
+                            <InlineBadge style="display:inline-flex; align-items:center; gap:0.25em;">
+                                <AirlineLogo hideTooltip :airline="flight.airline" />
+                                {{ flight.flight_number || `${flight.departure_airport.display_code}-${flight.arrival_airport.display_code}` }}
+                            </InlineBadge>
+                        </FlightToolTip>
+                    </span>
+                </template>
+                <template v-else>
+                </template>
+            </td>
+        </tr>
+    </table>
+</template>
+
+<style scoped>
+table {
+    border-spacing: 0;
+    width: 100%;
+}
+table td {
+    border: solid 1px;
+    padding: 0.5em;
+}
+</style>

resources/js/Components/FlightsGoneBy/FlightToolTip.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+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 FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
+
+defineProps<{
+    flight: Flight
+}>()
+</script>
+
+<template>
+    <GlassTooltip>
+        <template #activator="{ props: tooltipProps }">
+            <div style="display:inline; cursor:pointer" v-bind="tooltipProps">
+                <slot />
+            </div>
+        </template>
+
+        <div class="tooltip-header">
+            <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>
+
+        <div class="tooltip-name">
+            <InlineBadge variant="generic">{{ flight.departure_airport.display_code }}</InlineBadge>
+            <span class="arrow">→</span>
+            <InlineBadge variant="generic">{{ flight.arrival_airport.display_code }}</InlineBadge>
+        </div>
+
+        <div class="tooltip-divider" />
+
+        <div class="tooltip-rows">
+            <div class="tooltip-row">
+                <span class="tooltip-label">From</span>
+                <span class="tooltip-value">{{ flight.departure_airport.municipality }}</span>
+            </div>
+            <div class="tooltip-row">
+                <span class="tooltip-label">To</span>
+                <span class="tooltip-value">{{ flight.arrival_airport.municipality }}</span>
+            </div>
+            <div class="tooltip-row" v-if="flight.airline">
+                <span class="tooltip-label">Airline</span>
+                <span class="tooltip-value">{{ flight.airline.name }}</span>
+            </div>
+            <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/PanelHeader.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-
+defineProps<{
+    centered?: boolean
+}>()
 </script>
 
 <template>
-<div class="panel-header"><slot /></div>
+<div class="panel-header" :style="`${centered ? 'text-align:center' : ''}`"><slot /></div>
 </template>
 
 <style scoped>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+defineProps<{
+    visitedRegions: Set<string>
+    stateLocalCodes: string[]
+    regionNames?: Record<string, string>
+}>()
+</script>
+
+<template>
+    <div class="legend">
+        <v-chip
+            v-for="state in stateLocalCodes"
+            :key="state"
+            :color="visitedRegions.has(state) ? '#4a90d9' : 'grey'"
+            variant="flat"
+            size="small"
+        >
+            <template #prepend>
+                <v-icon
+                    :icon="visitedRegions.has(state) ? 'mdi-check-circle' : 'mdi-circle-outline'"
+                    size="small"
+                    class="mr-1"
+                />
+            </template>
+            {{ regionNames?.[state] ?? state }}
+        </v-chip>
+    </div>
+</template>
+
+<style scoped>
+.legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: center;
+    margin-top: 12px;
+}
+</style>

resources/js/Components/FlightsGoneBy/ProfileHeader.vue

@@ -2,6 +2,7 @@
 import { usePage } from "@inertiajs/vue3";
 import { computed, ref } from "vue";
 import type { Flight, User, SharedProps } from "@/Types/types";
+import { Link } from "@inertiajs/vue3";
 
 const props = defineProps<{
     user: User
@@ -42,7 +43,11 @@ const follow = async () => {
             <div class="board-title-group">
                 <span class="board-eyebrow">FLIGHT HISTORY</span>
                 <div class="board-title-row">
-                    <h1 class="board-title">{{ user.name }}</h1>
+                    <h1 class="board-title">
+                        <Link :href="route('profile.view', { user: user.name })">
+                            {{ user.name }}
+                        </Link>
+                    </h1>
                     <button
                         v-if="isLoggedIn && !isOwnProfile"
                         class="follow-btn"