add asset summary card in home page, add 6 more months in trend card

pkg/api/transactions.go

@@ -290,7 +290,7 @@ func (a *TransactionsApi) TransactionAmountsHandler(c *core.Context) (interface{
 		return nil, errs.ErrQueryItemsEmpty
 	}
 
-	if len(requestItems) > 10 {
+	if len(requestItems) > 20 {
 		log.WarnfWithRequestId(c, "[transactions.TransactionAmountsHandler] parse request failed, because there are too many items")
 		return nil, errs.ErrQueryItemsTooMuch
 	}

src/lib/services.js

@@ -258,7 +258,7 @@ export default {
 
         return axios.get('v1/transactions/statistics.json' + (queryParams.length ? '?' + queryParams.join('&') : ''));
     },
-    getTransactionAmounts: ({ today, thisWeek, thisMonth, thisYear, lastMonth, monthBeforeLastMonth, monthBeforeLast2Months, monthBeforeLast3Months, monthBeforeLast4Months }) => {
+    getTransactionAmounts: ({ today, thisWeek, thisMonth, thisYear, lastMonth, monthBeforeLastMonth, monthBeforeLast2Months, monthBeforeLast3Months, monthBeforeLast4Months, monthBeforeLast5Months, monthBeforeLast6Months, monthBeforeLast7Months, monthBeforeLast8Months, monthBeforeLast9Months, monthBeforeLast10Months }) => {
         const queryParams = [];
 
         if (today) {
@@ -297,6 +297,30 @@ export default {
             queryParams.push(`monthBeforeLast4Months_${monthBeforeLast4Months.startTime}_${monthBeforeLast4Months.endTime}`);
         }
 
+        if (monthBeforeLast5Months) {
+            queryParams.push(`monthBeforeLast5Months_${monthBeforeLast5Months.startTime}_${monthBeforeLast5Months.endTime}`);
+        }
+
+        if (monthBeforeLast6Months) {
+            queryParams.push(`monthBeforeLast6Months_${monthBeforeLast6Months.startTime}_${monthBeforeLast6Months.endTime}`);
+        }
+
+        if (monthBeforeLast7Months) {
+            queryParams.push(`monthBeforeLast7Months_${monthBeforeLast7Months.startTime}_${monthBeforeLast7Months.endTime}`);
+        }
+
+        if (monthBeforeLast8Months) {
+            queryParams.push(`monthBeforeLast8Months_${monthBeforeLast8Months.startTime}_${monthBeforeLast8Months.endTime}`);
+        }
+
+        if (monthBeforeLast9Months) {
+            queryParams.push(`monthBeforeLast9Months_${monthBeforeLast9Months.startTime}_${monthBeforeLast9Months.endTime}`);
+        }
+
+        if (monthBeforeLast10Months) {
+            queryParams.push(`monthBeforeLast10Months_${monthBeforeLast10Months.startTime}_${monthBeforeLast10Months.endTime}`);
+        }
+
         return axios.get('v1/transactions/amounts.json' + (queryParams.length ? '?query=' + queryParams.join('|') : ''));
     },
     getTransaction: ({ id }) => {

src/locales/en.js

@@ -71,7 +71,8 @@ export default {
             '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',
-            'hoursMinutesAheadOfDefaultTimezone': '{hours} hour(s) and {minutes} minutes ahead of default timezone'
+            'hoursMinutesAheadOfDefaultTimezone': '{hours} hour(s) and {minutes} minutes ahead of default timezone',
+            'youHaveAccounts': 'You have recorded {count} accounts'
         }
     },
     'dataExport': {
@@ -837,6 +838,7 @@ export default {
     'PIN code is wrong': 'PIN code is wrong',
     'Sign Up': 'Sign Up',
     'Overview': 'Overview',
+    'Asset Summary': 'Asset Summary',
     'Trend in Income and Expense': 'Trend in Income and Expense',
     'View Details': 'View Details',
     'Transaction List': 'Transaction List',

src/locales/zh_Hans.js

@@ -71,7 +71,8 @@ export default {
             'hoursBehindDefaultTimezone': '比默认时区晚{hours}小时',
             'hoursAheadOfDefaultTimezone': '比默认时区早{hours}小时',
             'hoursMinutesBehindDefaultTimezone': '比默认时区晚{hours}小时{minutes}分',
-            'hoursMinutesAheadOfDefaultTimezone': '比默认时区早{time}小时{minutes}分'
+            'hoursMinutesAheadOfDefaultTimezone': '比默认时区早{time}小时{minutes}分',
+            'youHaveAccounts': '您已经记录 {count} 个账户'
         }
     },
     'dataExport': {
@@ -837,6 +838,7 @@ export default {
     'PIN code is wrong': 'PIN码错误',
     'Sign Up': '注册',
     'Overview': '总览',
+    'Asset Summary': '资产概要',
     'Trend in Income and Expense': '收入与支出趋势',
     'View Details': '查看详情',
     'Transaction List': '交易列表',

src/stores/overview.js

@@ -39,14 +39,10 @@ function updateTransactionDateRange(state) {
     state.transactionDataRange.monthBeforeLastMonth.startTime = getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 2, 'months');
     state.transactionDataRange.monthBeforeLastMonth.endTime = getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 2, 'months');
 
-    state.transactionDataRange.monthBeforeLast2Months.startTime = getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 3, 'months');
+    for (let i = 2; i <= 10; i++) {
-    state.transactionDataRange.monthBeforeLast2Months.endTime = getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 3, 'months');
+        state.transactionDataRange[`monthBeforeLast${i}Months`].startTime = getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), i + 1, 'months');
-
+        state.transactionDataRange[`monthBeforeLast${i}Months`].endTime = getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), i + 1, 'months');
-    state.transactionDataRange.monthBeforeLast3Months.startTime = getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 4, 'months');
+    }
-    state.transactionDataRange.monthBeforeLast3Months.endTime = getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 4, 'months');
-
-    state.transactionDataRange.monthBeforeLast4Months.startTime = getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 5, 'months');
-    state.transactionDataRange.monthBeforeLast4Months.endTime = getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 5, 'months');
 }
 
 export const useOverviewStore = defineStore('overview', {
@@ -87,10 +83,34 @@ export const useOverviewStore = defineStore('overview', {
             monthBeforeLast4Months: {
                 startTime: getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 5, 'months'),
                 endTime: getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 5, 'months')
+            },
+            monthBeforeLast5Months: {
+                startTime: getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 6, 'months'),
+                endTime: getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 6, 'months')
+            },
+            monthBeforeLast6Months: {
+                startTime: getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 7, 'months'),
+                endTime: getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 7, 'months')
+            },
+            monthBeforeLast7Months: {
+                startTime: getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 8, 'months'),
+                endTime: getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 8, 'months')
+            },
+            monthBeforeLast8Months: {
+                startTime: getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 9, 'months'),
+                endTime: getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 9, 'months')
+            },
+            monthBeforeLast9Months: {
+                startTime: getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 10, 'months'),
+                endTime: getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 10, 'months')
+            },
+            monthBeforeLast10Months: {
+                startTime: getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 11, 'months'),
+                endTime: getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 11, 'months')
             }
         },
         transactionOverviewOptions: {
-            loadLast5Months: false
+            loadLast11Months: false
         },
         transactionOverviewData: {},
         transactionOverviewStateInvalid: true
@@ -117,7 +137,23 @@ export const useOverviewStore = defineStore('overview', {
             const finalOverviewData = {};
             const defaultCurrency = userStore.currentUserDefaultCurrency;
 
-            [ 'today', 'thisWeek', 'thisMonth', 'thisYear', 'lastMonth', 'monthBeforeLastMonth', 'monthBeforeLast2Months', 'monthBeforeLast3Months', 'monthBeforeLast4Months' ].forEach(field => {
+            [
+                'today',
+                'thisWeek',
+                'thisMonth',
+                'thisYear',
+                'lastMonth',
+                'monthBeforeLastMonth',
+                'monthBeforeLast2Months',
+                'monthBeforeLast3Months',
+                'monthBeforeLast4Months',
+                'monthBeforeLast5Months',
+                'monthBeforeLast6Months',
+                'monthBeforeLast7Months',
+                'monthBeforeLast8Months',
+                'monthBeforeLast9Months',
+                'monthBeforeLast10Months'
+            ].forEach(field => {
                 if (!Object.prototype.hasOwnProperty.call(overviewData, field)) {
                     return;
                 }
@@ -178,11 +214,11 @@ export const useOverviewStore = defineStore('overview', {
         },
         resetTransactionOverview() {
             updateTransactionDateRange(this);
-            this.transactionOverviewOptions.loadLast5Months = false;
+            this.transactionOverviewOptions.loadLast11Months = false;
             this.transactionOverviewData = {};
             this.transactionOverviewStateInvalid = true;
         },
-        loadTransactionOverview({ force, loadLast5Months }) {
+        loadTransactionOverview({ force, loadLast11Months }) {
             const self = this;
             let dateChanged = false;
             let rangeChanged = false;
@@ -192,7 +228,7 @@ export const useOverviewStore = defineStore('overview', {
                 updateTransactionDateRange(self);
             }
 
-            if (loadLast5Months && !self.transactionOverviewOptions.loadLast5Months) {
+            if (loadLast11Months && !self.transactionOverviewOptions.loadLast11Months) {
                 rangeChanged = true;
             }
 
@@ -209,12 +245,18 @@ export const useOverviewStore = defineStore('overview', {
                 thisYear: self.transactionDataRange.thisYear
             };
 
-            if (loadLast5Months) {
+            if (loadLast11Months) {
                 requestParams.lastMonth = self.transactionDataRange.lastMonth;
                 requestParams.monthBeforeLastMonth = self.transactionDataRange.monthBeforeLastMonth;
                 requestParams.monthBeforeLast2Months = self.transactionDataRange.monthBeforeLast2Months;
                 requestParams.monthBeforeLast3Months = self.transactionDataRange.monthBeforeLast3Months;
                 requestParams.monthBeforeLast4Months = self.transactionDataRange.monthBeforeLast4Months;
+                requestParams.monthBeforeLast5Months = self.transactionDataRange.monthBeforeLast5Months;
+                requestParams.monthBeforeLast6Months = self.transactionDataRange.monthBeforeLast6Months;
+                requestParams.monthBeforeLast7Months = self.transactionDataRange.monthBeforeLast7Months;
+                requestParams.monthBeforeLast8Months = self.transactionDataRange.monthBeforeLast8Months;
+                requestParams.monthBeforeLast9Months = self.transactionDataRange.monthBeforeLast9Months;
+                requestParams.monthBeforeLast10Months = self.transactionDataRange.monthBeforeLast10Months;
             }
 
             return new Promise((resolve, reject) => {
@@ -236,7 +278,7 @@ export const useOverviewStore = defineStore('overview', {
                     }
 
                     self.transactionOverviewData = data.result;
-                    self.transactionOverviewOptions.loadLast5Months = loadLast5Months;
+                    self.transactionOverviewOptions.loadLast11Months = loadLast11Months;
 
                     resolve(data.result);
                 }).catch(error => {

src/views/desktop/HomePage.vue

@@ -40,68 +40,136 @@
             </v-card>
         </v-col>
 
-        <v-col cols="12" lg="2" md="6">
+        <v-col cols="12" lg="8" md="12">
-            <income-expense-overview-card
+            <v-card :class="{ 'disabled': loadingOverview }">
-                :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarToday"
+                <template #title>
-                :title="$t('Today')"
+                    <span>{{ $t('Asset Summary') }}</span>
-                :expense-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayExpenseAmount(transactionOverview.today) : ''"
-                :income-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayIncomeAmount(transactionOverview.today) : ''"
-                :datetime="displayDateRange.today.displayTime"
-            >
-                <template #menus>
-                    <v-list-item :prepend-icon="icons.viewDetails" :to="'/transactions?dateType=' + allDateRanges.Today.type">
-                        <v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
-                    </v-list-item>
                 </template>
-            </income-expense-overview-card>
+
+                <v-card-text>
+                    <h6 class="text-sm font-weight-medium mb-6">
+                        <span>{{ $t('format.misc.youHaveAccounts', { count: allAccounts.length }) }}</span>
+                    </h6>
+
+                    <v-row>
+                        <v-col cols="12" md="4">
+                            <div class="d-flex align-center">
+                                <div class="me-3">
+                                    <v-avatar rounded color="secondary" size="42" class="elevation-1">
+                                        <v-icon size="24" :icon="icons.totalAssets"/>
+                                    </v-avatar>
+                                </div>
+
+                                <div class="d-flex flex-column">
+                                    <span class="text-caption">{{ $t('Total assets') }}</span>
+                                    <span class="text-h6" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ totalAssets }}</span>
+                                    <v-skeleton-loader class="overview-card-skeleton mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
+                                </div>
+                            </div>
+                        </v-col>
+
+                        <v-col cols="12" md="4">
+                            <div class="d-flex align-center">
+                                <div class="me-3">
+                                    <v-avatar rounded color="expense" size="42" class="elevation-1">
+                                        <v-icon size="24" :icon="icons.totalLiabilities"/>
+                                    </v-avatar>
+                                </div>
+
+                                <div class="d-flex flex-column">
+                                    <span class="text-caption">{{ $t('Total liabilities') }}</span>
+                                    <span class="text-h6" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ totalLiabilities }}</span>
+                                    <v-skeleton-loader class="overview-card-skeleton mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
+                                </div>
+                            </div>
+                        </v-col>
+
+                        <v-col cols="12" md="4">
+                            <div class="d-flex align-center">
+                                <div class="me-3">
+                                    <v-avatar rounded color="primary" size="42" class="elevation-1">
+                                        <v-icon size="24" :icon="icons.netAssets"/>
+                                    </v-avatar>
+                                </div>
+
+                                <div class="d-flex flex-column">
+                                    <span class="text-caption">{{ $t('Net assets') }}</span>
+                                    <span class="text-h6" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ netAssets }}</span>
+                                    <v-skeleton-loader class="overview-card-skeleton mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
+                                </div>
+                            </div>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+            </v-card>
         </v-col>
 
-        <v-col cols="12" lg="2" md="6">
+        <v-col cols="12" md="6">
-            <income-expense-overview-card
+            <v-row>
-                :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarWeek"
+                <v-col cols="12" md="6">
-                :title="$t('This Week')"
+                    <income-expense-overview-card
-                :expense-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayExpenseAmount(transactionOverview.thisWeek) : ''"
+                        :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarToday"
-                :income-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayIncomeAmount(transactionOverview.thisWeek) : ''"
+                        :title="$t('Today')"
-                :datetime="displayDateRange.thisWeek.startTime + '-' + displayDateRange.thisWeek.endTime"
+                        :expense-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayExpenseAmount(transactionOverview.today) : ''"
-            >
+                        :income-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayIncomeAmount(transactionOverview.today) : ''"
-                <template #menus>
+                        :datetime="displayDateRange.today.displayTime"
-                    <v-list-item :prepend-icon="icons.viewDetails" :to="'/transactions?dateType=' + allDateRanges.ThisWeek.type">
+                    >
-                        <v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
+                        <template #menus>
-                    </v-list-item>
+                            <v-list-item :prepend-icon="icons.viewDetails" :to="'/transactions?dateType=' + allDateRanges.Today.type">
-                </template>
+                                <v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
-            </income-expense-overview-card>
+                            </v-list-item>
-        </v-col>
+                        </template>
+                    </income-expense-overview-card>
+                </v-col>
 
-        <v-col cols="12" lg="2" md="6">
+                <v-col cols="12" md="6">
-            <income-expense-overview-card
+                    <income-expense-overview-card
-                :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarMonth"
+                        :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarWeek"
-                :title="$t('This Month')"
+                        :title="$t('This Week')"
-                :expense-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayExpenseAmount(transactionOverview.thisMonth) : ''"
+                        :expense-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayExpenseAmount(transactionOverview.thisWeek) : ''"
-                :income-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayIncomeAmount(transactionOverview.thisMonth) : ''"
+                        :income-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayIncomeAmount(transactionOverview.thisWeek) : ''"
-                :datetime="displayDateRange.thisMonth.startTime + '-' + displayDateRange.thisMonth.endTime"
+                        :datetime="displayDateRange.thisWeek.startTime + '-' + displayDateRange.thisWeek.endTime"
-            >
+                    >
-                <template #menus>
+                        <template #menus>
-                    <v-list-item :prepend-icon="icons.viewDetails" :to="'/transactions?dateType=' + allDateRanges.ThisMonth.type">
+                            <v-list-item :prepend-icon="icons.viewDetails" :to="'/transactions?dateType=' + allDateRanges.ThisWeek.type">
-                        <v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
+                                <v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
-                    </v-list-item>
+                            </v-list-item>
-                </template>
+                        </template>
-            </income-expense-overview-card>
+                    </income-expense-overview-card>
-        </v-col>
+                </v-col>
 
-        <v-col cols="12" lg="2" md="6">
+                <v-col cols="12" md="6">
-            <income-expense-overview-card
+                    <income-expense-overview-card
-                :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarYear"
+                        :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarMonth"
-                :title="$t('This Year')"
+                        :title="$t('This Month')"
-                :expense-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayExpenseAmount(transactionOverview.thisYear) : ''"
+                        :expense-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayExpenseAmount(transactionOverview.thisMonth) : ''"
-                :income-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayIncomeAmount(transactionOverview.thisYear) : ''"
+                        :income-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayIncomeAmount(transactionOverview.thisMonth) : ''"
-                :datetime="displayDateRange.thisYear.displayTime"
+                        :datetime="displayDateRange.thisMonth.startTime + '-' + displayDateRange.thisMonth.endTime"
-            >
+                    >
-                <template #menus>
+                        <template #menus>
-                    <v-list-item :prepend-icon="icons.viewDetails" :to="'/transactions?dateType=' + allDateRanges.ThisYear.type">
+                            <v-list-item :prepend-icon="icons.viewDetails" :to="'/transactions?dateType=' + allDateRanges.ThisMonth.type">
-                        <v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
+                                <v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
-                    </v-list-item>
+                            </v-list-item>
-                </template>
+                        </template>
-            </income-expense-overview-card>
+                    </income-expense-overview-card>
+                </v-col>
+
+                <v-col cols="12" md="6">
+                    <income-expense-overview-card
+                        :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarYear"
+                        :title="$t('This Year')"
+                        :expense-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayExpenseAmount(transactionOverview.thisYear) : ''"
+                        :income-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayIncomeAmount(transactionOverview.thisYear) : ''"
+                        :datetime="displayDateRange.thisYear.displayTime"
+                    >
+                        <template #menus>
+                            <v-list-item :prepend-icon="icons.viewDetails" :to="'/transactions?dateType=' + allDateRanges.ThisYear.type">
+                                <v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
+                            </v-list-item>
+                        </template>
+                    </income-expense-overview-card>
+                </v-col>
+            </v-row>
         </v-col>
 
         <v-col cols="12" md="6">
@@ -122,6 +190,7 @@ import MonthlyIncomeAndExpenseCard from './overview/MonthlyIncomeAndExpenseCard.
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
+import { useAccountsStore } from '@/stores/account.js';
 import { useOverviewStore } from '@/stores/overview.js';
 
 import datetimeConstants from '@/consts/datetime.js';
@@ -131,7 +200,9 @@ import {
     mdiRefresh,
     mdiEyeOutline,
     mdiEyeOffOutline,
-    mdiCartOutline,
+    mdiBankOutline,
+    mdiCreditCardOutline,
+    mdiPiggyBankOutline,
     mdiCalendarTodayOutline,
     mdiCalendarWeekOutline,
     mdiCalendarMonthOutline,
@@ -152,7 +223,9 @@ export default {
                 refresh: mdiRefresh,
                 eye: mdiEyeOutline,
                 eyeSlash: mdiEyeOffOutline,
-                cart: mdiCartOutline,
+                totalAssets: mdiBankOutline,
+                totalLiabilities: mdiCreditCardOutline,
+                netAssets: mdiPiggyBankOutline,
                 calendarToday: mdiCalendarTodayOutline,
                 calendarWeek: mdiCalendarWeekOutline,
                 calendarMonth: mdiCalendarMonthOutline,
@@ -163,7 +236,7 @@ export default {
         };
     },
     computed: {
-        ...mapStores(useSettingsStore, useUserStore, useOverviewStore),
+        ...mapStores(useSettingsStore, useUserStore, useAccountsStore, useOverviewStore),
         isDarkMode() {
             return this.globalTheme.global.name.value === 'dark';
         },
@@ -181,6 +254,21 @@ export default {
         allDateRanges() {
             return datetimeConstants.allDateRanges;
         },
+        allAccounts() {
+            return this.accountsStore.allAccounts;
+        },
+        netAssets() {
+            const netAssets = this.accountsStore.getNetAssets(this.showAmountInHomePage);
+            return this.getDisplayCurrency(netAssets, this.defaultCurrency);
+        },
+        totalAssets() {
+            const totalAssets = this.accountsStore.getTotalAssets(this.showAmountInHomePage);
+            return this.getDisplayCurrency(totalAssets, this.defaultCurrency);
+        },
+        totalLiabilities() {
+            const totalLiabilities = this.accountsStore.getTotalLiabilities(this.showAmountInHomePage);
+            return this.getDisplayCurrency(totalLiabilities, this.defaultCurrency);
+        },
         displayDateRange() {
             const self = this;
 
@@ -213,7 +301,20 @@ export default {
                 return data;
             }
 
-            [ 'monthBeforeLast4Months', 'monthBeforeLast3Months', 'monthBeforeLast2Months', 'monthBeforeLastMonth', 'lastMonth', 'thisMonth' ].forEach(fieldName => {
+            [
+                'monthBeforeLast10Months',
+                'monthBeforeLast9Months',
+                'monthBeforeLast8Months',
+                'monthBeforeLast7Months',
+                'monthBeforeLast6Months',
+                'monthBeforeLast5Months',
+                'monthBeforeLast4Months',
+                'monthBeforeLast3Months',
+                'monthBeforeLast2Months',
+                'monthBeforeLastMonth',
+                'lastMonth',
+                'thisMonth'
+            ].forEach(fieldName => {
                 if (!Object.prototype.hasOwnProperty.call(self.transactionOverview, fieldName)) {
                     return;
                 }
@@ -256,10 +357,12 @@ export default {
 
             self.loadingOverview = true;
 
-            self.overviewStore.loadTransactionOverview({
+            const promises = [
-                force: force,
+                self.accountsStore.loadAllAccounts({ force: false }),
-                loadLast5Months: true
+                self.overviewStore.loadTransactionOverview({ force: force, loadLast11Months: true })
-            }).then(() => {
+            ];
+
+            Promise.all(promises).then(() => {
                 self.loadingOverview = false;
 
                 if (force) {

src/views/desktop/overview/IncomeExpenseOverviewCard.vue

@@ -15,13 +15,13 @@
                 </v-menu>
             </v-btn>
         </v-card-text>
-        <v-card-text class="pb-2">
+        <v-card-text class="mt-1 pb-2">
             <div class="font-weight-semibold text-truncate text-red text-h5 text-income me-2 mb-2" v-if="!loading || incomeAmount">{{ incomeAmount }}</div>
-            <v-skeleton-loader class="income-expense-overview-card-skeleton mt-4 mb-6" type="text" :loading="true" v-else-if="loading && !incomeAmount"></v-skeleton-loader>
+            <v-skeleton-loader class="income-expense-overview-card-skeleton mt-4 mb-6" type="text" width="120px" :loading="true" v-else-if="loading && !incomeAmount"></v-skeleton-loader>
             <div class="text-truncate text-h6 text-expense" v-if="!loading || expenseAmount">{{ expenseAmount }}</div>
-            <v-skeleton-loader class="income-expense-overview-card-skeleton mb-2" type="text" :loading="true" v-else-if="loading && !expenseAmount"></v-skeleton-loader>
+            <v-skeleton-loader class="income-expense-overview-card-skeleton mb-2" type="text" width="120px" :loading="true" v-else-if="loading && !expenseAmount"></v-skeleton-loader>
         </v-card-text>
-        <v-card-text>
+        <v-card-text class="mt-6">
             <span class="text-caption">{{ datetime }}</span>
         </v-card-text>
     </v-card>

src/views/desktop/overview/MonthlyIncomeAndExpenseCard.vue

@@ -6,23 +6,9 @@
 
         <v-card-text class="overview-monthly-chart-container overview-monthly-chart-overlay" v-if="loading && !hasAnyData">
             <div class="overview-monthly-chart-skeleton-container h-100" style="margin-top: -30px">
-                <div class="d-flex w-100 h-100 align-center justify-center">
+                <div class="d-flex w-100 h-100 align-center justify-center"
-                    <v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
+                     :key="itemIdx" v-for="itemIdx in [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]">
-                </div>
+                    <v-skeleton-loader width="16" height="200" :loading="true"></v-skeleton-loader>
-                <div class="d-flex w-100 h-100 align-center justify-center">
-                    <v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
-                </div>
-                <div class="d-flex w-100 h-100 align-center justify-center">
-                    <v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
-                </div>
-                <div class="d-flex w-100 h-100 align-center justify-center">
-                    <v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
-                </div>
-                <div class="d-flex w-100 h-100 align-center justify-center">
-                    <v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
-                </div>
-                <div class="d-flex w-100 h-100 align-center justify-center">
-                    <v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
                 </div>
             </div>
         </v-card-text>
@@ -238,7 +224,7 @@ export default {
                                 show: false
                             }
                         },
-                        barMaxWidth: 40,
+                        barMaxWidth: 16,
                         data: incomeAmounts
                     },
                     {
@@ -257,7 +243,7 @@ export default {
                                 show: false
                             }
                         },
-                        barMaxWidth: 40,
+                        barMaxWidth: 16,
                         data: expenseAmounts
                     }
                 ]
@@ -301,7 +287,7 @@ export default {
 
 .overview-monthly-chart-skeleton-container {
     display: grid;
-    grid-template-columns: repeat(6, minmax(0, 1fr));
+    grid-template-columns: repeat(12, minmax(0, 1fr));
 }
 
 .overview-monthly-chart-tooltip-indicator {