Add more airlines and fix edit bugs

resources/js/Pages/UserProfile.vue

@@ -1,20 +1,15 @@
 <script setup lang="ts">
 import MainLayout from "@/Layouts/MainLayout.vue";
-import { Head } from '@inertiajs/vue3';
-import { ref, defineAsyncComponent } from 'vue'
-import {Flight, ProfileView, User} from "@/Types/types";
+import { Head } from '@inertiajs/vue3'
+import { ref, computed, defineAsyncComponent } from 'vue'
+import { Flight, ProfileView, User } from "@/Types/types"
 import { router } from '@inertiajs/vue3'
-import ProfileViewSwitcher from "@/Components/FlightsGoneBy/ProfileViewSwitcher.vue";
-import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue";
-import DepartureBoard from "@/Components/FlightsGoneBy/DepartureBoard.vue";
-import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue";
-
-const FlightMapAndCharts = defineAsyncComponent(
-    () => import('@/Components/FlightsGoneBy/FlightMapAndCharts.vue')
-)
-const BoardingPasses = defineAsyncComponent(
-    () => import('@/Components/FlightsGoneBy/BoardingPasses.vue')
-)
+import { useFlightStats, FlightStats } from "@/Composables/useFlightStats"
+import ProfileViewSwitcher from "@/Components/FlightsGoneBy/ProfileViewSwitcher.vue"
+import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue"
+import DepartureBoard from "@/Components/FlightsGoneBy/DepartureBoard.vue"
+import BoardingPasses from "@/Components/FlightsGoneBy/BoardingPasses.vue";
+import FlightMapAndCharts from "@/Components/FlightsGoneBy/FlightMapAndCharts.vue";
 
 defineOptions({ layout: MainLayout })
 
@@ -25,7 +20,50 @@ const props = defineProps<{
     initialView?: ProfileView
 }>()
 
+// ── Filter state ──────────────────────────────────────────────────────────────
+const selectedYears         = ref<number[]>([])
+const selectedAirlines      = ref<number[]>([])
+const selectedCountries     = ref<string[]>([])
+const selectedContinents    = ref<string[]>([])
+const selectedFlightClasses = ref<number[]>([])
 
+function onFiltersChange(filters: {
+    years: number[]
+    airlines: number[]
+    countries: string[]
+    continents: string[]
+    flightClasses: number[]
+}) {
+    selectedYears.value         = filters.years
+    selectedAirlines.value      = filters.airlines
+    selectedCountries.value     = filters.countries
+    selectedContinents.value    = filters.continents
+    selectedFlightClasses.value = filters.flightClasses
+}
+
+function matchesFilters(f: Flight): boolean {
+    const date = new Date(f.departure_date)
+    if (selectedYears.value.length && !selectedYears.value.includes(date.getFullYear())) return false
+    if (selectedAirlines.value.length && !selectedAirlines.value.includes(f.airline?.id ?? -1)) return false
+    if (selectedCountries.value.length) {
+        const depCode = f.departure_airport.region?.country?.code
+        const arrCode = f.arrival_airport.region?.country?.code
+        if (!selectedCountries.value.includes(depCode ?? '') && !selectedCountries.value.includes(arrCode ?? '')) return false
+    }
+    if (selectedContinents.value.length) {
+        const depCode = f.departure_airport.region?.continent?.code
+        const arrCode = f.arrival_airport.region?.continent?.code
+        if (!selectedContinents.value.includes(depCode ?? '') && !selectedContinents.value.includes(arrCode ?? '')) return false
+    }
+    if (selectedFlightClasses.value.length && !selectedFlightClasses.value.includes(f.flight_class?.id ?? -1)) return false
+    return true
+}
+
+const filteredFlights = computed(() => props.flights.filter(matchesFilters))
+
+const stats = useFlightStats(filteredFlights)
+
+// ── View switching ────────────────────────────────────────────────────────────
 const activeView = ref<ProfileView>(props.initialView ?? 'board')
 
 const routeNames = {
@@ -34,7 +72,7 @@ const routeNames = {
     passes: 'profile.boarding-passes',
 } as const
 
-function switchView(view: 'map' | 'board' | 'passes') {
+function switchView(view: ProfileView) {
     activeView.value = view
     window.history.replaceState(
         window.history.state,
@@ -48,8 +86,13 @@ function switchView(view: 'map' | 'board' | 'passes') {
     <Head :title="`${user.name}'s Flights`" />
     <ProfileLayout :flights="flights" :user="user">
         <ProfileViewSwitcher :active-view="activeView" @update:active-view="switchView" />
-        <DepartureBoard v-if="activeView === 'board'" :flights="flights" :canEdit="canEdit" />
-        <BoardingPasses v-else-if="activeView === 'passes'" :flights="flights" :canEdit="canEdit" />
-        <FlightMapAndCharts v-else-if="activeView === 'map'" :flights="flights" :canEdit="canEdit" />
+        <DepartureBoard v-if="activeView === 'board'" :flight-stats="stats" :canEdit="canEdit" />
+        <BoardingPasses v-else-if="activeView === 'passes'" :flight-stats="stats" :canEdit="canEdit" />
+        <FlightMapAndCharts
+            v-else-if="activeView === 'map'"
+            :stats="stats"
+            :canEdit="canEdit"
+            @filters-change="onFiltersChange"
+        />
     </ProfileLayout>
 </template>