show transaction date time in current timezone when hover over the transaction time

src/views/base/accounts/ReconciliationStatementPageBase.ts

@@ -7,6 +7,7 @@ import { useAccountsStore } from '@/stores/account.ts';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 
 import type { TypeAndDisplayName } from '@/core/base.ts';
+import type { NumeralSystem } from '@/core/numeral.ts';
 import type { WeekDayValue } from '@/core/datetime.ts';
 import { TimezoneTypeForStatistics } from '@/core/timezone.ts';
 import { TransactionType } from '@/core/transaction.ts';
@@ -36,6 +37,7 @@ export function useReconciliationStatementPageBase() {
         getAllAccountBalanceTrendChartTypes,
         getAllStatisticsDateAggregationTypesWithShortName,
         getAllTimezoneTypesUsedForStatistics,
+        getCurrentNumeralSystemType,
         formatDateTimeToLongDateTime,
         formatDateTimeToLongDate,
         formatDateTimeToShortTime,
@@ -55,6 +57,7 @@ export function useReconciliationStatementPageBase() {
     const chartDataDateAggregationType = ref<number>(ChartDateAggregationType.Day.type);
     const timezoneUsedForDateRange = ref<number>(TimezoneTypeForStatistics.ApplicationTimezone.type);
 
+    const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
     const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
     const fiscalYearStart = computed<number>(() => userStore.currentUserFiscalYearStart);
     const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
@@ -188,6 +191,13 @@ export function useReconciliationStatementPageBase() {
         return `UTC${getUtcOffsetByUtcOffsetMinutes(transaction.utcOffset)}`;
     }
 
+    function getDisplayTimeInDefaultTimezone(transaction: TransactionReconciliationStatementResponseItemWithInfo): string {
+        const timezoneOffsetMinutes = getTimezoneOffsetMinutes(transaction.time);
+        const dateTime = parseDateTimeFromUnixTimeWithTimezoneOffset(transaction.time, timezoneOffsetMinutes);
+        const utcOffset = numeralSystem.value.replaceWesternArabicDigitsToLocalizedDigits(getUtcOffsetByUtcOffsetMinutes(timezoneOffsetMinutes));
+        return `${formatDateTimeToLongDateTime(dateTime)} (UTC${utcOffset})`;
+    }
+
     function getDisplaySourceAmount(transaction: TransactionReconciliationStatementResponseItemWithInfo): string {
         const currency = transaction.sourceAccount?.currency ?? defaultCurrency.value;
         return formatAmountToLocalizedNumeralsWithCurrency(transaction.sourceAmount, currency);
@@ -320,6 +330,7 @@ export function useReconciliationStatementPageBase() {
         getDisplayTime,
         isSameAsDefaultTimezoneOffsetMinutes,
         getDisplayTimezone,
+        getDisplayTimeInDefaultTimezone,
         getDisplaySourceAmount,
         getDisplayDestinationAmount,
         getDisplayAccountBalance,

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

@@ -158,6 +158,7 @@
                         <span>{{ getDisplayDateTime(item) }}</span>
                         <v-chip class="ms-1" variant="flat" color="secondary" size="x-small"
                                 v-if="!isSameAsDefaultTimezoneOffsetMinutes(item)">{{ getDisplayTimezone(item) }}</v-chip>
+                        <v-tooltip activator="parent" v-if="!isSameAsDefaultTimezoneOffsetMinutes(item)">{{ getDisplayTimeInDefaultTimezone(item) }}</v-tooltip>
                     </template>
                     <template #item.type="{ item }">
                         <v-chip label variant="outlined" size="x-small"
@@ -358,6 +359,7 @@ const {
     getDisplayDateTime,
     isSameAsDefaultTimezoneOffsetMinutes,
     getDisplayTimezone,
+    getDisplayTimeInDefaultTimezone,
     getDisplaySourceAmount,
     getDisplayDestinationAmount,
     getDisplayAccountBalance,