Tooloop/Caramel-CRM
2
0
Fork 0
Code Issues 61 Pull Requests Projects 3 Releases Wiki Activity

Make background darker so tables are more clearly readable. Try some things with the header bar

Browse Source
This commit is contained in:
Daniel Stock
2025-10-22 11:58:58 +02:00
parent c946dfe626
commit 25467be584
10 changed files with 76 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+1 -1
View File
@@ -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%);
resources/js/components/AppLogo.vue
+3 -1
View File
@@ -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>
resources/js/components/AppSidebar.vue
+26 -7
View File
@@ -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>
resources/js/components/AppSidebarHeader.vue
+4 -1
View File
@@ -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>
resources/js/components/NavFooter.vue
+1 -5
View File
@@ -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>
resources/js/components/NavMain.vue
+2 -2
View File
@@ -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>
resources/js/components/documents/DocumentTable.vue
+28 -19
View File
@@ -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>
resources/js/layouts/app/AppSidebarLayout.vue
+1 -1
View File
@@ -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>
resources/js/layouts/auth/AuthSplitLayout.vue
+1 -1
View File
@@ -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" />
resources/js/pages/Invoices.vue
+9 -6
View File
@@ -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>