Rendering Fix
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
</style>
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user