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

Overall design work

Browse Source
This commit is contained in:
Daniel Stock
2025-11-11 11:49:38 +01:00
parent 2f9397abea
commit 63202b0845
12 changed files with 101 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+26 -10
View File
@@ -64,7 +64,19 @@ @theme inline {
--color-status-due: var(--status-due);
--color-status-reminded: var(--status-reminded);
--text-xs: 0.694rem;
--color-main: var(--main-background);
/*
https://typescale.com/
Major Third
*/
--text-xs: 0.64rem;
--text-sm: 0.8rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.563rem;
--text-2xl: 1.953rem;
--text-3xl: 2.441rem;
--shadow-arrow: 0 2px 1px rgb(0 0 0 / 0.1)
}
@@ -105,15 +117,16 @@ :root {
--foreground: hsl(0 0% 3.9%);
--card: hsl(0 0% 100%);
--card-foreground: hsl(0 0% 3.9%);
--popover: hsl(0 0% 100%);
--popover-foreground: hsl(0 0% 3.9%);
--popover: var(--color-background);
--popover-foreground: var(--color-gray-900);
--primary: var(--color-orange-200);
--primary-foreground: var(--color-orange-600);
--secondary: hsl(0 0% 92.1%);
--secondary-foreground: hsl(0 0% 9%);
--muted: var(--color-slate-50);
--muted-foreground: var(--color-slate-400);
--accent: var(--color-slate-50);
--muted: var(--color-gray-50);
--muted-foreground: var(--color-gray-400);
--accent: var(--color-gray-50);
--accent-foreground: hsl(0 0% 9%);
--destructive: var(--color-red-500);
--destructive-foreground: hsl(0 0% 98%);
@@ -121,25 +134,27 @@ :root {
--input: var(--color-zinc-100);
--ring: hsl(0 0% 3.9%);
--chart-1: hsl(12 76% 61%);
--chart-2: hsl(173 58% 39%);
--chart-2: hsl(313, 58%, 39%);
--chart-3: hsl(197 37% 24%);
--chart-4: hsl(43 74% 66%);
--chart-5: hsl(27 87% 67%);
--radius: 0.5rem;
--sidebar-background: var(--color-slate-300);
--main-background: transparent;
--sidebar-background: var(--color-slate-100);
--sidebar-foreground: hsl(240 5.3% 26.1%);
--sidebar-primary: hsl(0 0% 10%);
--sidebar-primary-foreground: hsl(0 0% 98%);
--sidebar-accent: var(--color-slate-100);
--sidebar-accent: var(--color-white);
--sidebar-accent-foreground: hsl(0 0% 30%);
--sidebar-border: var(--color-slate-300);
--sidebar-border: var(--color-gray-300);
--sidebar-ring: hsl(217.2 91.2% 59.8%);
--sidebar: hsl(0 0% 98%);
--status-draft: var(--color-slate-100);
--status-draft: var(--color-gray-100);
--status-sent: var(--color-sky-400);
--status-paid: var(--color-lime-500);
--status-due: var(--color-amber-300);
--status-reminded: var(--color-destructive);
}
.dark {
@@ -168,6 +183,7 @@ .dark {
--chart-3: hsl(30 80% 55%);
--chart-4: hsl(280 65% 60%);
--chart-5: hsl(340 75% 55%);
--main-background: transparent;
--sidebar-background: var(--color-neutral-700);
--sidebar-foreground: hsl(0 0% 95.9%);
--sidebar-primary: hsl(360, 100%, 100%);
resources/js/components/AppSidebar.vue
+1 -1
View File
@@ -83,7 +83,7 @@ const footerNavItems: NavItem[] = [
</script>
<template>
<Sidebar collapsible="icon" variant="inset">
<Sidebar collapsible="icon" variant="sidebar">
<SidebarHeader>
<Link :href="dashboard()" class="flex row items-center mt-6">
resources/js/components/documents/DocumentTable.vue
+39 -31
View File
@@ -3,7 +3,7 @@
import { computed } from 'vue'
import { type Invoice } from '@/types'
import { toLocalDate, toCurrency, toFixedRounded } from '@/lib/utils'
import { StatusBadge, statusBadgeLabels, statusBadgeTextColor, castToStatusVariant } from '@/components/ui/status-badge'
import { StatusBadge, statusBadgeLabels, statusTextStyle, castToStatusVariant } from '@/components/ui/status-badge'
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'
@@ -104,27 +104,27 @@ const calcTaxes = (amount: number) => {
<template>
<Table class="relative document-table">
<Table class="relative document-table bg-none">
<TableHeader>
<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
<TableHead class="w-1/100 lg:w-1/100 hidden md:table-cell lg:pl-4 lg:pr-5">Nr.</TableHead>
<TableHead class="w-1/100 lg:w-1/20 text-center">Status</TableHead>
<TableHead class="w-1/100 lg:w-1/20 lg:px-5 text-right hidden md:table-cell">Gestellt
</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 colspan="2" class="sticky top-0 w-1/3 hidden lg:table-cell">Betreff</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>
<TableHead class="w-1/5 text-right lg:hidden">Rechnung</TableHead>
<TableHead class="w-1/5 hidden lg:table-cell">Kunde</TableHead>
<TableHead colspan="2" class="w-1/3 hidden lg:table-cell">Betreff</TableHead>
<TableHead class="w-1/20 text-right">Netto</TableHead>
<TableHead class="w-1/20 text-right hidden lg:table-cell">Ust.</TableHead>
<TableHead class="w-1/20 text-right hidden lg:table-cell lg:pr-4">Brutto</TableHead>
</TableRow>
</TableHeader>
<TableBody class="overflow-clip rounded-lg">
<TableRow v-for="invoice in invoices" :key="invoice.nr" @dblclick="onItemClicked(invoice)"
<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)">
<TableCell class="w-1/100 hidden md:table-cell lg:pr-5 tabular-nums">{{ invoice.nr }}
:class="statusTextStyle(invoice.paymentStatus)">
<TableCell class="w-1/100 hidden md:table-cell lg:pl-4 lg:pr-5 tabular-nums">{{ invoice.nr }}
</TableCell>
<TableCell class="w-1/100 text-center">
<StatusBadge :variant="castToStatusVariant(invoice.paymentStatus)">{{
@@ -149,15 +149,14 @@ const calcTaxes = (amount: number) => {
</TableCell>
<TableCell class="text-right tabular-nums hidden lg:table-cell">{{
toCurrency(calcTaxes(invoice.totalAmount)) }}</TableCell>
<TableCell class="text-right tabular-nums hidden lg:table-cell">{{
<TableCell class="text-right tabular-nums hidden lg:pr-4 lg:table-cell">{{
toCurrency(invoice.totalAmount + calcTaxes(invoice.totalAmount)) }}</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableFooter class="border-none bg-transparent">
<!-- Summe -->
<TableRow
class="border-none bg-slate-100 dark:bg-neutral-900/60 hover:bg-slate-100 dark:hover:bg-neutral-900/60">
<TableRow class="border-none hover:bg-transparent">
<TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
<TableCell colspan="2" class="hidden md:table-cell"></TableCell>
<TableCell colspan="1"></TableCell>
@@ -165,12 +164,11 @@ const calcTaxes = (amount: number) => {
<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 font-bold">{{
<TableCell class="py-4 lg:pr-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-100 dark:bg-neutral-900/60 hover:bg-slate-100 dark:hover:bg-neutral-900/60">
<TableRow v-if="!(totalDue == 0 && totalNotIssued == 0)" class="border-none hover:bg-transparent">
<TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
<TableCell colspan="2" class="hidden md:table-cell"></TableCell>
<TableCell colspan="1"></TableCell>
@@ -178,12 +176,11 @@ const calcTaxes = (amount: number) => {
<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 class="lg:pr-4 text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossPaid)
}}</TableCell>
</TableRow>
<TableRow v-if="totalDue > 0"
class="border-none bg-slate-100 dark:bg-neutral-900/60 hover:bg-slate-100 dark:hover:bg-neutral-900/60 text-destructive">
<TableRow v-if="totalDue > 0" class="border-none text-destructive hover:bg-transparent">
<TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
<TableCell colspan="2" class="hidden md:table-cell"></TableCell>
<TableCell colspan="1"></TableCell>
@@ -191,12 +188,11 @@ const calcTaxes = (amount: number) => {
<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 class="lg:pr-4 text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossDue)
}}</TableCell>
</TableRow>
<TableRow v-if="totalNotIssued > 0"
class="border-none bg-slate-100 dark:bg-neutral-900/60 hover:bg-slate-100 dark:hover:bg-neutral-900/60 text-muted-foreground">
<TableRow v-if="totalNotIssued > 0" class="border-none text-muted-foreground hover:bg-transparent">
<TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
<TableCell colspan="2" class="hidden md:table-cell"></TableCell>
<TableCell colspan="1"></TableCell>
@@ -204,7 +200,7 @@ const calcTaxes = (amount: number) => {
<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">{{
<TableCell class="lg:pr-4 text-right tabular-nums hidden lg:table-cell font-bold">{{
toCurrency(totalGrossNotIssued) }}</TableCell>
</TableRow>
@@ -216,9 +212,21 @@ const calcTaxes = (amount: number) => {
.document-table {
font-size: 0.833rem;
}
.document-table th,
.document-table th {
}
.document-table td {
padding-top: 0.694em !important;
padding-bottom: 0.694em !important;
padding-top: 1em !important;
padding-bottom: 1em !important;
}
.document-table tfoot tr:first-child td {
padding-top: 2em !important;
}
.document-table tfoot td {
padding-top: 0.64em !important;
padding-bottom: 0.64em !important;
}
</style>
resources/js/components/ui/button/index.ts
+1 -1
View File
@@ -12,7 +12,7 @@ export const buttonVariants = cva(
action:
'bg-blue-600 border-b-1 border-t-1 border-t-blue-400 border-b-blue-800 active:bg-blue-700 hover:bg-blue-500 text-white',
destructive:
'bg-destructive dark:bg-red-700 text-white border-b-1 border-t-1 border-t-red-200 border-b-red-700 dark:border-t-red-400 dark:border-b-red-800 hover:bg-red-600 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
'bg-destructive dark:bg-red-700 text-white border-b-1 border-t-1 border-t-red-200 border-b-red-700 dark:border-t-red-400 dark:border-b-red-800 hover:bg-red-600 hover:bg-red-600 active:bg-red-500 active:inset-shadow-red-950 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
outline:
'border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
secondary:
resources/js/components/ui/send-mail-dialog/index.ts
+1
View File
@@ -0,0 +1 @@
export { default as SendMailDialog } from "./SendMailDialog.vue"
resources/js/components/ui/sidebar/Sidebar.vue
+3 -3
View File
@@ -63,7 +63,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
<!-- This is what handles the sidebar gap on desktop -->
<div
:class="cn(
'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
'relative w-(--sidebar-width) bg-transparent transition-[width] duration-100 ease-linear',
'group-data-[collapsible=offcanvas]:w-0',
'group-data-[side=right]:rotate-180',
variant === 'floating' || variant === 'inset'
@@ -73,14 +73,14 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
/>
<div
:class="cn(
'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-100 ease-linear md:flex',
side === 'left'
? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
// Adjust the padding for floating and inset variants.
variant === 'floating' || variant === 'inset'
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
: 'p-4 pr-2 group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-0 group-data-[side=right]:border-0',
props.class,
)"
v-bind="$attrs"
resources/js/components/ui/sidebar/SidebarProvider.vue
+3
View File
@@ -66,6 +66,9 @@ provideSidebarContext({
<template>
<TooltipProvider :delay-duration="0">
<!-- :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)" -->
<!-- :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-linear-45 from-orange-200 to-orange-300 flex min-h-svh w-full', props.class)" -->
<!-- linear-[45deg,rgb(235,217,178)_0%,_rgb(237,183,83)_100%] -->
<div
data-slot="sidebar-wrapper"
:style="{
resources/js/components/ui/sidebar/utils.ts
+2 -2
View File
@@ -3,9 +3,9 @@ import { createContext } from 'reka-ui'
export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
export const SIDEBAR_WIDTH = '16rem'
export const SIDEBAR_WIDTH = '14rem'
export const SIDEBAR_WIDTH_MOBILE = '18rem'
export const SIDEBAR_WIDTH_ICON = '3rem'
export const SIDEBAR_WIDTH_ICON = '4rem'
export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
export const [useSidebar, provideSidebarContext] = createContext<{
resources/js/components/ui/status-badge/index.ts
+14 -9
View File
@@ -4,22 +4,22 @@ import { cva } from "class-variance-authority"
export { default as StatusBadge } from "./StatusBadge.vue"
export const statusBadgeVariants = cva(
"shadow inline-flex items-center justify-center aspect-1/1 p-1 lg:aspect-auto lg:px-2 lg:py-0.5 rounded-full lg:rounded-md border text-xs font-medium lg:w-full whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
"inline-flex items-center justify-center bg-gray-50 dark:bg-neutral-700 border-1 aspect-1/1 p-1 lg:aspect-auto lg:px-2 lg:py-0.5 rounded-full lg:rounded-sm text-xs lg:w-full whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
{
variants: {
variant: {
draft:
"text-foreground bg-slate-100 dark:bg-zinc-500 [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
"border-dashed text-muted-foreground dark:bg-transparent",
issued:
"border-transparent bg-sky-400 dark:bg-sky-700 [a&]:hover:bg-primary/90",
"bg-transparent border-sky-200 text-sky-600 dark:bg-sky-800 dark:text-sky-300 dark:border-0",
paid:
"border-transparent bg-lime-500 dark:bg-lime-700 text-lime-950 dark:text-lime-200 [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
"border-none bg-lime-400 dark:bg-lime-900 dark:text-lime-400",
due:
"border-transparent bg-amber-300 text-amber-900 [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
"font-bold border-none bg-amber-300 text-amber-800 dark:bg-amber-900 dark:text-amber-500",
reminded:
"border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
"font-bold border-none bg-red-500 text-red-100 dark:bg-red-900 dark:text-red-200 dark:font-normal",
cancelled:
"text-foreground bg-slate-400 dark:bg-zinc-700 [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
"bg-background text-foreground",
},
size: {
@@ -45,7 +45,12 @@ export const statusBadgeLabels: { [key: string]: string } = {
cancelled: 'Storniert'
}
export function statusBadgeTextColor(status: string): string {
export function statusTextStyle(status: string): string {
if (status === 'draft') return 'text-muted-foreground'
if (status === 'due') return 'text-amber-600'
if (status === 'reminded') return 'text-red-600 dark:text-red-400'
if (status === 'cancelled') return 'line-through text-muted-foreground decoration-gray-300'
return (['due', 'reminded'].includes(status)) ?
'var(--color-destructive)' :
''
@@ -61,5 +66,5 @@ export const castToStatusVariant = (status: string): StatusBadgeVariants['varian
'cancelled': 'cancelled',
};
return statusMapping[status] || 'draft'; // 'draft' als Standardwert
return statusMapping[status] || 'draft';
};
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 bg-slate-100 dark:bg-neutral-900/40">
<AppContent variant="sidebar" class="overflow-x-hidden bg-main">
<AppSidebarHeader :breadcrumbs="breadcrumbs" />
<slot />
</AppContent>
resources/js/pages/Customers.vue
+2 -2
View File
@@ -170,8 +170,8 @@ const call = (number: string, event: Event) => {
<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:border-neutral-600 overflow-clip"
@click="" @dblclick="showDetail(customer)">
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 }}"
resources/js/pages/Invoices.vue
+4 -3
View File
@@ -197,12 +197,12 @@ const deleteInvoice = async (id: number) => {
<Head title="Rechnungen" />
<!-- Function Header -->
<AppLayout :breadcrumbs="breadcrumbs">
<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">
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">
<!-- Function Header -->
<div id="function-header" class="flex row justify-between items-center mb-4 gap-4">
<!-- Year select -->
@@ -212,7 +212,7 @@ const deleteInvoice = async (id: number) => {
<ChevronLeft />
</Button>
<Select :size="'sm'" v-model="selectedYearIndex" v-if="years.length > 1">
<SelectTrigger class="bg-background hover:bg-accent">
<SelectTrigger class=" hover:bg-accent">
<SelectValue placeholder="Jahr" />
</SelectTrigger>
<SelectContent>
@@ -272,6 +272,7 @@ const deleteInvoice = async (id: number) => {
</div>
<!-- Invoice Table -->
<DocumentTable :invoices="filteredInvoices" :onItemClicked="showDetail" />