support filtering accounts and transaction categories for overview in home page (#209)

pkg/api/transactions.go

@@ -549,6 +549,25 @@ func (a *TransactionsApi) TransactionAmountsHandler(c *core.WebContext) (any, *e
 		return nil, errs.ErrQueryItemsTooMuch
 	}
 
+	excludeAccountIds := make([]int64, 0)
+	excludeCategoryIds := make([]int64, 0)
+
+	if transactionAmountsReq.ExcludeAccountIds != "" {
+		excludeAccountIds, err = utils.StringArrayToInt64Array(strings.Split(transactionAmountsReq.ExcludeAccountIds, ","))
+
+		if err != nil {
+			return nil, errs.ErrAccountIdInvalid
+		}
+	}
+
+	if transactionAmountsReq.ExcludeCategoryIds != "" {
+		excludeCategoryIds, err = utils.StringArrayToInt64Array(strings.Split(transactionAmountsReq.ExcludeCategoryIds, ","))
+
+		if err != nil {
+			return nil, errs.ErrTransactionCategoryIdInvalid
+		}
+	}
+
 	utcOffset, err := c.GetClientTimezoneOffset()
 
 	if err != nil {
@@ -571,7 +590,7 @@ func (a *TransactionsApi) TransactionAmountsHandler(c *core.WebContext) (any, *e
 	for i := 0; i < len(requestItems); i++ {
 		requestItem := requestItems[i]
 
-		incomeAmounts, expenseAmounts, err := a.transactions.GetAccountsTotalIncomeAndExpense(c, uid, requestItem.StartTime, requestItem.EndTime, utcOffset, transactionAmountsReq.UseTransactionTimezone)
+		incomeAmounts, expenseAmounts, err := a.transactions.GetAccountsTotalIncomeAndExpense(c, uid, requestItem.StartTime, requestItem.EndTime, excludeAccountIds, excludeCategoryIds, utcOffset, transactionAmountsReq.UseTransactionTimezone)
 
 		if err != nil {
 			log.Errorf(c, "[transactions.TransactionAmountsHandler] failed to get transaction amounts item for user \"uid:%d\", because %s", uid, err.Error())

pkg/models/transaction.go

@@ -258,6 +258,8 @@ type TransactionStatisticTrendsRequest struct {
 // TransactionAmountsRequest represents all parameters of transaction amounts request
 type TransactionAmountsRequest struct {
 	Query                  string `form:"query"`
+	ExcludeAccountIds      string `form:"exclude_account_ids"`
+	ExcludeCategoryIds     string `form:"exclude_category_ids"`
 	UseTransactionTimezone bool   `form:"use_transaction_timezone"`
 }
 

pkg/models/user_app_cloud_setting.go

@@ -17,8 +17,10 @@ var ALL_ALLOWED_CLOUD_SYNC_APP_SETTING_KEY_TYPES = map[string]UserApplicationClo
 	// Basic Settings
 	"showAccountBalance": USER_APPLICATION_CLOUD_SETTING_TYPE_BOOLEAN,
 	// Overview Page
-	"showAmountInHomePage":                USER_APPLICATION_CLOUD_SETTING_TYPE_BOOLEAN,
-	"timezoneUsedForStatisticsInHomePage": USER_APPLICATION_CLOUD_SETTING_TYPE_NUMBER,
+	"showAmountInHomePage":                        USER_APPLICATION_CLOUD_SETTING_TYPE_BOOLEAN,
+	"timezoneUsedForStatisticsInHomePage":         USER_APPLICATION_CLOUD_SETTING_TYPE_NUMBER,
+	"overviewAccountFilterInHomePage":             USER_APPLICATION_CLOUD_SETTING_TYPE_STRING_BOOLEAN_MAP,
+	"overviewTransactionCategoryFilterInHomePage": USER_APPLICATION_CLOUD_SETTING_TYPE_STRING_BOOLEAN_MAP,
 	// Transaction List Page
 	"itemsCountInTransactionListPage":      USER_APPLICATION_CLOUD_SETTING_TYPE_NUMBER,
 	"showTotalAmountInTransactionListPage": USER_APPLICATION_CLOUD_SETTING_TYPE_BOOLEAN,

pkg/services/transactions.go

@@ -1422,7 +1422,7 @@ func (s *TransactionService) GetRelatedTransferTransaction(originalTransaction *
 }
 
 // GetAccountsTotalIncomeAndExpense returns the every accounts total income and expense amount by specific date range
-func (s *TransactionService) GetAccountsTotalIncomeAndExpense(c core.Context, uid int64, startUnixTime int64, endUnixTime int64, utcOffset int16, useTransactionTimezone bool) (map[int64]int64, map[int64]int64, error) {
+func (s *TransactionService) GetAccountsTotalIncomeAndExpense(c core.Context, uid int64, startUnixTime int64, endUnixTime int64, excludeAccountIds []int64, excludeCategoryIds []int64, utcOffset int16, useTransactionTimezone bool) (map[int64]int64, map[int64]int64, error) {
 	if uid <= 0 {
 		return nil, nil, errs.ErrUserIdInvalid
 	}
@@ -1437,13 +1437,49 @@ func (s *TransactionService) GetAccountsTotalIncomeAndExpense(c core.Context, ui
 	startTransactionTime := utils.GetMinTransactionTimeFromUnixTime(startUnixTime)
 	endTransactionTime := utils.GetMaxTransactionTimeFromUnixTime(endUnixTime)
 
-	condition := "uid=? AND deleted=? AND (type=? OR type=?) AND transaction_time>=? AND transaction_time<=?"
-	conditionParams := make([]any, 0, 4)
+	condition := "uid=? AND deleted=? AND (type=? OR type=?)"
+	conditionParams := make([]any, 0, 4+len(excludeAccountIds)+len(excludeCategoryIds))
 	conditionParams = append(conditionParams, uid)
 	conditionParams = append(conditionParams, false)
 	conditionParams = append(conditionParams, models.TRANSACTION_DB_TYPE_INCOME)
 	conditionParams = append(conditionParams, models.TRANSACTION_DB_TYPE_EXPENSE)
 
+	if len(excludeAccountIds) > 0 {
+		var accountIdsCondition strings.Builder
+		accountIdConditionParams := make([]any, 0, len(excludeAccountIds))
+
+		for i := 0; i < len(excludeAccountIds); i++ {
+			if i > 0 {
+				accountIdsCondition.WriteString(",")
+			}
+
+			accountIdsCondition.WriteString("?")
+			accountIdConditionParams = append(accountIdConditionParams, excludeAccountIds[i])
+		}
+
+		condition = condition + " AND account_id NOT IN (" + accountIdsCondition.String() + ")"
+		conditionParams = append(conditionParams, accountIdConditionParams...)
+	}
+
+	if len(excludeCategoryIds) > 0 {
+		var categoryIdsCondition strings.Builder
+		categoryIdConditionParams := make([]any, 0, len(excludeCategoryIds))
+
+		for i := 0; i < len(excludeCategoryIds); i++ {
+			if i > 0 {
+				categoryIdsCondition.WriteString(",")
+			}
+
+			categoryIdsCondition.WriteString("?")
+			categoryIdConditionParams = append(categoryIdConditionParams, excludeCategoryIds[i])
+		}
+
+		condition = condition + " AND category_id NOT IN (" + categoryIdsCondition.String() + ")"
+		conditionParams = append(conditionParams, categoryIdConditionParams...)
+	}
+
+	condition = condition + " AND transaction_time>=? AND transaction_time<=?"
+
 	minTransactionTime := startTransactionTime
 	maxTransactionTime := endTransactionTime
 	var allTransactions []*models.Transaction

src/core/setting.ts

@@ -37,6 +37,8 @@ export interface ApplicationSettings extends BaseApplicationSetting {
     // Overview Page
     showAmountInHomePage: boolean;
     timezoneUsedForStatisticsInHomePage: number;
+    overviewAccountFilterInHomePage: Record<string, boolean>;
+    overviewTransactionCategoryFilterInHomePage: Record<string, boolean>;
     // Transaction List Page
     itemsCountInTransactionListPage: number;
     showTotalAmountInTransactionListPage: boolean;
@@ -95,6 +97,8 @@ export const ALL_ALLOWED_CLOUD_SYNC_APP_SETTING_KEY_TYPES: Record<string, UserAp
     // Overview Page
     'showAmountInHomePage': UserApplicationCloudSettingType.Boolean,
     'timezoneUsedForStatisticsInHomePage': UserApplicationCloudSettingType.Number,
+    'overviewAccountFilterInHomePage': UserApplicationCloudSettingType.StringBooleanMap,
+    'overviewTransactionCategoryFilterInHomePage': UserApplicationCloudSettingType.StringBooleanMap,
     // Transaction List Page
     'itemsCountInTransactionListPage': UserApplicationCloudSettingType.Number,
     'showTotalAmountInTransactionListPage': UserApplicationCloudSettingType.Boolean,
@@ -137,6 +141,8 @@ export const DEFAULT_APPLICATION_SETTINGS: ApplicationSettings = {
     // Overview Page
     showAmountInHomePage: true,
     timezoneUsedForStatisticsInHomePage: TimezoneTypeForStatistics.Default.type,
+    overviewAccountFilterInHomePage: {},
+    overviewTransactionCategoryFilterInHomePage: {},
     // Transaction List Page
     itemsCountInTransactionListPage: 15,
     showTotalAmountInTransactionListPage: true,

src/lib/common.ts

@@ -415,6 +415,22 @@ export function objectFieldToArrayItem(object: object): string[] {
     return ret;
 }
 
+export function objectFieldWithValueToArrayItem<T>(object: Record<string, T>, value: T): string[] {
+    const ret: string[] = [];
+
+    for (const field in object) {
+        if (!Object.prototype.hasOwnProperty.call(object, field)) {
+            continue;
+        }
+
+        if (object[field] === value) {
+            ret.push(field);
+        }
+    }
+
+    return ret;
+}
+
 export function arrayItemToObjectField<T>(array: string[], value: T): Record<string, T> {
     const ret: Record<string, T> = {};
 

src/lib/services.ts

@@ -471,9 +471,19 @@ export default {
 
         return axios.get<ApiResponse<TransactionStatisticTrendsResponseItem[]>>(`v1/transactions/statistics/trends.json?use_transaction_timezone=${req.useTransactionTimezone}` + (queryParams.length ? '&' + queryParams.join('&') : ''));
     },
-    getTransactionAmounts: (params: TransactionAmountsRequestParams): ApiResponsePromise<TransactionAmountsResponse> => {
+    getTransactionAmounts: (params: TransactionAmountsRequestParams, excludeAccountIds: string[], excludeCategoryIds: string[]): ApiResponsePromise<TransactionAmountsResponse> => {
         const req = TransactionAmountsRequest.of(params);
-        return axios.get<ApiResponse<TransactionAmountsResponse>>(`v1/transactions/amounts.json?${req.buildQuery()}`);
+        let queryParams = req.buildQuery();
+
+        if (excludeAccountIds && excludeAccountIds.length) {
+            queryParams = queryParams + `&exclude_account_ids=${excludeAccountIds.join(',')}`;
+        }
+
+        if (excludeCategoryIds && excludeCategoryIds.length) {
+            queryParams = queryParams + `&exclude_category_ids=${excludeCategoryIds.join(',')}`;
+        }
+
+        return axios.get<ApiResponse<TransactionAmountsResponse>>(`v1/transactions/amounts.json?${queryParams}`);
     },
     getTransaction: ({ id, withPictures }: { id: string, withPictures: boolean | undefined }): ApiResponsePromise<TransactionInfoResponse> => {
         if (!isDefined(withPictures)) {

src/locales/de.json

@@ -1962,6 +1962,8 @@
     "Show Add Transaction Button": "Show Add Transaction Button",
     "Overview Page": "Übersichtsseite",
     "Timezone Used for Statistics": "Zeitzone für Statistiken",
+    "Accounts Included in Overview Statistics": "Accounts Included in Overview Statistics",
+    "Transaction Categories Included in Overview Statistics": "Transaction Categories Included in Overview Statistics",
     "Timezone Type": "Zeitzonentyp",
     "Application Timezone": "Anwendungszeitzone",
     "Transaction List Page": "Transaktionslisten-Seite",

src/locales/en.json

@@ -1962,6 +1962,8 @@
     "Show Add Transaction Button": "Show Add Transaction Button",
     "Overview Page": "Overview Page",
     "Timezone Used for Statistics": "Timezone Used for Statistics",
+    "Accounts Included in Overview Statistics": "Accounts Included in Overview Statistics",
+    "Transaction Categories Included in Overview Statistics": "Transaction Categories Included in Overview Statistics",
     "Timezone Type": "Timezone Type",
     "Application Timezone": "Application Timezone",
     "Transaction List Page": "Transaction List Page",

src/locales/es.json

@@ -1962,6 +1962,8 @@
     "Show Add Transaction Button": "Show Add Transaction Button",
     "Overview Page": "Página de descripción general",
     "Timezone Used for Statistics": "Zona horaria utilizada para estadísticas",
+    "Accounts Included in Overview Statistics": "Accounts Included in Overview Statistics",
+    "Transaction Categories Included in Overview Statistics": "Transaction Categories Included in Overview Statistics",
     "Timezone Type": "Tipo de zona horaria",
     "Application Timezone": "Zona horaria de la aplicación",
     "Transaction List Page": "Página de lista de transacciones",

src/locales/it.json

@@ -1962,6 +1962,8 @@
     "Show Add Transaction Button": "Mostra pulsante Aggiungi transazione",
     "Overview Page": "Pagina panoramica",
     "Timezone Used for Statistics": "Fuso orario utilizzato per le statistiche",
+    "Accounts Included in Overview Statistics": "Accounts Included in Overview Statistics",
+    "Transaction Categories Included in Overview Statistics": "Transaction Categories Included in Overview Statistics",
     "Timezone Type": "Tipo fuso orario",
     "Application Timezone": "Fuso orario applicazione",
     "Transaction List Page": "Pagina elenco transazioni",

src/locales/ja.json

@@ -1962,6 +1962,8 @@
     "Show Add Transaction Button": "Show Add Transaction Button",
     "Overview Page": "概要ページ",
     "Timezone Used for Statistics": "統計に使用されるタイムゾーン",
+    "Accounts Included in Overview Statistics": "Accounts Included in Overview Statistics",
+    "Transaction Categories Included in Overview Statistics": "Transaction Categories Included in Overview Statistics",
     "Timezone Type": "タイムゾーンタイプ",
     "Application Timezone": "アプリのタイムゾーン",
     "Transaction List Page": "取引リストページ",

src/locales/nl.json

@@ -1962,6 +1962,8 @@
     "Show Add Transaction Button": "Knop ‘Transactie toevoegen’ tonen",
     "Overview Page": "Overzichtspagina",
     "Timezone Used for Statistics": "Tijdzone gebruikt voor statistieken",
+    "Accounts Included in Overview Statistics": "Accounts Included in Overview Statistics",
+    "Transaction Categories Included in Overview Statistics": "Transaction Categories Included in Overview Statistics",
     "Timezone Type": "Tijdzonetype",
     "Application Timezone": "Applicatietijdzone",
     "Transaction List Page": "Transactielijstpagina",

src/locales/pt_BR.json

@@ -1962,6 +1962,8 @@
     "Show Add Transaction Button": "Mostrar Botão de Adicionar Transação",
     "Overview Page": "Página de Visão Geral",
     "Timezone Used for Statistics": "Fuso Horário Usado para Estatísticas",
+    "Accounts Included in Overview Statistics": "Accounts Included in Overview Statistics",
+    "Transaction Categories Included in Overview Statistics": "Transaction Categories Included in Overview Statistics",
     "Timezone Type": "Tipo de Fuso Horário",
     "Application Timezone": "Fuso Horário do Aplicativo",
     "Transaction List Page": "Página de Lista de Transações",

src/locales/ru.json

@@ -1962,6 +1962,8 @@
     "Show Add Transaction Button": "Show Add Transaction Button",
     "Overview Page": "Страница обзора",
     "Timezone Used for Statistics": "Часовой пояс, используемый для статистики",
+    "Accounts Included in Overview Statistics": "Accounts Included in Overview Statistics",
+    "Transaction Categories Included in Overview Statistics": "Transaction Categories Included in Overview Statistics",
     "Timezone Type": "Тип часового пояса",
     "Application Timezone": "Часовой пояс приложения",
     "Transaction List Page": "Страница списка транзакций",

src/locales/uk.json

@@ -1962,6 +1962,8 @@
     "Show Add Transaction Button": "Показати кнопку додавання транзакції",
     "Overview Page": "Сторінка огляду",
     "Timezone Used for Statistics": "Часовий пояс для статистики",
+    "Accounts Included in Overview Statistics": "Accounts Included in Overview Statistics",
+    "Transaction Categories Included in Overview Statistics": "Transaction Categories Included in Overview Statistics",
     "Timezone Type": "Тип часового поясу",
     "Application Timezone": "Часовий пояс застосунку",
     "Transaction List Page": "Сторінка списку транзакцій",

src/locales/vi.json

@@ -1962,6 +1962,8 @@
     "Show Add Transaction Button": "Show Add Transaction Button",
     "Overview Page": "Trang tổng quan",
     "Timezone Used for Statistics": "Múi giờ được sử dụng cho thống kê",
+    "Accounts Included in Overview Statistics": "Accounts Included in Overview Statistics",
+    "Transaction Categories Included in Overview Statistics": "Transaction Categories Included in Overview Statistics",
     "Timezone Type": "Loại múi giờ",
     "Application Timezone": "Múi giờ ứng dụng",
     "Transaction List Page": "Trang danh sách giao dịch",

src/locales/zh_Hans.json

@@ -1962,6 +1962,8 @@
     "Show Add Transaction Button": "显示添加交易按钮",
     "Overview Page": "总览页面",
     "Timezone Used for Statistics": "统计时使用的时区",
+    "Accounts Included in Overview Statistics": "总览统计中包含的账户",
+    "Transaction Categories Included in Overview Statistics": "总览统计中包含的交易分类",
     "Timezone Type": "时区类型",
     "Application Timezone": "应用时区",
     "Transaction List Page": "交易列表页面",

src/locales/zh_Hant.json

@@ -1962,6 +1962,8 @@
     "Show Add Transaction Button": "顯示新增交易按鈕",
     "Overview Page": "總覽頁面",
     "Timezone Used for Statistics": "統計使用的時區",
+    "Accounts Included in Overview Statistics": "概覽統計中包含的帳戶",
+    "Transaction Categories Included in Overview Statistics": "概覽統計中包含的交易分類",
     "Timezone Type": "時區類型",
     "Application Timezone": "應用程式時區",
     "Transaction List Page": "交易清單頁面",

src/stores/overview.ts

@@ -3,10 +3,14 @@ import { defineStore } from 'pinia';
 
 import { useSettingsStore } from './setting.ts';
 import { useUserStore } from './user.ts';
+import { useAccountsStore } from './account.ts';
+import { useTransactionCategoriesStore } from './transactionCategory.ts';
 import { useExchangeRatesStore } from './exchangeRates.ts';
 
-import type { WritableStartEndTime } from '@/core/datetime.ts';
+import { type WritableStartEndTime, DateRange } from '@/core/datetime.ts';
 import { TimezoneTypeForStatistics } from '@/core/timezone.ts';
+import type { TransactionType } from '@/core/transaction.ts';
+
 import type {
     TransactionAmountsRequestType,
     TransactionAmountsRequestParams,
@@ -15,7 +19,13 @@ import type {
 } from '@/models/transaction.ts';
 import { ALL_TRANSACTION_AMOUNTS_REQUEST_TYPE } from '@/models/transaction.ts';
 
-import { isNumber, isEquals } from '@/lib/common.ts';
+import {
+    isDefined,
+    isNumber,
+    isEquals,
+    isObjectEmpty,
+    objectFieldWithValueToArrayItem
+} from '@/lib/common.ts';
 import {
     getUnixTimeBeforeUnixTime,
     getTodayFirstUnixTime,
@@ -27,6 +37,8 @@ import {
     getThisYearFirstUnixTime,
     getThisYearLastUnixTime
 } from '@/lib/datetime.ts';
+import { getFinalAccountIdsByFilteredAccountIds } from '@/lib/account.ts';
+import { getFinalCategoryIdsByFilteredCategoryIds } from '@/lib/category.ts';
 import logger from '@/lib/logger.ts';
 import services from '@/lib/services.ts';
 
@@ -100,6 +112,8 @@ interface TransactionOverviewOptions {
 export const useOverviewStore = defineStore('overview', () => {
     const settingsStore = useSettingsStore();
     const userStore = useUserStore();
+    const accountsStore = useAccountsStore();
+    const transactionCategoriesStore = useTransactionCategoriesStore();
     const exchangeRatesStore = useExchangeRatesStore();
 
     const transactionDataRange = ref<TransactionDataRange>(getTransactionDateRange());
@@ -287,8 +301,11 @@ export const useOverviewStore = defineStore('overview', () => {
             requestParams.monthBeforeLast10Months = transactionDataRange.value.monthBeforeLast10Months;
         }
 
+        const excludeAccountIds: string[] = objectFieldWithValueToArrayItem(settingsStore.appSettings.overviewAccountFilterInHomePage, true);
+        const excludeCategoryIds: string[] = objectFieldWithValueToArrayItem(settingsStore.appSettings.overviewTransactionCategoryFilterInHomePage, true);
+
         return new Promise((resolve, reject) => {
-            services.getTransactionAmounts(requestParams).then(response => {
+            services.getTransactionAmounts(requestParams, excludeAccountIds, excludeCategoryIds).then(response => {
                 const data = response.data;
 
                 if (!data || !data.success || !data.result) {
@@ -327,6 +344,38 @@ export const useOverviewStore = defineStore('overview', () => {
         });
     }
 
+    function getTransactionListPageParams({ type, dateType, minTime, maxTime }: { type?: TransactionType, dateType?: number, minTime?: number, maxTime?: number }): string {
+        const querys: string[] = [];
+
+        if (isDefined(type)) {
+            querys.push('type=' + type);
+        }
+
+        if (isDefined(dateType)) {
+            querys.push('dateType=' + dateType);
+
+            if (dateType === DateRange.Custom.type) {
+                if (isNumber(minTime) && minTime > 0) {
+                    querys.push('minTime=' + minTime);
+                }
+
+                if (isNumber(maxTime) && maxTime > 0) {
+                    querys.push('maxTime=' + maxTime);
+                }
+            }
+        }
+
+        if (!isObjectEmpty(settingsStore.appSettings.overviewTransactionCategoryFilterInHomePage)) {
+            querys.push('categoryIds=' + getFinalCategoryIdsByFilteredCategoryIds(transactionCategoriesStore.allTransactionCategoriesMap, settingsStore.appSettings.overviewTransactionCategoryFilterInHomePage));
+        }
+
+        if (!isObjectEmpty(settingsStore.appSettings.overviewAccountFilterInHomePage)) {
+            querys.push('accountIds=' + getFinalAccountIdsByFilteredAccountIds(accountsStore.allAccountsMap, settingsStore.appSettings.overviewAccountFilterInHomePage));
+        }
+
+        return querys.join('&');
+    }
+
     return {
         // states
         transactionDataRange,
@@ -338,6 +387,7 @@ export const useOverviewStore = defineStore('overview', () => {
         // functions
         updateTransactionOverviewInvalidState,
         resetTransactionOverview,
-        loadTransactionOverview
+        loadTransactionOverview,
+        getTransactionListPageParams
     };
 });

src/stores/setting.ts

@@ -182,6 +182,18 @@ export const useSettingsStore = defineStore('settings', () => {
         updateUserApplicationCloudSettingValue('timezoneUsedForStatisticsInHomePage', value);
     }
 
+    function setOverviewAccountFilterInHomePage(value: Record<string, boolean>): void {
+        updateApplicationSettingsValue('overviewAccountFilterInHomePage', value);
+        appSettings.value.overviewAccountFilterInHomePage = value;
+        updateUserApplicationCloudSettingValue('overviewAccountFilterInHomePage', value);
+    }
+
+    function setOverviewTransactionCategoryFilterInHomePage(value: Record<string, boolean>): void {
+        updateApplicationSettingsValue('overviewTransactionCategoryFilterInHomePage', value);
+        appSettings.value.overviewTransactionCategoryFilterInHomePage = value;
+        updateUserApplicationCloudSettingValue('overviewTransactionCategoryFilterInHomePage', value);
+    }
+
     // Transaction List Page
     function setItemsCountInTransactionListPage(value: number): void {
         updateApplicationSettingsValue('itemsCountInTransactionListPage', value);
@@ -428,6 +440,8 @@ export const useSettingsStore = defineStore('settings', () => {
         // -- Overview Page
         setShowAmountInHomePage,
         setTimezoneUsedForStatisticsInHomePage,
+        setOverviewAccountFilterInHomePage,
+        setOverviewTransactionCategoryFilterInHomePage,
         // -- Transaction List Page
         setItemsCountInTransactionListPage,
         setShowTotalAmountInTransactionListPage,

src/views/base/settings/AccountFilterSettingPageBase.ts

@@ -4,6 +4,7 @@ import { useSettingsStore } from '@/stores/setting.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 import { useTransactionsStore } from '@/stores/transaction.ts';
 import { useStatisticsStore } from '@/stores/statistics.ts';
+import { useOverviewStore } from '@/stores/overview.ts';
 
 import type { Account, AccountCategoriesWithVisibleCount } from '@/models/account.ts';
 
@@ -13,11 +14,14 @@ import {
     isAccountOrSubAccountsAllChecked
 } from '@/lib/account.ts';
 
-export function useAccountFilterSettingPageBase(type?: string) {
+export type AccountFilterType = 'statisticsDefault' | 'statisticsCurrent' | 'homePageOverview' | 'transactionListCurrent' | 'accountListTotalAmount';
+
+export function useAccountFilterSettingPageBase(type?: AccountFilterType) {
     const settingsStore = useSettingsStore();
     const accountsStore = useAccountsStore();
     const transactionsStore = useTransactionsStore();
     const statisticsStore = useStatisticsStore();
+    const overviewStore = useOverviewStore();
 
     const loading = ref<boolean>(true);
     const showHidden = ref<boolean>(false);
@@ -40,7 +44,7 @@ export function useAccountFilterSettingPageBase(type?: string) {
     });
 
     const allowHiddenAccount = computed<boolean>(() => {
-        return type === 'statisticsDefault' || type === 'statisticsCurrent' || type === 'transactionListCurrent';
+        return type === 'statisticsDefault' || type === 'statisticsCurrent' || type === 'homePageOverview' || type === 'transactionListCurrent';
     });
 
     const allCategorizedAccounts = computed<AccountCategoriesWithVisibleCount[]>(() => getCategorizedAccountsWithVisibleCount(accountsStore.allCategorizedAccountsMap));
@@ -85,6 +89,9 @@ export function useAccountFilterSettingPageBase(type?: string) {
         } else if (type === 'statisticsCurrent') {
             filterAccountIds.value = Object.assign(allAccountIds, statisticsStore.transactionStatisticsFilter.filterAccountIds);
             return true;
+        } else if (type === 'homePageOverview') {
+            filterAccountIds.value = Object.assign(allAccountIds, settingsStore.appSettings.overviewAccountFilterInHomePage);
+            return true;
         } else if (type === 'transactionListCurrent') {
             for (const accountId in transactionsStore.allFilterAccountIds) {
                 if (!Object.prototype.hasOwnProperty.call(transactionsStore.allFilterAccountIds, accountId)) {
@@ -146,6 +153,9 @@ export function useAccountFilterSettingPageBase(type?: string) {
             changed = statisticsStore.updateTransactionStatisticsFilter({
                 filterAccountIds: filteredAccountIds
             });
+        } else if (type === 'homePageOverview') {
+            settingsStore.setOverviewAccountFilterInHomePage(filteredAccountIds);
+            overviewStore.updateTransactionOverviewInvalidState(true);
         } else if (type === 'transactionListCurrent') {
             changed = transactionsStore.updateTransactionListFilter({
                 accountIds: isAllSelected ? '' : finalAccountIds

src/views/base/settings/AppCloudSyncPageBase.ts

@@ -28,7 +28,9 @@ export const ALL_APPLICATION_CLOUD_SETTINGS: CategorizedApplicationCloudSettingI
         categoryName: 'Overview Page',
         items: [
             { settingKey: 'showAmountInHomePage', settingName: 'Show Amount', mobile: true, desktop: true },
-            { settingKey: 'timezoneUsedForStatisticsInHomePage', settingName: 'Timezone Used for Statistics', mobile: true, desktop: true }
+            { settingKey: 'timezoneUsedForStatisticsInHomePage', settingName: 'Timezone Used for Statistics', mobile: true, desktop: true },
+            { settingKey: 'overviewAccountFilterInHomePage', settingName: 'Accounts Included in Overview Statistics', mobile: true, desktop: true },
+            { settingKey: 'overviewTransactionCategoryFilterInHomePage', settingName: 'Transaction Categories Included in Overview Statistics', mobile: true, desktop: true }
         ]
     },
     {

src/views/base/settings/AppSettingsPageBase.ts

@@ -5,11 +5,16 @@ import { useI18n } from '@/locales/helpers.ts';
 import { useSettingsStore } from '@/stores/setting.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 import { useTransactionsStore } from '@/stores/transaction.ts';
+import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 import { useOverviewStore } from '@/stores/overview.ts';
 import { useStatisticsStore } from '@/stores/statistics.ts';
 
 import type { NameValue, TypeAndDisplayName } from '@/core/base.ts';
 import type { LocalizedTimezoneInfo } from '@/core/timezone.ts';
+import { CategoryType } from '@/core/category.ts';
+import type { Account } from '@/models/account.ts';
+
+import { isObjectEmpty } from '@/lib/common.ts';
 
 export function useAppSettingPageBase() {
     const { tt, getAllTimezones, getAllTimezoneTypesUsedForStatistics, getAllCurrencySortingTypes, setTimeZone } = useI18n();
@@ -17,10 +22,12 @@ export function useAppSettingPageBase() {
     const settingsStore = useSettingsStore();
     const accountsStore = useAccountsStore();
     const transactionsStore = useTransactionsStore();
+    const transactionCategoriesStore = useTransactionCategoriesStore();
     const overviewStore = useOverviewStore();
     const statisticsStore = useStatisticsStore();
 
     const loadingAccounts = ref<boolean>(false);
+    const loadingTransactionCategories = ref<boolean>(false);
 
     const allThemes = computed<NameValue[]>(() => {
         return [
@@ -42,7 +49,9 @@ export function useAppSettingPageBase() {
         ];
     });
 
+    const hasAnyAccount = computed<boolean>(() => accountsStore.allPlainAccounts.length > 0);
     const hasAnyVisibleAccount = computed<boolean>(() => accountsStore.allVisibleAccountsCount > 0);
+    const hasAnyTransactionCategory = computed<boolean>(() => !isObjectEmpty(transactionCategoriesStore.allTransactionCategoriesMap));
 
     const timeZone = computed<string>({
         get: () => settingsStore.appSettings.timeZone,
@@ -114,12 +123,26 @@ export function useAppSettingPageBase() {
         set: (value: number) => settingsStore.setCurrencySortByInExchangeRatesPage(value)
     });
 
+    const accountsIncludedInHomePageOverviewDisplayContent = computed<string>(() => {
+        const excludeAccountIds = settingsStore.appSettings.overviewAccountFilterInHomePage;
+        return getIncludedAccountsDisplayContent(excludeAccountIds, accountsStore.allPlainAccounts);
+    });
+
     const accountsIncludedInTotalDisplayContent = computed<string>(() => {
-        if (loadingAccounts.value || !accountsStore.allVisiblePlainAccounts || !accountsStore.allVisiblePlainAccounts.length) {
+        const excludeAccountIds = settingsStore.appSettings.totalAmountExcludeAccountIds;
+        return getIncludedAccountsDisplayContent(excludeAccountIds, accountsStore.allVisiblePlainAccounts);
+    });
+
+    const transactionCategoriesIncludedInHomePageOverviewDisplayContent = computed<string>(() => {
+        const excludeAccountIds = settingsStore.appSettings.overviewTransactionCategoryFilterInHomePage;
+        return getIncludedTransactionCategoriesDisplayContent(excludeAccountIds);
+    });
+
+    function getIncludedAccountsDisplayContent(excludeAccountIds: Record<string, boolean>, allAccounts: Account[]): string {
+        if (loadingAccounts.value || !allAccounts || !allAccounts.length) {
             return '';
         }
 
-        const excludeAccountIds = settingsStore.appSettings.totalAmountExcludeAccountIds;
         let hasExcludeAccount = false;
 
         for (const accountId in excludeAccountIds) {
@@ -137,27 +160,76 @@ export function useAppSettingPageBase() {
             return tt('All');
         }
 
-        let allVisibleAccountExcluded = true;
+        let allAccountExcluded = true;
 
-        for (let i = 0; i < accountsStore.allVisiblePlainAccounts.length; i++) {
-            const account = accountsStore.allVisiblePlainAccounts[i];
+        for (let i = 0; i < allAccounts.length; i++) {
+            const account = allAccounts[i];
 
             if (!excludeAccountIds[account.id]) {
-                allVisibleAccountExcluded = false;
+                allAccountExcluded = false;
                 break;
             }
         }
 
-        if (allVisibleAccountExcluded) {
+        if (allAccountExcluded) {
             return tt('None');
         }
 
         return tt('Partial');
-    });
+    }
+
+    function getIncludedTransactionCategoriesDisplayContent(excludeTransactionCategoryIds: Record<string, boolean>): string {
+        if (loadingTransactionCategories.value || !transactionCategoriesStore.allTransactionCategoriesMap) {
+            return '';
+        }
+
+        let hasExcludeTransactionCategory = false;
+
+        for (const transactionCategoryId in excludeTransactionCategoryIds) {
+            if (!Object.prototype.hasOwnProperty.call(excludeTransactionCategoryIds, transactionCategoryId)) {
+                continue;
+            }
+
+            if (excludeTransactionCategoryIds[transactionCategoryId] && transactionCategoriesStore.allTransactionCategoriesMap[transactionCategoryId]) {
+                hasExcludeTransactionCategory = true;
+                break;
+            }
+        }
+
+        if (!hasExcludeTransactionCategory) {
+            return tt('All');
+        }
+
+        let allTransactionCategoryExcluded = true;
+
+        for (const transactionCategoryId in transactionCategoriesStore.allTransactionCategoriesMap) {
+            if (!Object.prototype.hasOwnProperty.call(transactionCategoriesStore.allTransactionCategoriesMap, transactionCategoryId)) {
+                continue;
+            }
+
+            const transactionCategory = transactionCategoriesStore.allTransactionCategoriesMap[transactionCategoryId];
+
+            if (transactionCategory.type !== CategoryType.Income && transactionCategory.type !== CategoryType.Expense) {
+                continue;
+            }
+
+            if (!excludeTransactionCategoryIds[transactionCategory.id]) {
+                allTransactionCategoryExcluded = false;
+                break;
+            }
+        }
+
+        if (allTransactionCategoryExcluded) {
+            return tt('None');
+        }
+
+        return tt('Partial');
+    }
 
     return {
         // states
         loadingAccounts,
+        loadingTransactionCategories,
         // computed states
         allThemes,
         allTimezones,
@@ -165,7 +237,9 @@ export function useAppSettingPageBase() {
         allCurrencySortingTypes,
         allAutoSaveTransactionDraftTypes,
         timeZone,
+        hasAnyAccount,
         hasAnyVisibleAccount,
+        hasAnyTransactionCategory,
         isAutoUpdateExchangeRatesData,
         showAccountBalance,
         showAmountInHomePage,
@@ -176,6 +250,8 @@ export function useAppSettingPageBase() {
         autoSaveTransactionDraft,
         isAutoGetCurrentGeoLocation,
         currencySortByInExchangeRatesPage,
-        accountsIncludedInTotalDisplayContent
+        accountsIncludedInHomePageOverviewDisplayContent,
+        accountsIncludedInTotalDisplayContent,
+        transactionCategoriesIncludedInHomePageOverviewDisplayContent
     };
 }

src/views/base/settings/CategoryFilterSettingPageBase.ts

@@ -6,6 +6,7 @@ import { useSettingsStore } from '@/stores/setting.ts';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 import { useTransactionsStore } from '@/stores/transaction.ts';
 import { useStatisticsStore } from '@/stores/statistics.ts';
+import { useOverviewStore } from '@/stores/overview.ts';
 
 import { CategoryType } from '@/core/category.ts';
 import type { TransactionCategory, TransactionCategoriesWithVisibleCount } from '@/models/transaction_category.ts';
@@ -21,13 +22,16 @@ import {
     isCategoryOrSubCategoriesAllChecked
 } from '@/lib/category.ts';
 
-export function useCategoryFilterSettingPageBase(type?: string, allowCategoryTypesStr?: string) {
+export type CategoryFilterType = 'statisticsDefault' | 'statisticsCurrent' | 'homePageOverview' | 'transactionListCurrent';
+
+export function useCategoryFilterSettingPageBase(type?: CategoryFilterType, allowCategoryTypesStr?: string) {
     const { tt } = useI18n();
 
     const settingsStore = useSettingsStore();
     const transactionCategoriesStore = useTransactionCategoriesStore();
     const transactionsStore = useTransactionsStore();
     const statisticsStore = useStatisticsStore();
+    const overviewStore = useOverviewStore();
 
     const allowCategoryTypes: Record<string, boolean> | undefined = allowCategoryTypesStr ? arrayItemToObjectField(allowCategoryTypesStr.split(','), true) : undefined;
 
@@ -100,6 +104,9 @@ export function useCategoryFilterSettingPageBase(type?: string, allowCategoryTyp
         } else if (type === 'statisticsCurrent') {
             filterCategoryIds.value = Object.assign(allCategoryIds, statisticsStore.transactionStatisticsFilter.filterCategoryIds);
             return true;
+        } else if (type === 'homePageOverview') {
+            filterCategoryIds.value = Object.assign(allCategoryIds, settingsStore.appSettings.overviewTransactionCategoryFilterInHomePage);
+            return true;
         } else if (type === 'transactionListCurrent') {
             for (const categoryId in transactionsStore.allFilterCategoryIds) {
                 if (!Object.prototype.hasOwnProperty.call(transactionsStore.allFilterCategoryIds, categoryId)) {
@@ -157,6 +164,9 @@ export function useCategoryFilterSettingPageBase(type?: string, allowCategoryTyp
             changed = statisticsStore.updateTransactionStatisticsFilter({
                 filterCategoryIds: filteredCategoryIds
             });
+        } else if (type === 'homePageOverview') {
+            settingsStore.setOverviewTransactionCategoryFilterInHomePage(filteredCategoryIds);
+            overviewStore.updateTransactionOverviewInvalidState(true);
         } else if (type === 'transactionListCurrent') {
             changed = transactionsStore.updateTransactionListFilter({
                 categoryIds: isAllSelected ? '' : finalCategoryIds

src/views/desktop/HomePage.vue

@@ -34,7 +34,7 @@
                         <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">{{ tt('View Details') }}</v-btn>
+                    <v-btn size="small" :to="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.ThisMonth.type })}`">{{ tt('View Details') }}</v-btn>
                     <v-img class="overview-card-background img-with-direction"
                            src="img/desktop/card-background.png"/>
                     <v-img class="overview-card-background-image img-with-direction"
@@ -119,7 +119,7 @@
                         :datetime="displayDateRange?.today?.displayTime || ''"
                     >
                         <template #menus>
-                            <v-list-item :prepend-icon="mdiListBoxOutline" :to="'/transaction/list?dateType=' + DateRange.Today.type">
+                            <v-list-item :prepend-icon="mdiListBoxOutline" :to="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.Today.type })}`">
                                 <v-list-item-title>{{ tt('View Details') }}</v-list-item-title>
                             </v-list-item>
                         </template>
@@ -135,7 +135,7 @@
                         :datetime="displayDateRange?.thisWeek?.startTime + '-' + displayDateRange?.thisWeek?.endTime"
                     >
                         <template #menus>
-                            <v-list-item :prepend-icon="mdiListBoxOutline" :to="'/transaction/list?dateType=' + DateRange.ThisWeek.type">
+                            <v-list-item :prepend-icon="mdiListBoxOutline" :to="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.ThisWeek.type })}`">
                                 <v-list-item-title>{{ tt('View Details') }}</v-list-item-title>
                             </v-list-item>
                         </template>
@@ -151,7 +151,7 @@
                         :datetime="displayDateRange?.thisMonth?.startTime + '-' + displayDateRange?.thisMonth?.endTime"
                     >
                         <template #menus>
-                            <v-list-item :prepend-icon="mdiListBoxOutline" :to="'/transaction/list?dateType=' + DateRange.ThisMonth.type">
+                            <v-list-item :prepend-icon="mdiListBoxOutline" :to="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.ThisMonth.type })}`">
                                 <v-list-item-title>{{ tt('View Details') }}</v-list-item-title>
                             </v-list-item>
                         </template>
@@ -167,7 +167,7 @@
                         :datetime="displayDateRange?.thisYear?.displayTime || ''"
                     >
                         <template #menus>
-                            <v-list-item :prepend-icon="mdiListBoxOutline" :to="'/transaction/list?dateType=' + DateRange.ThisYear.type">
+                            <v-list-item :prepend-icon="mdiListBoxOutline" :to="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.ThisYear.type })}`">
                                 <v-list-item-title>{{ tt('View Details') }}</v-list-item-title>
                             </v-list-item>
                         </template>
@@ -199,6 +199,7 @@ import { useI18n } from '@/locales/helpers.ts';
 import { useHomePageBase } from '@/views/base/HomePageBase.ts';
 
 import { useAccountsStore } from '@/stores/account.ts';
+import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 import { useOverviewStore } from '@/stores/overview.ts';
 
 import { type NumeralSystem } from '@/core/numeral.ts';
@@ -242,6 +243,7 @@ const {
 } = useHomePageBase();
 
 const accountsStore = useAccountsStore();
+const transactionCategoriesStore = useTransactionCategoriesStore();
 const overviewStore = useOverviewStore();
 
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
@@ -258,7 +260,12 @@ function clickMonthlyIncomeOrExpense(e: MonthlyIncomeAndExpenseCardClickEvent):
     const maxTime = getUnixTimeBeforeUnixTime(getUnixTimeAfterUnixTime(minTime, 1, 'months'), 1, 'seconds');
     const type = e.transactionType;
 
-    router.push(`/transaction/list?type=${type}&dateType=${DateRange.Custom.type}&maxTime=${maxTime}&minTime=${minTime}`);
+    router.push(`/transaction/list?${overviewStore.getTransactionListPageParams({
+        type: type,
+        dateType: DateRange.Custom.type,
+        minTime: minTime,
+        maxTime: maxTime
+    })}`);
 }
 
 const monthlyIncomeAndExpenseData = computed<TransactionMonthlyIncomeAndExpenseData[]>(() => {
@@ -298,6 +305,7 @@ function reload(force: boolean): void {
 
     const promises = [
         accountsStore.loadAllAccounts({ force: false }),
+        transactionCategoriesStore.loadAllCategories({ force: false }),
         overviewStore.loadTransactionOverview({ force: force, loadLast11Months: true })
     ];
 

src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue

@@ -110,6 +110,38 @@
                                     v-model="timezoneUsedForStatisticsInHomePage"
                                 />
                             </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                    class="always-cursor-pointer"
+                                    item-title="displayName"
+                                    item-value="type"
+                                    persistent-placeholder
+                                    :loading="loadingAccounts"
+                                    :readonly="true"
+                                    :disabled="!hasAnyAccount"
+                                    :label="tt('Accounts Included in Overview Statistics')"
+                                    :placeholder="tt('Accounts Included in Overview Statistics')"
+                                    :model-value="accountsIncludedInHomePageOverviewDisplayContent"
+                                    @click="showAccountsIncludedInHomePageOverviewDialog = true"
+                                />
+                            </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                    class="always-cursor-pointer"
+                                    item-title="displayName"
+                                    item-value="type"
+                                    persistent-placeholder
+                                    :loading="loadingTransactionCategories"
+                                    :readonly="true"
+                                    :disabled="!hasAnyTransactionCategory"
+                                    :label="tt('Transaction Categories Included in Overview Statistics')"
+                                    :placeholder="tt('Transaction Categories Included in Overview Statistics')"
+                                    :model-value="transactionCategoriesIncludedInHomePageOverviewDisplayContent"
+                                    @click="showTransactionCategoriesIncludedInHomePageOverviewDialog = true"
+                                />
+                            </v-col>
                         </v-row>
                     </v-card-text>
                 </v-form>
@@ -241,6 +273,16 @@
         </v-col>
     </v-row>
 
+    <v-dialog width="800" v-model="showAccountsIncludedInHomePageOverviewDialog">
+        <account-filter-settings-card type="homePageOverview" :dialog-mode="true"
+                                      @settings:change="showAccountsIncludedInHomePageOverviewDialog = false" />
+    </v-dialog>
+
+    <v-dialog width="800" v-model="showTransactionCategoriesIncludedInHomePageOverviewDialog">
+        <category-filter-settings-card type="homePageOverview" :dialog-mode="true" :category-types="`${CategoryType.Income},${CategoryType.Expense}`"
+                                       @settings:change="showTransactionCategoriesIncludedInHomePageOverviewDialog = false" />
+    </v-dialog>
+
     <v-dialog width="800" v-model="showAccountsIncludedInTotalDialog">
         <account-filter-settings-card type="accountListTotalAmount" :dialog-mode="true"
                                       @settings:change="showAccountsIncludedInTotalDialog = false" />
@@ -252,6 +294,7 @@
 <script setup lang="ts">
 import SnackBar from '@/components/desktop/SnackBar.vue';
 import AccountFilterSettingsCard from '@/views/desktop/common/cards/AccountFilterSettingsCard.vue';
+import CategoryFilterSettingsCard from '@/views/desktop/common/cards/CategoryFilterSettingsCard.vue';
 
 import { ref, computed, useTemplateRef } from 'vue';
 import { useTheme } from 'vuetify';
@@ -261,9 +304,12 @@ import { useAppSettingPageBase } from '@/views/base/settings/AppSettingsPageBase
 
 import { useSettingsStore } from '@/stores/setting.ts';
 import { useAccountsStore } from '@/stores/account.ts';
+import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 
 import type { LocalizedSwitchOption } from '@/core/base.ts';
 import { ThemeType } from '@/core/theme.ts';
+import { CategoryType } from '@/core/category.ts';
+
 import { getSystemTheme } from '@/lib/ui/common.ts';
 
 type SnackBarType = InstanceType<typeof SnackBar>;
@@ -273,12 +319,15 @@ const theme = useTheme();
 const { tt, getAllEnableDisableOptions } = useI18n();
 const {
     loadingAccounts,
+    loadingTransactionCategories,
     allThemes,
     allTimezones,
     allTimezoneTypesUsedForStatistics,
     allCurrencySortingTypes,
     allAutoSaveTransactionDraftTypes,
+    hasAnyAccount,
     hasAnyVisibleAccount,
+    hasAnyTransactionCategory,
     timeZone,
     isAutoUpdateExchangeRatesData,
     showAccountBalance,
@@ -290,14 +339,19 @@ const {
     autoSaveTransactionDraft,
     isAutoGetCurrentGeoLocation,
     currencySortByInExchangeRatesPage,
-    accountsIncludedInTotalDisplayContent
+    accountsIncludedInHomePageOverviewDisplayContent,
+    accountsIncludedInTotalDisplayContent,
+    transactionCategoriesIncludedInHomePageOverviewDisplayContent
 } = useAppSettingPageBase();
 
 const settingsStore = useSettingsStore();
 const accountsStore = useAccountsStore();
+const transactionCategoriesStore = useTransactionCategoriesStore();
 
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
+const showAccountsIncludedInHomePageOverviewDialog = ref<boolean>(false);
+const showTransactionCategoriesIncludedInHomePageOverviewDialog = ref<boolean>(false);
 const showAccountsIncludedInTotalDialog = ref<boolean>(false);
 
 const enableDisableOptions = computed<LocalizedSwitchOption[]>(() => getAllEnableDisableOptions());
@@ -336,6 +390,18 @@ function init(): void {
             snackbar.value?.showError(error);
         }
     });
+
+    transactionCategoriesStore.loadAllCategories({
+        force: false
+    }).then(() => {
+        loadingTransactionCategories.value = false;
+    }).catch(error => {
+        loadingTransactionCategories.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
 }
 
 init();

src/views/desktop/common/cards/AccountFilterSettingsCard.vue

@@ -151,7 +151,10 @@ import SnackBar from '@/components/desktop/SnackBar.vue';
 import { ref, useTemplateRef } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
-import { useAccountFilterSettingPageBase } from '@/views/base/settings/AccountFilterSettingPageBase.ts';
+import {
+    type AccountFilterType,
+    useAccountFilterSettingPageBase
+} from '@/views/base/settings/AccountFilterSettingPageBase.ts';
 
 import { useAccountsStore } from '@/stores/account.ts';
 
@@ -179,7 +182,7 @@ import {
 type SnackBarType = InstanceType<typeof SnackBar>;
 
 const props = defineProps<{
-    type: string;
+    type: AccountFilterType;
     dialogMode?: boolean;
     autoSave?: boolean;
 }>();

src/views/desktop/common/cards/CategoryFilterSettingsCard.vue

@@ -148,7 +148,10 @@ import SnackBar from '@/components/desktop/SnackBar.vue';
 import { ref, useTemplateRef } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
-import { useCategoryFilterSettingPageBase } from '@/views/base/settings/CategoryFilterSettingPageBase.ts';
+import {
+    type CategoryFilterType,
+    useCategoryFilterSettingPageBase
+} from '@/views/base/settings/CategoryFilterSettingPageBase.ts';
 
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 
@@ -176,7 +179,7 @@ import {
 type SnackBarType = InstanceType<typeof SnackBar>;
 
 const props = defineProps<{
-    type: string;
+    type: CategoryFilterType;
     dialogMode?: boolean;
     autoSave?: boolean;
     categoryTypes?: string;

src/views/mobile/HomePage.vue

@@ -36,7 +36,7 @@
         </f7-card>
 
         <f7-list strong inset dividers class="margin-top overview-transaction-list" :class="{ 'skeleton-text': loading }">
-            <f7-list-item :link="'/transaction/list?dateType=' + DateRange.Today.type" chevron-center>
+            <f7-list-item :link="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.Today.type })}`" chevron-center>
                 <template #media>
                     <f7-icon f7="calendar_today"></f7-icon>
                 </template>
@@ -66,7 +66,7 @@
                 </template>
             </f7-list-item>
 
-            <f7-list-item :link="'/transaction/list?dateType=' + DateRange.ThisWeek.type" chevron-center>
+            <f7-list-item :link="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.ThisWeek.type })}`" chevron-center>
                 <template #media>
                     <f7-icon f7="calendar"></f7-icon>
                 </template>
@@ -99,7 +99,7 @@
                 </template>
             </f7-list-item>
 
-            <f7-list-item :link="'/transaction/list?dateType=' + DateRange.ThisMonth.type" chevron-center>
+            <f7-list-item :link="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.ThisMonth.type })}`" chevron-center>
                 <template #media>
                     <f7-icon f7="calendar"></f7-icon>
                 </template>
@@ -132,7 +132,7 @@
                 </template>
             </f7-list-item>
 
-            <f7-list-item :link="'/transaction/list?dateType=' + DateRange.ThisYear.type" chevron-center>
+            <f7-list-item :link="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.ThisYear.type })}`" chevron-center>
                 <template #media>
                     <f7-icon f7="square_stack_3d_up"></f7-icon>
                 </template>
@@ -207,6 +207,8 @@ import { useI18n } from '@/locales/helpers.ts';
 import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
 import { useHomePageBase } from '@/views/base/HomePageBase.ts';
 
+import { useAccountsStore } from '@/stores/account.ts';
+import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 import { useTransactionTemplatesStore } from '@/stores/transactionTemplate.ts';
 import { useOverviewStore } from '@/stores/overview.ts';
 
@@ -227,6 +229,8 @@ const {
     getDisplayExpenseAmount
 } = useHomePageBase();
 
+const accountsStore = useAccountsStore();
+const transactionCategoriesStore = useTransactionCategoriesStore();
 const transactionTemplatesStore = useTransactionTemplatesStore();
 const overviewStore = useOverviewStore();
 
@@ -248,9 +252,14 @@ function init(): void {
     if (isUserLogined() && isUserUnlocked()) {
         loading.value = true;
 
-        overviewStore.loadTransactionOverview({
-            force: false
-        }).then(() => {
+        const promises = [
+            accountsStore.loadAllAccounts({ force: false }),
+            transactionCategoriesStore.loadAllCategories({ force: false }),
+            transactionTemplatesStore.loadAllTemplates({ templateType: TemplateType.Normal.type,  force: false }),
+            overviewStore.loadTransactionOverview({ force: false })
+        ];
+
+        Promise.all(promises).then(() => {
             loading.value = false;
         }).catch(error => {
             loading.value = false;
@@ -259,11 +268,6 @@ function init(): void {
                 showToast(error.message || error);
             }
         });
-
-        transactionTemplatesStore.loadAllTemplates({
-            templateType: TemplateType.Normal.type,
-            force: false
-        });
     }
 }
 

src/views/mobile/settings/AccountFilterSettingsPage.vue

@@ -133,7 +133,10 @@ import type { Router } from 'framework7/types';
 
 import { useI18n } from '@/locales/helpers.ts';
 import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
-import { useAccountFilterSettingPageBase } from '@/views/base/settings/AccountFilterSettingPageBase.ts';
+import {
+    type AccountFilterType,
+    useAccountFilterSettingPageBase
+} from '@/views/base/settings/AccountFilterSettingPageBase.ts';
 
 import { useAccountsStore } from '@/stores/account.ts';
 
@@ -174,7 +177,7 @@ const {
     isAccountChecked,
     loadFilterAccountIds,
     saveFilterAccountIds
-} = useAccountFilterSettingPageBase(query['type']);
+} = useAccountFilterSettingPageBase(query['type'] as AccountFilterType);
 
 const accountsStore = useAccountsStore();
 

src/views/mobile/settings/CategoryFilterSettingsPage.vue

@@ -140,7 +140,10 @@ import type { Router } from 'framework7/types';
 
 import { useI18n } from '@/locales/helpers.ts';
 import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
-import { useCategoryFilterSettingPageBase } from '@/views/base/settings/CategoryFilterSettingPageBase.ts';
+import {
+    type CategoryFilterType,
+    useCategoryFilterSettingPageBase
+} from '@/views/base/settings/CategoryFilterSettingPageBase.ts';
 
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 
@@ -183,7 +186,7 @@ const {
     getCategoryTypeName,
     loadFilterCategoryIds,
     saveFilterCategoryIds
-} = useCategoryFilterSettingPageBase(query['type'], query['allowCategoryTypes']);
+} = useCategoryFilterSettingPageBase(query['type'] as CategoryFilterType, query['allowCategoryTypes']);
 
 const transactionCategoriesStore = useTransactionCategoriesStore();
 

src/views/mobile/settings/PageSettingsPage.vue

@@ -27,6 +27,24 @@
                                            v-model="timezoneUsedForStatisticsInHomePage">
                 </list-item-selection-popup>
             </f7-list-item>
+
+            <f7-list-item :disabled="!hasAnyAccount"
+                          :title="tt('Accounts Included in Overview Statistics')"
+                          link="/settings/filter/account?type=homePageOverview">
+                <template #after>
+                    <f7-preloader v-if="loadingAccounts" />
+                    <span v-else-if="!loadingAccounts">{{ accountsIncludedInHomePageOverviewDisplayContent }}</span>
+                </template>
+            </f7-list-item>
+
+            <f7-list-item :disabled="!hasAnyTransactionCategory"
+                          :title="tt('Transaction Categories Included in Overview Statistics')"
+                          :link="`/settings/filter/category?type=homePageOverview&allowCategoryTypes=${CategoryType.Income},${CategoryType.Expense}`">
+                <template #after>
+                    <f7-preloader v-if="loadingTransactionCategories" />
+                    <span v-else-if="!loadingTransactionCategories">{{ transactionCategoriesIncludedInHomePageOverviewDisplayContent }}</span>
+                </template>
+            </f7-list-item>
         </f7-list>
 
         <f7-block-title>{{ tt('Transaction List Page') }}</f7-block-title>
@@ -118,6 +136,9 @@ import { useAppSettingPageBase } from '@/views/base/settings/AppSettingsPageBase
 
 import { useSettingsStore } from '@/stores/setting.ts';
 import { useAccountsStore } from '@/stores/account.ts';
+import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
+
+import { CategoryType } from '@/core/category.ts';
 
 import { findNameByValue, findDisplayNameByType } from '@/lib/common.ts';
 
@@ -125,7 +146,10 @@ const { tt } = useI18n();
 const { showToast } = useI18nUIComponents();
 const {
     loadingAccounts,
+    loadingTransactionCategories,
+    hasAnyAccount,
     hasAnyVisibleAccount,
+    hasAnyTransactionCategory,
     allTimezoneTypesUsedForStatistics,
     allCurrencySortingTypes,
     allAutoSaveTransactionDraftTypes,
@@ -136,11 +160,14 @@ const {
     autoSaveTransactionDraft,
     isAutoGetCurrentGeoLocation,
     currencySortByInExchangeRatesPage,
-    accountsIncludedInTotalDisplayContent
+    accountsIncludedInHomePageOverviewDisplayContent,
+    accountsIncludedInTotalDisplayContent,
+    transactionCategoriesIncludedInHomePageOverviewDisplayContent
 } = useAppSettingPageBase();
 
 const settingsStore = useSettingsStore();
 const accountsStore = useAccountsStore();
+const transactionCategoriesStore = useTransactionCategoriesStore();
 
 const showTimezoneUsedForStatisticsInHomePagePopup = ref<boolean>(false);
 const showAutoSaveTransactionDraftPopup = ref<boolean>(false);
@@ -165,6 +192,18 @@ function init(): void {
             showToast(error.message || error);
         }
     });
+
+    transactionCategoriesStore.loadAllCategories({
+        force: false
+    }).then(() => {
+        loadingTransactionCategories.value = false;
+    }).catch(error => {
+        loadingTransactionCategories.value = false;
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
 }
 
 init();