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/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,