Added Charts

resources/js/Pages/FlightProfile.vue

@@ -5,6 +5,7 @@ import { Flight } from "@/Types/types";
 import DepartureBoard from "@/Components/FlightsGoneBy/DepartureBoard.vue";
 import BoardingPasses from "@/Components/FlightsGoneBy/BoardingPasses.vue";
 import { ref } from "vue";
+import ProfileMap from "@/Components/FlightsGoneBy/ProfileMap.vue";
 
 defineOptions({
     layout: MainLayout
@@ -19,8 +20,8 @@ defineProps<{
     flights: Flight[]
 }>()
 
-type View = 'board' | 'passes'
-const activeView = ref<View>('board')
+type View = 'board' | 'passes' | 'map'
+const activeView = ref<View>('map')
 </script>
 
 <template>
@@ -40,12 +41,20 @@ const activeView = ref<View>('board')
 
         <!-- View switcher toolbar -->
         <div class="view-toolbar">
+            <button
+                class="view-btn"
+                :class="{ active: activeView === 'map' }"
+                @click="activeView = 'map'"
+            >
+                <span class="view-btn-icon mdi mdi-earth"></span>
+                <span class="view-btn-label">Map</span>
+            </button>
             <button
                 class="view-btn"
                 :class="{ active: activeView === 'board' }"
                 @click="activeView = 'board'"
             >
-                <span class="view-btn-icon">▦</span>
+                <span class="view-btn-icon mdi mdi-table"></span>
                 <span class="view-btn-label">DEPARTURE BOARD</span>
             </button>
             <button
@@ -53,13 +62,14 @@ const activeView = ref<View>('board')
                 :class="{ active: activeView === 'passes' }"
                 @click="activeView = 'passes'"
             >
-                <span class="view-btn-icon">◫</span>
+                <span class="view-btn-icon mdi mdi-ticket"></span>
                 <span class="view-btn-label">BOARDING PASSES</span>
             </button>
         </div>
 
         <DepartureBoard v-if="activeView === 'board'" :flights="flights" />
-        <BoardingPasses v-else :flights="flights" />
+        <BoardingPasses v-else-if="activeView === 'passes'" :flights="flights" />
+        <ProfileMap v-else-if="activeView === 'map'" :flights="flights" />
     </div>
 </template>
 
@@ -69,7 +79,6 @@ const activeView = ref<View>('board')
 /* ── Wrapper ── */
 .board-wrapper {
     min-height: 100dvh;
-    background: #0d0f14;
     padding: 2.5rem 2rem;
     font-family: 'Barlow', sans-serif;
     width: 100%;