Split activity into income and spending

web/src/pages/Budgeting.vue

@@ -72,28 +72,33 @@ function assignedChanged(e : Event, category : Category){
     POST("/budget/"+CurrentBudgetID.value+"/category/" + category.ID + "/" + selected.value.Year + "/" + (selected.value.Month+1),
     JSON.stringify({Assigned: category.Assigned}));
 }
+
+const budgeted = computed(() => accountStore.GetBudgeted(selected.value.Year, selected.value.Month))
 </script>
 
 <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="accountStore.GetBudgeted(selected.Year, selected.Month).Assigned"
-    />
+    <Currency :value="budgeted.Assigned"/> - <Currency :value="-budgeted.Deassigned"/> = <Currency :value="budgeted.Assigned+budgeted.Deassigned" />  
   </span><br />
-  <span>Deassigned this month:
+  <span>Income:
     <Currency
-      :value="accountStore.GetBudgeted(selected.Year, selected.Month).Deassigned"
-    />
-  </span><br />
-  <span>Spent this month:
-    <Currency
-      :value="accountStore.GetBudgeted(selected.Year, selected.Month).Activity"
+      :value="budgeted.Income"
+    /> <Currency
+      :value="budgeted.Spent"
+    /> = <Currency
+      :value="budgeted.Income + budgeted.Spent"
     />
   </span><br />
   <div>