Feature - Add support for a fiscal year period defined in user settings.

* Add "This fiscal year", "Last fiscal year" as date range options in Transaction Details to filter transactions to those periods
* Add fiscal year ranges to Statistics & Trend Analysis
* Add "fiscal year start date" to user profile settings, allowing the user to select any date of the calendar year as the start of the fiscal year
* Add "fiscal year format" to user profile settings, allowing the user to specify how financial year date labels should appear

Implementation notes:
* The default fiscal year start is January 1 and the default fiscal year display format is "FY 2025"
* Fiscal year start date (month number & day number) are stored together in db as a uint16, high byte & low byte respectively
* February 29 is disallowed as a fiscal year start date, since it is never used as a convention in any country
* Jest is added to the project as a dev dependency, for unit tests in frontend

Signed-off-by: Sebastian Reategui <seb.reategui@gmail.com>

src/components/base/DateRangeSelectionBase.ts

@@ -81,9 +81,12 @@ export function useDateRangeSelectionBase(props: CommonDateRangeSelectionProps)
             DateRange.LastThirtyDays,
             DateRange.ThisWeek,
             DateRange.ThisMonth,
-            DateRange.ThisYear
+            DateRange.ThisYear,
+            DateRange.LastYear,
+            DateRange.ThisFiscalYear,
+            DateRange.LastFiscalYear
         ].forEach(dateRangeType => {
-            const dateRange = getDateRangeByDateType(dateRangeType.type, firstDayOfWeek.value) as TimeRangeAndDateType;
+            const dateRange = getDateRangeByDateType(dateRangeType.type, firstDayOfWeek.value, userStore.currentUserFiscalYearStart) as TimeRangeAndDateType;
 
             presetRanges.push({
                 label: tt(dateRangeType.name),

src/components/base/FiscalYearStartSelectionBase.ts

@@ -0,0 +1,88 @@
+import { computed } from 'vue';
+
+import { FiscalYearStart } from '@/core/fiscalyear.ts';
+
+import { useUserStore } from '@/stores/user.ts';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { arrangeArrayWithNewStartIndex } from '@/lib/common';
+
+export interface FiscalYearStartSelectionBaseProps {
+    modelValue?: number;
+}
+
+export interface FiscalYearStartSelectionBaseEmits {
+    (e: 'update:modelValue', value: number): void;
+}
+
+export function useFiscalYearStartSelectionBase(props: FiscalYearStartSelectionBaseProps, emit: FiscalYearStartSelectionBaseEmits) {
+    const { getAllMinWeekdayNames, formatMonthDayToLongDay, getCurrentFiscalYearStartFormatted } = useI18n();
+
+    const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
+
+    const displayName = computed<string>(() => {
+        let fy = FiscalYearStart.fromNumber(selectedFiscalYearStart.value);
+
+        if ( fy ) {
+            return formatMonthDayToLongDay(fy.toMonthDashDayString())
+        }
+
+        return formatMonthDayToLongDay(FiscalYearStart.strictFromNumber(userStore.currentUserFiscalYearStart).toMonthDashDayString());
+
+    });
+
+    const disabledDates = (date: Date) => {
+        // Disable February 29 (leap day)
+        return date.getMonth() === 1 && date.getDate() === 29; 
+    };
+
+    const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+
+    const selectedFiscalYearStart = computed<number>(() => {
+        return props.modelValue !== undefined ? props.modelValue : userStore.currentUserFiscalYearStart;
+    });
+
+    const userStore = useUserStore();
+
+    function selectedDisplayName(dateString: string): string {
+        let fy = FiscalYearStart.fromMonthDashDayString(dateString);
+        if ( fy ) {
+            return formatMonthDayToLongDay(fy.toMonthDashDayString());
+        }
+        return displayName.value;
+    }
+
+    function getModelValueToDateString(): string {
+        const input = selectedFiscalYearStart.value;
+        
+        let fy = FiscalYearStart.fromNumber(input);
+
+        if ( fy ) {
+            return fy.toMonthDashDayString();
+        }
+
+        return getCurrentFiscalYearStartFormatted();
+    }
+
+    function getDateStringToModelValue(input: string): number {
+        const fyString = FiscalYearStart.fromMonthDashDayString(input);
+        if (fyString) {
+            return fyString.value;
+        }
+        return userStore.currentUserFiscalYearStart;
+    }
+    
+    return {
+        // functions
+        getDateStringToModelValue,
+        getModelValueToDateString,
+        selectedDisplayName,
+        // computed states
+        dayNames,
+        displayName,
+        disabledDates,
+        firstDayOfWeek,
+        selectedFiscalYearStart,
+    }
+}

src/components/base/TrendsChartBase.ts

@@ -9,6 +9,7 @@ import type {
     YearQuarterUnixTime,
     YearMonthUnixTime
 } from '@/core/datetime.ts';
+import type { FiscalYearUnixTime } from '@/core/fiscalyear.ts';
 import type { ColorValue } from '@/core/color.ts';
 import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
 import type { YearMonthItems } from '@/models/transaction.ts';
@@ -19,6 +20,7 @@ export interface CommonTrendsChartProps<T extends YearMonth> {
     items: YearMonthItems<T>[];
     startYearMonth: string;
     endYearMonth: string;
+    fiscalYearStart: number;
     sortingType: number;
     dateAggregationType: number;
     idField?: string;
@@ -40,7 +42,7 @@ export interface TrendsBarChartClickEvent {
 export function useTrendsChartBase<T extends YearMonth>(props: CommonTrendsChartProps<T>) {
     const { tt } = useI18n();
 
-    const allDateRanges = computed<YearUnixTime[] | YearQuarterUnixTime[] | YearMonthUnixTime[]>(() => getAllDateRanges(props.items, props.startYearMonth, props.endYearMonth, props.dateAggregationType));
+    const allDateRanges = computed<YearUnixTime[] | YearQuarterUnixTime[] | YearMonthUnixTime[] | FiscalYearUnixTime[]>(() => getAllDateRanges(props.items, props.startYearMonth, props.endYearMonth, props.fiscalYearStart, props.dateAggregationType));
 
     function getItemName(name: string): string {
         return props.translateName ? tt(name) : name;