migrate user store to composition API and typescript

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';
 

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';
 

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';

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';

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';

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 {

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';

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';

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';

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';

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 {

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,

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';

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';

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';

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';

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);
     },

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
+}

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';

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';

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';

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';

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';

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';

src/stores/user.js

@@ -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);
-        }
-    }
-});

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
+    };
+});

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';

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';

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';
 

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';

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';
 

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';

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';
 

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';

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';

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 {

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';

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';

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';

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';

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';

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';
 

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';

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';

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';

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';

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';

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';
 

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';

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';
 

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';

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';

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';
 

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';

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';

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';

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';

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';

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';
 

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';

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';