From 0817f18e3345d5e35bc9042b11ce26c205112121 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Sat, 23 Apr 2022 20:12:37 +0000
Subject: [PATCH] Only save available for last month and add overspent

---
 web/src/pages/Budgeting.vue      | 71 +++++++++++++++++++++-----------
 web/src/stores/budget-account.ts | 24 ++++-------
 2 files changed, 57 insertions(+), 38 deletions(-)

diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index 09fc432..34fbd8e 100644
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@@ -78,29 +78,54 @@ const budgeted = computed(() => accountStore.GetBudgeted(selected.value.Year, se
 
 <template>
   <h1>Budget for {{ selected.Month + 1 }}/{{ selected.Year }}</h1>
-  <span>
-    Available last month:
-    <Currency
-      :value="accountStore.GetIncomeAvailable(previous.Year, previous.Month)"
-    />
-  </span><br>
-  <span>Available balance:
-    <Currency
-      :value="accountStore.GetIncomeAvailable(selected.Year, selected.Month)"
-    />
-  </span><br>
-  <span>Budgeted this month:
-    <Currency :value="budgeted.Assigned" /> - <Currency :value="-budgeted.Deassigned" /> = <Currency :value="budgeted.Assigned+budgeted.Deassigned" />
-  </span><br>
-  <span>Income:
-    <Currency
-      :value="budgeted.Income"
-    /> <Currency
-      :value="budgeted.Spent"
-    /> = <Currency
-      :value="budgeted.Income + budgeted.Spent"
-    />
-  </span><br>
+  <table class="inline-block">
+    <tr>
+      <td>
+        Available last month:
+      </td>
+      <td class="text-right">
+        <Currency :value="accountStore.Available-accountStore.OverspentLastMonth+budgeted.Assigned+budgeted.Deassigned" />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Overspent last month:
+      </td>
+      <td class="text-right">
+        <Currency :value="accountStore.OverspentLastMonth" />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Budgeted this month:
+      </td>
+      <td class="text-right">
+        <Currency :value="budgeted.Assigned+budgeted.Deassigned" />
+      </td>
+      <td class="text-sm pl-2">
+        = <Currency :value="budgeted.Assigned" /> - <Currency :value="-budgeted.Deassigned" />
+      </td>
+    </tr>
+    <tr class="font-bold">
+      <td class="py-2">
+        Available balance:
+      </td>
+      <td class="text-right">
+        <Currency :value="accountStore.Available" />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Activity:
+      </td>
+      <td class="text-right">
+        <Currency :value="budgeted.Income + budgeted.Spent" />
+      </td>
+      <td class="text-sm pl-2">
+        = <Currency :value="budgeted.Income" /> - <Currency :value="-1 * budgeted.Spent" />
+      </td>
+    </tr>
+  </table>
   <div>
     <router-link
       :to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"
diff --git a/web/src/stores/budget-account.ts b/web/src/stores/budget-account.ts
index 57a3671..9d15c2e 100644
--- a/web/src/stores/budget-account.ts
+++ b/web/src/stores/budget-account.ts
@@ -9,7 +9,8 @@ interface State {
     CurrentAccountID: string | null;
     Categories: Map<string, Category>;
     Months: Map<number, Map<number, Map<string, Category>>>;
-    Available: Map<number, Map<number, number>>;
+    Available: number,
+    OverspentLastMonth: number,
     Assignments: [];
 }
 
@@ -51,7 +52,8 @@ export const useAccountStore = defineStore("budget/account", {
         Accounts: new Map<string, Account>(),
         CurrentAccountID: null,
         Months: new Map<number, Map<number, Map<string, Category>>>(),
-        Available: new Map<number, Map<number, number>>(),
+        Available: 0,
+        OverspentLastMonth: 0,
         Categories: new Map<string, Category>(),
         Assignments: [],
     }),
@@ -107,12 +109,6 @@ export const useAccountStore = defineStore("budget/account", {
                 };
             };
         },
-        GetIncomeAvailable(state) {
-            return (year: number, month: number) => {
-                const yearMapAv = this.Available.get(year);
-                return yearMapAv?.get(month);
-            };
-        },
         CategoryGroupsForMonth(state) {
             return (year: number, month: number) => {
                 const categories = this.AllCategoriesForMonth(year, month);
@@ -215,7 +211,7 @@ export const useAccountStore = defineStore("budget/account", {
                 response.Categories.length <= 0
             )
                 return;
-            this.addCategoriesForMonth(year, month, response.Categories, response.AvailableBalance);
+            this.addCategoriesForMonth(year, month, response.Categories, response.AvailableBalance, response.OverspentLastMonth);
         },
         async EditAccount(
             accountid: string,
@@ -242,7 +238,8 @@ export const useAccountStore = defineStore("budget/account", {
             year: number,
             month: number,
             categories: Category[],
-            available: number
+            available: number,
+            overspentLastMonth: number,
         ): void {
             this.$patch((state) => {
                 const yearMap =
@@ -257,11 +254,8 @@ export const useAccountStore = defineStore("budget/account", {
                 yearMap.set(month, monthMap);
                 state.Months.set(year, yearMap);
 
-                const yearMapAv =
-                    state.Available.get(year) ||
-                    new Map<number, number>();
-                yearMapAv.set(month, available);
-                state.Available.set(year, yearMapAv);
+                state.Available = available;
+                state.OverspentLastMonth = overspentLastMonth;
             });
         },
         logout() {