Display cleared / uncleared / working balance for account

Signed-off-by: Knut Ahlers <knut@ahlers.me>
This commit is contained in:
Knut Ahlers 2024-01-18 19:29:40 +01:00
parent 26a1419f61
commit 70dd388476
Signed by: luzifer
SSH key fingerprint: SHA256:/xtE5lCgiRDQr8SLxHMS92ZBlACmATUmF1crK16Ks4E

View file

@ -2,13 +2,29 @@
<div> <div>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col"> <div class="col d-flex align-items-center">
<range-selector <range-selector
v-model="timeRange" v-model="timeRange"
/> />
</div> </div>
<div class="col fs-4 text-center"> <div class="col d-flex text-center flex-column">
{{ accountIdToName[accountId] }} <span class="fs-3 text-semibold">{{ accountIdToName[accountId] }}</span>
<div class="d-flex align-items-center mx-auto">
<div class="d-inline-flex text-center flex-column mx-2">
{{ formatNumber(account.balance - balanceUncleared) }}
<span class="form-text mt-0">Cleared Balance</span>
</div>
+
<div class="d-inline-flex text-center flex-column mx-2">
{{ formatNumber(balanceUncleared) }}
<span class="form-text mt-0">Uncleared Balance</span>
</div>
=
<div class="d-inline-flex text-center flex-column mx-2">
{{ formatNumber(account.balance) }}
<span class="form-text mt-0">Working Balance</span>
</div>
</div>
</div> </div>
<div class="col d-flex align-items-center justify-content-end"> <div class="col d-flex align-items-center justify-content-end">
<div class="btn-group btn-group-sm"> <div class="btn-group btn-group-sm">
@ -301,6 +317,12 @@ export default {
return Object.fromEntries(this.accounts.map(acc => [acc.id, acc.type])) return Object.fromEntries(this.accounts.map(acc => [acc.id, acc.type]))
}, },
balanceUncleared() {
return this.transactions
.filter(tx => !tx.cleared)
.reduce((sum, tx) => sum + tx.amount, 0)
},
categories() { categories() {
const cats = this.accounts.filter(acc => acc.type === 'category') const cats = this.accounts.filter(acc => acc.type === 'category')
cats.sort((a, b) => a.name.localeCompare(b.name)) cats.sort((a, b) => a.name.localeCompare(b.name))