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-4: hsl(43 74% 66%);
--chart-5: hsl(27 87% 67%); --chart-5: hsl(27 87% 67%);
--radius: 0.5rem; --radius: 0.5rem;
--sidebar-background: var(--color-slate-200); --sidebar-background: var(--color-slate-300);
--sidebar-foreground: hsl(240 5.3% 26.1%); --sidebar-foreground: hsl(240 5.3% 26.1%);
--sidebar-primary: hsl(0 0% 10%); --sidebar-primary: hsl(0 0% 10%);
--sidebar-primary-foreground: hsl(0 0% 98%); --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"> <div class="flex aspect-square size-8 items-center justify-center">
<AppLogoIcon /> <AppLogoIcon />
</div> </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> </template>
resources/js/components/AppSidebar.vue
+26 -7
View File
@@ -1,8 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import NavFooter from '@/components/NavFooter.vue'; import NavFooter from '@/components/NavFooter.vue';
import NavMain from '@/components/NavMain.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 { 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 { edit } from '@/routes/profile';
import { type NavItem, type NavGroup } from '@/types'; import { type NavItem, type NavGroup } from '@/types';
import { Link } from '@inertiajs/vue3'; import { Link } from '@inertiajs/vue3';
@@ -35,7 +37,7 @@ const mainNavGroups: NavGroup[] = [
title: 'Erfolge', title: 'Erfolge',
href: achievements(), href: achievements(),
icon: Trophy, icon: Trophy,
color: 'text-yellow-500', color: 'text-amber-500',
}, },
], ],
}, },
@@ -46,7 +48,7 @@ const mainNavGroups: NavGroup[] = [
title: 'Angebote', title: 'Angebote',
href: offers(), href: offers(),
icon: Calculator, icon: Calculator,
color: 'text-cyan-500', color: 'text-cyan-600',
}, },
{ {
title: 'Rechnungen', title: 'Rechnungen',
@@ -58,7 +60,7 @@ const mainNavGroups: NavGroup[] = [
title: 'Zeiterfassung', title: 'Zeiterfassung',
href: timesheets(), href: timesheets(),
icon: Timer, icon: Timer,
color: 'text-green-500', color: 'text-lime-600',
}, },
], ],
} }
@@ -69,7 +71,7 @@ const footerNavItems: NavItem[] = [
title: 'Einstellungen', title: 'Einstellungen',
href: edit(), href: edit(),
icon: Settings, icon: Settings,
color: 'text-gray-400', color: 'text-gray-500',
} }
]; ];
</script> </script>
@@ -78,9 +80,26 @@ const footerNavItems: NavItem[] = [
<Sidebar collapsible="icon" variant="inset"> <Sidebar collapsible="icon" variant="inset">
<SidebarHeader> <SidebarHeader>
<Link :href="dashboard()" class="flex row items-center gap-1 h-12 mb-4"> <Link :href="dashboard()" class="flex row items-center">
<AppLogo /> <AppLogo />
</Link> </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> </SidebarHeader>
<SidebarContent> <SidebarContent>
resources/js/components/AppSidebarHeader.vue
+4 -1
View File
@@ -15,11 +15,14 @@ withDefaults(
</script> </script>
<template> <template>
<header <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"> <div class="flex items-center gap-2">
<SidebarTrigger class="-ml-1 text-primary-foreground" /> <SidebarTrigger class="-ml-1 text-primary-foreground" />
<template v-if="breadcrumbs && breadcrumbs.length > 0"> <template v-if="breadcrumbs && breadcrumbs.length > 0">
<Breadcrumbs :breadcrumbs="breadcrumbs" /> <Breadcrumbs :breadcrumbs="breadcrumbs" />
</template> </template>
resources/js/components/NavFooter.vue
+1 -5
View File
@@ -20,12 +20,8 @@ defineProps<Props>();
<SidebarMenuButton <SidebarMenuButton
class="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100" class="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
as-child> 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"> <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> <span>{{ item.title }}</span>
</Link> </Link>
</SidebarMenuButton> </SidebarMenuButton>
resources/js/components/NavMain.vue
+2 -2
View File
@@ -21,7 +21,7 @@ const page = usePage();
<SidebarMenuItem :key="'dashboard'"> <SidebarMenuItem :key="'dashboard'">
<SidebarMenuButton as-child :is-active="urlIsActive(dashboard(), page.url)" :tooltip="'Dashboard'"> <SidebarMenuButton as-child :is-active="urlIsActive(dashboard(), page.url)" :tooltip="'Dashboard'">
<Link :href="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> <span>Dashboard</span>
</Link> </Link>
</SidebarMenuButton> </SidebarMenuButton>
@@ -37,7 +37,7 @@ const page = usePage();
<SidebarMenuItem v-for="item in group.items" :key="item.title"> <SidebarMenuItem v-for="item in group.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"> <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> <span>{{ item.title }}</span>
</Link> </Link>
</SidebarMenuButton> </SidebarMenuButton>
resources/js/components/documents/DocumentTable.vue
+28 -19
View File
@@ -106,7 +106,7 @@ const calcTaxes = (amount: number) => {
<template> <template>
<Table class="relative document-table"> <Table class="relative document-table">
<TableHeader> <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/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 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 <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 text-right lg:hidden">Rechnung</TableHead>
<TableHead class="sticky top-0 w-1/5 hidden lg:table-cell">Kunde</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 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/20 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/20 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 hidden lg:table-cell">Brutto</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody class="overflow-clip rounded-lg">
<TableRow v-for="invoice in invoices" :key="invoice.nr" @click="onItemClicked(invoice)" <TableRow v-for="invoice in invoices" :key="invoice.nr" @click="onItemClicked(invoice)"
class="select-none md:select-auto cursor-default bg-background" class="select-none md:select-auto cursor-default bg-background"
:style="'color:' + statusBadgeTextColor(invoice.paymentStatus)"> :style="'color:' + statusBadgeTextColor(invoice.paymentStatus)">
@@ -156,46 +156,55 @@ const calcTaxes = (amount: number) => {
<TableFooter> <TableFooter>
<!-- Summe --> <!-- Summe -->
<TableRow <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="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 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">{{ 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">{{ <TableCell class="py-4 text-right tabular-nums hidden lg:table-cell font-bold">{{
toCurrency(totalGross) }}</TableCell> toCurrency(totalGross) }}</TableCell>
</TableRow> </TableRow>
<!-- Bezahlt --> <!-- Bezahlt -->
<TableRow v-if="!(totalDue == 0 && totalNotIssued == 0)" <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="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=" w-1/100 text-right tabular-nums font-bold">Bezahlt</TableCell>
<TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalPaid) }}</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 class=" text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxPaid) }}
</TableCell> </TableCell>
<TableCell class=" text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossPaid) <TableCell class=" text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossPaid)
}}</TableCell> }}</TableCell>
</TableRow> </TableRow>
<TableRow v-if="totalDue > 0" <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="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="text-right tabular-nums w-1/100 font-bold">Offen</TableCell>
<TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalDue) }}</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">{{ toCurrency(totalTaxDue) }}
<TableCell class="text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossDue) }}</TableCell> </TableCell>
<TableCell class="text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossDue)
}}</TableCell>
</TableRow> </TableRow>
<TableRow v-if="totalNotIssued > 0" <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="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="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="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">{{ toCurrency(totalTaxNotIssued) }}
<TableCell class="text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossNotIssued) }}</TableCell> </TableCell>
<TableCell class="text-right tabular-nums hidden lg:table-cell font-bold">{{
toCurrency(totalGrossNotIssued) }}</TableCell>
</TableRow> </TableRow>
</TableFooter> </TableFooter>
resources/js/layouts/app/AppSidebarLayout.vue
+1 -1
View File
@@ -17,7 +17,7 @@ withDefaults(defineProps<Props>(), {
<template> <template>
<AppShell variant="sidebar"> <AppShell variant="sidebar">
<AppSidebar /> <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" /> <AppSidebarHeader :breadcrumbs="breadcrumbs" />
<slot /> <slot />
</AppContent> </AppContent>
resources/js/layouts/auth/AuthSplitLayout.vue
+1 -1
View File
@@ -16,7 +16,7 @@ defineProps<{
<template> <template>
<div <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"> 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" /> <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() const searchField = ref()
onMounted(async () => { onMounted(async () => {
const invoiceResponse = await axios.get('/api/invoices') const invoiceResponse = await axios.get('/api/invoices')
invoicesData.value = invoiceResponse.data as Invoice[] invoicesData.value = invoiceResponse.data as Invoice[]
const customerResponse = await axios.get('/api/customers') const customerResponse = await axios.get('/api/customers')
customersData.value = customerResponse.data as Customer[] customersData.value = customerResponse.data as Customer[]
@@ -251,10 +251,10 @@ const testToast = () => {
<AppLayout :breadcrumbs="breadcrumbs"> <AppLayout :breadcrumbs="breadcrumbs">
<div <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 --> <!-- 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 --> <!-- Year select -->
<div class="flex row items-center"> <div class="flex row items-center">
@@ -281,7 +281,9 @@ const testToast = () => {
<Button :variant="'ghost'" @click="selectedYearIndex--" :disabled="selectedYearIndex <= 0"> <Button :variant="'ghost'" @click="selectedYearIndex--" :disabled="selectedYearIndex <= 0">
<ChevronRight /> <ChevronRight />
</Button> </Button>
</div <!-- Search field --> </div>
<!-- Search field -->
<div class="relative w-full max-w-sm items-center"> <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" <Input ref="search-field" id="search" type="text" placeholder="Filtern" class="px-8 bg-background"
v-model="searchQuery" /> v-model="searchQuery" />
@@ -308,11 +310,12 @@ const testToast = () => {
<!-- Invoice Table --> <!-- Invoice Table -->
<DocumentTable :invoices="filteredInvoices" :onItemClicked="showDetail" /> <DocumentTable :invoices="filteredInvoices" :onItemClicked="showDetail" />
<!-- Invoice detail dialog --> <!-- Invoice detail dialog -->
<InvoiceDialog :invoiceData="activeInvoice" :customers="customersData" v-model="detailDialogOpen" <InvoiceDialog :invoiceData="activeInvoice" :customers="customersData" v-model="detailDialogOpen"
@save="saveInvoice" @delete="deleteInvoice" /> @save="saveInvoice" @delete="deleteInvoice" />
</div>
</div>
</AppLayout> </AppLayout>
</template> </template>