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>
2025-06-05 12:36:46 +10:00
parent 70eea8ff33
commit b94dc8eb83
42 changed files with 3417 additions and 105 deletions
@@ -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>