add account list page for desktop

src/lib/account.js

@@ -10,6 +10,82 @@ export function getAccountCategoryInfo(categoryId) {
     return null;
 }
 
+export function getAccountOrSubAccountId(account, subAccountId) {
+    if (account.type === accountConstants.allAccountTypes.SingleAccount) {
+        return account.id;
+    } else if (account.type === accountConstants.allAccountTypes.MultiSubAccounts && !subAccountId) {
+        return account.id;
+    } else if (account.type === accountConstants.allAccountTypes.MultiSubAccounts && subAccountId) {
+        if (!account.subAccounts || !account.subAccounts.length) {
+            return null;
+        }
+
+        for (let i = 0; i < account.subAccounts.length; i++) {
+            const subAccount = account.subAccounts[i];
+
+            if (subAccountId && subAccountId === subAccount.id) {
+                return subAccount.id;
+            }
+        }
+
+        return null;
+    } else {
+        return null;
+    }
+}
+
+export function getAccountOrSubAccountComment(account, subAccountId) {
+    if (account.type === accountConstants.allAccountTypes.SingleAccount) {
+        return account.comment;
+    } else if (account.type === accountConstants.allAccountTypes.MultiSubAccounts && !subAccountId) {
+        return account.comment;
+    } else if (account.type === accountConstants.allAccountTypes.MultiSubAccounts && subAccountId) {
+        if (!account.subAccounts || !account.subAccounts.length) {
+            return null;
+        }
+
+        for (let i = 0; i < account.subAccounts.length; i++) {
+            const subAccount = account.subAccounts[i];
+
+            if (subAccountId && subAccountId === subAccount.id) {
+                return subAccount.comment;
+            }
+        }
+
+        return null;
+    } else {
+        return null;
+    }
+}
+
+export function getSubAccountCurrencies(account, showHidden, subAccountId) {
+    if (!account.subAccounts || !account.subAccounts.length) {
+        return [];
+    }
+
+    const subAccountCurrenciesMap = {};
+    const subAccountCurrencies = [];
+
+    for (let i = 0; i < account.subAccounts.length; i++) {
+        const subAccount = account.subAccounts[i];
+
+        if (!showHidden && subAccount.hidden) {
+            continue;
+        }
+
+        if (subAccountId && subAccountId === subAccount.id) {
+            return [subAccount.currency];
+        } else {
+            if (!subAccountCurrenciesMap[subAccount.currency]) {
+                subAccountCurrenciesMap[subAccount.currency] = true;
+                subAccountCurrencies.push(subAccount.currency);
+            }
+        }
+    }
+
+    return subAccountCurrencies;
+}
+
 export function getCategorizedAccounts(allAccounts) {
     const ret = {};
 

src/lib/i18n.js

@@ -726,6 +726,16 @@ function getDisplayCurrency(value, currencyCode, options, translateFn) {
     }
 }
 
+function joinMultiText(textArray, translateFn) {
+    if (!textArray || !textArray.length) {
+        return '';
+    }
+
+    const separator = translateFn('format.misc.multiTextJoinSeparator');
+
+    return textArray.join(separator);
+}
+
 function getLocalizedError(error) {
     if (error.errorCode === apiNotFoundErrorCode && specifiedApiNotFoundErrors[error.path]) {
         return {
@@ -948,6 +958,7 @@ export function i18nFunctions(i18nGlobal) {
         getAllDisplayExchangeRates: (exchangeRatesData) => getAllDisplayExchangeRates(exchangeRatesData, i18nGlobal.t),
         getEnableDisableOptions: () => getEnableDisableOptions(i18nGlobal.t),
         getDisplayCurrency: (value, currencyCode, options) => getDisplayCurrency(value, currencyCode, options, i18nGlobal.t),
+        joinMultiText: (textArray) => joinMultiText(textArray, i18nGlobal.t),
         setLanguage: (locale, force) => setLanguage(i18nGlobal, locale, force),
         initLocale: (lastUserLanguage, timezone) => initLocale(i18nGlobal, lastUserLanguage, timezone)
     };

src/locales/en.js

@@ -67,6 +67,7 @@ export default {
             'symbol': '{symbol} {amount}'
         },
         'misc': {
+            'multiTextJoinSeparator': ', ',
             'hoursBehindDefaultTimezone': '{hours} hour(s) behind default timezone',
             'hoursAheadOfDefaultTimezone': '{hours} hour(s) ahead of default timezone',
             'hoursMinutesBehindDefaultTimezone': '{hours} hour(s) and {minutes} minutes behind default timezone',
@@ -855,6 +856,8 @@ export default {
     'Debt Account': 'Debt Account',
     'Receivables': 'Receivables',
     'Investment Account': 'Investment Account',
+    'Balance': 'Balance',
+    'View Transactions': 'View Transactions',
     'Unable to get account list': 'Unable to get account list',
     'Account list is up to date': 'Account list is up to date',
     'Account list has been updated': 'Account list has been updated',
@@ -997,6 +1000,7 @@ export default {
     'Currency Name': 'Currency Name',
     'Currency Symbol': 'Currency Symbol',
     'Show Account Balance': 'Show Account Balance',
+    'Hide Account Balance': 'Hide Account Balance',
     'Page Settings': 'Page Settings',
     'Overview Page': 'Overview Page',
     'Transaction List Page': 'Transaction List Page',

src/locales/zh_Hans.js

@@ -67,6 +67,7 @@ export default {
             'symbol': '{symbol} {amount}'
         },
         'misc': {
+            'multiTextJoinSeparator': '、',
             'hoursBehindDefaultTimezone': '比默认时区晚{hours}小时',
             'hoursAheadOfDefaultTimezone': '比默认时区早{hours}小时',
             'hoursMinutesBehindDefaultTimezone': '比默认时区晚{hours}小时{minutes}分',
@@ -855,6 +856,8 @@ export default {
     'Debt Account': '负债账户',
     'Receivables': '应收款项',
     'Investment Account': '投资账户',
+    'Balance': '余额',
+    'View Transactions': '查看交易',
     'Unable to get account list': '无法获取账户列表',
     'Account list is up to date': '账户列表已是最新',
     'Account list has been updated': '账户列表已更新',
@@ -997,6 +1000,7 @@ export default {
     'Currency Name': '货币名称',
     'Currency Symbol': '货币符号',
     'Show Account Balance': '显示账户余额',
+    'Hide Account Balance': '隐藏账户余额',
     'Page Settings': '页面设置',
     'Overview Page': '总览页面',
     'Transaction List Page': '交易列表页面',

src/stores/account.js

@@ -485,6 +485,103 @@ export const useAccountsStore = defineStore('accounts', {
                 return '***';
             }
         },
+        getAccountSubAccountBalance(showAccountBalance, showHidden, account, subAccountId) {
+            if (account.type !== accountConstants.allAccountTypes.MultiSubAccounts) {
+                return null;
+            }
+
+            const userStore = useUserStore();
+            const exchangeRatesStore = useExchangeRatesStore();
+            let resultCurrency = userStore.currentUserDefaultCurrency;
+
+            if (!account.subAccounts || !account.subAccounts.length) {
+                return {
+                    balance: showAccountBalance ? 0 : '***',
+                    currency: resultCurrency
+                };
+            }
+
+            const allSubAccountCurrenciesMap = {};
+            const allSubAccountCurrencies = [];
+            let totalBalance = 0;
+
+            for (let i = 0; i < account.subAccounts.length; i++) {
+                const subAccount = account.subAccounts[i];
+
+                if (!showHidden && subAccount.hidden) {
+                    continue;
+                }
+
+                if (!allSubAccountCurrenciesMap[subAccount.currency]) {
+                    allSubAccountCurrenciesMap[subAccount.currency] = true;
+                    allSubAccountCurrencies.push(subAccount.currency);
+                }
+            }
+
+            if (allSubAccountCurrencies.length === 0) {
+                return {
+                    balance: showAccountBalance ? 0 : '***',
+                    currency: resultCurrency
+                };
+            }
+
+            if (allSubAccountCurrencies.length === 1) {
+                resultCurrency = allSubAccountCurrencies[0];
+            }
+
+            let hasUnCalculatedAmount = false;
+
+            for (let i = 0; i < account.subAccounts.length; i++) {
+                const subAccount = account.subAccounts[i];
+
+                if (!showHidden && subAccount.hidden) {
+                    continue;
+                }
+
+                if (subAccountId) {
+                    if (subAccountId === subAccount.id) {
+                        return {
+                            balance: showAccountBalance ? this.getAccountBalance(showAccountBalance, subAccount) : '***',
+                            currency: subAccount.currency
+                        };
+                    }
+                }
+
+                if (subAccount === resultCurrency) {
+                    if (subAccount.isAsset) {
+                        totalBalance += subAccount.balance;
+                    } else if (subAccount.isLiability) {
+                        totalBalance -= subAccount.balance;
+                    } else {
+                        totalBalance += subAccount.balance;
+                    }
+                } else {
+                    const balance = exchangeRatesStore.getExchangedAmount(subAccount.balance, subAccount.currency, resultCurrency);
+
+                    if (!isNumber(balance)) {
+                        hasUnCalculatedAmount = true;
+                        continue;
+                    }
+
+                    if (subAccount.isAsset) {
+                        totalBalance += Math.floor(balance);
+                    } else if (subAccount.isLiability) {
+                        totalBalance -= Math.floor(balance);
+                    } else {
+                        totalBalance += Math.floor(balance);
+                    }
+                }
+            }
+
+            if (subAccountId) { // not found specified id in sub accounts
+                return null;
+            }
+
+            return {
+                balance: showAccountBalance ? totalBalance : '***',
+                currency: resultCurrency
+            };
+        },
         hasAccount(accountCategory, visibleOnly) {
             if (!this.allCategorizedAccounts[accountCategory.id] ||
                 !this.allCategorizedAccounts[accountCategory.id].accounts ||

src/views/desktop/AccountsPage.vue

@@ -1,13 +1,464 @@
 <template>
     <v-row class="match-height">
-        accounts
+        <v-col cols="12">
+            <v-card>
+                <div class="d-flex flex-column flex-md-row">
+                    <div>
+                        <div class="mx-6 my-4">
+                            <small>{{ $t('Net assets') }}</small>
+                            <p class="text-subtitle-1 text-income mb-2">
+                                <span v-if="!loading">{{ netAssets }}</span>
+                                <span v-else-if="loading">
+                                    <v-skeleton-loader class="accounts-summary-skeleton mt-2 mb-4" type="text" :loading="true"></v-skeleton-loader>
+                                </span>
+                            </p>
+                            <small>{{ $t('Total liabilities') }}</small>
+                            <p class="text-subtitle-1 text-expense mb-2">
+                                <span v-if="!loading">{{ totalLiabilities }}</span>
+                                <span v-else-if="loading">
+                                    <v-skeleton-loader class="accounts-summary-skeleton mt-2 mb-4" type="text" :loading="true"></v-skeleton-loader>
+                                </span>
+                            </p>
+                            <small>{{ $t('Total assets') }}</small>
+                            <p class="text-subtitle-1">
+                                <span v-if="!loading">{{ totalAssets }}</span>
+                                <span v-else-if="loading">
+                                    <v-skeleton-loader class="accounts-summary-skeleton mt-2 mb-6" type="text" :loading="true"></v-skeleton-loader>
+                                </span>
+                            </p>
+                        </div>
+                        <v-divider />
+                        <v-tabs show-arrows class="account-category-tabs my-4" direction="vertical"
+                                :disabled="loading" v-model="activeAccountCategoryId">
+                            <v-tab :key="accountCategory.id" :value="accountCategory.id"
+                                   v-for="accountCategory in allAccountCategories">
+                                <ItemIcon icon-type="account" :icon-id="accountCategory.defaultAccountIconId" />
+                                <div class="ml-2 d-flex flex-column">
+                                    <small class="text-left smaller">{{ accountCategoryTotalBalance(accountCategory) }}</small>
+                                    <div class="text-left">{{ $t(accountCategory.name) }}</div>
+                                </div>
+                            </v-tab>
+                        </v-tabs>
+                    </div>
+                    <v-window class="d-flex flex-grow-1 ml-md-5 disable-tab-transition w-100-window-container" v-model="activeTab">
+                        <v-window-item value="accountPage">
+                            <v-card variant="flat">
+                                <template #title>
+                                    <div class="d-flex align-center">
+                                        <span>{{ $t('Account List') }}</span>
+                                        <v-btn class="ml-3" color="default" variant="outlined"
+                                               :disabled="loading" @click="add">{{ $t('Add') }}</v-btn>
+                                        <v-btn density="compact" color="default" variant="text"
+                                               class="ml-2" :icon="true" :disabled="loading"
+                                               v-if="!loading" @click="reload">
+                                            <v-icon :icon="icons.refresh" size="24" />
+                                            <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
+                                        </v-btn>
+                                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
+                                        <v-spacer/>
+                                        <v-btn density="comfortable" color="default" variant="text" class="ml-2"
+                                               :disabled="loading" :icon="true">
+                                            <v-icon :icon="icons.more" />
+                                            <v-menu activator="parent">
+                                                <v-list>
+                                                    <v-list-item :prepend-icon="icons.show"
+                                                                 :title="$t('Show Hidden Account')"
+                                                                 v-if="!showHidden" @click="showHidden = true"></v-list-item>
+                                                    <v-list-item :prepend-icon="icons.hide"
+                                                                 :title="$t('Hide Hidden Account')"
+                                                                 v-if="showHidden" @click="showHidden = false"></v-list-item>
+                                                </v-list>
+                                            </v-menu>
+                                        </v-btn>
+                                    </div>
+                                </template>
+
+                                <v-card-text class="accounts-overview-title pt-0">
+                                    <span class="text-subtitle-1">{{ $t('Balance') }}</span>
+                                    <span class="accounts-overview-amount ml-3">
+                                        {{ 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-btn>
+                                </v-card-text>
+
+                                <div v-if="loading && !hasAccount(activeAccountCategory)">
+                                    <v-skeleton-loader type="paragraph" :loading="loading"
+                                                       :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader>
+                                </div>
+
+                                <v-row class="pl-4 pr-8" v-if="!loading && !hasAccount(activeAccountCategory)">
+                                    <v-col cols="12">
+                                        {{ $t('No available account') }}
+                                    </v-col>
+                                </v-row>
+
+                                <v-row class="pl-4 pr-8" v-if="categorizedAccounts[activeAccountCategory.id] && categorizedAccounts[activeAccountCategory.id].accounts && categorizedAccounts[activeAccountCategory.id].accounts.length">
+                                    <v-col cols="12">
+                                        <v-card border class="mb-8 h-auto" :key="account.id"
+                                                v-for="account in categorizedAccounts[activeAccountCategory.id].accounts"
+                                                v-show="showHidden || !account.hidden">
+                                            <template #title>
+                                                <div class="account-title d-flex align-baseline">
+                                                    <ItemIcon icon-type="account" :icon-id="account.icon"
+                                                              :color="account.color" :hidden-status="account.hidden" />
+                                                    <span class="ml-3">{{ account.name }}</span>
+                                                    <small class="account-currency ml-3">
+                                                        {{ accountCurrency(account) }}
+                                                    </small>
+                                                    <v-spacer/>
+                                                    <v-btn density="comfortable" color="default" variant="text" class="ml-2"
+                                                           :disabled="loading" :icon="true">
+                                                        <v-icon :icon="icons.more" />
+                                                        <v-menu activator="parent">
+                                                            <v-list>
+                                                                <v-list-item :to="`/transactions?accountId=${accountOrSubAccountId(account)}`"
+                                                                             :prepend-icon="icons.transactions"
+                                                                             :title="$t('View Transactions')"></v-list-item>
+                                                            </v-list>
+                                                        </v-menu>
+                                                    </v-btn>
+                                                </div>
+
+                                                <div class="mt-4" v-if="account.type === allAccountTypes.MultiSubAccounts">
+                                                    <v-btn-toggle
+                                                        class="account-subaccounts"
+                                                        variant="outlined"
+                                                        color="primary"
+                                                        density="compact"
+                                                        mandatory="force"
+                                                        divided rounded="xl"
+                                                        :disabled="loading"
+                                                        v-model="activeSubAccount[account.id]"
+                                                    >
+                                                        <v-btn :value="undefined">
+                                                            <span>{{ $t('All') }}</span>
+                                                        </v-btn>
+                                                        <v-btn :value="subAccount.id"
+                                                               v-for="subAccount in account.subAccounts"
+                                                               v-show="showHidden || !subAccount.hidden">
+                                                            <ItemIcon icon-type="account" :icon-id="subAccount.icon"
+                                                                      :color="subAccount.color" :hidden-status="subAccount.hidden" />
+                                                            <span class="ml-3">{{ subAccount.name }}</span>
+                                                        </v-btn>
+                                                    </v-btn-toggle>
+                                                </div>
+                                            </template>
+
+                                            <v-divider/>
+
+                                            <v-card-text v-if="accountComment(account)">
+                                                {{ accountComment(account) }}
+                                            </v-card-text>
+
+                                            <v-card-text>
+                                                <div class="d-flex align-center">
+                                                    <v-btn class="px-2" density="comfortable" color="default" variant="text"
+                                                           :disabled="loading" :prepend-icon="icons.edit"
+                                                           @click="edit(account)">
+                                                        {{ $t('Edit') }}
+                                                    </v-btn>
+                                                    <v-btn class="px-2 ml-2" density="comfortable" color="default" variant="text"
+                                                           :disabled="loading" :prepend-icon="icons.hide"
+                                                           v-if="!account.hidden"
+                                                           @click="hide(account, true)">
+                                                        {{ $t('Hide') }}
+                                                    </v-btn>
+                                                    <v-btn class="px-2 ml-2" density="comfortable" color="default" variant="text"
+                                                           :disabled="loading" :prepend-icon="icons.show"
+                                                           v-if="account.hidden"
+                                                           @click="hide(account, false)">
+                                                        {{ $t('Show') }}
+                                                    </v-btn>
+                                                    <v-btn class="px-2 ml-2" density="comfortable" color="default" variant="text"
+                                                           :disabled="loading" :prepend-icon="icons.remove"
+                                                           @click="remove(account)">
+                                                        {{ $t('Delete') }}
+                                                    </v-btn>
+                                                    <v-spacer/>
+                                                    <span class="account-balance">{{ accountBalance(account) }}</span>
+                                                </div>
+                                            </v-card-text>
+                                        </v-card>
+                                    </v-col>
+                                </v-row>
+                            </v-card>
+                        </v-window-item>
+                    </v-window>
+                </div>
+            </v-card>
+        </v-col>
     </v-row>
+
+    <confirm-dialog ref="confirmDialog"/>
+    <snack-bar ref="snackbar" />
 </template>
 
 <script>
-export default {
+import { mapStores } from 'pinia';
-    created() {
+import { useSettingsStore } from '@/stores/setting.js';
+import { useUserStore } from '@/stores/user.js';
+import { useAccountsStore } from '@/stores/account.js';
+import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
+import accountConstants from '@/consts/account.js';
+import { isObject } from '@/lib/common.js';
+import {
+    getAccountCategoryInfo,
+    getSubAccountCurrencies,
+    getAccountOrSubAccountId,
+    getAccountOrSubAccountComment
+} from '@/lib/account.js';
+
+import {
+    mdiEyeOutline,
+    mdiEyeOffOutline,
+    mdiRefresh,
+    mdiPencilOutline,
+    mdiDeleteOutline,
+    mdiListBoxOutline,
+    mdiDotsVertical,
+} from '@mdi/js';
+
+export default {
+    data() {
+        return {
+            activeAccountCategoryId: accountConstants.allCategories[0].id,
+            activeTab: 'accountPage',
+            activeSubAccount: {},
+            loading: true,
+            showHidden: false,
+            icons: {
+                eye: mdiEyeOutline,
+                eyeSlash: mdiEyeOffOutline,
+                refresh: mdiRefresh,
+                edit: mdiPencilOutline,
+                show: mdiEyeOutline,
+                hide: mdiEyeOffOutline,
+                remove: mdiDeleteOutline,
+                transactions: mdiListBoxOutline,
+                more: mdiDotsVertical
+            }
+        };
+    },
+    computed: {
+        ...mapStores(useSettingsStore, useUserStore, useAccountsStore, useExchangeRatesStore),
+        defaultCurrency() {
+            return this.userStore.currentUserDefaultCurrency;
+        },
+        allAccountTypes() {
+            return accountConstants.allAccountTypes;
+        },
+        allAccountCategories() {
+            return accountConstants.allCategories;
+        },
+        categorizedAccounts() {
+            return this.accountsStore.allCategorizedAccounts;
+        },
+        allAccountCount() {
+            return this.accountsStore.allAvailableAccountsCount;
+        },
+        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);
+        },
+        activeAccountCategory() {
+            return getAccountCategoryInfo(this.activeAccountCategoryId);
+        },
+        activeAccountCategoryTotalBalance() {
+            return this.accountCategoryTotalBalance(this.activeAccountCategory);
+        },
+        showAccountBalance: {
+            get: function () {
+                return this.settingsStore.appSettings.showAccountBalance;
+            },
+            set: function (value) {
+                this.settingsStore.setShowAccountBalance(value);
+            }
+        }
+    },
+    created() {
+        this.reload(false);
+    },
+    methods: {
+        reload(force) {
+            const self = this;
+
+            self.loading = true;
+
+            self.accountsStore.loadAllAccounts({
+                force: force
+            }).then(() => {
+                self.loading = false;
+
+                if (force) {
+                    self.$refs.snackbar.showMessage('Account list has been updated');
+                }
+            }).catch(error => {
+                self.loading = 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 getAccountOrSubAccountId(account, this.activeSubAccount[account.id]);
+        },
+        accountComment(account) {
+            return getAccountOrSubAccountComment(account, this.activeSubAccount[account.id]);
+        },
+        accountCurrency(account) {
+            const self = this;
+
+            if (account.type === self.allAccountTypes.SingleAccount) {
+                return self.$locale.getCurrencyName(account.currency);
+            } else if (account.type === self.allAccountTypes.MultiSubAccounts) {
+                const subAccountCurrencies = getSubAccountCurrencies(account, 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) {
+                const balance = this.accountsStore.getAccountBalance(this.showAccountBalance, account);
+                return this.getDisplayCurrency(balance, account.currency);
+            } else if (account.type === this.allAccountTypes.MultiSubAccounts) {
+                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);
+        },
+        add() {
+
+        },
+        edit(account) {
+
+        },
+        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.getDisplayCurrency(value, currencyCode, {
+                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
+                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
+            });
+        }
     }
 }
 </script>
+
+<style>
+.accounts-summary-skeleton .v-skeleton-loader__text {
+    margin: 0;
+}
+
+.account-category-tabs .v-tab.v-tab {
+    --v-btn-height: calc(var(--v-tabs-height) * 1.5);
+}
+
+.accounts-overview-title {
+    line-height: 2rem !important;
+    height: 46px;
+    display: flex;
+    align-items: flex-end;
+}
+
+.accounts-overview-amount {
+    font-size: 1.5rem;
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.account-title {
+    line-height: 1.5rem !important;
+}
+
+.account-currency {
+    font-size: 0.8rem;
+    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+}
+
+.account-subaccounts {
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+.account-balance {
+    font-size: 1.5rem;
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+}
+</style>