show opening / closing balance in reconciliation statement dialog

src/views/base/transactions/ReconciliationStatementPageBase.ts

@@ -34,6 +34,8 @@ export function useReconciliationStatementPageBase() {
     const startTime = ref<number>(0);
     const endTime = ref<number>(0);
     const reconciliationStatements = ref<TransactionReconciliationStatementResponseItem[]>([]);
+    const openingBalance = ref<number>(0);
+    const closingBalance = ref<number>(0);
 
     const currentTimezoneOffsetMinutes = computed<number>(() => getTimezoneOffsetMinutes(settingsStore.appSettings.timeZone));
     const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
@@ -41,15 +43,17 @@ export function useReconciliationStatementPageBase() {
     const allAccountsMap = computed<Record<string, Account>>(() => accountsStore.allAccountsMap);
     const allCategoriesMap = computed<Record<string, TransactionCategory>>(() => transactionCategoriesStore.allTransactionCategoriesMap);
 
-    const displayStartDateTime = computed<string>(() => {
-        return formatUnixTimeToLongDateTime(startTime.value);
+    const accountCurrency = computed<string>(() => {
+        let currency = defaultCurrency.value;
+
+        if (allAccountsMap.value[accountId.value]) {
+            currency = allAccountsMap.value[accountId.value].currency;
+        }
+
+        return currency;
     });
 
-    const displayEndDateTime = computed<string>(() => {
-        return formatUnixTimeToLongDateTime(endTime.value);
-    });
-
-    const displayTotalOutflows = computed<string>(() => {
+    const totalOutflows = computed<number>(() => {
         let totalOutflows = 0;
 
         for (let i = 0; i < reconciliationStatements.value.length; i++) {
@@ -62,16 +66,10 @@ export function useReconciliationStatementPageBase() {
             }
         }
 
-        let currency = defaultCurrency.value;
-
-        if (allAccountsMap.value[accountId.value]) {
-            currency = allAccountsMap.value[accountId.value].currency;
-        }
-
-        return formatAmountWithCurrency(totalOutflows, currency);
+        return totalOutflows;
     });
 
-    const displayTotalInflows = computed<string>(() => {
+    const totalInflows = computed<number>(() => {
         let totalInflows = 0;
 
         for (let i = 0; i < reconciliationStatements.value.length; i++) {
@@ -84,13 +82,55 @@ export function useReconciliationStatementPageBase() {
             }
         }
 
-        let currency = defaultCurrency.value;
+        return totalInflows;
+    });
+
+    const displayStartDateTime = computed<string>(() => {
+        return formatUnixTimeToLongDateTime(startTime.value);
+    });
+
+    const displayEndDateTime = computed<string>(() => {
+        return formatUnixTimeToLongDateTime(endTime.value);
+    });
+
+    const displayTotalOutflows = computed<string>(() => {
+        return formatAmountWithCurrency(totalOutflows.value, accountCurrency.value);
+    });
+
+    const displayTotalInflows = computed<string>(() => {
+        return formatAmountWithCurrency(totalInflows.value, accountCurrency.value);
+    });
+
+    const displayTotalBalance = computed<string>(() => {
+        return formatAmountWithCurrency(totalInflows.value - totalOutflows.value, accountCurrency.value);
+    });
+
+    const displayOpeningBalance = computed<string>(() => {
+        let isLiabilityAccount = false;
 
         if (allAccountsMap.value[accountId.value]) {
-            currency = allAccountsMap.value[accountId.value].currency;
+            isLiabilityAccount = allAccountsMap.value[accountId.value].isLiability;
         }
 
-        return formatAmountWithCurrency(totalInflows, currency);
+        if (isLiabilityAccount) {
+            return formatAmountWithCurrency(-openingBalance.value, accountCurrency.value);
+        } else {
+            return formatAmountWithCurrency(openingBalance.value, accountCurrency.value);
+        }
+    });
+
+    const displayClosingBalance = computed<string>(() => {
+        let isLiabilityAccount = false;
+
+        if (allAccountsMap.value[accountId.value]) {
+            isLiabilityAccount = allAccountsMap.value[accountId.value].isLiability;
+        }
+
+        if (isLiabilityAccount) {
+            return formatAmountWithCurrency(-closingBalance.value, accountCurrency.value);
+        } else {
+            return formatAmountWithCurrency(closingBalance.value, accountCurrency.value);
+        }
     });
 
     function getDisplayDateTime(transaction: TransactionReconciliationStatementResponseItem): string {
@@ -149,6 +189,8 @@ export function useReconciliationStatementPageBase() {
         startTime,
         endTime,
         reconciliationStatements,
+        openingBalance,
+        closingBalance,
         // computed states
         currentTimezoneOffsetMinutes,
         defaultCurrency,
@@ -158,6 +200,9 @@ export function useReconciliationStatementPageBase() {
         displayEndDateTime,
         displayTotalOutflows,
         displayTotalInflows,
+        displayTotalBalance,
+        displayOpeningBalance,
+        displayClosingBalance,
         // functions
         getDisplayDateTime,
         getDisplayTimezone,

src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue

@@ -9,14 +9,61 @@
                     </div>
                 </div>
             </template>
+
             <template #subtitle>
-                <div class="text-body-1 text-center text-wrap mt-2">
+                <div class="text-body-1 text-center text-wrap mt-2" v-if="!startTime && !endTime">
+                    <span>{{ tt('All') }}</span>
+                </div>
+                <div class="text-body-1 text-center text-wrap mt-2" v-if="startTime || endTime">
                     <span>{{ displayStartDateTime }}</span>
                     <span> - </span>
                     <span>{{ displayEndDateTime }}</span>
                 </div>
             </template>
 
+            <div class="d-flex align-center" :class="{'mb-4': !loading}">
+                <div class="d-flex align-center text-body-1">
+                    <span class="ml-2">{{ tt('Opening Balance') }}</span>
+                    <span class="text-primary" v-if="loading">
+                        <v-skeleton-loader type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
+                    </span>
+                    <span class="text-primary ml-2" v-else-if="!loading">
+                        {{ displayOpeningBalance }}
+                    </span>
+                    <span class="ml-3">{{ tt('Closing Balance') }}</span>
+                    <span class="text-primary" v-if="loading">
+                        <v-skeleton-loader type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
+                    </span>
+                    <span class="text-primary ml-2" v-else-if="!loading">
+                        {{ displayClosingBalance }}
+                    </span>
+                </div>
+                <v-spacer/>
+                <div class="d-flex align-center text-body-1">
+                    <span class="ml-2">{{ tt('Total Inflows') }}</span>
+                    <span class="text-income" v-if="loading">
+                        <v-skeleton-loader type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
+                    </span>
+                    <span class="text-income ml-2" v-else-if="!loading">
+                        {{ displayTotalInflows }}
+                    </span>
+                    <span class="ml-3">{{ tt('Total Outflows') }}</span>
+                    <span class="text-expense" v-if="loading">
+                        <v-skeleton-loader type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
+                    </span>
+                    <span class="text-expense ml-2" v-else-if="!loading">
+                        {{ displayTotalOutflows }}
+                    </span>
+                    <span class="ml-3">{{ tt('Total Balance') }}</span>
+                    <span class="text-primary" v-if="loading">
+                        <v-skeleton-loader type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
+                    </span>
+                    <span class="text-primary ml-2" v-else-if="!loading">
+                        {{ displayTotalBalance }}
+                    </span>
+                </div>
+            </div>
+
             <v-data-table
                 fixed-header
                 fixed-footer
@@ -72,20 +119,13 @@
                     <span>{{ getDisplayAccountBalance(item) }}</span>
                 </template>
                 <template #bottom>
-                    <div class="title-and-toolbar d-flex align-center text-no-wrap mt-2">
-                        <span class="ml-2">{{ tt('Total Inflows') }}</span>
-                        <span class="text-income" v-if="loading">
+                    <div class="title-and-toolbar d-flex align-center text-no-wrap mt-2" v-if="loading || reconciliationStatements.length">
+                        <span class="ml-2">{{ tt('Total Transactions') }}</span>
+                        <span v-if="loading">
                             <v-skeleton-loader type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
                         </span>
-                        <span class="text-income ml-2" v-else-if="!loading">
-                            {{ displayTotalInflows }}
-                        </span>
-                        <span class="ml-3">{{ tt('Total Outflows') }}</span>
-                        <span class="text-expense" v-if="loading">
-                            <v-skeleton-loader type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
-                        </span>
-                        <span class="text-expense ml-2" v-else-if="!loading">
-                            {{ displayTotalOutflows }}
+                        <span class="ml-2" v-else-if="!loading">
+                            {{ reconciliationStatements.length }}
                         </span>
                         <v-spacer/>
                         <span v-if="reconciliationStatements && reconciliationStatements.length > 10">
@@ -153,6 +193,8 @@ const {
     startTime,
     endTime,
     reconciliationStatements,
+    openingBalance,
+    closingBalance,
     currentTimezoneOffsetMinutes,
     allAccountsMap,
     allCategoriesMap,
@@ -160,6 +202,9 @@ const {
     displayEndDateTime,
     displayTotalOutflows,
     displayTotalInflows,
+    displayTotalBalance,
+    displayOpeningBalance,
+    displayClosingBalance,
     getDisplayDateTime,
     getDisplayTimezone,
     getDisplaySourceAmount,
@@ -255,6 +300,8 @@ function open(options: { accountId: string, startTime: number, endTime: number }
         });
     }).then(result => {
         reconciliationStatements.value = result.transactions;
+        openingBalance.value = result.openingBalance;
+        closingBalance.value = result.closingBalance;
         loading.value = false;
     }).catch(error => {
         loading.value = false;