Show available income in Budgeting header

web/src/pages/Budgeting.vue

@@ -68,6 +68,7 @@ function getGroupState(group: { Name: string, Expand: boolean }): boolean {
 
 <template>
     <h1>Budget for {{ selected.Month + 1 }}/{{ selected.Year }}</h1>
+    <span>Available balance: <Currency :value="accountStore.GetIncomeAvailable(selected.Year, selected.Month)" /></span>
     <div>
         <router-link
             :to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"

web/src/stores/budget-account.ts

@@ -55,12 +55,25 @@ export const useAccountStore = defineStore("budget/account", {
                 return category.AvailableLastMonth + Number(category.Assigned) + category.Activity;
             }
         },
+        GetIncomeCategoryID(state) {
+            const budget = useBudgetsStore();
+            return budget.CurrentBudget?.IncomeCategoryID;
+        },
+        GetIncomeAvailable(state) {
+            return (year: number, month: number) => {
+                const categories = this.AllCategoriesForMonth(year, month);
+                return categories.filter(x => x.ID == this.GetIncomeCategoryID)[0].AvailableLastMonth;
+            }
+        },
         CategoryGroupsForMonth(state) {
             return (year: number, month: number) => {
                 const categories = this.AllCategoriesForMonth(year, month);
                 const categoryGroups = [];
                 let prev = undefined;
                 for (const category of categories) {
+                    if (category.ID == this.GetIncomeCategoryID)
+                        continue;
+                        
                     if (category.Group != prev)
                         categoryGroups.push({
                             Name: category.Group,

web/src/stores/session.ts

@@ -16,6 +16,7 @@ export interface Budget {
     ID: string
     Name: string
     AvailableBalance: number
+    IncomeCategoryID: string
 }
 
 export const useSessionStore = defineStore('session', {