Rendering Fix

This commit is contained in:
2026-03-18 18:33:47 +01:00
parent a9d3d0038f
commit 84c174ca09

View File

@@ -2,8 +2,6 @@
import dayjs from "dayjs";
const profileStore = useProfileStore();
let unpaidInvoicesSum = ref(0)
let unpaidInvoicesCount = ref(0)
let unpaidOverdueInvoicesSum = ref(0)
@@ -50,43 +48,91 @@ setupPage()
</script>
<template>
<table>
<tr>
<td class="break-all">Offene Rechnungen:</td>
<td
v-if="unpaidInvoicesSum > 0"
class="text-orange-500 font-bold text-nowrap"
>{{unpaidInvoicesCount}} Stk /<br> {{useCurrency(unpaidInvoicesSum)}}</td>
<td v-else class="text-primary-500 font-bold text-no-wrap">0 Stk / 0,00</td>
</tr>
<tr>
<td class="break-all">Überfällige Rechnungen:</td>
<td
v-if="unpaidOverdueInvoicesSum !== 0"
class="text-rose-600 font-bold text-nowrap"
>{{unpaidOverdueInvoicesCount}} Stk /<br> {{useCurrency(unpaidOverdueInvoicesSum)}}</td>
<td v-else class="text-primary-500 font-bold text-no-wrap">0 Stk / 0,00</td>
</tr>
<tr>
<td class="break-all">Angelegte Rechnungsentwürfe:</td>
<td
v-if="draftInvoicesSum > 0"
class="text-orange-500 font-bold text-nowrap"
>{{draftInvoicesCount}} Stk /<br> {{useCurrency(draftInvoicesSum)}}</td>
<td v-else class="text-primary-500 font-bold text-no-wrap">0 Stk / 0,00</td>
</tr>
<tr>
<td class="break-all">Vorbereitete Eingangsrechnungen:</td>
<td
v-if="countPreparedOpenIncomingInvoices > 0"
class="text-orange-500 font-bold text-wrap"
>{{countPreparedOpenIncomingInvoices}} Stk </td>
<td v-else class="text-primary-500 font-bold text-no-wrap">0 Stk</td>
</tr>
</table>
<div class="space-y-3">
<div class="balance-row">
<p class="balance-label">Offene Rechnungen</p>
<div
v-if="unpaidInvoicesSum > 0"
class="balance-value text-orange-500"
>
<span>{{ unpaidInvoicesCount }} Stk</span>
<span>{{ useCurrency(unpaidInvoicesSum) }}</span>
</div>
<div v-else class="balance-value text-primary-500">
<span>0 Stk</span>
<span>0,00</span>
</div>
</div>
<div class="balance-row">
<p class="balance-label">Überfällige Rechnungen</p>
<div
v-if="unpaidOverdueInvoicesSum !== 0"
class="balance-value text-rose-600"
>
<span>{{ unpaidOverdueInvoicesCount }} Stk</span>
<span>{{ useCurrency(unpaidOverdueInvoicesSum) }}</span>
</div>
<div v-else class="balance-value text-primary-500">
<span>0 Stk</span>
<span>0,00</span>
</div>
</div>
<div class="balance-row">
<p class="balance-label">Angelegte Rechnungsentwürfe</p>
<div
v-if="draftInvoicesSum > 0"
class="balance-value text-orange-500"
>
<span>{{ draftInvoicesCount }} Stk</span>
<span>{{ useCurrency(draftInvoicesSum) }}</span>
</div>
<div v-else class="balance-value text-primary-500">
<span>0 Stk</span>
<span>0,00</span>
</div>
</div>
<div class="balance-row">
<p class="balance-label">Vorbereitete Eingangsrechnungen</p>
<div
v-if="countPreparedOpenIncomingInvoices > 0"
class="balance-value text-orange-500"
>
<span>{{ countPreparedOpenIncomingInvoices }} Stk</span>
</div>
<div v-else class="balance-value text-primary-500">
<span>0 Stk</span>
</div>
</div>
</div>
</template>
<style scoped>
.balance-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: start;
}
.balance-label {
margin: 0;
line-height: 1.35;
color: rgb(55 65 81);
}
.balance-value {
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
font-weight: 700;
white-space: nowrap;
}
:deep(.dark) .balance-label {
color: rgb(209 213 219);
}
</style>