Added achievement data

resources/js/Components/FlightsGoneBy/Panels/AircraftPanel.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
+import DetailRows from "@/Components/FlightsGoneBy/Panels/DetailRows.vue";
+import DetailRow from "@/Components/FlightsGoneBy/Panels/DetailRow.vue";
+import type {Flight} from "@/Types/types";
+import PanelHeader from "@/Components/FlightsGoneBy/Panels/PanelHeader.vue";
+import PanelSubHeader from "@/Components/FlightsGoneBy/Panels/PanelSubHeader.vue";
+
+defineProps<{
+    flight: Flight
+}>()
+</script>
+
+<template>
+    <Panel label="Aircraft">
+        <div class="livery" v-if="flight.livery_url" :style="{ backgroundImage: `url('${flight.livery_url}')` }">
+        </div>
+        <PanelHeader>{{ flight.aircraft?.display_name_short }}</PanelHeader>
+        <PanelSubHeader v-if="flight.aircraft?.manufacturer_code">{{ flight.aircraft.manufacturer_code }}</PanelSubHeader>
+        <DetailRows>
+            <DetailRow v-if="flight.aircraft?.designator" label="Designator" :value="flight.aircraft.designator" variant="Badge" />
+            <DetailRow v-if="flight.aircraft_registration" label="Registration" :value="flight.aircraft_registration" />
+            <DetailRow class="detail-row" v-if="flight.aircraft?.engine_type" label="Engine Type" :value="flight.aircraft?.engine_type" />
+            <DetailRow class="detail-row" v-if="flight.aircraft?.engine_count" label="No. of Engines" :value="flight.aircraft?.engine_count.toString()" />
+            <DetailRow class="detail-row" v-if="flight.aircraft?.wtc" label="Wake Turbulence Category" variant="WTC" :value="flight.aircraft?.wtc" />
+        </DetailRows>
+    </Panel>
+</template>
+
+<style scoped>
+.livery{
+    width: 100%;
+    aspect-ratio: 16/9;
+    background-size: cover;
+}
+</style>

resources/js/Components/FlightsGoneBy/Panels/AirlinePanel.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+
+import AllianceLogo from "@/Components/FlightsGoneBy/AllianceLogo.vue";
+import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
+import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
+import {Airline} from "@/Types/types";
+import DetailRows from "@/Components/FlightsGoneBy/Panels/DetailRows.vue";
+import DetailRow from "@/Components/FlightsGoneBy/Panels/DetailRow.vue";
+import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
+import PanelHeader from "@/Components/FlightsGoneBy/Panels/PanelHeader.vue";
+import PanelSubHeader from "@/Components/FlightsGoneBy/Panels/PanelSubHeader.vue";
+
+defineProps<{
+    airline: Airline
+}>()
+</script>
+
+<template>
+    <Panel label="Airline">
+        <div class="airline-header">
+            <AirlineLogo :airline="airline" class="airline-logo" />
+            <div>
+                <PanelHeader>{{ airline.name }}</PanelHeader>
+                <PanelSubHeader v-if="airline.country?.name"><span class="fi" :class="`fi-${airline.country.code.toLowerCase()}`"></span> {{ airline.country.name }}</PanelSubHeader>
+            </div>
+        </div>
+        <DetailRows>
+            <DetailRow v-if="airline.alliance?.name" label="Alliance" :value="airline.alliance.name" variant="Alliance" :alliance="airline.alliance" />
+            <DetailRow label="IATA" v-if="airline.IATA_code" :value="airline.IATA_code" variant="Badge" />
+            <DetailRow label="ICAO" v-if="airline.IATA_code" :value="airline.ICAO_code" variant="Badge" />
+        </DetailRows>
+    </Panel>
+
+</template>
+
+<style scoped>
+.airline-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.25rem;
+}
+
+.airline-logo-placeholder {
+    width: 42px;
+    height: 42px;
+    border-radius: 8px;
+    background: var(--accent-glow);
+    border: 1px solid rgba(56, 189, 248, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    font-family: 'Share Tech Mono', monospace;
+    color: var(--accent);
+    flex-shrink: 0;
+}
+
+.airline-name {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text);
+}
+
+</style>

resources/js/Components/FlightsGoneBy/Panels/AirportPanel.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
+import { Airport } from "@/Types/types";
+import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
+import DetailRows from "@/Components/FlightsGoneBy/Panels/DetailRows.vue";
+import DetailRow from "@/Components/FlightsGoneBy/Panels/DetailRow.vue";
+import PanelSubHeader from "@/Components/FlightsGoneBy/Panels/PanelSubHeader.vue";
+import PanelHeader from "@/Components/FlightsGoneBy/Panels/PanelHeader.vue";
+
+defineProps<{
+    label?: string
+    airport: Airport
+}>()
+</script>
+
+<template>
+    <Panel :label="label">
+        <PanelHeader class="airport-name">{{ airport.name }}</PanelHeader>
+        <PanelSubHeader>
+            {{ airport.municipality }},
+            {{ airport.region?.country?.name }} <span :class="`fi fi-${airport.region?.country.code.toLowerCase()}`"></span>
+        </PanelSubHeader>
+        <DetailRows>
+            <DetailRow  v-if="airport.iata_code" label="IATA" variant="Badge" :value="airport.iata_code" />
+            <DetailRow  v-if="airport.icao_code" label="ICAO" variant="Badge" :value="airport.icao_code" />
+            <DetailRow label="City Served"  :value="airport.municipality" />
+            <DetailRow label="Region" v-if="airport.region?.name" :value="airport.region.name" />
+            <DetailRow label="Country" v-if="airport.region?.country" variant="Country" :country="airport.region.country" :value="airport.region.country.name" />
+        </DetailRows>
+    </Panel>
+</template>
+
+<style scoped>
+
+
+</style>

resources/js/Components/FlightsGoneBy/Panels/DetailRow.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import {Alliance, Country} from "@/Types/types";
+import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
+import AllianceLogo from "@/Components/FlightsGoneBy/AllianceLogo.vue";
+import WakeTurbulence from "@/Components/FlightsGoneBy/WakeTurbulence.vue";
+
+defineProps<{
+    label: string
+    value: string | null
+    variant?: "Country" | "Badge" | "Alliance" | "WTC"
+    country?: Country
+    alliance?: Alliance
+}>()
+</script>
+
+<template>
+    <div class="detail-row">
+        <span class="detail-key">{{label}}</span>
+        <span class="detail-val" v-if="!variant">{{value ?? ''}}</span>
+        <span class="detail-val" v-if="variant == 'Badge'"><InlineBadge variant="generic">{{value ?? ''}}</InlineBadge></span>
+        <span class="detail-val" v-if="variant == 'Country' && country">{{country.name}} <span :class="`fi fi-${country.code.toLowerCase()}`"></span></span>
+        <span class="detail-val" v-if="variant == 'Alliance' && alliance">{{alliance.name}} <AllianceLogo :alliance="alliance"/> </span>
+        <span class="detail-val" v-if="variant == 'WTC'"><WakeTurbulence :value="value" /> </span>
+    </div>
+</template>
+
+<style scoped>
+.detail-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.8rem;
+}
+
+.detail-key {
+    color: var(--muted);
+
+}
+
+.detail-val {
+    color: var(--text);
+    text-align: right;
+    display:inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+}
+</style>

resources/js/Components/FlightsGoneBy/Panels/DetailRows.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="detail-rows">
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+.detail-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    margin-top: 0.5rem;
+    border-top: 1px solid var(--border);
+    padding-top: 0.75rem;
+}
+</style>

resources/js/Components/FlightsGoneBy/Panels/Panel.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+defineProps<{
+    label?: string
+}>()
+</script>
+
+<template>
+    <div class="panel glass glass-border">
+        <div v-if="label" class="panel-label">{{label}}</div>
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+
+/* Panels */
+.panel {
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.panel-label {
+    font-size: 0.65rem;
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--accent);
+    margin-bottom: 0.25rem;
+    opacity: 0.8;
+}
+
+
+</style>

resources/js/Components/FlightsGoneBy/Panels/PanelHeader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div class="panel-header"><slot /></div>
+</template>
+
+<style scoped>
+.panel-header {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text);
+    line-height: 1.3;
+}
+
+</style>

resources/js/Components/FlightsGoneBy/Panels/PanelSubHeader.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div class="panel-sub-header"><slot/></div>
+</template>
+
+<style scoped>
+.panel-sub-header {
+    font-size: 0.8rem;
+    color: var(--muted);
+    margin-bottom: 0.5rem;
+}
+</style>

resources/js/Components/FlightsGoneBy/Panels/RoutePanel.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {Flight} from "@/Types/types";
+import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
+import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
+import DetailRows from "@/Components/FlightsGoneBy/Panels/DetailRows.vue";
+import DetailRow from "@/Components/FlightsGoneBy/Panels/DetailRow.vue";
+
+defineProps<{
+    flight: Flight
+}>()
+</script>
+
+<template>
+    <Panel label="Route">
+        <div class="map-placeholder">
+            <FlightMap :flights="[flight]" />
+        </div>
+        <DetailRows>
+            <DetailRow label="Distance" :value="flight.distance + 'km'" />
+        </DetailRows>
+    </Panel>
+</template>
+
+<style scoped>
+
+</style>