Show reconcile button and current reconciling-balance

web/src/components/TransactionRow.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import { useBudgetsStore } from "../stores/budget";
-import { Transaction } from "../stores/budget-account";
+import { Transaction, useAccountStore } from "../stores/budget-account";
 import Currency from "./Currency.vue";
 import TransactionEditRow from "./TransactionEditRow.vue";
 import { formatDate } from "../date";
@@ -13,30 +13,36 @@ const props = defineProps<{
 
 const edit = ref(false);
 
-const CurrentBudgetID = computed(()=> useBudgetsStore().CurrentBudgetID);
+const CurrentBudgetID = computed(() => useBudgetsStore().CurrentBudgetID);
+const Reconciling = computed(() => useAccountStore().Reconciling);
 </script>
 
 <template>
-    <tr v-if="!edit" class="{{new Date(transaction.Date) > new Date() ? 'future' : ''}}"
-        :class="[index % 6 < 3 ? 'bg-gray-300' : 'bg-gray-100']">
+    <tr
+        v-if="!edit"
+        class="{{new Date(transaction.Date) > new Date() ? 'future' : ''}}"
+        :class="[index % 6 < 3 ? 'bg-gray-300' : 'bg-gray-100']"
+    >
         <!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
         <td>{{ formatDate(transaction.Date) }}</td>
         <td>{{ transaction.TransferAccount ? "Transfer : " + transaction.TransferAccount : transaction.Payee }}</td>
+        <td>{{ transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : "" }}</td>
         <td>
-            {{ transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : "" }}
-        </td>
-        <td>
-            <a :href="'/budget/' + CurrentBudgetID + '/transaction/' + transaction.ID">
-                {{ transaction.Memo }}
-            </a>
+            <a
+                :href="'/budget/' + CurrentBudgetID + '/transaction/' + transaction.ID"
+            >{{ transaction.Memo }}</a>
         </td>
         <td>
             <Currency class="block" :value="transaction.Amount" />
         </td>
-        <td>
-            {{ transaction.Status == "Reconciled" ? "✔" : (transaction.Status == "Uncleared" ? "" : "*") }}
+        <td>{{ transaction.Status == "Reconciled" ? "✔" : (transaction.Status == "Uncleared" ? "" : "*") }}</td>
+        <td class="text-right">
+            {{ transaction.GroupID ? "☀" : "" }}
+            <a @click="edit = true;">✎</a>
+        </td>
+        <td v-if="Reconciling && transaction.Status != 'Reconciled'">
+            <input type="checkbox" v-model="transaction.Reconciled" />
         </td>
-        <td class="text-right">{{ transaction.GroupID ? "☀" : "" }}<a @click="edit = true;">✎</a></td>
     </tr>
     <TransactionEditRow v-if="edit" :transactionid="transaction.ID" />
 </template>

web/src/pages/Account.vue

@@ -5,35 +5,39 @@ import TransactionRow from "../components/TransactionRow.vue";
 import TransactionInputRow from "../components/TransactionInputRow.vue";
 import { useAccountStore } from "../stores/budget-account";
 import EditAccount from "../dialogs/EditAccount.vue";
+import Button from "../components/Button.vue";
 
-const props = defineProps<{
+defineProps<{
     budgetid: string
     accountid: string
 }>()
 
-const accountStore = useAccountStore();
-const CurrentAccount = computed(() => accountStore.CurrentAccount);
-const TransactionsList = computed(() => accountStore.TransactionsList);
-
+const accounts = useAccountStore();
 </script>
 
 <template>
-    <h1 class="inline">{{ CurrentAccount?.Name }}</h1>
+    <h1 class="inline">{{ accounts.CurrentAccount?.Name }}</h1>
     <EditAccount /> <br />
 
     <span>
         Current Balance:
-        <Currency :value="CurrentAccount?.WorkingBalance" />
+        <Currency :value="accounts.CurrentAccount?.WorkingBalance" />
     </span>
    
     <span>
         Cleared Balance:
-        <Currency :value="CurrentAccount?.ClearedBalance" />
+        <Currency :value="accounts.CurrentAccount?.ClearedBalance" />
     </span>
 
-    <span>
+    <span v-if="accounts.Reconciling">
+        <br />
+        Reconciling
+    </span>
+    <span v-if="!accounts.Reconciling">
         Reconciled Balance:
-        <Currency :value="CurrentAccount?.ReconciledBalance" />
+        <Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
+        <Currency :value="accounts.ReconcilingBalance" />
+        <Button @click="accounts.Reconciling = true" v-if="!accounts.Reconciling">Reconcile</Button>
     </span>
     <table>
         <tr class="font-bold">
@@ -44,10 +48,11 @@ const TransactionsList = computed(() => accountStore.TransactionsList);
             <td class="text-right">Amount</td>
             <td style="width: 20px;"></td>
             <td style="width: 40px;"></td>
+            <td style="width: 20px;" v-if="accounts.Reconciling">R</td>
         </tr>
         <TransactionInputRow :budgetid="budgetid" :accountid="accountid" />
         <TransactionRow
-            v-for="(transaction, index) in TransactionsList"
+            v-for="(transaction, index) in accounts.TransactionsList"
             :transaction="transaction"
             :index="index"
         />

web/src/stores/budget-account.ts

@@ -4,27 +4,29 @@ import { useBudgetsStore } from "./budget";
 import { useSessionStore } from "./session";
 
 interface State {
-    Accounts: Map<string, Account>,
-    CurrentAccountID: string | null,
-    Categories: Map<string, Category>,
-    Months: Map<number, Map<number, Map<string, Category>>>,
-    Transactions: Map<string, Transaction>,
+    Accounts: Map<string, Account>
+    CurrentAccountID: string | null
+    Categories: Map<string, Category>
+    Months: Map<number, Map<number, Map<string, Category>>>
+    Transactions: Map<string, Transaction>
     Assignments: []
+    Reconciling: boolean
 }
 
 export interface Transaction {
-    ID: string,
-    Date: Date,
-    TransferAccount: string,
-    CategoryGroup: string,
-    Category: string,
-    CategoryID: string | undefined,
-    Memo: string,
-    Status: string,
-    GroupID: string,
-    Payee: string,
-    PayeeID: string | undefined,
-    Amount: number,
+    ID: string
+    Date: Date
+    TransferAccount: string
+    CategoryGroup: string
+    Category: string
+    CategoryID: string | undefined
+    Memo: string
+    Status: string
+    GroupID: string
+    Payee: string
+    PayeeID: string | undefined
+    Amount: number
+    Reconciled: boolean
 }
 
 export interface Account {
@@ -54,7 +56,8 @@ export const useAccountStore = defineStore("budget/account", {
         Months: new Map<number, Map<number, Map<string, Category>>>(),
         Categories: new Map<string, Category>(),
         Transactions: new Map<string, Transaction>(),
-        Assignments: []
+        Assignments: [],
+        Reconciling: false,
     }),
     getters: {
         AccountsList(state) {
@@ -93,6 +96,14 @@ export const useAccountStore = defineStore("budget/account", {
 
             return state.Accounts.get(state.CurrentAccountID);
         },
+        ReconcilingBalance(state): number {
+            let reconciledBalance = this.CurrentAccount!.ReconciledBalance;
+            for (const transaction of this.TransactionsList) {
+                if(transaction.Reconciled)
+                    reconciledBalance += transaction.Amount;
+            }
+            return reconciledBalance;
+        },
         OnBudgetAccounts(state) {
             return [...state.Accounts.values()].filter(x => x.OnBudget);
         },