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-due: var(--status-due);
--color-status-reminded: var(--status-reminded); --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) --shadow-arrow: 0 2px 1px rgb(0 0 0 / 0.1)
} }
@@ -105,15 +117,16 @@ :root {
--foreground: hsl(0 0% 3.9%); --foreground: hsl(0 0% 3.9%);
--card: hsl(0 0% 100%); --card: hsl(0 0% 100%);
--card-foreground: hsl(0 0% 3.9%); --card-foreground: hsl(0 0% 3.9%);
--popover: hsl(0 0% 100%);
--popover-foreground: hsl(0 0% 3.9%); --popover-foreground: hsl(0 0% 3.9%);
--popover: var(--color-background);
--popover-foreground: var(--color-gray-900);
--primary: var(--color-orange-200); --primary: var(--color-orange-200);
--primary-foreground: var(--color-orange-600); --primary-foreground: var(--color-orange-600);
--secondary: hsl(0 0% 92.1%); --secondary: hsl(0 0% 92.1%);
--secondary-foreground: hsl(0 0% 9%); --secondary-foreground: hsl(0 0% 9%);
--muted: var(--color-slate-50); --muted: var(--color-gray-50);
--muted-foreground: var(--color-slate-400); --muted-foreground: var(--color-gray-400);
--accent: var(--color-slate-50); --accent: var(--color-gray-50);
--accent-foreground: hsl(0 0% 9%); --accent-foreground: hsl(0 0% 9%);
--destructive: var(--color-red-500); --destructive: var(--color-red-500);
--destructive-foreground: hsl(0 0% 98%); --destructive-foreground: hsl(0 0% 98%);
@@ -121,25 +134,27 @@ :root {
--input: var(--color-zinc-100); --input: var(--color-zinc-100);
--ring: hsl(0 0% 3.9%); --ring: hsl(0 0% 3.9%);
--chart-1: hsl(12 76% 61%); --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-3: hsl(197 37% 24%);
--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-300); --main-background: transparent;
--sidebar-background: var(--color-slate-100);
--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%);
--sidebar-accent: var(--color-slate-100); --sidebar-accent: var(--color-white);
--sidebar-accent-foreground: hsl(0 0% 30%); --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-ring: hsl(217.2 91.2% 59.8%);
--sidebar: hsl(0 0% 98%); --sidebar: hsl(0 0% 98%);
--status-draft: var(--color-slate-100); --status-draft: var(--color-gray-100);
--status-sent: var(--color-sky-400); --status-sent: var(--color-sky-400);
--status-paid: var(--color-lime-500); --status-paid: var(--color-lime-500);
--status-due: var(--color-amber-300); --status-due: var(--color-amber-300);
--status-reminded: var(--color-destructive); --status-reminded: var(--color-destructive);
} }
.dark { .dark {
@@ -168,6 +183,7 @@ .dark {
--chart-3: hsl(30 80% 55%); --chart-3: hsl(30 80% 55%);
--chart-4: hsl(280 65% 60%); --chart-4: hsl(280 65% 60%);
--chart-5: hsl(340 75% 55%); --chart-5: hsl(340 75% 55%);
--main-background: transparent;
--sidebar-background: var(--color-neutral-700); --sidebar-background: var(--color-neutral-700);
--sidebar-foreground: hsl(0 0% 95.9%); --sidebar-foreground: hsl(0 0% 95.9%);
--sidebar-primary: hsl(360, 100%, 100%); --sidebar-primary: hsl(360, 100%, 100%);
resources/js/components/AppSidebar.vue
+1 -1
View File
@@ -83,7 +83,7 @@ const footerNavItems: NavItem[] = [
</script> </script>
<template> <template>
<Sidebar collapsible="icon" variant="inset"> <Sidebar collapsible="icon" variant="sidebar">
<SidebarHeader> <SidebarHeader>
<Link :href="dashboard()" class="flex row items-center mt-6"> <Link :href="dashboard()" class="flex row items-center mt-6">
resources/js/components/documents/DocumentTable.vue
+40 -32
View File
@@ -3,7 +3,7 @@
import { computed } from 'vue' import { computed } from 'vue'
import { type Invoice } from '@/types' import { type Invoice } from '@/types'
import { toLocalDate, toCurrency, toFixedRounded } from '@/lib/utils' 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' import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'
@@ -104,27 +104,27 @@ const calcTaxes = (amount: number) => {
<template> <template>
<Table class="relative document-table"> <Table class="relative document-table bg-none">
<TableHeader> <TableHeader>
<TableRow class="hover:bg-transparent border-none"> <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="w-1/100 lg:w-1/100 hidden md:table-cell lg:pl-4 lg:pr-5">Nr.</TableHead>
<TableHead class="sticky top-0 w-1/100 lg:w-1/20 text-center">Status</TableHead> <TableHead class="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/20 lg:px-5 text-right hidden md:table-cell">Gestellt
</TableHead> </TableHead>
<TableHead class="sticky top-0 w-1/5 text-right lg:hidden">Rechnung</TableHead> <TableHead class="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="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="w-1/3 hidden lg:table-cell">Betreff</TableHead>
<TableHead class="sticky top-0 w-1/20 text-right">Netto</TableHead> <TableHead class="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="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/20 text-right hidden lg:table-cell lg:pr-4">Brutto</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody class="overflow-clip rounded-lg"> <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" class="select-none md:select-auto cursor-default bg-background"
:style="'color:' + statusBadgeTextColor(invoice.paymentStatus)"> :class="statusTextStyle(invoice.paymentStatus)">
<TableCell class="w-1/100 hidden md:table-cell lg:pr-5 tabular-nums">{{ invoice.nr }} <TableCell class="w-1/100 hidden md:table-cell lg:pl-4 lg:pr-5 tabular-nums">{{ invoice.nr }}
</TableCell> </TableCell>
<TableCell class="w-1/100 text-center"> <TableCell class="w-1/100 text-center">
<StatusBadge :variant="castToStatusVariant(invoice.paymentStatus)">{{ <StatusBadge :variant="castToStatusVariant(invoice.paymentStatus)">{{
@@ -149,15 +149,14 @@ const calcTaxes = (amount: number) => {
</TableCell> </TableCell>
<TableCell class="text-right tabular-nums hidden lg:table-cell">{{ <TableCell class="text-right tabular-nums hidden lg:table-cell">{{
toCurrency(calcTaxes(invoice.totalAmount)) }}</TableCell> 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> toCurrency(invoice.totalAmount + calcTaxes(invoice.totalAmount)) }}</TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
<TableFooter> <TableFooter class="border-none bg-transparent">
<!-- Summe --> <!-- Summe -->
<TableRow <TableRow class="border-none hover:bg-transparent">
class="border-none bg-slate-100 dark:bg-neutral-900/60 hover:bg-slate-100 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="2" class="hidden md:table-cell"></TableCell> <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
<TableCell colspan="1"></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">{{ toCurrency(totalAmount) }}</TableCell>
<TableCell class="py-4 text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTax) }} <TableCell class="py-4 text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTax) }}
</TableCell> </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> toCurrency(totalGross) }}</TableCell>
</TableRow> </TableRow>
<!-- Bezahlt --> <!-- Bezahlt -->
<TableRow v-if="!(totalDue == 0 && totalNotIssued == 0)" <TableRow v-if="!(totalDue == 0 && totalNotIssued == 0)" class="border-none hover:bg-transparent">
class="border-none bg-slate-100 dark:bg-neutral-900/60 hover:bg-slate-100 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="2" class="hidden md:table-cell"></TableCell> <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
<TableCell colspan="1"></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="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="lg:pr-4 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 text-destructive hover:bg-transparent">
class="border-none bg-slate-100 dark:bg-neutral-900/60 hover:bg-slate-100 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="2" class="hidden md:table-cell"></TableCell> <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
<TableCell colspan="1"></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="py-4 text-right tabular-nums">{{ toCurrency(totalDue) }}</TableCell>
<TableCell class="text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxDue) }} <TableCell class="text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxDue) }}
</TableCell> </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> }}</TableCell>
</TableRow> </TableRow>
<TableRow v-if="totalNotIssued > 0" <TableRow v-if="totalNotIssued > 0" class="border-none text-muted-foreground hover:bg-transparent">
class="border-none bg-slate-100 dark:bg-neutral-900/60 hover:bg-slate-100 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="2" class="hidden md:table-cell"></TableCell> <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
<TableCell colspan="1"></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="py-4 text-right tabular-nums">{{ toCurrency(totalNotIssued) }}</TableCell>
<TableCell class="text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxNotIssued) }} <TableCell class="text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxNotIssued) }}
</TableCell> </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> toCurrency(totalGrossNotIssued) }}</TableCell>
</TableRow> </TableRow>
@@ -216,9 +212,21 @@ const calcTaxes = (amount: number) => {
.document-table { .document-table {
font-size: 0.833rem; font-size: 0.833rem;
} }
.document-table th,
.document-table th {
}
.document-table td { .document-table td {
padding-top: 0.694em !important; padding-top: 1em !important;
padding-bottom: 0.694em !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> </style>
resources/js/components/ui/button/index.ts
+1 -1
View File
@@ -12,7 +12,7 @@ export const buttonVariants = cva(
action: 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', '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: 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: outline:
'border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', 'border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
secondary: 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 --> <!-- This is what handles the sidebar gap on desktop -->
<div <div
:class="cn( :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-[collapsible=offcanvas]:w-0',
'group-data-[side=right]:rotate-180', 'group-data-[side=right]:rotate-180',
variant === 'floating' || variant === 'inset' variant === 'floating' || variant === 'inset'
@@ -73,14 +73,14 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
/> />
<div <div
:class="cn( :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' side === 'left'
? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]' ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
: 'right-0 group-data-[collapsible=offcanvas]:right-[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. // Adjust the padding for floating and inset variants.
variant === 'floating' || variant === 'inset' variant === 'floating' || variant === 'inset'
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]' ? '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, props.class,
)" )"
v-bind="$attrs" v-bind="$attrs"
resources/js/components/ui/sidebar/SidebarProvider.vue
+4 -1
View File
@@ -66,6 +66,9 @@ provideSidebarContext({
<template> <template>
<TooltipProvider :delay-duration="0"> <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 <div
data-slot="sidebar-wrapper" data-slot="sidebar-wrapper"
:style="{ :style="{
@@ -74,7 +77,7 @@ provideSidebarContext({
}" }"
: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-sidebar flex min-h-svh w-full', props.class)"
v-bind="$attrs" v-bind="$attrs"
> >
<slot /> <slot />
</div> </div>
</TooltipProvider> </TooltipProvider>
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_NAME = 'sidebar_state'
export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 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_MOBILE = '18rem'
export const SIDEBAR_WIDTH_ICON = '3rem' export const SIDEBAR_WIDTH_ICON = '4rem'
export const SIDEBAR_KEYBOARD_SHORTCUT = 'b' export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
export const [useSidebar, provideSidebarContext] = createContext<{ 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 { default as StatusBadge } from "./StatusBadge.vue"
export const statusBadgeVariants = cva( 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: { variants: {
variant: { variant: {
draft: 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: 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: 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: 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: 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: cancelled:
"text-foreground bg-slate-400 dark:bg-zinc-700 [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", "bg-background text-foreground",
}, },
size: { size: {
@@ -45,7 +45,12 @@ export const statusBadgeLabels: { [key: string]: string } = {
cancelled: 'Storniert' 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)) ? return (['due', 'reminded'].includes(status)) ?
'var(--color-destructive)' : 'var(--color-destructive)' :
'' ''
@@ -61,5 +66,5 @@ export const castToStatusVariant = (status: string): StatusBadgeVariants['varian
'cancelled': 'cancelled', '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> <template>
<AppShell variant="sidebar"> <AppShell variant="sidebar">
<AppSidebar /> <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" /> <AppSidebarHeader :breadcrumbs="breadcrumbs" />
<slot /> <slot />
</AppContent> </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"> <div class="columns-xs gap-6">
<Card v-for="customer in filteredCustomers" :key="customer.id" <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" 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="" @dblclick="showDetail(customer)"> @click="showDetail(customer)">
<CardHeader v-if="customer.logo" class="z-0"> <CardHeader v-if="customer.logo" class="z-0">
<img :src="'storage/uploads/' + customer.logo" alt="Logo {{ customer.companyName }}" <img :src="'storage/uploads/' + customer.logo" alt="Logo {{ customer.companyName }}"
resources/js/pages/Invoices.vue
+6 -5
View File
@@ -197,12 +197,12 @@ const deleteInvoice = async (id: number) => {
<Head title="Rechnungen" /> <Head title="Rechnungen" />
<!-- Function Header -->
<AppLayout :breadcrumbs="breadcrumbs"> <AppLayout :breadcrumbs="breadcrumbs">
<div <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"> <div id="function-header" class="flex row justify-between items-center mb-4 gap-4">
<!-- Year select --> <!-- Year select -->
@@ -212,7 +212,7 @@ const deleteInvoice = async (id: number) => {
<ChevronLeft /> <ChevronLeft />
</Button> </Button>
<Select :size="'sm'" v-model="selectedYearIndex" v-if="years.length > 1"> <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" /> <SelectValue placeholder="Jahr" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -247,8 +247,8 @@ const deleteInvoice = async (id: number) => {
</div> </div>
<!-- <Button size="sm" @click="testToast" class="mr-2"> <!-- <Button size="sm" @click="testToast" class="mr-2">
Toast Toast
</Button> --> </Button> -->
<!-- New button --> <!-- New button -->
<TooltipProvider> <TooltipProvider>
@@ -272,6 +272,7 @@ const deleteInvoice = async (id: number) => {
</div> </div>
<!-- Invoice Table --> <!-- Invoice Table -->
<DocumentTable :invoices="filteredInvoices" :onItemClicked="showDetail" /> <DocumentTable :invoices="filteredInvoices" :onItemClicked="showDetail" />