Added Notifications

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(() =>