From 92c1b4d44131b6dcb62352b7908f77f5267d5c2a Mon Sep 17 00:00:00 2001
From: Daniel Stock <daniel.stock@tooloop.de>
Date: Wed, 22 Oct 2025 11:58:58 +0200
Subject: [PATCH] Make background darker so tables are more clearly readable.
 Try some things with the header bar

---
 resources/css/app.css                         |  2 +-
 resources/js/components/AppLogo.vue           |  4 +-
 resources/js/components/AppSidebar.vue        | 33 ++++++++++---
 resources/js/components/AppSidebarHeader.vue  |  5 +-
 resources/js/components/NavFooter.vue         |  6 +--
 resources/js/components/NavMain.vue           |  4 +-
 .../js/components/documents/DocumentTable.vue | 47 +++++++++++--------
 resources/js/layouts/app/AppSidebarLayout.vue |  2 +-
 resources/js/layouts/auth/AuthSplitLayout.vue |  2 +-
 resources/js/pages/Invoices.vue               | 15 +++---
 10 files changed, 76 insertions(+), 44 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index eb0b7cf..89d9e89 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -124,7 +124,7 @@ :root {
     --chart-4: hsl(43 74% 66%);
     --chart-5: hsl(27 87% 67%);
     --radius: 0.5rem;
-    --sidebar-background: var(--color-slate-200);
+    --sidebar-background: var(--color-slate-300);
     --sidebar-foreground: hsl(240 5.3% 26.1%);
     --sidebar-primary: hsl(0 0% 10%);
     --sidebar-primary-foreground: hsl(0 0% 98%);
diff --git a/resources/js/components/AppLogo.vue b/resources/js/components/AppLogo.vue
index 2d53cd1..fef05e0 100644
--- a/resources/js/components/AppLogo.vue
+++ b/resources/js/components/AppLogo.vue
@@ -6,5 +6,7 @@ import AppLogoIcon from '@/components/AppLogoIcon.vue';
     <div class="flex aspect-square size-8 items-center justify-center">
         <AppLogoIcon />
     </div>
-    <span class="font-bold text-zinc-600 dark:text-zinc-400  text-sm whitespace-nowrap overflow-hidden group-data-[collapsible=icon]:opacity-0 transition-[opacity]">Caramal CRM</span>
+    <span
+        class="font-bold text-zinc-600 dark:text-zinc-400 text-sm whitespace-nowrap overflow-hidden group-data-[collapsible=icon]:opacity-0 transition-[opacity]">Caramal
+        CRM</span>
 </template>
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index bae7e8e..8f5951d 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import NavFooter from '@/components/NavFooter.vue';
 import NavMain from '@/components/NavMain.vue';
-import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarTrigger } from '@/components/ui/sidebar';
 import { dashboard, crm, offers, invoices, timesheets, customers, leads, achievements } from '@/routes';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { Kbd } from '@/components/ui/kbd'
 import { edit } from '@/routes/profile';
 import { type NavItem, type NavGroup } from '@/types';
 import { Link } from '@inertiajs/vue3';
@@ -35,7 +37,7 @@ const mainNavGroups: NavGroup[] = [
                 title: 'Erfolge',
                 href: achievements(),
                 icon: Trophy,
-                color: 'text-yellow-500',
+                color: 'text-amber-500',
             },
         ],
     },
@@ -46,7 +48,7 @@ const mainNavGroups: NavGroup[] = [
                 title: 'Angebote',
                 href: offers(),
                 icon: Calculator,
-                color: 'text-cyan-500',
+                color: 'text-cyan-600',
             },
             {
                 title: 'Rechnungen',
@@ -58,7 +60,7 @@ const mainNavGroups: NavGroup[] = [
                 title: 'Zeiterfassung',
                 href: timesheets(),
                 icon: Timer,
-                color: 'text-green-500',
+                color: 'text-lime-600',
             },
         ],
     }
@@ -69,7 +71,7 @@ const footerNavItems: NavItem[] = [
         title: 'Einstellungen',
         href: edit(),
         icon: Settings,
-        color: 'text-gray-400',
+        color: 'text-gray-500',
     }
 ];
 </script>
@@ -78,9 +80,26 @@ const footerNavItems: NavItem[] = [
     <Sidebar collapsible="icon" variant="inset">
 
         <SidebarHeader>
-            <Link :href="dashboard()" class="flex row items-center gap-1 h-12 mb-4">
-            <AppLogo />
+            <Link :href="dashboard()" class="flex row items-center">
+                <AppLogo />
             </Link>
+
+            <TooltipProvider>
+                <Tooltip :delay-duration="666">
+                    <TooltipTrigger class="w-fit absolute -right-0">
+                        <SidebarTrigger class="hidden md:flex text-primary-foreground" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                        <p>Seitenleiste schließen
+                            <KbdGroup>
+                                <Kbd>Ctrl</Kbd>
+                                <span>+</span>
+                                <Kbd>B</Kbd>
+                            </KbdGroup>
+                        </p>
+                    </TooltipContent>
+                </Tooltip>
+            </TooltipProvider>
         </SidebarHeader>
 
         <SidebarContent>
diff --git a/resources/js/components/AppSidebarHeader.vue b/resources/js/components/AppSidebarHeader.vue
index e79aa10..4152a24 100644
--- a/resources/js/components/AppSidebarHeader.vue
+++ b/resources/js/components/AppSidebarHeader.vue
@@ -15,11 +15,14 @@ withDefaults(
 </script>
 
 <template>
+    
     <header
-        class="flex justify-between h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-6 transition-[width,height] ease-linear md:px-4 z-10">
+        class="flex md:hidden bg-background justify-between shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-4 transition-[width,height] ease-linear z-10">
+        
 
         <div class="flex items-center gap-2">
             <SidebarTrigger class="-ml-1 text-primary-foreground" />
+            
             <template v-if="breadcrumbs && breadcrumbs.length > 0">
                 <Breadcrumbs :breadcrumbs="breadcrumbs" />
             </template>
diff --git a/resources/js/components/NavFooter.vue b/resources/js/components/NavFooter.vue
index ec96540..bb0f0ff 100644
--- a/resources/js/components/NavFooter.vue
+++ b/resources/js/components/NavFooter.vue
@@ -20,12 +20,8 @@ defineProps<Props>();
                     <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> -->
                         <Link :href="item.href">
-                        <component :is="item.icon" :class="item.color" />
+                        <component :is="item.icon" :class="item.color" stroke-width="1.5" />
                         <span>{{ item.title }}</span>
                         </Link>
                     </SidebarMenuButton>
diff --git a/resources/js/components/NavMain.vue b/resources/js/components/NavMain.vue
index fc5af74..9d20239 100644
--- a/resources/js/components/NavMain.vue
+++ b/resources/js/components/NavMain.vue
@@ -21,7 +21,7 @@ const page = usePage();
         <SidebarMenuItem :key="'dashboard'">
             <SidebarMenuButton as-child :is-active="urlIsActive(dashboard(), page.url)" :tooltip="'Dashboard'">
                 <Link :href="dashboard()">
-                <component :is="LayoutGrid" class="text-gray-400" />
+                <component :is="LayoutGrid" class="text-gray-500" stroke-width="1.5" />
                 <span>Dashboard</span>
                 </Link>
             </SidebarMenuButton>
@@ -37,7 +37,7 @@ const page = usePage();
             <SidebarMenuItem v-for="item in group.items" :key="item.title">
                 <SidebarMenuButton as-child :is-active="urlIsActive(item.href, page.url)" :tooltip="item.title">
                     <Link :href="item.href">
-                    <component :is="item.icon" :class="item.color" />
+                    <component :is="item.icon" :class="item.color" stroke-width="1.5" />
                     <span>{{ item.title }}</span>
                     </Link>
                 </SidebarMenuButton>
diff --git a/resources/js/components/documents/DocumentTable.vue b/resources/js/components/documents/DocumentTable.vue
index 47b5fbe..22bc246 100644
--- a/resources/js/components/documents/DocumentTable.vue
+++ b/resources/js/components/documents/DocumentTable.vue
@@ -106,7 +106,7 @@ const calcTaxes = (amount: number) => {
 <template>
     <Table class="relative document-table">
         <TableHeader>
-            <TableRow class="hover:bg-transparent">
+            <TableRow class="hover:bg-transparent border-none">
                 <TableHead class="sticky top-0 w-1/100 lg:w-1/100 hidden md:table-cell">Nr.</TableHead>
                 <TableHead class="sticky top-0 w-1/100 lg:w-1/20 text-center">Status</TableHead>
                 <TableHead class="sticky top-0 w-1/100 lg:w-1/20 lg:px-5 text-right hidden md:table-cell">Gestellt
@@ -114,12 +114,12 @@ const calcTaxes = (amount: number) => {
                 <TableHead class="sticky top-0 w-1/5 text-right lg:hidden">Rechnung</TableHead>
                 <TableHead class="sticky top-0 w-1/5 hidden lg:table-cell">Kunde</TableHead>
                 <TableHead colspan="2" class="sticky top-0 w-1/3 hidden lg:table-cell">Betreff</TableHead>
-                <TableHead class="sticky top-0 w-1/15 text-right">Netto</TableHead>
-                <TableHead class="sticky top-0 w-1/15 text-right hidden lg:table-cell">Ust.</TableHead>
-                <TableHead class="sticky top-0 w-1/15 text-right hidden lg:table-cell">Brutto</TableHead>
+                <TableHead class="sticky top-0 w-1/20 text-right">Netto</TableHead>
+                <TableHead class="sticky top-0 w-1/20 text-right hidden lg:table-cell">Ust.</TableHead>
+                <TableHead class="sticky top-0 w-1/20 text-right hidden lg:table-cell">Brutto</TableHead>
             </TableRow>
         </TableHeader>
-        <TableBody>
+        <TableBody class="overflow-clip rounded-lg">
             <TableRow v-for="invoice in invoices" :key="invoice.nr" @click="onItemClicked(invoice)"
                 class="select-none md:select-auto cursor-default bg-background"
                 :style="'color:' + statusBadgeTextColor(invoice.paymentStatus)">
@@ -156,46 +156,55 @@ const calcTaxes = (amount: number) => {
         <TableFooter>
             <!-- Summe -->
             <TableRow
-                class="border-none bg-slate-50 dark:bg-neutral-900/60 hover:bg-slate-50  dark:hover:bg-neutral-900/60">
+                class="border-none bg-slate-200 dark:bg-neutral-900/60 hover:bg-slate-200 dark:hover:bg-neutral-900/60">
                 <TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
-                <TableCell colspan="3"></TableCell>
+                <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
+                <TableCell colspan="1"></TableCell>
                 <TableCell class="py-4 text-right tabular-nums w-1/100 font-bold">Summe</TableCell>
                 <TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalAmount) }}</TableCell>
-                <TableCell class="py-4 text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTax) }}</TableCell>
+                <TableCell class="py-4 text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTax) }}
+                </TableCell>
                 <TableCell class="py-4 text-right tabular-nums hidden lg:table-cell font-bold">{{
                     toCurrency(totalGross) }}</TableCell>
             </TableRow>
             <!-- Bezahlt -->
             <TableRow v-if="!(totalDue == 0 && totalNotIssued == 0)"
-                class="border-none bg-slate-50 dark:bg-neutral-900/60 hover:bg-slate-50  dark:hover:bg-neutral-900/60">
+                class="border-none bg-slate-200 dark:bg-neutral-900/60 hover:bg-slate-200 dark:hover:bg-neutral-900/60">
                 <TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
-                <TableCell colspan="3"></TableCell>
+                <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
+                <TableCell colspan="1"></TableCell>
                 <TableCell class=" w-1/100 text-right tabular-nums font-bold">Bezahlt</TableCell>
                 <TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalPaid) }}</TableCell>
                 <TableCell class=" text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxPaid) }}
                 </TableCell>
                 <TableCell class=" text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossPaid)
-                    }}</TableCell>
+                }}</TableCell>
             </TableRow>
 
             <TableRow v-if="totalDue > 0"
-                class="border-none bg-slate-50 dark:bg-neutral-900/60 hover:bg-slate-50  dark:hover:bg-neutral-900/60 text-destructive">
+                class="border-none bg-slate-200 dark:bg-neutral-900/60 hover:bg-slate-200 dark:hover:bg-neutral-900/60 text-destructive">
                 <TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
-                <TableCell colspan="3"></TableCell>
+                <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
+                <TableCell colspan="1"></TableCell>
                 <TableCell class="text-right tabular-nums w-1/100 font-bold">Offen</TableCell>
                 <TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalDue) }}</TableCell>
-                <TableCell class="text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxDue) }}</TableCell>
-                <TableCell class="text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossDue) }}</TableCell>
+                <TableCell class="text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxDue) }}
+                </TableCell>
+                <TableCell class="text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossDue)
+                    }}</TableCell>
             </TableRow>
 
             <TableRow v-if="totalNotIssued > 0"
-                class="border-none bg-slate-50 dark:bg-neutral-900/60 hover:bg-slate-50  dark:hover:bg-neutral-900/60 text-muted-foreground">
+                class="border-none bg-slate-200 dark:bg-neutral-900/60 hover:bg-slate-200 dark:hover:bg-neutral-900/60 text-muted-foreground">
                 <TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
-                <TableCell colspan="3"></TableCell>
+                <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
+                <TableCell colspan="1"></TableCell>
                 <TableCell class="text-right tabular-nums w-1/100 font-bold">Nicht gestellt</TableCell>
                 <TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalNotIssued) }}</TableCell>
-                <TableCell class="text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxNotIssued) }}</TableCell>
-                <TableCell class="text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossNotIssued) }}</TableCell>
+                <TableCell class="text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxNotIssued) }}
+                </TableCell>
+                <TableCell class="text-right tabular-nums hidden lg:table-cell font-bold">{{
+                    toCurrency(totalGrossNotIssued) }}</TableCell>
             </TableRow>
 
         </TableFooter>
diff --git a/resources/js/layouts/app/AppSidebarLayout.vue b/resources/js/layouts/app/AppSidebarLayout.vue
index 9f4d786..fe57fbe 100644
--- a/resources/js/layouts/app/AppSidebarLayout.vue
+++ b/resources/js/layouts/app/AppSidebarLayout.vue
@@ -17,7 +17,7 @@ withDefaults(defineProps<Props>(), {
 <template>
     <AppShell variant="sidebar">
         <AppSidebar />
-        <AppContent variant="sidebar" class="overflow-x-hidden">
+        <AppContent variant="sidebar" class="overflow-x-hidden bg-slate-200 dark:bg-neutral-900/40">
             <AppSidebarHeader :breadcrumbs="breadcrumbs" />
             <slot />
         </AppContent>
diff --git a/resources/js/layouts/auth/AuthSplitLayout.vue b/resources/js/layouts/auth/AuthSplitLayout.vue
index 8bc6c0d..7a8f506 100644
--- a/resources/js/layouts/auth/AuthSplitLayout.vue
+++ b/resources/js/layouts/auth/AuthSplitLayout.vue
@@ -16,7 +16,7 @@ defineProps<{
 <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 bg-yellow-950">
-        <div class="relative hidden h-full flex-col bg-muted p-20 lg:flex dark:border-r">
+        <div class="relative hidden h-full flex-col bg-muted p-20 lg:flex">
 
             <div class="absolute inset-0 bg-amber-500 foreground" />
 
diff --git a/resources/js/pages/Invoices.vue b/resources/js/pages/Invoices.vue
index b08ebbb..5bb2566 100644
--- a/resources/js/pages/Invoices.vue
+++ b/resources/js/pages/Invoices.vue
@@ -32,8 +32,8 @@ const searchQuery = ref('')
 const searchField = ref()
 
 onMounted(async () => {
-        const invoiceResponse = await axios.get('/api/invoices')
-        invoicesData.value = invoiceResponse.data as Invoice[]
+    const invoiceResponse = await axios.get('/api/invoices')
+    invoicesData.value = invoiceResponse.data as Invoice[]
 
     const customerResponse = await axios.get('/api/customers')
     customersData.value = customerResponse.data as Customer[]
@@ -251,10 +251,10 @@ const testToast = () => {
 
     <AppLayout :breadcrumbs="breadcrumbs">
         <div
-            class="flex h-full flex-1 flex-col gap-4 overflow-x-auto p-4 p-4 bg-slate-50 dark:bg-neutral-900/40 print:bg-transparent print:p-0 print:m-0">
+            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 gap-8">
+            <div id="function-header" class="flex row justify-between items-center gap-8 mb-4">
 
                 <!-- Year select -->
                 <div class="flex row items-center">
@@ -281,7 +281,9 @@ const testToast = () => {
                     <Button :variant="'ghost'" @click="selectedYearIndex--" :disabled="selectedYearIndex <= 0">
                         <ChevronRight />
                     </Button>
-                </div <!-- Search field -->
+                </div>
+
+                <!-- 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" />
@@ -308,11 +310,12 @@ const testToast = () => {
 
             <!-- Invoice Table -->
             <DocumentTable :invoices="filteredInvoices" :onItemClicked="showDetail" />
+
             <!-- Invoice detail dialog -->
             <InvoiceDialog :invoiceData="activeInvoice" :customers="customersData" v-model="detailDialogOpen"
                 @save="saveInvoice" @delete="deleteInvoice" />
-        </div>
 
+        </div>
     </AppLayout>
 </template>