Added Notifications

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