From 5171f23c09f7da35d04b445c06d2b4f4a4a24a80 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 5 Jan 2025 22:47:33 +0800
Subject: [PATCH] migrate user store to composition API and typescript

---
 src/DesktopApp.vue                            |   2 +-
 src/MobileApp.vue                             |   2 +-
 src/components/desktop/AmountInput.vue        |   2 +-
 .../desktop/DateRangeSelectionDialog.vue      |   2 +-
 src/components/desktop/DateTimeSelect.vue     |   2 +-
 .../desktop/MonthRangeSelectionDialog.vue     |   2 +-
 src/components/desktop/PieChart.vue           |   2 +-
 .../desktop/ScheduleFrequencySelect.vue       |   2 +-
 src/components/desktop/TrendsChart.vue        |   2 +-
 .../mobile/DateRangeSelectionSheet.vue        |   2 +-
 .../mobile/DateTimeSelectionSheet.vue         |   2 +-
 .../mobile/MonthRangeSelectionSheet.vue       |   2 +-
 src/components/mobile/NumberPadSheet.vue      |   2 +-
 src/components/mobile/PieChart.vue            |   2 +-
 .../mobile/ScheduleFrequencySheet.vue         |   2 +-
 src/components/mobile/TrendsBarChart.vue      |   2 +-
 src/lib/services.ts                           |  14 +-
 src/models/user.ts                            |  51 +++
 src/stores/account.js                         |   2 +-
 src/stores/index.js                           |   2 +-
 src/stores/overview.js                        |   2 +-
 src/stores/statistics.js                      |   2 +-
 src/stores/token.js                           |   2 +-
 src/stores/transaction.js                     |   2 +-
 src/stores/user.js                            | 282 ---------------
 src/stores/user.ts                            | 334 ++++++++++++++++++
 src/views/desktop/AboutPage.vue               |   2 +-
 src/views/desktop/ExchangeRatesPage.vue       |   2 +-
 src/views/desktop/HomePage.vue                |   2 +-
 src/views/desktop/MainLayout.vue              |   2 +-
 src/views/desktop/SignupPage.vue              |   2 +-
 src/views/desktop/UnlockPage.vue              |   2 +-
 src/views/desktop/accounts/ListPage.vue       |   2 +-
 .../app/settings/tabs/AppBasicSettingTab.vue  |   2 +-
 .../app/settings/tabs/AppLockSettingTab.vue   |   2 +-
 .../cards/MonthlyIncomeAndExpenseCard.vue     |   2 +-
 .../desktop/statistics/TransactionPage.vue    |   2 +-
 src/views/desktop/transactions/ListPage.vue   |   2 +-
 .../list/dialogs/BatchReplaceDialog.vue       |   2 +-
 .../transactions/list/dialogs/EditDialog.vue  |   2 +-
 .../list/dialogs/ImportDialog.vue             |   2 +-
 .../settings/tabs/UserBasicSettingTab.vue     |   2 +-
 .../tabs/UserDataManagementSettingTab.vue     |   2 +-
 .../settings/tabs/UserSecuritySettingTab.vue  |   2 +-
 src/views/mobile/AboutPage.vue                |   2 +-
 src/views/mobile/ApplicationLockPage.vue      |   2 +-
 src/views/mobile/ExchangeRatesPage.vue        |   2 +-
 src/views/mobile/HomePage.vue                 |   2 +-
 src/views/mobile/SettingsPage.vue             |   2 +-
 src/views/mobile/SignupPage.vue               |   2 +-
 src/views/mobile/UnlockPage.vue               |   2 +-
 src/views/mobile/accounts/EditPage.vue        |   2 +-
 src/views/mobile/accounts/ListPage.vue        |   2 +-
 .../mobile/settings/TextSizeSettingsPage.vue  |   2 +-
 .../mobile/statistics/TransactionPage.vue     |   2 +-
 .../mobile/transactions/AmountFilterPage.vue  |   2 +-
 src/views/mobile/transactions/EditPage.vue    |   2 +-
 src/views/mobile/transactions/ListPage.vue    |   2 +-
 src/views/mobile/users/DataManagementPage.vue |   2 +-
 src/views/mobile/users/SessionListPage.vue    |   2 +-
 src/views/mobile/users/UserProfilePage.vue    |   2 +-
 61 files changed, 449 insertions(+), 346 deletions(-)
 delete mode 100644 src/stores/user.js
 create mode 100644 src/stores/user.ts

diff --git a/src/DesktopApp.vue b/src/DesktopApp.vue
index 656459f7..fd9ba9ed 100644
--- a/src/DesktopApp.vue
+++ b/src/DesktopApp.vue
@@ -22,7 +22,7 @@ import { register } from 'register-service-worker';
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useTokensStore } from '@/stores/token.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
diff --git a/src/MobileApp.vue b/src/MobileApp.vue
index f27e6a92..872b2cee 100644
--- a/src/MobileApp.vue
+++ b/src/MobileApp.vue
@@ -11,7 +11,7 @@ import routes from './router/mobile.js';
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useTokensStore } from '@/stores/token.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
diff --git a/src/components/desktop/AmountInput.vue b/src/components/desktop/AmountInput.vue
index 4d0d2a32..b737df07 100644
--- a/src/components/desktop/AmountInput.vue
+++ b/src/components/desktop/AmountInput.vue
@@ -32,7 +32,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { TRANSACTION_MIN_AMOUNT, TRANSACTION_MAX_AMOUNT } from '@/consts/transaction.ts';
 import { removeAll } from '@/lib/common.ts';
diff --git a/src/components/desktop/DateRangeSelectionDialog.vue b/src/components/desktop/DateRangeSelectionDialog.vue
index 7228e6dd..a6c976ed 100644
--- a/src/components/desktop/DateRangeSelectionDialog.vue
+++ b/src/components/desktop/DateRangeSelectionDialog.vue
@@ -57,7 +57,7 @@
 import { useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { DateRange } from '@/core/datetime.ts';
 import { ThemeType } from '@/core/theme.ts';
diff --git a/src/components/desktop/DateTimeSelect.vue b/src/components/desktop/DateTimeSelect.vue
index a09273db..903129e5 100644
--- a/src/components/desktop/DateTimeSelect.vue
+++ b/src/components/desktop/DateTimeSelect.vue
@@ -41,7 +41,7 @@
 import { useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { ThemeType } from '@/core/theme.ts';
 import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
diff --git a/src/components/desktop/MonthRangeSelectionDialog.vue b/src/components/desktop/MonthRangeSelectionDialog.vue
index 460b2677..80ddd9a7 100644
--- a/src/components/desktop/MonthRangeSelectionDialog.vue
+++ b/src/components/desktop/MonthRangeSelectionDialog.vue
@@ -67,7 +67,7 @@
 import { useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { ThemeType } from '@/core/theme.ts';
 import {
diff --git a/src/components/desktop/PieChart.vue b/src/components/desktop/PieChart.vue
index 2a0fcb41..425f0f67 100644
--- a/src/components/desktop/PieChart.vue
+++ b/src/components/desktop/PieChart.vue
@@ -8,7 +8,7 @@ import { useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { DEFAULT_ICON_COLOR, DEFAULT_CHART_COLORS } from '@/consts/color.ts';
 import { ThemeType } from '@/core/theme.ts';
diff --git a/src/components/desktop/ScheduleFrequencySelect.vue b/src/components/desktop/ScheduleFrequencySelect.vue
index b7cc2aed..55c8f0e1 100644
--- a/src/components/desktop/ScheduleFrequencySelect.vue
+++ b/src/components/desktop/ScheduleFrequencySelect.vue
@@ -56,7 +56,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { ScheduledTemplateFrequencyType } from '@/core/template.ts';
 import { sortNumbersArray } from '@/lib/common.ts';
diff --git a/src/components/desktop/TrendsChart.vue b/src/components/desktop/TrendsChart.vue
index d89dfdf3..0cc290c1 100644
--- a/src/components/desktop/TrendsChart.vue
+++ b/src/components/desktop/TrendsChart.vue
@@ -8,7 +8,7 @@ import { useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { DateRangeScene } from '@/core/datetime.ts';
 import { ThemeType } from '@/core/theme.ts';
diff --git a/src/components/mobile/DateRangeSelectionSheet.vue b/src/components/mobile/DateRangeSelectionSheet.vue
index 754f827f..fd10faca 100644
--- a/src/components/mobile/DateRangeSelectionSheet.vue
+++ b/src/components/mobile/DateRangeSelectionSheet.vue
@@ -54,7 +54,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { DateRange } from '@/core/datetime.ts';
 import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
diff --git a/src/components/mobile/DateTimeSelectionSheet.vue b/src/components/mobile/DateTimeSelectionSheet.vue
index af495c90..f5bd6073 100644
--- a/src/components/mobile/DateTimeSelectionSheet.vue
+++ b/src/components/mobile/DateTimeSelectionSheet.vue
@@ -50,7 +50,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
 import {
diff --git a/src/components/mobile/MonthRangeSelectionSheet.vue b/src/components/mobile/MonthRangeSelectionSheet.vue
index 73a316c8..45d261ab 100644
--- a/src/components/mobile/MonthRangeSelectionSheet.vue
+++ b/src/components/mobile/MonthRangeSelectionSheet.vue
@@ -45,7 +45,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import {
     getYearMonthObjectFromString,
diff --git a/src/components/mobile/NumberPadSheet.vue b/src/components/mobile/NumberPadSheet.vue
index f6d125a7..5a54d2a0 100644
--- a/src/components/mobile/NumberPadSheet.vue
+++ b/src/components/mobile/NumberPadSheet.vue
@@ -67,7 +67,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { ALL_CURRENCIES } from '@/consts/currency.ts';
 import { isString, isNumber, removeAll } from '@/lib/common.ts';
diff --git a/src/components/mobile/PieChart.vue b/src/components/mobile/PieChart.vue
index 1d87d03f..0aaa6755 100644
--- a/src/components/mobile/PieChart.vue
+++ b/src/components/mobile/PieChart.vue
@@ -79,7 +79,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { DEFAULT_ICON_COLOR, DEFAULT_CHART_COLORS } from '@/consts/color.ts';
 import { formatPercent } from '@/lib/numeral.ts';
diff --git a/src/components/mobile/ScheduleFrequencySheet.vue b/src/components/mobile/ScheduleFrequencySheet.vue
index 1c194f2c..2f138fc7 100644
--- a/src/components/mobile/ScheduleFrequencySheet.vue
+++ b/src/components/mobile/ScheduleFrequencySheet.vue
@@ -66,7 +66,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { ScheduledTemplateFrequencyType } from '@/core/template.ts';
 import { sortNumbersArray } from '@/lib/common.ts';
diff --git a/src/components/mobile/TrendsBarChart.vue b/src/components/mobile/TrendsBarChart.vue
index ee69c380..e5d563e4 100644
--- a/src/components/mobile/TrendsBarChart.vue
+++ b/src/components/mobile/TrendsBarChart.vue
@@ -91,7 +91,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { DateRangeScene } from '@/core/datetime.ts';
 import { ChartDateAggregationType } from '@/core/statistics.ts';
diff --git a/src/lib/services.ts b/src/lib/services.ts
index 4dddc0d1..94208750 100644
--- a/src/lib/services.ts
+++ b/src/lib/services.ts
@@ -272,11 +272,11 @@ export default {
     getTokens: (): ApiResponsePromise<TokenInfoResponse[]> => {
         return axios.get<ApiResponse<TokenInfoResponse[]>>('v1/tokens/list.json');
     },
-    revokeToken: (req: { tokenId: string, ignoreError: boolean }): ApiResponsePromise<boolean> => {
+    revokeToken: (req: { tokenId: string, ignoreError?: boolean }): ApiResponsePromise<boolean> => {
         return axios.post<ApiResponse<boolean>>('v1/tokens/revoke.json', {
             tokenId: req.tokenId
         }, {
-            ignoreError: req.ignoreError
+            ignoreError: !!req.ignoreError
         } as ApiRequestConfig);
     },
     revokeAllTokens: (): ApiResponsePromise<boolean> => {
@@ -319,11 +319,11 @@ export default {
     getUserDataStatistics: (): ApiResponsePromise<DataStatisticsResponse> => {
         return axios.get<ApiResponse<DataStatisticsResponse>>('v1/data/statistics.json');
     },
-    getExportedUserData: (fileType: string): Promise<AxiosResponse<unknown>> => {
+    getExportedUserData: (fileType: string): Promise<AxiosResponse<BlobPart>> => {
         if (fileType === 'csv') {
-            return axios.get<unknown>('v1/data/export.csv');
+            return axios.get<BlobPart>('v1/data/export.csv');
         } else if (fileType === 'tsv') {
-            return axios.get<unknown>('v1/data/export.tsv');
+            return axios.get<BlobPart>('v1/data/export.tsv');
         } else {
             return Promise.reject('Parameter Invalid');
         }
@@ -514,9 +514,9 @@ export default {
     deleteTransactionTemplate: (req: TransactionTemplateDeleteRequest): ApiResponsePromise<boolean> => {
         return axios.post<ApiResponse<boolean>>('v1/transaction/templates/delete.json', req);
     },
-    getLatestExchangeRates: (param: { ignoreError: boolean }): ApiResponsePromise<LatestExchangeRateResponse> => {
+    getLatestExchangeRates: (param: { ignoreError?: boolean }): ApiResponsePromise<LatestExchangeRateResponse> => {
         return axios.get<ApiResponse<LatestExchangeRateResponse>>('v1/exchange_rates/latest.json', {
-            ignoreError: param.ignoreError,
+            ignoreError: !!param.ignoreError,
             timeout: getExchangeRatesRequestTimeout() || DEFAULT_API_TIMEOUT
         } as ApiRequestConfig);
     },
diff --git a/src/models/user.ts b/src/models/user.ts
index efaa49fc..718baab6 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -1,5 +1,32 @@
+import { LongDateFormat, ShortDateFormat, LongTimeFormat, ShortTimeFormat } from '@/core/datetime.ts';
+import { DecimalSeparator, DigitGroupingSymbol, DigitGroupingType } from '@/core/numeral.ts';
+import { CurrencyDisplayType } from '@/core/currency.ts';
+import { PresetAmountColor } from '@/core/color.ts';
+import { TransactionEditScopeType } from '@/core/transaction.ts';
+
 import type { TransactionCategoryCreateBatchRequest } from './transaction_category.ts';
 
+export class User {
+    username: string = '';
+    password: string = '';
+    confirmPassword: string = '';
+    email: string = '';
+    nickname: string = '';
+    language: string;
+    defaultCurrency: string;
+    firstDayOfWeek: number;
+
+    private constructor(language: string, defaultCurrency: string, firstDayOfWeek: number) {
+        this.language = language;
+        this.defaultCurrency = defaultCurrency;
+        this.firstDayOfWeek = firstDayOfWeek;
+    }
+
+    public static createNewUser(language: string, defaultCurrency: string, firstDayOfWeek: number): User {
+        return new User(language, defaultCurrency, firstDayOfWeek);
+    }
+}
+
 export interface UserBasicInfo {
     readonly username: string;
     readonly email: string;
@@ -81,3 +108,27 @@ export interface UserProfileUpdateResponse {
 export interface UserProfileResponse extends UserBasicInfo {
     readonly lastLoginAt: number;
 }
+
+export const EMPTY_USER_BASIC_INFO: UserBasicInfo = {
+    username: '',
+    email: '',
+    nickname: '',
+    avatar: '',
+    avatarProvider: undefined,
+    defaultAccountId: '',
+    transactionEditScope: TransactionEditScopeType.All.type,
+    language: '',
+    defaultCurrency: '',
+    firstDayOfWeek: -1,
+    longDateFormat: LongDateFormat.Default.type,
+    shortDateFormat: ShortDateFormat.Default.type,
+    longTimeFormat: LongTimeFormat.Default.type,
+    shortTimeFormat: ShortTimeFormat.Default.type,
+    decimalSeparator: DecimalSeparator.LanguageDefaultType,
+    digitGroupingSymbol: DigitGroupingSymbol.LanguageDefaultType,
+    digitGrouping: DigitGroupingType.LanguageDefaultType,
+    currencyDisplayType: CurrencyDisplayType.Default.type,
+    expenseAmountColor: PresetAmountColor.DefaultExpenseColor.type,
+    incomeAmountColor: PresetAmountColor.DefaultIncomeColor.type,
+    emailVerified: false
+}
diff --git a/src/stores/account.js b/src/stores/account.js
index 9386d369..e8453841 100644
--- a/src/stores/account.js
+++ b/src/stores/account.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 
-import { useUserStore } from './user.js';
+import { useUserStore } from './user.ts';
 import { useExchangeRatesStore } from './exchangeRates.js';
 
 import { AccountType, AccountCategory } from '@/core/account.ts';
diff --git a/src/stores/index.js b/src/stores/index.js
index f8118561..2ae9e394 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 
 import { useSettingsStore } from './setting.ts';
-import { useUserStore } from './user.js';
+import { useUserStore } from './user.ts';
 import { useAccountsStore } from './account.js';
 import { useTransactionCategoriesStore } from './transactionCategory.js';
 import { useTransactionTagsStore } from './transactionTag.js';
diff --git a/src/stores/overview.js b/src/stores/overview.js
index 54ceeb55..5d893a1b 100644
--- a/src/stores/overview.js
+++ b/src/stores/overview.js
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from './user.js';
+import { useUserStore } from './user.ts';
 import { useExchangeRatesStore } from './exchangeRates.js';
 
 import { isNumber, isEquals } from '@/lib/common.ts';
diff --git a/src/stores/statistics.js b/src/stores/statistics.js
index 0708f8e0..04c1dff7 100644
--- a/src/stores/statistics.js
+++ b/src/stores/statistics.js
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 
 import { useSettingsStore } from './setting.ts';
-import { useUserStore } from './user.js';
+import { useUserStore } from './user.ts';
 import { useAccountsStore } from './account.js';
 import { useTransactionCategoriesStore } from './transactionCategory.js';
 import { useExchangeRatesStore } from './exchangeRates.js';
diff --git a/src/stores/token.js b/src/stores/token.js
index b81e29eb..0c762754 100644
--- a/src/stores/token.js
+++ b/src/stores/token.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 
-import { useUserStore } from './user.js';
+import { useUserStore } from './user.ts';
 
 import { updateCurrentToken } from '@/lib/userstate.ts';
 import services from '@/lib/services.ts';
diff --git a/src/stores/transaction.js b/src/stores/transaction.js
index 6911f2e7..4a6c7ec6 100644
--- a/src/stores/transaction.js
+++ b/src/stores/transaction.js
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 
 import { useSettingsStore } from './setting.ts';
-import { useUserStore } from './user.js';
+import { useUserStore } from './user.ts';
 import { useAccountsStore } from './account.js';
 import { useTransactionCategoriesStore } from './transactionCategory.js';
 import { useOverviewStore } from './overview.js';
diff --git a/src/stores/user.js b/src/stores/user.js
deleted file mode 100644
index db3a88db..00000000
--- a/src/stores/user.js
+++ /dev/null
@@ -1,282 +0,0 @@
-import { defineStore } from 'pinia';
-
-import { useSettingsStore } from './setting.ts';
-
-import {
-    getCurrentUserInfo,
-    updateCurrentUserInfo,
-    clearCurrentUserInfo
-} from '@/lib/userstate.ts';
-import services from '@/lib/services.ts';
-import logger from '@/lib/logger.ts';
-import {
-    isObject,
-    isNumber
-} from '@/lib/common.ts';
-
-export const useUserStore = defineStore('user', {
-    state: () => ({
-        currentUserBasicInfo: getCurrentUserInfo()
-    }),
-    getters: {
-        currentUserNickname(state) {
-            const userInfo = state.currentUserBasicInfo || {};
-            return userInfo.nickname || userInfo.username || null;
-        },
-        currentUserAvatar(state) {
-            const userInfo = state.currentUserBasicInfo || {};
-            return state.getUserAvatarUrl(userInfo, false);
-        },
-        currentUserDefaultAccountId(state) {
-            const userInfo = state.currentUserBasicInfo || {};
-            return userInfo.defaultAccountId || '';
-        },
-        currentUserLanguage(state) {
-            const userInfo = state.currentUserBasicInfo || {};
-            return userInfo.language;
-        },
-        currentUserDefaultCurrency(state) {
-            const settingsStore = useSettingsStore();
-            const userInfo = state.currentUserBasicInfo || {};
-            return userInfo.defaultCurrency || settingsStore.localeDefaultSettings.currency;
-        },
-        currentUserFirstDayOfWeek(state) {
-            const settingsStore = useSettingsStore();
-            const userInfo = state.currentUserBasicInfo || {};
-            return isNumber(userInfo.firstDayOfWeek) ? userInfo.firstDayOfWeek : settingsStore.localeDefaultSettings.firstDayOfWeek;
-        },
-        currentUserLongDateFormat(state) {
-            const userInfo = state.currentUserBasicInfo || {};
-            return userInfo.longDateFormat;
-        },
-        currentUserShortDateFormat(state) {
-            const userInfo = state.currentUserBasicInfo || {};
-            return userInfo.shortDateFormat;
-        },
-        currentUserLongTimeFormat(state) {
-            const userInfo = state.currentUserBasicInfo || {};
-            return userInfo.longTimeFormat;
-        },
-        currentUserShortTimeFormat(state) {
-            const userInfo = state.currentUserBasicInfo || {};
-            return userInfo.shortTimeFormat;
-        },
-        currentUserDecimalSeparator(state) {
-            const userInfo = state.currentUserBasicInfo || {};
-            return userInfo.decimalSeparator;
-        },
-        currentUserDigitGroupingSymbol(state) {
-            const userInfo = state.currentUserBasicInfo || {};
-            return userInfo.digitGroupingSymbol;
-        },
-        currentUserDigitGrouping(state) {
-            const userInfo = state.currentUserBasicInfo || {};
-            return userInfo.digitGrouping;
-        },
-        currentUserCurrencyDisplayType(state) {
-            const userInfo = state.currentUserBasicInfo || {};
-            return userInfo.currencyDisplayType;
-        },
-        currentUserExpenseAmountColor(state) {
-            const userInfo = state.currentUserBasicInfo || {};
-            return userInfo.expenseAmountColor;
-        },
-        currentUserIncomeAmountColor(state) {
-            const userInfo = state.currentUserBasicInfo || {};
-            return userInfo.incomeAmountColor;
-        }
-    },
-    actions: {
-        generateNewUserModel(language) {
-            const settingsStore = useSettingsStore();
-
-            return {
-                username: '',
-                password: '',
-                confirmPassword: '',
-                email: '',
-                nickname: '',
-                language: language,
-                defaultCurrency: settingsStore.localeDefaultSettings.currency,
-                firstDayOfWeek: settingsStore.localeDefaultSettings.firstDayOfWeek,
-            };
-        },
-        storeUserBasicInfo(userInfo) {
-            this.currentUserBasicInfo = userInfo;
-            updateCurrentUserInfo(userInfo);
-        },
-        resetUserBasicInfo() {
-            this.currentUserBasicInfo = null;
-            clearCurrentUserInfo();
-        },
-        getCurrentUserProfile() {
-            return new Promise((resolve, reject) => {
-                services.getProfile().then(response => {
-                    const data = response.data;
-
-                    if (!data || !data.success || !data.result) {
-                        reject({ message: 'Unable to retrieve user profile' });
-                        return;
-                    }
-
-                    resolve(data.result);
-                }).catch(error => {
-                    logger.error('failed to retrieve user profile', error);
-
-                    if (error.response && error.response.data && error.response.data.errorMessage) {
-                        reject({ error: error.response.data });
-                    } else if (!error.processed) {
-                        reject({ message: 'Unable to retrieve user profile' });
-                    } else {
-                        reject(error);
-                    }
-                });
-            });
-        },
-        updateUserTransactionEditScope({ transactionEditScope }) {
-            const self = this;
-
-            return new Promise((resolve, reject) => {
-                services.updateProfile({
-                    transactionEditScope: transactionEditScope,
-                }).then(response => {
-                    const data = response.data;
-
-                    if (!data || !data.success || !data.result || !data.result.user || !isObject(data.result.user)) {
-                        reject({ message: 'Unable to update editable transaction range' });
-                        return;
-                    }
-
-                    self.storeUserBasicInfo(data.result.user);
-
-                    resolve(data.result);
-                }).catch(error => {
-                    logger.error('failed to save editable transaction range', error);
-
-                    if (error.response && error.response.data && error.response.data.errorMessage) {
-                        reject({ error: error.response.data });
-                    } else if (!error.processed) {
-                        reject({ message: 'Unable to update editable transaction range' });
-                    } else {
-                        reject(error);
-                    }
-                });
-            });
-        },
-        updateUserAvatar({ avatarFile }) {
-            const self = this;
-
-            return new Promise((resolve, reject) => {
-                services.updateAvatar({ avatarFile }).then(response => {
-                    const data = response.data;
-
-                    if (!data || !data.success || !data.result) {
-                        reject({ message: 'Unable to update user avatar' });
-                        return;
-                    }
-
-                    self.storeUserBasicInfo(data.result);
-
-                    resolve(data.result);
-                }).catch(error => {
-                    logger.error('failed to update user avatar', error);
-
-                    if (error.response && error.response.data && error.response.data.errorMessage) {
-                        reject({ error: error.response.data });
-                    } else if (!error.processed) {
-                        reject({ message: 'Unable to update user avatar' });
-                    } else {
-                        reject(error);
-                    }
-                });
-            });
-        },
-        removeUserAvatar() {
-            const self = this;
-
-            return new Promise((resolve, reject) => {
-                services.removeAvatar().then(response => {
-                    const data = response.data;
-
-                    if (!data || !data.success || !data.result) {
-                        reject({ message: 'Unable to remove user avatar' });
-                        return;
-                    }
-
-                    self.storeUserBasicInfo(data.result);
-
-                    resolve(data.result);
-                }).catch(error => {
-                    logger.error('failed to remove user avatar', error);
-
-                    if (error.response && error.response.data && error.response.data.errorMessage) {
-                        reject({ error: error.response.data });
-                    } else if (!error.processed) {
-                        reject({ message: 'Unable to remove user avatar' });
-                    } else {
-                        reject(error);
-                    }
-                });
-            });
-        },
-        getUserDataStatistics() {
-            return new Promise((resolve, reject) => {
-                services.getUserDataStatistics().then(response => {
-                    const data = response.data;
-
-                    if (!data || !data.success || !data.result) {
-                        reject({ message: 'Unable to retrieve user statistics data' });
-                        return;
-                    }
-
-                    resolve(data.result);
-                }).catch(error => {
-                    logger.error('failed to retrieve user statistics data', error);
-
-                    if (error.response && error.response.data && error.response.data.errorMessage) {
-                        reject({ error: error.response.data });
-                    } else if (!error.processed) {
-                        reject({ message: 'Unable to retrieve user statistics data' });
-                    } else {
-                        reject(error);
-                    }
-                });
-            });
-        },
-        getExportedUserData(fileType) {
-            return new Promise((resolve, reject) => {
-                services.getExportedUserData(fileType).then(response => {
-                    if (response && response.headers) {
-                        if (fileType === 'csv' && response.headers['content-type'] !== 'text/csv') {
-                            reject({ message: 'Unable to retrieve exported user data' });
-                            return;
-                        } else if (fileType === 'tsv' && response.headers['content-type'] !== 'text/tab-separated-values') {
-                            reject({ message: 'Unable to retrieve exported user data' });
-                            return;
-                        }
-                    }
-
-                    const blob = new Blob([response.data], { type: response.headers['content-type'] });
-                    resolve(blob);
-                }).catch(error => {
-                    logger.error('failed to retrieve user statistics data', error);
-
-                    if (error.response && error.response.headers['content-type'] === 'text/text' && error.response && error.response.data) {
-                        reject({ message: 'error.' + error.response.data });
-                    } else if (!error.processed) {
-                        reject({ message: 'Unable to retrieve exported user data' });
-                    } else {
-                        reject(error);
-                    }
-                });
-            });
-        },
-        getUserAvatarUrl(userInfo, disableBrowserCache) {
-            if (!userInfo || !userInfo.avatar) {
-                return null;
-            }
-
-            return services.getInternalAvatarUrlWithToken(userInfo.avatar, disableBrowserCache);
-        }
-    }
-});
diff --git a/src/stores/user.ts b/src/stores/user.ts
new file mode 100644
index 00000000..3d5593d0
--- /dev/null
+++ b/src/stores/user.ts
@@ -0,0 +1,334 @@
+import { type Ref, ref, computed } from 'vue';
+import { defineStore } from 'pinia';
+
+import { useSettingsStore } from './setting.ts';
+
+import { WeekDay } from '@/core/datetime.ts';
+
+import {
+    type UserBasicInfo,
+    type UserProfileResponse,
+    type UserProfileUpdateResponse,
+    User,
+    EMPTY_USER_BASIC_INFO
+} from '@/models/user.ts';
+
+import type {
+    DataStatisticsResponse
+} from '@/models/data_management.ts';
+
+import {
+    isObject,
+    isNumber
+} from '@/lib/common.ts';
+
+import {
+    getCurrentUserInfo,
+    updateCurrentUserInfo,
+    clearCurrentUserInfo
+} from '@/lib/userstate.ts';
+
+import logger from '@/lib/logger.ts';
+import services from '@/lib/services.ts';
+
+export const useUserStore = defineStore('user', () => {
+    const settingsStore = useSettingsStore();
+    const currentUserBasicInfo: Ref<UserBasicInfo | null> = ref(getCurrentUserInfo());
+
+    const currentUserNickname = computed<string | null>(() => {
+        const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
+        return userInfo.nickname || userInfo.username || null;
+    });
+
+    const currentUserAvatar = computed<string | null>(() => {
+        const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
+        return getUserAvatarUrl(userInfo, false);
+    });
+
+    const currentUserDefaultAccountId = computed<string>(() => {
+        const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
+        return userInfo.defaultAccountId;
+    });
+
+    const currentUserLanguage = computed<string>(() => {
+        const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
+        return userInfo.language;
+    });
+
+    const currentUserDefaultCurrency = computed<string>(() => {
+        const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
+        return userInfo.defaultCurrency || settingsStore.localeDefaultSettings.currency;
+    });
+
+    const currentUserFirstDayOfWeek = computed<number>(() => {
+        const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
+        return isNumber(userInfo.firstDayOfWeek) && WeekDay.valueOf(userInfo.firstDayOfWeek) ? userInfo.firstDayOfWeek : settingsStore.localeDefaultSettings.firstDayOfWeek;
+    });
+
+    const currentUserLongDateFormat = computed<number>(() => {
+        const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
+        return userInfo.longDateFormat;
+    });
+
+    const currentUserShortDateFormat = computed<number>(() => {
+        const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
+        return userInfo.shortDateFormat;
+    });
+
+    const currentUserLongTimeFormat = computed<number>(() => {
+        const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
+        return userInfo.longTimeFormat;
+    });
+
+    const currentUserShortTimeFormat = computed<number>(() => {
+        const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
+        return userInfo.shortTimeFormat;
+    });
+
+    const currentUserDecimalSeparator = computed<number>(() => {
+        const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
+        return userInfo.decimalSeparator;
+    });
+
+    const currentUserDigitGroupingSymbol = computed<number>(() => {
+        const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
+        return userInfo.digitGroupingSymbol;
+    });
+
+    const currentUserDigitGrouping = computed<number>(() => {
+        const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
+        return userInfo.digitGrouping;
+    });
+
+    const currentUserCurrencyDisplayType = computed<number>(() => {
+        const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
+        return userInfo.currencyDisplayType;
+    });
+
+    const currentUserExpenseAmountColor = computed<number>(() => {
+        const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
+        return userInfo.expenseAmountColor;
+    });
+
+    const currentUserIncomeAmountColor = computed<number>(() => {
+        const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
+        return userInfo.incomeAmountColor;
+    });
+
+    function generateNewUserModel(language: string): User {
+        return User.createNewUser(language, settingsStore.localeDefaultSettings.currency, settingsStore.localeDefaultSettings.firstDayOfWeek);
+    }
+
+    function storeUserBasicInfo(userInfo: UserBasicInfo): void {
+        currentUserBasicInfo.value = userInfo;
+        updateCurrentUserInfo(userInfo);
+    }
+
+    function resetUserBasicInfo(): void {
+        currentUserBasicInfo.value = null;
+        clearCurrentUserInfo();
+    }
+
+    function getCurrentUserProfile(): Promise<UserProfileResponse> {
+        return new Promise((resolve, reject) => {
+            services.getProfile().then(response => {
+                const data = response.data;
+
+                if (!data || !data.success || !data.result) {
+                    reject({ message: 'Unable to retrieve user profile' });
+                    return;
+                }
+
+                resolve(data.result);
+            }).catch(error => {
+                logger.error('failed to retrieve user profile', error);
+
+                if (error.response && error.response.data && error.response.data.errorMessage) {
+                    reject({ error: error.response.data });
+                } else if (!error.processed) {
+                    reject({ message: 'Unable to retrieve user profile' });
+                } else {
+                    reject(error);
+                }
+            });
+        });
+    }
+
+    function updateUserTransactionEditScope(req: { transactionEditScope: number }): Promise<UserProfileUpdateResponse> {
+        return new Promise((resolve, reject) => {
+            services.updateProfile({
+                transactionEditScope: req.transactionEditScope,
+            }).then(response => {
+                const data = response.data;
+
+                if (!data || !data.success || !data.result || !data.result.user || !isObject(data.result.user)) {
+                    reject({ message: 'Unable to update editable transaction range' });
+                    return;
+                }
+
+                storeUserBasicInfo(data.result.user);
+
+                resolve(data.result);
+            }).catch(error => {
+                logger.error('failed to save editable transaction range', error);
+
+                if (error.response && error.response.data && error.response.data.errorMessage) {
+                    reject({ error: error.response.data });
+                } else if (!error.processed) {
+                    reject({ message: 'Unable to update editable transaction range' });
+                } else {
+                    reject(error);
+                }
+            });
+        });
+    }
+
+    function updateUserAvatar(req: { avatarFile: unknown }): Promise<UserProfileResponse> {
+        return new Promise((resolve, reject) => {
+            services.updateAvatar({ avatarFile: req.avatarFile }).then(response => {
+                const data = response.data;
+
+                if (!data || !data.success || !data.result) {
+                    reject({ message: 'Unable to update user avatar' });
+                    return;
+                }
+
+                storeUserBasicInfo(data.result);
+
+                resolve(data.result);
+            }).catch(error => {
+                logger.error('failed to update user avatar', error);
+
+                if (error.response && error.response.data && error.response.data.errorMessage) {
+                    reject({ error: error.response.data });
+                } else if (!error.processed) {
+                    reject({ message: 'Unable to update user avatar' });
+                } else {
+                    reject(error);
+                }
+            });
+        });
+    }
+
+    function removeUserAvatar(): Promise<UserProfileResponse> {
+        return new Promise((resolve, reject) => {
+            services.removeAvatar().then(response => {
+                const data = response.data;
+
+                if (!data || !data.success || !data.result) {
+                    reject({ message: 'Unable to remove user avatar' });
+                    return;
+                }
+
+                storeUserBasicInfo(data.result);
+
+                resolve(data.result);
+            }).catch(error => {
+                logger.error('failed to remove user avatar', error);
+
+                if (error.response && error.response.data && error.response.data.errorMessage) {
+                    reject({ error: error.response.data });
+                } else if (!error.processed) {
+                    reject({ message: 'Unable to remove user avatar' });
+                } else {
+                    reject(error);
+                }
+            });
+        });
+    }
+
+    function getUserDataStatistics(): Promise<DataStatisticsResponse> {
+        return new Promise((resolve, reject) => {
+            services.getUserDataStatistics().then(response => {
+                const data = response.data;
+
+                if (!data || !data.success || !data.result) {
+                    reject({ message: 'Unable to retrieve user statistics data' });
+                    return;
+                }
+
+                resolve(data.result);
+            }).catch(error => {
+                logger.error('failed to retrieve user statistics data', error);
+
+                if (error.response && error.response.data && error.response.data.errorMessage) {
+                    reject({ error: error.response.data });
+                } else if (!error.processed) {
+                    reject({ message: 'Unable to retrieve user statistics data' });
+                } else {
+                    reject(error);
+                }
+            });
+        });
+    }
+
+    function getExportedUserData(fileType: string): Promise<Blob> {
+        return new Promise((resolve, reject) => {
+            services.getExportedUserData(fileType).then(response => {
+                if (response && response.headers) {
+                    if (fileType === 'csv' && response.headers['content-type'] !== 'text/csv') {
+                        reject({ message: 'Unable to retrieve exported user data' });
+                        return;
+                    } else if (fileType === 'tsv' && response.headers['content-type'] !== 'text/tab-separated-values') {
+                        reject({ message: 'Unable to retrieve exported user data' });
+                        return;
+                    }
+                }
+
+                const blob = new Blob([response.data], { type: response.headers['content-type'] });
+                resolve(blob);
+            }).catch(error => {
+                logger.error('failed to retrieve user statistics data', error);
+
+                if (error.response && error.response.headers['content-type'] === 'text/text' && error.response && error.response.data) {
+                    reject({ message: 'error.' + error.response.data });
+                } else if (!error.processed) {
+                    reject({ message: 'Unable to retrieve exported user data' });
+                } else {
+                    reject(error);
+                }
+            });
+        });
+    }
+
+    function getUserAvatarUrl(userInfo: UserBasicInfo, disableBrowserCache: boolean | string): string | null {
+        if (!userInfo || !userInfo.avatar) {
+            return null;
+        }
+
+        return services.getInternalAvatarUrlWithToken(userInfo.avatar, disableBrowserCache);
+    }
+
+    return {
+        // states
+        currentUserBasicInfo,
+        // computed states
+        currentUserNickname,
+        currentUserAvatar,
+        currentUserDefaultAccountId,
+        currentUserLanguage,
+        currentUserDefaultCurrency,
+        currentUserFirstDayOfWeek,
+        currentUserLongDateFormat,
+        currentUserShortDateFormat,
+        currentUserLongTimeFormat,
+        currentUserShortTimeFormat,
+        currentUserDecimalSeparator,
+        currentUserDigitGroupingSymbol,
+        currentUserDigitGrouping,
+        currentUserCurrencyDisplayType,
+        currentUserExpenseAmountColor,
+        currentUserIncomeAmountColor,
+        // functions
+        generateNewUserModel,
+        storeUserBasicInfo,
+        resetUserBasicInfo,
+        getCurrentUserProfile,
+        updateUserTransactionEditScope,
+        updateUserAvatar,
+        removeUserAvatar,
+        getUserDataStatistics,
+        getExportedUserData,
+        getUserAvatarUrl
+    };
+});
diff --git a/src/views/desktop/AboutPage.vue b/src/views/desktop/AboutPage.vue
index 568a2e71..cc9edaf9 100644
--- a/src/views/desktop/AboutPage.vue
+++ b/src/views/desktop/AboutPage.vue
@@ -121,7 +121,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
 import { getMapProvider } from '@/lib/server_settings.ts';
diff --git a/src/views/desktop/ExchangeRatesPage.vue b/src/views/desktop/ExchangeRatesPage.vue
index d2d08442..0c1d5549 100644
--- a/src/views/desktop/ExchangeRatesPage.vue
+++ b/src/views/desktop/ExchangeRatesPage.vue
@@ -138,7 +138,7 @@ import { useDisplay } from 'vuetify';
 
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
 import logger from '@/lib/logger.ts';
diff --git a/src/views/desktop/HomePage.vue b/src/views/desktop/HomePage.vue
index ccb7152a..dfe5c9fd 100644
--- a/src/views/desktop/HomePage.vue
+++ b/src/views/desktop/HomePage.vue
@@ -192,7 +192,7 @@ import MonthlyIncomeAndExpenseCard from './overview/cards/MonthlyIncomeAndExpens
 
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useOverviewStore } from '@/stores/overview.js';
 
diff --git a/src/views/desktop/MainLayout.vue b/src/views/desktop/MainLayout.vue
index 99725d41..62c2fe2d 100644
--- a/src/views/desktop/MainLayout.vue
+++ b/src/views/desktop/MainLayout.vue
@@ -199,7 +199,7 @@ import { useRoute } from 'vue-router';
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
 import { ThemeType } from '@/core/theme.ts';
diff --git a/src/views/desktop/SignupPage.vue b/src/views/desktop/SignupPage.vue
index 6f9c7721..a544aaa5 100644
--- a/src/views/desktop/SignupPage.vue
+++ b/src/views/desktop/SignupPage.vue
@@ -240,7 +240,7 @@ import { useTheme } from 'vuetify';
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
diff --git a/src/views/desktop/UnlockPage.vue b/src/views/desktop/UnlockPage.vue
index 160d3c51..d6799257 100644
--- a/src/views/desktop/UnlockPage.vue
+++ b/src/views/desktop/UnlockPage.vue
@@ -112,7 +112,7 @@ import { useTheme } from 'vuetify';
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useTokensStore } from '@/stores/token.js';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
diff --git a/src/views/desktop/accounts/ListPage.vue b/src/views/desktop/accounts/ListPage.vue
index bab335f2..b78a6240 100644
--- a/src/views/desktop/accounts/ListPage.vue
+++ b/src/views/desktop/accounts/ListPage.vue
@@ -261,7 +261,7 @@ import { useDisplay } from 'vuetify';
 
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
diff --git a/src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue b/src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue
index 23eac58c..f2b967cd 100644
--- a/src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue
+++ b/src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue
@@ -208,7 +208,7 @@ import { useTheme } from 'vuetify';
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useOverviewStore } from '@/stores/overview.js';
 import { useStatisticsStore } from '@/stores/statistics.js';
diff --git a/src/views/desktop/app/settings/tabs/AppLockSettingTab.vue b/src/views/desktop/app/settings/tabs/AppLockSettingTab.vue
index f45f5f95..ccbbc5d5 100644
--- a/src/views/desktop/app/settings/tabs/AppLockSettingTab.vue
+++ b/src/views/desktop/app/settings/tabs/AppLockSettingTab.vue
@@ -63,7 +63,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
 
 import logger from '@/lib/logger.ts';
diff --git a/src/views/desktop/overview/cards/MonthlyIncomeAndExpenseCard.vue b/src/views/desktop/overview/cards/MonthlyIncomeAndExpenseCard.vue
index 5eb8c018..ab94e19d 100644
--- a/src/views/desktop/overview/cards/MonthlyIncomeAndExpenseCard.vue
+++ b/src/views/desktop/overview/cards/MonthlyIncomeAndExpenseCard.vue
@@ -29,7 +29,7 @@ import { useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { TransactionType } from '@/core/transaction.ts';
 import {
diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue
index 9b23c06c..0d072a74 100644
--- a/src/views/desktop/statistics/TransactionPage.vue
+++ b/src/views/desktop/statistics/TransactionPage.vue
@@ -318,7 +318,7 @@ import { useDisplay, useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useStatisticsStore } from '@/stores/statistics.js';
diff --git a/src/views/desktop/transactions/ListPage.vue b/src/views/desktop/transactions/ListPage.vue
index 3c167d5f..1adceb35 100644
--- a/src/views/desktop/transactions/ListPage.vue
+++ b/src/views/desktop/transactions/ListPage.vue
@@ -588,7 +588,7 @@ import { useDisplay } from 'vuetify';
 
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useTransactionTagsStore } from '@/stores/transactionTag.js';
diff --git a/src/views/desktop/transactions/list/dialogs/BatchReplaceDialog.vue b/src/views/desktop/transactions/list/dialogs/BatchReplaceDialog.vue
index 4f1039d1..e3a3a2d9 100644
--- a/src/views/desktop/transactions/list/dialogs/BatchReplaceDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/BatchReplaceDialog.vue
@@ -173,7 +173,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useTransactionTagsStore } from '@/stores/transactionTag.js';
diff --git a/src/views/desktop/transactions/list/dialogs/EditDialog.vue b/src/views/desktop/transactions/list/dialogs/EditDialog.vue
index 94dfa125..c59d42ae 100644
--- a/src/views/desktop/transactions/list/dialogs/EditDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/EditDialog.vue
@@ -392,7 +392,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useTransactionTagsStore } from '@/stores/transactionTag.js';
diff --git a/src/views/desktop/transactions/list/dialogs/ImportDialog.vue b/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
index 637143cb..33f1addb 100644
--- a/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
@@ -597,7 +597,7 @@ import BatchReplaceDialog from './BatchReplaceDialog.vue';
 
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useTransactionTagsStore } from '@/stores/transactionTag.js';
diff --git a/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue b/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
index f50a7117..30eff771 100644
--- a/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
@@ -333,7 +333,7 @@
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useOverviewStore } from '@/stores/overview.js';
 
diff --git a/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue b/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue
index 4877e5fd..bcbe50f8 100644
--- a/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue
@@ -160,7 +160,7 @@
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { isEquals } from '@/lib/common.ts';
 import { isDataExportingEnabled } from '@/lib/server_settings.ts';
diff --git a/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue b/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue
index f810665a..2a749f82 100644
--- a/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue
@@ -132,7 +132,7 @@
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useTokensStore } from '@/stores/token.js';
 
 import { isEquals } from '@/lib/common.ts';
diff --git a/src/views/mobile/AboutPage.vue b/src/views/mobile/AboutPage.vue
index c718acd3..090c77e4 100644
--- a/src/views/mobile/AboutPage.vue
+++ b/src/views/mobile/AboutPage.vue
@@ -59,7 +59,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
 import { getMapProvider } from '@/lib/server_settings.ts';
diff --git a/src/views/mobile/ApplicationLockPage.vue b/src/views/mobile/ApplicationLockPage.vue
index e91805b6..fbc06789 100644
--- a/src/views/mobile/ApplicationLockPage.vue
+++ b/src/views/mobile/ApplicationLockPage.vue
@@ -38,7 +38,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
 
 import logger from '@/lib/logger.ts';
diff --git a/src/views/mobile/ExchangeRatesPage.vue b/src/views/mobile/ExchangeRatesPage.vue
index 03086653..5294536f 100644
--- a/src/views/mobile/ExchangeRatesPage.vue
+++ b/src/views/mobile/ExchangeRatesPage.vue
@@ -93,7 +93,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
 import { TRANSACTION_MIN_AMOUNT, TRANSACTION_MAX_AMOUNT } from '@/consts/transaction.ts';
diff --git a/src/views/mobile/HomePage.vue b/src/views/mobile/HomePage.vue
index aa7d5acb..ae440e87 100644
--- a/src/views/mobile/HomePage.vue
+++ b/src/views/mobile/HomePage.vue
@@ -203,7 +203,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useTransactionTemplatesStore } from '@/stores/transactionTemplate.js';
 import { useOverviewStore } from '@/stores/overview.js';
 
diff --git a/src/views/mobile/SettingsPage.vue b/src/views/mobile/SettingsPage.vue
index 12cffb1d..b8d48255 100644
--- a/src/views/mobile/SettingsPage.vue
+++ b/src/views/mobile/SettingsPage.vue
@@ -74,7 +74,7 @@
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useOverviewStore } from '@/stores/overview.js';
 import { useStatisticsStore } from '@/stores/statistics.js';
diff --git a/src/views/mobile/SignupPage.vue b/src/views/mobile/SignupPage.vue
index de0a3168..ae5c4a89 100644
--- a/src/views/mobile/SignupPage.vue
+++ b/src/views/mobile/SignupPage.vue
@@ -178,7 +178,7 @@
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
diff --git a/src/views/mobile/UnlockPage.vue b/src/views/mobile/UnlockPage.vue
index 8f8b2d42..8eac3066 100644
--- a/src/views/mobile/UnlockPage.vue
+++ b/src/views/mobile/UnlockPage.vue
@@ -68,7 +68,7 @@
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useTokensStore } from '@/stores/token.js';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
diff --git a/src/views/mobile/accounts/EditPage.vue b/src/views/mobile/accounts/EditPage.vue
index a16ff1bd..6d7d69d6 100644
--- a/src/views/mobile/accounts/EditPage.vue
+++ b/src/views/mobile/accounts/EditPage.vue
@@ -490,7 +490,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 
 import { AccountType, AccountCategory } from '@/core/account.ts';
diff --git a/src/views/mobile/accounts/ListPage.vue b/src/views/mobile/accounts/ListPage.vue
index 25e8e8c9..c387c018 100644
--- a/src/views/mobile/accounts/ListPage.vue
+++ b/src/views/mobile/accounts/ListPage.vue
@@ -176,7 +176,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
diff --git a/src/views/mobile/settings/TextSizeSettingsPage.vue b/src/views/mobile/settings/TextSizeSettingsPage.vue
index 7cd91abe..d181629b 100644
--- a/src/views/mobile/settings/TextSizeSettingsPage.vue
+++ b/src/views/mobile/settings/TextSizeSettingsPage.vue
@@ -114,7 +114,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { FontSize } from '@/core/font.ts';
 import { getCurrentUnixTime, getDay, getDayOfWeekName } from '@/lib/datetime.ts';
diff --git a/src/views/mobile/statistics/TransactionPage.vue b/src/views/mobile/statistics/TransactionPage.vue
index 17e486a5..687c3062 100644
--- a/src/views/mobile/statistics/TransactionPage.vue
+++ b/src/views/mobile/statistics/TransactionPage.vue
@@ -326,7 +326,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useStatisticsStore } from '@/stores/statistics.js';
diff --git a/src/views/mobile/transactions/AmountFilterPage.vue b/src/views/mobile/transactions/AmountFilterPage.vue
index f3921ec3..0a6373fe 100644
--- a/src/views/mobile/transactions/AmountFilterPage.vue
+++ b/src/views/mobile/transactions/AmountFilterPage.vue
@@ -54,7 +54,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
 
 import { AmountFilterType } from '@/core/numeral.ts';
diff --git a/src/views/mobile/transactions/EditPage.vue b/src/views/mobile/transactions/EditPage.vue
index dcaee810..018e3d5a 100644
--- a/src/views/mobile/transactions/EditPage.vue
+++ b/src/views/mobile/transactions/EditPage.vue
@@ -431,7 +431,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useTransactionTagsStore } from '@/stores/transactionTag.js';
diff --git a/src/views/mobile/transactions/ListPage.vue b/src/views/mobile/transactions/ListPage.vue
index 47555bbe..b0955918 100644
--- a/src/views/mobile/transactions/ListPage.vue
+++ b/src/views/mobile/transactions/ListPage.vue
@@ -522,7 +522,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useTransactionTagsStore } from '@/stores/transactionTag.js';
diff --git a/src/views/mobile/users/DataManagementPage.vue b/src/views/mobile/users/DataManagementPage.vue
index 45951441..2bec6756 100644
--- a/src/views/mobile/users/DataManagementPage.vue
+++ b/src/views/mobile/users/DataManagementPage.vue
@@ -77,7 +77,7 @@
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 
 import { isDataExportingEnabled } from '@/lib/server_settings.ts';
 
diff --git a/src/views/mobile/users/SessionListPage.vue b/src/views/mobile/users/SessionListPage.vue
index 1d514d1d..e4746f3c 100644
--- a/src/views/mobile/users/SessionListPage.vue
+++ b/src/views/mobile/users/SessionListPage.vue
@@ -44,7 +44,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useTokensStore } from '@/stores/token.js';
 
 import { isEquals } from '@/lib/common.ts';
diff --git a/src/views/mobile/users/UserProfilePage.vue b/src/views/mobile/users/UserProfilePage.vue
index cb061385..936d17f9 100644
--- a/src/views/mobile/users/UserProfilePage.vue
+++ b/src/views/mobile/users/UserProfilePage.vue
@@ -335,7 +335,7 @@
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.js';
+import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useOverviewStore } from '@/stores/overview.js';