From 4111eb0838d8658c52c7e9e63a6e15e6e56ac008 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Mon, 9 Jun 2025 23:32:19 +0800
Subject: [PATCH] code refactor

---
 src/components/base/DateRangeSelectionBase.ts |  4 ++--
 .../base/FiscalYearStartSelectionBase.ts      |  3 ++-
 src/components/common/MapView.vue             |  4 ++--
 src/components/common/PinCodeInput.vue        |  6 +++---
 .../desktop/DateRangeSelectionDialog.vue      |  3 ++-
 src/components/desktop/DateSelect.vue         |  5 +++--
 src/components/desktop/DateTimeSelect.vue     |  5 +++--
 .../desktop/ScheduleFrequencySelect.vue       |  5 +++--
 src/components/desktop/TwoColumnSelect.vue    |  6 +++---
 .../mobile/DateRangeSelectionSheet.vue        |  4 +++-
 src/components/mobile/DateSelectionSheet.vue  |  3 ++-
 .../mobile/DateTimeSelectionSheet.vue         |  5 +++--
 src/components/mobile/InformationSheet.vue    |  2 +-
 .../mobile/ScheduleFrequencySheet.vue         |  3 ++-
 src/core/datetime.ts                          | 12 +++++++----
 src/core/setting.ts                           |  4 ++--
 src/lib/datetime.ts                           | 21 ++++++++++---------
 src/locales/helpers.ts                        |  5 +++--
 src/stores/user.ts                            |  6 +++---
 .../StatisticsTransactionPageBase.ts          |  4 ++--
 .../transactions/TransactionEditPageBase.ts   |  3 ++-
 .../transactions/TransactionListPageBase.ts   |  4 ++--
 src/views/desktop/ForgetPasswordPage.vue      |  2 +-
 src/views/desktop/LoginPage.vue               |  2 +-
 src/views/desktop/ResetPasswordPage.vue       |  2 +-
 src/views/desktop/SignupPage.vue              |  4 ++--
 .../tabs/UserTwoFactorAuthSettingTab.vue      |  2 +-
 27 files changed, 73 insertions(+), 56 deletions(-)

diff --git a/src/components/base/DateRangeSelectionBase.ts b/src/components/base/DateRangeSelectionBase.ts
index 9d6c8e9b..d891d12a 100644
--- a/src/components/base/DateRangeSelectionBase.ts
+++ b/src/components/base/DateRangeSelectionBase.ts
@@ -1,6 +1,6 @@
 import { ref, computed } from 'vue';
 
-import { type TimeRangeAndDateType, type PresetDateRange, type UnixTimeRange, DateRange } from '@/core/datetime.ts';
+import { type TimeRangeAndDateType, type PresetDateRange, type UnixTimeRange, type WeekDayValue, DateRange } from '@/core/datetime.ts';
 import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
 import {
     getCurrentUnixTime,
@@ -60,7 +60,7 @@ export function useDateRangeSelectionBase(props: CommonDateRangeSelectionProps)
         getLocalDatetimeFromUnixTime(getDummyUnixTimeForLocalUsage(maxDate, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()))
     ]);
 
-    const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+    const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
     const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
     const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
     const is24Hour = computed<boolean>(() => isLongTime24HourFormat());
diff --git a/src/components/base/FiscalYearStartSelectionBase.ts b/src/components/base/FiscalYearStartSelectionBase.ts
index b221fd95..0dfa80ae 100644
--- a/src/components/base/FiscalYearStartSelectionBase.ts
+++ b/src/components/base/FiscalYearStartSelectionBase.ts
@@ -1,5 +1,6 @@
 import { ref, computed } from 'vue';
 
+import { type WeekDayValue } from '@/core/datetime.ts';
 import { FiscalYearStart } from '@/core/fiscalyear.ts';
 import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
 
@@ -78,7 +79,7 @@ export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSele
         return formatMonthDayToLongDay(fiscalYearStart.toMonthDashDayString());
     });
 
-    const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+    const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
     const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
 
     return {
diff --git a/src/components/common/MapView.vue b/src/components/common/MapView.vue
index be356ec6..085038dc 100644
--- a/src/components/common/MapView.vue
+++ b/src/components/common/MapView.vue
@@ -41,8 +41,8 @@ const zoomLevel = ref<number>(1);
 const mapSupported = computed<boolean>(() => !!mapInstance.value);
 const mapDependencyLoaded = computed<boolean>(() => mapInstance.value?.dependencyLoaded || false);
 
-const finalMapStyle = computed<Record<string, unknown>>(() => {
-    const styles: Record<string, unknown> = Object.assign({}, props.mapStyle);
+const finalMapStyle = computed<Record<string, string>>(() => {
+    const styles: Record<string, string> = Object.assign({}, props.mapStyle);
 
     if (props.height) {
         styles['height'] = props.height;
diff --git a/src/components/common/PinCodeInput.vue b/src/components/common/PinCodeInput.vue
index 823f8048..85c2a50f 100644
--- a/src/components/common/PinCodeInput.vue
+++ b/src/components/common/PinCodeInput.vue
@@ -2,12 +2,12 @@
     <div class="pin-codes-input" :style="`grid-template-columns: repeat(${length}, minmax(0, 1fr))`">
         <div class="pin-code-input pin-code-input-outline"
              :class="{ 'pin-code-input-focued': codes[index].focused }" :key="index"
-             v-for="(code, index) in codes">
+             v-for="(_, index) in codes">
             <input ref="pin-code-input" min="0" maxlength="1" pattern="[0-9]*"
                    :value="codes[index].value"
                    :type="codes[index].inputType"
-                   :disabled="disabled ? 'disabled' : undefined"
-                   :autofocus="autofocus && index === 0 ? 'autofocus' : undefined"
+                   :disabled="disabled ? true : undefined"
+                   :autofocus="autofocus && index === 0 ? true : undefined"
                    @focus="codes[index].focused = true"
                    @blur="codes[index].focused = false"
                    @keydown="onKeydown(index, $event)"
diff --git a/src/components/desktop/DateRangeSelectionDialog.vue b/src/components/desktop/DateRangeSelectionDialog.vue
index 4349e20d..cdf7720f 100644
--- a/src/components/desktop/DateRangeSelectionDialog.vue
+++ b/src/components/desktop/DateRangeSelectionDialog.vue
@@ -61,6 +61,7 @@ import { type CommonDateRangeSelectionProps, useDateRangeSelectionBase } from '@
 
 import { useUserStore } from '@/stores/user.ts';
 
+import { type WeekDayValue } from '@/core/datetime.ts';
 import { ThemeType } from '@/core/theme.ts';
 
 import {
@@ -89,7 +90,7 @@ const { yearRange, dateRange, dayNames, isYearFirst, is24Hour, beginDateTime, en
 const userStore = useUserStore();
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
 const showState = computed<boolean>({
     get: () => props.show || false,
     set: (value) => emit('update:show', value)
diff --git a/src/components/desktop/DateSelect.vue b/src/components/desktop/DateSelect.vue
index c34b4b82..a2a284c2 100644
--- a/src/components/desktop/DateSelect.vue
+++ b/src/components/desktop/DateSelect.vue
@@ -5,7 +5,7 @@
         :disabled="disabled"
         :clearable="modelValue ? clearable : false"
         :label="label"
-        :menu-props="{ 'content-class': 'date-select-menu' }"
+        :menu-props="{ contentClass: 'date-select-menu' }"
         v-model="dateTime"
     >
         <template #selection>
@@ -44,6 +44,7 @@ import { useI18n } from '@/locales/helpers.ts';
 
 import { useUserStore } from '@/stores/user.ts';
 
+import { type WeekDayValue } from '@/core/datetime.ts';
 import { ThemeType } from '@/core/theme.ts';
 import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
 import { getCurrentYear } from '@/lib/datetime.ts';
@@ -76,7 +77,7 @@ const dateTime = computed<string>({
 });
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
 const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
 const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
 const displayTime = computed<string>(() => {
diff --git a/src/components/desktop/DateTimeSelect.vue b/src/components/desktop/DateTimeSelect.vue
index 5f24ab2c..736068b4 100644
--- a/src/components/desktop/DateTimeSelect.vue
+++ b/src/components/desktop/DateTimeSelect.vue
@@ -4,7 +4,7 @@
         :readonly="readonly"
         :disabled="disabled"
         :label="label"
-        :menu-props="{ 'content-class': 'date-time-select-menu' }"
+        :menu-props="{ contentClass: 'date-time-select-menu' }"
         v-model="dateTime"
     >
         <template #selection>
@@ -45,6 +45,7 @@ import { useI18n } from '@/locales/helpers.ts';
 
 import { useUserStore } from '@/stores/user.ts';
 
+import { type WeekDayValue } from '@/core/datetime.ts';
 import { ThemeType } from '@/core/theme.ts';
 import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
 import {
@@ -95,7 +96,7 @@ const dateTime = computed<Date>({
 });
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
 const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
 const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
 const is24Hour = computed<boolean>(() => isLongTime24HourFormat());
diff --git a/src/components/desktop/ScheduleFrequencySelect.vue b/src/components/desktop/ScheduleFrequencySelect.vue
index a0590977..2e88b61e 100644
--- a/src/components/desktop/ScheduleFrequencySelect.vue
+++ b/src/components/desktop/ScheduleFrequencySelect.vue
@@ -4,7 +4,7 @@
         :readonly="readonly"
         :disabled="disabled"
         :label="label"
-        :menu-props="{ 'content-class': 'schedule-frequency-select-menu' }"
+        :menu-props="{ contentClass: 'schedule-frequency-select-menu' }"
         v-model="frequencyType"
         v-model:menu="menuState"
         @update:menu="onMenuStateChanged"
@@ -62,6 +62,7 @@ import { type CommonScheduleFrequencySelectionProps, useScheduleFrequencySelecti
 
 import { useUserStore } from '@/stores/user.ts';
 
+import { type WeekDayValue } from '@/core/datetime.ts';
 import { ScheduledTemplateFrequencyType } from '@/core/template.ts';
 import { sortNumbersArray } from '@/lib/common.ts';
 import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';
@@ -81,7 +82,7 @@ const dropdownMenu = useTemplateRef<HTMLElement>('dropdownMenu');
 
 const menuState = ref<boolean>(false);
 
-const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
 
 const frequencyType = computed<number>({
     get: () => props.type,
diff --git a/src/components/desktop/TwoColumnSelect.vue b/src/components/desktop/TwoColumnSelect.vue
index b49187ff..5428e97f 100644
--- a/src/components/desktop/TwoColumnSelect.vue
+++ b/src/components/desktop/TwoColumnSelect.vue
@@ -6,7 +6,7 @@
         :readonly="readonly"
         :disabled="disabled"
         :label="label"
-        :menu-props="{ 'content-class': 'two-column-select-menu' }"
+        :menu-props="{ contentClass: 'two-column-select-menu' }"
         v-model="currentSecondaryValue"
         v-model:menu="menuState"
         @update:menu="onMenuStateChanged"
@@ -41,7 +41,7 @@
                 <div class="primary-list-container">
                     <v-list :class="{ 'list-item-with-header': !!primaryHeaderField, 'list-item-with-footer': !!primaryFooterField }">
                         <v-list-item :class="{ 'primary-list-item-selected v-list-item--active text-primary': item === selectedPrimaryItem }"
-                                     :key="primaryKeyField ? (item as Record<string, unknown>)[primaryKeyField] : item"
+                                     :key="primaryKeyField ? (item as Record<string, unknown>)[primaryKeyField] as string : JSON.stringify(item)"
                                      v-for="item in filteredItems"
                                      @click="onPrimaryItemClicked(item)">
                             <template #prepend>
@@ -60,7 +60,7 @@
                     <v-list :class="{ 'list-item-with-header': !!secondaryHeaderField, 'list-item-with-footer': !!secondaryFooterField }"
                             v-if="selectedPrimaryItem && primarySubItemsField && (selectedPrimaryItem as Record<string, unknown>)[primarySubItemsField]">
                         <v-list-item :class="{ 'secondary-list-item-selected v-list-item--active text-primary': isSecondarySelected(subItem) }"
-                                     :key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
+                                     :key="secondaryKeyField ? subItem[secondaryKeyField] as string : JSON.stringify(subItem)"
                                      v-for="subItem in filteredSubItems"
                                      @click="onSecondaryItemClicked(subItem)">
                             <template #prepend>
diff --git a/src/components/mobile/DateRangeSelectionSheet.vue b/src/components/mobile/DateRangeSelectionSheet.vue
index 9d68c0f0..2323039c 100644
--- a/src/components/mobile/DateRangeSelectionSheet.vue
+++ b/src/components/mobile/DateRangeSelectionSheet.vue
@@ -63,6 +63,8 @@ import { type CommonDateRangeSelectionProps, useDateRangeSelectionBase } from '@
 import { useEnvironmentsStore } from '@/stores/environment.ts';
 import { useUserStore } from '@/stores/user.ts';
 
+import { type WeekDayValue } from '@/core/datetime.ts';
+
 import {
     getLocalDatetimeFromUnixTime,
     getDummyUnixTimeForLocalUsage,
@@ -87,7 +89,7 @@ const userStore = useUserStore();
 
 const datetimepicker = useTemplateRef<VueDatePickerType>('datetimepicker');
 const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
-const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
 
 function confirm(): void {
     try {
diff --git a/src/components/mobile/DateSelectionSheet.vue b/src/components/mobile/DateSelectionSheet.vue
index d79faca9..4be21bde 100644
--- a/src/components/mobile/DateSelectionSheet.vue
+++ b/src/components/mobile/DateSelectionSheet.vue
@@ -45,6 +45,7 @@ import { useI18n } from '@/locales/helpers.ts';
 import { useEnvironmentsStore } from '@/stores/environment.ts';
 import { useUserStore } from '@/stores/user.ts';
 
+import { type WeekDayValue } from '@/core/datetime.ts';
 import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
 import { getCurrentYear } from '@/lib/datetime.ts';
 
@@ -70,7 +71,7 @@ const yearRange = ref<number[]>([
 const dateTime = ref<string>('');
 
 const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
-const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
 const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
 const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
 
diff --git a/src/components/mobile/DateTimeSelectionSheet.vue b/src/components/mobile/DateTimeSelectionSheet.vue
index 6751c0ad..c3460e4b 100644
--- a/src/components/mobile/DateTimeSelectionSheet.vue
+++ b/src/components/mobile/DateTimeSelectionSheet.vue
@@ -37,7 +37,7 @@
             <div class="block block-outline no-margin no-padding padding-vertical-half" v-show="mode === 'time'">
                 <div id="time-picker-container" class="time-picker-container"></div>
             </div>
-            <input id="time-picker-input" style="display: none" type="text" readonly="readonly"/>
+            <input id="time-picker-input" style="display: none" type="text" :readonly="true"/>
             <div class="margin-top text-align-center">
                 <div class="display-flex padding-horizontal justify-content-space-between">
                     <div class="align-self-center">{{ displayTime }}</div>
@@ -59,6 +59,7 @@ import { useI18nUIComponents, createInlinePicker } from '@/lib/ui/mobile.ts';
 import { useEnvironmentsStore } from '@/stores/environment.ts';
 import { useUserStore } from '@/stores/user.ts';
 
+import { type WeekDayValue } from '@/core/datetime.ts';
 import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
 import {
     getCurrentUnixTime,
@@ -106,7 +107,7 @@ const timeValues = ref<string[]>(getTimeValues(dateTime.value, is24Hour, isMerid
 const datetimepicker = useTemplateRef<VueDatePickerType>('datetimepicker');
 
 const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
-const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
 const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
 const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
 const displayTime = computed<string>(() => formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())));
diff --git a/src/components/mobile/InformationSheet.vue b/src/components/mobile/InformationSheet.vue
index 0b58653a..9d06e407 100644
--- a/src/components/mobile/InformationSheet.vue
+++ b/src/components/mobile/InformationSheet.vue
@@ -15,7 +15,7 @@
                              v-if="enableCopy"
                     ></f7-link>
                 </p>
-                <textarea class="information-content full-line" readonly="readonly" :rows="rowCount" :value="information"></textarea>
+                <textarea class="information-content full-line" :readonly="true" :rows="rowCount" :value="information"></textarea>
                 <div class="margin-top text-align-center">
                     <f7-link @click="close" :text="tt('Close')"></f7-link>
                 </div>
diff --git a/src/components/mobile/ScheduleFrequencySheet.vue b/src/components/mobile/ScheduleFrequencySheet.vue
index 08e4fc8f..2e8318ce 100644
--- a/src/components/mobile/ScheduleFrequencySheet.vue
+++ b/src/components/mobile/ScheduleFrequencySheet.vue
@@ -72,6 +72,7 @@ import { type CommonScheduleFrequencySelectionProps, useScheduleFrequencySelecti
 
 import { useUserStore } from '@/stores/user.ts';
 
+import { type WeekDayValue } from '@/core/datetime.ts';
 import { ScheduledTemplateFrequencyType } from '@/core/template.ts';
 import { sortNumbersArray } from '@/lib/common.ts';
 import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
@@ -95,7 +96,7 @@ const userStore = useUserStore();
 const currentFrequencyType = ref<number>(props.type);
 const currentFrequencyValue = ref<number[]>(getFrequencyValues(props.modelValue));
 
-const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
 
 function isChecked(value: number): boolean {
     return currentFrequencyValue.value.indexOf(value) >= 0;
diff --git a/src/core/datetime.ts b/src/core/datetime.ts
index 858585ca..f655d9f8 100644
--- a/src/core/datetime.ts
+++ b/src/core/datetime.ts
@@ -141,6 +141,8 @@ export class YearMonthUnixTime implements Year0BasedMonth, UnixTimeRange {
     }
 }
 
+export type MonthValue = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
 export class Month {
     private static readonly allInstances: Month[] = [];
 
@@ -157,10 +159,10 @@ export class Month {
     public static readonly November = new Month(11, 'November');
     public static readonly December = new Month(12, 'December');
 
-    public readonly month: number; // 1-based (1 = January, 12 = December)
+    public readonly month: MonthValue; // 1-based (1 = January, 12 = December)
     public readonly name: string;
 
-    private constructor(month: number, name: string) {
+    private constructor(month: MonthValue, name: string) {
         this.month = month;
         this.name = name;
 
@@ -176,6 +178,8 @@ export class Month {
     }
 }
 
+export type WeekDayValue = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
 export class WeekDay implements TypeAndName {
     private static readonly allInstances: WeekDay[] = [];
     private static readonly allInstancesByName: Record<string, WeekDay> = {};
@@ -190,10 +194,10 @@ export class WeekDay implements TypeAndName {
 
     public static readonly DefaultFirstDay = WeekDay.Sunday;
 
-    public readonly type: number;
+    public readonly type: WeekDayValue;
     public readonly name: string;
 
-    private constructor(type: number, name: string) {
+    private constructor(type: WeekDayValue, name: string) {
         this.type = type;
         this.name = name;
 
diff --git a/src/core/setting.ts b/src/core/setting.ts
index 128bb0af..a5975f58 100644
--- a/src/core/setting.ts
+++ b/src/core/setting.ts
@@ -1,4 +1,4 @@
-import { WeekDay } from './datetime.ts';
+import { type WeekDayValue, WeekDay } from './datetime.ts';
 import { TimezoneTypeForStatistics } from './timezone.ts';
 import { CurrencySortingType } from './currency.ts';
 import {
@@ -54,7 +54,7 @@ export interface ApplicationSettings extends BaseApplicationSetting {
 
 export interface LocaleDefaultSettings {
     currency: string;
-    firstDayOfWeek: number;
+    firstDayOfWeek: WeekDayValue;
 }
 
 export interface ApplicationLockState {
diff --git a/src/lib/datetime.ts b/src/lib/datetime.ts
index 83009820..22e90a37 100644
--- a/src/lib/datetime.ts
+++ b/src/lib/datetime.ts
@@ -12,6 +12,7 @@ import {
     type TimeDifference,
     type RecentMonthDateRange,
     type LocalizedRecentMonthDateRange,
+    type WeekDayValue,
     type DateFormat,
     type TimeFormat,
     YearQuarterUnixTime,
@@ -301,7 +302,7 @@ export function getTodayLastUnixTime(): number {
     return moment.unix(getTodayFirstUnixTime()).add(1, 'days').subtract(1, 'seconds').unix();
 }
 
-export function getThisWeekFirstUnixTime(firstDayOfWeek: number): number {
+export function getThisWeekFirstUnixTime(firstDayOfWeek: WeekDayValue): number {
     const today = moment.unix(getTodayFirstUnixTime());
 
     if (!isNumber(firstDayOfWeek)) {
@@ -317,7 +318,7 @@ export function getThisWeekFirstUnixTime(firstDayOfWeek: number): number {
     return today.subtract(dayOfWeek, 'days').unix();
 }
 
-export function getThisWeekLastUnixTime(firstDayOfWeek: number): number {
+export function getThisWeekLastUnixTime(firstDayOfWeek: WeekDayValue): number {
     return moment.unix(getThisWeekFirstUnixTime(firstDayOfWeek)).add(7, 'days').subtract(1, 'seconds').unix();
 }
 
@@ -637,7 +638,7 @@ export function getShiftedDateRange(minTime: number, maxTime: number, scale: num
     };
 }
 
-export function getShiftedDateRangeAndDateType(minTime: number, maxTime: number, scale: number, firstDayOfWeek: number, fiscalYearStart: number, scene: DateRangeScene): TimeRangeAndDateType {
+export function getShiftedDateRangeAndDateType(minTime: number, maxTime: number, scale: number, firstDayOfWeek: WeekDayValue, fiscalYearStart: number, scene: DateRangeScene): TimeRangeAndDateType {
     const newDateRange = getShiftedDateRange(minTime, maxTime, scale);
     const newDateType = getDateTypeByDateRange(newDateRange.minTime, newDateRange.maxTime, firstDayOfWeek, fiscalYearStart, scene);
 
@@ -648,7 +649,7 @@ export function getShiftedDateRangeAndDateType(minTime: number, maxTime: number,
     };
 }
 
-export function getShiftedDateRangeAndDateTypeForBillingCycle(minTime: number, maxTime: number, scale: number, firstDayOfWeek: number, fiscalYearStart: number, scene: number, statementDate: number | undefined | null): TimeRangeAndDateType | null {
+export function getShiftedDateRangeAndDateTypeForBillingCycle(minTime: number, maxTime: number, scale: number, firstDayOfWeek: WeekDayValue, fiscalYearStart: number, scene: number, statementDate: number | undefined | null): TimeRangeAndDateType | null {
     if (!statementDate || !DateRange.PreviousBillingCycle.isAvailableForScene(scene) || !DateRange.CurrentBillingCycle.isAvailableForScene(scene)) {
         return null;
     }
@@ -669,7 +670,7 @@ export function getShiftedDateRangeAndDateTypeForBillingCycle(minTime: number, m
     return null;
 }
 
-export function getDateTypeByDateRange(minTime: number, maxTime: number, firstDayOfWeek: number, fiscalYearStart: number, scene: DateRangeScene): number {
+export function getDateTypeByDateRange(minTime: number, maxTime: number, firstDayOfWeek: WeekDayValue, fiscalYearStart: number, scene: DateRangeScene): number {
     const allDateRanges = DateRange.values();
     let newDateType = DateRange.Custom.type;
 
@@ -691,7 +692,7 @@ export function getDateTypeByDateRange(minTime: number, maxTime: number, firstDa
     return newDateType;
 }
 
-export function getDateTypeByBillingCycleDateRange(minTime: number, maxTime: number, firstDayOfWeek: number, fiscalYearStart: number, scene: DateRangeScene, statementDate: number | undefined | null): number | null {
+export function getDateTypeByBillingCycleDateRange(minTime: number, maxTime: number, firstDayOfWeek: WeekDayValue, fiscalYearStart: number, scene: DateRangeScene, statementDate: number | undefined | null): number | null {
     if (!statementDate || !DateRange.PreviousBillingCycle.isAvailableForScene(scene) || !DateRange.CurrentBillingCycle.isAvailableForScene(scene)) {
         return null;
     }
@@ -708,7 +709,7 @@ export function getDateTypeByBillingCycleDateRange(minTime: number, maxTime: num
     return null;
 }
 
-export function getDateRangeByDateType(dateType: number | undefined, firstDayOfWeek: number, fiscalYearStart: number): TimeRangeAndDateType | null {
+export function getDateRangeByDateType(dateType: number | undefined, firstDayOfWeek: WeekDayValue, fiscalYearStart: number): TimeRangeAndDateType | null {
     let maxTime = 0;
     let minTime = 0;
 
@@ -780,7 +781,7 @@ export function getDateRangeByDateType(dateType: number | undefined, firstDayOfW
     };
 }
 
-export function getDateRangeByBillingCycleDateType(dateType: number, firstDayOfWeek: number, fiscalYearStart: number, statementDate: number | undefined | null): TimeRangeAndDateType | null {
+export function getDateRangeByBillingCycleDateType(dateType: number, firstDayOfWeek: WeekDayValue, fiscalYearStart: number, statementDate: number | undefined | null): TimeRangeAndDateType | null {
     let maxTime = 0;
     let minTime = 0;
 
@@ -867,7 +868,7 @@ export function getRecentDateRangeIndexByDateType(allRecentMonthDateRanges: Loca
     return -1;
 }
 
-export function getRecentDateRangeIndex(allRecentMonthDateRanges: LocalizedRecentMonthDateRange[], dateType: number, minTime: number, maxTime: number, firstDayOfWeek: number, fiscalYearStart: number): number {
+export function getRecentDateRangeIndex(allRecentMonthDateRanges: LocalizedRecentMonthDateRange[], dateType: number, minTime: number, maxTime: number, firstDayOfWeek: WeekDayValue, fiscalYearStart: number): number {
     let dateRange = getDateRangeByDateType(dateType, firstDayOfWeek, fiscalYearStart);
 
     if (dateRange && dateRange.dateType === DateRange.All.type) {
@@ -897,7 +898,7 @@ export function getRecentDateRangeIndex(allRecentMonthDateRanges: LocalizedRecen
     return getRecentDateRangeIndexByDateType(allRecentMonthDateRanges, DateRange.Custom.type);
 }
 
-export function getFullMonthDateRange(minTime: number, maxTime: number, firstDayOfWeek: number, fiscalYearStart: number): TimeRangeAndDateType | null {
+export function getFullMonthDateRange(minTime: number, maxTime: number, firstDayOfWeek: WeekDayValue, fiscalYearStart: number): TimeRangeAndDateType | null {
     if (isDateRangeMatchOneMonth(minTime, maxTime)) {
         return null;
     }
diff --git a/src/locales/helpers.ts b/src/locales/helpers.ts
index 103cc561..228ffad2 100644
--- a/src/locales/helpers.ts
+++ b/src/locales/helpers.ts
@@ -13,6 +13,7 @@ import {
     type LocalizedDateRange,
     type LocalizedRecentMonthDateRange,
     type UnixTimeRange,
+    type WeekDayValue,
     Month,
     WeekDay,
     MeridiemIndicator,
@@ -746,7 +747,7 @@ export function useI18n() {
         return getAllWeekdayNames('min');
     }
 
-    function getAllWeekDays(firstDayOfWeek?: number): TypeAndDisplayName[] {
+    function getAllWeekDays(firstDayOfWeek?: WeekDayValue): TypeAndDisplayName[] {
         const ret: TypeAndDisplayName[] = [];
         const allWeekDays = WeekDay.values();
 
@@ -1293,7 +1294,7 @@ export function useI18n() {
         }
     }
 
-    function getMultiWeekdayLongNames(weekdayTypes: number[], firstDayOfWeek?: number): string {
+    function getMultiWeekdayLongNames(weekdayTypes: number[], firstDayOfWeek?: WeekDayValue): string {
         const weekdayTypesMap: Record<number, boolean> = {};
 
         if (!isNumber(firstDayOfWeek)) {
diff --git a/src/stores/user.ts b/src/stores/user.ts
index eb25ff3d..221407ca 100644
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 
 import { useSettingsStore } from './setting.ts';
 
-import { WeekDay } from '@/core/datetime.ts';
+import { type WeekDayValue, WeekDay } from '@/core/datetime.ts';
 import { FiscalYearStart } from '@/core/fiscalyear.ts';
 
 import {
@@ -62,9 +62,9 @@ export const useUserStore = defineStore('user', () => {
         return userInfo.defaultCurrency || settingsStore.localeDefaultSettings.currency;
     });
 
-    const currentUserFirstDayOfWeek = computed<number>(() => {
+    const currentUserFirstDayOfWeek = computed<WeekDayValue>(() => {
         const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
-        return isNumber(userInfo.firstDayOfWeek) && WeekDay.valueOf(userInfo.firstDayOfWeek) ? userInfo.firstDayOfWeek : settingsStore.localeDefaultSettings.firstDayOfWeek;
+        return isNumber(userInfo.firstDayOfWeek) && WeekDay.valueOf(userInfo.firstDayOfWeek) ? userInfo.firstDayOfWeek as WeekDayValue : settingsStore.localeDefaultSettings.firstDayOfWeek;
     });
 
     const currentUserFiscalYearStart = computed<number>(() => {
diff --git a/src/views/base/statistics/StatisticsTransactionPageBase.ts b/src/views/base/statistics/StatisticsTransactionPageBase.ts
index efac0e7f..32f468f1 100644
--- a/src/views/base/statistics/StatisticsTransactionPageBase.ts
+++ b/src/views/base/statistics/StatisticsTransactionPageBase.ts
@@ -7,7 +7,7 @@ import { useUserStore } from '@/stores/user.ts';
 import { type TransactionStatisticsFilter, useStatisticsStore } from '@/stores/statistics.ts';
 
 import type { TypeAndDisplayName } from '@/core/base.ts';
-import { type LocalizedDateRange, DateRangeScene, DateRange } from '@/core/datetime.ts';
+import { type LocalizedDateRange, type WeekDayValue, DateRangeScene, DateRange } from '@/core/datetime.ts';
 import { StatisticsAnalysisType, ChartDataType, ChartSortingType, ChartDateAggregationType } from '@/core/statistics.ts';
 import type { TransactionCategoricalAnalysisData, TransactionTrendsAnalysisData } from '@/models/transaction.ts';
 
@@ -36,7 +36,7 @@ export function useStatisticsTransactionPageBase() {
 
     const showAccountBalance = computed<boolean>(() => settingsStore.appSettings.showAccountBalance);
     const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
-    const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+    const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
     const fiscalYearStart = computed<number>(() => userStore.currentUserFiscalYearStart);
 
     const allDateRanges = computed<LocalizedDateRange[]>(() => {
diff --git a/src/views/base/transactions/TransactionEditPageBase.ts b/src/views/base/transactions/TransactionEditPageBase.ts
index 33516012..83c8d949 100644
--- a/src/views/base/transactions/TransactionEditPageBase.ts
+++ b/src/views/base/transactions/TransactionEditPageBase.ts
@@ -10,6 +10,7 @@ import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 import { useTransactionsStore } from '@/stores/transaction.ts';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 
+import type { WeekDayValue } from '@/core/datetime.ts';
 import type { LocalizedTimezoneInfo } from '@/core/timezone.ts';
 import { TransactionType } from '@/core/transaction.ts';
 import { TemplateType } from '@/core/template.ts';
@@ -91,7 +92,7 @@ export function useTransactionEditPageBase(type: TransactionEditPageType, initMo
     const showAccountBalance = computed<boolean>(() => settingsStore.appSettings.showAccountBalance);
     const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
     const defaultAccountId = computed<string>(() => userStore.currentUserDefaultAccountId);
-    const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+    const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
     const coordinateDisplayType = computed<number>(() => userStore.currentUserCoordinateDisplayType);
 
     const allTimezones = computed<LocalizedTimezoneInfo[]>(() => getAllTimezones(true));
diff --git a/src/views/base/transactions/TransactionListPageBase.ts b/src/views/base/transactions/TransactionListPageBase.ts
index 2a570e74..f5ee0d57 100644
--- a/src/views/base/transactions/TransactionListPageBase.ts
+++ b/src/views/base/transactions/TransactionListPageBase.ts
@@ -10,7 +10,7 @@ import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 import { type TransactionListFilter, type TransactionMonthList, useTransactionsStore } from '@/stores/transaction.ts';
 
 import type { TypeAndName } from '@/core/base.ts';
-import { type LocalizedDateRange, DateRange, DateRangeScene } from '@/core/datetime.ts';
+import { type LocalizedDateRange, type WeekDayValue, DateRange, DateRangeScene } from '@/core/datetime.ts';
 import { AccountType } from '@/core/account.ts';
 import { TransactionType } from '@/core/transaction.ts';
 
@@ -101,7 +101,7 @@ export function useTransactionListPageBase() {
     const currentCalendarDate = ref<string>('');
 
     const currentTimezoneOffsetMinutes = computed<number>(() => getTimezoneOffsetMinutes(settingsStore.appSettings.timeZone));
-    const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+    const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
     const fiscalYearStart = computed<number>(() => userStore.currentUserFiscalYearStart);
     const defaultCurrency = computed<string>(() => getUnifiedSelectedAccountsCurrencyOrDefaultCurrency(allAccountsMap.value, queryAllFilterAccountIds.value, userStore.currentUserDefaultCurrency));
     const showTotalAmountInTransactionListPage = computed<boolean>(() => settingsStore.appSettings.showTotalAmountInTransactionListPage);
diff --git a/src/views/desktop/ForgetPasswordPage.vue b/src/views/desktop/ForgetPasswordPage.vue
index f19e5be8..9b17dc29 100644
--- a/src/views/desktop/ForgetPasswordPage.vue
+++ b/src/views/desktop/ForgetPasswordPage.vue
@@ -33,7 +33,7 @@
                                         <v-text-field
                                             type="email"
                                             autocomplete="email"
-                                            autofocus="autofocus"
+                                            :autofocus="true"
                                             :disabled="requesting"
                                             :label="tt('E-mail')"
                                             :placeholder="tt('Your email address')"
diff --git a/src/views/desktop/LoginPage.vue b/src/views/desktop/LoginPage.vue
index db039764..50a33a5b 100644
--- a/src/views/desktop/LoginPage.vue
+++ b/src/views/desktop/LoginPage.vue
@@ -34,7 +34,7 @@
                                         <v-text-field
                                             type="text"
                                             autocomplete="username"
-                                            autofocus="autofocus"
+                                            :autofocus="true"
                                             :disabled="show2faInput || logining || verifying"
                                             :label="tt('Username')"
                                             :placeholder="tt('Your username or email')"
diff --git a/src/views/desktop/ResetPasswordPage.vue b/src/views/desktop/ResetPasswordPage.vue
index 9b2458ae..59a180e8 100644
--- a/src/views/desktop/ResetPasswordPage.vue
+++ b/src/views/desktop/ResetPasswordPage.vue
@@ -33,7 +33,7 @@
                                         <v-text-field
                                             type="email"
                                             autocomplete="email"
-                                            autofocus="autofocus"
+                                            :autofocus="true"
                                             :disabled="updating"
                                             :label="tt('E-mail')"
                                             :placeholder="tt('Your email address')"
diff --git a/src/views/desktop/SignupPage.vue b/src/views/desktop/SignupPage.vue
index 49eee5f2..725a899e 100644
--- a/src/views/desktop/SignupPage.vue
+++ b/src/views/desktop/SignupPage.vue
@@ -179,8 +179,8 @@
                                :disabled="currentStep === 'basicSetting' || currentStep === 'finalResult' || submitting || navigateToHomePage"
                                :prepend-icon="mdiArrowLeft"
                                @click="switchToPreviousTab">{{ tt('Previous') }}</v-btn>
-                        <v-btn :color="(currentStep === 'presetCategories' || currentStep === 'finalResult') ? 'secondary' : 'primary'"
-                               :disabled="currentStep === 'presetCategories' || currentStep === 'finalResult' || submitting || navigateToHomePage"
+                        <v-btn color="primary"
+                               :disabled="submitting || navigateToHomePage"
                                :append-icon="mdiArrowRight"
                                @click="switchToNextTab"
                                v-if="currentStep === 'basicSetting'">{{ tt('Next') }}</v-btn>
diff --git a/src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue b/src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue
index a668f6b3..379c9fec 100644
--- a/src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue
@@ -93,7 +93,7 @@
                     <p class="text-body-1" v-if="status === true">
                         {{ tt('Please copy these backup codes to safe place, the following backup codes will be displayed only once. If these codes were lost, you can regenerate them at any time.') }}
                     </p>
-                    <v-textarea class="backup-code" readonly="readonly" :rows="10" :value="currentBackupCode"/>
+                    <v-textarea class="backup-code" :readonly="true" :rows="10" :value="currentBackupCode"/>
                 </v-card-text>
             </v-card>
         </v-col>