migrate desktop home page to composition API and typescript

src/locales/helpers.ts

@@ -1363,6 +1363,8 @@ export function useI18n() {
         formatUnixTimeToShortDate: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedShortDateFormat(), utcOffset, currentUtcOffset),
         formatUnixTimeToLongYear: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedLongYearFormat(), utcOffset, currentUtcOffset),
         formatUnixTimeToShortYear: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedShortYearFormat(), utcOffset, currentUtcOffset),
+        formatUnixTimeToLongMonth: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, 'MMMM', utcOffset, currentUtcOffset),
+        formatUnixTimeToShortMonth: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, 'MMM', utcOffset, currentUtcOffset),
         formatUnixTimeToLongYearMonth: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedLongYearMonthFormat(), utcOffset, currentUtcOffset),
         formatUnixTimeToShortYearMonth: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedShortYearMonthFormat(), utcOffset, currentUtcOffset),
         formatUnixTimeToLongMonthDay: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedLongMonthDayFormat(), utcOffset, currentUtcOffset),

src/models/transaction.ts

@@ -128,14 +128,40 @@ export interface TransactionStatisticTrendsRequest extends YearMonthRangeRequest
 }
 
 export const ALL_TRANSACTION_AMOUNTS_REQUEST_TYPE = [
-    'today', 'thisWeek', 'thisMonth', 'thisYear', 'lastMonth',
+    'today',
-    'monthBeforeLastMonth', 'monthBeforeLast2Months', 'monthBeforeLast3Months',
+    'thisWeek',
-    'monthBeforeLast4Months', 'monthBeforeLast5Months', 'monthBeforeLast6Months',
+    'thisMonth',
-    'monthBeforeLast7Months', 'monthBeforeLast8Months', 'monthBeforeLast9Months', 'monthBeforeLast10Months'
+    'thisYear',
+    'lastMonth',
+    'monthBeforeLastMonth',
+    'monthBeforeLast2Months',
+    'monthBeforeLast3Months',
+    'monthBeforeLast4Months',
+    'monthBeforeLast5Months',
+    'monthBeforeLast6Months',
+    'monthBeforeLast7Months',
+    'monthBeforeLast8Months',
+    'monthBeforeLast9Months',
+    'monthBeforeLast10Months'
 ] as const;
 
 export type TransactionAmountsRequestType = typeof ALL_TRANSACTION_AMOUNTS_REQUEST_TYPE[number];
 
+export const LATEST_12MONTHS_TRANSACTION_AMOUNTS_REQUEST_TYPES: TransactionAmountsRequestType[] = [
+    'monthBeforeLast10Months',
+    'monthBeforeLast9Months',
+    'monthBeforeLast8Months',
+    'monthBeforeLast7Months',
+    'monthBeforeLast6Months',
+    'monthBeforeLast5Months',
+    'monthBeforeLast4Months',
+    'monthBeforeLast3Months',
+    'monthBeforeLast2Months',
+    'monthBeforeLastMonth',
+    'lastMonth',
+    'thisMonth'
+];
+
 export interface TransactionAmountsRequestParams extends PartialRecord<TransactionAmountsRequestType, StartEndTime> {
     readonly useTransactionTimezone: boolean;
     today?: StartEndTime;
@@ -226,6 +252,14 @@ export interface TransactionAmountsResponseItemAmountInfo {
 
 export type TransactionOverviewResponse = PartialRecord<TransactionAmountsRequestType, TransactionOverviewResponseItem>;
 
+export type TransactionOverviewDisplayTime = PartialRecord<TransactionAmountsRequestType, TransactionOverviewDisplayTimeItem>;
+
+export interface TransactionOverviewDisplayTimeItem {
+    readonly displayTime?: string;
+    readonly startTime?: string;
+    readonly endTime?: string;
+}
+
 export interface TransactionOverviewResponseItem {
     readonly valid: boolean;
     readonly incomeAmount: number;

src/stores/overview.ts

@@ -8,6 +8,7 @@ import { useExchangeRatesStore } from './exchangeRates.ts';
 import type { WritableStartEndTime } from '@/core/datetime.ts';
 import { TimezoneTypeForStatistics } from '@/core/timezone.ts';
 import type {
+    TransactionAmountsRequestType,
     TransactionAmountsRequestParams,
     TransactionAmountsResponse,
     TransactionOverviewResponse
@@ -29,7 +30,7 @@ import {
 import logger from '@/lib/logger.ts';
 import services from '@/lib/services.ts';
 
-interface TransactionDataRange extends Record<string, WritableStartEndTime> {
+interface TransactionDataRange extends Record<TransactionAmountsRequestType, WritableStartEndTime> {
     today: {
         startTime: number;
         endTime: number;
@@ -260,8 +261,8 @@ export const useOverviewStore = defineStore('overview', () => {
         transactionDataRange.value.monthBeforeLastMonth.endTime = getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 2, 'months');
 
         for (let i = 2; i <= 10; i++) {
-            transactionDataRange.value[`monthBeforeLast${i}Months`].startTime = getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), i + 1, 'months');
+            transactionDataRange.value[`monthBeforeLast${i}Months` as TransactionAmountsRequestType].startTime = getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), i + 1, 'months');
-            transactionDataRange.value[`monthBeforeLast${i}Months`].endTime = getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), i + 1, 'months');
+            transactionDataRange.value[`monthBeforeLast${i}Months` as TransactionAmountsRequestType].endTime = getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), i + 1, 'months');
         }
     }
 

src/views/base/HomePageBase.ts

@@ -0,0 +1,106 @@
+import { 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 { useOverviewStore } from '@/stores/overview.ts';
+
+import { Account } from '@/models/account.ts';
+import type {
+    TransactionOverviewDisplayTime,
+    TransactionOverviewResponseItem
+} from '@/models/transaction.ts';
+
+export function useHomePageBase() {
+    const {
+        formatUnixTimeToLongDate,
+        formatUnixTimeToLongYear,
+        formatUnixTimeToLongMonth,
+        formatUnixTimeToLongMonthDay,
+        formatAmountWithCurrency
+    } = useI18n();
+
+    const settingsStore = useSettingsStore();
+    const userStore = useUserStore();
+    const accountsStore = useAccountsStore();
+    const overviewStore = useOverviewStore();
+
+    const showAmountInHomePage = computed<boolean>({
+        get: () => settingsStore.appSettings.showAmountInHomePage,
+        set: (value) => settingsStore.setShowAmountInHomePage(value)
+    });
+
+    const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
+    const allAccounts = computed<Account[]>(() => accountsStore.allAccounts);
+
+    const netAssets = computed<string>(() => {
+        const netAssets = accountsStore.getNetAssets(showAmountInHomePage.value);
+        return formatAmountWithCurrency(netAssets, defaultCurrency.value) as string;
+    });
+
+    const totalAssets = computed<string>(() => {
+        const totalAssets = accountsStore.getTotalAssets(showAmountInHomePage.value);
+        return formatAmountWithCurrency(totalAssets, defaultCurrency.value) as string;
+    });
+
+    const totalLiabilities = computed<string>(() => {
+        const totalLiabilities = accountsStore.getTotalLiabilities(showAmountInHomePage.value);
+        return formatAmountWithCurrency(totalLiabilities, defaultCurrency.value) as string;
+    });
+
+    const displayDateRange = computed<TransactionOverviewDisplayTime>(() => {
+        return {
+            today: {
+                displayTime: formatUnixTimeToLongDate(overviewStore.transactionDataRange.today.startTime),
+            },
+            thisWeek: {
+                startTime: formatUnixTimeToLongMonthDay(overviewStore.transactionDataRange.thisWeek.startTime),
+                endTime: formatUnixTimeToLongMonthDay(overviewStore.transactionDataRange.thisWeek.endTime)
+            },
+            thisMonth: {
+                displayTime: formatUnixTimeToLongMonth(overviewStore.transactionDataRange.thisMonth.startTime),
+                startTime: formatUnixTimeToLongMonthDay(overviewStore.transactionDataRange.thisMonth.startTime),
+                endTime: formatUnixTimeToLongMonthDay(overviewStore.transactionDataRange.thisMonth.endTime)
+            },
+            thisYear: {
+                displayTime: formatUnixTimeToLongYear(overviewStore.transactionDataRange.thisYear.startTime)
+            }
+        };
+    });
+
+    const transactionOverview = computed(() => overviewStore.transactionOverview);
+
+    function getDisplayAmount(amount: number, incomplete: boolean): string {
+        if (!showAmountInHomePage.value) {
+            return formatAmountWithCurrency('***', defaultCurrency.value) as string;
+        }
+
+        return formatAmountWithCurrency(amount, defaultCurrency.value) + (incomplete ? '+' : '');
+    }
+
+    function getDisplayIncomeAmount(category: TransactionOverviewResponseItem): string {
+        return getDisplayAmount(category.incomeAmount, category.incompleteIncomeAmount);
+    }
+
+    function getDisplayExpenseAmount(category: TransactionOverviewResponseItem): string {
+        return getDisplayAmount(category.expenseAmount, category.incompleteExpenseAmount);
+    }
+
+    return {
+        // computed states
+        showAmountInHomePage,
+        defaultCurrency,
+        allAccounts,
+        netAssets,
+        totalAssets,
+        totalLiabilities,
+        displayDateRange,
+        transactionOverview,
+        // functions
+        getDisplayAmount,
+        getDisplayIncomeAmount,
+        getDisplayExpenseAmount
+    };
+}

src/views/desktop/HomePage.vue

@@ -5,9 +5,9 @@
                 <template #title>
                     <div class="d-flex align-center">
                         <div class="d-flex align-baseline">
-                            <span class="text-2xl font-weight-bold">{{ displayDateRange.thisMonth.displayTime }}</span>
+                            <span class="text-2xl font-weight-bold">{{ displayDateRange?.thisMonth?.displayTime }}</span>
                             <span>·</span>
-                            <span style="font-size: 1rem">{{ $t('Expense') }}</span>
+                            <span style="font-size: 1rem">{{ tt('Expense') }}</span>
                         </div>
                         <v-btn density="compact" color="default" variant="text" size="24"
                                class="ml-2" :icon="true" :loading="loadingOverview" @click="reload(true)">
@@ -15,7 +15,7 @@
                                 <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>
                     </div>
                 </template>
@@ -30,11 +30,11 @@
                         </v-btn>
                     </h4>
                     <div class="mt-1 mb-3">
-                        <span class="mr-2">{{ $t('Monthly income') }}</span>
+                        <span class="mr-2">{{ tt('Monthly income') }}</span>
                         <span v-if="!loadingOverview || (transactionOverview && transactionOverview.thisMonth && transactionOverview.thisMonth.valid)">{{ transactionOverview && transactionOverview.thisMonth ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-' }}</span>
                         <v-skeleton-loader class="d-inline-block skeleton-no-margin mt-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!transactionOverview || !transactionOverview.thisMonth || !transactionOverview.thisMonth.valid)"></v-skeleton-loader>
                     </div>
-                    <v-btn size="small" to="/transaction/list?dateType=7">{{ $t('View Details') }}</v-btn>
+                    <v-btn size="small" to="/transaction/list?dateType=7">{{ tt('View Details') }}</v-btn>
                     <v-img class="overview-card-background" src="img/desktop/card-background.png"/>
                     <v-img class="overview-card-background-image" width="116px" src="img/desktop/document.svg"/>
                 </v-card-text>
@@ -44,12 +44,12 @@
         <v-col cols="12" lg="8" md="12">
             <v-card :class="{ 'disabled': loadingOverview }">
                 <template #title>
-                    <span>{{ $t('Asset Summary') }}</span>
+                    <span>{{ tt('Asset Summary') }}</span>
                 </template>
 
                 <v-card-text>
                     <div class="mb-8">
-                        <span class="text-body-1" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ $t('format.misc.youHaveAccounts', { count: allAccounts.length }) }}</span>
+                        <span class="text-body-1" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ tt('format.misc.youHaveAccounts', { count: allAccounts.length }) }}</span>
                         <v-skeleton-loader class="skeleton-no-margin mt-1 mb-2 pb-1" width="200px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
                     </div>
 
@@ -63,7 +63,7 @@
                                 </div>
 
                                 <div class="d-flex flex-column">
-                                    <span class="text-caption">{{ $t('Total assets') }}</span>
+                                    <span class="text-caption">{{ tt('Total assets') }}</span>
                                     <span class="text-h5" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ totalAssets }}</span>
                                     <v-skeleton-loader class="skeleton-no-margin mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
                                 </div>
@@ -79,7 +79,7 @@
                                 </div>
 
                                 <div class="d-flex flex-column">
-                                    <span class="text-caption">{{ $t('Total liabilities') }}</span>
+                                    <span class="text-caption">{{ tt('Total liabilities') }}</span>
                                     <span class="text-h5" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ totalLiabilities }}</span>
                                     <v-skeleton-loader class="skeleton-no-margin mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
                                 </div>
@@ -95,7 +95,7 @@
                                 </div>
 
                                 <div class="d-flex flex-column">
-                                    <span class="text-caption">{{ $t('Net assets') }}</span>
+                                    <span class="text-caption">{{ tt('Net assets') }}</span>
                                     <span class="text-h5" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ netAssets }}</span>
                                     <v-skeleton-loader class="skeleton-no-margin mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
                                 </div>
@@ -111,14 +111,14 @@
                 <v-col cols="12" md="6">
                     <income-expense-overview-card
                         :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarToday"
-                        :title="$t('Today')"
+                        :title="tt('Today')"
                         :expense-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayExpenseAmount(transactionOverview.today) : ''"
                         :income-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayIncomeAmount(transactionOverview.today) : ''"
-                        :datetime="displayDateRange.today.displayTime"
+                        :datetime="displayDateRange?.today?.displayTime || ''"
                     >
                         <template #menus>
-                            <v-list-item :prepend-icon="icons.viewDetails" :to="'/transaction/list?dateType=' + allDateRanges.Today.type">
+                            <v-list-item :prepend-icon="icons.viewDetails" :to="'/transaction/list?dateType=' + DateRange.Today.type">
-                                <v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
+                                <v-list-item-title>{{ tt('View Details') }}</v-list-item-title>
                             </v-list-item>
                         </template>
                     </income-expense-overview-card>
@@ -127,14 +127,14 @@
                 <v-col cols="12" md="6">
                     <income-expense-overview-card
                         :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarWeek"
-                        :title="$t('This Week')"
+                        :title="tt('This Week')"
                         :expense-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayExpenseAmount(transactionOverview.thisWeek) : ''"
                         :income-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayIncomeAmount(transactionOverview.thisWeek) : ''"
-                        :datetime="displayDateRange.thisWeek.startTime + '-' + displayDateRange.thisWeek.endTime"
+                        :datetime="displayDateRange?.thisWeek?.startTime + '-' + displayDateRange?.thisWeek?.endTime"
                     >
                         <template #menus>
-                            <v-list-item :prepend-icon="icons.viewDetails" :to="'/transaction/list?dateType=' + allDateRanges.ThisWeek.type">
+                            <v-list-item :prepend-icon="icons.viewDetails" :to="'/transaction/list?dateType=' + DateRange.ThisWeek.type">
-                                <v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
+                                <v-list-item-title>{{ tt('View Details') }}</v-list-item-title>
                             </v-list-item>
                         </template>
                     </income-expense-overview-card>
@@ -143,14 +143,14 @@
                 <v-col cols="12" md="6">
                     <income-expense-overview-card
                         :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarMonth"
-                        :title="$t('This Month')"
+                        :title="tt('This Month')"
                         :expense-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayExpenseAmount(transactionOverview.thisMonth) : ''"
                         :income-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayIncomeAmount(transactionOverview.thisMonth) : ''"
-                        :datetime="displayDateRange.thisMonth.startTime + '-' + displayDateRange.thisMonth.endTime"
+                        :datetime="displayDateRange?.thisMonth?.startTime + '-' + displayDateRange?.thisMonth?.endTime"
                     >
                         <template #menus>
-                            <v-list-item :prepend-icon="icons.viewDetails" :to="'/transaction/list?dateType=' + allDateRanges.ThisMonth.type">
+                            <v-list-item :prepend-icon="icons.viewDetails" :to="'/transaction/list?dateType=' + DateRange.ThisMonth.type">
-                                <v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
+                                <v-list-item-title>{{ tt('View Details') }}</v-list-item-title>
                             </v-list-item>
                         </template>
                     </income-expense-overview-card>
@@ -159,14 +159,14 @@
                 <v-col cols="12" md="6">
                     <income-expense-overview-card
                         :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarYear"
-                        :title="$t('This Year')"
+                        :title="tt('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"
+                        :datetime="displayDateRange?.thisYear?.displayTime || ''"
                     >
                         <template #menus>
-                            <v-list-item :prepend-icon="icons.viewDetails" :to="'/transaction/list?dateType=' + allDateRanges.ThisYear.type">
+                            <v-list-item :prepend-icon="icons.viewDetails" :to="'/transaction/list?dateType=' + DateRange.ThisYear.type">
-                                <v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
+                                <v-list-item-title>{{ tt('View Details') }}</v-list-item-title>
                             </v-list-item>
                         </template>
                     </income-expense-overview-card>
@@ -184,25 +184,26 @@
     <snack-bar ref="snackbar" />
 </template>
 
-<script>
+<script setup lang="ts">
+import SnackBar from '@/components/desktop/SnackBar.vue';
+import IncomeExpenseOverviewCard from './overview/cards/IncomeExpenseOverviewCard.vue';
+import MonthlyIncomeAndExpenseCard, { type MonthlyIncomeAndExpenseCardClickEvent } from './overview/cards/MonthlyIncomeAndExpenseCard.vue';
+
+import { ref, computed, useTemplateRef } from 'vue';
+import { useRouter } from 'vue-router';
 import { useTheme } from 'vuetify';
 
-import IncomeExpenseOverviewCard from './overview/cards/IncomeExpenseOverviewCard.vue';
+import { useI18n } from '@/locales/helpers.ts';
-import MonthlyIncomeAndExpenseCard from './overview/cards/MonthlyIncomeAndExpenseCard.vue';
+import { useHomePageBase } from '@/views/base/HomePageBase.ts';
 
-import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 import { useOverviewStore } from '@/stores/overview.ts';
 
 import { DateRange } from '@/core/datetime.ts';
 import { ThemeType } from '@/core/theme.ts';
-import {
+import { type TransactionMonthlyIncomeAndExpenseData, LATEST_12MONTHS_TRANSACTION_AMOUNTS_REQUEST_TYPES } from '@/models/transaction.ts';
-    formatUnixTime,
+
-    getUnixTimeBeforeUnixTime,
+import { getUnixTimeBeforeUnixTime, getUnixTimeAfterUnixTime } from '@/lib/datetime.ts';
-    getUnixTimeAfterUnixTime
-} from '@/lib/datetime.ts';
 import { isUserLogined, isUserUnlocked } from '@/lib/userstate.ts';
 
 import {
@@ -220,195 +221,113 @@ import {
     mdiDotsVertical
 } from '@mdi/js';
 
-export default {
+type SnackBarType = InstanceType<typeof SnackBar>;
-    components: {
-        IncomeExpenseOverviewCard,
-        MonthlyIncomeAndExpenseCard
-    },
-    data() {
-        return {
-            loadingOverview: true,
-            icons: {
-                refresh: mdiRefresh,
-                eye: mdiEyeOutline,
-                eyeSlash: mdiEyeOffOutline,
-                totalAssets: mdiBankOutline,
-                totalLiabilities: mdiCreditCardOutline,
-                netAssets: mdiPiggyBankOutline,
-                calendarToday: mdiCalendarTodayOutline,
-                calendarWeek: mdiCalendarWeekOutline,
-                calendarMonth: mdiCalendarMonthOutline,
-                calendarYear: mdiLayersTripleOutline,
-                viewDetails: mdiListBoxOutline,
-                more: mdiDotsVertical
-            }
-        };
-    },
-    computed: {
-        ...mapStores(useSettingsStore, useUserStore, useAccountsStore, useOverviewStore),
-        isDarkMode() {
-            return this.globalTheme.global.name.value === ThemeType.Dark;
-        },
-        showAmountInHomePage: {
-            get: function() {
-                return this.settingsStore.appSettings.showAmountInHomePage;
-            },
-            set: function(value) {
-                this.settingsStore.setShowAmountInHomePage(value);
-            }
-        },
-        defaultCurrency() {
-            return this.userStore.currentUserDefaultCurrency;
-        },
-        allDateRanges() {
-            return DateRange.all();
-        },
-        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;
 
-            return {
+const router = useRouter();
-                today: {
+const theme = useTheme();
-                    displayTime: self.$locale.formatUnixTimeToLongDate(self.userStore, self.overviewStore.transactionDataRange.today.startTime),
-                },
-                thisWeek: {
-                    startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisWeek.startTime),
-                    endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisWeek.endTime)
-                },
-                thisMonth: {
-                    displayTime: formatUnixTime(self.overviewStore.transactionDataRange.thisMonth.startTime, 'MMMM'),
-                    startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisMonth.startTime),
-                    endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisMonth.endTime)
-                },
-                thisYear: {
-                    displayTime: self.$locale.formatUnixTimeToLongYear(self.userStore, self.overviewStore.transactionDataRange.thisYear.startTime)
-                }
-            };
-        },
-        transactionOverview() {
-            return this.overviewStore.transactionOverview;
-        },
-        monthlyIncomeAndExpenseData() {
-            const self = this;
-            const data = [];
 
-            if (!self.transactionOverview || !self.transactionOverview.thisMonth || !self.transactionOverview.thisMonth.valid) {
+const { tt } = useI18n();
-                return data;
+const {
-            }
+    showAmountInHomePage,
+    allAccounts,
+    netAssets,
+    totalAssets,
+    totalLiabilities,
+    displayDateRange,
+    transactionOverview,
+    getDisplayIncomeAmount,
+    getDisplayExpenseAmount
+} = useHomePageBase();
 
-            [
+const accountsStore = useAccountsStore();
-                'monthBeforeLast10Months',
+const overviewStore = useOverviewStore();
-                'monthBeforeLast9Months',
-                'monthBeforeLast8Months',
-                'monthBeforeLast7Months',
-                'monthBeforeLast6Months',
-                'monthBeforeLast5Months',
-                'monthBeforeLast4Months',
-                'monthBeforeLast3Months',
-                'monthBeforeLast2Months',
-                'monthBeforeLastMonth',
-                'lastMonth',
-                'thisMonth'
-            ].forEach(fieldName => {
-                if (!Object.prototype.hasOwnProperty.call(self.transactionOverview, fieldName)) {
-                    return;
-                }
 
-                const dateRange = self.overviewStore.transactionDataRange[fieldName];
+const icons = {
+    refresh: mdiRefresh,
+    eye: mdiEyeOutline,
+    eyeSlash: mdiEyeOffOutline,
+    totalAssets: mdiBankOutline,
+    totalLiabilities: mdiCreditCardOutline,
+    netAssets: mdiPiggyBankOutline,
+    calendarToday: mdiCalendarTodayOutline,
+    calendarWeek: mdiCalendarWeekOutline,
+    calendarMonth: mdiCalendarMonthOutline,
+    calendarYear: mdiLayersTripleOutline,
+    viewDetails: mdiListBoxOutline,
+    more: mdiDotsVertical
+};
 
-                if (!dateRange) {
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
-                    return;
-                }
 
-                const item = self.overviewStore.transactionOverview[fieldName];
+const loadingOverview = ref<boolean>(true);
 
-                data.push({
+const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-                    monthStartTime: dateRange.startTime,
-                    incomeAmount: item ? item.incomeAmount : 0,
-                    expenseAmount: item ? item.expenseAmount : 0,
-                    incompleteIncomeAmount: item ? item.incompleteIncomeAmount : true,
-                    incompleteExpenseAmount: item ? item.incompleteExpenseAmount : true
-                });
-            });
 
-            return data;
+function clickMonthlyIncomeOrExpense(e: MonthlyIncomeAndExpenseCardClickEvent): void {
-        }
+    const minTime = e.monthStartTime;
-    },
+    const maxTime = getUnixTimeBeforeUnixTime(getUnixTimeAfterUnixTime(minTime, 1, 'months'), 1, 'seconds');
-    created() {
+    const type = e.transactionType;
-        if (isUserLogined() && isUserUnlocked()) {
-            this.reload(false);
-        }
-    },
-    setup() {
-        const theme = useTheme();
 
-        return {
+    router.push(`/transaction/list?type=${type}&dateType=${DateRange.Custom.type}&maxTime=${maxTime}&minTime=${minTime}`);
-            globalTheme: theme
+}
-        };
-    },
-    methods: {
-        reload(force) {
-            const self = this;
 
-            self.loadingOverview = true;
+const monthlyIncomeAndExpenseData = computed<TransactionMonthlyIncomeAndExpenseData[]>(() => {
+    const data: TransactionMonthlyIncomeAndExpenseData[] = [];
 
-            const promises = [
+    if (!transactionOverview.value || !transactionOverview.value.thisMonth || !transactionOverview.value.thisMonth.valid) {
-                self.accountsStore.loadAllAccounts({ force: false }),
+        return data;
-                self.overviewStore.loadTransactionOverview({ force: force, loadLast11Months: true })
-            ];
-
-            Promise.all(promises).then(() => {
-                self.loadingOverview = false;
-
-                if (force) {
-                    self.$refs.snackbar.showMessage('Data has been updated');
-                }
-            }).catch(error => {
-                self.loadingOverview = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        clickMonthlyIncomeOrExpense(e) {
-            const minTime = e.monthStartTime;
-            const maxTime = getUnixTimeBeforeUnixTime(getUnixTimeAfterUnixTime(minTime, 1, 'months'), 1, 'seconds');
-            const type = e.transactionType;
-
-            this.$router.push(`/transaction/list?type=${type}&dateType=${DateRange.Custom.type}&maxTime=${maxTime}&minTime=${minTime}`);
-        },
-        getDisplayCurrency(value, currencyCode) {
-            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
-        },
-        getDisplayAmount(amount, incomplete) {
-            if (!this.showAmountInHomePage) {
-                return this.getDisplayCurrency('***', this.defaultCurrency);
-            }
-
-            return this.getDisplayCurrency(amount, this.defaultCurrency) + (incomplete ? '+' : '');
-        },
-        getDisplayIncomeAmount(category) {
-            return this.getDisplayAmount(category.incomeAmount, category.incompleteIncomeAmount);
-        },
-        getDisplayExpenseAmount(category) {
-            return this.getDisplayAmount(category.expenseAmount, category.incompleteExpenseAmount);
-        }
     }
+
+    LATEST_12MONTHS_TRANSACTION_AMOUNTS_REQUEST_TYPES.forEach(amountRequestType => {
+        if (!Object.prototype.hasOwnProperty.call(transactionOverview.value, amountRequestType)) {
+            return;
+        }
+
+        const dateRange = overviewStore.transactionDataRange[amountRequestType];
+
+        if (!dateRange) {
+            return;
+        }
+
+        const item = transactionOverview.value[amountRequestType];
+
+        data.push({
+            monthStartTime: dateRange.startTime,
+            incomeAmount: item?.incomeAmount || 0,
+            expenseAmount: item?.expenseAmount || 0,
+            incompleteIncomeAmount: item ? item.incompleteIncomeAmount : true,
+            incompleteExpenseAmount: item ? item.incompleteExpenseAmount : true
+        });
+    });
+
+    return data;
+});
+
+function reload(force: boolean): void {
+    loadingOverview.value = true;
+
+    const promises = [
+        accountsStore.loadAllAccounts({ force: false }),
+        overviewStore.loadTransactionOverview({ force: force, loadLast11Months: true })
+    ];
+
+    Promise.all(promises).then(() => {
+        loadingOverview.value = false;
+
+        if (force) {
+            snackbar.value?.showMessage('Data has been updated');
+        }
+    }).catch(error => {
+        loadingOverview.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+if (isUserLogined() && isUserUnlocked()) {
+    reload(false);
 }
 </script>
 

src/views/desktop/overview/cards/MonthlyIncomeAndExpenseCard.vue

@@ -42,7 +42,7 @@ import {
 } from '@/lib/datetime.ts';
 import { getExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
 
-interface MonthlyIncomeAndExpenseCardClickEvent {
+export interface MonthlyIncomeAndExpenseCardClickEvent {
     transactionType: TransactionType;
     monthStartTime: number;
 }