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;

src/components/desktop/FiscalYearStartSelect.vue

@@ -0,0 +1,96 @@
+<template>
+    <v-select
+        persistent-placeholder
+        :readonly="readonly"
+        :disabled="disabled"
+        :clearable="modelValue ? clearable : false"
+        :label="label"
+        :menu-props="{ contentClass: 'fiscal-year-start-select-menu' }"
+        v-model="selectedDate"
+    >
+        <template #selection>
+            <span class="text-truncate cursor-pointer">{{ displayName }}</span>
+        </template>
+
+        <template #no-data>
+            <vue-date-picker inline vertical auto-apply hide-offset-dates disable-year-select
+                             ref="datepicker"
+                             month-name-format="long"
+                             model-type="MM-dd"
+                             :clearable="false"
+                             :enable-time-picker="false"
+                             :dark="isDarkMode"
+                             :week-start="firstDayOfWeek"
+                             :day-names="dayNames"
+                             :disabled-dates="disabledDates"
+                             :start-date="selectedDate"
+                             v-model="selectedDate"
+                             >
+                <template #month="{ text }">
+                    {{ getMonthShortName(text) }}
+                </template>
+                <template #month-overlay-value="{ text }">
+                    {{ getMonthShortName(text) }}
+                </template>
+            </vue-date-picker>
+        </template>
+    </v-select>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useTheme } from 'vuetify';
+import { useUserStore } from '@/stores/user.ts';
+import { ThemeType } from '@/core/theme.ts';
+import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
+import {
+    type FiscalYearStartSelectionBaseProps,
+    type FiscalYearStartSelectionBaseEmits,
+    useFiscalYearStartSelectionBase
+} from '@/components/base/FiscalYearStartSelectionBase.ts';
+import { useI18n } from '@/locales/helpers.ts';
+
+interface FiscalYearStartSelectProps extends FiscalYearStartSelectionBaseProps {
+    disabled?: boolean;
+    readonly?: boolean;
+    clearable?: boolean;
+    label?: string;
+}
+
+const props = defineProps<FiscalYearStartSelectProps>();
+const emit = defineEmits<FiscalYearStartSelectionBaseEmits>();
+
+const { getMonthShortName } = useI18n();
+const theme = useTheme();
+
+const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
+
+// Get all base functionality
+const {
+    dayNames,
+    displayName,
+    disabledDates,
+    firstDayOfWeek,
+    getModelValueToDateString,
+    getDateStringToModelValue,
+} = useFiscalYearStartSelectionBase(props, emit);
+
+const selectedDate = computed<string>({
+    get: () => {
+        return getModelValueToDateString();
+    },
+    set: (value: string) => {
+        emit('update:modelValue', getDateStringToModelValue(value));
+    }
+});
+</script>
+
+<style>
+.fiscal-year-start-select-menu {
+    max-height: inherit !important;
+}
+
+.fiscal-year-start-select-menu .dp__menu {
+    border: 0;
+}
+</style>

src/components/desktop/TrendsChart.vue

@@ -28,7 +28,8 @@ import {
 import {
     getYearMonthFirstUnixTime,
     getYearMonthLastUnixTime,
-    getDateTypeByDateRange
+    getDateTypeByDateRange,
+    getFiscalYearFromUnixTime
 } from '@/lib/datetime.ts';
 import {
     sortStatisticsItems
@@ -69,7 +70,7 @@ const emit = defineEmits<{
 }>();
 
 const theme = useTheme();
-const { tt, formatUnixTimeToShortYear, formatYearQuarter, formatUnixTimeToShortYearMonth, formatAmountWithCurrency } = useI18n();
+const { tt, formatUnixTimeToShortYear, formatYearQuarter, formatUnixTimeToShortYearMonth, formatUnixTimeToFiscalYear, formatYearToFiscalYear, formatAmountWithCurrency } = useI18n();
 const { allDateRanges, getItemName, getColor } = useTrendsChartBase(props);
 
 const userStore = useUserStore();
@@ -121,6 +122,8 @@ const allDisplayDateRanges = computed<string[]>(() => {
 
         if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
             allDisplayDateRanges.push(formatUnixTimeToShortYear(dateRange.minUnixTime));
+        } else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type && 'year' in dateRange) {
+            allDisplayDateRanges.push(formatUnixTimeToFiscalYear(dateRange.minUnixTime));
         } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type && 'quarter' in dateRange) {
             allDisplayDateRanges.push(formatYearQuarter(dateRange.year, dateRange.quarter));
         } else { // if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
@@ -150,6 +153,12 @@ const allSeries = computed<TrendsChartDataItem[]>(() => {
 
             if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
                 dateRangeKey = dataItem.year.toString();
+            } else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type) {
+                const fiscalYear = getFiscalYearFromUnixTime(
+                    getYearMonthFirstUnixTime({ year: dataItem.year, month: dataItem.month }),
+                    props.fiscalYearStart
+                );
+                dateRangeKey = formatYearToFiscalYear(fiscalYear);
             } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type) {
                 dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month - 1) / 3) + 1}`;
             } else { // if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
@@ -168,6 +177,8 @@ const allSeries = computed<TrendsChartDataItem[]>(() => {
 
             if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
                 dateRangeKey = dateRange.year.toString();
+            } else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type && 'year' in dateRange) {
+                dateRangeKey = formatYearToFiscalYear(dateRange.year);
             } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type && 'quarter' in dateRange) {
                 dateRangeKey = `${dateRange.year}-${dateRange.quarter}`;
             } else if (props.dateAggregationType === ChartDateAggregationType.Month.type && 'month' in dateRange) {
@@ -397,7 +408,7 @@ function clickItem(e: ECElementEvent): void {
         }
     }
 
-    const dateRangeType = getDateTypeByDateRange(minUnixTime, maxUnixTime, userStore.currentUserFirstDayOfWeek, DateRangeScene.Normal);
+    const dateRangeType = getDateTypeByDateRange(minUnixTime, maxUnixTime, userStore.currentUserFirstDayOfWeek, userStore.currentUserFiscalYearStart, DateRangeScene.Normal);
 
     emit('click', {
         itemId: itemId,

src/components/mobile/FiscalYearStartSelectionSheet.vue

@@ -0,0 +1,112 @@
+<template>
+    <f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="fiscal-year-start-selection-sheet" style="height:auto"
+              :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
+        <f7-toolbar>
+            <div class="swipe-handler"></div>
+            <div class="left">
+                <f7-link :text="tt('Clear')" @click="clear"></f7-link>
+            </div>
+            <div class="right">
+                <f7-link :text="tt('Done')" @click="confirm"></f7-link>
+            </div>
+        </f7-toolbar>
+        <f7-page-content>
+            <div class="block block-outline no-margin no-padding">
+                <vue-date-picker inline auto-apply hide-offset-dates disable-year-select
+                                 month-name-format="long"
+                                 model-type="MM-dd"
+                                 six-weeks="center"
+                                 class="justify-content-center"
+                                 :enable-time-picker="false"
+                                 :clearable="true"
+                                 :dark="isDarkMode"
+                                 :week-start="firstDayOfWeek"
+                                 :day-names="dayNames"
+                                 :disabled-dates="disabledDates"
+                                 :start-date="selectedDate"
+                                 v-model="selectedDate">
+                    <template #month="{ text }">
+                        {{ getMonthShortName(text) }}
+                    </template>
+                    <template #month-overlay-value="{ text }">
+                        {{ getMonthShortName(text) }}
+                    </template>
+                </vue-date-picker>
+            </div>
+        </f7-page-content>
+    </f7-sheet>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useEnvironmentsStore } from '@/stores/environment.ts';
+
+import {
+    type FiscalYearStartSelectionBaseProps,
+    type FiscalYearStartSelectionBaseEmits,
+    useFiscalYearStartSelectionBase
+} from '@/components/base/FiscalYearStartSelectionBase.ts';
+
+interface FiscalYearStartSelectionSheetProps extends FiscalYearStartSelectionBaseProps {
+    clearable?: boolean;
+    disabled?: boolean;
+    label?: string;
+    readonly?: boolean;
+    show: boolean;
+    title?: string;
+}
+
+const props = defineProps<FiscalYearStartSelectionSheetProps>();
+
+interface FiscalYearStartSelectionSheetEmits extends FiscalYearStartSelectionBaseEmits {
+    (e: 'update:show', value: boolean): void;
+    (e: 'update:title', value: string): void;
+}
+
+const emit = defineEmits<FiscalYearStartSelectionSheetEmits>();
+
+const { tt, getMonthShortName, getCurrentFiscalYearStartFormatted } = useI18n();
+
+const environmentsStore = useEnvironmentsStore();
+
+const {
+    dayNames,
+    disabledDates,
+    firstDayOfWeek,
+    getDateStringToModelValue,
+    getModelValueToDateString,
+    selectedDisplayName,
+} = useFiscalYearStartSelectionBase(props, emit);
+
+const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
+
+const selectedDate = ref<string>(getModelValueToDateString());
+
+function onSheetOpen(): void {
+    selectedDate.value = getModelValueToDateString();
+}
+
+function onSheetClosed(): void {
+    emit('update:show', false);
+}
+
+function clear(): void {
+    selectedDate.value = getCurrentFiscalYearStartFormatted();
+}
+
+function confirm(): void {
+    emit('update:modelValue', getDateStringToModelValue(selectedDate.value));
+    emit('update:show', false);
+    emit('update:title', selectedDisplayName(selectedDate.value));
+}
+
+</script>
+
+<style>
+.fiscal-year-start-selection-sheet .dp__menu {
+    border: 0;
+}
+</style>

src/components/mobile/TrendsBarChart.vue

@@ -106,7 +106,8 @@ import {
 import {
     getYearMonthFirstUnixTime,
     getYearMonthLastUnixTime,
-    getDateTypeByDateRange
+    getDateTypeByDateRange,
+    getFiscalYearFromUnixTime
 } from '@/lib/datetime.ts';
 import {
     sortStatisticsItems
@@ -147,7 +148,7 @@ const emit = defineEmits<{
     (e: 'click', value: TrendsBarChartClickEvent): void;
 }>();
 
-const { tt, formatUnixTimeToShortYear, formatYearQuarter, formatUnixTimeToShortYearMonth, formatAmountWithCurrency } = useI18n();
+const { tt, formatUnixTimeToShortYear, formatYearQuarter, formatUnixTimeToShortYearMonth, formatUnixTimeToFiscalYear, formatYearToFiscalYear, formatAmountWithCurrency } = useI18n();
 const { allDateRanges, getItemName, getColor } = useTrendsChartBase(props);
 
 const userStore = useUserStore();
@@ -188,6 +189,12 @@ const allDisplayDataItems = computed<TrendsBarChartData>(() => {
 
             if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
                 dateRangeKey = dataItem.year.toString();
+            } else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type) {
+                const fiscalYear = getFiscalYearFromUnixTime(
+                    getYearMonthFirstUnixTime({ year: dataItem.year, month: dataItem.month }),
+                    props.fiscalYearStart
+                );
+                dateRangeKey = formatYearToFiscalYear(fiscalYear);
             } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type) {
                 dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month - 1) / 3) + 1}`;
             } else { // if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
@@ -218,6 +225,8 @@ const allDisplayDataItems = computed<TrendsBarChartData>(() => {
 
         if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
             dateRangeKey = dateRange.year.toString();
+        } else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type) {
+            dateRangeKey = formatYearToFiscalYear(dateRange.year);
         } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type && 'quarter' in dateRange) {
             dateRangeKey = `${dateRange.year}-${dateRange.quarter}`;
         } else if (props.dateAggregationType === ChartDateAggregationType.Month.type && 'month' in dateRange) {
@@ -228,6 +237,8 @@ const allDisplayDataItems = computed<TrendsBarChartData>(() => {
 
         if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
             displayDateRange = formatUnixTimeToShortYear(dateRange.minUnixTime);
+        } else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type) {
+            displayDateRange = formatUnixTimeToFiscalYear(dateRange.minUnixTime);
         } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type && 'quarter' in dateRange) {
             displayDateRange = formatYearQuarter(dateRange.year, dateRange.quarter);
         } else { // if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
@@ -321,7 +332,7 @@ function clickItem(item: TrendsBarChartDataItem): void {
         }
     }
 
-    const dateRangeType = getDateTypeByDateRange(minUnixTime, maxUnixTime, userStore.currentUserFirstDayOfWeek, DateRangeScene.Normal);
+    const dateRangeType = getDateTypeByDateRange(minUnixTime, maxUnixTime, userStore.currentUserFirstDayOfWeek, userStore.currentUserFiscalYearStart, DateRangeScene.Normal);
 
     emit('click', {
         itemId: itemId,