From 5deefcbfb3d618eafcc528082c09d058a1e04aa6 Mon Sep 17 00:00:00 2001
From: josh <josh.dredge@outlook.com>
Date: Mon, 20 Apr 2026 13:36:58 +1000
Subject: [PATCH] Add more airlines and fix edit bugs

---
 .../FlightsGoneBy/BoardingPasses.vue          |  12 +-
 .../Charts/ChartTypes/DonutChart.vue          | 102 ++++++
 .../ScrollingHorizontalBarChart.vue           | 172 +++++++++
 .../Charts/ChartTypes/VerticalBarChart.vue    | 103 ++++++
 .../FlightsGoneBy/Charts/ContinentsChart.vue  | 129 +------
 .../FlightsGoneBy/Charts/CountriesChart.vue   | 271 +++-----------
 .../FlightsGoneBy/Charts/FlightClassChart.vue |  93 +----
 .../Charts/FlightReasonsChart.vue             | 114 +-----
 .../FlightsGoneBy/Charts/FlightTypeChart.vue  |  97 +----
 .../Charts/FlightsPerDayChart.vue             | 103 +-----
 .../Charts/FlightsPerMonthChart.vue           | 103 +-----
 .../Charts/FlightsPerYearChart.vue            | 112 +-----
 .../FlightsGoneBy/Charts/SeatTypeChart.vue    |  94 +----
 .../FlightsGoneBy/Charts/TopAirlinesChart.vue | 237 +++----------
 .../FlightsGoneBy/Charts/TopAirportsChart.vue | 274 +++------------
 .../FlightsGoneBy/DepartureBoard.vue          |  17 +-
 .../Components/FlightsGoneBy/FlightCharts.vue |  88 ++---
 .../{FlightFillter.vue => FlightFilter.vue}   |   0
 .../js/Components/FlightsGoneBy/FlightMap.vue |   3 +-
 .../FlightsGoneBy/FlightMapAndCharts.vue      | 104 ++----
 resources/js/Composables/useFlightStats.ts    | 332 ++++++++++++++++++
 resources/js/Pages/UserProfile.vue            |  79 ++++-
 22 files changed, 1109 insertions(+), 1530 deletions(-)
 create mode 100644 resources/js/Components/FlightsGoneBy/Charts/ChartTypes/DonutChart.vue
 create mode 100644 resources/js/Components/FlightsGoneBy/Charts/ChartTypes/ScrollingHorizontalBarChart.vue
 create mode 100644 resources/js/Components/FlightsGoneBy/Charts/ChartTypes/VerticalBarChart.vue
 rename resources/js/Components/FlightsGoneBy/{FlightFillter.vue => FlightFilter.vue} (100%)
 create mode 100644 resources/js/Composables/useFlightStats.ts

diff --git a/resources/js/Components/FlightsGoneBy/BoardingPasses.vue b/resources/js/Components/FlightsGoneBy/BoardingPasses.vue
index 3d83ce4..2c9835d 100644
--- a/resources/js/Components/FlightsGoneBy/BoardingPasses.vue
+++ b/resources/js/Components/FlightsGoneBy/BoardingPasses.vue
@@ -2,24 +2,20 @@
 import { computed } from "vue";
 import { Flight } from "@/Types/types";
 import BoardingPass from "@/Components/FlightsGoneBy/BoardingPass.vue";
+import { FlightStats } from "@/Composables/useFlightStats";
 
 const props = defineProps<{
-    flights: Flight[]
+    flightStats: FlightStats
     canEdit: boolean
 }>()
 
-const today = new Date()
-today.setHours(0, 0, 0, 0)
-
 const upcomingFlights = computed(() =>
-    props.flights
-        .filter(f => new Date(f.departure_date) >= today)
+    [...props.flightStats.upcomingFlights.value]
         .sort((a, b) => new Date(a.departure_date).getTime() - new Date(b.departure_date).getTime())
 )
 
 const departedFlights = computed(() =>
-    props.flights
-        .filter(f => new Date(f.departure_date) < today)
+    [...props.flightStats.pastFlights.value]
         .sort((a, b) => new Date(b.departure_date).getTime() - new Date(a.departure_date).getTime())
 )
 
diff --git a/resources/js/Components/FlightsGoneBy/Charts/ChartTypes/DonutChart.vue b/resources/js/Components/FlightsGoneBy/Charts/ChartTypes/DonutChart.vue
new file mode 100644
index 0000000..94727f1
--- /dev/null
+++ b/resources/js/Components/FlightsGoneBy/Charts/ChartTypes/DonutChart.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { ChartType } from '@/Types/types'
+import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue"
+import VueApexCharts from "vue3-apexcharts"
+
+const props = defineProps<{
+    title: string
+    height: number | string
+    series: number[]
+    labels: string[]
+    total?: number
+    options?: object
+}>()
+
+const chartOptions = computed(() => ({
+    chart: {
+        type: 'donut',
+        background: 'transparent',
+        fontFamily: 'inherit',
+    },
+    theme: { mode: 'dark' },
+    labels: props.labels,
+    colors: ['#4da6ff', '#ffc107', '#a150d5', '#22c55e', '#f97316', '#e11d48', '#06b6d4'],
+    dataLabels: {
+        enabled: true,
+        formatter: (val: number) => `${Math.round(val)}%`,
+        style: { fontSize: '12px', fontWeight: 400 },
+        dropShadow: { enabled: false },
+    },
+    plotOptions: {
+        pie: {
+            donut: {
+                size: '60%',
+                labels: {
+                    show: true,
+                    total: {
+                        show: true,
+                        label: 'Total',
+                        fontSize: '13px',
+                        color: '#556677',
+                        formatter: () => (props.total ?? props.series.reduce((a, b) => a + b, 0)).toString(),
+                    },
+                    value: {
+                        fontSize: '22px',
+                        fontWeight: 500,
+                        color: '#e0e6f0',
+                    },
+                },
+            },
+        },
+    },
+    legend: {
+        position: 'bottom',
+        labels: { colors: '#778899' },
+        markers: { width: 8, height: 8, radius: 2 },
+        itemMargin: { horizontal: 12, vertical: 4 },
+    },
+    stroke: { width: 0 },
+    tooltip: {
+        theme: 'dark',
+        y: { formatter: (val: number) => `${val} flights` },
+    },
+}))
+
+const ready = ref(false)
+</script>
+
+<template>
+    <div class="chart-wrap">
+        <div class="chart-title">{{ title }}</div>
+        <PlaneLoader v-if="!ready" />
+        <VueApexCharts
+            type="donut"
+            :height="height"
+            :options="options ?? chartOptions"
+            :series="series"
+            :class="{ 'chart-hidden': !ready }"
+            @mounted="ready = true"
+        />
+    </div>
+</template>
+
+<style scoped>
+.chart-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.chart-title {
+    font-size: 13px;
+    font-weight: 500;
+    color: #556677;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+.chart-hidden {
+    visibility: hidden;
+}
+</style>
diff --git a/resources/js/Components/FlightsGoneBy/Charts/ChartTypes/ScrollingHorizontalBarChart.vue b/resources/js/Components/FlightsGoneBy/Charts/ChartTypes/ScrollingHorizontalBarChart.vue
new file mode 100644
index 0000000..b5d7361
--- /dev/null
+++ b/resources/js/Components/FlightsGoneBy/Charts/ChartTypes/ScrollingHorizontalBarChart.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue"
+import VueApexCharts from "vue3-apexcharts"
+
+interface TooltipItem {
+    [key: string]: unknown
+}
+
+const props = defineProps<{
+    title: string
+    series: { name: string; data: number[] }[]
+    categories: string[]
+    footerValue?: string | number
+    footerLabel?: string
+    maxVisible?: number
+    barHeight?: number
+    colors?: string[]
+    options?: object
+    events?: object
+}>()
+
+const BAR_HEIGHT = computed(() => props.barHeight ?? 32)
+const MAX_VISIBLE = computed(() => props.maxVisible ?? 12)
+
+const chartHeight = computed(() => props.categories.length * BAR_HEIGHT.value + 40)
+const scrollHeight = computed(() => {
+    const visible = Math.min(props.categories.length, MAX_VISIBLE.value)
+    return `${visible * BAR_HEIGHT.value + 40}px`
+})
+
+const chartOptions = computed(() => ({
+    chart: {
+        type: 'bar',
+        background: 'transparent',
+        fontFamily: 'inherit',
+        toolbar: { show: false },
+        animations: { enabled: false },
+        stacked: true,
+    },
+    theme: { mode: 'dark' },
+    plotOptions: {
+        bar: {
+            horizontal: true,
+            barHeight: '60%',
+            borderRadius: 3,
+            borderRadiusWhenStacked: 'last',
+        },
+    },
+    colors: props.colors ?? ['#4da6ff', '#ffc107'],
+    dataLabels: { enabled: false },
+    xaxis: {
+        categories: props.categories,
+        labels: { show: false },
+        axisBorder: { show: false },
+        axisTicks: { show: false },
+    },
+    yaxis: {
+        labels: { style: { colors: '#778899', fontSize: '12px' } },
+    },
+    grid: { show: false },
+    legend: {
+        show: true,
+        position: 'top',
+        horizontalAlign: 'right',
+        labels: { colors: '#778899' },
+        markers: { width: 8, height: 8, radius: 2 },
+        itemMargin: { horizontal: 8 },
+    },
+    tooltip: { theme: 'dark', shared: true, intersect: false },
+    states: {
+        hover: { filter: { type: 'lighten', value: 0.1 } },
+    },
+}))
+
+const ready = ref(false)
+</script>
+
+<template>
+    <div class="chart-wrap">
+        <div class="chart-title">{{ title }}</div>
+
+        <div v-if="categories.length" class="chart-outer">
+            <div class="chart-scroll" :style="{ height: scrollHeight }">
+                <PlaneLoader v-if="!ready" />
+                <VueApexCharts
+                    type="bar"
+                    :height="chartHeight"
+                    :options="options ?? chartOptions"
+                    :series="series"
+                    :class="{ 'chart-hidden': !ready }"
+                    @mounted="ready = true"
+                />
+            </div>
+
+            <!-- Optional slot for custom tooltip -->
+            <slot name="tooltip" />
+
+            <div v-if="footerValue !== undefined" class="chart-footer">
+                <span class="total-count">{{ footerValue }}</span>
+                <span class="total-label">{{ footerLabel }}</span>
+            </div>
+        </div>
+
+        <div v-else class="chart-empty">No data available</div>
+    </div>
+</template>
+
+<style scoped>
+.chart-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.chart-title {
+    font-size: 13px;
+    font-weight: 500;
+    color: #556677;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+.chart-outer {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.chart-scroll {
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: #334455 transparent;
+}
+
+.chart-scroll::-webkit-scrollbar { width: 4px; }
+.chart-scroll::-webkit-scrollbar-track { background: transparent; }
+.chart-scroll::-webkit-scrollbar-thumb { background: #334455; border-radius: 2px; }
+
+.chart-footer {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    padding-left: 4px;
+}
+
+.total-count {
+    font-size: 28px;
+    font-weight: 600;
+    color: #e0e6f0;
+    line-height: 1;
+}
+
+.total-label {
+    font-size: 13px;
+    color: #556677;
+}
+
+.chart-empty {
+    height: 280px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    color: #445566;
+}
+
+.chart-hidden {
+    visibility: hidden;
+}
+</style>
diff --git a/resources/js/Components/FlightsGoneBy/Charts/ChartTypes/VerticalBarChart.vue b/resources/js/Components/FlightsGoneBy/Charts/ChartTypes/VerticalBarChart.vue
new file mode 100644
index 0000000..9ca61ef
--- /dev/null
+++ b/resources/js/Components/FlightsGoneBy/Charts/ChartTypes/VerticalBarChart.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue"
+import VueApexCharts from 'vue3-apexcharts'
+import { ChartType } from "@/Types/types"
+
+const props = defineProps<{
+    type: ChartType
+    title: string
+    height: number | string
+    series: unknown[]
+    categories: unknown[]
+    options?: object
+}>()
+
+const chartOptions = computed(() => ({
+    chart: {
+        type: 'bar',
+        stacked: true,
+        toolbar: { show: false },
+        background: 'transparent',
+        fontFamily: 'inherit',
+    },
+    theme: { mode: 'dark' },
+    plotOptions: {
+        bar: {
+            borderRadius: 3,
+            borderRadiusWhenStacked: 'last',
+            columnWidth: '55%',
+        },
+    },
+    colors: ['#4da6ff', '#ffc107'],
+    dataLabels: { enabled: false },
+    grid: {
+        borderColor: 'rgba(255,255,255,0.05)',
+        yaxis: { lines: { show: true } },
+        xaxis: { lines: { show: false } },
+    },
+    xaxis: {
+        categories: props.categories,
+        axisBorder: { show: false },
+        axisTicks: { show: false },
+        labels: { style: { colors: '#445566', fontSize: '12px' } },
+    },
+    yaxis: {
+        labels: { style: { colors: '#445566', fontSize: '12px' } },
+    },
+    legend: {
+        position: 'top',
+        horizontalAlign: 'right',
+        labels: { colors: '#778899' },
+        markers: { width: 8, height: 8, radius: 2 },
+        itemMargin: { horizontal: 12 },
+    },
+    tooltip: { theme: 'dark', shared: true, intersect: false },
+    states: {
+        hover: { filter: { type: 'lighten', value: 0.1 } },
+        active: { filter: { type: 'none' } },
+    },
+}))
+
+const ready = ref(false)
+</script>
+
+<template>
+    <div class="chart-wrap">
+        <div class="chart-title">{{title}}</div>
+        <PlaneLoader v-if="!ready" />
+        <VueApexCharts
+            :type="type"
+            :height="height"
+            :options="options ?? chartOptions"
+            :series="series"
+            :class="{ 'chart-hidden': !ready }"
+            @mounted="ready = true"
+        />
+    </div>
+</template>
+
+<style scoped>
+.chart-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.chart-title {
+    font-size: 13px;
+    font-weight: 500;
+    color: #556677;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+.chart-empty {
+    height: 280px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    color: #445566;
+}
+</style>
diff --git a/resources/js/Components/FlightsGoneBy/Charts/ContinentsChart.vue b/resources/js/Components/FlightsGoneBy/Charts/ContinentsChart.vue
index 8c63cbf..9047660 100644
--- a/resources/js/Components/FlightsGoneBy/Charts/ContinentsChart.vue
+++ b/resources/js/Components/FlightsGoneBy/Charts/ContinentsChart.vue
@@ -1,125 +1,18 @@
-<template>
-        <FlightChart
-            title="Continents"
-            v-if="series.length"
-            type="donut"
-            height="280"
-            :options="chartOptions"
-            :series="seriesData"
-        />
-</template>
-
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { Flight } from '@/Types/types'
-import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
-
+import DonutChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/DonutChart.vue";
+import {FlightStats} from "@/Composables/useFlightStats";
 const props = defineProps<{
-    flights: Flight[]
+    flightStats: FlightStats
 }>()
-
-const series = computed(() => {
-    const counts = new Map<string, number>()
-    props.flights.forEach(f => {
-        const continents = new Set<string>()
-        const dep = f.departure_airport.region?.continent?.name
-        const arr = f.arrival_airport.region?.continent?.name
-        if (dep) continents.add(dep)
-        if (arr) continents.add(arr)
-        continents.forEach(c => counts.set(c, (counts.get(c) ?? 0) + 1))
-    })
-    return [...counts.entries()]
-        .sort((a, b) => b[1] - a[1])
-        .map(([name, count]) => ({ name, count }))
-})
-
-const seriesData = computed(() => series.value.map(s => s.count))
-
-const chartOptions = computed(() => ({
-    chart: {
-        type: 'donut',
-        background: 'transparent',
-        fontFamily: 'inherit',
-    },
-    theme: { mode: 'dark' },
-    labels: series.value.map(s => s.name),
-    colors: ['#4da6ff', '#ffc107', '#a150d5', '#22c55e', '#f97316', '#e11d48', '#06b6d4'],
-    dataLabels: {
-        enabled: true,
-        formatter: (val: number) => `${Math.round(val)}%`,
-        style: { fontSize: '12px', fontWeight: 400 },
-        dropShadow: { enabled: false },
-    },
-    plotOptions: {
-        pie: {
-            donut: {
-                size: '60%',
-                labels: {
-                    show: true,
-                    total: {
-                        show: true,
-                        label: 'Total',
-                        fontSize: '13px',
-                        color: '#556677',
-                        formatter: () => props.flights.length.toString(),
-                    },
-                    value: {
-                        fontSize: '22px',
-                        fontWeight: 500,
-                        color: '#e0e6f0',
-                    },
-                },
-            },
-        },
-    },
-    legend: {
-        position: 'bottom',
-        labels: { colors: '#778899' },
-        markers: { width: 8, height: 8, radius: 2 },
-        itemMargin: { horizontal: 12, vertical: 4 },
-    },
-    stroke: { width: 0 },
-    tooltip: {
-        theme: 'dark',
-        y: {
-            formatter: (val: number) => `${val} flights`,
-        },
-    },
-}))
 </script>
-
+<template>
+    <DonutChart
+        title="Continents"
+        :height="280"
+        :labels="flightStats.continents.value.labels"
+        :series="flightStats.continents.value.series"
+    />
+</template>
 <style scoped>
-.chart-wrap {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
 
-.chart-title {
-    font-size: 13px;
-    font-weight: 500;
-    color: #556677;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-}
-
-.chart-empty {
-    height: 280px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 13px;
-    color: #445566;
-}
-
-.charts-row {
-    display: flex;
-    gap: 24px;
-    padding: 16px;
-}
-
-.charts-row > * {
-    flex: 1;
-    min-width: 0;
-}
 </style>
diff --git a/resources/js/Components/FlightsGoneBy/Charts/CountriesChart.vue b/resources/js/Components/FlightsGoneBy/Charts/CountriesChart.vue
index 467d80d..66b6958 100644
--- a/resources/js/Components/FlightsGoneBy/Charts/CountriesChart.vue
+++ b/resources/js/Components/FlightsGoneBy/Charts/CountriesChart.vue
@@ -1,225 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import DonutChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/DonutChart.vue"
+import { FlightStats } from "@/Composables/useFlightStats"
+import ScrollingHorizontalBarChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/ScrollingHorizontalBarChart.vue"
+import ChartTooltip from "@/Components/FlightsGoneBy/Charts/ChartTooltip.vue"
+import { useChartTooltip } from "@/Composables/useChartTooltip"
+
+interface CountryItem {
+    name: string
+    code: string
+    past: number
+    upcoming: number
+}
+
+const props = defineProps<{
+    flightStats: FlightStats
+}>()
+
+const { tooltipItem, tooltipX, tooltipY, onMouseMove, onMouseLeave } = useChartTooltip<CountryItem>()
+
+const countries = computed(() => props.flightStats.countries.value.countries)
+
+const chartEvents = computed(() => ({
+    mouseMove: (_e: MouseEvent, _chart: unknown, config: { dataPointIndex: number }) => {
+        if (config.dataPointIndex < 0) { tooltipItem.value = null; return }
+        tooltipItem.value = countries.value[config.dataPointIndex] ?? null
+    },
+    mouseLeave: () => { tooltipItem.value = null },
+}))
+</script>
+
 <template>
-    <div class="chart-wrap">
-        <div class="chart-title">Top countries</div>
-
-        <div v-if="series.length" class="chart-outer">
-            <div class="chart-scroll" :style="{ height: scrollHeight }" @mousemove="onMouseMove" @mouseleave="onMouseLeave">
-                <UnstyledFlightChart
-                    type="bar"
-                    :height="chartHeight"
-                    :options="chartOptions"
-                    :series="chartSeries"
-                />
-            </div>
-
+    <ScrollingHorizontalBarChart
+        title="Top countries"
+        :series="flightStats.countries.value.series"
+        :categories="countries.map(c => c.name)"
+        :footer-value="countries.length"
+        footer-label="total countries"
+        :max-visible="18"
+        :events="chartEvents"
+        @mousemove="onMouseMove"
+        @mouseleave="onMouseLeave"
+    >
+        <template #tooltip>
             <ChartTooltip :visible="!!tooltipItem" :x="tooltipX" :y="tooltipY">
                 <div class="ct-name">
                     <span :class="`fi fi-${tooltipItem?.code.toLowerCase()}`" />
                     {{ tooltipItem?.name }}
                 </div>
-                <div class="ct-row"><span class="ct-label">Flights</span><span class="ct-val">{{ tooltipItem?.past }}</span></div>
-                <div class="ct-row" v-if="tooltipItem?.upcoming"><span class="ct-label">Upcoming</span><span class="ct-val">{{ tooltipItem?.upcoming }}</span></div>
+                <div class="ct-row">
+                    <span class="ct-label">Flights</span>
+                    <span class="ct-val">{{ tooltipItem?.past }}</span>
+                </div>
+                <div class="ct-row" v-if="tooltipItem?.upcoming">
+                    <span class="ct-label">Upcoming</span>
+                    <span class="ct-val">{{ tooltipItem?.upcoming }}</span>
+                </div>
             </ChartTooltip>
-
-            <div class="chart-footer">
-                <span class="total-count">{{ totalCountries }}</span>
-                <span class="total-label">total countries</span>
-            </div>
-        </div>
-
-        <div v-else class="chart-empty">No country data available</div>
-    </div>
+        </template>
+    </ScrollingHorizontalBarChart>
 </template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { Flight } from '@/Types/types'
-import { useChartTooltip} from "@/Composables/useChartTooltip";
-import ChartTooltip from '@/Components/FlightsGoneBy/Charts/ChartTooltip.vue'
-import UnstyledFlightChart from "@/Components/FlightsGoneBy/UnstyledFlightChart.vue";
-
-const props = defineProps<{
-    flights: Flight[]
-    upcomingFlights: Flight[]
-    maxVisible?: number
-}>()
-
-interface CountryItem {
-    name: string
-    past: number
-    upcoming: number
-    code: string
-}
-
-const { tooltipItem, tooltipX, tooltipY, onMouseMove, onMouseLeave } = useChartTooltip<CountryItem>()
-
-const MAX_VISIBLE = computed(() => props?.maxVisible ?? 12)
-const BAR_HEIGHT = 32
-
-interface CountryItem {
-    name: string
-    code: string
-    past: number
-    upcoming: number
-}
-
-function countCountries(flights: Flight[]): Map<string, { count: number; code: string }> {
-    const counts = new Map<string, { count: number; code: string }>()
-    flights.forEach(f => {
-        const dep = f.departure_airport?.region?.country
-        const arr = f.arrival_airport?.region?.country
-
-        if (dep?.name) {
-            const existing = counts.get(dep.name) ?? { count: 0, code: dep.code }
-            existing.count++
-            counts.set(dep.name, existing)
-        }
-        if (arr?.name && arr.name !== dep?.name) {
-            const existing = counts.get(arr.name) ?? { count: 0, code: arr.code }
-            existing.count++
-            counts.set(arr.name, existing)
-        }
-    })
-    return counts
-}
-
-const series = computed(() => {
-    const past = countCountries(props.flights)
-    const upcoming = countCountries(props.upcomingFlights)
-    const allCountries = new Set([...past.keys(), ...upcoming.keys()])
-    return [...allCountries]
-        .map(name => ({
-            name,
-            code: (past.get(name) ?? upcoming.get(name))!.code,
-            past: past.get(name)?.count ?? 0,
-            upcoming: upcoming.get(name)?.count ?? 0,
-        }))
-        .sort((a, b) => (b.past + b.upcoming) - (a.past + a.upcoming))
-})
-
-const totalCountries = computed(() => series.value.length)
-const chartHeight = computed(() => series.value.length * BAR_HEIGHT + 40)
-const scrollHeight = computed(() => {
-    const visible = Math.min(series.value.length, MAX_VISIBLE.value)
-    return `${visible * BAR_HEIGHT + 40}px`
-})
-
-const chartSeries = computed(() => [
-    { name: 'Flights',   data: series.value.map(s => s.past) },
-    { name: 'Upcoming',  data: series.value.map(s => s.upcoming) },
-])
-
-const chartOptions = computed(() => ({
-    chart: {
-        type: 'bar',
-        background: 'transparent',
-        fontFamily: 'inherit',
-        toolbar: { show: false },
-        animations: { enabled: false },
-        stacked: true,
-        events: {
-            mouseMove: (_e: MouseEvent, _chart: unknown, config: { dataPointIndex: number }) => {
-                if (config.dataPointIndex < 0) { tooltipItem.value = null; return }
-                tooltipItem.value = series.value[config.dataPointIndex] ?? null
-            },
-            mouseLeave: () => { tooltipItem.value = null },
-        },
-    },
-    theme: { mode: 'dark' },
-    plotOptions: {
-        bar: {
-            horizontal: true,
-            barHeight: '60%',
-            borderRadius: 3,
-            borderRadiusWhenStacked: 'last',
-        },
-    },
-    colors: ['#4da6ff', '#ffc107'],
-    dataLabels: { enabled: false },
-    xaxis: {
-        categories: series.value.map(s => s.name),
-        labels: { show: false },
-        axisBorder: { show: false },
-        axisTicks: { show: false },
-    },
-    yaxis: {
-        labels: {
-            style: { colors: '#778899', fontSize: '12px' },
-        },
-    },
-    grid: { show: false },
-    legend: {
-        show: true,
-        position: 'top',
-        horizontalAlign: 'right',
-        labels: { colors: '#778899' },
-        markers: { width: 8, height: 8, radius: 2 },
-        itemMargin: { horizontal: 8 },
-    },
-    tooltip: { enabled: false },
-    states: {
-        hover: { filter: { type: 'lighten', value: 0.1 } },
-    },
-}))
-</script>
-
-<style scoped>
-.chart-wrap {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.chart-title {
-    font-size: 13px;
-    font-weight: 500;
-    color: #556677;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-}
-
-.chart-outer {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.chart-scroll {
-    overflow-y: auto;
-    overflow-x: hidden;
-    scrollbar-width: thin;
-    scrollbar-color: #334455 transparent;
-}
-
-.chart-scroll::-webkit-scrollbar { width: 4px; }
-.chart-scroll::-webkit-scrollbar-track { background: transparent; }
-.chart-scroll::-webkit-scrollbar-thumb { background: #334455; border-radius: 2px; }
-
-.chart-footer {
-    display: flex;
-    align-items: baseline;
-    gap: 6px;
-    padding-left: 4px;
-}
-
-.total-count {
-    font-size: 28px;
-    font-weight: 600;
-    color: #e0e6f0;
-    line-height: 1;
-}
-
-.total-label {
-    font-size: 13px;
-    color: #556677;
-}
-
-.chart-empty {
-    height: 280px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 13px;
-    color: #445566;
-}
-</style>
diff --git a/resources/js/Components/FlightsGoneBy/Charts/FlightClassChart.vue b/resources/js/Components/FlightsGoneBy/Charts/FlightClassChart.vue
index b26ff50..2e4a4ae 100644
--- a/resources/js/Components/FlightsGoneBy/Charts/FlightClassChart.vue
+++ b/resources/js/Components/FlightsGoneBy/Charts/FlightClassChart.vue
@@ -1,89 +1,18 @@
-<template>
-        <FlightChart
-            title="Flight Classes"
-            v-if="series.length"
-            type="donut"
-            height="280"
-            :options="chartOptions"
-            :series="seriesData"
-        />
-</template>
-
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { Flight } from '@/Types/types'
-import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
-
+import DonutChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/DonutChart.vue";
+import {FlightStats} from "@/Composables/useFlightStats";
 const props = defineProps<{
-    flights: Flight[]
+    flightStats: FlightStats
 }>()
-
-const series = computed(() => {
-    const counts = new Map<string, number>()
-    props.flights.forEach(f => {
-        const cls = f.flight_class?.name ?? 'Unknown'
-        counts.set(cls, (counts.get(cls) ?? 0) + 1)
-    })
-    return [...counts.entries()]
-        .sort((a, b) => b[1] - a[1])
-        .map(([name, count]) => ({ name, count }))
-})
-
-const seriesData = computed(() => series.value.map(s => s.count))
-
-const chartOptions = computed(() => ({
-    chart: {
-        type: 'donut',
-        background: 'transparent',
-        fontFamily: 'inherit',
-    },
-    theme: { mode: 'dark' },
-    labels: series.value.map(s => s.name),
-    colors: ['#4da6ff', '#ffc107', '#a150d5', '#22c55e', '#f97316', '#e11d48', '#06b6d4'],
-    dataLabels: {
-        enabled: true,
-        formatter: (val: number) => `${Math.round(val)}%`,
-        style: { fontSize: '12px', fontWeight: 400 },
-        dropShadow: { enabled: false },
-    },
-    plotOptions: {
-        pie: {
-            donut: {
-                size: '60%',
-                labels: {
-                    show: true,
-                    total: {
-                        show: true,
-                        label: 'Total',
-                        fontSize: '13px',
-                        color: '#556677',
-                        formatter: () => props.flights.length.toString(),
-                    },
-                    value: {
-                        fontSize: '22px',
-                        fontWeight: 500,
-                        color: '#e0e6f0',
-                    },
-                },
-            },
-        },
-    },
-    legend: {
-        position: 'bottom',
-        labels: { colors: '#778899' },
-        markers: { width: 8, height: 8, radius: 2 },
-        itemMargin: { horizontal: 12, vertical: 4 },
-    },
-    stroke: { width: 0 },
-    tooltip: {
-        theme: 'dark',
-        y: {
-            formatter: (val: number) => `${val} flights`,
-        },
-    },
-}))
 </script>
-
+<template>
+    <DonutChart
+        title="Flight Classes"
+        :height="280"
+        :labels="flightStats.classes.value.labels"
+        :series="flightStats.classes.value.series"
+    />
+</template>
 <style scoped>
 
 </style>
diff --git a/resources/js/Components/FlightsGoneBy/Charts/FlightReasonsChart.vue b/resources/js/Components/FlightsGoneBy/Charts/FlightReasonsChart.vue
index 0a749d5..6242889 100644
--- a/resources/js/Components/FlightsGoneBy/Charts/FlightReasonsChart.vue
+++ b/resources/js/Components/FlightsGoneBy/Charts/FlightReasonsChart.vue
@@ -1,110 +1,18 @@
-<template>
-        <FlightChart
-            title="Flight Reasons"
-            v-if="series.length"
-            type="donut"
-            height="280"
-            :options="chartOptions"
-            :series="seriesData"
-        />
-</template>
-
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { Flight } from '@/Types/types'
-import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
-
+import DonutChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/DonutChart.vue";
+import {FlightStats} from "@/Composables/useFlightStats";
 const props = defineProps<{
-    flights: Flight[]
+    flightStats: FlightStats
 }>()
-
-const series = computed(() => {
-    const counts = new Map<string, number>()
-    props.flights.forEach(f => {
-        const reason = f.flight_reason?.name ?? 'Unknown'
-        counts.set(reason, (counts.get(reason) ?? 0) + 1)
-    })
-    return [...counts.entries()]
-        .sort((a, b) => b[1] - a[1])
-        .map(([name, count]) => ({ name, count }))
-})
-
-const seriesData = computed(() => series.value.map(s => s.count))
-
-const chartOptions = computed(() => ({
-    chart: {
-        type: 'donut',
-        background: 'transparent',
-        fontFamily: 'inherit',
-    },
-    theme: { mode: 'dark' },
-    labels: series.value.map(s => s.name),
-    colors: ['#4da6ff', '#ffc107', '#a150d5', '#22c55e', '#f97316', '#e11d48', '#06b6d4'],
-    dataLabels: {
-        enabled: true,
-        formatter: (val: number) => `${Math.round(val)}%`,
-        style: { fontSize: '12px', fontWeight: 400 },
-        dropShadow: { enabled: false },
-    },
-    plotOptions: {
-        pie: {
-            donut: {
-                size: '60%',
-                labels: {
-                    show: true,
-                    total: {
-                        show: true,
-                        label: 'Total',
-                        fontSize: '13px',
-                        color: '#556677',
-                        formatter: () => props.flights.length.toString(),
-                    },
-                    value: {
-                        fontSize: '22px',
-                        fontWeight: 500,
-                        color: '#e0e6f0',
-                    },
-                },
-            },
-        },
-    },
-    legend: {
-        position: 'bottom',
-        labels: { colors: '#778899' },
-        markers: { width: 8, height: 8, radius: 2 },
-        itemMargin: { horizontal: 12, vertical: 4 },
-    },
-    stroke: { width: 0 },
-    tooltip: {
-        theme: 'dark',
-        y: {
-            formatter: (val: number) => `${val} flights`,
-        },
-    },
-}))
 </script>
-
+<template>
+    <DonutChart
+        title="Flight Reasons"
+        :height="280"
+        :labels="flightStats.reasons.value.labels"
+        :series="flightStats.reasons.value.series"
+    />
+</template>
 <style scoped>
-.chart-wrap {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
 
-.chart-title {
-    font-size: 13px;
-    font-weight: 500;
-    color: #556677;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-}
-
-.chart-empty {
-    height: 280px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 13px;
-    color: #445566;
-}
 </style>
diff --git a/resources/js/Components/FlightsGoneBy/Charts/FlightTypeChart.vue b/resources/js/Components/FlightsGoneBy/Charts/FlightTypeChart.vue
index 214e093..92c885c 100644
--- a/resources/js/Components/FlightsGoneBy/Charts/FlightTypeChart.vue
+++ b/resources/js/Components/FlightsGoneBy/Charts/FlightTypeChart.vue
@@ -1,91 +1,18 @@
-<template>
-        <FlightChart
-            title="International vs Domestic"
-            v-if="series.length"
-            type="donut"
-            height="280"
-            :options="chartOptions"
-            :series="seriesData"
-        />
-</template>
-
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { Flight } from '@/Types/types'
-import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
-
+import DonutChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/DonutChart.vue";
+import {FlightStats} from "@/Composables/useFlightStats";
 const props = defineProps<{
-    flights: Flight[]
+    flightStats: FlightStats
 }>()
-
-const series = computed(() => {
-    const counts = { International: 0, Domestic: 0 }
-    props.flights.forEach(f => {
-        const dep = f.departure_airport.region?.country?.id
-        const arr = f.arrival_airport.region?.country?.id
-        if (dep && arr) {
-            dep === arr ? counts.Domestic++ : counts.International++
-        }
-    })
-    return Object.entries(counts)
-        .filter(([, count]) => count > 0)
-        .map(([name, count]) => ({ name, count }))
-})
-
-const seriesData = computed(() => series.value.map(s => s.count))
-
-const chartOptions = computed(() => ({
-    chart: {
-        type: 'donut',
-        background: 'transparent',
-        fontFamily: 'inherit',
-    },
-    theme: { mode: 'dark' },
-    labels: series.value.map(s => s.name),
-    colors: ['#4da6ff', '#a150d5'],
-    dataLabels: {
-        enabled: true,
-        formatter: (val: number) => `${Math.round(val)}%`,
-        style: { fontSize: '12px', fontWeight: 400 },
-        dropShadow: { enabled: false },
-    },
-    plotOptions: {
-        pie: {
-            donut: {
-                size: '60%',
-                labels: {
-                    show: true,
-                    total: {
-                        show: true,
-                        label: 'Total',
-                        fontSize: '13px',
-                        color: '#556677',
-                        formatter: () => props.flights.length.toString(),
-                    },
-                    value: {
-                        fontSize: '22px',
-                        fontWeight: 500,
-                        color: '#e0e6f0',
-                    },
-                },
-            },
-        },
-    },
-    legend: {
-        position: 'bottom',
-        labels: { colors: '#778899' },
-        markers: { width: 8, height: 8, radius: 2 },
-        itemMargin: { horizontal: 12, vertical: 4 },
-    },
-    stroke: { width: 0 },
-    tooltip: {
-        theme: 'dark',
-        y: {
-            formatter: (val: number) => `${val} flights`,
-        },
-    },
-}))
 </script>
-
+<template>
+    <DonutChart
+        title="Flight Types"
+        :height="280"
+        :labels="flightStats.flightTypes.value.labels"
+        :series="flightStats.flightTypes.value.series"
+    />
+</template>
 <style scoped>
+
 </style>
diff --git a/resources/js/Components/FlightsGoneBy/Charts/FlightsPerDayChart.vue b/resources/js/Components/FlightsGoneBy/Charts/FlightsPerDayChart.vue
index 9d7fd2b..3589a55 100644
--- a/resources/js/Components/FlightsGoneBy/Charts/FlightsPerDayChart.vue
+++ b/resources/js/Components/FlightsGoneBy/Charts/FlightsPerDayChart.vue
@@ -1,99 +1,22 @@
-<template>
-        <FlightChart
-            title="Flights per day of week"
-            type="bar"
-            height="220"
-            :options="chartOptions"
-            :series="series"
-        />
-</template>
-
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { Flight } from '@/Types/types'
-import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
+import {FlightStats} from "@/Composables/useFlightStats";
+import VerticalBarChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/VerticalBarChart.vue";
 
 const props = defineProps<{
-    flights: Flight[]
-    upcomingFlights: Flight[]
+    flightStats: FlightStats
 }>()
 
-const DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
-
-// JS getDay() is 0=Sun, 1=Mon ... 6=Sat — remap to Mon-first
-const dayIndex = (f: Flight): number => {
-    const date = new Date(f.departure_date)
-    const localDay = new Intl.DateTimeFormat('en', {
-        timeZone: f.departure_airport.timezone,
-        weekday: 'long',
-    }).format(date)
-    const idx = DAYS.indexOf(localDay)
-    return idx === -1 ? 0 : idx
-}
-
-const countByDay = (list: Flight[]) =>
-    DAYS.map((_, i) => list.filter(f => dayIndex(f) === i).length)
-
-
-const series = computed(() => [
-    { name: 'Flown',    data: countByDay(props.flights) },
-    { name: 'Upcoming', data: countByDay(props.upcomingFlights) },
-])
-
-const chartOptions = computed(() => ({
-    chart: {
-        type: 'bar',
-        stacked: true,
-        toolbar: { show: false },
-        background: 'transparent',
-        fontFamily: 'inherit',
-    },
-    theme: { mode: 'dark' },
-    plotOptions: {
-        bar: {
-            borderRadius: 3,
-            borderRadiusWhenStacked: 'last',
-            columnWidth: '55%',
-        },
-    },
-    colors: ['#4da6ff', '#ffc107'],
-    dataLabels: { enabled: false },
-    grid: {
-        borderColor: 'rgba(255,255,255,0.05)',
-        yaxis: { lines: { show: true } },
-        xaxis: { lines: { show: false } },
-    },
-    xaxis: {
-        categories: DAYS,
-        axisBorder: { show: false },
-        axisTicks: { show: false },
-        labels: {
-            style: { colors: '#445566', fontSize: '12px' },
-        },
-    },
-    yaxis: {
-        labels: {
-            style: { colors: '#445566', fontSize: '12px' },
-        },
-    },
-    legend: {
-        position: 'top',
-        horizontalAlign: 'right',
-        labels: { colors: '#778899' },
-        markers: { width: 8, height: 8, radius: 2 },
-        itemMargin: { horizontal: 12 },
-    },
-    tooltip: {
-        theme: 'dark',
-        shared: true,
-        intersect: false,
-    },
-    states: {
-        hover: { filter: { type: 'lighten', value: 0.1 } },
-        active: { filter: { type: 'none' } },
-    },
-}))
 </script>
+<template>
+    <VerticalBarChart
+        title="Flights per Day"
+        type="bar"
+        :height="220"
+        :categories="flightStats.perDay.value.days"
+        :series="flightStats.perDay.value.series"
+    />
+</template>
 
 <style scoped>
+
 </style>
diff --git a/resources/js/Components/FlightsGoneBy/Charts/FlightsPerMonthChart.vue b/resources/js/Components/FlightsGoneBy/Charts/FlightsPerMonthChart.vue
index 0589762..dc1775a 100644
--- a/resources/js/Components/FlightsGoneBy/Charts/FlightsPerMonthChart.vue
+++ b/resources/js/Components/FlightsGoneBy/Charts/FlightsPerMonthChart.vue
@@ -1,95 +1,22 @@
+<script setup lang="ts">
+import {FlightStats} from "@/Composables/useFlightStats";
+import VerticalBarChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/VerticalBarChart.vue";
+
+const props = defineProps<{
+    flightStats: FlightStats
+}>()
+
+</script>
 <template>
-    <FlightChart
-        title="Flights per month"
+    <VerticalBarChart
+        title="Flights per Month"
         type="bar"
-        height="220"
-        :options="chartOptions"
-        :series="series"
+        :height="220"
+        :categories="flightStats.perMonth.value.months"
+        :series="flightStats.perMonth.value.series"
     />
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { Flight } from '@/Types/types'
-import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
-
-const props = defineProps<{
-    flights: Flight[]
-    upcomingFlights: Flight[]
-}>()
-
-const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-
-const monthIndex = (f: Flight): number => {
-    const date = new Date(f.departure_date)
-    return Number(new Intl.DateTimeFormat('en', {
-        timeZone: f.departure_airport.timezone,
-        month: 'numeric',
-    }).format(date)) - 1  // numeric returns 1-12, convert to 0-indexed
-}
-
-const countByMonth = (list: Flight[]) =>
-    MONTHS.map((_, i) => list.filter(f => monthIndex(f) === i).length)
-
-const series = computed(() => [
-    { name: 'Flown',    data: countByMonth(props.flights) },
-    { name: 'Upcoming', data: countByMonth(props.upcomingFlights) },
-])
-
-const chartOptions = computed(() => ({
-    chart: {
-        type: 'bar',
-        stacked: true,
-        toolbar: { show: false },
-        background: 'transparent',
-        fontFamily: 'inherit',
-    },
-    theme: { mode: 'dark' },
-    plotOptions: {
-        bar: {
-            borderRadius: 3,
-            borderRadiusWhenStacked: 'last',
-            columnWidth: '55%',
-        },
-    },
-    colors: ['#4da6ff', '#ffc107'],
-    dataLabels: { enabled: false },
-    grid: {
-        borderColor: 'rgba(255,255,255,0.05)',
-        yaxis: { lines: { show: true } },
-        xaxis: { lines: { show: false } },
-    },
-    xaxis: {
-        categories: MONTHS,
-        axisBorder: { show: false },
-        axisTicks: { show: false },
-        labels: {
-            style: { colors: '#445566', fontSize: '12px' },
-        },
-    },
-    yaxis: {
-        labels: {
-            style: { colors: '#445566', fontSize: '12px' },
-        },
-    },
-    legend: {
-        position: 'top',
-        horizontalAlign: 'right',
-        labels: { colors: '#778899' },
-        markers: { width: 8, height: 8, radius: 2 },
-        itemMargin: { horizontal: 12 },
-    },
-    tooltip: {
-        theme: 'dark',
-        shared: true,
-        intersect: false,
-    },
-    states: {
-        hover: { filter: { type: 'lighten', value: 0.1 } },
-        active: { filter: { type: 'none' } },
-    },
-}))
-</script>
-
 <style scoped>
+
 </style>
diff --git a/resources/js/Components/FlightsGoneBy/Charts/FlightsPerYearChart.vue b/resources/js/Components/FlightsGoneBy/Charts/FlightsPerYearChart.vue
index 2239732..3e6e990 100644
--- a/resources/js/Components/FlightsGoneBy/Charts/FlightsPerYearChart.vue
+++ b/resources/js/Components/FlightsGoneBy/Charts/FlightsPerYearChart.vue
@@ -1,109 +1,21 @@
-<template>
-        <FlightChart
-            title="Flights per year"
-            type="bar"
-            height="220"
-            :options="chartOptions"
-            :series="series"
-        />
-</template>
-
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { Flight } from '@/Types/types'
-import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
+import {FlightStats} from "@/Composables/useFlightStats";
+import VerticalBarChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/VerticalBarChart.vue";
 
 const props = defineProps<{
-    flights: Flight[]
-    upcomingFlights: Flight[]
+    flightStats: FlightStats
 }>()
 
-const flightYear = (f: Flight): number =>
-    Number(new Intl.DateTimeFormat('en', {
-        timeZone: f.departure_airport.timezone,
-        year: 'numeric',
-    }).format(new Date(f.departure_date)))
-
-const years = computed(() => {
-    const allYears = new Set<number>()
-    ;[...props.flights, ...props.upcomingFlights].forEach(f =>
-        allYears.add(flightYear(f))
-    )
-    const sorted = [...allYears].sort((a, b) => a - b)
-
-    let min = sorted[0]
-    let max = sorted[sorted.length - 1]
-
-    while (max - min + 1 < 5) {
-        min--
-        if (max - min + 1 < 5) max++
-    }
-
-    return Array.from({ length: max - min + 1 }, (_, i) => min + i)
-})
-
-const countByYear = (list: Flight[]) =>
-    years.value.map(year => list.filter(f => flightYear(f) === year).length)
-
-const series = computed(() => [
-    { name: 'Flown',    data: countByYear(props.flights) },
-    { name: 'Upcoming', data: countByYear(props.upcomingFlights) },
-])
-
-const chartOptions = computed(() => ({
-    chart: {
-        type: 'bar',
-        stacked: true,
-        toolbar: { show: false },
-        background: 'transparent',
-        fontFamily: 'inherit',
-    },
-    theme: { mode: 'dark' },
-    plotOptions: {
-        bar: {
-            borderRadius: 3,
-            borderRadiusWhenStacked: 'last',
-            columnWidth: '55%',
-        },
-    },
-    colors: ['#4da6ff', '#ffc107'],
-    dataLabels: { enabled: false },
-    grid: {
-        borderColor: 'rgba(255,255,255,0.05)',
-        yaxis: { lines: { show: true } },
-        xaxis: { lines: { show: false } },
-    },
-    xaxis: {
-        categories: years.value,
-        axisBorder: { show: false },
-        axisTicks: { show: false },
-        labels: {
-            style: { colors: '#445566', fontSize: '12px' },
-        },
-    },
-    yaxis: {
-        labels: {
-            style: { colors: '#445566', fontSize: '12px' },
-        },
-    },
-    legend: {
-        position: 'top',
-        horizontalAlign: 'right',
-        labels: { colors: '#778899' },
-        markers: { width: 8, height: 8, radius: 2 },
-        itemMargin: { horizontal: 12 },
-    },
-    tooltip: {
-        theme: 'dark',
-        shared: true,
-        intersect: false,
-    },
-    states: {
-        hover: { filter: { type: 'lighten', value: 0.1 } },
-        active: { filter: { type: 'none' } },
-    },
-}))
 </script>
+<template>
+    <VerticalBarChart
+        title="Flights per year"
+        type="bar"
+        :height="220"
+        :categories="flightStats.perYear.value.years"
+        :series="flightStats.perYear.value.series"
+    />
+</template>
 
 <style scoped>
 
diff --git a/resources/js/Components/FlightsGoneBy/Charts/SeatTypeChart.vue b/resources/js/Components/FlightsGoneBy/Charts/SeatTypeChart.vue
index a503592..9e4c9b3 100644
--- a/resources/js/Components/FlightsGoneBy/Charts/SeatTypeChart.vue
+++ b/resources/js/Components/FlightsGoneBy/Charts/SeatTypeChart.vue
@@ -1,88 +1,18 @@
+<script setup lang="ts">
+import DonutChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/DonutChart.vue";
+import {FlightStats} from "@/Composables/useFlightStats";
+const props = defineProps<{
+    flightStats: FlightStats
+}>()
+</script>
 <template>
-    <FlightChart
+    <DonutChart
         title="Seat Types"
-        v-if="series.length"
-        type="donut"
-        height="280"
-        :options="chartOptions"
-        :series="seriesData"
+        :height="280"
+        :labels="flightStats.seatTypes.value.labels"
+        :series="flightStats.seatTypes.value.series"
     />
 </template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { Flight } from '@/Types/types'
-import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
-
-const props = defineProps<{
-    flights: Flight[]
-}>()
-
-const series = computed(() => {
-    const counts = new Map<string, number>()
-    props.flights.forEach(f => {
-        const seat = f.seat_type?.name ?? 'Unknown'
-        counts.set(seat, (counts.get(seat) ?? 0) + 1)
-    })
-    return [...counts.entries()]
-        .sort((a, b) => b[1] - a[1])
-        .map(([name, count]) => ({ name, count }))
-})
-
-const seriesData = computed(() => series.value.map(s => s.count))
-
-const chartOptions = computed(() => ({
-    chart: {
-        type: 'donut',
-        background: 'transparent',
-        fontFamily: 'inherit',
-    },
-    theme: { mode: 'dark' },
-    labels: series.value.map(s => s.name),
-    colors: ['#4da6ff', '#ffc107', '#a150d5', '#22c55e', '#f97316', '#e11d48', '#06b6d4'],
-    dataLabels: {
-        enabled: true,
-        formatter: (val: number) => `${Math.round(val)}%`,
-        style: { fontSize: '12px', fontWeight: 400 },
-        dropShadow: { enabled: false },
-    },
-    plotOptions: {
-        pie: {
-            donut: {
-                size: '60%',
-                labels: {
-                    show: true,
-                    total: {
-                        show: true,
-                        label: 'Total',
-                        fontSize: '13px',
-                        color: '#556677',
-                        formatter: () => props.flights.length.toString(),
-                    },
-                    value: {
-                        fontSize: '22px',
-                        fontWeight: 500,
-                        color: '#e0e6f0',
-                    },
-                },
-            },
-        },
-    },
-    legend: {
-        position: 'bottom',
-        labels: { colors: '#778899' },
-        markers: { width: 8, height: 8, radius: 2 },
-        itemMargin: { horizontal: 12, vertical: 4 },
-    },
-    stroke: { width: 0 },
-    tooltip: {
-        theme: 'dark',
-        y: {
-            formatter: (val: number) => `${val} flights`,
-        },
-    },
-}))
-</script>
-
 <style scoped>
+
 </style>
diff --git a/resources/js/Components/FlightsGoneBy/Charts/TopAirlinesChart.vue b/resources/js/Components/FlightsGoneBy/Charts/TopAirlinesChart.vue
index a99b55f..016bd7a 100644
--- a/resources/js/Components/FlightsGoneBy/Charts/TopAirlinesChart.vue
+++ b/resources/js/Components/FlightsGoneBy/Charts/TopAirlinesChart.vue
@@ -1,48 +1,11 @@
-<template>
-    <div class="chart-wrap">
-        <div class="chart-title">Top airlines</div>
-
-        <div v-if="series.length" class="chart-outer">
-            <div class="chart-scroll" :style="{ height: scrollHeight }" @mousemove="onMouseMove" @mouseleave="onMouseLeave">
-                <UnstyledFlightChart
-                    type="bar"
-                    :height="chartHeight"
-                    :options="chartOptions"
-                    :series="chartSeries"
-                />
-            </div>
-
-            <ChartTooltip :visible="!!tooltipItem" :x="tooltipX" :y="tooltipY">
-                <div class="ct-name"><img :src="`${page.logo_api_url}/airlines/logos/tail/id/${tooltipItem?.id}`" width="24" height="24"/>{{ tooltipItem?.name }}</div>
-                <div class="ct-row"><span class="ct-label">Flights</span><span class="ct-val">{{ tooltipItem?.past }}</span></div>
-                <div class="ct-row" v-if="tooltipItem?.upcoming"><span class="ct-label">Upcoming</span><span class="ct-val">{{ tooltipItem?.upcoming }}</span></div>
-            </ChartTooltip>
-
-            <div class="chart-footer">
-                <span class="total-count">{{ totalAirlines }}</span>
-                <span class="total-label">total airlines</span>
-            </div>
-        </div>
-
-        <div v-else class="chart-empty">No airline data available</div>
-    </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
-import type {Flight, SharedProps} from '@/Types/types'
+import { FlightStats } from "@/Composables/useFlightStats"
 import { useChartTooltip } from '@/Composables/useChartTooltip'
-import ChartTooltip from '@/Components/FlightsGoneBy/Charts/ChartTooltip.vue'
-import {usePage} from "@inertiajs/vue3";
-import UnstyledFlightChart from "@/Components/FlightsGoneBy/UnstyledFlightChart.vue";
-
-const page = usePage<SharedProps>().props
-
-
-const props = defineProps<{
-    flights: Flight[]
-    upcomingFlights: Flight[]
-}>()
+import { usePage } from "@inertiajs/vue3"
+import { SharedProps } from '@/Types/types'
+import ScrollingHorizontalBarChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/ScrollingHorizontalBarChart.vue"
+import ChartTooltip from "@/Components/FlightsGoneBy/Charts/ChartTooltip.vue"
 
 interface AirlineItem {
     name: string
@@ -51,160 +14,50 @@ interface AirlineItem {
     id: number
 }
 
+const props = defineProps<{
+    flightStats: FlightStats
+}>()
+
+const page = usePage<SharedProps>().props
 const { tooltipItem, tooltipX, tooltipY, onMouseMove, onMouseLeave } = useChartTooltip<AirlineItem>()
 
-const MAX_VISIBLE = 12
-const BAR_HEIGHT = 32
+const airlines = computed(() => props.flightStats.topAirlines.value.airlines)
 
-function countAirlines(flights: Flight[]): Map<string, { count: number; id: number }> {
-    const counts = new Map<string, { count: number; id: number }>()
-    flights.forEach(f => {
-        const airline = f.airline
-        if (!airline?.name) return
-        const existing = counts.get(airline.name) ?? { count: 0, id: airline.id }
-        existing.count++
-        counts.set(airline.name, existing)
-    })
-    return counts
-}
-
-const series = computed(() => {
-    const past = countAirlines(props.flights)
-    const upcoming = countAirlines(props.upcomingFlights)
-    const allAirlines = new Set([...past.keys(), ...upcoming.keys()])
-    return [...allAirlines]
-        .map(name => ({
-            name,
-            id: (past.get(name) ?? upcoming.get(name))!.id,
-            past: past.get(name)?.count ?? 0,
-            upcoming: upcoming.get(name)?.count ?? 0,
-        }))
-        .sort((a, b) => (b.past + b.upcoming) - (a.past + a.upcoming))
-})
-
-const totalAirlines = computed(() => series.value.length)
-const chartHeight = computed(() => series.value.length * BAR_HEIGHT + 40)
-const scrollHeight = computed(() => {
-    const visible = Math.min(series.value.length, MAX_VISIBLE)
-    return `${visible * BAR_HEIGHT + 40}px`
-})
-
-const chartSeries = computed(() => [
-    { name: 'Flights',  data: series.value.map(s => s.past) },
-    { name: 'Upcoming', data: series.value.map(s => s.upcoming) },
-])
-
-const chartOptions = computed(() => ({
-    chart: {
-        type: 'bar',
-        background: 'transparent',
-        fontFamily: 'inherit',
-        toolbar: { show: false },
-        animations: { enabled: false },
-        stacked: true,
-        events: {
-            mouseMove: (_e: MouseEvent, _chart: unknown, config: { dataPointIndex: number }) => {
-                if (config.dataPointIndex < 0) { tooltipItem.value = null; return }
-                tooltipItem.value = series.value[config.dataPointIndex] ?? null
-            },
-            mouseLeave: () => { tooltipItem.value = null },
-        },
-    },
-    theme: { mode: 'dark' },
-    plotOptions: {
-        bar: {
-            horizontal: true,
-            barHeight: '60%',
-            borderRadius: 3,
-            borderRadiusWhenStacked: 'last',
-        },
-    },
-    colors: ['#4da6ff', '#ffc107'],
-    dataLabels: { enabled: false },
-    xaxis: {
-        categories: series.value.map(s => s.name),
-        labels: { show: false },
-        axisBorder: { show: false },
-        axisTicks: { show: false },
-    },
-    yaxis: {
-        labels: {
-            style: { colors: '#778899', fontSize: '12px' },
-        },
-    },
-    grid: { show: false },
-    legend: {
-        show: true,
-        position: 'top',
-        horizontalAlign: 'right',
-        labels: { colors: '#778899' },
-        markers: { width: 8, height: 8, radius: 2 },
-        itemMargin: { horizontal: 8 },
-    },
-    tooltip: { enabled: false },
-    states: {
-        hover: { filter: { type: 'lighten', value: 0.1 } },
+const chartEvents = computed(() => ({
+    mouseMove: (_e: MouseEvent, _chart: unknown, config: { dataPointIndex: number }) => {
+        if (config.dataPointIndex < 0) { tooltipItem.value = null; return }
+        tooltipItem.value = airlines.value[config.dataPointIndex] ?? null
     },
+    mouseLeave: () => { tooltipItem.value = null },
 }))
 </script>
 
-<style scoped>
-.chart-wrap {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.chart-title {
-    font-size: 13px;
-    font-weight: 500;
-    color: #556677;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-}
-
-.chart-outer {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.chart-scroll {
-    overflow-y: auto;
-    overflow-x: hidden;
-    scrollbar-width: thin;
-    scrollbar-color: #334455 transparent;
-}
-
-.chart-scroll::-webkit-scrollbar { width: 4px; }
-.chart-scroll::-webkit-scrollbar-track { background: transparent; }
-.chart-scroll::-webkit-scrollbar-thumb { background: #334455; border-radius: 2px; }
-
-.chart-footer {
-    display: flex;
-    align-items: baseline;
-    gap: 6px;
-    padding-left: 4px;
-}
-
-.total-count {
-    font-size: 28px;
-    font-weight: 600;
-    color: #e0e6f0;
-    line-height: 1;
-}
-
-.total-label {
-    font-size: 13px;
-    color: #556677;
-}
-
-.chart-empty {
-    height: 280px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 13px;
-    color: #445566;
-}
-</style>
+<template>
+    <ScrollingHorizontalBarChart
+        title="Top airlines"
+        :series="flightStats.topAirlines.value.series"
+        :categories="airlines.map(a => a.name)"
+        :footer-value="airlines.length"
+        footer-label="total airlines"
+        :events="chartEvents"
+        @mousemove="onMouseMove"
+        @mouseleave="onMouseLeave"
+    >
+        <template #tooltip>
+            <ChartTooltip :visible="!!tooltipItem" :x="tooltipX" :y="tooltipY">
+                <div class="ct-name">
+                    <img :src="`${page.logo_api_url}/airlines/logos/tail/id/${tooltipItem?.id}`" width="24" height="24"/>
+                    {{ tooltipItem?.name }}
+                </div>
+                <div class="ct-row">
+                    <span class="ct-label">Flights</span>
+                    <span class="ct-val">{{ tooltipItem?.past }}</span>
+                </div>
+                <div class="ct-row" v-if="tooltipItem?.upcoming">
+                    <span class="ct-label">Upcoming</span>
+                    <span class="ct-val">{{ tooltipItem?.upcoming }}</span>
+                </div>
+            </ChartTooltip>
+        </template>
+    </ScrollingHorizontalBarChart>
+</template>
diff --git a/resources/js/Components/FlightsGoneBy/Charts/TopAirportsChart.vue b/resources/js/Components/FlightsGoneBy/Charts/TopAirportsChart.vue
index f7f402b..dc6cad8 100644
--- a/resources/js/Components/FlightsGoneBy/Charts/TopAirportsChart.vue
+++ b/resources/js/Components/FlightsGoneBy/Charts/TopAirportsChart.vue
@@ -1,17 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { FlightStats } from "@/Composables/useFlightStats"
+import { useChartTooltip } from '@/Composables/useChartTooltip'
+import ScrollingHorizontalBarChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/ScrollingHorizontalBarChart.vue"
+import ChartTooltip from "@/Components/FlightsGoneBy/Charts/ChartTooltip.vue"
+
+interface AirportItem {
+    label: string
+    fullName: string
+    departures: number
+    arrivals: number
+    upcoming: number
+}
+
+const props = defineProps<{
+    flightStats: FlightStats
+}>()
+
+const { tooltipItem, tooltipX, tooltipY, onMouseMove, onMouseLeave } = useChartTooltip<AirportItem>()
+
+const airports = computed(() => props.flightStats.topAirports.value.airports)
+
+const chartEvents = computed(() => ({
+    mouseMove: (_e: MouseEvent, _chart: unknown, config: { dataPointIndex: number }) => {
+        if (config.dataPointIndex < 0) { tooltipItem.value = null; return }
+        tooltipItem.value = airports.value[config.dataPointIndex] ?? null
+    },
+    mouseLeave: () => { tooltipItem.value = null },
+}))
+</script>
+
 <template>
-    <div class="chart-wrap">
-        <div class="chart-title">Top airports</div>
-
-        <div v-if="series.length" class="chart-outer">
-            <div class="chart-scroll" :style="{ height: scrollHeight }" @mousemove="onMouseMove" @mouseleave="onMouseLeave">
-                <UnstyledFlightChart
-                    type="bar"
-                    :height="chartHeight"
-                    :options="chartOptions"
-                    :series="chartSeries"
-                />
-            </div>
-
+    <ScrollingHorizontalBarChart
+        title="Top airports"
+        :series="flightStats.topAirports.value.series"
+        :categories="airports.map(a => a.label)"
+        :footer-value="airports.length"
+        footer-label="total airports"
+        :colors="['#4da6ff', '#a150d5', '#ffc107']"
+        :events="chartEvents"
+        @mousemove="onMouseMove"
+        @mouseleave="onMouseLeave"
+    >
+        <template #tooltip>
             <ChartTooltip :visible="!!tooltipItem" :x="tooltipX" :y="tooltipY">
                 <div class="ct-name">{{ tooltipItem?.fullName }}</div>
                 <div class="ct-sub">{{ tooltipItem?.label }}</div>
@@ -28,224 +59,11 @@
                     <span class="ct-val">{{ tooltipItem?.upcoming }}</span>
                 </div>
             </ChartTooltip>
-
-            <div class="chart-footer">
-                <span class="total-count">{{ totalAirports }}</span>
-                <span class="total-label">total airports</span>
-            </div>
-        </div>
-
-        <div v-else class="chart-empty">No airport data available</div>
-    </div>
+        </template>
+    </ScrollingHorizontalBarChart>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { Airport, Flight } from '@/Types/types'
-import { useChartTooltip } from '@/Composables/useChartTooltip'
-import ChartTooltip from '@/Components/FlightsGoneBy/Charts/ChartTooltip.vue'
-import UnstyledFlightChart from "@/Components/FlightsGoneBy/UnstyledFlightChart.vue";
-
-const props = defineProps<{
-    flights: Flight[]
-    upcomingFlights: Flight[]
-}>()
-
-interface AirportItem {
-    label: string
-    fullName: string
-    departures: number
-    arrivals: number
-    upcoming: number
-}
-
-const { tooltipItem, tooltipX, tooltipY, onMouseMove, onMouseLeave } = useChartTooltip<AirportItem>()
-
-const MAX_VISIBLE = 12
-const BAR_HEIGHT = 32
-
-function airportLabel(airport: Airport | null | undefined): string | null {
-    if (!airport) return null
-    return airport.iata_code ?? airport.icao_code ?? airport.name ?? null
-}
-
-const series = computed((): AirportItem[] => {
-    const map = new Map<string, AirportItem>()
-    const empty = (): AirportItem => ({ departures: 0, arrivals: 0, upcoming: 0, label: '', fullName: '' })
-
-    props.flights.forEach(f => {
-        const depLabel = airportLabel(f.departure_airport)
-        const arrLabel = airportLabel(f.arrival_airport)
-
-        if (depLabel) {
-            const e = map.get(depLabel) ?? empty()
-            e.departures++
-            e.label = depLabel
-            e.fullName = f.departure_airport?.name ?? depLabel
-            map.set(depLabel, e)
-        }
-        if (arrLabel) {
-            const e = map.get(arrLabel) ?? empty()
-            e.arrivals++
-            e.label = arrLabel
-            e.fullName = f.arrival_airport?.name ?? arrLabel
-            map.set(arrLabel, e)
-        }
-    })
-
-    props.upcomingFlights.forEach(f => {
-        const depLabel = airportLabel(f.departure_airport)
-        const arrLabel = airportLabel(f.arrival_airport)
-
-        if (depLabel) {
-            const e = map.get(depLabel) ?? empty()
-            e.upcoming++
-            e.label = depLabel
-            e.fullName = f.departure_airport?.name ?? depLabel
-            map.set(depLabel, e)
-        }
-        if (arrLabel) {
-            const e = map.get(arrLabel) ?? empty()
-            e.upcoming++
-            e.label = arrLabel
-            e.fullName = f.arrival_airport?.name ?? arrLabel
-            map.set(arrLabel, e)
-        }
-    })
-
-    return [...map.values()]
-        .sort((a, b) =>
-            (b.departures + b.arrivals + b.upcoming) - (a.departures + a.arrivals + a.upcoming)
-        )
-})
-
-const totalAirports = computed(() => series.value.length)
-const chartHeight = computed(() => series.value.length * BAR_HEIGHT + 40)
-const scrollHeight = computed(() => {
-    const visible = Math.min(series.value.length, MAX_VISIBLE)
-    return `${visible * BAR_HEIGHT + 40}px`
-})
-
-const chartSeries = computed(() => [
-    { name: 'Departures', data: series.value.map(s => s.departures) },
-    { name: 'Arrivals',   data: series.value.map(s => s.arrivals) },
-    { name: 'Upcoming',   data: series.value.map(s => s.upcoming) },
-])
-
-const chartOptions = computed(() => ({
-    chart: {
-        type: 'bar',
-        background: 'transparent',
-        fontFamily: 'inherit',
-        toolbar: { show: false },
-        animations: { enabled: false },
-        stacked: true,
-        events: {
-            mouseMove: (_e: MouseEvent, _chart: unknown, config: { dataPointIndex: number }) => {
-                if (config.dataPointIndex < 0) { tooltipItem.value = null; return }
-                tooltipItem.value = series.value[config.dataPointIndex] ?? null
-            },
-            mouseLeave: () => { tooltipItem.value = null },
-        },
-    },
-    theme: { mode: 'dark' },
-    plotOptions: {
-        bar: {
-            horizontal: true,
-            barHeight: '60%',
-            borderRadius: 3,
-            borderRadiusWhenStacked: 'last',
-        },
-    },
-    colors: ['#4da6ff', '#a150d5', '#ffc107'],
-    dataLabels: { enabled: false },
-    xaxis: {
-        categories: series.value.map(s => s.label),
-        labels: { show: false },
-        axisBorder: { show: false },
-        axisTicks: { show: false },
-    },
-    yaxis: {
-        labels: {
-            style: { colors: '#778899', fontSize: '12px' },
-        },
-    },
-    grid: { show: false },
-    legend: {
-        show: true,
-        position: 'top',
-        horizontalAlign: 'right',
-        labels: { colors: '#778899' },
-        markers: { width: 8, height: 8, radius: 2 },
-        itemMargin: { horizontal: 8 },
-    },
-    tooltip: { enabled: false },
-    states: {
-        hover: { filter: { type: 'lighten', value: 0.1 } },
-    },
-}))
-</script>
-
 <style scoped>
-.chart-wrap {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.chart-title {
-    font-size: 13px;
-    font-weight: 500;
-    color: #556677;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-}
-
-.chart-outer {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.chart-scroll {
-    overflow-y: auto;
-    overflow-x: hidden;
-    scrollbar-width: thin;
-    scrollbar-color: #334455 transparent;
-}
-
-.chart-scroll::-webkit-scrollbar { width: 4px; }
-.chart-scroll::-webkit-scrollbar-track { background: transparent; }
-.chart-scroll::-webkit-scrollbar-thumb { background: #334455; border-radius: 2px; }
-
-.chart-footer {
-    display: flex;
-    align-items: baseline;
-    gap: 6px;
-    padding-left: 4px;
-}
-
-.total-count {
-    font-size: 28px;
-    font-weight: 600;
-    color: #e0e6f0;
-    line-height: 1;
-}
-
-.total-label {
-    font-size: 13px;
-    color: #556677;
-}
-
-.chart-empty {
-    height: 280px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 13px;
-    color: #445566;
-}
-
 .ct-sub {
     font-size: 11px;
     color: #556677;
diff --git a/resources/js/Components/FlightsGoneBy/DepartureBoard.vue b/resources/js/Components/FlightsGoneBy/DepartureBoard.vue
index 36db284..a95b311 100644
--- a/resources/js/Components/FlightsGoneBy/DepartureBoard.vue
+++ b/resources/js/Components/FlightsGoneBy/DepartureBoard.vue
@@ -8,12 +8,14 @@ import type { DataTableSortItem } from 'vuetify';
 import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
 import AirportToolTip from "@/Components/FlightsGoneBy/AirportToolTip.vue";
 import AircraftToolTip from "@/Components/FlightsGoneBy/AircraftToolTip.vue";
+import {FlightStats} from "@/Composables/useFlightStats";
 
 const props = defineProps<{
-    flights: Flight[]
+    flightStats: FlightStats
     canEdit: boolean
 }>()
 
+
 const headers = [
     { title: '', key: 'airline', sortable: true },
     { title: 'FLIGHT', key: 'flight_number', sortable: true },
@@ -58,13 +60,11 @@ const isSorting = computed(() => sortBy.value.length > 0)
 
 // Split flights into upcoming vs departed, sorted by date within each group
 const upcomingFlights = computed(() =>
-    props.flights
-        .filter(f => new Date(f.departure_date) >= today)
-        .sort((a, b) => new Date(a.departure_date).getTime() - new Date(b.departure_date).getTime())
+    props.flightStats.upcomingFlights.value
 )
 
 const departedFlights = computed(() =>
-    props.flights
+    props.flightStats.pastFlights.value
         .filter(f => new Date(f.departure_date) < today)
         .sort((a, b) => new Date(b.departure_date).getTime() - new Date(a.departure_date).getTime())
 )
@@ -89,8 +89,13 @@ const groupedItems = computed<GroupedFlight[]>(() => {
 })
 
 // When sorting, pass all flights flat; when not sorting, pass grouped (headers will be rendered via #item slot trick)
+const allFlights = computed(() => [
+    ...props.flightStats.upcomingFlights.value,
+    ...props.flightStats.pastFlights.value,
+])
+
 const tableItems = computed(() =>
-    isSorting.value ? props.flights : groupedItems.value
+    isSorting.value ? allFlights.value : groupedItems.value
 )
 </script>
 
diff --git a/resources/js/Components/FlightsGoneBy/FlightCharts.vue b/resources/js/Components/FlightsGoneBy/FlightCharts.vue
index b8339f4..e4964d9 100644
--- a/resources/js/Components/FlightsGoneBy/FlightCharts.vue
+++ b/resources/js/Components/FlightsGoneBy/FlightCharts.vue
@@ -1,42 +1,3 @@
-<template>
-    <!-- Year — full width -->
-    <div class="flight-charts glass">
-        <FlightsPerYearChart :flights="flights" :upcoming-flights="upcomingFlights" />
-    </div>
-
-    <!-- Month + Day of week -->
-    <div class="flight-charts glass charts-row">
-        <FlightsPerMonthChart :flights="flights" :upcoming-flights="upcomingFlights" />
-        <FlightsPerDayChart :flights="flights" :upcoming-flights="upcomingFlights" />
-    </div>
-
-    <!-- Reasons + Class + Seat type -->
-    <div class="flight-charts glass charts-row">
-        <FlightReasonsChart :flights="[...flights, ...upcomingFlights]" />
-        <FlightClassChart :flights="[...flights, ...upcomingFlights]" />
-        <SeatTypeChart :flights="[...flights, ...upcomingFlights]" />
-    </div>
-
-    <!-- Countries (tall) + Continents & Flight Type stacked -->
-    <div class="flight-charts glass charts-row">
-        <CountriesChart :max-visible="18" :flights="flights" :upcoming-flights="upcomingFlights" class="chart-tall" />
-        <div class="charts-stack">
-            <ContinentsChart :flights="flights" :upcoming-flights="upcomingFlights" />
-            <FlightTypeChart :flights="[...flights, ...upcomingFlights]" :upcoming-flights="upcomingFlights" />
-        </div>
-    </div>
-
-    <!-- Airlines + Airports -->
-    <div class="flight-charts glass charts-row">
-        <TopAirlinesChart :flights="flights" :upcoming-flights="upcomingFlights" />
-        <TopAirportsChart :flights="flights" :upcoming-flights="upcomingFlights" />
-    </div>
-
-    <!-- Routes + International vs Domestic -->
-    <div class="flight-charts glass charts-row">
-        <TopRoutesChart :flights="[...flights, ...upcomingFlights]" :upcoming-flights="upcomingFlights" />
-    </div>
-</template>
 
 <script setup lang="ts">
 import type { Flight } from '@/Types/types'
@@ -52,13 +13,58 @@ import TopAirlinesChart from '@/Components/FlightsGoneBy/Charts/TopAirlinesChart
 import TopAirportsChart from '@/Components/FlightsGoneBy/Charts/TopAirportsChart.vue'
 import TopRoutesChart from '@/Components/FlightsGoneBy/Charts/TopRoutesChart.vue'
 import FlightTypeChart from '@/Components/FlightsGoneBy/Charts/FlightTypeChart.vue'
+import {FlightStats} from "@/Composables/useFlightStats";
 
 defineProps<{
-    flights: Flight[]
-    upcomingFlights: Flight[]
+    flightStats: FlightStats
 }>()
+
+
+
 </script>
 
+<template>
+    <!-- Year — full width -->
+    <div class="flight-charts glass">
+        <FlightsPerYearChart :flight-stats="flightStats" />
+    </div>
+
+    <!-- Month + Day of week -->
+    <div class="flight-charts glass charts-row">
+        <FlightsPerMonthChart :flight-stats="flightStats" />
+        <FlightsPerDayChart :flight-stats="flightStats" />
+    </div>
+
+    <!-- Reasons + Class + Seat type -->
+    <div class="flight-charts glass charts-row">
+        <FlightClassChart :flight-stats="flightStats" />
+        <FlightReasonsChart :flight-stats="flightStats"  />
+        <SeatTypeChart  :flight-stats="flightStats"  />
+    </div>
+
+    <!-- Countries (tall) + Continents & Flight Type stacked -->
+    <div class="flight-charts glass charts-row">
+        <CountriesChart :max-visible="18" :flight-stats="flightStats" class="chart-tall" />
+        <div class="charts-stack">
+            <ContinentsChart :flight-stats="flightStats" />
+            <FlightTypeChart :flight-stats="flightStats" />
+        </div>
+    </div>
+
+    <!-- Airlines + Airports -->
+    <div class="flight-charts glass charts-row">
+        <TopAirlinesChart :flight-stats="flightStats" />
+        <TopAirportsChart :flight-stats="flightStats" />
+    </div>
+
+    <!-- Routes + International vs Domestic -->
+    <div class="flight-charts glass charts-row">
+        <!--
+        <TopRoutesChart :flights="[...flights, ...upcomingFlights]" :upcoming-flights="upcomingFlights" />
+        -->
+    </div>
+</template>
+
 <style scoped>
 .flight-charts {
     display: flex;
diff --git a/resources/js/Components/FlightsGoneBy/FlightFillter.vue b/resources/js/Components/FlightsGoneBy/FlightFilter.vue
similarity index 100%
rename from resources/js/Components/FlightsGoneBy/FlightFillter.vue
rename to resources/js/Components/FlightsGoneBy/FlightFilter.vue
diff --git a/resources/js/Components/FlightsGoneBy/FlightMap.vue b/resources/js/Components/FlightsGoneBy/FlightMap.vue
index d87898f..1c599fe 100644
--- a/resources/js/Components/FlightsGoneBy/FlightMap.vue
+++ b/resources/js/Components/FlightsGoneBy/FlightMap.vue
@@ -41,7 +41,6 @@ interface RoutesGeoJSON {
     future:     GeoJSON.FeatureCollection<GeoJSON.LineString, RouteFeatureProperties>
 }
 
-const logoApiUrl = usePage<SharedProps>().props.logo_api_url
 
 function greatCircleGeoJSON(from: LngLat, to: LngLat, steps?: number): LngLat[] {
     const dist = Math.sqrt((to[0] - from[0]) ** 2 + (to[1] - from[1]) ** 2)
@@ -108,6 +107,8 @@ function routePopupHTML(historical: Flight[], future: Flight[]): string {
     }
 
     const groupByDirection = (list: Flight[]): DirectionGroup[] => {
+        const logoApiUrl = usePage<SharedProps>().props.logo_api_url
+
         const dirs = new Map<string, DirectionGroup>()
         list.forEach(f => {
             const key   = `${f.departure_airport.id}-${f.arrival_airport.id}`
diff --git a/resources/js/Components/FlightsGoneBy/FlightMapAndCharts.vue b/resources/js/Components/FlightsGoneBy/FlightMapAndCharts.vue
index d6de377..a9006e8 100644
--- a/resources/js/Components/FlightsGoneBy/FlightMapAndCharts.vue
+++ b/resources/js/Components/FlightsGoneBy/FlightMapAndCharts.vue
@@ -1,85 +1,47 @@
-<template>
-    <FlightMap :page="page.props" :flights="mappedFlights" class="profile-map__map" />
-    <FlightFillter :flights="flights" @change="onFiltersChange" />
-    <FlightStatsBar :flights="pastFlights" :upcoming-flights="upcomingFlights" />
-    <FlightCharts :flights="pastFlights" :upcoming-flights="upcomingFlights" />
-</template>
-
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { usePage } from '@inertiajs/vue3'
-import type { Flight, SharedProps } from '@/Types/types'
-import FlightStatsBar from '@/Components/FlightsGoneBy/FlightStatsBar.vue'
+import { SharedProps } from '@/Types/types'
+import { ref, onMounted, nextTick } from 'vue'
 
-import FlightFillter from "@/Components/FlightsGoneBy/FlightFillter.vue";
+import { FlightStats } from '@/Composables/useFlightStats'
 import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
+import FlightFilter from "@/Components/FlightsGoneBy/FlightFilter.vue";
+import FlightStatsBar from "@/Components/FlightsGoneBy/FlightStatsBar.vue";
 import FlightCharts from "@/Components/FlightsGoneBy/FlightCharts.vue";
-
+import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue";
 const props = defineProps<{
-    flights: Flight[]
+    stats: FlightStats
+    canEdit: boolean
 }>()
 
-const page = usePage<SharedProps>()
-const now  = new Date()
+const emit = defineEmits<{
+    filtersChange: [filters: {
+        years: number[]
+        airlines: number[]
+        countries: string[]
+        continents: string[]
+        flightClasses: number[]
+    }]
+}>()
 
-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, date: Date): boolean {
-    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
-}
-
-// ── Filtered flights ──────────────────────────────────────────────────────────
-
-const pastFlights = computed(() =>
-    props.flights.filter(f => {
-        const date = new Date(f.departure_date)
-        return date <= now && matchesFilters(f, date)
-    })
-)
-
-const upcomingFlights = computed(() =>
-    props.flights.filter(f => {
-        const date = new Date(f.departure_date)
-        return date > now && matchesFilters(f, date)
-    })
-)
+const chartsVisible = ref(false)
+onMounted(async () => {
+    setTimeout(() => { chartsVisible.value = true }, 10)
+})
 
 const mappedFlights = computed(() => [
-    ...pastFlights.value,
-    ...upcomingFlights.value,
+    ...props.stats.pastFlights.value,
+    ...props.stats.upcomingFlights.value,
 ])
 </script>
 
-<style scoped>
-</style>
+<template>
+    <FlightMap :flights="mappedFlights" />
+    <FlightFilter :flights="mappedFlights" @change="$emit('filtersChange', $event)" />
+    <FlightStatsBar :flights="stats.pastFlights.value" :upcoming-flights="stats.upcomingFlights.value" />
+    <FlightCharts v-if="chartsVisible" :stats="stats"  :flight-stats="stats"/>
+    <div v-else style="width:100%; display:flex; align-items: center;justify-content: center">
+        <PlaneLoader />
+    </div>
+</template>
diff --git a/resources/js/Composables/useFlightStats.ts b/resources/js/Composables/useFlightStats.ts
new file mode 100644
index 0000000..af2b346
--- /dev/null
+++ b/resources/js/Composables/useFlightStats.ts
@@ -0,0 +1,332 @@
+// composables/useFlightStats.ts
+import {computed, ComputedRef, Ref} from 'vue'
+import type {Airport, Flight} from '@/Types/types'
+
+const flightYear = (f: Flight): number =>
+    Number(new Intl.DateTimeFormat('en', {
+        timeZone: f.departure_airport.timezone,
+        year: 'numeric',
+    }).format(new Date(f.departure_date)))
+
+const DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
+const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+
+
+const dayIndex = (f: Flight): number => {
+    const localDay = new Intl.DateTimeFormat('en', {
+        timeZone: f.departure_airport.timezone,
+        weekday: 'long',
+    }).format(new Date(f.departure_date))
+    const idx = DAYS.indexOf(localDay)
+    return idx === -1 ? 0 : idx
+}
+
+export function getFlightsPerDay(flights: Flight[], upcomingFlights: Flight[]) {
+    const countByDay = (list: Flight[]) =>
+        DAYS.map((_, i) => list.filter(f => dayIndex(f) === i).length)
+
+    return {
+        days: DAYS,
+        series: [
+            { name: 'Flown',    data: countByDay(flights) },
+            { name: 'Upcoming', data: countByDay(upcomingFlights) },
+        ],
+    }
+}
+
+const monthIndex = (f: Flight): number =>
+    Number(new Intl.DateTimeFormat('en', {
+        timeZone: f.departure_airport.timezone,
+        month: 'numeric',
+    }).format(new Date(f.departure_date))) - 1
+
+export function getFlightsPerMonth(flights: Flight[], upcomingFlights: Flight[]) {
+    const countByMonth = (list: Flight[]) =>
+        MONTHS.map((_, i) => list.filter(f => monthIndex(f) === i).length)
+
+    return {
+        months: MONTHS,
+        series: [
+            { name: 'Flown',    data: countByMonth(flights) },
+            { name: 'Upcoming', data: countByMonth(upcomingFlights) },
+        ],
+    }
+}
+
+export function getFlightsPerYear(flights: Flight[], upcomingFlights: Flight[]) {
+    const allFlights = [...flights, ...upcomingFlights]
+
+    const allYears = new Set<number>()
+    allFlights.forEach(f => allYears.add(flightYear(f)))
+    const sorted = [...allYears].sort((a, b) => a - b)
+
+    let min = sorted[0]
+    let max = sorted[sorted.length - 1]
+    while (max - min + 1 < 5) {
+        min--
+        if (max - min + 1 < 5) max++
+    }
+
+    const years = Array.from({ length: max - min + 1 }, (_, i) => min + i)
+    const countByYear = (list: Flight[]) =>
+        years.map(year => list.filter(f => flightYear(f) === year).length)
+
+    return {
+        years,
+        series: [
+            { name: 'Flown',    data: countByYear(flights) },
+            { name: 'Upcoming', data: countByYear(upcomingFlights) },
+        ],
+    }
+}
+
+function groupByName(flights: Flight[], accessor: (f: Flight) => string) {
+    const counts = new Map<string, number>()
+    flights.forEach(f => {
+        const key = accessor(f) ?? 'Unknown'
+        counts.set(key, (counts.get(key) ?? 0) + 1)
+    })
+    const sorted = [...counts.entries()].sort((a, b) => b[1] - a[1])
+    return {
+        labels: sorted.map(([name]) => name),
+        series: sorted.map(([, count]) => count),
+    }
+}
+
+export function getFlightReasons(flights: Flight[]) {
+    return groupByName(flights, f => f.flight_reason?.name ?? 'Unknown')
+}
+
+export function getFlightClasses(flights: Flight[]) {
+    return groupByName(flights, f => f.flight_class?.name ?? 'Unknown')
+}
+
+export function getSeatTypes(flights: Flight[]) {
+    return groupByName(flights, f => f.seat_type?.name ?? 'Unknown')
+}
+
+function countCountries(flights: Flight[]) {
+    const counts = new Map<string, { count: number; code: string }>()
+    flights.forEach(f => {
+        const dep = f.departure_airport?.region?.country
+        const arr = f.arrival_airport?.region?.country
+
+        if (dep?.name) {
+            const existing = counts.get(dep.name) ?? { count: 0, code: dep.code }
+            existing.count++
+            counts.set(dep.name, existing)
+        }
+        if (arr?.name && arr.name !== dep?.name) {
+            const existing = counts.get(arr.name) ?? { count: 0, code: arr.code }
+            existing.count++
+            counts.set(arr.name, existing)
+        }
+    })
+    return counts
+}
+
+export function getCountries(flights: Flight[], upcomingFlights: Flight[]) {
+    const past     = countCountries(flights)
+    const upcoming = countCountries(upcomingFlights)
+    const allCountries = new Set([...past.keys(), ...upcoming.keys()])
+
+    const sorted = [...allCountries]
+        .map(name => ({
+            name,
+            code:     (past.get(name) ?? upcoming.get(name))!.code,
+            past:     past.get(name)?.count ?? 0,
+            upcoming: upcoming.get(name)?.count ?? 0,
+        }))
+        .sort((a, b) => (b.past + b.upcoming) - (a.past + a.upcoming))
+
+    return {
+        countries: sorted,
+        series: [
+            { name: 'Flights',  data: sorted.map(s => s.past) },
+            { name: 'Upcoming', data: sorted.map(s => s.upcoming) },
+        ],
+    }
+}
+
+export function getContinents(flights: Flight[]) {
+    const counts = new Map<string, number>()
+    flights.forEach(f => {
+        const continents = new Set<string>()
+        const dep = f.departure_airport.region?.continent?.name
+        const arr = f.arrival_airport.region?.continent?.name
+        if (dep) continents.add(dep)
+        if (arr) continents.add(arr)
+        continents.forEach(c => counts.set(c, (counts.get(c) ?? 0) + 1))
+    })
+    const sorted = [...counts.entries()].sort((a, b) => b[1] - a[1])
+    return {
+        labels: sorted.map(([name]) => name),
+        series: sorted.map(([, count]) => count),
+    }
+}
+
+function countAirlines(flights: Flight[]) {
+    const counts = new Map<string, { count: number; id: number }>()
+    flights.forEach(f => {
+        const airline = f.airline
+        if (!airline?.name) return
+        const existing = counts.get(airline.name) ?? { count: 0, id: airline.id }
+        existing.count++
+        counts.set(airline.name, existing)
+    })
+    return counts
+}
+
+export function getTopAirlines(flights: Flight[], upcomingFlights: Flight[]) {
+    const past     = countAirlines(flights)
+    const upcoming = countAirlines(upcomingFlights)
+    const allAirlines = new Set([...past.keys(), ...upcoming.keys()])
+
+    const sorted = [...allAirlines]
+        .map(name => ({
+            name,
+            id:       (past.get(name) ?? upcoming.get(name))!.id,
+            past:     past.get(name)?.count ?? 0,
+            upcoming: upcoming.get(name)?.count ?? 0,
+        }))
+        .sort((a, b) => (b.past + b.upcoming) - (a.past + a.upcoming))
+
+    return {
+        airlines: sorted,
+        series: [
+            { name: 'Flights',  data: sorted.map(s => s.past) },
+            { name: 'Upcoming', data: sorted.map(s => s.upcoming) },
+        ],
+    }
+}
+
+interface AirportItem {
+    label: string
+    fullName: string
+    departures: number
+    arrivals: number
+    upcoming: number
+}
+
+function airportLabel(airport: Airport | null | undefined): string | null {
+    if (!airport) return null
+    return airport.iata_code ?? airport.icao_code ?? airport.name ?? null
+}
+
+export function getTopAirports(flights: Flight[], upcomingFlights: Flight[]) {
+    const map = new Map<string, AirportItem>()
+    const empty = (): AirportItem => ({ departures: 0, arrivals: 0, upcoming: 0, label: '', fullName: '' })
+
+    flights.forEach(f => {
+        const depLabel = airportLabel(f.departure_airport)
+        const arrLabel = airportLabel(f.arrival_airport)
+
+        if (depLabel) {
+            const e = map.get(depLabel) ?? empty()
+            e.departures++
+            e.label    = depLabel
+            e.fullName = f.departure_airport?.name ?? depLabel
+            map.set(depLabel, e)
+        }
+        if (arrLabel) {
+            const e = map.get(arrLabel) ?? empty()
+            e.arrivals++
+            e.label    = arrLabel
+            e.fullName = f.arrival_airport?.name ?? arrLabel
+            map.set(arrLabel, e)
+        }
+    })
+
+    upcomingFlights.forEach(f => {
+        const depLabel = airportLabel(f.departure_airport)
+        const arrLabel = airportLabel(f.arrival_airport)
+
+        if (depLabel) {
+            const e = map.get(depLabel) ?? empty()
+            e.upcoming++
+            e.label    = depLabel
+            e.fullName = f.departure_airport?.name ?? depLabel
+            map.set(depLabel, e)
+        }
+        if (arrLabel) {
+            const e = map.get(arrLabel) ?? empty()
+            e.upcoming++
+            e.label    = arrLabel
+            e.fullName = f.arrival_airport?.name ?? arrLabel
+            map.set(arrLabel, e)
+        }
+    })
+
+    const sorted = [...map.values()]
+        .sort((a, b) =>
+            (b.departures + b.arrivals + b.upcoming) - (a.departures + a.arrivals + a.upcoming)
+        )
+
+    return {
+        airports: sorted,
+        series: [
+            { name: 'Departures', data: sorted.map(s => s.departures) },
+            { name: 'Arrivals',   data: sorted.map(s => s.arrivals) },
+            { name: 'Upcoming',   data: sorted.map(s => s.upcoming) },
+        ],
+    }
+}
+
+export function getFlightTypes(flights: Flight[]) {
+    const counts = { International: 0, Domestic: 0 }
+    flights.forEach(f => {
+        const dep = f.departure_airport.region?.country?.id
+        const arr = f.arrival_airport.region?.country?.id
+        if (dep && arr) {
+            dep === arr ? counts.Domestic++ : counts.International++
+        }
+    })
+    const sorted = Object.entries(counts).filter(([, count]) => count > 0)
+    return {
+        labels: sorted.map(([name]) => name),
+        series: sorted.map(([, count]) => count),
+    }
+}
+
+export type FlightStats = ReturnType<typeof useFlightStats>
+
+export function useFlightStats(flights: Ref<Flight[]>) {
+    const now = new Date()
+
+    const pastFlights = computed(() =>
+        flights.value.filter(f => new Date(f.departure_date) <= now)
+    )
+    const upcomingFlights = computed(() =>
+        flights.value.filter(f => new Date(f.departure_date) > now)
+    )
+
+    const allFlights = computed(() => flights.value)
+
+    const perYear      = computed(() => getFlightsPerYear(pastFlights.value, upcomingFlights.value))
+    const perMonth     = computed(() => getFlightsPerMonth(pastFlights.value, upcomingFlights.value))
+    const perDay       = computed(() => getFlightsPerDay(pastFlights.value, upcomingFlights.value))
+    const reasons      = computed(() => getFlightReasons(allFlights.value))
+    const classes      = computed(() => getFlightClasses(allFlights.value))
+    const seatTypes    = computed(() => getSeatTypes(allFlights.value))
+    const countries    = computed(() => getCountries(pastFlights.value, upcomingFlights.value))
+    const continents   = computed(() => getContinents(allFlights.value))
+    const topAirlines  = computed(() => getTopAirlines(pastFlights.value, upcomingFlights.value))
+    const topAirports  = computed(() => getTopAirports(pastFlights.value, upcomingFlights.value))
+    const flightTypes  = computed(() => getFlightTypes(allFlights.value))
+
+    return {
+        pastFlights,
+        upcomingFlights,
+        perYear,
+        perMonth,
+        perDay,
+        reasons,
+        classes,
+        seatTypes,
+        countries,
+        continents,
+        flightTypes,
+        topAirlines,
+        topAirports,
+    }
+}
diff --git a/resources/js/Pages/UserProfile.vue b/resources/js/Pages/UserProfile.vue
index f882b67..8d16c51 100644
--- a/resources/js/Pages/UserProfile.vue
+++ b/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>