Fixed Bug With Shared Flights

Reviewed-on: #3

app/Settings/SettingsRegistry.php

@@ -13,24 +13,13 @@ class SettingsRegistry
             'AI Generated Content'   => 'Airline tail logos and liveries are AI generated with human cleanup. If you would rather not see any AI, then our blank aircraft templates are human created.',
             'Account & Privacy'   => 'Everything to do with your account.',
             'Notifications'   => 'What you want to hear about (or not!)',
+            'Localization'   => 'Units of measurement, date and time preferences.',
         ];
     }
 
     public static function schema(): array
     {
         return [
-            [
-                'key'     => 'distance_unit',
-                'type'    => 'select',
-                'label'   => 'Distance Units',
-                'category' => 'FlightsGoneBy Settings',
-                'default' => 'km',
-                'options' => [
-                    ['value' => 'km', 'label' => 'Kilometres (km)'],
-                    ['value' => 'mi', 'label' => 'Miles (mi)'],
-                    ['value' => 'nm', 'label' => 'Nautical miles (nm)'],
-                ],
-            ],
             [
                 'category' => 'Account & Privacy',
                 'key'     => 'profile_privacy',
@@ -42,6 +31,29 @@ class SettingsRegistry
                     ['value' => 'private', 'label' => 'Private Profile Viewable Only By You and Your Approved Followers'],
                 ]
             ],
+            [
+                'key'     => 'distance_unit',
+                'type'    => 'select',
+                'label'   => 'Distance Units',
+                'category' => 'Localization',
+                'default' => 'km',
+                'options' => [
+                    ['value' => 'km', 'label' => 'Kilometres (km)'],
+                    ['value' => 'mi', 'label' => 'Miles (mi)'],
+                    ['value' => 'nm', 'label' => 'Nautical miles (nm)'],
+                ],
+            ],
+            [
+                'key'     => 'time_format',
+                'type'    => 'select',
+                'label'   => 'Time Format',
+                'category' => 'Localization',
+                'default' => 'ampm',
+                'options' => [
+                    ['value' => 'ampm', 'label' => 'AM/PM'],
+                    ['value' => '24hr', 'label' => '24-Hour'],
+                ],
+            ],
             [
                 'key'     => 'default_login_page',
                 'type'    => 'select',

dockerfile

@@ -12,6 +12,10 @@ COPY . .
 
 RUN composer install --no-dev --optimize-autoloader
 
+ARG APP_VERSION=Dev
+ENV VITE_APP_VERSION=$APP_VERSION
+LABEL org.opencontainers.image.version=$APP_VERSION
+
 RUN npm install && npm run build && rm -f public/hot
 
 COPY docker/nginx.conf /etc/nginx/nginx.conf

package.json

@@ -8,7 +8,7 @@
         "dev": "vite",
         "dev:all": "concurrently -s all \"php artisan serve\" \"php artisan reverb:start\" \"php artisan queue:work\" \"npm run dev\" > /dev/null 2>&1",
         "serve:all": "concurrently -s all \"php artisan serve\" \"php artisan reverb:start\" \"php artisan queue:work\" > /dev/null 2>&1",
-        "updateVersion": "cross-var docker build -t dredgy/flights-api:$npm_config_tag -t dredgy/flights-api:latest . && cross-var docker push dredgy/flights-api:$npm_config_tag && docker push dredgy/flights-api:latest"
+        "updateVersion": "cross-var docker build --no-cache  --build-arg APP_VERSION=$npm_config_tag -t dredgy/flights-api:$npm_config_tag -t dredgy/flights-api:latest . && cross-var docker push dredgy/flights-api:$npm_config_tag && docker push dredgy/flights-api:latest"
     },
     "devDependencies": {
         "@inertiajs/vue3": "^2.0.0",

resources/js/Components/FlightsGoneBy/DepartureBoardTableRow.vue

@@ -12,6 +12,7 @@ import { usePage } from "@inertiajs/vue3";
 import { User } from "@/Types/types";
 import Mono from "@/Components/FlightsGoneBy/Mono.vue";
 import DayDifference from "@/Components/FlightsGoneBy/DayDifference.vue";
+import Time from "@/Components/FlightsGoneBy/Time.vue";
 
 const props = defineProps<{
     flight: Flight
@@ -98,12 +99,12 @@ const showColumn = (column: string) => props.columnsToShow.includes(column)
 
         <td v-if="showColumn('departure_time')" class="v-data-table__td">
             <span class="time-cell">
-                <Mono small>{{ flight.departure_time_display }}</Mono>
+                <Mono small><Time :value="flight.departure_time_display" /></Mono>
             </span>
         </td>
 
         <td v-if="showColumn('arrival_time')" class="v-data-table__td arrival-time-cell">
-            <Mono small>{{ flight.arrival_time_display }}</Mono>
+            <Mono small><Time :value="flight.arrival_time_display" /></Mono>
             <DayDifference :value="flight.arrival_day_difference" />
         </td>
 
@@ -160,7 +161,7 @@ const showColumn = (column: string) => props.columnsToShow.includes(column)
 
         <td v-if="showColumn('class_seat_combined')" class="v-data-table__td  class-badges-cell">
             <span class="class-cell">
-                <CrewTooltip v-if="flight.flight_reason?.name == 'Crew'" :crew-type="flight.crew_type!">
+                <CrewTooltip v-if="flight.flight_reason?.name == 'Crew' && flight.crew_type" :crew-type="flight.crew_type!">
                     <FlightClassBadge v-if="flight.flight_class?.internal_name === 'crew'" :flight="flight" />
                     <InlineBadge v-else variant="crew">Crew</InlineBadge>
                 </CrewTooltip>

resources/js/Components/FlightsGoneBy/GlassBox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 withDefaults(defineProps<{
-    title: string,
+    title?: string,
     wide?: boolean,
     blurb?: string
 }>(), { wide: false })

resources/js/Components/FlightsGoneBy/MainFooter.vue

@@ -4,12 +4,15 @@ import { SharedProps } from "@/Types/types"
 
 const page = usePage<SharedProps>().props
 const year = new Date().getFullYear()
+const version = __APP_VERSION__
 </script>
 
 <template>
     <footer class="glass">
         <span class="footer-copyright">
             &copy; {{ year }} FlightsGoneBy
+
+            <span class="footer-version">v{{ version }}</span>
         </span>
 
         <span class="footer-links">
@@ -73,4 +76,9 @@ footer {
         font-size: 0.6rem;
     }
 }
+
+.footer-version {
+    opacity: 0.8;
+    margin-left: 0.4em;
+}
 </style>

resources/js/Components/FlightsGoneBy/Time.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import {usePage} from "@inertiajs/vue3";
+import {SharedProps} from "@/Types/types";
+
+const props = defineProps<{
+    value: string; //Time in g:iA format
+}>()
+
+const page = usePage<SharedProps>().props;
+const timeFormatString = page.auth.user?.resolved_settings?.time_format
+
+const formattedTime = computed(() => {
+    if (timeFormatString !== "24hr") {
+        return props.value;
+    }
+
+    const match = props.value.match(/^(\d{1,2}):(\d{2})(AM|PM)$/i);
+    if (!match) {
+        return props.value;
+    }
+
+    let [, hourStr, minuteStr, meridiem] = match;
+    let hour = parseInt(hourStr, 10);
+
+    if (meridiem.toUpperCase() === "PM" && hour !== 12) {
+        hour += 12;
+    } else if (meridiem.toUpperCase() === "AM" && hour === 12) {
+        hour = 0;
+    }
+
+    return `${hour.toString().padStart(2, "0")}${minuteStr}`;
+});
+</script>
+
+<template>
+    <span>{{ formattedTime }}</span>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Pages/AddFlight.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import MainLayout from '@/Layouts/MainLayout.vue'
 import GlassBox from '@/Components/FlightsGoneBy/GlassBox.vue'
-import { Head, useForm } from '@inertiajs/vue3'
+import {Head, useForm, usePage} from '@inertiajs/vue3'
 import AirlineSearchBox from '@/Components/FlightsGoneBy/AirlineSearchBox.vue'
 import AircraftSearchBox from '@/Components/FlightsGoneBy/AircraftSearchBox.vue'
 import AirportSearchBox from '@/Components/FlightsGoneBy/AirportSearchBox.vue'
-import type {SeatType, FlightReason, FlightClass, CrewType} from '@/Types/types'
+import type {SeatType, FlightReason, FlightClass, CrewType, SharedProps} from '@/Types/types'
 import { ref, watch, computed } from 'vue'
+import { VTimePicker, VDatePicker } from 'vuetify/components'
 
 defineOptions({ layout: MainLayout })
-
+const page = usePage<SharedProps>().props
 
 const props = defineProps<{
     flight?: {
@@ -38,6 +39,97 @@ const props = defineProps<{
 
 const isEdit = !!props.flight
 
+// ── User format preferences ─────────────────────────────────────────────────
+const timeFormat = computed(() => page.auth?.user?.resolved_settings?.time_format ?? 'ampm')
+// day.js/date-fns-style tokens, e.g. 'D MMM YYYY' -> "7 Dec 2026". Not user-configurable yet.
+const dateFormat = computed(() => 'DD-MM-YYYY')
+
+// ── Date token formatting/parsing helpers (D, DD, M, MM, MMM, MMMM, YY, YYYY) ──
+
+const pad = (n: number) => String(n).padStart(2, '0')
+
+const MONTHS_SHORT = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
+const MONTHS_LONG  = ['January','February','March','April','May','June','July','August','September','October','November','December']
+
+// Formats a Date according to a token format string. Tokens matched longest-first
+// so e.g. "YYYY" isn't partially consumed by a lone "Y"-style rule.
+function formatDateForFormat(d: Date | null, format: string): string {
+    if (!d) return ''
+    return format.replace(/YYYY|YY|MMMM|MMM|MM|M|DD|D/g, (token) => {
+        switch (token) {
+            case 'YYYY': return String(d.getFullYear())
+            case 'YY':   return String(d.getFullYear()).slice(-2)
+            case 'MMMM': return MONTHS_LONG[d.getMonth()]
+            case 'MMM':  return MONTHS_SHORT[d.getMonth()]
+            case 'MM':   return pad(d.getMonth() + 1)
+            case 'M':    return String(d.getMonth() + 1)
+            case 'DD':   return pad(d.getDate())
+            case 'D':    return String(d.getDate())
+            default:     return token
+        }
+    })
+}
+
+// Extracts the ordered list of D/M/Y tokens from a format string, e.g.
+// "D MMM YYYY" -> ['D', 'MMM', 'YYYY']
+function getFormatTokens(format: string): string[] {
+    return format.match(/YYYY|YY|MMMM|MMM|MM|M|DD|D/g) ?? ['D', 'MMM', 'YYYY']
+}
+
+// Parses user-typed text into a Date, following the token order of `format`.
+// Splits on any run of non-alphanumeric characters, so "/", "-", ".", and
+// spaces are all accepted as separators regardless of what the format uses.
+// Month tokens (MMM/MMMM) match against month names case-insensitively.
+function parseDateInputStr(input: string, format: string): Date | null {
+    const trimmed = input.trim()
+    if (!trimmed) return null
+
+    const parts = trimmed.split(/[^a-zA-Z0-9]+/).filter(Boolean)
+    const tokens = getFormatTokens(format)
+    if (parts.length !== tokens.length) return null
+
+    let day: number | null = null
+    let month: number | null = null // 0-indexed
+    let year: number | null = null
+
+    for (let i = 0; i < tokens.length; i++) {
+        const token = tokens[i]
+        const part = parts[i]
+
+        if (token === 'D' || token === 'DD') {
+            const val = parseInt(part, 10)
+            if (isNaN(val)) return null
+            day = val
+        } else if (token === 'M' || token === 'MM') {
+            const val = parseInt(part, 10)
+            if (isNaN(val)) return null
+            month = val - 1
+        } else if (token === 'MMM' || token === 'MMMM') {
+            const lower = part.toLowerCase()
+            const idx = MONTHS_LONG.findIndex(m => m.toLowerCase().startsWith(lower) || lower.startsWith(m.slice(0, 3).toLowerCase()))
+            if (idx === -1) return null
+            month = idx
+        } else if (token === 'YYYY') {
+            const val = parseInt(part, 10)
+            if (isNaN(val)) return null
+            year = val
+        } else if (token === 'YY') {
+            const val = parseInt(part, 10)
+            if (isNaN(val)) return null
+            year = val < 100 ? 2000 + val : val
+        }
+    }
+
+    if (day === null || month === null || year === null) return null
+
+    const date = new Date(year, month, day)
+    // Reject dates that overflowed (e.g. day 31 in a 30-day month)
+    if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) {
+        return null
+    }
+    return date
+}
+
 // ── Flight number lookup ──────────────────────────────────────────────────────
 
 const flightNumber   = ref(props.flight?.flight_number ?? '')
@@ -91,6 +183,20 @@ async function lookupFlight() {
             if (!form.aircraft) form.aircraft = data.aircraft_options[0]
         }
 
+        // Populate scheduled times if the API returned them and the user
+        // hasn't already entered a time themselves. Suppress the +1hr
+        // auto-fill guess while doing this, since we have real data.
+        suppressArrivalAutoFill = true
+        const scheduledDep = normalizeTimeString(data.scheduled_departure_time)
+        if (scheduledDep && !departureTimePart.value) {
+            departureTimePart.value = scheduledDep
+        }
+        const scheduledArr = normalizeTimeString(data.scheduled_arrival_time)
+        if (scheduledArr && !arrivalTimePart.value) {
+            arrivalTimePart.value = scheduledArr
+        }
+        suppressArrivalAutoFill = false
+
         lookupKey.value++
     } catch (e) {
         lookupError.value = String(e)
@@ -188,19 +294,98 @@ const fromOptionsData     = ref<{ value: number; title: string; country_code: st
 const toOptionsData       = ref<{ value: number; title: string; country_code: string }[]>(props.flight?.to_options ?? [])
 const aircraftOptionsData = ref<{ value: number; title: string }[]>(props.flight?.aircraft_options ?? [])
 
+// ── Split date/time pickers ───────────────────────────────────────────────────
+// form.departure_date / form.arrival_date stay as the single source of truth
+// (YYYY-MM-DDTHH:mm strings) that the rest of the component and submit() rely
+// on. These refs + watchers just give the template two separate pickers while
+// keeping those combined strings in sync — no server-side changes needed.
 
-watch(() => form.departure_date, (newVal) => {
+function parseDateTime(dt: string | null | undefined) {
-    if (!newVal || form.arrival_date) return
+    if (!dt) return { date: null as Date | null, time: null as string | null }
-    const dep = new Date(newVal)
+    const d = new Date(dt)
+    if (isNaN(d.getTime())) return { date: null as Date | null, time: null as string | null }
+    return {
+        date: new Date(d.getFullYear(), d.getMonth(), d.getDate()),
+        time: `${pad(d.getHours())}:${pad(d.getMinutes())}`,
+    }
+}
+
+function combineDateTime(date: Date | null, time: string | null): string {
+    if (!date) return ''
+    const [hh, mm] = (time ?? '00:00').split(':')
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${(hh ?? '00').padStart(2, '0')}:${(mm ?? '00').padStart(2, '0')}`
+}
+
+function clearDepartureDate() { departureDatePart.value = null }
+function clearDepartureTime() { departureTimePart.value = null }
+function clearArrivalDate()   { arrivalDatePart.value = null }
+function clearArrivalTime()   { arrivalTimePart.value = null }
+
+// Normalizes whatever shape the API sends a scheduled time in ("14:30",
+// "14:30:00", or a full datetime string) down to the internal "HH:mm" format.
+function normalizeTimeString(t: string | null | undefined): string | null {
+    if (!t) return null
+    const match = t.match(/(\d{1,2}):(\d{2})/)
+    if (match) {
+        return `${match[1].padStart(2, '0')}:${match[2]}`
+    }
+    const d = new Date(t)
+    if (!isNaN(d.getTime())) {
+        return `${pad(d.getHours())}:${pad(d.getMinutes())}`
+    }
+    return null
+}
+
+const depInit = parseDateTime(form.departure_date)
+const arrInit = parseDateTime(form.arrival_date)
+
+const departureDatePart = ref<Date | null>(depInit.date)
+const departureTimePart = ref<string | null>(depInit.time)
+const arrivalDatePart   = ref<Date | null>(arrInit.date)
+const arrivalTimePart   = ref<string | null>(arrInit.time)
+
+const depDateMenu = ref(false)
+const depTimeMenu = ref(false)
+const arrDateMenu = ref(false)
+const arrTimeMenu = ref(false)
+
+// A short guard so programmatic updates (e.g. auto-fill of arrival) don't
+// fight with the "only auto-fill once" behaviour below.
+let suppressArrivalAutoFill = false
+
+// Keep form.departure_date in sync whenever either split piece changes
+watch([departureDatePart, departureTimePart], () => {
+    form.departure_date = combineDateTime(departureDatePart.value, departureTimePart.value)
+})
+
+// Keep form.arrival_date in sync whenever either split piece changes
+watch([arrivalDatePart, arrivalTimePart], () => {
+    if (suppressArrivalAutoFill) return
+    form.arrival_date = combineDateTime(arrivalDatePart.value, arrivalTimePart.value)
+})
+
+// Auto-fill arrival (+1hr) the first time a departure TIME is chosen (and a
+// departure date is already set) and arrival is still empty. Picking the
+// departure date alone no longer triggers this — only setting the time does.
+watch(departureTimePart, (newTime) => {
+    if (suppressArrivalAutoFill) return
+    if (!newTime || !departureDatePart.value || arrivalDatePart.value) return
+
+    const dep = new Date(departureDatePart.value)
+    const [h, m] = newTime.split(':').map(Number)
+    dep.setHours(h, m)
     const arr = new Date(dep.getTime() + 60 * 60 * 1000)
 
-    const pad = (n: number) => String(n).padStart(2, '0')
+    suppressArrivalAutoFill = true
-    form.arrival_date = `${arr.getFullYear()}-${pad(arr.getMonth() + 1)}-${pad(arr.getDate())}T${pad(arr.getHours())}:${pad(arr.getMinutes())}`
+    arrivalDatePart.value = new Date(arr.getFullYear(), arr.getMonth(), arr.getDate())
-})
+    arrivalTimePart.value = `${pad(arr.getHours())}:${pad(arr.getMinutes())}`
+    suppressArrivalAutoFill = false
+
+    form.arrival_date = combineDateTime(arrivalDatePart.value, arrivalTimePart.value)
+}, { flush: 'sync' })
 
 const getArrivalBound = (form: any, offsetDays: number) => {
     if (!form.departure_date) return undefined
-    const pad = (n: number) => String(n).padStart(2, '0')
     const d = new Date(form.departure_date)
     d.setDate(d.getDate() + offsetDays)
     return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
@@ -208,6 +393,138 @@ const getArrivalBound = (form: any, offsetDays: number) => {
 
 const arrivalMin = computed(() => getArrivalBound(form, -2))
 const arrivalMax = computed(() => getArrivalBound(form, 3))
+
+const arrivalMinDate = computed(() => arrivalMin.value ? new Date(arrivalMin.value) : undefined)
+const arrivalMaxDate = computed(() => arrivalMax.value ? new Date(arrivalMax.value) : undefined)
+
+// ── Editable, format-aware date text inputs ─────────────────────────────────
+// departureDatePart / arrivalDatePart stay the source of truth as Date
+// objects. These input refs are what the text-fields actually bind to, so
+// the user can type freely; parsing only commits on blur/enter.
+
+const departureDateInput = ref(formatDateForFormat(departureDatePart.value, dateFormat.value))
+const arrivalDateInput   = ref(formatDateForFormat(arrivalDatePart.value, dateFormat.value))
+
+watch([departureDatePart, dateFormat], () => {
+    departureDateInput.value = formatDateForFormat(departureDatePart.value, dateFormat.value)
+})
+watch([arrivalDatePart, dateFormat], () => {
+    arrivalDateInput.value = formatDateForFormat(arrivalDatePart.value, dateFormat.value)
+})
+
+function commitDepartureDateInput() {
+    if (!departureDateInput.value.trim()) {
+        departureDatePart.value = null
+        return
+    }
+    const parsed = parseDateInputStr(departureDateInput.value, dateFormat.value)
+    if (parsed) {
+        departureDatePart.value = parsed
+    } else {
+        departureDateInput.value = formatDateForFormat(departureDatePart.value, dateFormat.value)
+    }
+}
+
+function commitArrivalDateInput() {
+    if (!arrivalDateInput.value.trim()) {
+        arrivalDatePart.value = null
+        return
+    }
+    const parsed = parseDateInputStr(arrivalDateInput.value, dateFormat.value)
+    if (parsed) {
+        arrivalDatePart.value = parsed
+    } else {
+        arrivalDateInput.value = formatDateForFormat(arrivalDatePart.value, dateFormat.value)
+    }
+}
+
+// ── Editable, format-aware time text fields ────────────────────────────────
+// departureTimePart / arrivalTimePart stay the source of truth as internal
+// "HH:mm" (24hr) strings. These input refs are what the text-fields actually
+// bind to, so the user can type freely; parsing only commits on blur/enter.
+
+function formatTimeForFormat(t: string | null, format: string): string {
+    if (!t) return ''
+    const [hStr, mStr] = t.split(':')
+    let h = parseInt(hStr, 10)
+    if (isNaN(h)) return ''
+
+    if (format === '24hr') {
+        return `${pad(h)}:${mStr}`
+    }
+
+    const ampm = h >= 12 ? 'PM' : 'AM'
+    let h12 = h % 12
+    if (h12 === 0) h12 = 12
+    return `${h12}:${mStr} ${ampm}`
+}
+
+function parseTimeInput(input: string): string | null {
+    const trimmed = input.trim()
+    if (!trimmed) return null
+
+    // ampm form: "2:30 PM", "2:30PM", "2 PM", "2PM"
+    let match = trimmed.match(/^(\d{1,2}):?(\d{2})?\s*([AaPp][Mm])$/)
+    if (match) {
+        let h = parseInt(match[1], 10)
+        const m = match[2] ? parseInt(match[2], 10) : 0
+        const ampm = match[3].toUpperCase()
+        if (h >= 1 && h <= 12 && m >= 0 && m <= 59) {
+            if (ampm === 'PM' && h !== 12) h += 12
+            if (ampm === 'AM' && h === 12) h = 0
+            return `${pad(h)}:${pad(m)}`
+        }
+        return null
+    }
+
+    // 24hr form: "14:30" or "1430"
+    match = trimmed.match(/^(\d{1,2}):?(\d{2})$/)
+    if (match) {
+        const h = parseInt(match[1], 10)
+        const m = parseInt(match[2], 10)
+        if (h >= 0 && h <= 23 && m >= 0 && m <= 59) {
+            return `${pad(h)}:${pad(m)}`
+        }
+    }
+
+    return null
+}
+
+const departureTimeInput = ref(formatTimeForFormat(departureTimePart.value, timeFormat.value))
+const arrivalTimeInput   = ref(formatTimeForFormat(arrivalTimePart.value, timeFormat.value))
+
+watch([departureTimePart, timeFormat], () => {
+    departureTimeInput.value = formatTimeForFormat(departureTimePart.value, timeFormat.value)
+})
+watch([arrivalTimePart, timeFormat], () => {
+    arrivalTimeInput.value = formatTimeForFormat(arrivalTimePart.value, timeFormat.value)
+})
+
+function commitDepartureTimeInput() {
+    if (!departureTimeInput.value.trim()) {
+        departureTimePart.value = null
+        return
+    }
+    const parsed = parseTimeInput(departureTimeInput.value)
+    if (parsed !== null) {
+        departureTimePart.value = parsed
+    } else {
+        departureTimeInput.value = formatTimeForFormat(departureTimePart.value, timeFormat.value)
+    }
+}
+
+function commitArrivalTimeInput() {
+    if (!arrivalTimeInput.value.trim()) {
+        arrivalTimePart.value = null
+        return
+    }
+    const parsed = parseTimeInput(arrivalTimeInput.value)
+    if (parsed !== null) {
+        arrivalTimePart.value = parsed
+    } else {
+        arrivalTimeInput.value = formatTimeForFormat(arrivalTimePart.value, timeFormat.value)
+    }
+}
 </script>
 
 <template>
@@ -249,27 +566,118 @@ const arrivalMax = computed(() => getArrivalBound(form, 3))
                     </v-col>
                 </v-row>
 
-                <!-- ── Departure + Arrival datetime ──────────────────────── -->
+                <!-- ── Departure date + time ──────────────────────────────── -->
                 <v-row>
-                    <v-col cols="12" md="6">
+                    <v-col cols="12" sm="6">
+                        <v-menu v-model="depDateMenu" :close-on-content-click="false">
+                            <template #activator="{ props: menuProps }">
                                 <v-text-field
-                            v-model="form.departure_date"
+                                    v-bind="menuProps"
-                            label="Departure Date & Time"
+                                    v-model="departureDateInput"
-                            type="datetime-local"
+                                    label="Departure Date"
+                                    clearable
+                                    prepend-inner-icon="mdi-calendar"
+                                    :placeholder="dateFormat"
                                     :disabled="!lookupComplete"
                                     :error-messages="submitForm.errors.departure_date"
+                                    @click:clear="clearDepartureDate"
+                                    @blur="commitDepartureDateInput"
+                                    @keydown.enter="commitDepartureDateInput"
+                                    autocomplete="false"
                                 />
+                            </template>
+                            <v-date-picker
+                                v-model="departureDatePart"
+                                @update:model-value="depDateMenu = false"
+                            />
+                        </v-menu>
                     </v-col>
-                    <v-col cols="12" md="6">
+                    <v-col cols="12" sm="6">
+                        <v-menu v-model="depTimeMenu" :close-on-content-click="false">
+                            <template #activator="{ props: menuProps }">
                                 <v-text-field
-                            v-model="form.arrival_date"
+                                    v-bind="menuProps"
-                            label="Arrival Date & Time"
+                                    v-model="departureTimeInput"
-                            type="datetime-local"
+                                    label="Departure Time"
+                                    clearable
+                                    prepend-inner-icon="mdi-clock-outline"
+                                    :placeholder="timeFormat === '24hr' ? 'e.g. 1430' : 'e.g. 2:30 PM'"
+                                    :disabled="!lookupComplete"
+                                    @click:clear="clearDepartureTime"
+                                    @blur="commitDepartureTimeInput"
+                                    @keydown.enter="commitDepartureTimeInput"
+                                />
+                            </template>
+                            <v-card>
+                                <v-time-picker
+                                    v-model="departureTimePart"
+                                    :format="timeFormat"
+                                    scrollable
+                                />
+                                <v-card-actions>
+                                    <v-spacer />
+                                    <v-btn variant="text" @click="depTimeMenu = false">OK</v-btn>
+                                </v-card-actions>
+                            </v-card>
+                        </v-menu>
+                    </v-col>
+                </v-row>
+
+                <!-- ── Arrival date + time ─────────────────────────────────── -->
+                <v-row>
+                    <v-col cols="12" sm="6">
+                        <v-menu v-model="arrDateMenu" :close-on-content-click="false">
+                            <template #activator="{ props: menuProps }">
+                                <v-text-field
+                                    v-bind="menuProps"
+                                    v-model="arrivalDateInput"
+                                    label="Arrival Date"
+                                    clearable
+                                    prepend-inner-icon="mdi-calendar"
+                                    :placeholder="dateFormat"
                                     :disabled="!lookupComplete"
                                     :error-messages="submitForm.errors.arrival_date"
-                            :min="arrivalMin"
+                                    @click:clear="clearArrivalDate"
-                            :max="arrivalMax"
+                                    @blur="commitArrivalDateInput"
+                                    @keydown.enter="commitArrivalDateInput"
                                 />
+                            </template>
+                            <v-date-picker
+                                v-model="arrivalDatePart"
+                                :min="arrivalMinDate"
+                                :max="arrivalMaxDate"
+                                @update:model-value="arrDateMenu = false"
+                            />
+                        </v-menu>
+                    </v-col>
+                    <v-col cols="12" sm="6">
+                        <v-menu v-model="arrTimeMenu" :close-on-content-click="false">
+                            <template #activator="{ props: menuProps }">
+                                <v-text-field
+                                    v-bind="menuProps"
+                                    v-model="arrivalTimeInput"
+                                    label="Arrival Time"
+                                    clearable
+                                    prepend-inner-icon="mdi-clock-outline"
+                                    :placeholder="timeFormat === '24hr' ? 'e.g. 1430' : 'e.g. 2:30 PM'"
+                                    :disabled="!lookupComplete"
+                                    @click:clear="clearArrivalTime"
+                                    @blur="commitArrivalTimeInput"
+                                    @keydown.enter="commitArrivalTimeInput"
+                                />
+                            </template>
+                            <v-card>
+                                <v-time-picker
+                                    v-model="arrivalTimePart"
+                                    :format="timeFormat"
+                                    scrollable
+                                />
+                                <v-card-actions>
+                                    <v-spacer />
+                                    <v-btn variant="text" @click="arrTimeMenu = false">OK</v-btn>
+                                </v-card-actions>
+                            </v-card>
+                        </v-menu>
                     </v-col>
                 </v-row>
 

resources/js/Types/types.d.ts

@@ -30,6 +30,8 @@ export interface UserSettings {
     show_map_legend: boolean
     hide_impossible_achievements: boolean
     hide_map_filters: boolean
+    time_format: "ampm" | "24hr"
+    date_format: string
 }
 
 
@@ -303,7 +305,7 @@ export interface Flight {
     airline: Airline | null
     aircraft: Aircraft | null
     seat_type: SeatType | null
-    crew_type: CrewType | null
+    crew_type?: CrewType | null
     flight_reason: FlightReason | null
     flight_class: FlightClass | null
     duration_display: string

resources/js/vite-env.d.ts

@@ -2,3 +2,4 @@
 /// <reference types="vite-plugin-pwa/client" />
 
 declare module '*.css'
+declare const __APP_VERSION__: string

resources/views/app.blade.php

@@ -9,6 +9,7 @@
         <link rel="icon" type="image/x-icon" href="{{ asset('img/favicons/favicon.png') }}">
         <!-- Fonts -->
 
+        <meta name="description" content="FlightsGoneBy is the ultimate flight diary — log every flight, earn achievements, visualise your travels on an interactive map, and share your stats with friends.">
         <link rel="preconnect" href="https://fonts.bunny.net">
         <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
         <!-- Apple Touch Icons -->

vite.config.ts

@@ -4,8 +4,22 @@ import vue from '@vitejs/plugin-vue';
 import path from 'path';
 import vuetify from "vite-plugin-vuetify";
 import { VitePWA } from 'vite-plugin-pwa';
+import { execSync } from 'child_process'
+
+
+function getAppVersion(): string {
+    try {
+        // Prefer a tag if one points at HEAD, else fall back to short hash
+        return execSync('git describe --tags --always --dirty').toString().trim()
+    } catch {
+        return 'Unknown'
+    }
+}
 
 export default defineConfig({
+    define: {
+        __APP_VERSION__: JSON.stringify(process.env.VITE_APP_VERSION ?? 'Dev'),
+    },
     plugins: [
         laravel({
             input: 'resources/js/app.ts',