From 218a34c19e3d53c412eefb22ab4b84fe5eb44c1e Mon Sep 17 00:00:00 2001
From: Joe Tannenbaum <joe.tannenbaum@laravel.com>
Date: Thu, 18 Sep 2025 12:47:03 -0400
Subject: [PATCH] change print width from 150 to 80

---
 .prettierrc                                   |  13 +-
 resources/css/app.css                         |   9 +-
 resources/js/app.ts                           |   6 +-
 resources/js/components/AppContent.vue        |   6 +-
 resources/js/components/AppHeader.vue         | 149 ++++++++++++---
 resources/js/components/AppLogo.vue           |   8 +-
 resources/js/components/AppLogoIcon.vue       |   7 +-
 resources/js/components/AppSidebar.vue        |  10 +-
 resources/js/components/AppearanceTabs.vue    |   4 +-
 resources/js/components/Breadcrumbs.vue       |  13 +-
 resources/js/components/DeleteUser.vue        |  50 ++++-
 resources/js/components/Icon.vue              |   8 +-
 resources/js/components/NavFooter.vue         |  23 ++-
 resources/js/components/NavMain.vue           |  14 +-
 resources/js/components/NavUser.vue           |  26 ++-
 .../js/components/PlaceholderPattern.vue      |  25 ++-
 .../js/components/TwoFactorRecoveryCodes.vue  |  65 +++++--
 .../js/components/TwoFactorSetupModal.vue     | 175 ++++++++++++++----
 resources/js/components/UserInfo.vue          |   8 +-
 resources/js/components/UserMenuContent.vue   |  15 +-
 resources/js/composables/useAppearance.ts     |  13 +-
 resources/js/composables/useTwoFactorAuth.ts  |  16 +-
 resources/js/layouts/auth/AuthCardLayout.vue  |  21 ++-
 .../js/layouts/auth/AuthSimpleLayout.vue      |  21 ++-
 resources/js/layouts/auth/AuthSplitLayout.vue |  29 ++-
 resources/js/layouts/settings/Layout.vue      |  10 +-
 resources/js/lib/utils.ts                     |   5 +-
 resources/js/pages/Dashboard.vue              |  20 +-
 resources/js/pages/Welcome.vue                |  82 ++++++--
 resources/js/pages/auth/ConfirmPassword.vue   |  22 ++-
 resources/js/pages/auth/ForgotPassword.vue    |  35 +++-
 resources/js/pages/auth/Login.vue             |  32 +++-
 resources/js/pages/auth/Register.vue          |  56 +++++-
 resources/js/pages/auth/ResetPassword.vue     |  31 +++-
 .../js/pages/auth/TwoFactorChallenge.vue      |  68 +++++--
 resources/js/pages/auth/VerifyEmail.vue       |  27 ++-
 resources/js/pages/settings/Appearance.vue    |   5 +-
 resources/js/pages/settings/Password.vue      |  28 ++-
 resources/js/pages/settings/Profile.vue       |  32 +++-
 resources/js/pages/settings/TwoFactor.vue     |  51 +++--
 resources/js/ssr.ts                           |   9 +-
 resources/js/types/index.d.ts                 |   4 +-
 42 files changed, 1014 insertions(+), 237 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index e491919d..5b647f95 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,9 +3,16 @@
     "singleQuote": true,
     "singleAttributePerLine": false,
     "htmlWhitespaceSensitivity": "css",
-    "printWidth": 150,
-    "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"],
-    "tailwindFunctions": ["clsx", "cn", "cva"],
+    "printWidth": 80,
+    "plugins": [
+        "prettier-plugin-organize-imports",
+        "prettier-plugin-tailwindcss"
+    ],
+    "tailwindFunctions": [
+        "clsx",
+        "cn",
+        "cva"
+    ],
     "tailwindStylesheet": "resources/css/app.css",
     "tabWidth": 4,
     "overrides": [
diff --git a/resources/css/app.css b/resources/css/app.css
index 1a7ee31e..6f9d1f56 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -8,7 +8,10 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-    --font-sans: Instrument Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-sans:
+        Instrument Sans, ui-sans-serif, system-ui, sans-serif,
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+        'Noto Color Emoji';
 
     --radius-lg: var(--radius);
     --radius-md: calc(var(--radius) - 2px);
@@ -80,7 +83,9 @@
     body,
     html {
         --font-sans:
-            'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+            'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
+            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+            'Noto Color Emoji';
     }
 }
 
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 9f2f6d81..768a33fd 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -10,7 +10,11 @@ const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
 createInertiaApp({
     title: (title) => (title ? `${title} - ${appName}` : appName),
-    resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob<DefineComponent>('./pages/**/*.vue')),
+    resolve: (name) =>
+        resolvePageComponent(
+            `./pages/${name}.vue`,
+            import.meta.glob<DefineComponent>('./pages/**/*.vue'),
+        ),
     setup({ el, App, props, plugin }) {
         createApp({ render: () => h(App, props) })
             .use(plugin)
diff --git a/resources/js/components/AppContent.vue b/resources/js/components/AppContent.vue
index 96e3d2a9..9b6f13f7 100644
--- a/resources/js/components/AppContent.vue
+++ b/resources/js/components/AppContent.vue
@@ -15,7 +15,11 @@ const className = computed(() => props.class);
     <SidebarInset v-if="props.variant === 'sidebar'" :class="className">
         <slot />
     </SidebarInset>
-    <main v-else class="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-xl" :class="className">
+    <main
+        v-else
+        class="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-xl"
+        :class="className"
+    >
         <slot />
     </main>
 </template>
diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue
index aeab9501..40e454f8 100644
--- a/resources/js/components/AppHeader.vue
+++ b/resources/js/components/AppHeader.vue
@@ -4,10 +4,30 @@ import AppLogoIcon from '@/components/AppLogoIcon.vue';
 import Breadcrumbs from '@/components/Breadcrumbs.vue';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import { NavigationMenu, NavigationMenuItem, NavigationMenuList, navigationMenuTriggerStyle } from '@/components/ui/navigation-menu';
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+    NavigationMenu,
+    NavigationMenuItem,
+    NavigationMenuList,
+    navigationMenuTriggerStyle,
+} from '@/components/ui/navigation-menu';
+import {
+    Sheet,
+    SheetContent,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
+} from '@/components/ui/sheet';
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from '@/components/ui/tooltip';
 import UserMenuContent from '@/components/UserMenuContent.vue';
 import { getInitials } from '@/composables/useInitials';
 import { toUrl, urlIsActive } from '@/lib/utils';
@@ -28,11 +48,16 @@ const props = withDefaults(defineProps<Props>(), {
 const page = usePage();
 const auth = computed(() => page.props.auth);
 
-const isCurrentRoute = computed(() => (url: NonNullable<InertiaLinkProps['href']>) => urlIsActive(url, page.url));
+const isCurrentRoute = computed(
+    () => (url: NonNullable<InertiaLinkProps['href']>) =>
+        urlIsActive(url, page.url),
+);
 
 const activeItemStyles = computed(
     () => (url: NonNullable<InertiaLinkProps['href']>) =>
-        isCurrentRoute.value(toUrl(url)) ? 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100' : '',
+        isCurrentRoute.value(toUrl(url))
+            ? 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'
+            : '',
 );
 
 const mainNavItems: NavItem[] = [
@@ -65,16 +90,26 @@ const rightNavItems: NavItem[] = [
                 <div class="lg:hidden">
                     <Sheet>
                         <SheetTrigger :as-child="true">
-                            <Button variant="ghost" size="icon" class="mr-2 h-9 w-9">
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                class="mr-2 h-9 w-9"
+                            >
                                 <Menu class="h-5 w-5" />
                             </Button>
                         </SheetTrigger>
                         <SheetContent side="left" class="w-[300px] p-6">
-                            <SheetTitle class="sr-only">Navigation Menu</SheetTitle>
+                            <SheetTitle class="sr-only"
+                                >Navigation Menu</SheetTitle
+                            >
                             <SheetHeader class="flex justify-start text-left">
-                                <AppLogoIcon class="size-6 fill-current text-black dark:text-white" />
+                                <AppLogoIcon
+                                    class="size-6 fill-current text-black dark:text-white"
+                                />
                             </SheetHeader>
-                            <div class="flex h-full flex-1 flex-col justify-between space-y-4 py-6">
+                            <div
+                                class="flex h-full flex-1 flex-col justify-between space-y-4 py-6"
+                            >
                                 <nav class="-mx-3 space-y-1">
                                     <Link
                                         v-for="item in mainNavItems"
@@ -83,7 +118,11 @@ const rightNavItems: NavItem[] = [
                                         class="flex items-center gap-x-3 rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent"
                                         :class="activeItemStyles(item.href)"
                                     >
-                                        <component v-if="item.icon" :is="item.icon" class="h-5 w-5" />
+                                        <component
+                                            v-if="item.icon"
+                                            :is="item.icon"
+                                            class="h-5 w-5"
+                                        />
                                         {{ item.title }}
                                     </Link>
                                 </nav>
@@ -96,7 +135,11 @@ const rightNavItems: NavItem[] = [
                                         rel="noopener noreferrer"
                                         class="flex items-center space-x-2 text-sm font-medium"
                                     >
-                                        <component v-if="item.icon" :is="item.icon" class="h-5 w-5" />
+                                        <component
+                                            v-if="item.icon"
+                                            :is="item.icon"
+                                            class="h-5 w-5"
+                                        />
                                         <span>{{ item.title }}</span>
                                     </a>
                                 </div>
@@ -112,13 +155,27 @@ const rightNavItems: NavItem[] = [
                 <!-- Desktop Menu -->
                 <div class="hidden h-full lg:flex lg:flex-1">
                     <NavigationMenu class="ml-10 flex h-full items-stretch">
-                        <NavigationMenuList class="flex h-full items-stretch space-x-2">
-                            <NavigationMenuItem v-for="(item, index) in mainNavItems" :key="index" class="relative flex h-full items-center">
+                        <NavigationMenuList
+                            class="flex h-full items-stretch space-x-2"
+                        >
+                            <NavigationMenuItem
+                                v-for="(item, index) in mainNavItems"
+                                :key="index"
+                                class="relative flex h-full items-center"
+                            >
                                 <Link
-                                    :class="[navigationMenuTriggerStyle(), activeItemStyles(item.href), 'h-9 cursor-pointer px-3']"
+                                    :class="[
+                                        navigationMenuTriggerStyle(),
+                                        activeItemStyles(item.href),
+                                        'h-9 cursor-pointer px-3',
+                                    ]"
                                     :href="item.href"
                                 >
-                                    <component v-if="item.icon" :is="item.icon" class="mr-2 h-4 w-4" />
+                                    <component
+                                        v-if="item.icon"
+                                        :is="item.icon"
+                                        class="mr-2 h-4 w-4"
+                                    />
                                     {{ item.title }}
                                 </Link>
                                 <div
@@ -132,19 +189,42 @@ const rightNavItems: NavItem[] = [
 
                 <div class="ml-auto flex items-center space-x-2">
                     <div class="relative flex items-center space-x-1">
-                        <Button variant="ghost" size="icon" class="group h-9 w-9 cursor-pointer">
-                            <Search class="size-5 opacity-80 group-hover:opacity-100" />
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            class="group h-9 w-9 cursor-pointer"
+                        >
+                            <Search
+                                class="size-5 opacity-80 group-hover:opacity-100"
+                            />
                         </Button>
 
                         <div class="hidden space-x-1 lg:flex">
-                            <template v-for="item in rightNavItems" :key="item.title">
+                            <template
+                                v-for="item in rightNavItems"
+                                :key="item.title"
+                            >
                                 <TooltipProvider :delay-duration="0">
                                     <Tooltip>
                                         <TooltipTrigger>
-                                            <Button variant="ghost" size="icon" as-child class="group h-9 w-9 cursor-pointer">
-                                                <a :href="toUrl(item.href)" target="_blank" rel="noopener noreferrer">
-                                                    <span class="sr-only">{{ item.title }}</span>
-                                                    <component :is="item.icon" class="size-5 opacity-80 group-hover:opacity-100" />
+                                            <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                as-child
+                                                class="group h-9 w-9 cursor-pointer"
+                                            >
+                                                <a
+                                                    :href="toUrl(item.href)"
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                >
+                                                    <span class="sr-only">{{
+                                                        item.title
+                                                    }}</span>
+                                                    <component
+                                                        :is="item.icon"
+                                                        class="size-5 opacity-80 group-hover:opacity-100"
+                                                    />
                                                 </a>
                                             </Button>
                                         </TooltipTrigger>
@@ -164,9 +244,17 @@ const rightNavItems: NavItem[] = [
                                 size="icon"
                                 class="relative size-10 w-auto rounded-full p-1 focus-within:ring-2 focus-within:ring-primary"
                             >
-                                <Avatar class="size-8 overflow-hidden rounded-full">
-                                    <AvatarImage v-if="auth.user.avatar" :src="auth.user.avatar" :alt="auth.user.name" />
-                                    <AvatarFallback class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white">
+                                <Avatar
+                                    class="size-8 overflow-hidden rounded-full"
+                                >
+                                    <AvatarImage
+                                        v-if="auth.user.avatar"
+                                        :src="auth.user.avatar"
+                                        :alt="auth.user.name"
+                                    />
+                                    <AvatarFallback
+                                        class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white"
+                                    >
                                         {{ getInitials(auth.user?.name) }}
                                     </AvatarFallback>
                                 </Avatar>
@@ -180,8 +268,13 @@ const rightNavItems: NavItem[] = [
             </div>
         </div>
 
-        <div v-if="props.breadcrumbs.length > 1" class="flex w-full border-b border-sidebar-border/70">
-            <div class="mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl">
+        <div
+            v-if="props.breadcrumbs.length > 1"
+            class="flex w-full border-b border-sidebar-border/70"
+        >
+            <div
+                class="mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl"
+            >
                 <Breadcrumbs :breadcrumbs="breadcrumbs" />
             </div>
         </div>
diff --git a/resources/js/components/AppLogo.vue b/resources/js/components/AppLogo.vue
index 01723b42..bc795273 100644
--- a/resources/js/components/AppLogo.vue
+++ b/resources/js/components/AppLogo.vue
@@ -3,10 +3,14 @@ import AppLogoIcon from '@/components/AppLogoIcon.vue';
 </script>
 
 <template>
-    <div class="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+    <div
+        class="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground"
+    >
         <AppLogoIcon class="size-5 fill-current text-white dark:text-black" />
     </div>
     <div class="ml-1 grid flex-1 text-left text-sm">
-        <span class="mb-0.5 truncate leading-tight font-semibold">Laravel Starter Kit</span>
+        <span class="mb-0.5 truncate leading-tight font-semibold"
+            >Laravel Starter Kit</span
+        >
     </div>
 </template>
diff --git a/resources/js/components/AppLogoIcon.vue b/resources/js/components/AppLogoIcon.vue
index 6412a449..4300b81b 100644
--- a/resources/js/components/AppLogoIcon.vue
+++ b/resources/js/components/AppLogoIcon.vue
@@ -13,7 +13,12 @@ defineProps<Props>();
 </script>
 
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42" :class="className" v-bind="$attrs">
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 40 42"
+        :class="className"
+        v-bind="$attrs"
+    >
         <path
             fill="currentColor"
             fill-rule="evenodd"
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index db9e7597..2f616cda 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -2,7 +2,15 @@
 import NavFooter from '@/components/NavFooter.vue';
 import NavMain from '@/components/NavMain.vue';
 import NavUser from '@/components/NavUser.vue';
-import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarHeader,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from '@/components/ui/sidebar';
 import { dashboard } from '@/routes';
 import { type NavItem } from '@/types';
 import { Link } from '@inertiajs/vue3';
diff --git a/resources/js/components/AppearanceTabs.vue b/resources/js/components/AppearanceTabs.vue
index 43578fb1..5ac7f8c4 100644
--- a/resources/js/components/AppearanceTabs.vue
+++ b/resources/js/components/AppearanceTabs.vue
@@ -12,7 +12,9 @@ const tabs = [
 </script>
 
 <template>
-    <div class="inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800">
+    <div
+        class="inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800"
+    >
         <button
             v-for="{ value, Icon, label } in tabs"
             :key="value"
diff --git a/resources/js/components/Breadcrumbs.vue b/resources/js/components/Breadcrumbs.vue
index f6338d0a..879046f0 100644
--- a/resources/js/components/Breadcrumbs.vue
+++ b/resources/js/components/Breadcrumbs.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
 import { Link } from '@inertiajs/vue3';
 
 interface BreadcrumbItemType {
@@ -22,7 +29,9 @@ defineProps<{
                     </template>
                     <template v-else>
                         <BreadcrumbLink as-child>
-                            <Link :href="item.href ?? '#'">{{ item.title }}</Link>
+                            <Link :href="item.href ?? '#'">{{
+                                item.title
+                            }}</Link>
                         </BreadcrumbLink>
                     </template>
                 </BreadcrumbItem>
diff --git a/resources/js/components/DeleteUser.vue b/resources/js/components/DeleteUser.vue
index 6d2b13dc..43529324 100644
--- a/resources/js/components/DeleteUser.vue
+++ b/resources/js/components/DeleteUser.vue
@@ -25,15 +25,24 @@ const passwordInput = ref<InstanceType<typeof Input> | null>(null);
 
 <template>
     <div class="space-y-6">
-        <HeadingSmall title="Delete account" description="Delete your account and all of its resources" />
-        <div class="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
+        <HeadingSmall
+            title="Delete account"
+            description="Delete your account and all of its resources"
+        />
+        <div
+            class="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10"
+        >
             <div class="relative space-y-0.5 text-red-600 dark:text-red-100">
                 <p class="font-medium">Warning</p>
-                <p class="text-sm">Please proceed with caution, this cannot be undone.</p>
+                <p class="text-sm">
+                    Please proceed with caution, this cannot be undone.
+                </p>
             </div>
             <Dialog>
                 <DialogTrigger as-child>
-                    <Button variant="destructive" data-test="delete-user-button">Delete account</Button>
+                    <Button variant="destructive" data-test="delete-user-button"
+                        >Delete account</Button
+                    >
                 </DialogTrigger>
                 <DialogContent>
                     <Form
@@ -47,16 +56,30 @@ const passwordInput = ref<InstanceType<typeof Input> | null>(null);
                         v-slot="{ errors, processing, reset, clearErrors }"
                     >
                         <DialogHeader class="space-y-3">
-                            <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
+                            <DialogTitle
+                                >Are you sure you want to delete your
+                                account?</DialogTitle
+                            >
                             <DialogDescription>
-                                Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your
-                                password to confirm you would like to permanently delete your account.
+                                Once your account is deleted, all of its
+                                resources and data will also be permanently
+                                deleted. Please enter your password to confirm
+                                you would like to permanently delete your
+                                account.
                             </DialogDescription>
                         </DialogHeader>
 
                         <div class="grid gap-2">
-                            <Label for="password" class="sr-only">Password</Label>
-                            <Input id="password" type="password" name="password" ref="passwordInput" placeholder="Password" />
+                            <Label for="password" class="sr-only"
+                                >Password</Label
+                            >
+                            <Input
+                                id="password"
+                                type="password"
+                                name="password"
+                                ref="passwordInput"
+                                placeholder="Password"
+                            />
                             <InputError :message="errors.password" />
                         </div>
 
@@ -75,7 +98,14 @@ const passwordInput = ref<InstanceType<typeof Input> | null>(null);
                                 </Button>
                             </DialogClose>
 
-                            <Button type="submit" variant="destructive" :disabled="processing" data-test="confirm-delete-user-button"> Delete account </Button>
+                            <Button
+                                type="submit"
+                                variant="destructive"
+                                :disabled="processing"
+                                data-test="confirm-delete-user-button"
+                            >
+                                Delete account
+                            </Button>
                         </DialogFooter>
                     </Form>
                 </DialogContent>
diff --git a/resources/js/components/Icon.vue b/resources/js/components/Icon.vue
index c0b1b765..31047fd1 100644
--- a/resources/js/components/Icon.vue
+++ b/resources/js/components/Icon.vue
@@ -26,5 +26,11 @@ const icon = computed(() => {
 </script>
 
 <template>
-    <component :is="icon" :class="className" :size="size" :stroke-width="strokeWidth" :color="color" />
+    <component
+        :is="icon"
+        :class="className"
+        :size="size"
+        :stroke-width="strokeWidth"
+        :color="color"
+    />
 </template>
diff --git a/resources/js/components/NavFooter.vue b/resources/js/components/NavFooter.vue
index 3ccd296f..6ae1d5f2 100644
--- a/resources/js/components/NavFooter.vue
+++ b/resources/js/components/NavFooter.vue
@@ -1,5 +1,11 @@
 <script setup lang="ts">
-import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import {
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from '@/components/ui/sidebar';
 import { toUrl } from '@/lib/utils';
 import { type NavItem } from '@/types';
 
@@ -12,12 +18,21 @@ defineProps<Props>();
 </script>
 
 <template>
-    <SidebarGroup :class="`group-data-[collapsible=icon]:p-0 ${$props.class || ''}`">
+    <SidebarGroup
+        :class="`group-data-[collapsible=icon]:p-0 ${$props.class || ''}`"
+    >
         <SidebarGroupContent>
             <SidebarMenu>
                 <SidebarMenuItem v-for="item in items" :key="item.title">
-                    <SidebarMenuButton class="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100" as-child>
-                        <a :href="toUrl(item.href)" target="_blank" rel="noopener noreferrer">
+                    <SidebarMenuButton
+                        class="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
+                        as-child
+                    >
+                        <a
+                            :href="toUrl(item.href)"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
                             <component :is="item.icon" />
                             <span>{{ item.title }}</span>
                         </a>
diff --git a/resources/js/components/NavMain.vue b/resources/js/components/NavMain.vue
index f4781ead..ab7cab23 100644
--- a/resources/js/components/NavMain.vue
+++ b/resources/js/components/NavMain.vue
@@ -1,5 +1,11 @@
 <script setup lang="ts">
-import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import {
+    SidebarGroup,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from '@/components/ui/sidebar';
 import { urlIsActive } from '@/lib/utils';
 import { type NavItem } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
@@ -16,7 +22,11 @@ const page = usePage();
         <SidebarGroupLabel>Platform</SidebarGroupLabel>
         <SidebarMenu>
             <SidebarMenuItem v-for="item in items" :key="item.title">
-                <SidebarMenuButton as-child :is-active="urlIsActive(item.href, page.url)" :tooltip="item.title">
+                <SidebarMenuButton
+                    as-child
+                    :is-active="urlIsActive(item.href, page.url)"
+                    :tooltip="item.title"
+                >
                     <Link :href="item.href">
                         <component :is="item.icon" />
                         <span>{{ item.title }}</span>
diff --git a/resources/js/components/NavUser.vue b/resources/js/components/NavUser.vue
index fd9c8dc8..37c2f2b0 100644
--- a/resources/js/components/NavUser.vue
+++ b/resources/js/components/NavUser.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts">
 import UserInfo from '@/components/UserInfo.vue';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    useSidebar,
+} from '@/components/ui/sidebar';
 import { usePage } from '@inertiajs/vue3';
 import { ChevronsUpDown } from 'lucide-vue-next';
 import UserMenuContent from './UserMenuContent.vue';
@@ -16,14 +25,23 @@ const { isMobile, state } = useSidebar();
         <SidebarMenuItem>
             <DropdownMenu>
                 <DropdownMenuTrigger as-child>
-                    <SidebarMenuButton size="lg" class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                    <SidebarMenuButton
+                        size="lg"
+                        class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                    >
                         <UserInfo :user="user" />
                         <ChevronsUpDown class="ml-auto size-4" />
                     </SidebarMenuButton>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent
                     class="w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-                    :side="isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'"
+                    :side="
+                        isMobile
+                            ? 'bottom'
+                            : state === 'collapsed'
+                              ? 'left'
+                              : 'bottom'
+                    "
                     align="end"
                     :side-offset="4"
                 >
diff --git a/resources/js/components/PlaceholderPattern.vue b/resources/js/components/PlaceholderPattern.vue
index 88045f28..95556e3b 100644
--- a/resources/js/components/PlaceholderPattern.vue
+++ b/resources/js/components/PlaceholderPattern.vue
@@ -1,16 +1,33 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-const patternId = computed(() => `pattern-${Math.random().toString(36).substring(2, 9)}`);
+const patternId = computed(
+    () => `pattern-${Math.random().toString(36).substring(2, 9)}`,
+);
 </script>
 
 <template>
-    <svg class="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" fill="none">
+    <svg
+        class="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20"
+        fill="none"
+    >
         <defs>
-            <pattern :id="patternId" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
+            <pattern
+                :id="patternId"
+                x="0"
+                y="0"
+                width="8"
+                height="8"
+                patternUnits="userSpaceOnUse"
+            >
                 <path d="M-1 5L5 -1M3 9L8.5 3.5" stroke-width="0.5"></path>
             </pattern>
         </defs>
-        <rect stroke="none" :fill="`url(#${patternId})`" width="100%" height="100%"></rect>
+        <rect
+            stroke="none"
+            :fill="`url(#${patternId})`"
+            width="100%"
+            height="100%"
+        ></rect>
     </svg>
 </template>
diff --git a/resources/js/components/TwoFactorRecoveryCodes.vue b/resources/js/components/TwoFactorRecoveryCodes.vue
index aedb955c..972aabd2 100644
--- a/resources/js/components/TwoFactorRecoveryCodes.vue
+++ b/resources/js/components/TwoFactorRecoveryCodes.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import { regenerateRecoveryCodes } from '@/routes/two-factor';
 import { Form } from '@inertiajs/vue3';
@@ -34,16 +40,25 @@ onMounted(async () => {
 <template>
     <Card>
         <CardHeader>
-            <CardTitle class="flex gap-3"> <LockKeyhole class="size-4" />2FA Recovery Codes </CardTitle>
+            <CardTitle class="flex gap-3">
+                <LockKeyhole class="size-4" />2FA Recovery Codes
+            </CardTitle>
             <CardDescription>
-                Recovery codes let you regain access if you lose your 2FA device. Store them in a secure password manager.
+                Recovery codes let you regain access if you lose your 2FA
+                device. Store them in a secure password manager.
             </CardDescription>
         </CardHeader>
         <CardContent>
-            <div class="flex flex-col gap-3 select-none sm:flex-row sm:items-center sm:justify-between">
+            <div
+                class="flex flex-col gap-3 select-none sm:flex-row sm:items-center sm:justify-between"
+            >
                 <Button @click="toggleRecoveryCodesVisibility" class="w-fit">
-                    <component :is="isRecoveryCodesVisible ? EyeOff : Eye" class="size-4" />
-                    {{ isRecoveryCodesVisible ? 'Hide' : 'View' }} Recovery Codes
+                    <component
+                        :is="isRecoveryCodesVisible ? EyeOff : Eye"
+                        class="size-4"
+                    />
+                    {{ isRecoveryCodesVisible ? 'Hide' : 'View' }} Recovery
+                    Codes
                 </Button>
 
                 <Form
@@ -54,21 +69,47 @@ onMounted(async () => {
                     @success="fetchRecoveryCodes"
                     #default="{ processing }"
                 >
-                    <Button variant="secondary" type="submit" :disabled="processing"> <RefreshCw /> Regenerate Codes </Button>
+                    <Button
+                        variant="secondary"
+                        type="submit"
+                        :disabled="processing"
+                    >
+                        <RefreshCw /> Regenerate Codes
+                    </Button>
                 </Form>
             </div>
-            <div :class="['relative overflow-hidden transition-all duration-300', isRecoveryCodesVisible ? 'h-auto opacity-100' : 'h-0 opacity-0']">
+            <div
+                :class="[
+                    'relative overflow-hidden transition-all duration-300',
+                    isRecoveryCodesVisible
+                        ? 'h-auto opacity-100'
+                        : 'h-0 opacity-0',
+                ]"
+            >
                 <div class="mt-3 space-y-3">
-                    <div ref="recoveryCodeSectionRef" class="grid gap-1 rounded-lg bg-muted p-4 font-mono text-sm">
+                    <div
+                        ref="recoveryCodeSectionRef"
+                        class="grid gap-1 rounded-lg bg-muted p-4 font-mono text-sm"
+                    >
                         <div v-if="!recoveryCodesList.length" class="space-y-2">
-                            <div v-for="n in 8" :key="n" class="h-4 animate-pulse rounded bg-muted-foreground/20"></div>
+                            <div
+                                v-for="n in 8"
+                                :key="n"
+                                class="h-4 animate-pulse rounded bg-muted-foreground/20"
+                            ></div>
                         </div>
-                        <div v-else v-for="(code, index) in recoveryCodesList" :key="index">
+                        <div
+                            v-else
+                            v-for="(code, index) in recoveryCodesList"
+                            :key="index"
+                        >
                             {{ code }}
                         </div>
                     </div>
                     <p class="text-xs text-muted-foreground select-none">
-                        Each recovery code can be used once to access your account and will be removed after use. If you need more, click
+                        Each recovery code can be used once to access your
+                        account and will be removed after use. If you need more,
+                        click
                         <span class="font-bold">Regenerate Codes</span> above.
                     </p>
                 </div>
diff --git a/resources/js/components/TwoFactorSetupModal.vue b/resources/js/components/TwoFactorSetupModal.vue
index acbf9b5f..ce2fe4f3 100644
--- a/resources/js/components/TwoFactorSetupModal.vue
+++ b/resources/js/components/TwoFactorSetupModal.vue
@@ -1,8 +1,18 @@
 <script setup lang="ts">
 import InputError from '@/components/InputError.vue';
 import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { PinInput, PinInputGroup, PinInputSlot } from '@/components/ui/pin-input';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import {
+    PinInput,
+    PinInputGroup,
+    PinInputSlot,
+} from '@/components/ui/pin-input';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import { confirm } from '@/routes/two-factor';
 import { Form } from '@inertiajs/vue3';
@@ -19,7 +29,8 @@ const props = defineProps<Props>();
 const isOpen = defineModel<boolean>('isOpen');
 
 const { copy, copied } = useClipboard();
-const { qrCodeSvg, manualSetupKey, clearSetupData, fetchSetupData } = useTwoFactorAuth();
+const { qrCodeSvg, manualSetupKey, clearSetupData, fetchSetupData } =
+    useTwoFactorAuth();
 
 const showVerificationStep = ref(false);
 const code = ref<number[]>([]);
@@ -27,11 +38,16 @@ const codeValue = computed<string>(() => code.value.join(''));
 
 const pinInputContainerRef = ref<HTMLElement | null>(null);
 
-const modalConfig = computed<{ title: string; description: string; buttonText: string }>(() => {
+const modalConfig = computed<{
+    title: string;
+    description: string;
+    buttonText: string;
+}>(() => {
     if (props.twoFactorEnabled) {
         return {
             title: 'Two-Factor Authentication Enabled',
-            description: 'Two-factor authentication is now enabled. Scan the QR code or enter the setup key in your authenticator app.',
+            description:
+                'Two-factor authentication is now enabled. Scan the QR code or enter the setup key in your authenticator app.',
             buttonText: 'Close',
         };
     }
@@ -46,7 +62,8 @@ const modalConfig = computed<{ title: string; description: string; buttonText: s
 
     return {
         title: 'Enable Two-Factor Authentication',
-        description: 'To finish enabling two-factor authentication, scan the QR code or enter the setup key in your authenticator app',
+        description:
+            'To finish enabling two-factor authentication, scan the QR code or enter the setup key in your authenticator app',
         buttonText: 'Continue',
     };
 });
@@ -94,15 +111,33 @@ watch(
     <Dialog :open="isOpen" @update:open="isOpen = $event">
         <DialogContent class="sm:max-w-md">
             <DialogHeader class="flex items-center justify-center">
-                <div class="mb-3 w-auto rounded-full border border-border bg-card p-0.5 shadow-sm">
-                    <div class="relative overflow-hidden rounded-full border border-border bg-muted p-2.5">
-                        <div class="absolute inset-0 grid grid-cols-5 opacity-50">
-                            <div v-for="i in 5" :key="`col-${i}`" class="border-r border-border last:border-r-0" />
+                <div
+                    class="mb-3 w-auto rounded-full border border-border bg-card p-0.5 shadow-sm"
+                >
+                    <div
+                        class="relative overflow-hidden rounded-full border border-border bg-muted p-2.5"
+                    >
+                        <div
+                            class="absolute inset-0 grid grid-cols-5 opacity-50"
+                        >
+                            <div
+                                v-for="i in 5"
+                                :key="`col-${i}`"
+                                class="border-r border-border last:border-r-0"
+                            />
                         </div>
-                        <div class="absolute inset-0 grid grid-rows-5 opacity-50">
-                            <div v-for="i in 5" :key="`row-${i}`" class="border-b border-border last:border-b-0" />
+                        <div
+                            class="absolute inset-0 grid grid-rows-5 opacity-50"
+                        >
+                            <div
+                                v-for="i in 5"
+                                :key="`row-${i}`"
+                                class="border-b border-border last:border-b-0"
+                            />
                         </div>
-                        <ScanLine class="relative z-20 size-6 text-foreground" />
+                        <ScanLine
+                            class="relative z-20 size-6 text-foreground"
+                        />
                     </div>
                 </div>
                 <DialogTitle>{{ modalConfig.title }}</DialogTitle>
@@ -111,18 +146,30 @@ watch(
                 </DialogDescription>
             </DialogHeader>
 
-            <div class="relative flex w-auto flex-col items-center justify-center space-y-5">
+            <div
+                class="relative flex w-auto flex-col items-center justify-center space-y-5"
+            >
                 <template v-if="!showVerificationStep">
-                    <div class="relative mx-auto flex max-w-md items-center overflow-hidden">
-                        <div class="relative mx-auto aspect-square w-64 overflow-hidden rounded-lg border border-border">
+                    <div
+                        class="relative mx-auto flex max-w-md items-center overflow-hidden"
+                    >
+                        <div
+                            class="relative mx-auto aspect-square w-64 overflow-hidden rounded-lg border border-border"
+                        >
                             <div
                                 v-if="!qrCodeSvg"
                                 class="absolute inset-0 z-10 flex aspect-square h-auto w-full animate-pulse items-center justify-center bg-background"
                             >
                                 <Loader2 class="size-6 animate-spin" />
                             </div>
-                            <div v-else class="relative z-10 overflow-hidden border p-5">
-                                <div v-html="qrCodeSvg" class="flex aspect-square size-full items-center justify-center" />
+                            <div
+                                v-else
+                                class="relative z-10 overflow-hidden border p-5"
+                            >
+                                <div
+                                    v-html="qrCodeSvg"
+                                    class="flex aspect-square size-full items-center justify-center"
+                                />
                             </div>
                         </div>
                     </div>
@@ -133,20 +180,44 @@ watch(
                         </Button>
                     </div>
 
-                    <div class="relative flex w-full items-center justify-center">
-                        <div class="absolute inset-0 top-1/2 h-px w-full bg-border" />
-                        <span class="relative bg-card px-2 py-1">or, enter the code manually</span>
+                    <div
+                        class="relative flex w-full items-center justify-center"
+                    >
+                        <div
+                            class="absolute inset-0 top-1/2 h-px w-full bg-border"
+                        />
+                        <span class="relative bg-card px-2 py-1"
+                            >or, enter the code manually</span
+                        >
                     </div>
 
-                    <div class="flex w-full items-center justify-center space-x-2">
-                        <div class="flex w-full items-stretch overflow-hidden rounded-xl border border-border">
-                            <div v-if="!manualSetupKey" class="flex h-full w-full items-center justify-center bg-muted p-3">
+                    <div
+                        class="flex w-full items-center justify-center space-x-2"
+                    >
+                        <div
+                            class="flex w-full items-stretch overflow-hidden rounded-xl border border-border"
+                        >
+                            <div
+                                v-if="!manualSetupKey"
+                                class="flex h-full w-full items-center justify-center bg-muted p-3"
+                            >
                                 <Loader2 class="size-4 animate-spin" />
                             </div>
                             <template v-else>
-                                <input type="text" readonly :value="manualSetupKey" class="h-full w-full bg-background p-3 text-foreground" />
-                                <button @click="copy(manualSetupKey || '')" class="relative block h-auto border-l border-border px-3 hover:bg-muted">
-                                    <Check v-if="copied" class="w-4 text-green-500" />
+                                <input
+                                    type="text"
+                                    readonly
+                                    :value="manualSetupKey"
+                                    class="h-full w-full bg-background p-3 text-foreground"
+                                />
+                                <button
+                                    @click="copy(manualSetupKey || '')"
+                                    class="relative block h-auto border-l border-border px-3 hover:bg-muted"
+                                >
+                                    <Check
+                                        v-if="copied"
+                                        class="w-4 text-green-500"
+                                    />
                                     <Copy v-else class="w-4" />
                                 </button>
                             </template>
@@ -155,16 +226,44 @@ watch(
                 </template>
 
                 <template v-else>
-                    <Form v-bind="confirm.form()" reset-on-error @finish="code = []" @success="isOpen = false" v-slot="{ errors, processing }">
+                    <Form
+                        v-bind="confirm.form()"
+                        reset-on-error
+                        @finish="code = []"
+                        @success="isOpen = false"
+                        v-slot="{ errors, processing }"
+                    >
                         <input type="hidden" name="code" :value="codeValue" />
-                        <div ref="pinInputContainerRef" class="relative w-full space-y-3">
-                            <div class="flex w-full flex-col items-center justify-center space-y-3 py-2">
-                                <PinInput id="otp" placeholder="○" v-model="code" type="number" otp>
+                        <div
+                            ref="pinInputContainerRef"
+                            class="relative w-full space-y-3"
+                        >
+                            <div
+                                class="flex w-full flex-col items-center justify-center space-y-3 py-2"
+                            >
+                                <PinInput
+                                    id="otp"
+                                    placeholder="○"
+                                    v-model="code"
+                                    type="number"
+                                    otp
+                                >
                                     <PinInputGroup>
-                                        <PinInputSlot autofocus v-for="(id, index) in 6" :key="id" :index="index" :disabled="processing" />
+                                        <PinInputSlot
+                                            autofocus
+                                            v-for="(id, index) in 6"
+                                            :key="id"
+                                            :index="index"
+                                            :disabled="processing"
+                                        />
                                     </PinInputGroup>
                                 </PinInput>
-                                <InputError :message="errors?.confirmTwoFactorAuthentication?.code" />
+                                <InputError
+                                    :message="
+                                        errors?.confirmTwoFactorAuthentication
+                                            ?.code
+                                    "
+                                />
                             </div>
 
                             <div class="flex w-full items-center space-x-5">
@@ -177,7 +276,15 @@ watch(
                                 >
                                     Back
                                 </Button>
-                                <Button type="submit" class="w-auto flex-1" :disabled="processing || codeValue.length < 6"> Confirm </Button>
+                                <Button
+                                    type="submit"
+                                    class="w-auto flex-1"
+                                    :disabled="
+                                        processing || codeValue.length < 6
+                                    "
+                                >
+                                    Confirm
+                                </Button>
                             </div>
                         </div>
                     </Form>
diff --git a/resources/js/components/UserInfo.vue b/resources/js/components/UserInfo.vue
index 15ebf0e1..ab562749 100644
--- a/resources/js/components/UserInfo.vue
+++ b/resources/js/components/UserInfo.vue
@@ -16,7 +16,9 @@ const props = withDefaults(defineProps<Props>(), {
 const { getInitials } = useInitials();
 
 // Compute whether we should show the avatar image
-const showAvatar = computed(() => props.user.avatar && props.user.avatar !== '');
+const showAvatar = computed(
+    () => props.user.avatar && props.user.avatar !== '',
+);
 </script>
 
 <template>
@@ -29,6 +31,8 @@ const showAvatar = computed(() => props.user.avatar && props.user.avatar !== '')
 
     <div class="grid flex-1 text-left text-sm leading-tight">
         <span class="truncate font-medium">{{ user.name }}</span>
-        <span v-if="showEmail" class="truncate text-xs text-muted-foreground">{{ user.email }}</span>
+        <span v-if="showEmail" class="truncate text-xs text-muted-foreground">{{
+            user.email
+        }}</span>
     </div>
 </template>
diff --git a/resources/js/components/UserMenuContent.vue b/resources/js/components/UserMenuContent.vue
index dd565acd..b0c15d04 100644
--- a/resources/js/components/UserMenuContent.vue
+++ b/resources/js/components/UserMenuContent.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import UserInfo from '@/components/UserInfo.vue';
-import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@/components/ui/dropdown-menu';
+import {
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
 import { logout } from '@/routes';
 import { edit } from '@/routes/profile';
 import type { User } from '@/types';
@@ -35,7 +40,13 @@ defineProps<Props>();
     </DropdownMenuGroup>
     <DropdownMenuSeparator />
     <DropdownMenuItem :as-child="true">
-        <Link class="block w-full" :href="logout()" @click="handleLogout" as="button" data-test="logout-button">
+        <Link
+            class="block w-full"
+            :href="logout()"
+            @click="handleLogout"
+            as="button"
+            data-test="logout-button"
+        >
             <LogOut class="mr-2 h-4 w-4" />
             Log out
         </Link>
diff --git a/resources/js/composables/useAppearance.ts b/resources/js/composables/useAppearance.ts
index 19a56592..22bd855b 100644
--- a/resources/js/composables/useAppearance.ts
+++ b/resources/js/composables/useAppearance.ts
@@ -8,10 +8,15 @@ export function updateTheme(value: Appearance) {
     }
 
     if (value === 'system') {
-        const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+        const mediaQueryList = window.matchMedia(
+            '(prefers-color-scheme: dark)',
+        );
         const systemTheme = mediaQueryList.matches ? 'dark' : 'light';
 
-        document.documentElement.classList.toggle('dark', systemTheme === 'dark');
+        document.documentElement.classList.toggle(
+            'dark',
+            systemTheme === 'dark',
+        );
     } else {
         document.documentElement.classList.toggle('dark', value === 'dark');
     }
@@ -66,7 +71,9 @@ const appearance = ref<Appearance>('system');
 
 export function useAppearance() {
     onMounted(() => {
-        const savedAppearance = localStorage.getItem('appearance') as Appearance | null;
+        const savedAppearance = localStorage.getItem(
+            'appearance',
+        ) as Appearance | null;
 
         if (savedAppearance) {
             appearance.value = savedAppearance;
diff --git a/resources/js/composables/useTwoFactorAuth.ts b/resources/js/composables/useTwoFactorAuth.ts
index 70db708c..61575bef 100644
--- a/resources/js/composables/useTwoFactorAuth.ts
+++ b/resources/js/composables/useTwoFactorAuth.ts
@@ -17,17 +17,23 @@ const qrCodeSvg = ref<string | null>(null);
 const manualSetupKey = ref<string | null>(null);
 const recoveryCodesList = ref<string[]>([]);
 
-const hasSetupData = computed<boolean>(() => qrCodeSvg.value !== null && manualSetupKey.value !== null);
+const hasSetupData = computed<boolean>(
+    () => qrCodeSvg.value !== null && manualSetupKey.value !== null,
+);
 
 export const useTwoFactorAuth = () => {
     const fetchQrCode = async (): Promise<void> => {
-        const { svg } = await fetchJson<{ svg: string; url: string }>(qrCode.url());
+        const { svg } = await fetchJson<{ svg: string; url: string }>(
+            qrCode.url(),
+        );
 
         qrCodeSvg.value = svg;
     };
 
     const fetchSetupKey = async (): Promise<void> => {
-        const { secretKey: key } = await fetchJson<{ secretKey: string }>(secretKey.url());
+        const { secretKey: key } = await fetchJson<{ secretKey: string }>(
+            secretKey.url(),
+        );
 
         manualSetupKey.value = key;
     };
@@ -45,7 +51,9 @@ export const useTwoFactorAuth = () => {
 
     const fetchRecoveryCodes = async (): Promise<void> => {
         try {
-            recoveryCodesList.value = await fetchJson<string[]>(recoveryCodes.url());
+            recoveryCodesList.value = await fetchJson<string[]>(
+                recoveryCodes.url(),
+            );
         } catch (error) {
             console.error('Failed to fetch recovery codes:', error);
 
diff --git a/resources/js/layouts/auth/AuthCardLayout.vue b/resources/js/layouts/auth/AuthCardLayout.vue
index c8d085c8..af3ef008 100644
--- a/resources/js/layouts/auth/AuthCardLayout.vue
+++ b/resources/js/layouts/auth/AuthCardLayout.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import AppLogoIcon from '@/components/AppLogoIcon.vue';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
 import { home } from '@/routes';
 import { Link } from '@inertiajs/vue3';
 
@@ -11,11 +17,18 @@ defineProps<{
 </script>
 
 <template>
-    <div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+    <div
+        class="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10"
+    >
         <div class="flex w-full max-w-md flex-col gap-6">
-            <Link :href="home()" class="flex items-center gap-2 self-center font-medium">
+            <Link
+                :href="home()"
+                class="flex items-center gap-2 self-center font-medium"
+            >
                 <div class="flex h-9 w-9 items-center justify-center">
-                    <AppLogoIcon class="size-9 fill-current text-black dark:text-white" />
+                    <AppLogoIcon
+                        class="size-9 fill-current text-black dark:text-white"
+                    />
                 </div>
             </Link>
 
diff --git a/resources/js/layouts/auth/AuthSimpleLayout.vue b/resources/js/layouts/auth/AuthSimpleLayout.vue
index 57c70d8b..c9384201 100644
--- a/resources/js/layouts/auth/AuthSimpleLayout.vue
+++ b/resources/js/layouts/auth/AuthSimpleLayout.vue
@@ -10,19 +10,30 @@ defineProps<{
 </script>
 
 <template>
-    <div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+    <div
+        class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10"
+    >
         <div class="w-full max-w-sm">
             <div class="flex flex-col gap-8">
                 <div class="flex flex-col items-center gap-4">
-                    <Link :href="home()" class="flex flex-col items-center gap-2 font-medium">
-                        <div class="mb-1 flex h-9 w-9 items-center justify-center rounded-md">
-                            <AppLogoIcon class="size-9 fill-current text-[var(--foreground)] dark:text-white" />
+                    <Link
+                        :href="home()"
+                        class="flex flex-col items-center gap-2 font-medium"
+                    >
+                        <div
+                            class="mb-1 flex h-9 w-9 items-center justify-center rounded-md"
+                        >
+                            <AppLogoIcon
+                                class="size-9 fill-current text-[var(--foreground)] dark:text-white"
+                            />
                         </div>
                         <span class="sr-only">{{ title }}</span>
                     </Link>
                     <div class="space-y-2 text-center">
                         <h1 class="text-xl font-medium">{{ title }}</h1>
-                        <p class="text-center text-sm text-muted-foreground">{{ description }}</p>
+                        <p class="text-center text-sm text-muted-foreground">
+                            {{ description }}
+                        </p>
                     </div>
                 </div>
                 <slot />
diff --git a/resources/js/layouts/auth/AuthSplitLayout.vue b/resources/js/layouts/auth/AuthSplitLayout.vue
index e243d135..3da79a45 100644
--- a/resources/js/layouts/auth/AuthSplitLayout.vue
+++ b/resources/js/layouts/auth/AuthSplitLayout.vue
@@ -14,25 +14,40 @@ defineProps<{
 </script>
 
 <template>
-    <div class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
-        <div class="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-r">
+    <div
+        class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0"
+    >
+        <div
+            class="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-r"
+        >
             <div class="absolute inset-0 bg-zinc-900" />
-            <Link :href="home()" class="relative z-20 flex items-center text-lg font-medium">
+            <Link
+                :href="home()"
+                class="relative z-20 flex items-center text-lg font-medium"
+            >
                 <AppLogoIcon class="mr-2 size-8 fill-current text-white" />
                 {{ name }}
             </Link>
             <div v-if="quote" class="relative z-20 mt-auto">
                 <blockquote class="space-y-2">
                     <p class="text-lg">&ldquo;{{ quote.message }}&rdquo;</p>
-                    <footer class="text-sm text-neutral-300">{{ quote.author }}</footer>
+                    <footer class="text-sm text-neutral-300">
+                        {{ quote.author }}
+                    </footer>
                 </blockquote>
             </div>
         </div>
         <div class="lg:p-8">
-            <div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+            <div
+                class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]"
+            >
                 <div class="flex flex-col space-y-2 text-center">
-                    <h1 class="text-xl font-medium tracking-tight" v-if="title">{{ title }}</h1>
-                    <p class="text-sm text-muted-foreground" v-if="description">{{ description }}</p>
+                    <h1 class="text-xl font-medium tracking-tight" v-if="title">
+                        {{ title }}
+                    </h1>
+                    <p class="text-sm text-muted-foreground" v-if="description">
+                        {{ description }}
+                    </p>
                 </div>
                 <slot />
             </div>
diff --git a/resources/js/layouts/settings/Layout.vue b/resources/js/layouts/settings/Layout.vue
index 51dbf75b..da3c3dee 100644
--- a/resources/js/layouts/settings/Layout.vue
+++ b/resources/js/layouts/settings/Layout.vue
@@ -34,7 +34,10 @@ const currentPath = typeof window !== undefined ? window.location.pathname : '';
 
 <template>
     <div class="px-4 py-6">
-        <Heading title="Settings" description="Manage your profile and account settings" />
+        <Heading
+            title="Settings"
+            description="Manage your profile and account settings"
+        />
 
         <div class="flex flex-col lg:flex-row lg:space-x-12">
             <aside class="w-full max-w-xl lg:w-48">
@@ -43,7 +46,10 @@ const currentPath = typeof window !== undefined ? window.location.pathname : '';
                         v-for="item in sidebarNavItems"
                         :key="toUrl(item.href)"
                         variant="ghost"
-                        :class="['w-full justify-start', { 'bg-muted': urlIsActive(item.href, currentPath) }]"
+                        :class="[
+                            'w-full justify-start',
+                            { 'bg-muted': urlIsActive(item.href, currentPath) },
+                        ]"
                         as-child
                     >
                         <Link :href="item.href">
diff --git a/resources/js/lib/utils.ts b/resources/js/lib/utils.ts
index d40abd11..fdee36a6 100644
--- a/resources/js/lib/utils.ts
+++ b/resources/js/lib/utils.ts
@@ -6,7 +6,10 @@ export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
 }
 
-export function urlIsActive(urlToCheck: NonNullable<InertiaLinkProps['href']>, currentUrl: string) {
+export function urlIsActive(
+    urlToCheck: NonNullable<InertiaLinkProps['href']>,
+    currentUrl: string,
+) {
     return toUrl(urlToCheck) === currentUrl;
 }
 
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index 46e7af08..58807847 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -17,19 +17,29 @@ const breadcrumbs: BreadcrumbItem[] = [
     <Head title="Dashboard" />
 
     <AppLayout :breadcrumbs="breadcrumbs">
-        <div class="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4">
+        <div
+            class="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4"
+        >
             <div class="grid auto-rows-min gap-4 md:grid-cols-3">
-                <div class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
+                <div
+                    class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border"
+                >
                     <PlaceholderPattern />
                 </div>
-                <div class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
+                <div
+                    class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border"
+                >
                     <PlaceholderPattern />
                 </div>
-                <div class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
+                <div
+                    class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border"
+                >
                     <PlaceholderPattern />
                 </div>
             </div>
-            <div class="relative min-h-[100vh] flex-1 rounded-xl border border-sidebar-border/70 md:min-h-min dark:border-sidebar-border">
+            <div
+                class="relative min-h-[100vh] flex-1 rounded-xl border border-sidebar-border/70 md:min-h-min dark:border-sidebar-border"
+            >
                 <PlaceholderPattern />
             </div>
         </div>
diff --git a/resources/js/pages/Welcome.vue b/resources/js/pages/Welcome.vue
index e3f43416..1024304b 100644
--- a/resources/js/pages/Welcome.vue
+++ b/resources/js/pages/Welcome.vue
@@ -8,8 +8,12 @@ import { Head, Link } from '@inertiajs/vue3';
         <link rel="preconnect" href="https://rsms.me/" />
         <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
     </Head>
-    <div class="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] lg:justify-center lg:p-8 dark:bg-[#0a0a0a]">
-        <header class="mb-6 w-full max-w-[335px] text-sm not-has-[nav]:hidden lg:max-w-4xl">
+    <div
+        class="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] lg:justify-center lg:p-8 dark:bg-[#0a0a0a]"
+    >
+        <header
+            class="mb-6 w-full max-w-[335px] text-sm not-has-[nav]:hidden lg:max-w-4xl"
+        >
             <nav class="flex items-center justify-end gap-4">
                 <Link
                     v-if="$page.props.auth.user"
@@ -34,24 +38,33 @@ import { Head, Link } from '@inertiajs/vue3';
                 </template>
             </nav>
         </header>
-        <div class="flex w-full items-center justify-center opacity-100 transition-opacity duration-750 lg:grow starting:opacity-0">
-            <main class="flex w-full max-w-[335px] flex-col-reverse overflow-hidden rounded-lg lg:max-w-4xl lg:flex-row">
+        <div
+            class="flex w-full items-center justify-center opacity-100 transition-opacity duration-750 lg:grow starting:opacity-0"
+        >
+            <main
+                class="flex w-full max-w-[335px] flex-col-reverse overflow-hidden rounded-lg lg:max-w-4xl lg:flex-row"
+            >
                 <div
                     class="flex-1 rounded-br-lg rounded-bl-lg bg-white p-6 pb-12 text-[13px] leading-[20px] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:rounded-tl-lg lg:rounded-br-none lg:p-20 dark:bg-[#161615] dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"
                 >
                     <h1 class="mb-1 font-medium">Let's get started</h1>
                     <p class="mb-2 text-[#706f6c] dark:text-[#A1A09A]">
-                        Laravel has an incredibly rich ecosystem. <br />We suggest starting with the following.
+                        Laravel has an incredibly rich ecosystem. <br />We
+                        suggest starting with the following.
                     </p>
                     <ul class="mb-4 flex flex-col lg:mb-6">
                         <li
                             class="relative flex items-center gap-4 py-2 before:absolute before:top-1/2 before:bottom-0 before:left-[0.4rem] before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
                         >
-                            <span class="relative bg-white py-1 dark:bg-[#161615]">
+                            <span
+                                class="relative bg-white py-1 dark:bg-[#161615]"
+                            >
                                 <span
                                     class="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[#e3e3e0] bg-[#FDFDFC] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] dark:border-[#3E3E3A] dark:bg-[#161615]"
                                 >
-                                    <span class="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]" />
+                                    <span
+                                        class="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]"
+                                    />
                                 </span>
                             </span>
                             <span>
@@ -70,7 +83,11 @@ import { Head, Link } from '@inertiajs/vue3';
                                         xmlns="http://www.w3.org/2000/svg"
                                         class="h-2.5 w-2.5"
                                     >
-                                        <path d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001" stroke="currentColor" stroke-linecap="square" />
+                                        <path
+                                            d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001"
+                                            stroke="currentColor"
+                                            stroke-linecap="square"
+                                        />
                                     </svg>
                                 </a>
                             </span>
@@ -78,11 +95,15 @@ import { Head, Link } from '@inertiajs/vue3';
                         <li
                             class="relative flex items-center gap-4 py-2 before:absolute before:top-0 before:bottom-1/2 before:left-[0.4rem] before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
                         >
-                            <span class="relative bg-white py-1 dark:bg-[#161615]">
+                            <span
+                                class="relative bg-white py-1 dark:bg-[#161615]"
+                            >
                                 <span
                                     class="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[#e3e3e0] bg-[#FDFDFC] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] dark:border-[#3E3E3A] dark:bg-[#161615]"
                                 >
-                                    <span class="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]" />
+                                    <span
+                                        class="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]"
+                                    />
                                 </span>
                             </span>
                             <span>
@@ -101,7 +122,11 @@ import { Head, Link } from '@inertiajs/vue3';
                                         xmlns="http://www.w3.org/2000/svg"
                                         class="h-2.5 w-2.5"
                                     >
-                                        <path d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001" stroke="currentColor" stroke-linecap="square" />
+                                        <path
+                                            d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001"
+                                            stroke="currentColor"
+                                            stroke-linecap="square"
+                                        />
                                     </svg>
                                 </a>
                             </span>
@@ -128,7 +153,10 @@ import { Head, Link } from '@inertiajs/vue3';
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
                     >
-                        <path d="M17.2036 -3H0V102.197H49.5189V86.7187H17.2036V-3Z" fill="currentColor" />
+                        <path
+                            d="M17.2036 -3H0V102.197H49.5189V86.7187H17.2036V-3Z"
+                            fill="currentColor"
+                        />
                         <path
                             d="M110.256 41.6337C108.061 38.1275 104.945 35.3731 100.905 33.3681C96.8667 31.3647 92.8016 30.3618 88.7131 30.3618C83.4247 30.3618 78.5885 31.3389 74.201 33.2923C69.8111 35.2456 66.0474 37.928 62.9059 41.3333C59.7643 44.7401 57.3198 48.6726 55.5754 53.1293C53.8287 57.589 52.9572 62.274 52.9572 67.1813C52.9572 72.1925 53.8287 76.8995 55.5754 81.3069C57.3191 85.7173 59.7636 89.6241 62.9059 93.0293C66.0474 96.4361 69.8119 99.1155 74.201 101.069C78.5885 103.022 83.4247 103.999 88.7131 103.999C92.8016 103.999 96.8667 102.997 100.905 100.994C104.945 98.9911 108.061 96.2359 110.256 92.7282V102.195H126.563V32.1642H110.256V41.6337ZM108.76 75.7472C107.762 78.4531 106.366 80.8078 104.572 82.8112C102.776 84.8161 100.606 86.4183 98.0637 87.6206C95.5202 88.823 92.7004 89.4238 89.6103 89.4238C86.5178 89.4238 83.7252 88.823 81.2324 87.6206C78.7388 86.4183 76.5949 84.8161 74.7998 82.8112C73.004 80.8078 71.6319 78.4531 70.6856 75.7472C69.7356 73.0421 69.2644 70.1868 69.2644 67.1821C69.2644 64.1758 69.7356 61.3205 70.6856 58.6154C71.6319 55.9102 73.004 53.5571 74.7998 51.5522C76.5949 49.5495 78.738 47.9451 81.2324 46.7427C83.7252 45.5404 86.5178 44.9396 89.6103 44.9396C92.7012 44.9396 95.5202 45.5404 98.0637 46.7427C100.606 47.9451 102.776 49.5487 104.572 51.5522C106.367 53.5571 107.762 55.9102 108.76 58.6154C109.756 61.3205 110.256 64.1758 110.256 67.1821C110.256 70.1868 109.756 73.0421 108.76 75.7472Z"
                             fill="currentColor"
@@ -137,8 +165,14 @@ import { Head, Link } from '@inertiajs/vue3';
                             d="M242.805 41.6337C240.611 38.1275 237.494 35.3731 233.455 33.3681C229.416 31.3647 225.351 30.3618 221.262 30.3618C215.974 30.3618 211.138 31.3389 206.75 33.2923C202.36 35.2456 198.597 37.928 195.455 41.3333C192.314 44.7401 189.869 48.6726 188.125 53.1293C186.378 57.589 185.507 62.274 185.507 67.1813C185.507 72.1925 186.378 76.8995 188.125 81.3069C189.868 85.7173 192.313 89.6241 195.455 93.0293C198.597 96.4361 202.361 99.1155 206.75 101.069C211.138 103.022 215.974 103.999 221.262 103.999C225.351 103.999 229.416 102.997 233.455 100.994C237.494 98.9911 240.611 96.2359 242.805 92.7282V102.195H259.112V32.1642H242.805V41.6337ZM241.31 75.7472C240.312 78.4531 238.916 80.8078 237.122 82.8112C235.326 84.8161 233.156 86.4183 230.614 87.6206C228.07 88.823 225.251 89.4238 222.16 89.4238C219.068 89.4238 216.275 88.823 213.782 87.6206C211.289 86.4183 209.145 84.8161 207.35 82.8112C205.554 80.8078 204.182 78.4531 203.236 75.7472C202.286 73.0421 201.814 70.1868 201.814 67.1821C201.814 64.1758 202.286 61.3205 203.236 58.6154C204.182 55.9102 205.554 53.5571 207.35 51.5522C209.145 49.5495 211.288 47.9451 213.782 46.7427C216.275 45.5404 219.068 44.9396 222.16 44.9396C225.251 44.9396 228.07 45.5404 230.614 46.7427C233.156 47.9451 235.326 49.5487 237.122 51.5522C238.917 53.5571 240.312 55.9102 241.31 58.6154C242.306 61.3205 242.806 64.1758 242.806 67.1821C242.805 70.1868 242.305 73.0421 241.31 75.7472Z"
                             fill="currentColor"
                         />
-                        <path d="M438 -3H421.694V102.197H438V-3Z" fill="currentColor" />
-                        <path d="M139.43 102.197H155.735V48.2834H183.712V32.1665H139.43V102.197Z" fill="currentColor" />
+                        <path
+                            d="M438 -3H421.694V102.197H438V-3Z"
+                            fill="currentColor"
+                        />
+                        <path
+                            d="M139.43 102.197H155.735V48.2834H183.712V32.1665H139.43V102.197Z"
+                            fill="currentColor"
+                        />
                         <path
                             d="M324.49 32.1665L303.995 85.794L283.498 32.1665H266.983L293.748 102.197H314.242L341.006 32.1665H324.49Z"
                             fill="currentColor"
@@ -154,7 +188,9 @@ import { Head, Link } from '@inertiajs/vue3';
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
                     >
-                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
+                        <g
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
+                        >
                             <path
                                 d="M188.263 355.73L188.595 355.73C195.441 348.845 205.766 339.761 219.569 328.477C232.93 317.193 242.978 308.205 249.714 301.511C256.34 294.626 260.867 287.358 263.296 279.708C265.725 272.058 264.565 264.121 259.816 255.896C254.516 246.716 247.062 239.352 237.454 233.805C227.957 228.067 217.908 225.198 207.307 225.198C196.927 225.197 190.136 227.97 186.934 233.516C183.621 238.872 184.726 246.331 190.247 255.894L125.647 255.891C116.371 239.825 112.395 225.481 113.72 212.858C115.265 200.235 121.559 190.481 132.602 183.596C143.754 176.52 158.607 172.982 177.159 172.983C196.594 172.984 215.863 176.523 234.968 183.6C253.961 190.486 271.299 200.241 286.98 212.864C302.661 225.488 315.14 239.833 324.416 255.899C333.03 270.817 336.841 283.918 335.847 295.203C335.075 306.487 331.376 316.336 324.75 324.751C318.346 333.167 308.408 343.494 294.936 355.734L377.094 355.737L405.917 405.656L217.087 405.649L188.263 355.73Z"
                                 fill="black"
@@ -238,7 +274,9 @@ import { Head, Link } from '@inertiajs/vue3';
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
+                        <g
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
+                        >
                             <path
                                 d="M188.467 355.363L188.798 355.363C195.644 348.478 205.969 339.393 219.772 328.11C233.133 316.826 243.181 307.837 249.917 301.144C253.696 297.217 256.792 293.166 259.205 288.991C261.024 285.845 262.455 282.628 263.499 279.341C265.928 271.691 264.768 263.753 260.02 255.529C254.719 246.349 247.265 238.985 237.657 233.438C228.16 227.7 218.111 224.831 207.51 224.83C197.13 224.83 190.339 227.603 187.137 233.149C183.824 238.504 184.929 245.963 190.45 255.527L125.851 255.524C116.574 239.458 112.598 225.114 113.923 212.491C114.615 206.836 116.261 201.756 118.859 197.253C122.061 191.704 126.709 187.03 132.805 183.229C143.958 176.153 158.81 172.615 177.362 172.616C196.797 172.617 216.067 176.156 235.171 183.233C254.164 190.119 271.502 199.874 287.183 212.497C302.864 225.121 315.343 239.466 324.62 255.532C333.233 270.45 337.044 283.551 336.05 294.835C335.46 303.459 333.16 311.245 329.151 318.194C327.915 320.337 326.515 322.4 324.953 324.384C318.549 332.799 308.611 343.127 295.139 355.367L377.297 355.37L406.121 405.289L217.29 405.282L188.467 355.363Z"
                                 stroke="#1B1B18"
@@ -474,7 +512,9 @@ import { Head, Link } from '@inertiajs/vue3';
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
                     >
-                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
+                        <g
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
+                        >
                             <path
                                 d="M188.263 355.73L188.595 355.73C195.441 348.845 205.766 339.761 219.569 328.477C232.93 317.193 242.978 308.205 249.714 301.511C256.34 294.626 260.867 287.358 263.296 279.708C265.725 272.058 264.565 264.121 259.816 255.896C254.516 246.716 247.062 239.352 237.454 233.805C227.957 228.067 217.908 225.198 207.307 225.198C196.927 225.197 190.136 227.97 186.934 233.516C183.621 238.872 184.726 246.331 190.247 255.894L125.647 255.891C116.371 239.825 112.395 225.481 113.72 212.858C115.265 200.235 121.559 190.481 132.602 183.596C143.754 176.52 158.607 172.982 177.159 172.983C196.594 172.984 215.863 176.523 234.968 183.6C253.961 190.486 271.299 200.241 286.98 212.864C302.661 225.488 315.14 239.833 324.416 255.899C333.03 270.817 336.841 283.918 335.847 295.203C335.075 306.487 331.376 316.336 324.75 324.751C318.346 333.167 308.408 343.494 294.936 355.734L377.094 355.737L405.917 405.656L217.087 405.649L188.263 355.73Z"
                                 fill="black"
@@ -535,7 +575,9 @@ import { Head, Link } from '@inertiajs/vue3';
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
+                        <g
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
+                        >
                             <path
                                 d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.726 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z"
                                 stroke="#FF750F"
@@ -547,7 +589,9 @@ import { Head, Link } from '@inertiajs/vue3';
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
+                        <g
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
+                        >
                             <path
                                 d="M188.467 355.363L188.798 355.363C195.644 348.478 205.969 339.393 219.772 328.11C233.133 316.826 243.181 307.837 249.917 301.144C253.696 297.217 256.792 293.166 259.205 288.991C261.024 285.845 262.455 282.628 263.499 279.341C265.928 271.691 264.768 263.753 260.02 255.529C254.719 246.349 247.265 238.985 237.657 233.438C228.16 227.7 218.111 224.831 207.51 224.83C197.13 224.83 190.339 227.603 187.137 233.149C183.824 238.504 184.929 245.963 190.45 255.527L125.851 255.524C116.574 239.458 112.598 225.114 113.923 212.491C114.615 206.836 116.261 201.756 118.859 197.253C122.061 191.704 126.709 187.03 132.805 183.229C143.958 176.153 158.81 172.615 177.362 172.616C196.797 172.617 216.067 176.156 235.171 183.233C254.164 190.119 271.502 199.874 287.183 212.497C302.864 225.121 315.343 239.466 324.62 255.532C333.233 270.45 337.044 283.551 336.05 294.835C335.46 303.459 333.16 311.245 329.151 318.194C327.915 320.337 326.515 322.4 324.953 324.384C318.549 332.799 308.611 343.127 295.139 355.367L377.297 355.37L406.121 405.289L217.29 405.282L188.467 355.363Z"
                                 stroke="#FF750F"
diff --git a/resources/js/pages/auth/ConfirmPassword.vue b/resources/js/pages/auth/ConfirmPassword.vue
index 92a777af..77c59044 100644
--- a/resources/js/pages/auth/ConfirmPassword.vue
+++ b/resources/js/pages/auth/ConfirmPassword.vue
@@ -10,10 +10,17 @@ import { LoaderCircle } from 'lucide-vue-next';
 </script>
 
 <template>
-    <AuthLayout title="Confirm your password" description="This is a secure area of the application. Please confirm your password before continuing.">
+    <AuthLayout
+        title="Confirm your password"
+        description="This is a secure area of the application. Please confirm your password before continuing."
+    >
         <Head title="Confirm password" />
 
-        <Form v-bind="store.form()" reset-on-success v-slot="{ errors, processing }">
+        <Form
+            v-bind="store.form()"
+            reset-on-success
+            v-slot="{ errors, processing }"
+        >
             <div class="space-y-6">
                 <div class="grid gap-2">
                     <Label htmlFor="password">Password</Label>
@@ -31,8 +38,15 @@ import { LoaderCircle } from 'lucide-vue-next';
                 </div>
 
                 <div class="flex items-center">
-                    <Button class="w-full" :disabled="processing" data-test="confirm-password-button">
-                        <LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
+                    <Button
+                        class="w-full"
+                        :disabled="processing"
+                        data-test="confirm-password-button"
+                    >
+                        <LoaderCircle
+                            v-if="processing"
+                            class="h-4 w-4 animate-spin"
+                        />
                         Confirm Password
                     </Button>
                 </div>
diff --git a/resources/js/pages/auth/ForgotPassword.vue b/resources/js/pages/auth/ForgotPassword.vue
index 6950b674..4bdcd7a9 100644
--- a/resources/js/pages/auth/ForgotPassword.vue
+++ b/resources/js/pages/auth/ForgotPassword.vue
@@ -16,24 +16,47 @@ defineProps<{
 </script>
 
 <template>
-    <AuthLayout title="Forgot password" description="Enter your email to receive a password reset link">
+    <AuthLayout
+        title="Forgot password"
+        description="Enter your email to receive a password reset link"
+    >
         <Head title="Forgot password" />
 
-        <div v-if="status" class="mb-4 text-center text-sm font-medium text-green-600">
+        <div
+            v-if="status"
+            class="mb-4 text-center text-sm font-medium text-green-600"
+        >
             {{ status }}
         </div>
 
         <div class="space-y-6">
-            <Form v-bind="PasswordResetLinkController.store.form()" v-slot="{ errors, processing }">
+            <Form
+                v-bind="PasswordResetLinkController.store.form()"
+                v-slot="{ errors, processing }"
+            >
                 <div class="grid gap-2">
                     <Label for="email">Email address</Label>
-                    <Input id="email" type="email" name="email" autocomplete="off" autofocus placeholder="email@example.com" />
+                    <Input
+                        id="email"
+                        type="email"
+                        name="email"
+                        autocomplete="off"
+                        autofocus
+                        placeholder="email@example.com"
+                    />
                     <InputError :message="errors.email" />
                 </div>
 
                 <div class="my-6 flex items-center justify-start">
-                    <Button class="w-full" :disabled="processing" data-test="email-password-reset-link-button">
-                        <LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
+                    <Button
+                        class="w-full"
+                        :disabled="processing"
+                        data-test="email-password-reset-link-button"
+                    >
+                        <LoaderCircle
+                            v-if="processing"
+                            class="h-4 w-4 animate-spin"
+                        />
                         Email password reset link
                     </Button>
                 </div>
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index 52d8637c..1f307841 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -19,10 +19,16 @@ defineProps<{
 </script>
 
 <template>
-    <AuthBase title="Log in to your account" description="Enter your email and password below to log in">
+    <AuthBase
+        title="Log in to your account"
+        description="Enter your email and password below to log in"
+    >
         <Head title="Log in" />
 
-        <div v-if="status" class="mb-4 text-center text-sm font-medium text-green-600">
+        <div
+            v-if="status"
+            class="mb-4 text-center text-sm font-medium text-green-600"
+        >
             {{ status }}
         </div>
 
@@ -51,7 +57,14 @@ defineProps<{
                 <div class="grid gap-2">
                     <div class="flex items-center justify-between">
                         <Label for="password">Password</Label>
-                        <TextLink v-if="canResetPassword" :href="request()" class="text-sm" :tabindex="5"> Forgot password? </TextLink>
+                        <TextLink
+                            v-if="canResetPassword"
+                            :href="request()"
+                            class="text-sm"
+                            :tabindex="5"
+                        >
+                            Forgot password?
+                        </TextLink>
                     </div>
                     <Input
                         id="password"
@@ -72,8 +85,17 @@ defineProps<{
                     </Label>
                 </div>
 
-                <Button type="submit" class="mt-4 w-full" :tabindex="4" :disabled="processing" data-test="login-button">
-                    <LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
+                <Button
+                    type="submit"
+                    class="mt-4 w-full"
+                    :tabindex="4"
+                    :disabled="processing"
+                    data-test="login-button"
+                >
+                    <LoaderCircle
+                        v-if="processing"
+                        class="h-4 w-4 animate-spin"
+                    />
                     Log in
                 </Button>
             </div>
diff --git a/resources/js/pages/auth/Register.vue b/resources/js/pages/auth/Register.vue
index de50736d..1c63b0c6 100644
--- a/resources/js/pages/auth/Register.vue
+++ b/resources/js/pages/auth/Register.vue
@@ -12,7 +12,10 @@ import { LoaderCircle } from 'lucide-vue-next';
 </script>
 
 <template>
-    <AuthBase title="Create an account" description="Enter your details below to create your account">
+    <AuthBase
+        title="Create an account"
+        description="Enter your details below to create your account"
+    >
         <Head title="Register" />
 
         <Form
@@ -24,19 +27,44 @@ import { LoaderCircle } from 'lucide-vue-next';
             <div class="grid gap-6">
                 <div class="grid gap-2">
                     <Label for="name">Name</Label>
-                    <Input id="name" type="text" required autofocus :tabindex="1" autocomplete="name" name="name" placeholder="Full name" />
+                    <Input
+                        id="name"
+                        type="text"
+                        required
+                        autofocus
+                        :tabindex="1"
+                        autocomplete="name"
+                        name="name"
+                        placeholder="Full name"
+                    />
                     <InputError :message="errors.name" />
                 </div>
 
                 <div class="grid gap-2">
                     <Label for="email">Email address</Label>
-                    <Input id="email" type="email" required :tabindex="2" autocomplete="email" name="email" placeholder="email@example.com" />
+                    <Input
+                        id="email"
+                        type="email"
+                        required
+                        :tabindex="2"
+                        autocomplete="email"
+                        name="email"
+                        placeholder="email@example.com"
+                    />
                     <InputError :message="errors.email" />
                 </div>
 
                 <div class="grid gap-2">
                     <Label for="password">Password</Label>
-                    <Input id="password" type="password" required :tabindex="3" autocomplete="new-password" name="password" placeholder="Password" />
+                    <Input
+                        id="password"
+                        type="password"
+                        required
+                        :tabindex="3"
+                        autocomplete="new-password"
+                        name="password"
+                        placeholder="Password"
+                    />
                     <InputError :message="errors.password" />
                 </div>
 
@@ -54,15 +82,29 @@ import { LoaderCircle } from 'lucide-vue-next';
                     <InputError :message="errors.password_confirmation" />
                 </div>
 
-                <Button type="submit" class="mt-2 w-full" tabindex="5" :disabled="processing" data-test="register-user-button">
-                    <LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
+                <Button
+                    type="submit"
+                    class="mt-2 w-full"
+                    tabindex="5"
+                    :disabled="processing"
+                    data-test="register-user-button"
+                >
+                    <LoaderCircle
+                        v-if="processing"
+                        class="h-4 w-4 animate-spin"
+                    />
                     Create account
                 </Button>
             </div>
 
             <div class="text-center text-sm text-muted-foreground">
                 Already have an account?
-                <TextLink :href="login()" class="underline underline-offset-4" :tabindex="6">Log in</TextLink>
+                <TextLink
+                    :href="login()"
+                    class="underline underline-offset-4"
+                    :tabindex="6"
+                    >Log in</TextLink
+                >
             </div>
         </Form>
     </AuthBase>
diff --git a/resources/js/pages/auth/ResetPassword.vue b/resources/js/pages/auth/ResetPassword.vue
index 8642d446..805b46d2 100644
--- a/resources/js/pages/auth/ResetPassword.vue
+++ b/resources/js/pages/auth/ResetPassword.vue
@@ -18,7 +18,10 @@ const inputEmail = ref(props.email);
 </script>
 
 <template>
-    <AuthLayout title="Reset password" description="Please enter your new password below">
+    <AuthLayout
+        title="Reset password"
+        description="Please enter your new password below"
+    >
         <Head title="Reset password" />
 
         <Form
@@ -30,7 +33,15 @@ const inputEmail = ref(props.email);
             <div class="grid gap-6">
                 <div class="grid gap-2">
                     <Label for="email">Email</Label>
-                    <Input id="email" type="email" name="email" autocomplete="email" v-model="inputEmail" class="mt-1 block w-full" readonly />
+                    <Input
+                        id="email"
+                        type="email"
+                        name="email"
+                        autocomplete="email"
+                        v-model="inputEmail"
+                        class="mt-1 block w-full"
+                        readonly
+                    />
                     <InputError :message="errors.email" class="mt-2" />
                 </div>
 
@@ -49,7 +60,9 @@ const inputEmail = ref(props.email);
                 </div>
 
                 <div class="grid gap-2">
-                    <Label for="password_confirmation"> Confirm Password </Label>
+                    <Label for="password_confirmation">
+                        Confirm Password
+                    </Label>
                     <Input
                         id="password_confirmation"
                         type="password"
@@ -61,8 +74,16 @@ const inputEmail = ref(props.email);
                     <InputError :message="errors.password_confirmation" />
                 </div>
 
-                <Button type="submit" class="mt-4 w-full" :disabled="processing" data-test="reset-password-button">
-                    <LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
+                <Button
+                    type="submit"
+                    class="mt-4 w-full"
+                    :disabled="processing"
+                    data-test="reset-password-button"
+                >
+                    <LoaderCircle
+                        v-if="processing"
+                        class="h-4 w-4 animate-spin"
+                    />
                     Reset password
                 </Button>
             </div>
diff --git a/resources/js/pages/auth/TwoFactorChallenge.vue b/resources/js/pages/auth/TwoFactorChallenge.vue
index 5e8ca2cb..987f3e52 100644
--- a/resources/js/pages/auth/TwoFactorChallenge.vue
+++ b/resources/js/pages/auth/TwoFactorChallenge.vue
@@ -2,7 +2,11 @@
 import InputError from '@/components/InputError.vue';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { PinInput, PinInputGroup, PinInputSlot } from '@/components/ui/pin-input';
+import {
+    PinInput,
+    PinInputGroup,
+    PinInputSlot,
+} from '@/components/ui/pin-input';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { store } from '@/routes/two-factor/login';
 import { Form, Head } from '@inertiajs/vue3';
@@ -18,14 +22,16 @@ const authConfigContent = computed<AuthConfigContent>(() => {
     if (showRecoveryInput.value) {
         return {
             title: 'Recovery Code',
-            description: 'Please confirm access to your account by entering one of your emergency recovery codes.',
+            description:
+                'Please confirm access to your account by entering one of your emergency recovery codes.',
             toggleText: 'login using an authentication code',
         };
     }
 
     return {
         title: 'Authentication Code',
-        description: 'Enter the authentication code provided by your authenticator application.',
+        description:
+            'Enter the authentication code provided by your authenticator application.',
         toggleText: 'login using a recovery code',
     };
 });
@@ -43,24 +49,49 @@ const codeValue = computed<string>(() => code.value.join(''));
 </script>
 
 <template>
-    <AuthLayout :title="authConfigContent.title" :description="authConfigContent.description">
+    <AuthLayout
+        :title="authConfigContent.title"
+        :description="authConfigContent.description"
+    >
         <Head title="Two-Factor Authentication" />
 
         <div class="space-y-6">
             <template v-if="!showRecoveryInput">
-                <Form v-bind="store.form()" class="space-y-4" reset-on-error @error="code = []" #default="{ errors, processing, clearErrors }">
+                <Form
+                    v-bind="store.form()"
+                    class="space-y-4"
+                    reset-on-error
+                    @error="code = []"
+                    #default="{ errors, processing, clearErrors }"
+                >
                     <input type="hidden" name="code" :value="codeValue" />
-                    <div class="flex flex-col items-center justify-center space-y-3 text-center">
+                    <div
+                        class="flex flex-col items-center justify-center space-y-3 text-center"
+                    >
                         <div class="flex w-full items-center justify-center">
-                            <PinInput id="otp" placeholder="○" v-model="code" type="number" otp>
+                            <PinInput
+                                id="otp"
+                                placeholder="○"
+                                v-model="code"
+                                type="number"
+                                otp
+                            >
                                 <PinInputGroup>
-                                    <PinInputSlot v-for="(id, index) in 6" :key="id" :index="index" :disabled="processing" autofocus />
+                                    <PinInputSlot
+                                        v-for="(id, index) in 6"
+                                        :key="id"
+                                        :index="index"
+                                        :disabled="processing"
+                                        autofocus
+                                    />
                                 </PinInputGroup>
                             </PinInput>
                         </div>
                         <InputError :message="errors.code" />
                     </div>
-                    <Button type="submit" class="w-full" :disabled="processing">Continue</Button>
+                    <Button type="submit" class="w-full" :disabled="processing"
+                        >Continue</Button
+                    >
                     <div class="text-center text-sm text-muted-foreground">
                         <span>or you can </span>
                         <button
@@ -75,10 +106,23 @@ const codeValue = computed<string>(() => code.value.join(''));
             </template>
 
             <template v-else>
-                <Form v-bind="store.form()" class="space-y-4" reset-on-error #default="{ errors, processing, clearErrors }">
-                    <Input name="recovery_code" type="text" placeholder="Enter recovery code" :autofocus="showRecoveryInput" required />
+                <Form
+                    v-bind="store.form()"
+                    class="space-y-4"
+                    reset-on-error
+                    #default="{ errors, processing, clearErrors }"
+                >
+                    <Input
+                        name="recovery_code"
+                        type="text"
+                        placeholder="Enter recovery code"
+                        :autofocus="showRecoveryInput"
+                        required
+                    />
                     <InputError :message="errors.recovery_code" />
-                    <Button type="submit" class="w-full" :disabled="processing">Continue</Button>
+                    <Button type="submit" class="w-full" :disabled="processing"
+                        >Continue</Button
+                    >
 
                     <div class="text-center text-sm text-muted-foreground">
                         <span>or you can </span>
diff --git a/resources/js/pages/auth/VerifyEmail.vue b/resources/js/pages/auth/VerifyEmail.vue
index c520c3d1..e7dba3b0 100644
--- a/resources/js/pages/auth/VerifyEmail.vue
+++ b/resources/js/pages/auth/VerifyEmail.vue
@@ -13,20 +13,37 @@ defineProps<{
 </script>
 
 <template>
-    <AuthLayout title="Verify email" description="Please verify your email address by clicking on the link we just emailed to you.">
+    <AuthLayout
+        title="Verify email"
+        description="Please verify your email address by clicking on the link we just emailed to you."
+    >
         <Head title="Email verification" />
 
-        <div v-if="status === 'verification-link-sent'" class="mb-4 text-center text-sm font-medium text-green-600">
-            A new verification link has been sent to the email address you provided during registration.
+        <div
+            v-if="status === 'verification-link-sent'"
+            class="mb-4 text-center text-sm font-medium text-green-600"
+        >
+            A new verification link has been sent to the email address you
+            provided during registration.
         </div>
 
-        <Form v-bind="EmailVerificationNotificationController.store.form()" class="space-y-6 text-center" v-slot="{ processing }">
+        <Form
+            v-bind="EmailVerificationNotificationController.store.form()"
+            class="space-y-6 text-center"
+            v-slot="{ processing }"
+        >
             <Button :disabled="processing" variant="secondary">
                 <LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
                 Resend verification email
             </Button>
 
-            <TextLink :href="logout()" as="button" class="mx-auto block text-sm"> Log out </TextLink>
+            <TextLink
+                :href="logout()"
+                as="button"
+                class="mx-auto block text-sm"
+            >
+                Log out
+            </TextLink>
         </Form>
     </AuthLayout>
 </template>
diff --git a/resources/js/pages/settings/Appearance.vue b/resources/js/pages/settings/Appearance.vue
index 226d6eab..5cd1a318 100644
--- a/resources/js/pages/settings/Appearance.vue
+++ b/resources/js/pages/settings/Appearance.vue
@@ -23,7 +23,10 @@ const breadcrumbItems: BreadcrumbItem[] = [
 
         <SettingsLayout>
             <div class="space-y-6">
-                <HeadingSmall title="Appearance settings" description="Update your account's appearance settings" />
+                <HeadingSmall
+                    title="Appearance settings"
+                    description="Update your account's appearance settings"
+                />
                 <AppearanceTabs />
             </div>
         </SettingsLayout>
diff --git a/resources/js/pages/settings/Password.vue b/resources/js/pages/settings/Password.vue
index 65148891..be330910 100644
--- a/resources/js/pages/settings/Password.vue
+++ b/resources/js/pages/settings/Password.vue
@@ -30,7 +30,10 @@ const currentPasswordInput = ref<HTMLInputElement | null>(null);
 
         <SettingsLayout>
             <div class="space-y-6">
-                <HeadingSmall title="Update password" description="Ensure your account is using a long, random password to stay secure" />
+                <HeadingSmall
+                    title="Update password"
+                    description="Ensure your account is using a long, random password to stay secure"
+                />
 
                 <Form
                     v-bind="PasswordController.update.form()"
@@ -38,7 +41,11 @@ const currentPasswordInput = ref<HTMLInputElement | null>(null);
                         preserveScroll: true,
                     }"
                     reset-on-success
-                    :reset-on-error="['password', 'password_confirmation', 'current_password']"
+                    :reset-on-error="[
+                        'password',
+                        'password_confirmation',
+                        'current_password',
+                    ]"
                     class="space-y-6"
                     v-slot="{ errors, processing, recentlySuccessful }"
                 >
@@ -71,7 +78,9 @@ const currentPasswordInput = ref<HTMLInputElement | null>(null);
                     </div>
 
                     <div class="grid gap-2">
-                        <Label for="password_confirmation">Confirm password</Label>
+                        <Label for="password_confirmation"
+                            >Confirm password</Label
+                        >
                         <Input
                             id="password_confirmation"
                             name="password_confirmation"
@@ -84,7 +93,11 @@ const currentPasswordInput = ref<HTMLInputElement | null>(null);
                     </div>
 
                     <div class="flex items-center gap-4">
-                        <Button :disabled="processing" data-test="update-password-button">Save password</Button>
+                        <Button
+                            :disabled="processing"
+                            data-test="update-password-button"
+                            >Save password</Button
+                        >
 
                         <Transition
                             enter-active-class="transition ease-in-out"
@@ -92,7 +105,12 @@ const currentPasswordInput = ref<HTMLInputElement | null>(null);
                             leave-active-class="transition ease-in-out"
                             leave-to-class="opacity-0"
                         >
-                            <p v-show="recentlySuccessful" class="text-sm text-neutral-600">Saved.</p>
+                            <p
+                                v-show="recentlySuccessful"
+                                class="text-sm text-neutral-600"
+                            >
+                                Saved.
+                            </p>
                         </Transition>
                     </div>
                 </Form>
diff --git a/resources/js/pages/settings/Profile.vue b/resources/js/pages/settings/Profile.vue
index f3e9f360..082b7a6e 100644
--- a/resources/js/pages/settings/Profile.vue
+++ b/resources/js/pages/settings/Profile.vue
@@ -38,9 +38,16 @@ const user = page.props.auth.user;
 
         <SettingsLayout>
             <div class="flex flex-col space-y-6">
-                <HeadingSmall title="Profile information" description="Update your name and email address" />
+                <HeadingSmall
+                    title="Profile information"
+                    description="Update your name and email address"
+                />
 
-                <Form v-bind="ProfileController.update.form()" class="space-y-6" v-slot="{ errors, processing, recentlySuccessful }">
+                <Form
+                    v-bind="ProfileController.update.form()"
+                    class="space-y-6"
+                    v-slot="{ errors, processing, recentlySuccessful }"
+                >
                     <div class="grid gap-2">
                         <Label for="name">Name</Label>
                         <Input
@@ -82,13 +89,21 @@ const user = page.props.auth.user;
                             </Link>
                         </p>
 
-                        <div v-if="status === 'verification-link-sent'" class="mt-2 text-sm font-medium text-green-600">
-                            A new verification link has been sent to your email address.
+                        <div
+                            v-if="status === 'verification-link-sent'"
+                            class="mt-2 text-sm font-medium text-green-600"
+                        >
+                            A new verification link has been sent to your email
+                            address.
                         </div>
                     </div>
 
                     <div class="flex items-center gap-4">
-                        <Button :disabled="processing" data-test="update-profile-button">Save</Button>
+                        <Button
+                            :disabled="processing"
+                            data-test="update-profile-button"
+                            >Save</Button
+                        >
 
                         <Transition
                             enter-active-class="transition ease-in-out"
@@ -96,7 +111,12 @@ const user = page.props.auth.user;
                             leave-active-class="transition ease-in-out"
                             leave-to-class="opacity-0"
                         >
-                            <p v-show="recentlySuccessful" class="text-sm text-neutral-600">Saved.</p>
+                            <p
+                                v-show="recentlySuccessful"
+                                class="text-sm text-neutral-600"
+                            >
+                                Saved.
+                            </p>
                         </Transition>
                     </div>
                 </Form>
diff --git a/resources/js/pages/settings/TwoFactor.vue b/resources/js/pages/settings/TwoFactor.vue
index 099fd8d5..dee1a36e 100644
--- a/resources/js/pages/settings/TwoFactor.vue
+++ b/resources/js/pages/settings/TwoFactor.vue
@@ -43,37 +43,66 @@ onUnmounted(() => {
         <Head title="Two-Factor Authentication" />
         <SettingsLayout>
             <div class="space-y-6">
-                <HeadingSmall title="Two-Factor Authentication" description="Manage your two-factor authentication settings" />
+                <HeadingSmall
+                    title="Two-Factor Authentication"
+                    description="Manage your two-factor authentication settings"
+                />
 
-                <div v-if="!twoFactorEnabled" class="flex flex-col items-start justify-start space-y-4">
+                <div
+                    v-if="!twoFactorEnabled"
+                    class="flex flex-col items-start justify-start space-y-4"
+                >
                     <Badge variant="destructive">Disabled</Badge>
 
                     <p class="text-muted-foreground">
-                        When you enable two-factor authentication, you will be prompted for a secure pin during login. This pin can be retrieved from
-                        a TOTP-supported application on your phone.
+                        When you enable two-factor authentication, you will be
+                        prompted for a secure pin during login. This pin can be
+                        retrieved from a TOTP-supported application on your
+                        phone.
                     </p>
 
                     <div>
-                        <Button v-if="hasSetupData" @click="showSetupModal = true"> <ShieldCheck />Continue Setup </Button>
-                        <Form v-else v-bind="enable.form()" @success="showSetupModal = true" #default="{ processing }">
-                            <Button type="submit" :disabled="processing"> <ShieldCheck />Enable 2FA</Button></Form
+                        <Button
+                            v-if="hasSetupData"
+                            @click="showSetupModal = true"
+                        >
+                            <ShieldCheck />Continue Setup
+                        </Button>
+                        <Form
+                            v-else
+                            v-bind="enable.form()"
+                            @success="showSetupModal = true"
+                            #default="{ processing }"
+                        >
+                            <Button type="submit" :disabled="processing">
+                                <ShieldCheck />Enable 2FA</Button
+                            ></Form
                         >
                     </div>
                 </div>
 
-                <div v-else class="flex flex-col items-start justify-start space-y-4">
+                <div
+                    v-else
+                    class="flex flex-col items-start justify-start space-y-4"
+                >
                     <Badge variant="default">Enabled</Badge>
 
                     <p class="text-muted-foreground">
-                        With two-factor authentication enabled, you will be prompted for a secure, random pin during login, which you can retrieve
-                        from the TOTP-supported application on your phone.
+                        With two-factor authentication enabled, you will be
+                        prompted for a secure, random pin during login, which
+                        you can retrieve from the TOTP-supported application on
+                        your phone.
                     </p>
 
                     <TwoFactorRecoveryCodes />
 
                     <div class="relative inline">
                         <Form v-bind="disable.form()" #default="{ processing }">
-                            <Button variant="destructive" type="submit" :disabled="processing">
+                            <Button
+                                variant="destructive"
+                                type="submit"
+                                :disabled="processing"
+                            >
                                 <ShieldBan />
                                 Disable 2FA
                             </Button>
diff --git a/resources/js/ssr.ts b/resources/js/ssr.ts
index 444d4a93..b57a4638 100644
--- a/resources/js/ssr.ts
+++ b/resources/js/ssr.ts
@@ -12,8 +12,13 @@ createServer(
             page,
             render: renderToString,
             title: (title) => (title ? `${title} - ${appName}` : appName),
-            resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob<DefineComponent>('./pages/**/*.vue')),
-            setup: ({ App, props, plugin }) => createSSRApp({ render: () => h(App, props) }).use(plugin),
+            resolve: (name) =>
+                resolvePageComponent(
+                    `./pages/${name}.vue`,
+                    import.meta.glob<DefineComponent>('./pages/**/*.vue'),
+                ),
+            setup: ({ App, props, plugin }) =>
+                createSSRApp({ render: () => h(App, props) }).use(plugin),
         }),
     { cluster: true },
 );
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index ef91b935..fe34c01c 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -17,7 +17,9 @@ export interface NavItem {
     isActive?: boolean;
 }
 
-export type AppPageProps<T extends Record<string, unknown> = Record<string, unknown>> = T & {
+export type AppPageProps<
+    T extends Record<string, unknown> = Record<string, unknown>,
+> = T & {
     name: string;
     quote: { message: string; author: string };
     auth: Auth;