Added custom date format

Reviewed-on: #5

app/Enums/FlightNotificationType.php

@@ -28,7 +28,7 @@ enum FlightNotificationType: string
     {
         return match ($this) {
             self::Booked    => "{$user->name} booked a new flight",
-            self::Logged    => "{$user->name} logged a new flight",
+            self::Logged    => "{$user->name} logged a historic flight",
             self::Cancelled => "{$user->name} cancelled a flight",
             self::Departed  => "{$user->name} is taking off!",
             self::Arrived   => "{$user->name} has landed!",

app/Models/User.php

@@ -153,7 +153,26 @@ class User extends Authenticatable implements MustVerifyEmail
                 ->toJson();
         });
 
-        $collection = collect(json_decode($json));
+        $dateFormat = auth()->user()?->resolved_settings['date_format'] ?? 'j M Y';
+        $timeFormat = auth()->user()?->resolved_settings['time_format'] === '24hr' ? 'Hi' : 'g:iA';
+
+        $collection = collect(json_decode($json))
+            ->map(function ($flight) use ($dateFormat, $timeFormat) {
+                $departure = Carbon::parse($flight->departure_date)
+                    ->setTimezone($flight->departure_airport->timezone);
+
+                $arrival = Carbon::parse($flight->arrival_date)
+                    ->setTimezone($flight->arrival_airport->timezone);
+
+                $flight->departure_date_display = $departure->format($dateFormat);
+                $flight->departure_time_display = $departure->format($timeFormat);
+
+                $flight->arrival_date_display = $arrival->format($dateFormat);
+                $flight->arrival_time_display = $arrival->format($timeFormat);
+
+                return $flight;
+            });
+
         $today = now('UTC')->toDateString();
 
         return match ($filter) {

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,42 @@ 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'     => 'date_format',
+                'type'    => 'select',
+                'label'   => 'Date Format',
+                'category' => 'Localization',
+                'default' => 'j M Y',
+                'options' => [
+                    ['value' => 'j M Y',   'label' => '20 Feb 2015'],
+                    ['value' => 'Y-m-d',   'label' => '2015-02-20'],
+                    ['value' => 'd/m/Y',   'label' => '20/02/2015'],
+                    ['value' => 'm/d/Y',   'label' => '02/20/2015'],
+                ],
+            ],
             [
                 'key'     => 'default_login_page',
                 'type'    => 'select',

resources/js/Components/FlightsGoneBy/FlightMap.vue

@@ -659,7 +659,7 @@ export default defineComponent({
 
         const fitBounds = (): void => {
             if (!props.flights.length) return
-            const padding = props.compact ? 25 : 60
+            const padding = props.compact ? 40 : 60
 
             const lngs = props.flights.flatMap(f => [f.departure_airport.longitude_deg, f.arrival_airport.longitude_deg])
             const lats = props.flights.flatMap(f => [f.departure_airport.latitude_deg,  f.arrival_airport.latitude_deg])

resources/js/Pages/AddFlight.vue

@@ -1,16 +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?: {
@@ -39,6 +39,11 @@ const props = defineProps<{
 
 const isEdit = !!props.flight
 
+// ── User format preferences ─────────────────────────────────────────────────
+const timeFormat = computed(() => page.auth?.user?.resolved_settings?.time_format ?? 'ampm')
+
+const pad = (n: number) => String(n).padStart(2, '0')
+
 // ── Flight number lookup ──────────────────────────────────────────────────────
 
 const flightNumber   = ref(props.flight?.flight_number ?? '')
@@ -209,8 +214,6 @@ const aircraftOptionsData = ref<{ value: number; title: string }[]>(props.flight
 // on. These refs + watchers just give the template two separate pickers while
 // keeping those combined strings in sync — no server-side changes needed.
 
-const pad = (n: number) => String(n).padStart(2, '0')
-
 function parseDateTime(dt: string | null | undefined) {
     if (!dt) return { date: null as Date | null, time: null as string | null }
     const d = new Date(dt)
@@ -227,23 +230,6 @@ function combineDateTime(date: Date | null, time: string | null): string {
     return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${(hh ?? '00').padStart(2, '0')}:${(mm ?? '00').padStart(2, '0')}`
 }
 
-const formatDateDisplay = (d: Date | null) =>
-    d ? d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) : ''
-
-// Time is stored internally as a 24hr "HH:mm" string (VTimePicker's model
-// value is always 24hr regardless of the `format` display prop). This just
-// formats it for display in the read-only text fields.
-function formatTimeDisplay(t: string | null): string {
-    if (!t) return ''
-    const [hStr, mStr] = t.split(':')
-    let h = parseInt(hStr, 10)
-    if (isNaN(h)) return ''
-    const ampm = h >= 12 ? 'PM' : 'AM'
-    h = h % 12
-    if (h === 0) h = 12
-    return `${h}:${mStr} ${ampm}`
-}
-
 function clearDepartureDate() { departureDatePart.value = null }
 function clearDepartureTime() { departureTimePart.value = null }
 function clearArrivalDate()   { arrivalDatePart.value = null }
@@ -324,6 +310,124 @@ 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)
+
+// ── Native date inputs ───────────────────────────────────────────────────────
+// departureDatePart / arrivalDatePart stay the source of truth as Date
+// objects. These computed get/set pairs are what the native <input type=date>
+// elements bind to — the browser handles locale display, typing, and
+// validation itself, so no custom format-aware parsing is needed here.
+// The Vuetify v-date-picker is still available via a separate calendar icon
+// for users who prefer to pick from a calendar rather than type.
+
+function toIsoDateString(d: Date | null): string {
+    if (!d) return ''
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+}
+
+function fromIsoDateString(value: string): Date | null {
+    if (!value) return null
+    const [y, m, d] = value.split('-').map(Number)
+    if (!y || !m || !d) return null
+    return new Date(y, m - 1, d)
+}
+
+const departureDateValue = computed({
+    get: () => toIsoDateString(departureDatePart.value),
+    set: (value: string) => { departureDatePart.value = fromIsoDateString(value) },
+})
+
+const arrivalDateValue = computed({
+    get: () => toIsoDateString(arrivalDatePart.value),
+    set: (value: string) => { arrivalDatePart.value = fromIsoDateString(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>
@@ -368,18 +472,21 @@ const arrivalMaxDate = computed(() => arrivalMax.value ? new Date(arrivalMax.val
                 <!-- ── Departure date + time ──────────────────────────────── -->
                 <v-row>
                     <v-col cols="12" sm="6">
-                        <v-menu v-model="depDateMenu" :close-on-content-click="false">
-                            <template #activator="{ props: menuProps }">
                         <v-text-field
-                                    v-bind="menuProps"
+                            v-model="departureDateValue"
-                                    :model-value="formatDateDisplay(departureDatePart)"
+                            type="date"
                             label="Departure Date"
-                                    readonly
-                                    clearable
                             prepend-inner-icon="mdi-calendar"
                             :disabled="!lookupComplete"
                             :error-messages="submitForm.errors.departure_date"
-                                    @click:clear="clearDepartureDate"
+                        >
+                            <template #append-inner>
+                                <v-menu v-model="depDateMenu" :close-on-content-click="false">
+                                    <template #activator="{ props: menuProps }">
+                                        <v-icon
+                                            v-bind="menuProps"
+                                            icon="mdi-calendar-month"
+                                            style="cursor: pointer"
                                         />
                                     </template>
                                     <v-date-picker
@@ -387,25 +494,29 @@ const arrivalMaxDate = computed(() => arrivalMax.value ? new Date(arrivalMax.val
                                         @update:model-value="depDateMenu = false"
                                     />
                                 </v-menu>
+                            </template>
+                        </v-text-field>
                     </v-col>
                     <v-col cols="12" sm="6">
                         <v-menu v-model="depTimeMenu" :close-on-content-click="false">
                             <template #activator="{ props: menuProps }">
                                 <v-text-field
                                     v-bind="menuProps"
-                                    :model-value="formatTimeDisplay(departureTimePart)"
+                                    v-model="departureTimeInput"
                                     label="Departure Time"
-                                    readonly
                                     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="ampm"
+                                    :format="timeFormat"
                                     scrollable
                                 />
                                 <v-card-actions>
@@ -420,18 +531,21 @@ const arrivalMaxDate = computed(() => arrivalMax.value ? new Date(arrivalMax.val
                 <!-- ── 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="arrivalDateValue"
-                                    :model-value="formatDateDisplay(arrivalDatePart)"
+                            type="date"
                             label="Arrival Date"
-                                    readonly
-                                    clearable
                             prepend-inner-icon="mdi-calendar"
                             :disabled="!lookupComplete"
                             :error-messages="submitForm.errors.arrival_date"
-                                    @click:clear="clearArrivalDate"
+                        >
+                            <template #append-inner>
+                                <v-menu v-model="arrDateMenu" :close-on-content-click="false">
+                                    <template #activator="{ props: menuProps }">
+                                        <v-icon
+                                            v-bind="menuProps"
+                                            icon="mdi-calendar-month"
+                                            style="cursor: pointer"
                                         />
                                     </template>
                                     <v-date-picker
@@ -441,25 +555,29 @@ const arrivalMaxDate = computed(() => arrivalMax.value ? new Date(arrivalMax.val
                                         @update:model-value="arrDateMenu = false"
                                     />
                                 </v-menu>
+                            </template>
+                        </v-text-field>
                     </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"
-                                    :model-value="formatTimeDisplay(arrivalTimePart)"
+                                    v-model="arrivalTimeInput"
                                     label="Arrival Time"
-                                    readonly
                                     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="ampm"
+                                    :format="timeFormat"
                                     scrollable
                                 />
                                 <v-card-actions>
@@ -650,4 +768,8 @@ const arrivalMaxDate = computed(() => arrivalMax.value ? new Date(arrivalMax.val
 </template>
 
 <style scoped>
+:deep(input[type="date"]::-webkit-calendar-picker-indicator) {
+    display: none;
+    -webkit-appearance: none;
+}
 </style>

resources/js/Pages/ReconcileFlight.vue

@@ -191,7 +191,6 @@ watch(() => form.flight_reason, (val) => console.log('flight_reason changed:', v
                         <v-select v-model="form.seat_type" label="Seat Type" :items="flight.seat_types" :error-messages="submitForm.errors.seat_type_id"  />
                     </v-col>
                     <v-col cols="12" md="6">
-                        {{console.log(form.flight_reason)}}
                         <v-select v-model="form.flight_reason" label="Reason" :items="flight.flight_reasons" :error-messages="submitForm.errors.flight_reason_id"  />
                     </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
 }