Corrected Korea

resources/js/Pages/FlightProfile.vue

@@ -2,9 +2,9 @@
 import MainLayout from "@/Layouts/MainLayout.vue";
 import { Head } from '@inertiajs/vue3';
 import { Flight } from "@/Types/types";
-import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
-import FlightClassBadge from "@/Components/FlightsGoneBy/FlightClassBadge.vue";
-import FlightListTable from "@/Components/FlightsGoneBy/FlightListTable.vue";
+import DepartureBoard from "@/Components/FlightsGoneBy/DepartureBoard.vue";
+import BoardingPasses from "@/Components/FlightsGoneBy/BoardingPasses.vue";
+import { ref } from "vue";
 
 defineOptions({
     layout: MainLayout
@@ -19,6 +19,8 @@ defineProps<{
     flights: Flight[]
 }>()
 
+type View = 'board' | 'passes'
+const activeView = ref<View>('board')
 </script>
 
 <template>
@@ -36,7 +38,28 @@ defineProps<{
             </div>
         </div>
 
-        <FlightListTable :flights="flights" />
+        <!-- View switcher toolbar -->
+        <div class="view-toolbar">
+            <button
+                class="view-btn"
+                :class="{ active: activeView === 'board' }"
+                @click="activeView = 'board'"
+            >
+                <span class="view-btn-icon">▦</span>
+                <span class="view-btn-label">DEPARTURE BOARD</span>
+            </button>
+            <button
+                class="view-btn"
+                :class="{ active: activeView === 'passes' }"
+                @click="activeView = 'passes'"
+            >
+                <span class="view-btn-icon">◫</span>
+                <span class="view-btn-label">BOARDING PASSES</span>
+            </button>
+        </div>
+
+        <DepartureBoard v-if="activeView === 'board'" :flights="flights" />
+        <BoardingPasses v-else :flights="flights" />
     </div>
 </template>
 
@@ -49,7 +72,7 @@ defineProps<{
     background: #0d0f14;
     padding: 2.5rem 2rem;
     font-family: 'Barlow', sans-serif;
-    width:100%;
+    width: 100%;
 }
 
 /* ── Header ── */
@@ -100,5 +123,49 @@ defineProps<{
     color: #556;
 }
 
+/* ── View toolbar ── */
+.view-toolbar {
+    display: flex;
+    gap: 0;
+    margin-bottom: 1.5rem;
+    border: 1px solid rgba(255,193,7,0.15);
+    border-radius: 3px;
+    width: fit-content;
+    overflow: hidden;
+}
 
+.view-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1.25rem;
+    background: transparent;
+    border: none;
+    border-right: 1px solid rgba(255,193,7,0.15);
+    color: #556;
+    font-family: 'Share Tech Mono', monospace;
+    font-size: 0.68rem;
+    letter-spacing: 0.15em;
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+}
+
+.view-btn:last-child {
+    border-right: none;
+}
+
+.view-btn:hover {
+    background: rgba(255,193,7,0.05);
+    color: #9aa;
+}
+
+.view-btn.active {
+    background: rgba(255,193,7,0.08);
+    color: #ffc107;
+}
+
+.view-btn-icon {
+    font-size: 0.8rem;
+    opacity: 0.8;
+}
 </style>