From e2a4e0cb3fec4a8e184070d660894d1460495a14 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Mon, 27 Jan 2025 15:41:42 +0800
Subject: [PATCH] migrate account list page to composition API and typescript

---
 src/locales/helper.js                         |   4 +-
 src/stores/account.ts                         |   2 +-
 .../base/accounts/AccountListPageBase.ts      |  75 ++
 src/views/desktop/accounts/ListPage.vue       | 642 ++++++++----------
 src/views/mobile/accounts/ListPage.vue        | 554 +++++++--------
 5 files changed, 639 insertions(+), 638 deletions(-)
 create mode 100644 src/views/base/accounts/AccountListPageBase.ts

diff --git a/src/locales/helper.js b/src/locales/helper.js
index c6424ded..758be445 100644
--- a/src/locales/helper.js
+++ b/src/locales/helper.js
@@ -765,7 +765,6 @@ export function translateError(message, translateFn) {
 
 export function i18nFunctions(i18nGlobal) {
     return {
-        getCurrencyName: (currencyCode) => getCurrencyName(currencyCode, i18nGlobal.t),
         getWeekdayShortName: (weekDay) => getWeekdayShortName(weekDay, i18nGlobal.t),
         getWeekdayLongName: (weekDay) => getWeekdayLongName(weekDay, i18nGlobal.t),
         getMultiMonthdayShortNames: (monthdays) => getMultiMonthdayShortNames(monthdays, i18nGlobal.t),
@@ -787,7 +786,6 @@ export function i18nFunctions(i18nGlobal) {
         getAdaptiveAmountRate: (userStore, amount1, amount2, fromExchangeRate, toExchangeRate) => getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, i18nGlobal.t, userStore),
         getAllTransactionTagFilterTypes: () => getAllTransactionTagFilterTypes(i18nGlobal.t),
         getAllSupportedImportFileTypes: () => getAllSupportedImportFileTypes(i18nGlobal, i18nGlobal.t),
-        getCategorizedAccountsWithDisplayBalance: (allVisibleAccounts, showAccountBalance, defaultCurrency, settingsStore, userStore, exchangeRatesStore) => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts, showAccountBalance, defaultCurrency, userStore, settingsStore, exchangeRatesStore, i18nGlobal.t),
-        joinMultiText: (textArray) => joinMultiText(textArray, i18nGlobal.t)
+        getCategorizedAccountsWithDisplayBalance: (allVisibleAccounts, showAccountBalance, defaultCurrency, settingsStore, userStore, exchangeRatesStore) => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts, showAccountBalance, defaultCurrency, userStore, settingsStore, exchangeRatesStore, i18nGlobal.t)
     };
 }
diff --git a/src/stores/account.ts b/src/stores/account.ts
index 0fb803a4..f2e68ef2 100644
--- a/src/stores/account.ts
+++ b/src/stores/account.ts
@@ -943,7 +943,7 @@ export const useAccountsStore = defineStore('accounts', () => {
         });
     }
 
-    function deleteAccount({ account, beforeResolve }: { account: Account, beforeResolve: BeforeResolveFunction }): Promise<boolean> {
+    function deleteAccount({ account, beforeResolve }: { account: Account, beforeResolve?: BeforeResolveFunction }): Promise<boolean> {
         return new Promise((resolve, reject) => {
             services.deleteAccount({
                 id: account.id
diff --git a/src/views/base/accounts/AccountListPageBase.ts b/src/views/base/accounts/AccountListPageBase.ts
new file mode 100644
index 00000000..81268d71
--- /dev/null
+++ b/src/views/base/accounts/AccountListPageBase.ts
@@ -0,0 +1,75 @@
+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 type { AccountCategory } from '@/core/account.ts';
+import type { Account, CategorizedAccount } from '@/models/account.ts';
+
+export function useAccountListPageBaseBase() {
+    const { formatAmountWithCurrency } = useI18n();
+
+    const settingsStore = useSettingsStore();
+    const userStore = useUserStore();
+    const accountsStore = useAccountsStore();
+
+    const loading = ref<boolean>(true);
+    const showHidden = ref<boolean>(false);
+    const displayOrderModified = ref<boolean>(false);
+
+    const showAccountBalance = computed<boolean>({
+        get: () => settingsStore.appSettings.showAccountBalance,
+        set: (value) => settingsStore.setShowAccountBalance(value)
+    });
+
+    const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
+
+    const allAccounts = computed<Account[]>(() => accountsStore.allAccounts);
+    const allCategorizedAccountsMap = computed<Record<number, CategorizedAccount>>(() => accountsStore.allCategorizedAccountsMap);
+    const allAccountCount = computed<number>(() => accountsStore.allAvailableAccountsCount);
+
+    const netAssets = computed<string>(() => {
+        const netAssets = accountsStore.getNetAssets(showAccountBalance.value);
+        return formatAmountWithCurrency(netAssets, defaultCurrency.value);
+    });
+
+    const totalAssets = computed<string>(() => {
+        const totalAssets = accountsStore.getTotalAssets(showAccountBalance.value);
+        return formatAmountWithCurrency(totalAssets, defaultCurrency.value);
+    });
+
+    const totalLiabilities = computed<string>(() => {
+        const totalLiabilities = accountsStore.getTotalLiabilities(showAccountBalance.value);
+        return formatAmountWithCurrency(totalLiabilities, defaultCurrency.value);
+    });
+
+    function accountCategoryTotalBalance(accountCategory?: AccountCategory): string {
+        if (!accountCategory) {
+            return '';
+        }
+
+        const totalBalance = accountsStore.getAccountCategoryTotalBalance(showAccountBalance.value, accountCategory);
+        return formatAmountWithCurrency(totalBalance, defaultCurrency.value);
+    }
+
+    return {
+        // states
+        loading,
+        showHidden,
+        displayOrderModified,
+        // computed states
+        showAccountBalance,
+        defaultCurrency,
+        allAccounts,
+        allCategorizedAccountsMap,
+        allAccountCount,
+        netAssets,
+        totalAssets,
+        totalLiabilities,
+        // functions
+        accountCategoryTotalBalance
+    };
+}
diff --git a/src/views/desktop/accounts/ListPage.vue b/src/views/desktop/accounts/ListPage.vue
index c6459fd7..d850d0a7 100644
--- a/src/views/desktop/accounts/ListPage.vue
+++ b/src/views/desktop/accounts/ListPage.vue
@@ -5,21 +5,21 @@
                 <v-layout>
                     <v-navigation-drawer :permanent="alwaysShowNav" v-model="showNav">
                         <div class="mx-6 my-4">
-                            <span class="text-subtitle-2">{{ $t('Net assets') }}</span>
+                            <span class="text-subtitle-2">{{ tt('Net assets') }}</span>
                             <p class="account-statistic-item-value text-income text-truncate mt-1 mb-3">
                                 <span v-if="!loading || allAccountCount > 0">{{ netAssets }}</span>
                                 <span v-else-if="loading && allAccountCount <= 0">
                                     <v-skeleton-loader class="skeleton-no-margin pt-2 pb-1" type="text" :loading="true"></v-skeleton-loader>
                                 </span>
                             </p>
-                            <span class="text-subtitle-2">{{ $t('Total liabilities') }}</span>
+                            <span class="text-subtitle-2">{{ tt('Total liabilities') }}</span>
                             <p class="account-statistic-item-value text-expense text-truncate mt-1 mb-3">
                                 <span v-if="!loading || allAccountCount > 0">{{ totalLiabilities }}</span>
                                 <span v-else-if="loading && allAccountCount <= 0">
                                     <v-skeleton-loader class="skeleton-no-margin pt-2 pb-1" type="text" :loading="true"></v-skeleton-loader>
                                 </span>
                             </p>
-                            <span class="text-subtitle-2">{{ $t('Total assets') }}</span>
+                            <span class="text-subtitle-2">{{ tt('Total assets') }}</span>
                             <p class="account-statistic-item-value mt-1">
                                 <span v-if="!loading || allAccountCount > 0">{{ totalAssets }}</span>
                                 <span v-else-if="loading && allAccountCount <= 0">
@@ -31,7 +31,7 @@
                         <v-tabs show-arrows class="account-category-tabs my-4" direction="vertical"
                                 :disabled="loading" v-model="activeAccountCategoryType">
                             <v-tab class="tab-text-truncate" :key="accountCategory.type" :value="accountCategory.type"
-                                   v-for="accountCategory in allAccountCategories">
+                                   v-for="accountCategory in AccountCategory.values()">
                                 <ItemIcon icon-type="account" :icon-id="accountCategory.defaultAccountIconId" />
                                 <div class="d-flex flex-column text-truncate ml-2">
                                     <small class="text-truncate text-left smaller" v-if="!loading || allAccountCount > 0">{{ accountCategoryTotalBalance(accountCategory) }}</small>
@@ -39,7 +39,7 @@
                                         <v-skeleton-loader class="skeleton-no-margin"
                                                            width="100px" height="16" type="text" :loading="true"></v-skeleton-loader>
                                     </small>
-                                    <span class="text-truncate text-left">{{ $t(accountCategory.name) }}</span>
+                                    <span class="text-truncate text-left">{{ tt(accountCategory.name) }}</span>
                                 </div>
                             </v-tab>
                         </v-tabs>
@@ -54,19 +54,19 @@
                                                    :ripple="false" :icon="true" @click="showNav = !showNav">
                                                 <v-icon :icon="icons.menu" size="24" />
                                             </v-btn>
-                                            <span>{{ $t('Account List') }}</span>
+                                            <span>{{ tt('Account List') }}</span>
                                             <v-btn class="ml-3" color="default" variant="outlined"
-                                                   :disabled="loading" @click="add">{{ $t('Add') }}</v-btn>
+                                                   :disabled="loading" @click="add">{{ tt('Add') }}</v-btn>
                                             <v-btn class="ml-3" color="primary" variant="tonal"
                                                    :disabled="loading" @click="saveSortResult"
-                                                   v-if="displayOrderModified">{{ $t('Save Display Order') }}</v-btn>
+                                                   v-if="displayOrderModified">{{ tt('Save Display Order') }}</v-btn>
                                             <v-btn density="compact" color="default" variant="text" size="24"
-                                                   class="ml-2" :icon="true" :loading="loading" @click="reload">
+                                                   class="ml-2" :icon="true" :loading="loading" @click="reload(true)">
                                                 <template #loader>
                                                     <v-progress-circular indeterminate size="20"/>
                                                 </template>
                                                 <v-icon :icon="icons.refresh" size="24" />
-                                                <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
+                                                <v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
                                             </v-btn>
                                             <v-spacer/>
                                             <v-btn density="comfortable" color="default" variant="text" class="ml-2"
@@ -75,10 +75,10 @@
                                                 <v-menu activator="parent">
                                                     <v-list>
                                                         <v-list-item :prepend-icon="icons.show"
-                                                                     :title="$t('Show Hidden Accounts')"
+                                                                     :title="tt('Show Hidden Accounts')"
                                                                      v-if="!showHidden" @click="showHidden = true"></v-list-item>
                                                         <v-list-item :prepend-icon="icons.hide"
-                                                                     :title="$t('Hide Hidden Accounts')"
+                                                                     :title="tt('Hide Hidden Accounts')"
                                                                      v-if="showHidden" @click="showHidden = false"></v-list-item>
                                                     </v-list>
                                                 </v-menu>
@@ -87,18 +87,18 @@
                                     </template>
 
                                     <v-card-text class="accounts-overview-title text-truncate pt-0">
-                                        <span class="accounts-overview-subtitle">{{ $t('Balance') }}</span>
-                                        <v-skeleton-loader class="skeleton-no-margin ml-3 mb-2" width="120px" type="text" :loading="true" v-if="loading && !hasAccount(activeAccountCategory)"></v-skeleton-loader>
-                                        <span class="accounts-overview-amount ml-3" v-else-if="!loading || hasAccount(activeAccountCategory)">{{ activeAccountCategoryTotalBalance }}</span>
+                                        <span class="accounts-overview-subtitle">{{ tt('Balance') }}</span>
+                                        <v-skeleton-loader class="skeleton-no-margin ml-3 mb-2" width="120px" type="text" :loading="true" v-if="loading && activeAccountCategory && !hasAccount(activeAccountCategory)"></v-skeleton-loader>
+                                        <span class="accounts-overview-amount ml-3" v-else-if="!loading || !activeAccountCategory || hasAccount(activeAccountCategory)">{{ activeAccountCategoryTotalBalance }}</span>
                                         <v-btn class="ml-2" density="compact" color="default" variant="text"
                                                :icon="true" :disabled="loading"
                                                @click="showAccountBalance = !showAccountBalance">
                                             <v-icon :icon="showAccountBalance ? icons.eyeSlash : icons.eye" size="20" />
-                                            <v-tooltip activator="parent">{{ showAccountBalance ? $t('Hide Account Balance') : $t('Show Account Balance') }}</v-tooltip>
+                                            <v-tooltip activator="parent">{{ showAccountBalance ? tt('Hide Account Balance') : tt('Show Account Balance') }}</v-tooltip>
                                         </v-btn>
                                     </v-card-text>
 
-                                    <v-row class="pl-6 pr-6 pr-md-8" v-if="loading && !hasAccount(activeAccountCategory)">
+                                    <v-row class="pl-6 pr-6 pr-md-8" v-if="loading && activeAccountCategory && !hasAccount(activeAccountCategory)">
                                         <v-col cols="12">
                                             <v-card border class="card-title-with-bg account-card mb-8 h-auto">
                                                 <template #title>
@@ -119,7 +119,7 @@
                                                     <div class="d-flex account-toolbar align-center">
                                                         <v-btn class="px-2" density="comfortable" color="default" variant="text"
                                                                :disabled="true" :prepend-icon="icons.transactions">
-                                                            {{ $t('Transaction List') }}
+                                                            {{ tt('Transaction List') }}
                                                         </v-btn>
                                                         <v-spacer/>
                                                         <span class="account-balance ml-2">
@@ -132,9 +132,9 @@
                                         </v-col>
                                     </v-row>
 
-                                    <v-row class="pl-5 pr-2 pr-md-4" v-if="!loading && !hasAccount(activeAccountCategory)">
+                                    <v-row class="pl-5 pr-2 pr-md-4" v-if="!loading && activeAccountCategory && !hasAccount(activeAccountCategory)">
                                         <v-col cols="12">
-                                            {{ $t('No available account') }}
+                                            {{ tt('No available account') }}
                                         </v-col>
                                     </v-row>
 
@@ -147,7 +147,7 @@
                                                 ghost-class="dragging-item"
                                                 :disabled="activeAccountCategoryVisibleAccountCount <= 1"
                                                 :list="allCategorizedAccountsMap[activeAccountCategory.type].accounts"
-                                                v-if="allCategorizedAccountsMap[activeAccountCategory.type] && allCategorizedAccountsMap[activeAccountCategory.type].accounts && allCategorizedAccountsMap[activeAccountCategory.type].accounts.length"
+                                                v-if="activeAccountCategory && allCategorizedAccountsMap[activeAccountCategory.type] && allCategorizedAccountsMap[activeAccountCategory.type].accounts && allCategorizedAccountsMap[activeAccountCategory.type].accounts.length"
                                                 @change="onMove"
                                             >
                                                 <template #item="{ element }">
@@ -165,11 +165,11 @@
                                                                     <span class="align-self-center">
                                                                         <v-icon :class="!loading && activeAccountCategoryVisibleAccountCount > 1 ? 'drag-handle' : 'disabled'"
                                                                                 :icon="icons.drag"/>
-                                                                        <v-tooltip activator="parent" v-if="!loading && activeAccountCategoryVisibleAccountCount > 1">{{ $t('Drag to Reorder') }}</v-tooltip>
+                                                                        <v-tooltip activator="parent" v-if="!loading && activeAccountCategoryVisibleAccountCount > 1">{{ tt('Drag to Reorder') }}</v-tooltip>
                                                                     </span>
                                                                 </div>
 
-                                                                <div class="mt-4" v-if="element.type === allAccountTypes.MultiSubAccounts.type">
+                                                                <div class="mt-4" v-if="element.type === AccountType.MultiSubAccounts.type">
                                                                     <v-btn-toggle
                                                                         class="account-subaccounts"
                                                                         variant="outlined"
@@ -181,10 +181,10 @@
                                                                         v-model="activeSubAccount[element.id]"
                                                                     >
                                                                         <v-btn :value="''">
-                                                                            <span>{{ $t('All') }}</span>
+                                                                            <span>{{ tt('All') }}</span>
                                                                         </v-btn>
                                                                         <v-btn :key="subAccount.id" :value="subAccount.id"
-                                                                               v-for="subAccount in element.subAccounts"
+                                                                               v-for="subAccount in element.childrenAccounts"
                                                                                v-show="showHidden || !subAccount.hidden">
                                                                             <ItemIcon size="1.5rem" icon-type="account" :icon-id="subAccount.icon"
                                                                                       :color="subAccount.color" :hidden-status="subAccount.hidden" />
@@ -205,7 +205,7 @@
                                                                     <v-btn class="px-2" density="comfortable" color="default" variant="text"
                                                                            :disabled="loading" :prepend-icon="icons.transactions"
                                                                            :to="`/transaction/list?accountIds=${accountOrSubAccountId(element)}`">
-                                                                        {{ $t('Transaction List') }}
+                                                                        {{ tt('Transaction List') }}
                                                                     </v-btn>
                                                                     <v-btn class="px-2 ml-1" density="comfortable" color="default" variant="text"
                                                                            :class="{ 'd-none': loading, 'hover-display': !loading }"
@@ -213,21 +213,21 @@
                                                                            :prepend-icon="element.hidden ? icons.show : icons.hide"
                                                                            v-if="!activeSubAccount[element.id]"
                                                                            @click="hide(element, !element.hidden)">
-                                                                        {{ element.hidden ? $t('Show') : $t('Hide') }}
+                                                                        {{ element.hidden ? tt('Show') : tt('Hide') }}
                                                                     </v-btn>
                                                                     <v-btn class="px-2 ml-1" density="comfortable" color="default" variant="text"
                                                                            :class="{ 'd-none': loading, 'hover-display': !loading }"
                                                                            :disabled="loading" :prepend-icon="icons.edit"
                                                                            v-if="!activeSubAccount[element.id]"
                                                                            @click="edit(element)">
-                                                                        {{ $t('Edit') }}
+                                                                        {{ tt('Edit') }}
                                                                     </v-btn>
                                                                     <v-btn class="px-2 ml-1" density="comfortable" color="default" variant="text"
                                                                            :class="{ 'd-none': loading, 'hover-display': !loading }"
                                                                            :disabled="loading" :prepend-icon="icons.remove"
                                                                            v-if="!activeSubAccount[element.id]"
                                                                            @click="remove(element)">
-                                                                        {{ $t('Delete') }}
+                                                                        {{ tt('Delete') }}
                                                                     </v-btn>
                                                                     <v-spacer/>
                                                                     <span class="account-balance ml-2">{{ accountBalance(element) }}</span>
@@ -254,19 +254,23 @@
     <snack-bar ref="snackbar" />
 </template>
 
-<script>
+<script setup lang="ts">
+import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
+import SnackBar from '@/components/desktop/SnackBar.vue';
 import EditDialog from './list/dialogs/EditDialog.vue';
 
+import { ref, computed, useTemplateRef, watch } from 'vue';
 import { useDisplay } from 'vuetify';
 
-import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.ts';
+import { useI18n } from '@/locales/helpers.ts';
+import { useAccountListPageBaseBase } from '@/views/base/accounts/AccountListPageBase.ts';
+
 import { useAccountsStore } from '@/stores/account.ts';
-import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 
 import { AccountType, AccountCategory } from '@/core/account.ts';
-import { isObject } from '@/lib/common.ts';
+import type { Account } from '@/models/account.ts';
+
+import { isObject, isString } from '@/lib/common.ts';
 
 import {
     mdiEyeOutline,
@@ -281,330 +285,282 @@ import {
     mdiDotsVertical
 } from '@mdi/js';
 
-export default {
-    components: {
-        EditDialog
-    },
-    data() {
-        const { mdAndUp } = useDisplay();
+type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
+type SnackBarType = InstanceType<typeof SnackBar>;
+type EditDialogType = InstanceType<typeof EditDialog>;
 
-        return {
-            activeAccountCategoryType: AccountCategory.Default.type,
-            activeTab: 'accountPage',
-            activeSubAccount: {},
-            loading: true,
-            displayOrderModified: false,
-            alwaysShowNav: mdAndUp.value,
-            showNav: mdAndUp.value,
-            showHidden: false,
-            icons: {
-                eye: mdiEyeOutline,
-                eyeSlash: mdiEyeOffOutline,
-                refresh: mdiRefresh,
-                square: mdiSquareRounded,
-                menu: mdiMenu,
-                edit: mdiPencilOutline,
-                show: mdiEyeOutline,
-                hide: mdiEyeOffOutline,
-                remove: mdiDeleteOutline,
-                transactions: mdiListBoxOutline,
-                drag: mdiDrag,
-                more: mdiDotsVertical
-            }
-        };
-    },
-    computed: {
-        ...mapStores(useSettingsStore, useUserStore, useAccountsStore, useExchangeRatesStore),
-        defaultCurrency() {
-            return this.userStore.currentUserDefaultCurrency;
-        },
-        allAccountTypes() {
-            return AccountType.all();
-        },
-        allAccountCategories() {
-            return AccountCategory.values();
-        },
-        allAccounts() {
-            return this.accountsStore.allAccounts;
-        },
-        allCategorizedAccountsMap() {
-            return this.accountsStore.allCategorizedAccountsMap;
-        },
-        allAccountCount() {
-            return this.accountsStore.allAvailableAccountsCount;
-        },
-        netAssets() {
-            const netAssets = this.accountsStore.getNetAssets(this.showAccountBalance);
-            return this.getDisplayCurrency(netAssets, this.defaultCurrency);
-        },
-        totalAssets() {
-            const totalAssets = this.accountsStore.getTotalAssets(this.showAccountBalance);
-            return this.getDisplayCurrency(totalAssets, this.defaultCurrency);
-        },
-        totalLiabilities() {
-            const totalLiabilities = this.accountsStore.getTotalLiabilities(this.showAccountBalance);
-            return this.getDisplayCurrency(totalLiabilities, this.defaultCurrency);
-        },
-        activeAccountCategory() {
-            return AccountCategory.valueOf(this.activeAccountCategoryType);
-        },
-        activeAccountCategoryTotalBalance() {
-            return this.accountCategoryTotalBalance(this.activeAccountCategory);
-        },
-        activeAccountCategoryVisibleAccountCount() {
-            if (!this.allCategorizedAccountsMap[this.activeAccountCategory.type] || !this.allCategorizedAccountsMap[this.activeAccountCategory.type].accounts) {
-                return 0;
-            }
+const display = useDisplay();
 
-            const accounts = this.allCategorizedAccountsMap[this.activeAccountCategory.type].accounts;
+const { tt, getCurrencyName, formatAmountWithCurrency, joinMultiText } = useI18n();
 
-            if (this.showHidden) {
-                return accounts.length;
-            }
+const {
+    loading,
+    showHidden,
+    displayOrderModified,
+    showAccountBalance,
+    allAccounts,
+    allCategorizedAccountsMap,
+    allAccountCount,
+    netAssets,
+    totalAssets,
+    totalLiabilities,
+    accountCategoryTotalBalance
+} = useAccountListPageBaseBase();
 
-            let visibleCount = 0;
+const accountsStore = useAccountsStore();
 
-            for (let i = 0; i < accounts.length; i++) {
-                if (!accounts[i].hidden) {
-                    visibleCount++;
-                }
-            }
+const icons = {
+    eye: mdiEyeOutline,
+    eyeSlash: mdiEyeOffOutline,
+    refresh: mdiRefresh,
+    square: mdiSquareRounded,
+    menu: mdiMenu,
+    edit: mdiPencilOutline,
+    show: mdiEyeOutline,
+    hide: mdiEyeOffOutline,
+    remove: mdiDeleteOutline,
+    transactions: mdiListBoxOutline,
+    drag: mdiDrag,
+    more: mdiDotsVertical
+};
 
-            return visibleCount;
-        },
-        showAccountBalance: {
-            get: function () {
-                return this.settingsStore.appSettings.showAccountBalance;
-            },
-            set: function (value) {
-                this.settingsStore.setShowAccountBalance(value);
-            }
-        }
-    },
-    created() {
-        this.reload(false);
-    },
-    setup() {
-        const display = useDisplay();
+const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+const editDialog = useTemplateRef<EditDialogType>('editDialog');
 
-        return {
-            display: display
-        };
-    },
-    watch: {
-        'display.mdAndUp.value': function (newValue) {
-            this.alwaysShowNav = newValue;
+const activeAccountCategoryType = ref<number>(AccountCategory.Default.type);
+const activeTab = ref<string>('accountPage');
+const activeSubAccount = ref<Record<string, string>>({});
+const alwaysShowNav = ref<boolean>(display.mdAndUp.value);
+const showNav = ref<boolean>(display.mdAndUp.value);
 
-            if (!this.showNav) {
-                this.showNav = newValue;
-            }
-        }
-    },
-    methods: {
-        reload(force) {
-            const self = this;
+const activeAccountCategory = computed<AccountCategory | undefined>(() => AccountCategory.valueOf(activeAccountCategoryType.value));
+const activeAccountCategoryTotalBalance = computed<string>(() => accountCategoryTotalBalance(activeAccountCategory.value));
 
-            self.loading = true;
+const activeAccountCategoryVisibleAccountCount = computed<number>(() => {
+    if (!activeAccountCategory.value || !allCategorizedAccountsMap.value[activeAccountCategory.value.type] || !allCategorizedAccountsMap.value[activeAccountCategory.value.type].accounts) {
+        return 0;
+    }
 
-            self.accountsStore.loadAllAccounts({
-                force: force
-            }).then(() => {
-                self.loading = false;
-                self.displayOrderModified = false;
+    const accounts = allCategorizedAccountsMap.value[activeAccountCategory.value.type].accounts;
 
-                if (self.allAccounts) {
-                    for (let i = 0; i < self.allAccounts.length; i++) {
-                        const account = self.allAccounts[i];
+    if (showHidden.value) {
+        return accounts.length;
+    }
 
-                        if (account.type === self.allAccountTypes.MultiSubAccounts.type && !self.activeSubAccount[account.id]) {
-                            self.activeSubAccount[account.id] = '';
-                        }
-                    }
-                }
+    let visibleCount = 0;
 
-                if (force) {
-                    self.$refs.snackbar.showMessage('Account list has been updated');
-                }
-            }).catch(error => {
-                self.loading = false;
-
-                if (error && error.isUpToDate) {
-                    self.displayOrderModified = false;
-                }
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        hasAccount(accountCategory) {
-            if (this.showHidden) {
-                return this.accountsStore.hasAccount(accountCategory, false);
-            } else {
-                return this.accountsStore.hasAccount(accountCategory, true);
-            }
-        },
-        accountOrSubAccountId(account) {
-            return account.getAccountOrSubAccountId(this.activeSubAccount[account.id]);
-        },
-        accountComment(account) {
-            return account.getAccountOrSubAccountComment(this.activeSubAccount[account.id]);
-        },
-        accountCurrency(account) {
-            const self = this;
-
-            if (account.type === self.allAccountTypes.SingleAccount.type) {
-                return self.$locale.getCurrencyName(account.currency);
-            } else if (account.type === self.allAccountTypes.MultiSubAccounts.type) {
-                const subAccountCurrencies = account.getSubAccountCurrencies(self.showHidden, self.activeSubAccount[account.id])
-                    .map(currencyCode => self.$locale.getCurrencyName(currencyCode));
-                return self.$locale.joinMultiText(subAccountCurrencies);
-            } else {
-                return null;
-            }
-        },
-        accountBalance(account) {
-            if (account.type === this.allAccountTypes.SingleAccount.type) {
-                const balance = this.accountsStore.getAccountBalance(this.showAccountBalance, account);
-                return this.getDisplayCurrency(balance, account.currency);
-            } else if (account.type === this.allAccountTypes.MultiSubAccounts.type) {
-                const balanceResult = this.accountsStore.getAccountSubAccountBalance(this.showAccountBalance, this.showHidden, account, this.activeSubAccount[account.id]);
-
-                if (!isObject(balanceResult)) {
-                    return this.getDisplayCurrency(balanceResult, this.defaultCurrency);
-                }
-
-                return this.getDisplayCurrency(balanceResult.balance, balanceResult.currency);
-            } else {
-                return null;
-            }
-        },
-        accountCategoryTotalBalance(accountCategory) {
-            const totalBalance = this.accountsStore.getAccountCategoryTotalBalance(this.showAccountBalance, accountCategory);
-            return this.getDisplayCurrency(totalBalance, this.defaultCurrency);
-        },
-        onMove(event) {
-            if (!event || !event.moved) {
-                return;
-            }
-
-            const self = this;
-            const moveEvent = event.moved;
-
-            if (!moveEvent.element || !moveEvent.element.id) {
-                self.$refs.snackbar.showMessage('Unable to move account');
-                return;
-            }
-
-            self.accountsStore.changeAccountDisplayOrder({
-                accountId: moveEvent.element.id,
-                from: moveEvent.oldIndex,
-                to: moveEvent.newIndex,
-                updateListOrder: false,
-                updateGlobalListOrder: true
-            }).then(() => {
-                self.displayOrderModified = true;
-            }).catch(error => {
-                self.$refs.snackbar.showError(error);
-            });
-        },
-        saveSortResult() {
-            const self = this;
-
-            if (!self.displayOrderModified) {
-                return;
-            }
-
-            self.loading = true;
-
-            self.accountsStore.updateAccountDisplayOrders().then(() => {
-                self.loading = false;
-                self.displayOrderModified = false;
-            }).catch(error => {
-                self.loading = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        add() {
-            const self = this;
-
-            self.$refs.editDialog.open({
-                category: self.activeAccountCategoryType
-            }).then(result => {
-                if (result && result.message) {
-                    self.$refs.snackbar.showMessage(result.message);
-                }
-            }).catch(error => {
-                if (error) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        edit(account) {
-            const self = this;
-
-            self.$refs.editDialog.open({
-                id: account.id,
-                currentAccount: account
-            }).then(result => {
-                if (result && result.message) {
-                    self.$refs.snackbar.showMessage(result.message);
-                }
-
-                if (self.accountsStore.accountListStateInvalid && !self.loading) {
-                    self.reload(false);
-                }
-            }).catch(error => {
-                if (error) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        hide(account, hidden) {
-            const self = this;
-
-            self.loading = true;
-
-            self.accountsStore.hideAccount({
-                account: account,
-                hidden: hidden
-            }).then(() => {
-                self.loading = false;
-            }).catch(error => {
-                self.loading = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        remove(account) {
-            const self = this;
-
-            self.$refs.confirmDialog.open('Are you sure you want to delete this account?').then(() => {
-                self.loading = true;
-
-                self.accountsStore.deleteAccount({
-                    account: account
-                }).then(() => {
-                    self.loading = false;
-                }).catch(error => {
-                    self.loading = false;
-
-                    if (!error.processed) {
-                        self.$refs.snackbar.showError(error);
-                    }
-                });
-            });
-        },
-        getDisplayCurrency(value, currencyCode) {
-            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
+    for (let i = 0; i < accounts.length; i++) {
+        if (!accounts[i].hidden) {
+            visibleCount++;
         }
     }
+
+    return visibleCount;
+});
+
+function reload(force: boolean): void {
+    loading.value = true;
+
+    accountsStore.loadAllAccounts({
+        force: force
+    }).then(() => {
+        loading.value = false;
+        displayOrderModified.value = false;
+
+        if (allAccounts.value) {
+            for (let i = 0; i < allAccounts.value.length; i++) {
+                const account = allAccounts.value[i];
+
+                if (account.type === AccountType.MultiSubAccounts.type && !activeSubAccount.value[account.id]) {
+                    activeSubAccount.value[account.id] = '';
+                }
+            }
+        }
+
+        if (force) {
+            snackbar.value?.showMessage('Account list has been updated');
+        }
+    }).catch(error => {
+        loading.value = false;
+
+        if (error && error.isUpToDate) {
+            displayOrderModified.value = false;
+        }
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
 }
+
+function hasAccount(accountCategory: AccountCategory): boolean {
+    return accountsStore.hasAccount(accountCategory, !showHidden.value);
+}
+
+function accountOrSubAccountId(account: Account): string | null {
+    return account.getAccountOrSubAccountId(activeSubAccount.value[account.id]);
+}
+
+function accountComment(account: Account): string | null {
+    return account.getAccountOrSubAccountComment(activeSubAccount.value[account.id]);
+}
+
+function accountCurrency(account: Account): string | null {
+    if (account.type === AccountType.SingleAccount.type) {
+        return getCurrencyName(account.currency);
+    } else if (account.type === AccountType.MultiSubAccounts.type) {
+        const subAccountCurrencies = account.getSubAccountCurrencies(showHidden.value, activeSubAccount.value[account.id])
+            .map(currencyCode => getCurrencyName(currencyCode));
+        return joinMultiText(subAccountCurrencies);
+    } else {
+        return null;
+    }
+}
+
+function accountBalance(account: Account): string | null {
+    if (account.type === AccountType.SingleAccount.type) {
+        const balance = accountsStore.getAccountBalance(showAccountBalance.value, account);
+
+        if (!isString(balance)) {
+            return '';
+        }
+
+        return formatAmountWithCurrency(balance, account.currency);
+    } else if (account.type === AccountType.MultiSubAccounts.type) {
+        const balanceResult = accountsStore.getAccountSubAccountBalance(showAccountBalance.value, showHidden.value, account, activeSubAccount.value[account.id]);
+
+        if (!isObject(balanceResult)) {
+            return '';
+        }
+
+        return formatAmountWithCurrency(balanceResult.balance, balanceResult.currency);
+    } else {
+        return null;
+    }
+}
+
+function add(): void {
+    editDialog.value?.open({
+        category: activeAccountCategoryType.value
+    }).then(result => {
+        if (result && result.message) {
+            snackbar.value?.showMessage(result.message);
+        }
+    }).catch(error => {
+        if (error) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function edit(account: Account): void {
+    editDialog.value?.open({
+        id: account.id,
+        currentAccount: account
+    }).then(result => {
+        if (result && result.message) {
+            snackbar.value?.showMessage(result.message);
+        }
+
+        if (accountsStore.accountListStateInvalid && !loading.value) {
+            reload(false);
+        }
+    }).catch(error => {
+        if (error) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function hide(account: Account, hidden: boolean): void {
+    loading.value = true;
+
+    accountsStore.hideAccount({
+        account: account,
+        hidden: hidden
+    }).then(() => {
+        loading.value = false;
+    }).catch(error => {
+        loading.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function remove(account: Account): void {
+    confirmDialog.value?.open('Are you sure you want to delete this account?').then(() => {
+        loading.value = true;
+
+        accountsStore.deleteAccount({
+            account: account
+        }).then(() => {
+            loading.value = false;
+        }).catch(error => {
+            loading.value = false;
+
+            if (!error.processed) {
+                snackbar.value?.showError(error);
+            }
+        });
+    });
+}
+
+function saveSortResult(): void {
+    if (!displayOrderModified.value) {
+        return;
+    }
+
+    loading.value = true;
+
+    accountsStore.updateAccountDisplayOrders().then(() => {
+        loading.value = false;
+        displayOrderModified.value = false;
+    }).catch(error => {
+        loading.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function onMove(event: { moved: { element: { id: string }, oldIndex: number, newIndex: number } }): void {
+    if (!event || !event.moved) {
+        return;
+    }
+
+    const moveEvent = event.moved;
+
+    if (!moveEvent.element || !moveEvent.element.id) {
+        snackbar.value?.showMessage('Unable to move account');
+        return;
+    }
+
+    accountsStore.changeAccountDisplayOrder({
+        accountId: moveEvent.element.id,
+        from: moveEvent.oldIndex,
+        to: moveEvent.newIndex,
+        updateListOrder: false,
+        updateGlobalListOrder: true
+    }).then(() => {
+        displayOrderModified.value = true;
+    }).catch(error => {
+        snackbar.value?.showError(error);
+    });
+}
+
+watch(() => display.mdAndUp.value, (newValue) => {
+    alwaysShowNav.value = newValue;
+
+    if (!showNav.value) {
+        showNav.value = newValue;
+    }
+});
+
+reload(false);
 </script>
 
 <style>
diff --git a/src/views/mobile/accounts/ListPage.vue b/src/views/mobile/accounts/ListPage.vue
index b9f3f9bd..af87e51d 100644
--- a/src/views/mobile/accounts/ListPage.vue
+++ b/src/views/mobile/accounts/ListPage.vue
@@ -1,12 +1,12 @@
 <template>
     <f7-page :ptr="!sortable" @ptr:refresh="reload" @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
-            <f7-nav-title :title="$t('Account List')"></f7-nav-title>
+            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-title :title="tt('Account List')"></f7-nav-title>
             <f7-nav-right class="navbar-compact-icons">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !allAccountCount }" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
                 <f7-link href="/account/add" icon-f7="plus" v-if="!sortable"></f7-link>
-                <f7-link :text="$t('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
+                <f7-link :text="tt('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
@@ -14,7 +14,7 @@
             <f7-card-header class="display-block" style="padding-top: 120px;">
                 <p class="no-margin">
                     <small class="card-header-content" v-if="loading">Net assets</small>
-                    <small class="card-header-content" v-else-if="!loading">{{ $t('Net assets') }}</small>
+                    <small class="card-header-content" v-else-if="!loading">{{ tt('Net assets') }}</small>
                 </p>
                 <p class="no-margin">
                     <span class="net-assets" v-if="loading">0.00 USD</span>
@@ -28,10 +28,10 @@
                         <span>Total assets | Total liabilities</span>
                     </small>
                     <small class="account-overview-info" v-else-if="!loading">
-                        <span>{{ $t('Total assets') }}</span>
+                        <span>{{ tt('Total assets') }}</span>
                         <span>{{ totalAssets }}</span>
                         <span>|</span>
-                        <span>{{ $t('Total liabilities') }}</span>
+                        <span>{{ tt('Total liabilities') }}</span>
                         <span>{{ totalLiabilities }}</span>
                     </small>
                 </p>
@@ -64,11 +64,11 @@
         </div>
 
         <f7-list strong inset dividers class="margin-vertical" v-if="!loading && noAvailableAccount">
-            <f7-list-item :title="$t('No available account')"></f7-list-item>
+            <f7-list-item :title="tt('No available account')"></f7-list-item>
         </f7-list>
 
         <div :key="accountCategory.type"
-             v-for="accountCategory in allAccountCategories"
+             v-for="accountCategory in AccountCategory.values()"
              v-show="(showHidden && hasAccount(accountCategory, false)) || hasAccount(accountCategory, true)">
             <f7-list strong inset dividers sortable class="list-has-group-title account-list margin-vertical"
                      :sortable-enabled="sortable"
@@ -76,14 +76,14 @@
                      @sortable:sort="onSort">
                 <f7-list-item group-title :sortable="false">
                     <small>
-                        <span>{{ $t(accountCategory.name) }}</span>
+                        <span>{{ tt(accountCategory.name) }}</span>
                         <span style="margin-left: 10px">{{ accountCategoryTotalBalance(accountCategory) }}</span>
                     </small>
                 </f7-list-item>
                 <f7-list-item swipeout
                               class="nested-list-item"
                               :id="getAccountDomId(account)"
-                              :class="{ 'has-child-list-item': account.type === allAccountTypes.MultiSubAccounts.type && hasVisibleSubAccount(account), 'actual-first-child': account.id === firstShowingIds.accounts[accountCategory.type], 'actual-last-child': account.id === lastShowingIds.accounts[accountCategory.type] }"
+                              :class="{ 'has-child-list-item': account.type === AccountType.MultiSubAccounts.type && hasVisibleSubAccount(account), 'actual-first-child': account.id === firstShowingIds.accounts[accountCategory.type], 'actual-last-child': account.id === lastShowingIds.accounts[accountCategory.type] }"
                               :after="accountBalance(account)"
                               :link="!sortable ? '/transaction/list?accountIds=' + account.id : null"
                               :key="account.id"
@@ -91,7 +91,7 @@
                               v-show="showHidden || !account.hidden"
                               @taphold="setSortable()"
                 >
-                    <template #media v-if="account.type !== allAccountTypes.MultiSubAccounts.type || !hasVisibleSubAccount(account)">
+                    <template #media v-if="account.type !== AccountType.MultiSubAccounts.type || !hasVisibleSubAccount(account)">
                         <ItemIcon icon-type="account" :icon-id="account.icon" :color="account.color">
                             <f7-badge color="gray" class="right-bottom-icon" v-if="account.hidden">
                                 <f7-icon f7="eye_slash_fill"></f7-icon>
@@ -102,7 +102,7 @@
                     <template #title>
                         <div class="display-flex padding-top-half padding-bottom-half">
                             <ItemIcon icon-type="account" :icon-id="account.icon" :color="account.color"
-                                      v-if="account.type === allAccountTypes.MultiSubAccounts.type && hasVisibleSubAccount(account)">
+                                      v-if="account.type === AccountType.MultiSubAccounts.type && hasVisibleSubAccount(account)">
                                 <f7-badge color="gray" class="right-bottom-icon" v-if="account.hidden">
                                     <f7-icon f7="eye_slash_fill"></f7-icon>
                                 </f7-badge>
@@ -112,7 +112,7 @@
                                 <div class="item-footer" v-if="account.comment">{{ account.comment }}</div>
                             </div>
                         </div>
-                        <li v-if="account.type === allAccountTypes.MultiSubAccounts.type">
+                        <li v-if="account.type === AccountType.MultiSubAccounts.type">
                             <ul class="no-padding">
                                 <f7-list-item class="no-sortable nested-list-item-child"
                                               :class="{ 'actual-first-child': subAccount.id === firstShowingIds.subAccounts[account.id], 'actual-last-child': subAccount.id === lastShowingIds.subAccounts[account.id] }"
@@ -120,7 +120,7 @@
                                               :title="subAccount.name" :footer="subAccount.comment" :after="accountBalance(subAccount)"
                                               :link="!sortable ? '/transaction/list?accountIds=' + subAccount.id : null"
                                               :key="subAccount.id"
-                                              v-for="subAccount in account.subAccounts"
+                                              v-for="subAccount in account.childrenAccounts"
                                               v-show="showHidden || !subAccount.hidden"
                                 >
                                     <template #media>
@@ -141,7 +141,7 @@
                         </f7-swipeout-button>
                     </f7-swipeout-actions>
                     <f7-swipeout-actions right v-if="!sortable">
-                        <f7-swipeout-button color="orange" close :text="$t('Edit')" @click="edit(account)"></f7-swipeout-button>
+                        <f7-swipeout-button color="orange" close :text="tt('Edit')" @click="edit(account)"></f7-swipeout-button>
                         <f7-swipeout-button color="red" class="padding-left padding-right" @click="remove(account, false)">
                             <f7-icon f7="trash"></f7-icon>
                         </f7-swipeout-button>
@@ -152,307 +152,279 @@
 
         <f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
             <f7-actions-group>
-                <f7-actions-button @click="setSortable()">{{ $t('Sort') }}</f7-actions-button>
-                <f7-actions-button v-if="!showHidden" @click="showHidden = true">{{ $t('Show Hidden Accounts') }}</f7-actions-button>
-                <f7-actions-button v-if="showHidden" @click="showHidden = false">{{ $t('Hide Hidden Accounts') }}</f7-actions-button>
+                <f7-actions-button @click="setSortable()">{{ tt('Sort') }}</f7-actions-button>
+                <f7-actions-button v-if="!showHidden" @click="showHidden = true">{{ tt('Show Hidden Accounts') }}</f7-actions-button>
+                <f7-actions-button v-if="showHidden" @click="showHidden = false">{{ tt('Hide Hidden Accounts') }}</f7-actions-button>
             </f7-actions-group>
             <f7-actions-group>
-                <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
+                <f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
             </f7-actions-group>
         </f7-actions>
 
         <f7-actions close-by-outside-click close-on-escape :opened="showDeleteActionSheet" @actions:closed="showDeleteActionSheet = false">
             <f7-actions-group>
-                <f7-actions-label>{{ $t('Are you sure you want to delete this account?') }}</f7-actions-label>
-                <f7-actions-button color="red" @click="remove(accountToDelete, true)">{{ $t('Delete') }}</f7-actions-button>
+                <f7-actions-label>{{ tt('Are you sure you want to delete this account?') }}</f7-actions-label>
+                <f7-actions-button color="red" @click="remove(accountToDelete, true)">{{ tt('Delete') }}</f7-actions-button>
             </f7-actions-group>
             <f7-actions-group>
-                <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
+                <f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
             </f7-actions-group>
         </f7-actions>
     </f7-page>
 </template>
 
-<script>
-import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.ts';
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import type { Router } from 'framework7/types';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
+import { useAccountListPageBaseBase } from '@/views/base/accounts/AccountListPageBase.ts';
+
 import { useAccountsStore } from '@/stores/account.ts';
-import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 
 import { AccountType, AccountCategory } from '@/core/account.ts';
+import type { Account, AccountShowingIds } from '@/models/account.ts';
+
+import { isString } from '@/lib/common.ts';
 import { onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
 
-export default {
-    props: [
-        'f7router'
-    ],
-    data() {
-        return {
-            loading: true,
-            loadingError: null,
-            showHidden: false,
-            sortable: false,
-            accountToDelete: null,
-            showMoreActionSheet: false,
-            showDeleteActionSheet: false,
-            displayOrderModified: false,
-            displayOrderSaving: false
-        };
-    },
-    computed: {
-        ...mapStores(useSettingsStore, useUserStore, useAccountsStore, useExchangeRatesStore),
-        defaultCurrency() {
-            return this.userStore.currentUserDefaultCurrency;
-        },
-        allAccountTypes() {
-            return AccountType.all();
-        },
-        allAccountCategories() {
-            return AccountCategory.values();
-        },
-        allCategorizedAccountsMap() {
-            return this.accountsStore.allCategorizedAccountsMap;
-        },
-        allAccountCount() {
-            return this.accountsStore.allAvailableAccountsCount;
-        },
-        firstShowingIds() {
-            return this.accountsStore.getFirstShowingIds(this.showHidden);
-        },
-        lastShowingIds() {
-            return this.accountsStore.getLastShowingIds(this.showHidden);
-        },
-        noAvailableAccount() {
-            if (this.showHidden) {
-                return this.accountsStore.allAvailableAccountsCount < 1;
-            } else {
-                return this.accountsStore.allVisibleAccountsCount < 1;
-            }
-        },
-        netAssets() {
-            const netAssets = this.accountsStore.getNetAssets(this.showAccountBalance);
-            return this.getDisplayCurrency(netAssets, this.defaultCurrency);
-        },
-        totalAssets() {
-            const totalAssets = this.accountsStore.getTotalAssets(this.showAccountBalance);
-            return this.getDisplayCurrency(totalAssets, this.defaultCurrency);
-        },
-        totalLiabilities() {
-            const totalLiabilities = this.accountsStore.getTotalLiabilities(this.showAccountBalance);
-            return this.getDisplayCurrency(totalLiabilities, this.defaultCurrency);
-        },
-        showAccountBalance: {
-            get: function () {
-                return this.settingsStore.appSettings.showAccountBalance;
-            },
-            set: function (value) {
-                this.settingsStore.setShowAccountBalance(value);
-            }
-        }
-    },
-    created() {
-        const self = this;
+const props = defineProps<{
+    f7router: Router.Router;
+}>();
 
-        self.loading = true;
+const { tt, formatAmountWithCurrency } = useI18n();
+const { showAlert, showToast, routeBackOnError } = useI18nUIComponents();
 
-        self.accountsStore.loadAllAccounts({
-            force: false
-        }).then(() => {
-            self.loading = false;
-        }).catch(error => {
-            if (error.processed) {
-                self.loading = false;
-            } else {
-                self.loadingError = error;
-                self.$toast(error.message || error);
-            }
-        });
-    },
-    methods: {
-        onPageAfterIn() {
-            if (this.accountsStore.accountListStateInvalid && !this.loading) {
-                this.reload(null);
-            }
+const {
+    loading,
+    showHidden,
+    displayOrderModified,
+    showAccountBalance,
+    allCategorizedAccountsMap,
+    allAccountCount,
+    netAssets,
+    totalAssets,
+    totalLiabilities,
+    accountCategoryTotalBalance
+} = useAccountListPageBaseBase();
 
-            this.$routeBackOnError(this.f7router, 'loadingError');
-        },
-        reload(done) {
-            if (this.sortable) {
-                done();
-                return;
-            }
+const accountsStore = useAccountsStore();
 
-            const self = this;
-            const force = !!done;
+const loadingError = ref<unknown | null>(null);
+const sortable = ref<boolean>(false);
+const accountToDelete = ref<Account | null>(null);
+const showMoreActionSheet = ref<boolean>(false);
+const showDeleteActionSheet = ref<boolean>(false);
+const displayOrderSaving = ref<boolean>(false);
 
-            self.accountsStore.loadAllAccounts({
-                force: force
-            }).then(() => {
-                if (done) {
-                    done();
-                }
-
-                if (force) {
-                    self.$toast('Account list has been updated');
-                }
-            }).catch(error => {
-                if (done) {
-                    done();
-                }
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        hasAccount(accountCategory, visibleOnly) {
-            return this.accountsStore.hasAccount(accountCategory, visibleOnly);
-        },
-        hasVisibleSubAccount(account) {
-            return this.accountsStore.hasVisibleSubAccount(this.showHidden, account);
-        },
-        accountBalance(account) {
-            const balance = this.accountsStore.getAccountBalance(this.showAccountBalance, account);
-            return this.getDisplayCurrency(balance, account.currency);
-        },
-        accountCategoryTotalBalance(accountCategory) {
-            const totalBalance = this.accountsStore.getAccountCategoryTotalBalance(this.showAccountBalance, accountCategory);
-            return this.getDisplayCurrency(totalBalance, this.defaultCurrency);
-        },
-        setSortable() {
-            if (this.sortable) {
-                return;
-            }
-
-            this.showHidden = true;
-            this.sortable = true;
-            this.displayOrderModified = false;
-        },
-        onSort(event) {
-            const self = this;
-
-            if (!event || !event.el || !event.el.id) {
-                self.$toast('Unable to move account');
-                return;
-            }
-
-            const id = self.parseAccountIdFromDomId(event.el.id);
-
-            if (!id) {
-                self.$toast('Unable to move account');
-                return;
-            }
-
-            self.accountsStore.changeAccountDisplayOrder({
-                accountId: id,
-                from: event.from - 1, // first item in the list is title, so the index need minus one
-                to: event.to - 1,
-                updateListOrder: true,
-                updateGlobalListOrder: true
-            }).then(() => {
-                self.displayOrderModified = true;
-            }).catch(error => {
-                self.$toast(error.message || error);
-            });
-        },
-        saveSortResult() {
-            const self = this;
-
-            if (!self.displayOrderModified) {
-                self.showHidden = false;
-                self.sortable = false;
-                return;
-            }
-
-            self.displayOrderSaving = true;
-            self.$showLoading();
-
-            self.accountsStore.updateAccountDisplayOrders().then(() => {
-                self.displayOrderSaving = false;
-                self.$hideLoading();
-
-                self.showHidden = false;
-                self.sortable = false;
-                self.displayOrderModified = false;
-            }).catch(error => {
-                self.displayOrderSaving = false;
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        edit(account) {
-            this.f7router.navigate('/account/edit?id=' + account.id);
-        },
-        hide(account, hidden) {
-            const self = this;
-
-            self.$showLoading();
-
-            self.accountsStore.hideAccount({
-                account: account,
-                hidden: hidden
-            }).then(() => {
-                self.$hideLoading();
-            }).catch(error => {
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        remove(account, confirm) {
-            const self = this;
-
-            if (!account) {
-                self.$alert('An error occurred');
-                return;
-            }
-
-            if (!confirm) {
-                self.accountToDelete = account;
-                self.showDeleteActionSheet = true;
-                return;
-            }
-
-            self.showDeleteActionSheet = false;
-            self.accountToDelete = null;
-            self.$showLoading();
-
-            self.accountsStore.deleteAccount({
-                account: account,
-                beforeResolve: (done) => {
-                    onSwipeoutDeleted(self.getAccountDomId(account), done);
-                }
-            }).then(() => {
-                self.$hideLoading();
-            }).catch(error => {
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        getDisplayCurrency(value, currencyCode) {
-            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
-        },
-        getAccountDomId(account) {
-            return 'account_' + account.id;
-        },
-        parseAccountIdFromDomId(domId) {
-            if (!domId || domId.indexOf('account_') !== 0) {
-                return null;
-            }
-
-            return domId.substring(8); // account_
-        }
+const firstShowingIds = computed<AccountShowingIds>(() => accountsStore.getFirstShowingIds(showHidden.value));
+const lastShowingIds = computed<AccountShowingIds>(() => accountsStore.getLastShowingIds(showHidden.value));
+const noAvailableAccount = computed<boolean>(() => {
+    if (showHidden.value) {
+        return accountsStore.allAvailableAccountsCount < 1;
+    } else {
+        return accountsStore.allVisibleAccountsCount < 1;
     }
-};
+});
+
+function hasAccount(accountCategory: AccountCategory, visibleOnly: boolean): boolean {
+    return accountsStore.hasAccount(accountCategory, visibleOnly);
+}
+
+function hasVisibleSubAccount(account: Account): boolean {
+    return accountsStore.hasVisibleSubAccount(showHidden.value, account);
+}
+
+function accountBalance(account: Account): string {
+    const balance = accountsStore.getAccountBalance(showAccountBalance.value, account);
+
+    if (!isString(balance)) {
+        return '';
+    }
+
+    return formatAmountWithCurrency(balance, account.currency);
+}
+
+function getAccountDomId(account: Account): string {
+    return 'account_' + account.id;
+}
+
+function parseAccountIdFromDomId(domId: string): string | null {
+    if (!domId || domId.indexOf('account_') !== 0) {
+        return null;
+    }
+
+    return domId.substring(8); // account_
+}
+
+function init(): void {
+    loading.value = true;
+
+    accountsStore.loadAllAccounts({
+        force: false
+    }).then(() => {
+        loading.value = false;
+    }).catch(error => {
+        if (error.processed) {
+            loading.value = false;
+        } else {
+            loadingError.value = error;
+            showToast(error.message || error);
+        }
+    });
+}
+
+function reload(done: (() => void) | null): void {
+    if (sortable.value) {
+        done?.();
+        return;
+    }
+
+    const force = !!done;
+
+    accountsStore.loadAllAccounts({
+        force: force
+    }).then(() => {
+        done?.();
+
+        if (force) {
+            showToast('Account list has been updated');
+        }
+    }).catch(error => {
+        done?.();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function edit(account: Account): void {
+    props.f7router.navigate('/account/edit?id=' + account.id);
+}
+
+function hide(account: Account, hidden: boolean): void {
+    showLoading();
+
+    accountsStore.hideAccount({
+        account: account,
+        hidden: hidden
+    }).then(() => {
+        hideLoading();
+    }).catch(error => {
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function remove(account: Account | null, confirm: boolean): void {
+    if (!account) {
+        showAlert('An error occurred');
+        return;
+    }
+
+    if (!confirm) {
+        accountToDelete.value = account;
+        showDeleteActionSheet.value = true;
+        return;
+    }
+
+    showDeleteActionSheet.value = false;
+    accountToDelete.value = null;
+    showLoading();
+
+    accountsStore.deleteAccount({
+        account: account,
+        beforeResolve: (done) => {
+            onSwipeoutDeleted(getAccountDomId(account), done);
+        }
+    }).then(() => {
+        hideLoading();
+    }).catch(error => {
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function setSortable(): void {
+    if (sortable.value) {
+        return;
+    }
+
+    showHidden.value = true;
+    sortable.value = true;
+    displayOrderModified.value = false;
+}
+
+function onSort(event: { el: { id: string }; from: number; to: number }): void {
+    if (!event || !event.el || !event.el.id) {
+        showToast('Unable to move account');
+        return;
+    }
+
+    const id = parseAccountIdFromDomId(event.el.id);
+
+    if (!id) {
+        showToast('Unable to move account');
+        return;
+    }
+
+    accountsStore.changeAccountDisplayOrder({
+        accountId: id,
+        from: event.from - 1, // first item in the list is title, so the index need minus one
+        to: event.to - 1,
+        updateListOrder: true,
+        updateGlobalListOrder: true
+    }).then(() => {
+        displayOrderModified.value = true;
+    }).catch(error => {
+        showToast(error.message || error);
+    });
+}
+
+function saveSortResult(): void {
+    if (!displayOrderModified.value) {
+        showHidden.value = false;
+        sortable.value = false;
+        return;
+    }
+
+    displayOrderSaving.value = true;
+    showLoading();
+
+    accountsStore.updateAccountDisplayOrders().then(() => {
+        displayOrderSaving.value = false;
+        hideLoading();
+
+        showHidden.value = false;
+        sortable.value = false;
+        displayOrderModified.value = false;
+    }).catch(error => {
+        displayOrderSaving.value = false;
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function onPageAfterIn(): void {
+    if (accountsStore.accountListStateInvalid && !loading.value) {
+        reload(null);
+    }
+
+    routeBackOnError(props.f7router, loadingError);
+}
+
+init();
 </script>
 
 <style>