Tooloop/Caramel-CRM-Backup
Archived
2
0
Fork 0
Code Issues 40 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 b48fb8db3a
commit 92c1b4d441
10 changed files with 76 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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>