From 70dd3884769b9750355c28c137fd7520920dfff5 Mon Sep 17 00:00:00 2001
From: Knut Ahlers <knut@ahlers.me>
Date: Thu, 18 Jan 2024 19:29:40 +0100
Subject: [PATCH] Display cleared / uncleared / working balance for account

Signed-off-by: Knut Ahlers <knut@ahlers.me>
---
 frontend/components/accountOverview.vue | 28 ++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/components/accountOverview.vue b/frontend/components/accountOverview.vue
index 294f555..581fbfc 100644
--- a/frontend/components/accountOverview.vue
+++ b/frontend/components/accountOverview.vue
@@ -2,13 +2,29 @@
   <div>
     <div class="container-fluid">
       <div class="row">
-        <div class="col">
+        <div class="col d-flex align-items-center">
           <range-selector
             v-model="timeRange"
           />
         </div>
-        <div class="col fs-4 text-center">
-          {{ accountIdToName[accountId] }}
+        <div class="col d-flex text-center flex-column">
+          <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 class="col d-flex align-items-center justify-content-end">
           <div class="btn-group btn-group-sm">
@@ -301,6 +317,12 @@ export default {
       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() {
       const cats = this.accounts.filter(acc => acc.type === 'category')
       cats.sort((a, b) => a.name.localeCompare(b.name))