add reconciliation statement in desktop version

src/views/base/accounts/AccountListPageBase.ts

@@ -6,6 +6,7 @@ import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 
+import type { WeekDayValue } from '@/core/datetime.ts';
 import { type AccountCategory, AccountType } from '@/core/account.ts';
 import type { Account, CategorizedAccount } from '@/models/account.ts';
 
@@ -27,6 +28,8 @@ export function useAccountListPageBaseBase() {
         set: (value) => settingsStore.setShowAccountBalance(value)
     });
 
+    const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
+    const fiscalYearStart = computed<number>(() => userStore.currentUserFiscalYearStart);
     const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
 
     const allAccounts = computed<Account[]>(() => accountsStore.allAccounts);
@@ -86,6 +89,8 @@ export function useAccountListPageBaseBase() {
         displayOrderModified,
         // computed states
         showAccountBalance,
+        firstDayOfWeek,
+        fiscalYearStart,
         defaultCurrency,
         allAccounts,
         allCategorizedAccountsMap,

src/views/base/transactions/ReconciliationStatementPageBase.ts

@@ -0,0 +1,168 @@
+import { ref, computed } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useSettingsStore } from '@/stores/setting.ts';
+import { useUserStore } from '@/stores/user.ts';
+import { useAccountsStore } from '@/stores/account.ts';
+import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
+
+import { TransactionType } from '@/core/transaction.ts';
+import type { Account } from '@/models/account.ts';
+import type { TransactionCategory } from '@/models/transaction_category.ts';
+import type { TransactionReconciliationStatementResponseItem } from '@/models/transaction.ts';
+
+import {
+    getUtcOffsetByUtcOffsetMinutes,
+    getTimezoneOffsetMinutes,
+    parseDateFromUnixTime,
+    getUnixTime
+} from '@/lib/datetime.ts';
+
+export function useReconciliationStatementPageBase() {
+    const {
+        formatUnixTimeToLongDateTime,
+        formatAmountWithCurrency
+    } = useI18n();
+
+    const settingsStore = useSettingsStore();
+    const userStore = useUserStore();
+    const accountsStore = useAccountsStore();
+    const transactionCategoriesStore = useTransactionCategoriesStore();
+
+    const accountId = ref<string>('');
+    const startTime = ref<number>(0);
+    const endTime = ref<number>(0);
+    const reconciliationStatements = ref<TransactionReconciliationStatementResponseItem[]>([]);
+
+    const currentTimezoneOffsetMinutes = computed<number>(() => getTimezoneOffsetMinutes(settingsStore.appSettings.timeZone));
+    const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
+
+    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 displayEndDateTime = computed<string>(() => {
+        return formatUnixTimeToLongDateTime(endTime.value);
+    });
+
+    const displayTotalOutflows = computed<string>(() => {
+        let totalOutflows = 0;
+
+        for (let i = 0; i < reconciliationStatements.value.length; i++) {
+            const transaction = reconciliationStatements.value[i];
+
+            if (transaction.type === TransactionType.Expense) {
+                totalOutflows += transaction.sourceAmount;
+            } else if (transaction.type === TransactionType.Transfer && transaction.sourceAccountId === accountId.value) {
+                totalOutflows += transaction.sourceAmount;
+            }
+        }
+
+        let currency = defaultCurrency.value;
+
+        if (allAccountsMap.value[accountId.value]) {
+            currency = allAccountsMap.value[accountId.value].currency;
+        }
+
+        return formatAmountWithCurrency(totalOutflows, currency);
+    });
+
+    const displayTotalInflows = computed<string>(() => {
+        let totalInflows = 0;
+
+        for (let i = 0; i < reconciliationStatements.value.length; i++) {
+            const transaction = reconciliationStatements.value[i];
+
+            if (transaction.type === TransactionType.Income) {
+                totalInflows += transaction.sourceAmount;
+            } else if (transaction.type === TransactionType.Transfer && transaction.destinationAccountId === accountId.value) {
+                totalInflows += transaction.destinationAmount;
+            }
+        }
+
+        let currency = defaultCurrency.value;
+
+        if (allAccountsMap.value[accountId.value]) {
+            currency = allAccountsMap.value[accountId.value].currency;
+        }
+
+        return formatAmountWithCurrency(totalInflows, currency);
+    });
+
+    function getDisplayDateTime(transaction: TransactionReconciliationStatementResponseItem): string {
+        const transactionTime = getUnixTime(parseDateFromUnixTime(transaction.time, transaction.utcOffset, currentTimezoneOffsetMinutes.value));
+        return formatUnixTimeToLongDateTime(transactionTime);
+    }
+
+    function getDisplayTimezone(transaction: TransactionReconciliationStatementResponseItem): string {
+        return `UTC${getUtcOffsetByUtcOffsetMinutes(transaction.utcOffset)}`;
+    }
+
+    function getDisplaySourceAmount(transaction: TransactionReconciliationStatementResponseItem): string {
+        let currency = defaultCurrency.value;
+
+        if (allAccountsMap.value[transaction.sourceAccountId]) {
+            currency = allAccountsMap.value[transaction.sourceAccountId].currency;
+        }
+
+        return formatAmountWithCurrency(transaction.sourceAmount, currency);
+    }
+
+    function getDisplayDestinationAmount(transaction: TransactionReconciliationStatementResponseItem): string {
+        let currency = defaultCurrency.value;
+
+        if (allAccountsMap.value[transaction.destinationAccountId]) {
+            currency = allAccountsMap.value[transaction.destinationAccountId].currency;
+        }
+
+        return formatAmountWithCurrency(transaction.destinationAmount, currency);
+    }
+
+    function getDisplayAccountBalance(transaction: TransactionReconciliationStatementResponseItem): string {
+        let currency = defaultCurrency.value;
+        let isLiabilityAccount = false;
+
+        if (transaction.type === TransactionType.Transfer && transaction.destinationAccountId === accountId.value) {
+            if (allAccountsMap.value[transaction.destinationAccountId]) {
+                currency = allAccountsMap.value[transaction.destinationAccountId].currency;
+                isLiabilityAccount = allAccountsMap.value[transaction.destinationAccountId].isLiability;
+            }
+        } else if (allAccountsMap.value[transaction.sourceAccountId]) {
+            currency = allAccountsMap.value[transaction.sourceAccountId].currency;
+            isLiabilityAccount = allAccountsMap.value[transaction.sourceAccountId].isLiability;
+        }
+
+        if (isLiabilityAccount) {
+            return formatAmountWithCurrency(-transaction.accountBalance, currency);
+        } else {
+            return formatAmountWithCurrency(transaction.accountBalance, currency);
+        }
+    }
+
+    return {
+        // states
+        accountId,
+        startTime,
+        endTime,
+        reconciliationStatements,
+        // computed states
+        currentTimezoneOffsetMinutes,
+        defaultCurrency,
+        allAccountsMap,
+        allCategoriesMap,
+        displayStartDateTime,
+        displayEndDateTime,
+        displayTotalOutflows,
+        displayTotalInflows,
+        // functions
+        getDisplayDateTime,
+        getDisplayTimezone,
+        getDisplaySourceAmount,
+        getDisplayDestinationAmount,
+        getDisplayAccountBalance
+    };
+}

src/views/desktop/accounts/ListPage.vue

@@ -211,6 +211,28 @@
                                                                            :to="`/transaction/list?accountIds=${element.getAccountOrSubAccountId(activeSubAccount[element.id])}`">
                                                                         {{ tt('Transaction List') }}
                                                                     </v-btn>
+                                                                    <v-btn class="px-2 ml-1" density="comfortable" color="default" variant="text"
+                                                                           :disabled="loading" :prepend-icon="mdiInvoiceListOutline"
+                                                                           @click="showReconciliationStatementCustomDateRangeDialog(element.getAccountOrSubAccount(activeSubAccount[element.id]))"
+                                                                           v-if="element.type === AccountType.SingleAccount.type || element.getSubAccount(activeSubAccount[element.id])">
+                                                                        {{ tt('Reconciliation Statement') }}
+                                                                        <v-menu activator="parent" :open-on-hover="true">
+                                                                            <v-list>
+                                                                                <template :key="dateRange.type"
+                                                                                          v-for="dateRange in accountReconciliationStatementDateRangs(element.getAccountOrSubAccount(activeSubAccount[element.id]))">
+                                                                                    <v-list-item class="text-sm" density="compact"
+                                                                                                 :value="dateRange.type">
+                                                                                        <v-list-item-title class="cursor-pointer"
+                                                                                                           @click="showReconciliationStatementCustomDateRangeDialog(element.getAccountOrSubAccount(activeSubAccount[element.id]), dateRange.type)">
+                                                                                            <div class="d-flex align-center">
+                                                                                                <span class="text-sm ml-3">{{ dateRange.displayName }}</span>
+                                                                                            </div>
+                                                                                        </v-list-item-title>
+                                                                                    </v-list-item>
+                                                                                </template>
+                                                                            </v-list>
+                                                                        </v-menu>
+                                                                    </v-btn>
                                                                     <v-btn class="px-2 ml-1" density="comfortable" color="default" variant="text"
                                                                            :class="{ 'd-none': loading, 'hover-display': !loading }"
                                                                            :disabled="loading"
@@ -258,6 +280,13 @@
     </v-dialog>
 
     <edit-dialog ref="editDialog" />
+    <reconciliation-statement-dialog ref="reconciliationStatementDialog"
+                                     @error="onShowDateRangeError" />
+
+    <date-range-selection-dialog :title="tt('Custom Date Range')"
+                                 v-model:show="showCustomDateRangeDialog"
+                                 @dateRange:change="onCustomDateRangeChanged"
+                                 @error="onShowDateRangeError" />
 
     <confirm-dialog ref="confirmDialog"/>
     <snack-bar ref="snackbar" />
@@ -267,6 +296,7 @@
 import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
 import SnackBar from '@/components/desktop/SnackBar.vue';
 import EditDialog from './list/dialogs/EditDialog.vue';
+import ReconciliationStatementDialog from './list/dialogs/ReconciliationStatementDialog.vue';
 import AccountFilterSettingsCard from '@/views/desktop/common/cards/AccountFilterSettingsCard.vue';
 
 import { ref, computed, useTemplateRef, watch } from 'vue';
@@ -277,9 +307,13 @@ import { useAccountListPageBaseBase } from '@/views/base/accounts/AccountListPag
 
 import { useAccountsStore } from '@/stores/account.ts';
 
+import { DateRange, DateRangeScene, type LocalizedDateRange, type TimeRangeAndDateType } from '@/core/datetime.ts';
 import { AccountType, AccountCategory } from '@/core/account.ts';
 import type { Account } from '@/models/account.ts';
 
+import { isNumber } from '@/lib/common.ts';
+import { getDateRangeByDateType, getDateRangeByBillingCycleDateType } from '@/lib/datetime.ts';
+
 import {
     mdiEyeOutline,
     mdiEyeOffOutline,
@@ -290,6 +324,7 @@ import {
     mdiPencilOutline,
     mdiDeleteOutline,
     mdiListBoxOutline,
+    mdiInvoiceListOutline,
     mdiDrag,
     mdiDotsVertical
 } from '@mdi/js';
@@ -297,16 +332,19 @@ import {
 type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
 type SnackBarType = InstanceType<typeof SnackBar>;
 type EditDialogType = InstanceType<typeof EditDialog>;
+type ReconciliationStatementDialogType = InstanceType<typeof ReconciliationStatementDialog>;
 
 const display = useDisplay();
 
-const { tt, getCurrencyName, joinMultiText } = useI18n();
+const { tt, getAllDateRanges, getCurrencyName, joinMultiText } = useI18n();
 
 const {
     loading,
     showHidden,
     displayOrderModified,
     showAccountBalance,
+    firstDayOfWeek,
+    fiscalYearStart,
     allAccounts,
     allCategorizedAccountsMap,
     allAccountCount,
@@ -322,13 +360,16 @@ const accountsStore = useAccountsStore();
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 const editDialog = useTemplateRef<EditDialogType>('editDialog');
+const reconciliationStatementDialog = useTemplateRef<ReconciliationStatementDialogType>('reconciliationStatementDialog');
 
 const activeAccountCategoryType = ref<number>(AccountCategory.Default.type);
 const activeTab = ref<string>('accountPage');
 const activeSubAccount = ref<Record<string, string>>({});
+const accountToShowReconciliationStatement = ref<Account | null>(null);
 const alwaysShowNav = ref<boolean>(display.mdAndUp.value);
 const showNav = ref<boolean>(display.mdAndUp.value);
 const showAccountsIncludedInTotalDialog = ref<boolean>(false);
+const showCustomDateRangeDialog = ref<boolean>(false);
 
 const hasAnyVisibleAccount = computed<boolean>(() => accountsStore.allVisibleAccountsCount > 0);
 const activeAccountCategory = computed<AccountCategory | undefined>(() => AccountCategory.valueOf(activeAccountCategoryType.value));
@@ -407,6 +448,10 @@ function accountCurrency(account: Account): string | null {
     }
 }
 
+function accountReconciliationStatementDateRangs(account: Account): LocalizedDateRange[] {
+    return getAllDateRanges(DateRangeScene.Normal, true, !!accountsStore.getAccountStatementDate(account.id));
+}
+
 function add(): void {
     editDialog.value?.open({
         category: activeAccountCategoryType.value
@@ -440,6 +485,32 @@ function edit(account: Account): void {
     });
 }
 
+function showReconciliationStatementCustomDateRangeDialog(account: Account, dateRangeType?: number): void {
+    if (!isNumber(dateRangeType) || dateRangeType === DateRange.Custom.type) {
+        accountToShowReconciliationStatement.value = account;
+        showCustomDateRangeDialog.value = true;
+        return;
+    }
+
+    let dateRange: TimeRangeAndDateType | null = null;
+
+    if (DateRange.isBillingCycle(dateRangeType)) {
+        dateRange = getDateRangeByBillingCycleDateType(dateRangeType, firstDayOfWeek.value, fiscalYearStart.value, accountsStore.getAccountStatementDate(account.id));
+    } else {
+        dateRange = getDateRangeByDateType(dateRangeType, firstDayOfWeek.value, fiscalYearStart.value);
+    }
+
+    if (!dateRange) {
+        return;
+    }
+
+    reconciliationStatementDialog.value?.open({
+        accountId: account.id,
+        startTime: dateRange.minTime,
+        endTime: dateRange.maxTime
+    });
+}
+
 function hide(account: Account, targetAccount: Account, hidden: boolean): void {
     loading.value = true;
 
@@ -548,6 +619,27 @@ function onMove(event: { moved: { element: { id: string }, oldIndex: number, new
     });
 }
 
+function onCustomDateRangeChanged(minUnixTime: number, maxUnixTime: number): void {
+    if (!accountToShowReconciliationStatement.value) {
+        snackbar.value?.showMessage('An error occurred');
+        return;
+    }
+
+    showCustomDateRangeDialog.value = false;
+
+    reconciliationStatementDialog.value?.open({
+        accountId: accountToShowReconciliationStatement.value.id,
+        startTime: minUnixTime,
+        endTime: maxUnixTime
+    });
+
+    accountToShowReconciliationStatement.value = null;
+}
+
+function onShowDateRangeError(message: string): void {
+    snackbar.value?.showError(message);
+}
+
 watch(() => display.mdAndUp.value, (newValue) => {
     alwaysShowNav.value = newValue;
 

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

@@ -0,0 +1,281 @@
+<template>
+    <v-dialog :min-height="loading ? 600 : 400" :persistent="loading" v-model="showState">
+        <v-card class="pa-6 pa-sm-10 pa-md-12">
+            <template #title>
+                <div class="d-flex align-center justify-center">
+                    <div class="d-flex w-100 align-center justify-center">
+                        <h4 class="text-h4">{{ tt('Reconciliation Statement') }}</h4>
+                        <v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular>
+                    </div>
+                </div>
+            </template>
+            <template #subtitle>
+                <div class="text-body-1 text-center text-wrap mt-2">
+                    <span>{{ displayStartDateTime }}</span>
+                    <span> - </span>
+                    <span>{{ displayEndDateTime }}</span>
+                </div>
+            </template>
+
+            <v-data-table
+                fixed-header
+                fixed-footer
+                multi-sort
+                density="compact"
+                item-value="index"
+                :class="{ 'disabled': loading }"
+                :headers="dataTableHeaders"
+                :items="reconciliationStatements"
+                :no-data-text="loading ? '' : tt('No transaction data')"
+                v-model:items-per-page="countPerPage"
+                v-model:page="currentPage"
+            >
+                <template #item.time="{ item }">
+                    <span>{{ getDisplayDateTime(item) }}</span>
+                    <v-chip class="ml-1" variant="flat" color="secondary" size="x-small"
+                            v-if="item.utcOffset !== currentTimezoneOffsetMinutes">{{ getDisplayTimezone(item) }}</v-chip>
+                </template>
+                <template #item.type="{ item }">
+                    <v-chip label color="secondary" variant="outlined" size="x-small" v-if="item.type === TransactionType.ModifyBalance">{{ tt('Modify Balance') }}</v-chip>
+                    <v-chip label class="text-income" variant="outlined" size="x-small" v-else-if="item.type === TransactionType.Income">{{ tt('Income') }}</v-chip>
+                    <v-chip label class="text-expense" variant="outlined" size="x-small" v-else-if="item.type === TransactionType.Expense">{{ tt('Expense') }}</v-chip>
+                    <v-chip label color="primary" variant="outlined" size="x-small" v-else-if="item.type === TransactionType.Transfer && item.destinationAccountId === accountId">{{ tt('Transfer In') }}</v-chip>
+                    <v-chip label color="primary" variant="outlined" size="x-small" v-else-if="item.type === TransactionType.Transfer && item.sourceAccountId === accountId">{{ tt('Transfer Out') }}</v-chip>
+                    <v-chip label color="primary" variant="outlined" size="x-small" v-else-if="item.type === TransactionType.Transfer">{{ tt('Transfer') }}</v-chip>
+                    <v-chip label color="default" variant="outlined" size="x-small" v-else>{{ tt('Unknown') }}</v-chip>
+                </template>
+                <template #item.categoryId="{ item }">
+                    <div class="d-flex align-center">
+                        <span v-if="item.type === TransactionType.ModifyBalance">-</span>
+                        <ItemIcon size="24px" icon-type="category"
+                                  :icon-id="allCategoriesMap[item.categoryId].icon"
+                                  :color="allCategoriesMap[item.categoryId].color"
+                                  v-if="item.type !== TransactionType.ModifyBalance && allCategoriesMap[item.categoryId]"></ItemIcon>
+                        <span class="ml-2" v-if="item.type !== TransactionType.ModifyBalance && allCategoriesMap[item.categoryId]">
+                            {{ allCategoriesMap[item.categoryId].name }}
+                        </span>
+                    </div>
+                </template>
+                <template #item.sourceAmount="{ item }">
+                    <span>{{ getDisplaySourceAmount(item) }}</span>
+                    <v-icon class="mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId && getDisplaySourceAmount(item) !== getDisplayDestinationAmount(item)"></v-icon>
+                    <span v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId && getDisplaySourceAmount(item) !== getDisplayDestinationAmount(item)">{{ getDisplayDestinationAmount(item) }}</span>
+                </template>
+                <template #item.sourceAccountId="{ item }">
+                    <div class="d-flex align-center">
+                        <span v-if="item.sourceAccountId && allAccountsMap[item.sourceAccountId]">{{ allAccountsMap[item.sourceAccountId].name }}</span>
+                        <v-icon class="mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer"></v-icon>
+                        <span v-if="item.type === TransactionType.Transfer && item.destinationAccountId && allAccountsMap[item.destinationAccountId]">{{ allAccountsMap[item.destinationAccountId].name }}</span>
+                    </div>
+                </template>
+                <template #item.accountBalance="{ item }">
+                    <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">
+                            <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>
+                        <v-spacer/>
+                        <span v-if="reconciliationStatements && reconciliationStatements.length > 10">
+                            {{ tt('Transactions Per Page') }}
+                        </span>
+                        <v-select class="ml-2" density="compact" max-width="100"
+                                  item-title="title"
+                                  item-value="value"
+                                  :disabled="loading"
+                                  :items="reconciliationStatementsTablePageOptions"
+                                  v-model="countPerPage"
+                                  v-if="reconciliationStatements && reconciliationStatements.length > 10"
+                        />
+                        <pagination-buttons density="compact"
+                                            :disabled="loading"
+                                            :totalPageCount="totalPageCount"
+                                            v-model="currentPage"
+                                            v-if="reconciliationStatements && reconciliationStatements.length > 10">
+                        </pagination-buttons>
+                    </div>
+                </template>
+            </v-data-table>
+
+            <v-card-text class="overflow-y-visible">
+                <div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
+                    <v-btn color="secondary" variant="tonal"
+                           :disabled="loading" @click="close">{{ tt('Close') }}</v-btn>
+                </div>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script setup lang="ts">
+import PaginationButtons from '@/components/desktop/PaginationButtons.vue';
+
+import { ref, computed } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { useReconciliationStatementPageBase } from '@/views/base/transactions/ReconciliationStatementPageBase.ts';
+
+import { useAccountsStore } from '@/stores/account.ts';
+import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
+import { useTransactionsStore } from '@/stores/transaction.ts';
+
+import { TransactionType } from '@/core/transaction.ts';
+
+import {
+    mdiArrowRight
+} from '@mdi/js';
+
+interface ReconciliationStatementDialogTablePageOption {
+    value: number;
+    title: string;
+}
+
+const emit = defineEmits<{
+    (e: 'error', message: string): void;
+}>();
+
+const { tt } = useI18n();
+
+const {
+    accountId,
+    startTime,
+    endTime,
+    reconciliationStatements,
+    currentTimezoneOffsetMinutes,
+    allAccountsMap,
+    allCategoriesMap,
+    displayStartDateTime,
+    displayEndDateTime,
+    displayTotalOutflows,
+    displayTotalInflows,
+    getDisplayDateTime,
+    getDisplayTimezone,
+    getDisplaySourceAmount,
+    getDisplayDestinationAmount,
+    getDisplayAccountBalance
+} = useReconciliationStatementPageBase();
+
+const accountsStore = useAccountsStore();
+const transactionCategoriesStore = useTransactionCategoriesStore();
+const transactionsStore = useTransactionsStore();
+
+const showState = ref<boolean>(false);
+const loading = ref<boolean>(false);
+const currentPage = ref<number>(1);
+const countPerPage = ref<number>(10);
+
+let rejectFunc: ((reason?: unknown) => void) | null = null;
+
+const account = computed(() => allAccountsMap.value[accountId.value]);
+const reconciliationStatementsTablePageOptions = computed<ReconciliationStatementDialogTablePageOption[]>(() => getTablePageOptions(reconciliationStatements.value?.length));
+
+const totalPageCount = computed<number>(() => {
+    if (!reconciliationStatements.value || reconciliationStatements.value.length < 1) {
+        return 1;
+    }
+
+    let count = 0;
+
+    for (let i = 0; i < reconciliationStatements.value.length; i++) {
+        count++;
+    }
+
+    return Math.ceil(count / countPerPage.value);
+});
+
+const dataTableHeaders = computed<object[]>(() => {
+    const headers: object[] = [];
+    const accountBalanceName = account.value?.isLiability ? 'Account Outstanding Balance' : 'Account Balance';
+
+    headers.push({ key: 'time', value: 'time', title: tt('Transaction Time'), sortable: true, nowrap: true });
+    headers.push({ key: 'type', value: 'type', title: tt('Type'), sortable: true, nowrap: true });
+    headers.push({ key: 'categoryId', value: 'categoryId', title: tt('Category'), sortable: true, nowrap: true });
+    headers.push({ key: 'sourceAmount', value: 'sourceAmount', title: tt('Amount'), sortable: true, nowrap: true });
+    headers.push({ key: 'sourceAccountId', value: 'sourceAccountId', title: tt('Account'), sortable: true, nowrap: true });
+    headers.push({ key: 'accountBalance', value: 'accountBalance', title: tt(accountBalanceName), sortable: true, nowrap: true });
+    headers.push({ key: 'comment', value: 'comment', title: tt('Description'), sortable: true, nowrap: true });
+    return headers;
+});
+
+function getTablePageOptions(linesCount?: number): ReconciliationStatementDialogTablePageOption[] {
+    const pageOptions: ReconciliationStatementDialogTablePageOption[] = [];
+
+    if (!linesCount || linesCount < 1) {
+        pageOptions.push({ value: -1, title: tt('All') });
+        return pageOptions;
+    }
+
+    const availableCountPerPage = [ 5, 10, 15, 20, 25, 30, 50 ];
+
+    for (let i = 0; i < availableCountPerPage.length; i++) {
+        const count = availableCountPerPage[i];
+
+        if (linesCount < count) {
+            break;
+        }
+
+        pageOptions.push({ value: count, title: count.toString() });
+    }
+
+    pageOptions.push({ value: -1, title: tt('All') });
+
+    return pageOptions;
+}
+
+function open(options: { accountId: string, startTime: number, endTime: number }): Promise<void> {
+    accountId.value = options.accountId;
+    startTime.value = options.startTime;
+    endTime.value = options.endTime;
+    reconciliationStatements.value = [];
+    currentPage.value = 1;
+    countPerPage.value = 10;
+    showState.value = true;
+    loading.value = true;
+
+    Promise.all([
+        accountsStore.loadAllAccounts({ force: false }),
+        transactionCategoriesStore.loadAllCategories({ force: false })
+    ]).then(() => {
+        return transactionsStore.getReconciliationStatements({
+            accountId: options.accountId,
+            startTime: options.startTime,
+            endTime: options.endTime
+        });
+    }).then(result => {
+        reconciliationStatements.value = result.transactions;
+        loading.value = false;
+    }).catch(error => {
+        loading.value = false;
+
+        if (!error.processed) {
+            emit('error', error);
+            showState.value = false;
+        }
+    })
+
+    return new Promise<void>((resolve, reject) => {
+        rejectFunc = reject;
+    });
+}
+
+function close(): void {
+    rejectFunc?.();
+    showState.value = false;
+}
+
+defineExpose({
+    open
+});
+</script>