show opening / closing balance in reconciliation statement dialog

src/locales/de.json

@@ -1830,6 +1830,9 @@
     "Total Outflows": "Total Outflows",
     "Total Inflows": "Total Inflows",
     "Total Balance": "Gesamtsaldo",
+    "Total Transactions": "Total Transactions",
+    "Opening Balance": "Opening Balance",
+    "Closing Balance": "Closing Balance",
     "Expense By Account": "Ausgaben nach Konto",
     "Expense By Primary Category": "Ausgaben nach Primärkategorie",
     "Expense By Secondary Category": "Ausgaben nach Sekundärkategorie",

src/locales/en.json

@@ -1830,6 +1830,9 @@
     "Total Outflows": "Total Outflows",
     "Total Inflows": "Total Inflows",
     "Total Balance": "Total Balance",
+    "Total Transactions": "Total Transactions",
+    "Opening Balance": "Opening Balance",
+    "Closing Balance": "Closing Balance",
     "Expense By Account": "Expense By Account",
     "Expense By Primary Category": "Expense By Primary Category",
     "Expense By Secondary Category": "Expense By Secondary Category",

src/locales/es.json

@@ -1830,6 +1830,9 @@
     "Total Outflows": "Total Outflows",
     "Total Inflows": "Total Inflows",
     "Total Balance": "Saldo total",
+    "Total Transactions": "Total Transactions",
+    "Opening Balance": "Opening Balance",
+    "Closing Balance": "Closing Balance",
     "Expense By Account": "Gasto por cuenta",
     "Expense By Primary Category": "Gasto por categoría primaria",
     "Expense By Secondary Category": "Gasto por categoría secundaria",

src/locales/it.json

@@ -1830,6 +1830,9 @@
     "Total Outflows": "Total Outflows",
     "Total Inflows": "Total Inflows",
     "Total Balance": "Saldo totale",
+    "Total Transactions": "Total Transactions",
+    "Opening Balance": "Opening Balance",
+    "Closing Balance": "Closing Balance",
     "Expense By Account": "Spesa per conto",
     "Expense By Primary Category": "Spesa per categoria principale",
     "Expense By Secondary Category": "Spesa per categoria secondaria",

src/locales/ja.json

@@ -1830,6 +1830,9 @@
     "Total Outflows": "Total Outflows",
     "Total Inflows": "Total Inflows",
     "Total Balance": "残高合計",
+    "Total Transactions": "Total Transactions",
+    "Opening Balance": "Opening Balance",
+    "Closing Balance": "Closing Balance",
     "Expense By Account": "口座別の支出",
     "Expense By Primary Category": "一次カテゴリ別の支出",
     "Expense By Secondary Category": "二次カテゴリ別の支出",

src/locales/pt_BR.json

@@ -1830,6 +1830,9 @@
     "Total Outflows": "Total Outflows",
     "Total Inflows": "Total Inflows",
     "Total Balance": "Saldo Total",
+    "Total Transactions": "Total Transactions",
+    "Opening Balance": "Opening Balance",
+    "Closing Balance": "Closing Balance",
     "Expense By Account": "Despesa por Conta",
     "Expense By Primary Category": "Despesa por Categoria Primária",
     "Expense By Secondary Category": "Despesa por Categoria Secundária",

src/locales/ru.json

@@ -1830,6 +1830,9 @@
     "Total Outflows": "Total Outflows",
     "Total Inflows": "Total Inflows",
     "Total Balance": "Общий баланс",
+    "Total Transactions": "Total Transactions",
+    "Opening Balance": "Opening Balance",
+    "Closing Balance": "Closing Balance",
     "Expense By Account": "Расходы по счетам",
     "Expense By Primary Category": "Расходы по основной категории",
     "Expense By Secondary Category": "Расходы по вторичной категории",

src/locales/uk.json

@@ -1830,6 +1830,9 @@
     "Total Outflows": "Total Outflows",
     "Total Inflows": "Total Inflows",
     "Total Balance": "Загальний баланс",
+    "Total Transactions": "Total Transactions",
+    "Opening Balance": "Opening Balance",
+    "Closing Balance": "Closing Balance",
     "Expense By Account": "Витрати за рахунками",
     "Expense By Primary Category": "Витрати за основними категоріями",
     "Expense By Secondary Category": "Витрати за другорядними категоріями",

src/locales/vi.json

@@ -1830,6 +1830,9 @@
     "Total Outflows": "Total Outflows",
     "Total Inflows": "Total Inflows",
     "Total Balance": "Tổng số dư",
+    "Total Transactions": "Total Transactions",
+    "Opening Balance": "Opening Balance",
+    "Closing Balance": "Closing Balance",
     "Expense By Account": "Chi phí theo tài khoản",
     "Expense By Primary Category": "Chi phí theo danh mục chính",
     "Expense By Secondary Category": "Chi phí theo danh mục phụ",

src/locales/zh_Hans.json

@@ -1830,6 +1830,9 @@
     "Total Outflows": "总流出",
     "Total Inflows": "总流入",
     "Total Balance": "总结余",
+    "Total Transactions": "总交易数",
+    "Opening Balance": "期初余额",
+    "Closing Balance": "期末余额",
     "Expense By Account": "账户支出",
     "Expense By Primary Category": "一级分类支出",
     "Expense By Secondary Category": "二级分类支出",

src/locales/zh_Hant.json

@@ -1830,6 +1830,9 @@
     "Total Outflows": "總流出",
     "Total Inflows": "總流入",
     "Total Balance": "總結餘",
+    "Total Transactions": "總交易數",
+    "Opening Balance": "期初餘額",
+    "Closing Balance": "期末餘額",
     "Expense By Account": "帳戶支出",
     "Expense By Primary Category": "一級分類支出",
     "Expense By Secondary Category": "二級分類支出",

src/models/transaction.ts

@@ -667,6 +667,8 @@ export interface TransactionReconciliationStatementResponseItem extends Transact
 
 export interface TransactionReconciliationStatementResponse {
     readonly transactions: TransactionReconciliationStatementResponseItem[];
+    readonly openingBalance: number;
+    readonly closingBalance: number;
 }
 
 export interface TransactionPageWrapper {

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;