All categories now reflect truth depending on transactions.

src/views/css/viewCategory.css

@@ -15,6 +15,7 @@
     align-items: center;
     margin-top: 35px;
     margin: 35px 0 15px 0;
+    position: relative;
 }
 
 #ViewIncome .switch p,

src/views/js/data/Account.js

@@ -108,7 +108,14 @@ export default class Account{
     incomeTotal(){
         let income = 0;
         for(let i = 0; i < this._income.length; i++){
-            if(this._income[i].active){
+            if(!this._income[i].active) continue;
+            const transactions = this._transactions.filter(t => t.categoryId === this._income[i].id);
+
+            if(transactions.length > 0){
+                for(let j = 0; j < transactions.length; j++){
+                    income += transactions[j].amount;
+                }
+            }else{
                 income += this._income[i].amount;
             }
         }
@@ -118,7 +125,16 @@ export default class Account{
     billsTotal(){
         let bills = 0;
         for(let i = 0; i < this._bills.length; i++){
-            bills += this._bills[i].amount;
+            if(!this._bills[i].active) continue;
+            const transactions = this._transactions.filter(b => b.categoryId === this._bills[i].id);
+
+            if(transactions.length > 0){
+                for(let j = 0; j < transactions.length; j++){
+                    bills += transactions[j].amount;
+                }
+            }else{
+                bills += this._bills[i].amount;
+            }
         }
         return bills;
     }

src/views/js/pages/Home.js

@@ -77,6 +77,8 @@ export default class Home extends Page{
     }
 
     renderData(){
+        this.incomeTotal = user.account.incomeTotal();
+
         for(let i = 0; i < user.account.allowances.length; i++){
             const a = user.account.allowances[i];
             const spent = user.account.categorySpent(a);
@@ -95,6 +97,8 @@ export default class Home extends Page{
         }
 
         this.container.querySelector(".discretionary").replaceWith(this.createDiscretionary().get());
+        this.container.querySelector(".incomeDisplay").textContent = Format.currency(this.incomeTotal);
+        this.container.querySelector(".billsDisplay").textContent = Format.currency(user.account.billsTotal())
     }
 
     createDiscretionary(){
@@ -138,6 +142,7 @@ export default class Home extends Page{
                 .text("Income: ")
             )
             .append(new Elem("dd")
+                .addClass("incomeDisplay")
                 .text(Format.currency(this.incomeTotal))
             )
             .appendTo(this.container);
@@ -147,6 +152,7 @@ export default class Home extends Page{
                 .text("Bills: ")
             )
             .append(new Elem("dd")
+                .addClass("billsDisplay")
                 .text(Format.currency(user.account.billsTotal()))
             )
             .appendTo(this.container);