223 lines
10 KiB
Vue
223 lines
10 KiB
Vue
<script setup lang="ts">
|
|
|
|
import { computed } from 'vue'
|
|
import { type Invoice } from '@/types'
|
|
import { toLocalDate, toCurrency } from '@/lib/utils'
|
|
import { StatusBadge, statusBadgeLabels, statusBadgeTextColor, castToStatusVariant } from '@/components/ui/status-badge'
|
|
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
|
|
|
|
|
const props = defineProps<{
|
|
invoices: Invoice[],
|
|
onItemClicked(invoice: Invoice): void
|
|
}>()
|
|
|
|
const totalPaid = computed(() => {
|
|
let amount = 0;
|
|
props.invoices.forEach(invoice => {
|
|
if (invoice.paymentStatus == 'paid') amount += invoice.totalAmount
|
|
})
|
|
return amount
|
|
})
|
|
|
|
const totalTaxPaid = computed(() => {
|
|
let amount = 0;
|
|
props.invoices.forEach(invoice => {
|
|
if (invoice.paymentStatus == 'paid') amount += calcTaxes(invoice.totalAmount)
|
|
})
|
|
return amount
|
|
})
|
|
|
|
const totalGrossPaid = computed(() => {
|
|
let amount = 0;
|
|
props.invoices.forEach(invoice => {
|
|
if (invoice.paymentStatus == 'paid') amount += invoice.totalAmount + calcTaxes(invoice.totalAmount)
|
|
})
|
|
return amount
|
|
})
|
|
|
|
const totalDue = computed(() => {
|
|
let amount = 0;
|
|
props.invoices.forEach(invoice => {
|
|
if (['issued', 'due', 'reminded'].includes(invoice.paymentStatus)) amount += invoice.totalAmount
|
|
})
|
|
return amount
|
|
})
|
|
|
|
const totalTaxDue = computed(() => {
|
|
let amount = 0;
|
|
props.invoices.forEach(invoice => {
|
|
if (['issued', 'due', 'reminded'].includes(invoice.paymentStatus)) amount += calcTaxes(invoice.totalAmount)
|
|
})
|
|
return amount
|
|
})
|
|
|
|
const totalGrossDue = computed(() => {
|
|
let amount = 0;
|
|
props.invoices.forEach(invoice => {
|
|
if (['issued', 'due', 'reminded'].includes(invoice.paymentStatus)) amount += invoice.totalAmount + calcTaxes(invoice.totalAmount)
|
|
})
|
|
return amount
|
|
})
|
|
|
|
const totalNotIssued = computed(() => {
|
|
let amount = 0;
|
|
props.invoices.forEach(invoice => {
|
|
if (invoice.paymentStatus == 'draft') amount += invoice.totalAmount
|
|
})
|
|
return amount
|
|
})
|
|
|
|
const totalTaxNotIssued = computed(() => {
|
|
let amount = 0;
|
|
props.invoices.forEach(invoice => {
|
|
if (invoice.paymentStatus == 'draft') amount += calcTaxes(invoice.totalAmount)
|
|
})
|
|
return amount
|
|
})
|
|
|
|
const totalGrossNotIssued = computed(() => {
|
|
let amount = 0;
|
|
props.invoices.forEach(invoice => {
|
|
if (invoice.paymentStatus == 'draft') amount += invoice.totalAmount + calcTaxes(invoice.totalAmount)
|
|
})
|
|
return amount
|
|
})
|
|
|
|
const totalAmount = computed(() => {
|
|
return totalPaid.value + totalDue.value + totalNotIssued.value
|
|
})
|
|
|
|
const totalTax = computed(() => {
|
|
return totalTaxPaid.value + totalTaxDue.value + totalTaxNotIssued.value
|
|
})
|
|
|
|
const totalGross = computed(() => {
|
|
return totalGrossPaid.value + totalGrossDue.value + totalGrossNotIssued.value
|
|
})
|
|
|
|
const calcTaxes = (amount: number) => {
|
|
return Number((0.19 * amount).toFixed(2))
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<Table class="relative document-table">
|
|
<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>
|
|
<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>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<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)">
|
|
<TableCell class="w-1/100 hidden md:table-cell lg:pr-5 tabular-nums">{{ invoice.nr }}
|
|
</TableCell>
|
|
<TableCell class="w-1/100 text-center">
|
|
<StatusBadge :variant="castToStatusVariant(invoice.paymentStatus)">{{
|
|
statusBadgeLabels[invoice.paymentStatus] }}
|
|
</StatusBadge>
|
|
</TableCell>
|
|
<TableCell class="pr-5 hidden md:table-cell lg:px-5 text-right tabular-nums">{{
|
|
toLocalDate(invoice.invoiceDate) }}
|
|
</TableCell>
|
|
<TableCell class="lg:hidden max-w-[220px] md:max-w-[320px] overflow-hidden text-ellipsis">
|
|
<span class="font-semibold">{{ invoice.customer?.companyName }}</span><br />
|
|
{{ invoice.title }}
|
|
</TableCell>
|
|
<TableCell
|
|
class="hidden lg:table-cell max-w-[100px] md:max-w-[120px] lg:max-w-auto overflow-hidden text-ellipsis font-semibold">
|
|
{{ invoice.customer?.companyName }}</TableCell>
|
|
<TableCell colspan="2"
|
|
class="hidden lg:table-cell max-w-[120px] md:max-w-[160px] lg:max-w-auto overflow-hidden text-ellipsis">
|
|
{{
|
|
invoice.title }}</TableCell>
|
|
<TableCell class="text-right tabular-nums">{{ toCurrency(invoice.totalAmount) }}
|
|
</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">{{
|
|
toCurrency(invoice.totalAmount + calcTaxes(invoice.totalAmount)) }}</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
|
|
<TableFooter>
|
|
<!-- Summe -->
|
|
<TableRow
|
|
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 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 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">
|
|
<TableCell colspan="2" class="hidden lg:table-cell"></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>
|
|
</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">
|
|
<TableCell colspan="2" class="hidden lg:table-cell"></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>
|
|
</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">
|
|
<TableCell colspan="2" class="hidden lg:table-cell"></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>
|
|
</TableRow>
|
|
|
|
</TableFooter>
|
|
</Table>
|
|
</template>
|
|
|
|
<style>
|
|
.document-table {
|
|
font-size: 0.833rem;
|
|
}
|
|
.document-table th,
|
|
.document-table td {
|
|
padding-top: 0.694em !important;
|
|
padding-bottom: 0.694em !important;
|
|
}
|
|
</style> |