From f00117ed26e68dca9ba8951b03571b7c2a97f43e Mon Sep 17 00:00:00 2001
From: Daniel Stock <daniel.stock@tooloop.de>
Date: Fri, 14 Nov 2025 17:45:57 +0100
Subject: [PATCH] Move user menu to sidebar, fixes #35

---
 resources/js/components/AppContent.vue        |  21 --
 resources/js/components/AppHeader.vue         |  25 ++
 resources/js/components/AppSidebar.vue        |  21 +-
 resources/js/components/NavFooter.vue         |  42 +--
 resources/js/components/UserInfo.vue          |  21 +-
 resources/js/components/UserMenuContent.vue   |  40 ++-
 .../js/components/documents/InvoiceDialog.vue |  12 +-
 resources/js/layouts/AppLayout.vue            |  26 +-
 resources/js/pages/Achievements.vue           |  28 +-
 resources/js/pages/Customers.vue              | 273 +++++++++---------
 resources/js/pages/Dashboard.vue              |   6 +-
 resources/js/pages/Invoices.vue               | 119 ++++----
 resources/js/pages/settings/Profile.vue       |  59 +---
 13 files changed, 328 insertions(+), 365 deletions(-)
 delete mode 100644 resources/js/components/AppContent.vue
 create mode 100644 resources/js/components/AppHeader.vue

diff --git a/resources/js/components/AppContent.vue b/resources/js/components/AppContent.vue
deleted file mode 100644
index 96e3d2a..0000000
--- a/resources/js/components/AppContent.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { SidebarInset } from '@/components/ui/sidebar';
-import { computed } from 'vue';
-
-interface Props {
-    variant?: 'header' | 'sidebar';
-    class?: string;
-}
-
-const props = defineProps<Props>();
-const className = computed(() => props.class);
-</script>
-
-<template>
-    <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">
-        <slot />
-    </main>
-</template>
diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue
new file mode 100644
index 0000000..4bb1864
--- /dev/null
+++ b/resources/js/components/AppHeader.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes;
+}>();
+</script>
+
+<template>
+    <div :class="cn('grid grid-cols-[2fr_3fr_2fr] mb-12 gap-4', props.class)">
+        <div class="place-self-stretch flex row items-center justify-start">
+            <slot name="left" />
+        </div>
+
+        <div class="relative w-full items-center">
+            <slot name="middle" />
+        </div>
+
+
+        <div class="place-self-stretch flex row items-center justify-end">
+            <slot name="right" />
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index 4670f21..92789a3 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -5,11 +5,14 @@ import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarTrigger }
 import { dashboard, crm, offers, invoices, newInvoice, timesheets, customers, leads, achievements } from '@/routes';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { Kbd, KbdGroup } from '@/components/ui/kbd'
-import { edit } from '@/routes/profile';
 import { type NavItem, type NavGroup } from '@/types';
-import { Link } from '@inertiajs/vue3';
-import { Kanban, Euro, Contact, Trophy, Calculator, Settings, Target, BookUser, Timer, Headset, IdCard, Plus } from 'lucide-vue-next';
+import { InertiaLinkProps, Link, usePage } from '@inertiajs/vue3'; 
+import { Kanban, Euro, Trophy, Calculator, BookUser, Timer, Headset, Plus } from 'lucide-vue-next';
 import AppLogo from './AppLogo.vue';
+import { computed } from 'vue';
+
+const page = usePage();
+const auth = computed(() => page.props.auth);
 
 const mainNavGroups: NavGroup[] = [
     {
@@ -72,14 +75,6 @@ const mainNavGroups: NavGroup[] = [
     }
 ];
 
-const footerNavItems: NavItem[] = [
-    {
-        title: 'Einstellungen',
-        href: edit(),
-        icon: Settings,
-        color: 'text-gray-500',
-    }
-];
 </script>
 
 <template>
@@ -107,12 +102,12 @@ const footerNavItems: NavItem[] = [
             </TooltipProvider>
         </SidebarHeader>
 
-        <SidebarContent>
+        <SidebarContent class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden">
             <NavMain :groups="mainNavGroups" />
         </SidebarContent>
 
         <SidebarFooter>
-            <NavFooter :items="footerNavItems" />
+            <NavFooter :user="auth.user" />
         </SidebarFooter>
     </Sidebar>
     <slot />
diff --git a/resources/js/components/NavFooter.vue b/resources/js/components/NavFooter.vue
index bb0f0ff..784a588 100644
--- a/resources/js/components/NavFooter.vue
+++ b/resources/js/components/NavFooter.vue
@@ -1,32 +1,36 @@
 <script setup lang="ts">
 import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
-import { toUrl } from '@/lib/utils';
-import { type NavItem } from '@/types';
-import { Link } from '@inertiajs/vue3';
+import { User } from '@/types';
+import { defineProps } from 'vue';
+import UserInfo from '@/components/UserInfo.vue';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import UserMenuContent from '@/components/UserMenuContent.vue';
 
-interface Props {
-    items: NavItem[];
+const props = defineProps<{
+    user: User;
     class?: string;
-}
+}>()
 
-defineProps<Props>();
 </script>
 
 <template>
-    <SidebarGroup :class="`group-data-[collapsible=icon]:p-0 ${$props.class || ''}`">
+    <SidebarGroup class="p-0">
         <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>
-                        <Link :href="item.href">
-                        <component :is="item.icon" :class="item.color" stroke-width="1.5" />
-                        <span>{{ item.title }}</span>
-                        </Link>
-                    </SidebarMenuButton>
-                </SidebarMenuItem>
+                <DropdownMenu>
+                    <DropdownMenuTrigger as-child>
+                        <SidebarMenuItem>
+                            <SidebarMenuButton
+                                class="pl-0 rounded-[1rem_var(--radius-md)_var(--radius-md)_1rem] group-data-[state=collapsed]:rounded-full">
+                                <UserInfo :user="props.user" />
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start">
+                        <UserMenuContent />
+                    </DropdownMenuContent>
+                </DropdownMenu>
             </SidebarMenu>
         </SidebarGroupContent>
     </SidebarGroup>
-</template>
+</template>
\ No newline at end of file
diff --git a/resources/js/components/UserInfo.vue b/resources/js/components/UserInfo.vue
index 24aae20..9bae22e 100644
--- a/resources/js/components/UserInfo.vue
+++ b/resources/js/components/UserInfo.vue
@@ -3,6 +3,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { useInitials } from '@/composables/useInitials';
 import type { User } from '@/types';
 import { computed } from 'vue';
+import { Kbd, KbdGroup } from '@/components/ui/kbd'
 
 interface Props {
     user: User;
@@ -20,15 +21,17 @@ const showAvatar = computed(() => props.user.avatar && props.user.avatar !== '')
 </script>
 
 <template>
-    <Avatar class="h-10 w-10 overflow-hidden rounded-lg">
-        <AvatarImage v-if="showAvatar" :src="user.avatar!" :alt="user.name" />
-        <AvatarFallback class="rounded-full text-black dark:text-white">
-            {{ getInitials(user.name) }}
-        </AvatarFallback>
-    </Avatar>
+    <div class="flex items-center gap-2">
+        <Avatar class="size-8 overflow-hidden rounded-lg">
+            <AvatarImage v-if="showAvatar" :src="user.avatar!" :alt="user.name" />
+            <AvatarFallback class="rounded-full bg-primary text-black dark:text-white">
+                {{ getInitials(user.name) }}
+            </AvatarFallback>
+        </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>
+        <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>
+        </div>
     </div>
 </template>
diff --git a/resources/js/components/UserMenuContent.vue b/resources/js/components/UserMenuContent.vue
index 194a7ba..3141af2 100644
--- a/resources/js/components/UserMenuContent.vue
+++ b/resources/js/components/UserMenuContent.vue
@@ -1,45 +1,43 @@
 <script setup lang="ts">
-import UserInfo from '@/components/UserInfo.vue';
 import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@/components/ui/dropdown-menu';
 import { logout } from '@/routes';
 import { edit } from '@/routes/profile';
-import type { User } from '@/types';
 import { Link, router } from '@inertiajs/vue3';
-import { LogOut, Settings } from 'lucide-vue-next';
+import { LogOut, Settings, User } from 'lucide-vue-next';
 import axios from 'axios';
-
-interface Props {
-    user: User;
-}
+import { Kbd, KbdGroup } from '@/components/ui/kbd';
 
 const handleLogout = () => {
     router.flushAll();
     localStorage.removeItem('sanctum_token');
     delete axios.defaults.headers.common['Authorization'];
 };
-
-defineProps<Props>();
 </script>
 
 <template>
-    <DropdownMenuLabel class="p-0 font-normal">
-        <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-            <UserInfo :user="user" :show-email="true" />
-        </div>
-    </DropdownMenuLabel>
-    <DropdownMenuSeparator />
     <DropdownMenuGroup>
-        <DropdownMenuItem :as-child="true">
-            <Link class="block w-full" :href="edit()" prefetch as="button">
-            <Settings class="mr-2 h-4 w-4" />
-            Settings
+
+        <DropdownMenuItem as-child>
+            <Link :href="edit()" prefetch class="flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <Settings stroke-width="1.5" />
+                <span class="mr-4">Einstellungen</span>
+            </div>
+            <KbdGroup>
+                <Kbd class="visible-mac">⌘</Kbd>
+                <Kbd class="visible-pc">Ctrl</Kbd>
+                <Kbd>,</Kbd>
+            </KbdGroup>
             </Link>
         </DropdownMenuItem>
+
     </DropdownMenuGroup>
+
     <DropdownMenuSeparator />
-    <DropdownMenuItem :as-child="true">
+
+    <DropdownMenuItem as-child>
         <Link class="block w-full" :href="logout()" @click="handleLogout" as="button" data-test="logout-button">
-        <LogOut class="mr-2 h-4 w-4" />
+        <LogOut stroke-width="1.5" class="mr-2 h-4 w-4" />
         Log out
         </Link>
     </DropdownMenuItem>
diff --git a/resources/js/components/documents/InvoiceDialog.vue b/resources/js/components/documents/InvoiceDialog.vue
index 39881d2..15c5048 100644
--- a/resources/js/components/documents/InvoiceDialog.vue
+++ b/resources/js/components/documents/InvoiceDialog.vue
@@ -29,7 +29,7 @@ import { alertStore } from "@/stores/alertStore"
 import { GrowingTextarea } from '../ui/growing-textarea'
 import { toast } from "vue-sonner"
 import { SendMailDialog } from "../ui/send-mail-dialog"
-import { Kbd, KbdGroup } from "../ui/kbd"
+import { Kbd, KbdGroup } from '@/components/ui/kbd';
 import DialogClose from "../ui/dialog/DialogClose.vue"
 import DialogCloseButton from "../DialogCloseButton/DialogCloseButton.vue"
 
@@ -385,7 +385,7 @@ const updateTotalAmount = () => {
                                 <!-- Preview -->
                                 <DropdownMenuItem v-if="invoice?.paymentStatus == 'draft'"
                                     class="flex items-center justify-between" @click="preview">
-                                    <div class="flex items-center gap-4">
+                                    <div class="flex items-center gap-3">
                                         <Eye :strokeWidth="1.5" class="text-current" />
                                         <span class="mr-4">Vorschau</span>
                                     </div>
@@ -399,7 +399,7 @@ const updateTotalAmount = () => {
                                 <!-- PDF -->
                                 <DropdownMenuItem v-if="invoice && invoice.paymentStatus != 'draft'" class="flex justify-between"
                                     @click="downloadPdf">
-                                    <div class="flex items-center gap-4">
+                                    <div class="flex items-center gap-3">
                                         <FileText stroke-width="1.5" class="text-muted-foreground" />
                                         <div class="mr-4 flex flex-col">
                                             <span>PDF exportieren</span>
@@ -416,7 +416,7 @@ const updateTotalAmount = () => {
                                 <!-- XML -->
                                 <DropdownMenuItem v-if="invoice && invoice.paymentStatus != 'draft'" class="flex justify-between"
                                     @click="downloadXml">
-                                    <div class="flex items-center gap-4">
+                                    <div class="flex items-center gap-3">
                                         <CodeXml stroke-width="1.5" class="text-muted-foreground" />
                                         <div class="mr-4 flex flex-col">
                                             <span>XML exportieren</span>
@@ -431,7 +431,7 @@ const updateTotalAmount = () => {
                                 <DropdownMenuItem
                                     v-if="invoice && ['issued', 'due', 'reminded'].includes(invoice.paymentStatus)"
                                     class="flex justify-between" @click="deleteInvoice">
-                                    <div class="flex items-center gap-2">
+                                    <div class="flex items-center gap-3">
                                         <!-- <FileX stroke-width="1.5"  class="text-muted-foreground"/> -->
                                         <Ban :strokeWidth="1.5" class="text-current" />
                                         <span class="mr-2">Stornieren</span>
@@ -442,7 +442,7 @@ const updateTotalAmount = () => {
                                 <DropdownMenuItem
                                     class="flex justify-between text-destructive! hover:bg-red-100! dark:hover:bg-red-950!"
                                     @click="deleteInvoice">
-                                    <div class="flex items-center gap-2">
+                                    <div class="flex items-center gap-3">
                                         <Trash2 :strokeWidth="1.5" class="text-current" />
                                         <span class="mr-2">Löschen</span>
                                     </div>
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index 8692531..d2931c8 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import AppContent from '@/components/AppContent.vue';
+import { Head } from '@inertiajs/vue3'
 import AppSidebar from '@/components/AppSidebar.vue';
 import { onMounted } from 'vue';
 import 'vue-sonner/style.css'
@@ -13,6 +13,9 @@ import { usePage } from '@inertiajs/vue3';
 
 const isOpen = usePage().props.sidebarOpen;
 const alert = alertStore()
+const props = defineProps<{
+    title: string;
+}>();
 
 onMounted(() => {
     if (navigator.platform.toUpperCase().indexOf('MAC') >= 0) {
@@ -23,6 +26,9 @@ onMounted(() => {
 </script>
 
 <template>
+
+    <Head :title="props.title" />
+
     <Toaster position="top-right" :expand="true" closeButton :visible-toasts="6" :offset="'1rem'" :toastOptions="{
         unstyled: true,
         classes: {
@@ -57,12 +63,17 @@ onMounted(() => {
         </template>
     </Toaster>
 
-    <SidebarProvider :default-open="isOpen">
-        <AppSidebar />
-        <AppContent variant="sidebar" class="overflow-x-hidden bg-main">
-            <slot />
-        </AppContent>
-    </SidebarProvider>
+    <div class="overflow-x-auto p-4 lg:p-8 lg:pl-4 print:bg-transparent print:p-0 print:m-0">
+
+        <SidebarProvider :default-open="isOpen">
+            <AppSidebar />
+
+            <main class="w-full overflow-x-hidden">
+                <slot />
+            </main>
+        </SidebarProvider>
+
+    </div>
 
     <AlertDialog v-model:open="alert.open">
         <AlertDialogContent>
@@ -76,7 +87,6 @@ onMounted(() => {
             </AlertDialogFooter>
         </AlertDialogContent>
     </AlertDialog>
-
 </template>
 
 <style>
diff --git a/resources/js/pages/Achievements.vue b/resources/js/pages/Achievements.vue
index 514fa1b..61452eb 100644
--- a/resources/js/pages/Achievements.vue
+++ b/resources/js/pages/Achievements.vue
@@ -7,27 +7,21 @@ import PlaceholderPattern from '../components/PlaceholderPattern.vue';
 
 <template>
 
-    <Head title="Erfolge" />
+    <AppLayout title="Erfolge">
+        <div>
+            <h1 class="text-xl">Kategorie</h1>
+            <h2 class="text-sm text-neutral-400 mb-4">3 von 10 freigeschaltet</h2>
 
-    <AppLayout>
-        <div class="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4">
-
-            <div>
-                <h1 class="text-xl">Kategorie</h1>
-                <h2 class="text-sm text-neutral-400 mb-4">3 von 10 freigeschaltet</h2>
-
-                <div class="flex flex-row flex-wrap gap-4">
-                    <div v-for="n in 10" class="relative flex flex-col items-center">
-                        <div
-                            class="w-48 relative aspect-square overflow-hidden rounded-full border border-sidebar-border/70 dark:border-sidebar-border">
-                            <PlaceholderPattern />
-                        </div>
-                        <label class="">Erfolg {{ n
-                            }}</label>
+            <div class="flex flex-row flex-wrap gap-4">
+                <div v-for="n in 10" class="relative flex flex-col items-center">
+                    <div
+                        class="w-48 relative aspect-square overflow-hidden rounded-full border border-sidebar-border/70 dark:border-sidebar-border">
+                        <PlaceholderPattern />
                     </div>
+                    <label class="">Erfolg {{ n
+                    }}</label>
                 </div>
             </div>
-
         </div>
     </AppLayout>
 </template>
diff --git a/resources/js/pages/Customers.vue b/resources/js/pages/Customers.vue
index da07a93..2ef23b0 100644
--- a/resources/js/pages/Customers.vue
+++ b/resources/js/pages/Customers.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
 
-import { ref, onMounted, computed, useTemplateRef, watch } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import AppLayout from '@/layouts/AppLayout.vue'
-import { customers } from '@/routes'
+import AppHeader from '@/components/AppHeader.vue'
 import { Address } from '@/types'
 import { Head } from '@inertiajs/vue3'
 import api from '@/axios'
-import { Customer, Contact } from '@/types'
-import { randomInt, bgColorForString } from '@/lib/utils'
+import { Customer } from '@/types'
+import { bgColorForString } from '@/lib/utils'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, } from '@/components/ui/button-group'
-import { Copy, Delete, Edit, Globe, House, LayoutGrid, LayoutList, Mail, Phone, Plus, Rows3, Rows4, Search, Smartphone } from "lucide-vue-next"
+import { ButtonGroup } from '@/components/ui/button-group'
+import { Delete, Globe, House, LayoutGrid, Mail, Phone, Plus, Rows3, Search, Smartphone } from "lucide-vue-next"
 import Fuse from 'fuse.js';
 import { getInitials } from '@/composables/useInitials';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card'
@@ -121,15 +120,11 @@ const call = (number: string, event: Event) => {
 
 <template>
 
-    <Head title="Dashboard" />
+    <AppLayout title="Kunden">
 
-    <AppLayout>
-        <div
-            class="flex h-full flex-1 flex-col gap-4 overflow-x-auto p-4 lg:p-8 print:bg-transparent print:p-0 print:m-0">
-
-            <!-- Function Header -->
-            <div id="function-header" class="flex row justify-between items-center mb-4 gap-4">
-                <!-- View buttons -->
+        <AppHeader>
+            <!-- View buttons -->
+            <template #left>
                 <ButtonGroup aria-label="Button group">
                     <Button variant="pressed" size="sm">
                         <LayoutGrid stroke-width="1.5" />
@@ -138,150 +133,152 @@ const call = (number: string, event: Event) => {
                         <Rows3 stroke-width="1.5" />
                     </Button>
                 </ButtonGroup>
+            </template>
 
-                <!-- Search field -->
-                <div class="relative w-full max-w-sm items-center">
-                    <Input ref="search-field" id="search" type="text" placeholder="Filtern" class="px-8 bg-background"
-                        v-model="searchQuery" />
-                    <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
-                        <Search class="size-4 text-muted-foreground" :stroke-width="1.5" />
-                    </span>
-                    <span class="absolute end-0 inset-y-0 flex items-center justify-center px-0 mr-1">
-                        <Button :size="'sm'" :variant="'ghost'" @click="searchQuery = ''; searchField.focus()">
-                            <Delete class="size-4 text-muted-foreground" :stroke-width="1.5" />
-                        </Button>
-                    </span>
-                </div>
 
-                <!-- New button -->
+            <!-- Search field -->
+            <template #middle>
+                <Input ref="search-field" id="search" type="text" placeholder="Filtern" class="px-8 bg-background"
+                    v-model="searchQuery" />
+                <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
+                    <Search class="size-4 text-muted-foreground" :stroke-width="1.5" />
+                </span>
+                <span class="absolute end-0 inset-y-0 flex items-center justify-center px-0 mr-1">
+                    <Button :size="'sm'" :variant="'ghost'" @click="searchQuery = ''; searchField.focus()">
+                        <Delete class="size-4 text-muted-foreground" :stroke-width="1.5" />
+                    </Button>
+                </span>
+            </template>
+
+            <!-- New button -->
+            <template #right>
                 <Button size="sm" variant="action" @click="">
                     <Plus stroke-width="1.5" /> Neu
                 </Button>
-            </div>
+            </template>
+        </AppHeader>
 
 
-            <div class="columns-xs gap-6">
+        <div class="columns-xs gap-6">
 
-                <Card v-for="customer in filteredCustomers" :key="customer.id"
-                    class="relative mb-6 break-inside-avoid hover:border-slate-300 dark:hover:bg-neutral-800/90 dark:hover:border-neutral-600 overflow-clip"
-                    @click="showDetail(customer)">
+            <Card v-for="customer in filteredCustomers" :key="customer.id"
+                class="relative mb-6 break-inside-avoid hover:border-slate-300 dark:hover:bg-neutral-800/90 dark:hover:border-neutral-600 overflow-clip"
+                @click="showDetail(customer)">
 
-                    <CardHeader v-if="customer.logo" class="z-0">
-                        <img :src="'storage/uploads/' + customer.logo" alt="Logo {{ customer.companyName }}"
-                            class="max-h-8 max-w-[50%]">
-                    </CardHeader>
+                <CardHeader v-if="customer.logo" class="z-0">
+                    <img :src="'storage/uploads/' + customer.logo" alt="Logo {{ customer.companyName }}"
+                        class="max-h-8 max-w-[50%]">
+                </CardHeader>
 
-                    <CardContent class="flex justify-between gap-4 flex-col sm:flex-row pr-4 z-0">
-                        <address class="not-italic">
-                            <CardTitle>
-                                {{ customer.companyName }}
-                                <!-- <Badge variant="secondary">Badge</Badge> -->
-                            </CardTitle>
-                            <CardDescription class="mt-2">
-                                {{ customer.billingAddress?.lineOne }}<br />
-                                {{ customer.billingAddress?.lineTwo }}<br v-if="customer.billingAddress?.lineTwo" />
-                                {{ customer.billingAddress?.postalCode }} {{ customer.billingAddress?.city }}
-                            </CardDescription>
-                        </address>
+                <CardContent class="flex justify-between gap-4 flex-col sm:flex-row pr-4 z-0">
+                    <address class="not-italic">
+                        <CardTitle>
+                            {{ customer.companyName }}
+                            <!-- <Badge variant="secondary">Badge</Badge> -->
+                        </CardTitle>
+                        <CardDescription class="mt-2">
+                            {{ customer.billingAddress?.lineOne }}<br />
+                            {{ customer.billingAddress?.lineTwo }}<br v-if="customer.billingAddress?.lineTwo" />
+                            {{ customer.billingAddress?.postalCode }} {{ customer.billingAddress?.city }}
+                        </CardDescription>
+                    </address>
 
-                        <div class="flex items-start">
-                            <TooltipProvider>
-                                <Tooltip v-if="customer.url">
-                                    <TooltipTrigger>
-                                        <Button variant="ghost" size="sm"
-                                            @click="(event: Event) => browse(customer.url as string, event)">
-                                            <Globe stroke-width="1.5" />
-                                        </Button>
-                                    </TooltipTrigger>
-                                    <TooltipContent>
-                                        {{ customer.url }} öffnen
-                                    </TooltipContent>
-                                </Tooltip>
-                                <Tooltip v-if="customer.phone">
-                                    <TooltipTrigger>
-                                        <Button variant="ghost" size="sm"
-                                            @click="(event: Event) => call(customer.phone as string, event)">
-                                            <Phone stroke-width="1.5" />
-                                        </Button>
-                                    </TooltipTrigger>
-                                    <TooltipContent>
-                                        {{ customer.phone }} anrufen
-                                    </TooltipContent>
-                                </Tooltip>
-                                <Tooltip v-if="customer.billingAddress">
-                                    <TooltipTrigger>
-                                        <Button variant="ghost" size="sm"
-                                            @click="(event: Event) => addressToClipbard(customer.companyName, customer.billingAddress as Address | null, event)">
-                                            <House stroke-width="1.5" />
-                                        </Button>
-                                    </TooltipTrigger>
-                                    <TooltipContent>
-                                        Adresse in Zwischenablage kopieren
-                                    </TooltipContent>
-                                </Tooltip>
-                            </TooltipProvider>
-                        </div>
-                    </CardContent>
-
-                    <CardFooter v-if="customer.contacts.length > 0">
-                        <TooltipProvider :delay-duration="0">
-
-                            <Tooltip v-for="contact in customer.contacts">
+                    <div class="flex items-start">
+                        <TooltipProvider>
+                            <Tooltip v-if="customer.url">
                                 <TooltipTrigger>
-                                    <Avatar class="size-14 shadow -mr-2">
-                                        <AvatarImage v-if="contact.avatar" :src="'/storage/uploads/' + contact.avatar"
-                                            loading="lazy" />
-                                        <AvatarFallback
-                                            :class="bgColorForString(getInitials(contact.firstName + ' ' + contact.lastName))">
-                                            {{ getInitials(contact.firstName + ' ' + contact.lastName) }}
-                                        </AvatarFallback>
-                                    </Avatar>
+                                    <Button variant="ghost" size="sm"
+                                        @click="(event: Event) => browse(customer.url as string, event)">
+                                        <Globe stroke-width="1.5" />
+                                    </Button>
                                 </TooltipTrigger>
-                                <TooltipContent class="p-4 -mr-2" :side-offset="-1">
-                                    <p class="font-bold">
-                                        <span v-if="contact.academicTitle">{{ contact.academicTitle }}</span>
-                                        <span>{{ contact.firstName + ' ' + contact.lastName }}</span>
-                                    </p>
-                                    <p v-if="contact.jobTitle" class="text-muted-foreground">{{ contact.jobTitle }}</p>
-
-                                    <ButtonGroup class="mt-4">
-                                        <!-- E-mail -->
-                                        <Button size="sm" v-if="contact.email"
-                                            @click="(event: Event) => mail(contact.email as string, event)">
-                                            <Mail stroke-width="1.5" @click="" />
-                                        </Button>
-                                        <!-- Phone -->
-                                        <Button size="sm" v-if="contact.phone"
-                                            @click="(event: Event) => call(contact.phone as string, event)">
-                                            <Phone stroke-width="1.5" @click="" />
-                                        </Button>
-                                        <!-- Mobile phone -->
-                                        <Button size="sm" v-if="contact.mobilePhone"
-                                            @click="(event: Event) => call(contact.mobilePhone as string, event)">
-                                            <Smartphone stroke-width="1.5" @click="" />
-                                        </Button>
-                                        <!-- Online accounts -->
-                                        <Button size="sm" v-for="account in contact.onlineAccounts"
-                                            @click="(event: Event) => browse(account.url as string, event)">
-                                            <SocialIcon :variant="account.platform" />
-                                        </Button>
-                                    </ButtonGroup>
-                                    <TooltipArrow :height="8" :width="16"
-                                        class="fill-popover drop-shadow-(--shadow-arrow) stroke-[0.5px] stroke-border -mt-[1px]" />
+                                <TooltipContent>
+                                    {{ customer.url }} öffnen
+                                </TooltipContent>
+                            </Tooltip>
+                            <Tooltip v-if="customer.phone">
+                                <TooltipTrigger>
+                                    <Button variant="ghost" size="sm"
+                                        @click="(event: Event) => call(customer.phone as string, event)">
+                                        <Phone stroke-width="1.5" />
+                                    </Button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                    {{ customer.phone }} anrufen
+                                </TooltipContent>
+                            </Tooltip>
+                            <Tooltip v-if="customer.billingAddress">
+                                <TooltipTrigger>
+                                    <Button variant="ghost" size="sm"
+                                        @click="(event: Event) => addressToClipbard(customer.companyName, customer.billingAddress as Address | null, event)">
+                                        <House stroke-width="1.5" />
+                                    </Button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                    Adresse in Zwischenablage kopieren
                                 </TooltipContent>
                             </Tooltip>
-
                         </TooltipProvider>
-                    </CardFooter>
-                </Card>
+                    </div>
+                </CardContent>
 
-            </div>
+                <CardFooter v-if="customer.contacts.length > 0">
+                    <TooltipProvider :delay-duration="0">
 
-            <!-- Invoice detail dialog -->
-            <CustomerDialog :customerData="activeCustomer" v-model="detailDialogOpen" @save="" @delete="" />
+                        <Tooltip v-for="contact in customer.contacts">
+                            <TooltipTrigger>
+                                <Avatar class="size-14 shadow -mr-2">
+                                    <AvatarImage v-if="contact.avatar" :src="'/storage/uploads/' + contact.avatar"
+                                        loading="lazy" />
+                                    <AvatarFallback
+                                        :class="bgColorForString(getInitials(contact.firstName + ' ' + contact.lastName))">
+                                        {{ getInitials(contact.firstName + ' ' + contact.lastName) }}
+                                    </AvatarFallback>
+                                </Avatar>
+                            </TooltipTrigger>
+                            <TooltipContent class="p-4 -mr-2" :side-offset="-1">
+                                <p class="font-bold">
+                                    <span v-if="contact.academicTitle">{{ contact.academicTitle }}</span>
+                                    <span>{{ contact.firstName + ' ' + contact.lastName }}</span>
+                                </p>
+                                <p v-if="contact.jobTitle" class="text-muted-foreground">{{ contact.jobTitle }}</p>
 
+                                <ButtonGroup class="mt-4">
+                                    <!-- E-mail -->
+                                    <Button size="sm" v-if="contact.email"
+                                        @click="(event: Event) => mail(contact.email as string, event)">
+                                        <Mail stroke-width="1.5" @click="" />
+                                    </Button>
+                                    <!-- Phone -->
+                                    <Button size="sm" v-if="contact.phone"
+                                        @click="(event: Event) => call(contact.phone as string, event)">
+                                        <Phone stroke-width="1.5" @click="" />
+                                    </Button>
+                                    <!-- Mobile phone -->
+                                    <Button size="sm" v-if="contact.mobilePhone"
+                                        @click="(event: Event) => call(contact.mobilePhone as string, event)">
+                                        <Smartphone stroke-width="1.5" @click="" />
+                                    </Button>
+                                    <!-- Online accounts -->
+                                    <Button size="sm" v-for="account in contact.onlineAccounts"
+                                        @click="(event: Event) => browse(account.url as string, event)">
+                                        <SocialIcon :variant="account.platform" />
+                                    </Button>
+                                </ButtonGroup>
+                                <TooltipArrow :height="8" :width="16"
+                                    class="fill-popover drop-shadow-(--shadow-arrow) stroke-[0.5px] stroke-border -mt-[1px]" />
+                            </TooltipContent>
+                        </Tooltip>
+
+                    </TooltipProvider>
+                </CardFooter>
+            </Card>
 
         </div>
+
+        <!-- Invoice detail dialog -->
+        <CustomerDialog :customerData="activeCustomer" v-model="detailDialogOpen" @save="" @delete="" />
+
     </AppLayout>
 </template>
 
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index c2ffbac..8d0f15e 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -27,10 +27,8 @@ if (token) {
 
 <template>
 
-    <Head title="Dashboard" />
-
-    <AppLayout>
-        <div class="grid gap-12 md:grid-cols-2 h-full p-6 md:p-8">
+    <AppLayout title="Dashboard">
+        <div class="grid gap-12 md:grid-cols-2 h-full md:p-8">
 
             <div class="relative overflow-y-auto">
                 Geplante Aktivitäten
diff --git a/resources/js/pages/Invoices.vue b/resources/js/pages/Invoices.vue
index 85502c0..626e2a1 100644
--- a/resources/js/pages/Invoices.vue
+++ b/resources/js/pages/Invoices.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 
-import AppLayout from '@/layouts/AppLayout.vue'
-import { invoices } from '@/routes'
+import { computed, ref, onMounted, watch, defineProps, HTMLAttributes } from 'vue'
 import { type Invoice, type Customer, type Address } from '@/types'
 import { newInvoice } from '@/types/index.d'
-import { Head } from '@inertiajs/vue3'
-import { computed, ref, onMounted, watch } from 'vue'
-import axios, { Axios, AxiosError, AxiosResponse } from 'axios'
+import axios from 'axios'
+import AppLayout from '@/layouts/AppLayout.vue'
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from '@/components/ui/select'
 import { Button } from '@/components/ui/button'
 import DocumentTable from '@/components/documents/DocumentTable.vue'
@@ -15,11 +13,11 @@ import InvoiceDialog from '@/components/documents/InvoiceDialog.vue'
 import Fuse from 'fuse.js';
 import { Input } from '@/components/ui/input'
 import { toast } from 'vue-sonner'
-import { testToast } from '@/lib/utils'
 import SelectSeparator from '@/components/ui/select/SelectSeparator.vue'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { Kbd, KbdGroup } from '@/components/ui/kbd'
 import { statusBadgeLabels } from '@/components/ui/status-badge'
+import AppHeader from '@/components/AppHeader.vue'
 
 const invoicesData = ref([] as Invoice[])
 const activeInvoice = ref<Invoice | null>(null)
@@ -191,62 +189,54 @@ const deleteInvoice = async (id: number) => {
 
 <template>
 
-    <Head title="Rechnungen" />
-
+    
     <!-- Function Header -->
-    <AppLayout>
+    <AppLayout title="Rechnungen">
 
-        <div
-            class="flex h-full flex-1 flex-col gap-4 overflow-x-auto p-4 lg:p-8 lg:pl-4 print:bg-transparent print:p-0 print:m-0">
+        <AppHeader>
+            <!-- Year select -->
+            <template #left>
+                <Button variant="ghost" :disabled="selectedYearIndex >= (years.length - 1)"
+                    @click="selectedYearIndex++">
+                    <ChevronLeft />
+                </Button>
+                <Select size="sm" v-model="selectedYearIndex" v-if="years.length > 1">
+                    <SelectTrigger class="   hover:bg-accent">
+                        <SelectValue placeholder="Jahr" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectGroup>
+                            <SelectItem :value="null">
+                                <SelectLabel>Alle</SelectLabel>
+                            </SelectItem>
+                            <SelectSeparator />
+                            <SelectItem v-for="(year, index) in years" :value="index">
+                                <SelectLabel>{{ year }}</SelectLabel>
+                            </SelectItem>
+                        </SelectGroup>
+                    </SelectContent>
+                </Select>
+                <Button variant="ghost" @click="selectedYearIndex--" :disabled="selectedYearIndex <= 0">
+                    <ChevronRight />
+                </Button>
+            </template>
 
-            <div id="function-header" class="flex row justify-between items-center mb-4 gap-4">
-
-                <!-- Year select -->
-                <div class="flex row items-center">
-                    <Button :variant="'ghost'" :disabled="selectedYearIndex >= (years.length - 1)"
-                        @click="selectedYearIndex++">
-                        <ChevronLeft />
+            <!-- Search field -->
+            <template #middle>
+                <Input ref="search-field" id="search" type="text" placeholder="Filtern" class="px-8 bg-background"
+                    v-model="searchQuery" />
+                <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
+                    <Search class="size-4 text-muted-foreground" :stroke-width="1.5" />
+                </span>
+                <span class="absolute end-0 inset-y-0 flex items-center justify-center px-0 mr-1">
+                    <Button :size="'sm'" :variant="'ghost'" @click="searchQuery = ''; searchField.focus()">
+                        <Delete class="size-4 text-muted-foreground" :stroke-width="1.5" />
                     </Button>
-                    <Select :size="'sm'" v-model="selectedYearIndex" v-if="years.length > 1">
-                        <SelectTrigger class="   hover:bg-accent">
-                            <SelectValue placeholder="Jahr" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectItem :value="null">
-                                    <SelectLabel>Alle</SelectLabel>
-                                </SelectItem>
-                                <SelectSeparator />
-                                <SelectItem v-for="(year, index) in years" :value="index">
-                                    <SelectLabel>{{ year }}</SelectLabel>
-                                </SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
-                    <Button :variant="'ghost'" @click="selectedYearIndex--" :disabled="selectedYearIndex <= 0">
-                        <ChevronRight />
-                    </Button>
-                </div>
+                </span>
+            </template>
 
-                <!-- Search field -->
-                <div class="relative w-full max-w-sm items-center">
-                    <Input ref="search-field" id="search" type="text" placeholder="Filtern" class="px-8 bg-background"
-                        v-model="searchQuery" />
-                    <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
-                        <Search class="size-4 text-muted-foreground" :stroke-width="1.5" />
-                    </span>
-                    <span class="absolute end-0 inset-y-0 flex items-center justify-center px-0 mr-1">
-                        <Button :size="'sm'" :variant="'ghost'" @click="searchQuery = ''; searchField.focus()">
-                            <Delete class="size-4 text-muted-foreground" :stroke-width="1.5" />
-                        </Button>
-                    </span>
-                </div>
-
-                <!-- <Button size="sm" @click="testToast" class="mr-2">
-                Toast
-            </Button> -->
-
-                <!-- New button -->
+            <!-- New button -->
+            <template #right>
                 <TooltipProvider>
                     <Tooltip>
                         <TooltipTrigger>
@@ -265,18 +255,17 @@ const deleteInvoice = async (id: number) => {
                         </TooltipContent>
                     </Tooltip>
                 </TooltipProvider>
+            </template>
 
-            </div>
+        </AppHeader>
 
+        <!-- Invoice Table -->
+        <DocumentTable :invoices="filteredInvoices" :onItemClicked="showDetail" />
 
-            <!-- Invoice Table -->
-            <DocumentTable :invoices="filteredInvoices" :onItemClicked="showDetail" />
+        <!-- Invoice detail dialog -->
+        <InvoiceDialog :invoiceData="activeInvoice" :customers="customersData" v-model="detailDialogOpen"
+            @save="saveInvoice" @delete="deleteInvoice" />
 
-            <!-- Invoice detail dialog -->
-            <InvoiceDialog :invoiceData="activeInvoice" :customers="customersData" v-model="detailDialogOpen"
-                @save="saveInvoice" @delete="deleteInvoice" />
-
-        </div>
     </AppLayout>
 </template>
 
diff --git a/resources/js/pages/settings/Profile.vue b/resources/js/pages/settings/Profile.vue
index 00ac49a..8655fad 100644
--- a/resources/js/pages/settings/Profile.vue
+++ b/resources/js/pages/settings/Profile.vue
@@ -25,52 +25,34 @@ const user = page.props.auth.user;
 </script>
 
 <template>
-    <AppLayout>
-        <Head title="Profile settings" />
+    <AppLayout title="Profile settings">
 
         <SettingsLayout>
             <div class="flex flex-col space-y-6">
                 <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
-                            id="name"
-                            class="mt-1 block w-full"
-                            name="name"
-                            :default-value="user.name"
-                            required
-                            autocomplete="name"
-                            placeholder="Full name"
-                        />
+                        <Input id="name" class="mt-1 block w-full" name="name" :default-value="user.name" required
+                            autocomplete="name" placeholder="Full name" />
                         <InputError class="mt-2" :message="errors.name" />
                     </div>
 
                     <div class="grid gap-2">
                         <Label for="email">Email address</Label>
-                        <Input
-                            id="email"
-                            type="email"
-                            class="mt-1 block w-full"
-                            name="email"
-                            :default-value="user.email"
-                            required
-                            autocomplete="username"
-                            placeholder="Email address"
-                        />
+                        <Input id="email" type="email" class="mt-1 block w-full" name="email"
+                            :default-value="user.email" required autocomplete="username" placeholder="Email address" />
                         <InputError class="mt-2" :message="errors.email" />
                     </div>
 
                     <div v-if="mustVerifyEmail && !user.email_verified_at">
                         <p class="-mt-4 text-sm text-muted-foreground">
                             Your email address is unverified.
-                            <Link
-                                :href="send()"
-                                as="button"
-                                class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
-                            >
-                                Click here to resend the verification email.
+                            <Link :href="send()" as="button"
+                                class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500">
+                            Click here to resend the verification email.
                             </Link>
                         </p>
 
@@ -81,28 +63,17 @@ const user = page.props.auth.user;
 
                     <div class="grid gap-2">
                         <Label for="avatar">Avatar</Label>
-                        <Input
-                            id="avatar"
-                            type="avatar"
-                            class="mt-1 block w-full"
-                            name="avatar"
-                            :default-value="user.avatar"
-                            required
-                            autocomplete="username"
-                            placeholder="avatar address"
-                        />
+                        <Input id="avatar" type="avatar" class="mt-1 block w-full" name="avatar"
+                            :default-value="user.avatar" required autocomplete="username"
+                            placeholder="avatar address" />
                         <InputError class="mt-2" :message="errors.email" />
                     </div>
 
                     <div class="flex items-center gap-4">
                         <Button :disabled="processing" data-test="update-profile-button">Save</Button>
 
-                        <Transition
-                            enter-active-class="transition ease-in-out"
-                            enter-from-class="opacity-0"
-                            leave-active-class="transition ease-in-out"
-                            leave-to-class="opacity-0"
-                        >
+                        <Transition enter-active-class="transition ease-in-out" enter-from-class="opacity-0"
+                            leave-active-class="transition ease-in-out" leave-to-class="opacity-0">
                             <p v-show="recentlySuccessful" class="text-sm text-neutral-600">Saved.</p>
                         </Transition>
                     </div>