From 57b015eb1885db15cda7e3972adcfa3f00b889b7 Mon Sep 17 00:00:00 2001
From: josh <josh.dredge@outlook.com>
Date: Sun, 24 May 2026 21:53:17 +1000
Subject: [PATCH] Added Notifications

---
 app/Models/User.php                           |  2 +-
 .../2026_05_21_134256_add_user_options.php    | 26 +++++++++++++++++++
 .../FlightsGoneBy/AchievementCard.vue         | 11 +++++++-
 .../Components/FlightsGoneBy/BoardingPass.vue |  6 +++--
 .../FlightsGoneBy/DepartureBoard.vue          |  6 +++--
 .../FlightsGoneBy/FlightStatsBar.vue          |  9 ++++---
 resources/js/Pages/UserAchievements.vue       |  7 +++--
 resources/js/Types/types.d.ts                 |  1 +
 8 files changed, 57 insertions(+), 11 deletions(-)
 create mode 100644 database/migrations/2026_05_21_134256_add_user_options.php

diff --git a/app/Models/User.php b/app/Models/User.php
index 5fb6855..5c35252 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -13,7 +13,7 @@ use App\Traits\HasAchievements;
 use App\Models\Notification;
 use Laravel\Sanctum\HasApiTokens;
 
-#[Fillable(['name', 'email', 'password'])]
+#[Fillable(['name', 'email', 'password', 'distance_unit'])]
 #[Hidden(['password', 'remember_token'])]
 class User extends Authenticatable
 {
diff --git a/database/migrations/2026_05_21_134256_add_user_options.php b/database/migrations/2026_05_21_134256_add_user_options.php
new file mode 100644
index 0000000..b8729ca
--- /dev/null
+++ b/database/migrations/2026_05_21_134256_add_user_options.php
@@ -0,0 +1,26 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->string('distance_unit', 3)->default('km')->after('id');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        //
+    }
+};
diff --git a/resources/js/Components/FlightsGoneBy/AchievementCard.vue b/resources/js/Components/FlightsGoneBy/AchievementCard.vue
index af4a8ba..6c7a379 100644
--- a/resources/js/Components/FlightsGoneBy/AchievementCard.vue
+++ b/resources/js/Components/FlightsGoneBy/AchievementCard.vue
@@ -7,6 +7,7 @@ import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
 import {Link} from '@inertiajs/vue3'
 import ButtonLink from "@/Components/FlightsGoneBy/ButtonLink.vue";
 import Distance from "@/Components/Distance.vue";
+import FormattedNumber from "@/Components/FormattedNumber.vue";
 
 const distanceAchievements = [
     'general_flying.circumference_of_the_earth',
@@ -18,6 +19,7 @@ const props = defineProps<{
     achievement: Achievement
     userAchievement?: UserAchievement
     user?: User
+    distanceUnit? : "mi" | "km" | "nm"
 }>()
 
 const progress = computed(() => {
@@ -101,7 +103,14 @@ const difficultyVariant = computed(() => {
 
                     <template v-if="achievement.progressive && progress">
                         <div class="progress-label">
-                            <span><distance :showUnits="false" :value="Math.min(progress.current, progress.threshold)" /> /  <distance  :value="progress.threshold" :showUnits="distanceAchievements.includes(achievement.internal_name)" /></span>
+                            <span v-if="distanceAchievements.includes(achievement.internal_name)">
+                                <Distance :unit="distanceUnit" :showUnits="false" :value="Math.min(progress.current, progress.threshold)" /> /
+                                <Distance :unit="distanceUnit" :value="progress.threshold" />
+                            </span>
+                            <span v-else>
+                                <FormattedNumber :value="Math.min(progress.current, progress.threshold)" /> /
+                                <FormattedNumber :value="progress.threshold" />
+                            </span>
                             <span>{{ progress.percentage }}%</span>
                         </div>
                         <v-progress-linear
diff --git a/resources/js/Components/FlightsGoneBy/BoardingPass.vue b/resources/js/Components/FlightsGoneBy/BoardingPass.vue
index 25eac4b..b89ded5 100644
--- a/resources/js/Components/FlightsGoneBy/BoardingPass.vue
+++ b/resources/js/Components/FlightsGoneBy/BoardingPass.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import {Flight, User} from "@/Types/types";
+import {Flight, SharedProps, User} from "@/Types/types";
 import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
 import AirportToolTip from "@/Components/FlightsGoneBy/AirportToolTip.vue";
 import AircraftToolTip from "@/Components/FlightsGoneBy/AircraftToolTip.vue";
 import Distance from "@/Components/Distance.vue";
 import UserFlightContextMenu from "@/Components/FlightsGoneBy/UserFlightContextMenu.vue";
+import {usePage} from "@inertiajs/vue3";
 
 defineProps<{
     flight: Flight
@@ -13,6 +14,7 @@ defineProps<{
     user?: User
 }>()
 
+const page = usePage<SharedProps>().props
 
 </script>
 
@@ -75,7 +77,7 @@ defineProps<{
                     <span class="pass-stat-divider" v-if="flight.duration_display && flight.distance">·</span>
                         <span v-if="flight.distance" class="pass-stat">
                             <span class="pass-stat-label">DISTANCE</span>
-                            <span class="pass-stat-value"><Distance :value="Math.round(flight.distance)" /></span>
+                            <span class="pass-stat-value"><Distance  :unit="page.auth?.user?.distance_unit" :value="Math.round(flight.distance)" /></span>
                         </span>
                 </div>
             </div>
diff --git a/resources/js/Components/FlightsGoneBy/DepartureBoard.vue b/resources/js/Components/FlightsGoneBy/DepartureBoard.vue
index 10f5b18..fb2ec03 100644
--- a/resources/js/Components/FlightsGoneBy/DepartureBoard.vue
+++ b/resources/js/Components/FlightsGoneBy/DepartureBoard.vue
@@ -2,7 +2,7 @@
 
 import FlightClassBadge from "@/Components/FlightsGoneBy/FlightClassBadge.vue";
 import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
-import {Flight, User} from "@/Types/types";
+import {Flight, SharedProps, User} from "@/Types/types";
 import { computed, ref, watch, nextTick } from "vue";
 import type { DataTableSortItem } from 'vuetify';
 import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
@@ -12,6 +12,7 @@ import {FlightStats} from "@/Composables/useFlightStats";
 import CrewTooltip from "@/Components/FlightsGoneBy/CrewTooltip.vue";
 import Distance from "@/Components/Distance.vue";
 import UserFlightContextMenu from "@/Components/FlightsGoneBy/UserFlightContextMenu.vue";
+import {usePage} from "@inertiajs/vue3";
 
 const props = defineProps<{
     flightStats: FlightStats
@@ -64,6 +65,7 @@ const customKeySort = {
     },
 }
 
+const page = usePage<SharedProps>()
 
 const sortBy = ref<DataTableSortItem[]>([])
 const currentPage = ref(1)
@@ -226,7 +228,7 @@ watch(
 
                     <td class="v-data-table__td">
                     <span class="mono-tag distance-cell">
-                        <Distance :value="Math.round((item as Flight).distance)" />
+                        <Distance :unit="page.props.auth.user?.distance_unit" :value="Math.round((item as Flight).distance)" />
                     </span>
                     </td>
 
diff --git a/resources/js/Components/FlightsGoneBy/FlightStatsBar.vue b/resources/js/Components/FlightsGoneBy/FlightStatsBar.vue
index 5ed200a..b464da0 100644
--- a/resources/js/Components/FlightsGoneBy/FlightStatsBar.vue
+++ b/resources/js/Components/FlightsGoneBy/FlightStatsBar.vue
@@ -35,12 +35,12 @@
         <div class="stat">
             <template v-if="totalDistanceKm">
                 <div class="stat-primary">
-                    <span class="stat-num"><Distance includeSpace :value="totalDistanceKm" /></span>
+                    <span class="stat-num"><Distance :unit="page.auth?.user?.distance_unit" includeSpace :value="totalDistanceKm" /></span>
                 </div>
             </template>
             <template v-if="upcomingDistanceKm">
                 <div :class="totalDistanceKm ? 'stat-upcoming' : 'stat-primary'">
-                    <span :class="totalDistanceKm ? 'stat-upcoming-num' : 'stat-num'"><Distance includeSpace :value="upcomingDistanceKm"/></span>
+                    <span :class="totalDistanceKm ? 'stat-upcoming-num' : 'stat-num'"><Distance :unit="page.auth?.user?.distance_unit" includeSpace :value="upcomingDistanceKm"/></span>
                 </div>
             </template>
         </div>
@@ -99,14 +99,17 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { Flight } from '@/Types/types'
+import type {Flight, SharedProps} from '@/Types/types'
 import Distance from "@/Components/Distance.vue";
+import {usePage} from "@inertiajs/vue3";
 
 const props = defineProps<{
     flights: Flight[]
     upcomingFlights: Flight[]
 }>()
 
+const page = usePage<SharedProps>().props
+
 // ── Past ──────────────────────────────────────────────────────────────────────
 
 const totalDistanceKm = computed(() =>
diff --git a/resources/js/Pages/UserAchievements.vue b/resources/js/Pages/UserAchievements.vue
index 7c75492..e365f6c 100644
--- a/resources/js/Pages/UserAchievements.vue
+++ b/resources/js/Pages/UserAchievements.vue
@@ -3,8 +3,8 @@ import { ref, computed } from "vue"
 import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue"
 import ProfileViewSwitcher from "@/Components/FlightsGoneBy/ProfileViewSwitcher.vue"
 import AchievementCard from "@/Components/FlightsGoneBy/AchievementCard.vue"
-import {Achievement, User, UserAchievement} from "@/Types/types"
-import { Head } from "@inertiajs/vue3";
+import {Achievement, SharedProps, User, UserAchievement} from "@/Types/types"
+import {Head, usePage} from "@inertiajs/vue3";
 import MainLayout from "@/Layouts/MainLayout.vue";
 import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
 import PanelHeader from "@/Components/FlightsGoneBy/Panels/PanelHeader.vue";
@@ -22,6 +22,8 @@ const props = defineProps<{
     unlockedByCategory: Record<string, number>
 }>()
 
+const page = usePage<SharedProps>().props
+
 const hideImpossible = ref(false)
 
 const filteredAchievements = computed(() => {
@@ -105,6 +107,7 @@ const filteredUnlockedCount = computed(() =>
                         :key="achievement.id"
                         :achievement="achievement"
                         :user-achievement="userAchievements[achievement.id]"
+                        :distance-unit="page.auth?.user?.distance_unit"
                     />
                 </div>
             </Panel>
diff --git a/resources/js/Types/types.d.ts b/resources/js/Types/types.d.ts
index c8b124b..ccdaebc 100644
--- a/resources/js/Types/types.d.ts
+++ b/resources/js/Types/types.d.ts
@@ -17,6 +17,7 @@ export interface User {
     name: string
     email: string
     email_verified_at: string | null
+    distance_unit: "km" | "mi" | "nm"
 }
 
 export type UserActionType = "flight_cancelled" | "flight_booked" | "flight_updated" | "flight_logged" | "flight_deleted" | "flight_imported" | "flight_departing" | "flight_arriving"