flfeders/FEDEO
2
1
Fork 0
Code Issues 95 Pull Requests Actions Packages Projects 22 Releases Wiki Activity

Rendering Fix

Browse Source
This commit is contained in:
florianfederspiel
2026-03-18 18:33:47 +01:00
parent a9d3d0038f
commit 84c174ca09
1 changed files with 83 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
frontend/components/displayOpenBalances.vue
View File

@@ -2,8 +2,6 @@
import dayjs from "dayjs"; import dayjs from "dayjs";
const profileStore = useProfileStore();
let unpaidInvoicesSum = ref(0) let unpaidInvoicesSum = ref(0)
let unpaidInvoicesCount = ref(0) let unpaidInvoicesCount = ref(0)
let unpaidOverdueInvoicesSum = ref(0) let unpaidOverdueInvoicesSum = ref(0)
@@ -50,43 +48,91 @@ setupPage()
</script> </script>
<template> <template>
<table> <div class="space-y-3">
<tr> <div class="balance-row">
<td class="break-all">Offene Rechnungen:</td> <p class="balance-label">Offene Rechnungen</p>
<td <div
v-if="unpaidInvoicesSum > 0" v-if="unpaidInvoicesSum > 0"
class="text-orange-500 font-bold text-nowrap" class="balance-value text-orange-500"
>{{unpaidInvoicesCount}} Stk /<br> {{useCurrency(unpaidInvoicesSum)}}</td> >
<td v-else class="text-primary-500 font-bold text-no-wrap">0 Stk / 0,00€</td> <span>{{ unpaidInvoicesCount }} Stk</span>
</tr> <span>{{ useCurrency(unpaidInvoicesSum) }}</span>
<tr> </div>
<td class="break-all">Überfällige Rechnungen:</td> <div v-else class="balance-value text-primary-500">
<td <span>0 Stk</span>
v-if="unpaidOverdueInvoicesSum !== 0" <span>0,00€</span>
class="text-rose-600 font-bold text-nowrap" </div>
>{{unpaidOverdueInvoicesCount}} Stk /<br> {{useCurrency(unpaidOverdueInvoicesSum)}}</td> </div>
<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="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> </template>
<style scoped> <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> </style>