Added achievement data

resources/js/Components/FlightsGoneBy/ProfileViewSwitcher.vue

@@ -1,22 +1,41 @@
 <script setup lang="ts">
-import {ProfileView} from "@/Types/types";
+import {ProfileView, User} from "@/Types/types";
+import {router, usePage} from "@inertiajs/vue3";
+import {computed} from "vue";
 
-defineProps<{
-    activeView: string;
+const props = defineProps<{
+    activeView: ProfileView;
+    user: User
 }>()
 
 const emit = defineEmits<{
     'update:activeView': [view: ProfileView]
 }>()
+
+const page = usePage()
+const isAchievementsPage = computed(() => page.component === 'UserAchievements'
+)
+
+function navigateTo(view: ProfileView) {
+    if (isAchievementsPage.value) {
+        const routeMap: Record<string, string> = {
+            map: route('profile.map', { user: props.user.name }),
+            board: route('profile.departure-board', { user: props.user.name }),
+            passes: route('profile.boarding-passes', { user: props.user.name }),
+        }
+        router.visit(routeMap[view])
+    } else {
+        emit('update:activeView', view)
+    }
+}
 </script>
 
 <template>
     <div class="view-toolbar">
-
         <button
             class="view-btn"
             :class="{ active: activeView === 'map' }"
-            @click="emit('update:activeView', 'map')"
+            @click="navigateTo('map')"
         >
             <span class="view-btn-icon mdi mdi-earth"></span>
             <span class="view-btn-label">MAP</span>
@@ -24,18 +43,26 @@ const emit = defineEmits<{
         <button
             class="view-btn"
             :class="{ active: activeView === 'board' }"
-            @click="emit('update:activeView', 'board')"
+            @click="navigateTo('board')"
         >
             <span class="view-btn-icon mdi mdi-table"></span>
-            <span class="view-btn-label">DEPARTURE BOARD</span>
+            <span class="view-btn-label">Departure Board</span>
         </button>
         <button
             class="view-btn"
             :class="{ active: activeView === 'passes' }"
-            @click="emit('update:activeView', 'passes')"
+            @click="navigateTo('passes')"
         >
             <span class="view-btn-icon mdi mdi-ticket"></span>
-            <span class="view-btn-label">BOARDING PASSES</span>
+            <span class="view-btn-label">Boarding Passes</span>
+        </button>
+        <button
+            class="view-btn"
+            :class="{ active: activeView === 'achievements' }"
+            @click="router.visit(route('profile.achievements', { user: user.name }))"
+        >
+            <span class="view-btn-icon mdi mdi-trophy"></span>
+            <span class="view-btn-label">Achievements</span>
         </button>
     </div>
 </template>
@@ -87,4 +114,8 @@ const emit = defineEmits<{
     font-size: 0.8rem;
     opacity: 0.8;
 }
+
+.view-btn-label {
+    text-transform: uppercase;
+}
 </style>