From 509efbe821462a10f36e2b32c3c1fbfa1c1aa0f2 Mon Sep 17 00:00:00 2001
From: josh <josh.dredge@outlook.com>
Date: Sat, 4 Apr 2026 22:19:58 +1000
Subject: [PATCH] Added timezones

---
 .../Commands/PopulateAirportTimezones.php     |   2 +-
 .../js/Components/FlightsGoneBy/GlassBox.vue  |  20 +-
 resources/js/Layouts/MainLayout.vue           |  26 ++-
 resources/js/Pages/Auth/ConfirmPassword.vue   |  92 +++++----
 resources/js/Pages/Auth/ForgotPassword.vue    | 110 ++++++-----
 resources/js/Pages/Auth/Login.vue             | 167 ++++++++--------
 resources/js/Pages/Auth/Register.vue          | 184 +++++++++---------
 resources/js/Pages/Auth/ResetPassword.vue     | 158 +++++++--------
 resources/js/Pages/Auth/VerifyEmail.vue       | 103 +++++-----
 resources/js/Pages/Dashboard.vue              |  69 ++++---
 resources/js/Pages/ReconcileFlight.vue        |   9 +-
 11 files changed, 516 insertions(+), 424 deletions(-)

diff --git a/app/Console/Commands/PopulateAirportTimezones.php b/app/Console/Commands/PopulateAirportTimezones.php
index cd1e116..c2def03 100644
--- a/app/Console/Commands/PopulateAirportTimezones.php
+++ b/app/Console/Commands/PopulateAirportTimezones.php
@@ -17,7 +17,7 @@ class PopulateAirportTimezones extends Command
      */
     public function handle()
     {
-        Airport::whereNull('timezone')->chunk(100, function ($airports) {
+        Airport::whereNull('timezone')->chunkById(100, function ($airports) {
             foreach ($airports as $airport) {
                 $zoneName = null;
                 $attempts = 0;
diff --git a/resources/js/Components/FlightsGoneBy/GlassBox.vue b/resources/js/Components/FlightsGoneBy/GlassBox.vue
index 54facef..0383863 100644
--- a/resources/js/Components/FlightsGoneBy/GlassBox.vue
+++ b/resources/js/Components/FlightsGoneBy/GlassBox.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
-
+defineProps<{
+    title?: string;
+    blurb?: string;
+}>();
 </script>
 
 <template>
     <div class="glass-box glass glass-border">
+        <h2 v-if="title">{{ title }}</h2>
+        <p v-if="blurb">{{ blurb }}</p>
         <slot />
     </div>
 </template>
@@ -12,8 +17,19 @@
 .glass-box {
     width: 50%;
     min-height: 50dvh;
-    gap:1em;
+    gap: 1em;
     padding: 2em;
 }
 
+h2 {
+    font-size: 2rem;
+    text-align: center;
+}
+
+p {
+    text-align: center;
+    width: 100%;
+    opacity: 0.7;
+    margin-bottom: 1rem;
+}
 </style>
diff --git a/resources/js/Layouts/MainLayout.vue b/resources/js/Layouts/MainLayout.vue
index 6127489..5eaa878 100644
--- a/resources/js/Layouts/MainLayout.vue
+++ b/resources/js/Layouts/MainLayout.vue
@@ -3,15 +3,20 @@ import {Link} from "@inertiajs/vue3";
 import MainHeader from "@/Components/FlightsGoneBy/MainHeader.vue";
 import MainFooter from "@/Components/FlightsGoneBy/MainFooter.vue";
 import Radar from "@/Components/FlightsGoneBy/Radar.vue";
+import { usePage } from "@inertiajs/vue3";
+const page = usePage();
+
 </script>
 
 <template>
     <Radar>
         <div class="layoutContainer">
             <MainHeader />
-            <main id="pageContainer">
-                <slot />
-            </main>
+            <Transition name="fade" mode="out-in">
+                <main id="pageContainer" :key="page.url" >
+                        <slot />
+                </main>
+            </Transition>
             <MainFooter />
         </div>
     </Radar>
@@ -27,10 +32,10 @@ import Radar from "@/Components/FlightsGoneBy/Radar.vue";
 }
 
 main {
-    flex: 1 0 90dvh;   /* THIS is the key */
+    flex: 1 0 90dvh;
     min-height: 0;
     padding: 1rem;
-    background: var(--surface-alt);
+    background:transparent;
     display:flex;
     flex-direction: column;
     justify-content: center;
@@ -38,4 +43,15 @@ main {
 }
 
 
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+    transform: translateY(10px);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
 </style>
diff --git a/resources/js/Pages/Auth/ConfirmPassword.vue b/resources/js/Pages/Auth/ConfirmPassword.vue
index 1e97cb9..1aa4ea5 100644
--- a/resources/js/Pages/Auth/ConfirmPassword.vue
+++ b/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -1,10 +1,9 @@
-<script setup>
-import GuestLayout from '@/Layouts/GuestLayout.vue';
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
-import { Head, useForm } from '@inertiajs/vue3';
+<script setup lang="ts">
+import MainLayout from "@/Layouts/MainLayout.vue";
+import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
+import { Head, useForm } from "@inertiajs/vue3";
+
+defineOptions({ layout: MainLayout });
 
 const form = useForm({
     password: '',
@@ -18,38 +17,53 @@ const submit = () => {
 </script>
 
 <template>
-    <GuestLayout>
-        <Head title="Confirm Password" />
+    <Head title="Confirm Password" />
+    <GlassBox>
+        <h2>Confirm Password</h2>
+        <p>This is a secure area. Please confirm your password before continuing.</p>
 
-        <div class="mb-4 text-sm text-gray-600">
-            This is a secure area of the application. Please confirm your
-            password before continuing.
-        </div>
+        <v-form style="width: 100%" @submit.prevent="submit">
+            <v-container>
+                <v-row>
+                    <v-col cols="12">
+                        <v-text-field
+                            v-model="form.password"
+                            label="Password"
+                            type="password"
+                            autocomplete="current-password"
+                            autofocus
+                            :error-messages="form.errors.password"
+                        />
+                    </v-col>
+                </v-row>
 
-        <form @submit.prevent="submit">
-            <div>
-                <InputLabel for="password" value="Password" />
-                <TextInput
-                    id="password"
-                    type="password"
-                    class="mt-1 block w-full"
-                    v-model="form.password"
-                    required
-                    autocomplete="current-password"
-                    autofocus
-                />
-                <InputError class="mt-2" :message="form.errors.password" />
-            </div>
-
-            <div class="mt-4 flex justify-end">
-                <PrimaryButton
-                    class="ms-4"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
-                    Confirm
-                </PrimaryButton>
-            </div>
-        </form>
-    </GuestLayout>
+                <v-row>
+                    <v-col cols="12" class="d-flex justify-end">
+                        <v-btn
+                            size="large"
+                            type="submit"
+                            :loading="form.processing"
+                            :disabled="form.processing"
+                        >
+                            Confirm
+                        </v-btn>
+                    </v-col>
+                </v-row>
+            </v-container>
+        </v-form>
+    </GlassBox>
 </template>
+
+<style scoped>
+h2 {
+    font-size: 2rem;
+    text-align: center;
+}
+
+p {
+    text-align: center;
+    width: 100%;
+    opacity: 0.7;
+    margin-bottom: 1rem;
+}
+</style>
diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index fe5a196..72a1311 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -1,16 +1,13 @@
-<script setup>
-import GuestLayout from '@/Layouts/GuestLayout.vue';
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
-import { Head, useForm } from '@inertiajs/vue3';
+<script setup lang="ts">
+import MainLayout from "@/Layouts/MainLayout.vue";
+import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
+import { Head, useForm } from "@inertiajs/vue3";
 
-defineProps({
-    status: {
-        type: String,
-    },
-});
+defineOptions({ layout: MainLayout });
+
+defineProps<{
+    status?: string;
+}>();
 
 const form = useForm({
     email: '',
@@ -22,47 +19,54 @@ const submit = () => {
 </script>
 
 <template>
-    <GuestLayout>
-        <Head title="Forgot Password" />
+    <Head title="Forgot Password" />
+    <GlassBox title="Forgot Your Password?" blurb="No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.">
+        <v-alert v-if="status" type="success" class="mb-2">{{ status }}</v-alert>
 
-        <div class="mb-4 text-sm text-gray-600">
-            Forgot your password? No problem. Just let us know your email
-            address and we will email you a password reset link that will allow
-            you to choose a new one.
-        </div>
+        <v-form style="width: 100%" @submit.prevent="submit">
+            <v-container>
+                <v-row>
+                    <v-col cols="12">
+                        <v-text-field
+                            v-model="form.email"
+                            label="Email"
+                            type="email"
+                            autocomplete="username"
+                            autofocus
+                            :error-messages="form.errors.email"
+                        />
+                    </v-col>
+                </v-row>
 
-        <div
-            v-if="status"
-            class="mb-4 text-sm font-medium text-green-600"
-        >
-            {{ status }}
-        </div>
-
-        <form @submit.prevent="submit">
-            <div>
-                <InputLabel for="email" value="Email" />
-
-                <TextInput
-                    id="email"
-                    type="email"
-                    class="mt-1 block w-full"
-                    v-model="form.email"
-                    required
-                    autofocus
-                    autocomplete="username"
-                />
-
-                <InputError class="mt-2" :message="form.errors.email" />
-            </div>
-
-            <div class="mt-4 flex items-center justify-end">
-                <PrimaryButton
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
-                    Email Password Reset Link
-                </PrimaryButton>
-            </div>
-        </form>
-    </GuestLayout>
+                <v-row>
+                    <v-col cols="12" class="d-flex justify-end">
+                        <v-btn
+                            variant="elevated"
+                            size="large"
+                            block
+                            type="submit"
+                            :loading="form.processing"
+                            :disabled="form.processing"
+                        >
+                            Email Password Reset Link
+                        </v-btn>
+                    </v-col>
+                </v-row>
+            </v-container>
+        </v-form>
+    </GlassBox>
 </template>
+
+<style scoped>
+h2 {
+    font-size: 2rem;
+    text-align: center;
+}
+
+p {
+    text-align: center;
+    width: 100%;
+    opacity: 0.7;
+    margin-bottom: 1rem;
+}
+</style>
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 8e906a9..b1bc2cb 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -1,20 +1,14 @@
-<script setup>
-import Checkbox from '@/Components/Checkbox.vue';
-import GuestLayout from '@/Layouts/GuestLayout.vue';
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
-import { Head, Link, useForm } from '@inertiajs/vue3';
+<script setup lang="ts">
+import MainLayout from "@/Layouts/MainLayout.vue";
+import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
+import { Head, Link, useForm } from "@inertiajs/vue3";
 
-defineProps({
-    canResetPassword: {
-        type: Boolean,
-    },
-    status: {
-        type: String,
-    },
-});
+defineOptions({ layout: MainLayout });
+
+defineProps<{
+    canResetPassword: boolean;
+    status?: string;
+}>();
 
 const form = useForm({
     email: '',
@@ -30,71 +24,88 @@ const submit = () => {
 </script>
 
 <template>
-    <GuestLayout>
-        <Head title="Log in" />
+    <Head title="Log in" />
+    <GlassBox title="Welcome Back" blurb="Log in to continue logging your flights.">
 
-        <div v-if="status" class="mb-4 text-sm font-medium text-green-600">
-            {{ status }}
-        </div>
+        <v-alert v-if="status" type="success" class="mb-2">{{ status }}</v-alert>
 
-        <form @submit.prevent="submit">
-            <div>
-                <InputLabel for="email" value="Email" />
+        <v-form style="width: 100%" @submit.prevent="submit">
+            <v-container>
+                <v-row>
+                    <v-col cols="12">
+                        <v-text-field
+                            v-model="form.email"
+                            label="Email"
+                            type="email"
+                            autocomplete="username"
+                            autofocus
+                            :error-messages="form.errors.email"
+                        />
+                    </v-col>
+                </v-row>
 
-                <TextInput
-                    id="email"
-                    type="email"
-                    class="mt-1 block w-full"
-                    v-model="form.email"
-                    required
-                    autofocus
-                    autocomplete="username"
-                />
+                <v-row>
+                    <v-col cols="12">
+                        <v-text-field
+                            v-model="form.password"
+                            label="Password"
+                            type="password"
+                            autocomplete="current-password"
+                            :error-messages="form.errors.password"
+                        />
+                    </v-col>
+                </v-row>
 
-                <InputError class="mt-2" :message="form.errors.email" />
-            </div>
+                <v-row>
+                    <v-col cols="12">
+                        <v-checkbox
+                            v-model="form.remember"
+                            label="Remember me"
+                            hide-details
+                        />
+                    </v-col>
+                </v-row>
 
-            <div class="mt-4">
-                <InputLabel for="password" value="Password" />
-
-                <TextInput
-                    id="password"
-                    type="password"
-                    class="mt-1 block w-full"
-                    v-model="form.password"
-                    required
-                    autocomplete="current-password"
-                />
-
-                <InputError class="mt-2" :message="form.errors.password" />
-            </div>
-
-            <div class="mt-4 block">
-                <label class="flex items-center">
-                    <Checkbox name="remember" v-model:checked="form.remember" />
-                    <span class="ms-2 text-sm text-gray-600"
-                        >Remember me</span
-                    >
-                </label>
-            </div>
-
-            <div class="mt-4 flex items-center justify-end">
-                <Link
-                    v-if="canResetPassword"
-                    :href="route('password.request')"
-                    class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                >
-                    Forgot your password?
-                </Link>
-
-                <PrimaryButton
-                    class="ms-4"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
-                    Log in
-                </PrimaryButton>
-            </div>
-        </form>
-    </GuestLayout>
+                <v-row>
+                    <v-col cols="12" class="d-flex align-center justify-end" style="gap: 1rem">
+                        <v-btn
+                            block
+                            variant="elevated"
+                            size="large"
+                            type="submit"
+                            :loading="form.processing"
+                            :disabled="form.processing"
+                        >
+                            Log in
+                        </v-btn>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col cols="12" class="d-flex align-center justify-end" style="gap: 1rem">
+                        <Link
+                            v-if="canResetPassword"
+                            :href="route('password.request')"
+                            style="opacity: 0.7; font-size: 0.9rem"
+                        >
+                            Forgot your password?
+                        </Link>
+                    </v-col>
+                </v-row>
+            </v-container>
+        </v-form>
+    </GlassBox>
 </template>
+
+<style scoped>
+h2 {
+    font-size: 2rem;
+    text-align: center;
+}
+
+p {
+    text-align: center;
+    width: 100%;
+    opacity: 0.7;
+    margin-bottom: 1rem;
+}
+</style>
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
index de4a5bf..cf06d23 100644
--- a/resources/js/Pages/Auth/Register.vue
+++ b/resources/js/Pages/Auth/Register.vue
@@ -1,10 +1,9 @@
-<script setup>
-import GuestLayout from '@/Layouts/GuestLayout.vue';
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
-import { Head, Link, useForm } from '@inertiajs/vue3';
+<script setup lang="ts">
+import MainLayout from "@/Layouts/MainLayout.vue";
+import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
+import { Head, Link, useForm } from "@inertiajs/vue3";
+
+defineOptions({ layout: MainLayout });
 
 const form = useForm({
     name: '',
@@ -21,93 +20,94 @@ const submit = () => {
 </script>
 
 <template>
-    <GuestLayout>
-        <Head title="Register" />
+    <Head title="Register" />
+    <GlassBox title="Create Account" blurb="Start logging your flights today.">
+        <v-form style="width: 100%" @submit.prevent="submit">
+            <v-container>
+                <v-row>
+                    <v-col cols="12">
+                        <v-text-field
+                            v-model="form.name"
+                            label="Name"
+                            autocomplete="name"
+                            autofocus
+                            :error-messages="form.errors.name"
+                        />
+                    </v-col>
+                </v-row>
 
-        <form @submit.prevent="submit">
-            <div>
-                <InputLabel for="name" value="Name" />
+                <v-row>
+                    <v-col cols="12">
+                        <v-text-field
+                            v-model="form.email"
+                            label="Email"
+                            type="email"
+                            autocomplete="username"
+                            :error-messages="form.errors.email"
+                        />
+                    </v-col>
+                </v-row>
 
-                <TextInput
-                    id="name"
-                    type="text"
-                    class="mt-1 block w-full"
-                    v-model="form.name"
-                    required
-                    autofocus
-                    autocomplete="name"
-                />
+                <v-row>
+                    <v-col cols="12">
+                        <v-text-field
+                            v-model="form.password"
+                            label="Password"
+                            type="password"
+                            autocomplete="new-password"
+                            :error-messages="form.errors.password"
+                        />
+                    </v-col>
+                </v-row>
 
-                <InputError class="mt-2" :message="form.errors.name" />
-            </div>
+                <v-row>
+                    <v-col cols="12">
+                        <v-text-field
+                            v-model="form.password_confirmation"
+                            label="Confirm Password"
+                            type="password"
+                            autocomplete="new-password"
+                            :error-messages="form.errors.password_confirmation"
+                        />
+                    </v-col>
+                </v-row>
 
-            <div class="mt-4">
-                <InputLabel for="email" value="Email" />
-
-                <TextInput
-                    id="email"
-                    type="email"
-                    class="mt-1 block w-full"
-                    v-model="form.email"
-                    required
-                    autocomplete="username"
-                />
-
-                <InputError class="mt-2" :message="form.errors.email" />
-            </div>
-
-            <div class="mt-4">
-                <InputLabel for="password" value="Password" />
-
-                <TextInput
-                    id="password"
-                    type="password"
-                    class="mt-1 block w-full"
-                    v-model="form.password"
-                    required
-                    autocomplete="new-password"
-                />
-
-                <InputError class="mt-2" :message="form.errors.password" />
-            </div>
-
-            <div class="mt-4">
-                <InputLabel
-                    for="password_confirmation"
-                    value="Confirm Password"
-                />
-
-                <TextInput
-                    id="password_confirmation"
-                    type="password"
-                    class="mt-1 block w-full"
-                    v-model="form.password_confirmation"
-                    required
-                    autocomplete="new-password"
-                />
-
-                <InputError
-                    class="mt-2"
-                    :message="form.errors.password_confirmation"
-                />
-            </div>
-
-            <div class="mt-4 flex items-center justify-end">
-                <Link
-                    :href="route('login')"
-                    class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                >
-                    Already registered?
-                </Link>
-
-                <PrimaryButton
-                    class="ms-4"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
-                    Register
-                </PrimaryButton>
-            </div>
-        </form>
-    </GuestLayout>
+                <v-row>
+                    <v-col cols="12" class="d-flex align-center justify-end" style="gap: 1rem">
+                        <v-btn
+                            variant="elevated"
+                            size="large"
+                            block
+                            type="submit"
+                            :loading="form.processing"
+                            :disabled="form.processing"
+                        >
+                            Register
+                        </v-btn>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col cols="12" class="d-flex align-center justify-end" style="gap: 1rem">
+                        <Link :href="route('login')" style="opacity: 0.7; font-size: 0.9rem">
+                            Already registered?
+                        </Link>
+                    </v-col>
+                </v-row>
+            </v-container>
+        </v-form>
+    </GlassBox>
 </template>
+
+<style scoped>
+h2 {
+    font-size: 2rem;
+    text-align: center;
+}
+
+p {
+    text-align: center;
+    width: 100%;
+    opacity: 0.7;
+    margin-bottom: 1rem;
+}
+</style>
diff --git a/resources/js/Pages/Auth/ResetPassword.vue b/resources/js/Pages/Auth/ResetPassword.vue
index e795844..022efe8 100644
--- a/resources/js/Pages/Auth/ResetPassword.vue
+++ b/resources/js/Pages/Auth/ResetPassword.vue
@@ -1,21 +1,14 @@
-<script setup>
-import GuestLayout from '@/Layouts/GuestLayout.vue';
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
-import { Head, useForm } from '@inertiajs/vue3';
+<script setup lang="ts">
+import MainLayout from "@/Layouts/MainLayout.vue";
+import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
+import { Head, useForm } from "@inertiajs/vue3";
 
-const props = defineProps({
-    email: {
-        type: String,
-        required: true,
-    },
-    token: {
-        type: String,
-        required: true,
-    },
-});
+defineOptions({ layout: MainLayout });
+
+const props = defineProps<{
+    email: string;
+    token: string;
+}>();
 
 const form = useForm({
     token: props.token,
@@ -32,70 +25,77 @@ const submit = () => {
 </script>
 
 <template>
-    <GuestLayout>
-        <Head title="Reset Password" />
+    <Head title="Reset Password" />
+    <GlassBox>
+        <h2>Reset Password</h2>
+        <p>Choose a new password for your account.</p>
 
-        <form @submit.prevent="submit">
-            <div>
-                <InputLabel for="email" value="Email" />
+        <v-form style="width: 100%" @submit.prevent="submit">
+            <v-container>
+                <v-row>
+                    <v-col cols="12">
+                        <v-text-field
+                            v-model="form.email"
+                            label="Email"
+                            type="email"
+                            autocomplete="username"
+                            autofocus
+                            :error-messages="form.errors.email"
+                        />
+                    </v-col>
+                </v-row>
 
-                <TextInput
-                    id="email"
-                    type="email"
-                    class="mt-1 block w-full"
-                    v-model="form.email"
-                    required
-                    autofocus
-                    autocomplete="username"
-                />
+                <v-row>
+                    <v-col cols="12">
+                        <v-text-field
+                            v-model="form.password"
+                            label="Password"
+                            type="password"
+                            autocomplete="new-password"
+                            :error-messages="form.errors.password"
+                        />
+                    </v-col>
+                </v-row>
 
-                <InputError class="mt-2" :message="form.errors.email" />
-            </div>
+                <v-row>
+                    <v-col cols="12">
+                        <v-text-field
+                            v-model="form.password_confirmation"
+                            label="Confirm Password"
+                            type="password"
+                            autocomplete="new-password"
+                            :error-messages="form.errors.password_confirmation"
+                        />
+                    </v-col>
+                </v-row>
 
-            <div class="mt-4">
-                <InputLabel for="password" value="Password" />
-
-                <TextInput
-                    id="password"
-                    type="password"
-                    class="mt-1 block w-full"
-                    v-model="form.password"
-                    required
-                    autocomplete="new-password"
-                />
-
-                <InputError class="mt-2" :message="form.errors.password" />
-            </div>
-
-            <div class="mt-4">
-                <InputLabel
-                    for="password_confirmation"
-                    value="Confirm Password"
-                />
-
-                <TextInput
-                    id="password_confirmation"
-                    type="password"
-                    class="mt-1 block w-full"
-                    v-model="form.password_confirmation"
-                    required
-                    autocomplete="new-password"
-                />
-
-                <InputError
-                    class="mt-2"
-                    :message="form.errors.password_confirmation"
-                />
-            </div>
-
-            <div class="mt-4 flex items-center justify-end">
-                <PrimaryButton
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
-                    Reset Password
-                </PrimaryButton>
-            </div>
-        </form>
-    </GuestLayout>
+                <v-row>
+                    <v-col cols="12" class="d-flex justify-end">
+                        <v-btn
+                            size="large"
+                            type="submit"
+                            :loading="form.processing"
+                            :disabled="form.processing"
+                        >
+                            Reset Password
+                        </v-btn>
+                    </v-col>
+                </v-row>
+            </v-container>
+        </v-form>
+    </GlassBox>
 </template>
+
+<style scoped>
+h2 {
+    font-size: 2rem;
+    text-align: center;
+}
+
+p {
+    text-align: center;
+    width: 100%;
+    opacity: 0.7;
+    margin-bottom: 1rem;
+}
+</style>
diff --git a/resources/js/Pages/Auth/VerifyEmail.vue b/resources/js/Pages/Auth/VerifyEmail.vue
index ffd8ed8..212b17a 100644
--- a/resources/js/Pages/Auth/VerifyEmail.vue
+++ b/resources/js/Pages/Auth/VerifyEmail.vue
@@ -1,14 +1,14 @@
-<script setup>
-import { computed } from 'vue';
-import GuestLayout from '@/Layouts/GuestLayout.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import { Head, Link, useForm } from '@inertiajs/vue3';
+<script setup lang="ts">
+import MainLayout from "@/Layouts/MainLayout.vue";
+import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
+import { Head, Link, useForm } from "@inertiajs/vue3";
+import { computed } from "vue";
 
-const props = defineProps({
-    status: {
-        type: String,
-    },
-});
+defineOptions({ layout: MainLayout });
+
+const props = defineProps<{
+    status?: string;
+}>();
 
 const form = useForm({});
 
@@ -16,46 +16,57 @@ const submit = () => {
     form.post(route('verification.send'));
 };
 
-const verificationLinkSent = computed(
-    () => props.status === 'verification-link-sent',
-);
+const verificationLinkSent = computed(() => props.status === 'verification-link-sent');
 </script>
 
 <template>
-    <GuestLayout>
-        <Head title="Email Verification" />
+    <Head title="Email Verification" />
+    <GlassBox>
+        <h2>Verify Your Email</h2>
+        <p>Thanks for signing up! Please verify your email address by clicking the link we sent you. If you didn't receive it, we can send another.</p>
 
-        <div class="mb-4 text-sm text-gray-600">
-            Thanks for signing up! Before getting started, could you verify your
-            email address by clicking on the link we just emailed to you? If you
-            didn't receive the email, we will gladly send you another.
-        </div>
+        <v-alert v-if="verificationLinkSent" type="success" class="mb-2">
+            A new verification link has been sent to your email address.
+        </v-alert>
 
-        <div
-            class="mb-4 text-sm font-medium text-green-600"
-            v-if="verificationLinkSent"
-        >
-            A new verification link has been sent to the email address you
-            provided during registration.
-        </div>
+        <v-form style="width: 100%" @submit.prevent="submit">
+            <v-container>
+                <v-row>
+                    <v-col cols="12" class="d-flex align-center justify-space-between">
+                        <v-btn
+                            size="large"
+                            type="submit"
+                            :loading="form.processing"
+                            :disabled="form.processing"
+                        >
+                            Resend Verification Email
+                        </v-btn>
 
-        <form @submit.prevent="submit">
-            <div class="mt-4 flex items-center justify-between">
-                <PrimaryButton
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
-                    Resend Verification Email
-                </PrimaryButton>
-
-                <Link
-                    :href="route('logout')"
-                    method="post"
-                    as="button"
-                    class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                    >Log Out</Link
-                >
-            </div>
-        </form>
-    </GuestLayout>
+                        <Link
+                            :href="route('logout')"
+                            method="post"
+                            as="button"
+                            style="opacity: 0.7; font-size: 0.9rem"
+                        >
+                            Log Out
+                        </Link>
+                    </v-col>
+                </v-row>
+            </v-container>
+        </v-form>
+    </GlassBox>
 </template>
+
+<style scoped>
+h2 {
+    font-size: 2rem;
+    text-align: center;
+}
+
+p {
+    text-align: center;
+    width: 100%;
+    opacity: 0.7;
+    margin-bottom: 1rem;
+}
+</style>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index f22f58e..2746a66 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -1,30 +1,49 @@
-<script setup>
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
-import { Head } from '@inertiajs/vue3';
+<script setup lang="ts">
+import MainLayout from "@/Layouts/MainLayout.vue";
+import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
+import { Head, Link } from "@inertiajs/vue3";
+import { usePage } from "@inertiajs/vue3";
+import { computed } from "vue";
+import {SharedProps} from "@/Types/types";
+import { router } from "@inertiajs/vue3";
+
+defineOptions({ layout: MainLayout });
+
+const page = usePage<SharedProps>();
+const name = computed(() => page?.props?.auth?.user?.name || 'there');
 </script>
 
 <template>
     <Head title="Dashboard" />
-
-    <AuthenticatedLayout>
-        <template #header>
-            <h2
-                class="text-xl font-semibold leading-tight text-gray-800"
-            >
-                Dashboard
-            </h2>
-        </template>
-
-        <div class="py-12">
-            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
-                <div
-                    class="overflow-hidden bg-white shadow-sm sm:rounded-lg"
-                >
-                    <div class="p-6 text-gray-900">
-                        You're logged in!
-                    </div>
-                </div>
-            </div>
-        </div>
-    </AuthenticatedLayout>
+    <GlassBox :title="`Hey there ${name} 👋`" blurb="What would you like to do?">
+        <v-container>
+            <v-row>
+                <v-col cols="12" md="6">
+                    <v-btn size="large" block href="#">
+                        Add a Flight
+                    </v-btn>
+                </v-col>
+                <v-col cols="12" md="6">
+                    <v-btn size="large" block href="#">
+                        Edit Flights
+                    </v-btn>
+                </v-col>
+                <v-col cols="12" md="6">
+                    <v-btn size="large" block :href="route('import.fr24')">
+                        Import from FR24
+                    </v-btn>
+                </v-col>
+                <v-col cols="12" md="6">
+                    <v-btn size="large" block href="#">
+                        View Profile
+                    </v-btn>
+                </v-col>
+                <v-col cols="12">
+                    <v-btn size="large" block @click="router.post(route('logout'))">
+                        Log Out
+                    </v-btn>
+                </v-col>
+            </v-row>
+        </v-container>
+    </GlassBox>
 </template>
diff --git a/resources/js/Pages/ReconcileFlight.vue b/resources/js/Pages/ReconcileFlight.vue
index 8749578..3346178 100644
--- a/resources/js/Pages/ReconcileFlight.vue
+++ b/resources/js/Pages/ReconcileFlight.vue
@@ -94,9 +94,10 @@ function submit() {
 
 <template>
     <Head title="Reconcile"></Head>
-    <GlassBox>
-        <h2>Reconcile {{flight.flight_number.length > 1 ? 'Flight ' + flight.flight_number: 'This Flight'}}</h2>
-        <p>Review and correct your imported flight details before they're saved.</p>
+    <GlassBox
+        :title="flight.flight_number.length > 1 ? 'Reconcile ' + flight.flight_number : 'Reconcile This Flight'"
+        blurb="Review and correct your imported flight details before they're saved."
+    >
 
         <v-form style="width: 100%">
             <v-container>
@@ -193,7 +194,7 @@ function submit() {
                 <!-- Submit -->
                 <v-row>
                     <v-col cols="12" class="d-flex justify-end">
-                        <v-btn  size="large" :loading="form.processing" :disabled="form.processing" @click="submit">
+                        <v-btn block size="large" :loading="form.processing" :disabled="form.processing" @click="submit">
                             Save Flight
                         </v-btn>
                     </v-col>