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