show tooltip with amounts converted using the current default currency exchange rate for account balances and other amount values in the desktop account reconciliation statement dialog

Author: mayswind

src/views/base/accounts/ReconciliationStatementPageBase.ts

@@ -118,30 +118,58 @@ export function useReconciliationStatementPageBase() {
     });
 
     const displayTotalInflows = computed<string>(() => {
-        return formatAmountToLocalizedNumeralsWithCurrency(reconciliationStatements.value?.totalInflows ?? 0, currentAccountCurrency.value);
+        return formatAmount(reconciliationStatements.value?.totalInflows ?? 0, false, currentAccountCurrency.value);
+    });
+
+    const displayTotalInflowsInDefaultCurrency = computed<string>(() => {
+        return formatAmount(reconciliationStatements.value?.totalInflows ?? 0, false, currentAccountCurrency.value, true);
     });
 
     const displayTotalOutflows = computed<string>(() => {
-        return formatAmountToLocalizedNumeralsWithCurrency(reconciliationStatements.value?.totalOutflows ?? 0, currentAccountCurrency.value);
+        return formatAmount(reconciliationStatements.value?.totalOutflows ?? 0, false, currentAccountCurrency.value);
+    });
+
+    const displayTotalOutflowsInDefaultCurrency = computed<string>(() => {
+        return formatAmount(reconciliationStatements.value?.totalOutflows ?? 0, false, currentAccountCurrency.value, true);
     });
 
     const displayTotalBalance = computed<string>(() => {
-        return formatAmountToLocalizedNumeralsWithCurrency((reconciliationStatements?.value?.totalInflows ?? 0) - (reconciliationStatements.value?.totalOutflows ?? 0), currentAccountCurrency.value);
+        return formatAmount((reconciliationStatements?.value?.totalInflows ?? 0) - (reconciliationStatements.value?.totalOutflows ?? 0), false, currentAccountCurrency.value);
+    });
+
+    const displayTotalBalanceInDefaultCurrency = computed<string>(() => {
+        return formatAmount((reconciliationStatements?.value?.totalInflows ?? 0) - (reconciliationStatements.value?.totalOutflows ?? 0), false, currentAccountCurrency.value, true);
     });
 
     const displayOpeningBalance = computed<string>(() => {
         if (isCurrentLiabilityAccount.value) {
-            return formatAmountToLocalizedNumeralsWithCurrency(-(reconciliationStatements?.value?.openingBalance ?? 0), currentAccountCurrency.value);
+            return formatAmount(-(reconciliationStatements?.value?.openingBalance ?? 0), false, currentAccountCurrency.value);
+        } else {
+            return formatAmount(reconciliationStatements?.value?.openingBalance ?? 0, false, currentAccountCurrency.value);
+        }
+    });
+
+    const displayOpeningBalanceInDefaultCurrency = computed<string>(() => {
+        if (isCurrentLiabilityAccount.value) {
+            return formatAmount(-(reconciliationStatements?.value?.openingBalance ?? 0), false, currentAccountCurrency.value, true);
         } else {
-            return formatAmountToLocalizedNumeralsWithCurrency(reconciliationStatements?.value?.openingBalance ?? 0, currentAccountCurrency.value);
+            return formatAmount(reconciliationStatements?.value?.openingBalance ?? 0, false, currentAccountCurrency.value, true);
         }
     });
 
     const displayClosingBalance = computed<string>(() => {
         if (isCurrentLiabilityAccount.value) {
-            return formatAmountToLocalizedNumeralsWithCurrency(-(reconciliationStatements?.value?.closingBalance ?? 0), currentAccountCurrency.value);
+            return formatAmount(-(reconciliationStatements?.value?.closingBalance ?? 0), false, currentAccountCurrency.value);
+        } else {
+            return formatAmount(reconciliationStatements?.value?.closingBalance ?? 0, false, currentAccountCurrency.value);
+        }
+    });
+
+    const displayClosingBalanceInDefaultCurrency = computed<string>(() => {
+        if (isCurrentLiabilityAccount.value) {
+            return formatAmount(-(reconciliationStatements?.value?.closingBalance ?? 0), false, currentAccountCurrency.value, true);
         } else {
-            return formatAmountToLocalizedNumeralsWithCurrency(reconciliationStatements?.value?.closingBalance ?? 0, currentAccountCurrency.value);
+            return formatAmount(reconciliationStatements?.value?.closingBalance ?? 0, false, currentAccountCurrency.value, true);
         }
     });
 
@@ -245,7 +273,7 @@ export function useReconciliationStatementPageBase() {
         return formatAmount(transaction.destinationAmount, transaction.hideAmount, transaction.destinationAccount?.currency ?? defaultCurrency.value, inDefaultCurrency);
     }
 
-    function getDisplayAccountBalance(transaction: TransactionReconciliationStatementResponseItemWithInfo): string {
+    function getDisplayAccountBalance(transaction: TransactionReconciliationStatementResponseItemWithInfo, inDefaultCurrency?: boolean): string {
         let currency = defaultCurrency.value;
         let isLiabilityAccount = false;
 
@@ -260,9 +288,9 @@ export function useReconciliationStatementPageBase() {
         }
 
         if (isLiabilityAccount) {
-            return formatAmountToLocalizedNumeralsWithCurrency(-transaction.accountClosingBalance, currency);
+            return formatAmount(-transaction.accountClosingBalance, false, currency, inDefaultCurrency);
         } else {
-            return formatAmountToLocalizedNumeralsWithCurrency(transaction.accountClosingBalance, currency);
+            return formatAmount(transaction.accountClosingBalance, false, currency, inDefaultCurrency);
         }
     }
 
@@ -355,10 +383,15 @@ export function useReconciliationStatementPageBase() {
         displayStartDateTime,
         displayEndDateTime,
         displayTotalInflows,
+        displayTotalInflowsInDefaultCurrency,
         displayTotalOutflows,
+        displayTotalOutflowsInDefaultCurrency,
         displayTotalBalance,
+        displayTotalBalanceInDefaultCurrency,
         displayOpeningBalance,
+        displayOpeningBalanceInDefaultCurrency,
         displayClosingBalance,
+        displayClosingBalanceInDefaultCurrency,
         // functions
         updatePageOpenTime,
         setReconciliationStatements,

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

@@ -109,13 +109,19 @@
                         </span>
                         <span class="text-primary ms-2" v-else-if="!loading">
                             {{ displayOpeningBalance }}
+                            <v-tooltip activator="parent" v-if="currentAccountCurrency !== defaultCurrency">
+                                <span>{{ displayOpeningBalanceInDefaultCurrency }}</span>
+                            </v-tooltip>
                         </span>
                         <span class="ms-3">{{ tt('Closing Balance') }}</span>
                         <span class="text-primary" v-if="loading">
                             <v-skeleton-loader class="skeleton-no-margin ms-3" type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
                         </span>
                         <span class="text-primary ms-2" v-else-if="!loading">
                             {{ displayClosingBalance }}
+                            <v-tooltip activator="parent" v-if="currentAccountCurrency !== defaultCurrency">
+                                <span>{{ displayClosingBalanceInDefaultCurrency }}</span>
+                            </v-tooltip>
                         </span>
                     </div>
                     <v-spacer/>
@@ -126,20 +132,29 @@
                         </span>
                         <span class="text-income ms-2" v-else-if="!loading">
                             {{ displayTotalInflows }}
+                            <v-tooltip activator="parent" v-if="currentAccountCurrency !== defaultCurrency">
+                                <span>{{ displayTotalInflowsInDefaultCurrency }}</span>
+                            </v-tooltip>
                         </span>
                         <span class="ms-3">{{ tt('Total Outflows') }}</span>
                         <span class="text-expense" v-if="loading">
                             <v-skeleton-loader class="skeleton-no-margin ms-3" type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
                         </span>
                         <span class="text-expense ms-2" v-else-if="!loading">
                             {{ displayTotalOutflows }}
+                            <v-tooltip activator="parent" v-if="currentAccountCurrency !== defaultCurrency">
+                                <span>{{ displayTotalOutflowsInDefaultCurrency }}</span>
+                            </v-tooltip>
                         </span>
                         <span class="ms-3">{{ tt('Net Cash Flow') }}</span>
                         <span class="text-primary" v-if="loading">
                             <v-skeleton-loader class="skeleton-no-margin ms-3" type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
                         </span>
                         <span class="text-primary ms-2" v-else-if="!loading">
                             {{ displayTotalBalance }}
+                            <v-tooltip activator="parent" v-if="currentAccountCurrency !== defaultCurrency">
+                                <span>{{ displayTotalBalanceInDefaultCurrency }}</span>
+                            </v-tooltip>
                         </span>
                     </div>
                 </div>
@@ -205,6 +220,9 @@
                     </template>
                     <template #item.accountBalance="{ item }">
                         <span>{{ getDisplayAccountBalance(item) }}</span>
+                        <v-tooltip activator="parent" v-if="currentAccountCurrency !== defaultCurrency">
+                            <span>{{ getDisplayAccountBalance(item, true) }}</span>
+                        </v-tooltip>
                     </template>
                     <template #item.operation="{ item }">
                         <v-btn density="compact" variant="text" color="default" :disabled="loading || updatingLastReconciledTime || item.type === TransactionType.ModifyBalance"
@@ -378,10 +396,15 @@ const {
     displayStartDateTime,
     displayEndDateTime,
     displayTotalInflows,
+    displayTotalInflowsInDefaultCurrency,
     displayTotalOutflows,
+    displayTotalOutflowsInDefaultCurrency,
     displayTotalBalance,
+    displayTotalBalanceInDefaultCurrency,
     displayOpeningBalance,
+    displayOpeningBalanceInDefaultCurrency,
     displayClosingBalance,
+    displayClosingBalanceInDefaultCurrency,
     updatePageOpenTime,
     setReconciliationStatements,
     getDisplayTransactionType,