Merge pull request 'dev/nicolas/staging-prep' (#50) from dev/nicolas/staging-prep into main

Reviewed-on: Targo/targo_frontend#50

src/i18n/en-ca/index.ts

@@ -239,6 +239,7 @@ export default {
             close: "close",
             download: "download",
             open: "open",
+            day: "day",
         },
         misc: {
             or: "or",
@@ -278,6 +279,7 @@ export default {
         total_expenses: "total expenses: ",
         vacation_available: "vacation time available: ",
         sick_available: "sick time available: ",
+        banked_available: "available banked hours: ",
         current_shifts: "shifts worked",
         apply_preset: "auto-fill",
         apply_preset_day: "Apply schedule to day",

src/i18n/fr-ca/index.ts

@@ -239,6 +239,7 @@ export default {
             close: "fermer",
             download: "télécharger",
             open: "ouvrir",
+            day: "jour",
         },
         misc: {
             or: "ou",
@@ -278,6 +279,7 @@ export default {
         total_expenses: "dépenses totales: ",
         vacation_available: "vacances disponibles: ",
         sick_available: "congés maladie disponible: ",
+        banked_available: "heures en banque disponibles: ",
         current_shifts: "quarts entrées",
         apply_preset: "auto-remplir",
         apply_preset_day: "Appliquer horaire pour la journée",

src/modules/employee-list/components/employee-list-table-item.vue

@@ -4,7 +4,7 @@
 >
     import { useQuasar } from 'quasar';
     import type { EmployeeProfile } from 'src/modules/employee-list/models/employee-profile.models';
-    import { ref } from 'vue';
+    import { computed, ref } from 'vue';
 
     const q = useQuasar();
     const is_mouseover = ref(false);
@@ -15,17 +15,23 @@
         isManagement?: boolean;
     }>()
 
-    defineEmits<{
+    const is_showing_highlight = computed(() => isManagement && is_mouseover.value)
+
+    const emit = defineEmits<{
         onProfileClick: [email: string]
     }>();
 
     const getItemStyle = (): string => {
         const active_style = row.last_work_day === null ? '' : 'opacity: 0.6;';
         const dark_style = q.dark.isActive ? 'border: 2px solid var(--q-accent);' : '';
-        const hover_style = isManagement ? (is_mouseover.value ? `transform: scale(1.1); z-index: 2;` : 'transform: scale(1) skew(0)') : '';
 
-        return `${active_style} ${dark_style} ${hover_style}`;
+        return `${active_style} ${dark_style}`;
     }
+
+    const onProfileClick = (email: string) => {
+        is_mouseover.value = false;
+        emit('onProfileClick', email)
+    };
 </script>
 
 <template>
@@ -34,14 +40,17 @@
         :style="`animation-delay: ${index / 25}s;`"
     >
         <div
-            class="column col no-wrap bg-dark rounded-15 shadow-12"
+            class="column col no-wrap bg-dark rounded-15 shadow-12 relative-position"
             :class="isManagement ? 'cursor-pointer item-mouse-hover' : ''"
             style="height: 275px;"
             :style="getItemStyle()"
-            @click="$emit('onProfileClick', row.email)"
+            @click="onProfileClick(row.email)"
             @mouseenter="is_mouseover = true"
             @mouseleave="is_mouseover = false"
         >
+            <!-- highlight component for mouseover -->
+            <div v-if="is_showing_highlight" class="absolute-full bg-accent rounded-15 z-top" style="opacity: 0.3;"></div>
+
             <div class="col-auto column flex-center q-pt-md">
                 <q-avatar
                     :color="row.last_work_day === null ? 'accent' : 'negative'"

src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue

@@ -4,11 +4,12 @@
 >
     import { ref, onMounted } from 'vue';
     import { useI18n } from 'vue-i18n';
-    import { colors, useQuasar } from 'quasar';
+    import { colors, date, useQuasar } from 'quasar';
     import { Bar } from 'vue-chartjs';
     import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale, type ChartDataset } from 'chart.js';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import type { TotalHours } from 'src/modules/timesheets/models/timesheet.models';
+import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
 
     interface ChartConfigHoursWorked {
         key: keyof Pick<TotalHours, 'regular' | 'evening' | 'emergency' | 'overtime'>;
@@ -78,6 +79,17 @@
             :options="({
                 indexAxis: $q.screen.lt.md ? 'y' : 'x',
                 plugins: {
+                    tooltip: {
+                        callbacks: {
+                            title: function (context) {
+                                return $d(date.extractDate(`2025-${context[0]!.label}`, 'YYYY-MM-DD'), {month: 'long', day: 'numeric'});
+                            },
+                            label: function (context) {
+                                return getHoursMinutesStringFromHoursFloat(context.parsed.y);
+                            }
+                        },
+                    },
+
                     legend: {
                         labels: {
                             boxWidth: 15,

src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue

@@ -10,6 +10,7 @@
     import { Doughnut } from 'vue-chartjs';
     import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale, type ChartDataset } from 'chart.js';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
 
     const $q = useQuasar();
     const { t } = useI18n();
@@ -63,6 +64,14 @@
             }"
             :options="({
                 plugins: {
+                    tooltip: {
+                        callbacks: {
+                            label: function (context) {
+                                context.formattedValue = getHoursMinutesStringFromHoursFloat(context.parsed);
+                            }
+                        },
+                    },
+
                     legend: {
                         labels: {
                             boxWidth: 15,

src/modules/timesheet-approval/components/overview-list.vue

@@ -118,14 +118,14 @@
             :filter-method="filterEmployeeRows"
             :rows-per-page-options="[0]"
             class="bg-transparent"
-            :class="ui_store.user_preferences.is_timesheet_approval_grid ? '' : 'sticky-header-table no-shadow'"
+            :class="ui_store.user_preferences.is_timesheet_approval_grid ? '' : 'sticky-header-table sticky-first-column-table sticky-last-column-table no-shadow q-pb-sm'"
             card-container-class="justify-center"
-            table-class="q-pa-none q-mx-md rounded-10 bg-dark shadow-15 hide-scrollbar"
+            table-class="q-pa-none q-mx-md rounded-10 bg-dark shadow-15"
             :no-data-label="$t('shared.error.no_data_found')"
             :no-results-label="$t('shared.error.no_search_results')"
             :loading-label="$t('shared.label.loading')"
             table-header-style="min-width: 80xp; max-width: 80px;"
-            :style="overview_rows.length > 0 ? `max-height: ${maxHeight - (ui_store.user_preferences.is_timesheet_approval_grid ? 0 : 20)}px;` : ''"
+            :style="overview_rows.length > 0 ? `max-height: ${maxHeight}px;` : ''"
             :table-style="{ tableLayout: 'fixed' }"
             @row-click="(_evt, row: TimesheetApprovalOverview) => onClickedDetails(row)"
         >
@@ -373,4 +373,46 @@
 
 td
     min-width: 80px
+
+
+.sticky-last-column-table    
+    thead tr:last-child th:last-child
+        background-color: $accent
+        position: sticky
+        z-index: 3
+
+    thead tr:last-child th
+        top: 0px
+
+    td:last-child
+        background-color: var(--q-dark)
+
+    th:last-child,
+    td:last-child
+        position: sticky
+        right: 0
+        z-index: 1
+        border-left: 3px solid $accent
+
+.sticky-first-column-table
+    thead tr:first-child th:first-child
+        background-color: $accent
+        position: sticky
+        z-index: 3
+
+    thead tr:first-child th
+        top: 0px
+
+    td:first-child
+        background-color: var(--q-dark)
+
+    th:first-child,
+    td:first-child
+        position: sticky
+        left: 0
+        z-index: 1
+        border-right: 3px solid $accent
+    
+    :deep(tbody)
+        overflow-x: scroll
 </style>

src/modules/timesheets/components/shift-list-date-widget.vue

@@ -14,10 +14,9 @@
         approved?: boolean;
     }>();
 
-    const is_mobile = computed(() => q.screen.lt.md);
     const date_font_size = computed(() => dense ? '1.5em' : '2.5em');
     const weekday_font_size = computed(() => dense ? '0.55em;' : '0.7em;');
-    const date_box_size = computed(() => dense || is_mobile.value ? 'width: 40px; height: 75px;' : 'width: 75px; height: 75px;');
+    const date_box_size = computed(() => dense || q.platform.is.mobile ? 'width: 40px; height: 75px;' : 'width: 75px; height: 75px;');
 
     const display_date = extractDate(displayDate, 'YYYY-MM-DD');
 </script>

src/modules/timesheets/components/shift-list-day-row.vue

@@ -17,10 +17,11 @@
     const select_ref = ref<QSelect | null>(null);
     const error_message = ref('');
 
-    const { errorMessage = undefined, isTimesheetApproved = false } = defineProps<{
+    const { errorMessage = undefined, isTimesheetApproved = false, holiday = false } = defineProps<{
         dense?: boolean;
         isTimesheetApproved?: boolean;
         errorMessage?: string | undefined;
+        holiday?: boolean | undefined;
     }>();
 
     const emit = defineEmits<{
@@ -89,7 +90,7 @@
                 class="col rounded-5 q-mx-xs bg-dark"
                 :class="!shift.is_approved && !isTimesheetApproved ? '' : 'inset-shadow'"
                 popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
-                :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
+                :style="shift.is_approved ? (holiday ? 'background-color: #7b1fa2 !important' : 'background-color: #0a7d32 !important;') : ''"
                 popup-content-style="border: 2px solid var(--q-accent)"
                 @blur="onBlurShiftTypeSelect"
                 @update:model-value="option => shift.type = option.value"
@@ -102,7 +103,7 @@
                     >
                         <q-icon
                             :name="scope.opt.icon"
-                            :color="scope.opt.icon_color"
+                            :color="shift.is_approved ? 'white' : scope.opt.icon_color"
                             size="sm"
                             class="col-auto"
                             :class="shift.is_approved ? 'q-mx-xs' : 'q-mr-xs'"
@@ -143,7 +144,7 @@
                         dense
                         keep-color
                         size="3em"
-                        color="accent"
+                        :color="holiday? 'purple-5' : 'accent'"
                         icon="las la-building"
                         checked-icon="las la-laptop"
                     >
@@ -191,12 +192,12 @@
                 hide-bottom-space
                 :error="shift.has_error"
                 :error-message="errorMessage || error_message !== '' ? $t(errorMessage ?? error_message) : ''"
-                :label-color="!shift.is_approved ? 'accent' : 'white'"
+                :label-color="!shift.is_approved ? (holiday? 'purple-5' : 'accent') : 'white'"
                 class="col rounded-5 bg-dark q-mx-xs"
                 :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (!shift.is_approved && !isTimesheetApproved ? '' : 'cursor-not-allowed inset-shadow')"
                 :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
                 input-style="font-size: 1.2em;"
-                :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
+                :style="shift.is_approved ? (holiday ? 'background-color: #7b1fa2 !important' : 'background-color: #0a7d32 !important;') : ''"
                 @blur="onTimeFieldBlur(shift.start_time)"
             >
                 <template #label>
@@ -222,12 +223,12 @@
                 hide-bottom-space
                 :error="shift.has_error"
                 :error-message="errorMessage || error_message !== '' ? $t(errorMessage ?? error_message) : ''"
-                :label-color="!shift.is_approved ? 'accent' : 'white'"
+                :label-color="!shift.is_approved ? (holiday? 'purple-5' : 'accent') : 'white'"
                 :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
                 input-style="font-size: 1.2em;"
                 class="col rounded-5 bg-dark q-mx-xs"
                 :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (shift.is_approved ? 'cursor-not-allowed q-px-xs transparent inset-shadow' : (isTimesheetApproved ? 'inset-shadow' : ''))"
-                :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
+                :style="shift.is_approved ? (holiday ? 'background-color: #7b1fa2 !important' : 'background-color: #0a7d32 !important;') : ''"
                 @blur="onTimeFieldBlur(shift.end_time)"
             >
                 <template #label>
@@ -249,9 +250,9 @@
                     v-if="!ui_store.is_mobile_mode"
                     push
                     dense
-                    :color="shift.is_approved ? 'white' : 'accent'"
+                    :color="shift.is_approved ? 'white' : (holiday? 'purple-5' : 'accent')"
                     :icon="shift.comment ? 'chat' : 'chat_bubble_outline'"
-                    :text-color="shift.is_approved ? 'accent' : 'white'"
+                    :text-color="shift.is_approved ? (holiday? 'purple-5' : 'accent') : 'white'"
                     class="col"
                     :class="ui_store.is_mobile_mode ? 'q-mt-xs bg-dark' : ''"
                 >

src/modules/timesheets/components/shift-list-day.vue

@@ -18,12 +18,13 @@
     const timesheet_store = useTimesheetStore();
     const shift_error_message = ref<string | undefined>();
 
-    const { day, dense = false, approved = false } = defineProps<{
+    const { day, dense = false, approved = false, holiday = false } = defineProps<{
         timesheetId: number;
         weekDayIndex: number;
         day: TimesheetDay;
         dense?: boolean;
         approved?: boolean;
+        holiday?: boolean;
     }>();
 
     const preset_mouseover = ref(false);
@@ -102,6 +103,7 @@
             <ShiftListDayRow
                 v-else
                 v-model:shift="day.shifts[shift_index]!"
+                :holiday="holiday"
                 :is-timesheet-approved="approved"
                 :error-message="shift_error_message"
                 @request-delete="deleteCurrentShift(shift)"

src/modules/timesheets/components/shift-list-weekly-overview.vue

@@ -3,13 +3,15 @@
     lang="ts"
 >
     import { useAuthStore } from 'src/stores/auth-store';
-import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
+    import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
 
-    const { mode = 'totals', totalHours = 0, vacationHours = 0, sickHours = 0, totalExpenses = 0 } = defineProps<{
+    const { mode = 'totals', timesheetMode = 'normal', totalHours = 0, vacationHours = 0, sickHours = 0, bankedHours = 0, totalExpenses = 0 } = defineProps<{
         mode: 'total-hours' | 'off-hours';
+        timesheetMode: 'approval' | 'normal';
         totalHours?: number;
         vacationHours?: number;
         sickHours?: number;
+        bankedHours?: number;
         totalExpenses?: number;
     }>();
 
@@ -53,7 +55,12 @@ import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-uti
                     {{ $t('timesheet.vacation_available') }}
                 </span>
 
-                <span class="col text-right">{{ Math.floor(vacationHours / 8) }}</span>
+                <div class="col row">
+                    <span class="col text-right">{{ getHoursMinutesStringFromHoursFloat(vacationHours) }}</span>
+                    <span class="col-auto text-right q-pl-xs">{{ ' (' + Math.floor(vacationHours / 8) }}</span>
+                    <span class="col-auto q-pl-xs">{{ $t('shared.label.day') }}{{ (Math.floor(vacationHours / 8) !== 1 ?
+                        's' : '') + ')' }}</span>
+                </div>
             </div>
 
             <div
@@ -64,7 +71,18 @@ import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-uti
                     {{ $t('timesheet.sick_available') }}
                 </span>
 
-                <span class="col text-right">{{ Math.floor(sickHours / 8) }}</span>
+                <span class="col text-right">{{ getHoursMinutesStringFromHoursFloat(sickHours) }}</span>
+            </div>
+
+            <div
+                v-if="timesheetMode === 'normal'"
+                class="col row full-width"
+            >
+                <span class="col-auto text-uppercase text-caption text-bold text-accent">
+                    {{ $t('timesheet.banked_available') }}
+                </span>
+
+                <span class="col text-right">{{ getHoursMinutesStringFromHoursFloat(bankedHours) }}</span>
             </div>
         </div>
     </div>

src/modules/timesheets/components/shift-list.vue

@@ -6,17 +6,19 @@
     import ShiftListDateWidget from 'src/modules/timesheets/components/shift-list-date-widget.vue';
 
     import { date, useQuasar } from 'quasar';
-    import { ref, computed, watch } from 'vue';
+    import { ref, computed, watch, onMounted } from 'vue';
     import { useUiStore } from 'src/stores/ui-store';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { Shift } from 'src/modules/timesheets/models/shift.models';
     import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
     import type { TimesheetDay } from 'src/modules/timesheets/models/timesheet.models';
+    import { useI18n } from 'vue-i18n';
 
 
     const CURRENT_DATE_STRING = new Date().toISOString().slice(0, 10);
 
     const { extractDate } = date;
+    const { locale } = useI18n();
     const q = useQuasar();
 
     const ui_store = useUiStore();
@@ -58,11 +60,26 @@
         return iso_date_string === CURRENT_DATE_STRING ? 'currentDayComponent' : '';
     };
 
+    const getHolidayName = (date: string) => {
+        const holiday = timesheet_store.federal_holidays.find(holiday => holiday.date === date);
+        if (!holiday) return;
+
+        if (locale.value === 'fr-FR')
+            return holiday.nameFr;
+
+        else if (locale.value === 'en-CA')
+            return holiday.nameEn;
+    };
+
+    onMounted(async () => {
+        await timesheet_store.getCurrentFederalHolidays();
+    });
+
     watch(currentDayComponentWatcher, () => {
         if (currentDayComponent.value && q.platform.is.mobile) {
             emit('onCurrentDayComponentFound', currentDayComponent.value[0])
         }
-    })
+    });
 </script>
 
 <template>
@@ -105,9 +122,18 @@
                     v-for="day, day_index in timesheet.days"
                     :key="day.date"
                     :ref="getMobileDayRef(day.date)"
-                    class="col-auto row q-pa-sm full-width"
+                    class="col-auto row q-pa-sm full-width relative-position"
                     :style="`animation-delay: ${day_index / 15}s;`"
                 >
+                    <!-- optional label indicating which holiday if today is a holiday -->
+                    <span
+                        v-if="timesheet_store.federal_holidays.some(holiday => holiday.date === day.date)"
+                        class="absolute-top-left text-uppercase text-weight-bolder text-purple-5"
+                        style="transform: translate(25px, -7px);"
+                    >
+                        {{ getHolidayName(day.date) }}
+                    </span>
+
                     <!-- mobile version in portrait mode -->
                     <div
                         v-if="$q.platform.is.mobile && ($q.screen.width < $q.screen.height)"
@@ -173,10 +199,11 @@
                     <div
                         v-else
                         class="col row full-width rounded-10 ellipsis shadow-10"
+                        :style="timesheet_store.federal_holidays.some(holiday => holiday.date === day.date) ? 'border: 2px solid #ab47bc' : ''"
                     >
                         <div
                             class="col row"
-                            :class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-accent' : 'bg-dark'"
+                            :class="(getDayApproval(day) || timesheet.is_approved) ? (timesheet_store.federal_holidays.some(holiday => holiday.date === day.date) ? 'bg-purple-5' : 'bg-accent') : 'bg-dark'"
                         >
                             <!-- Date block -->
                             <ShiftListDateWidget
@@ -189,6 +216,7 @@
                                 :timesheet-id="timesheet.timesheet_id"
                                 :week-day-index="day_index"
                                 :day="day"
+                                :holiday="timesheet_store.federal_holidays.some(holiday => holiday.date === day.date)"
                                 :approved="getDayApproval(day) || timesheet.is_approved"
                                 class="col"
                                 @delete-unsaved-shift="deleteUnsavedShift(timesheet_index, day_index)"
@@ -203,7 +231,7 @@
                                 color="white"
                                 size="xl"
                                 class="full-height"
-                                :class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-accent' : ''"
+                                :class="(getDayApproval(day) || timesheet.is_approved) ? (timesheet_store.federal_holidays.some(holiday => holiday.date === day.date) ? 'bg-purple-5' : 'bg-accent') : ''"
                             />
 
                             <q-btn
@@ -212,7 +240,7 @@
                                 square
                                 icon="more_time"
                                 size="lg"
-                                color="accent"
+                                :color="timesheet_store.federal_holidays.some(holiday => holiday.date === day.date) ? 'purple-5' : 'accent'"
                                 text-color="white"
                                 class="full-height"
                                 :class="$q.platform.is.mobile ? 'q-px-xs' : ''"

src/modules/timesheets/components/timesheet-wrapper.vue

@@ -76,6 +76,7 @@
             >
                 <ShiftListWeeklyOverview
                     mode="total-hours"
+                    :timesheet-mode="mode"
                     :total-hours="total_hours"
                     :total-expenses="total_expenses"
                 />
@@ -96,7 +97,7 @@
                 v-if="!$q.platform.is.mobile"
                 class="col-xs-6 col-md-4 col-xl-3 q-pa-md"
             >
-                <ShiftListWeeklyOverview mode="off-hours" />
+                <ShiftListWeeklyOverview mode="off-hours" :timesheet-mode="mode" />
             </div>
         </div>
 

src/modules/timesheets/models/federal-holidays.models.ts

@@ -0,0 +1,31 @@
+export interface FederalHoliday {
+    id: number;
+    date: string;
+    nameEn: string;
+    nameFr: string;
+    federal: number;
+    observedDate: string;
+    provinces: FederalHolidayProvince[];
+}
+
+export interface FederalHolidayProvince {
+    id: number;
+    nameEn: string;
+    nameFr: string;
+    sourceLink: string;
+    sourceEn: string;
+}
+
+export const TARGO_HOLIDAY_NAMES_FR: string[] = [
+    "Jour de l’An",
+    "Vendredi saint",
+    "Lundi de Pâques",
+    "Journée nationale des patriotes",
+    "Saint-Jean-Baptiste / Fête nationale du Québec",
+    "Fête du Canada",
+    "Fête du travail",
+    "Journée nationale de la vérité et de la réconciliation",
+    "Action de grâce",
+    "Noël",
+    "Lendemain de Noël",
+]

src/modules/timesheets/services/timesheet-service.ts

@@ -3,8 +3,14 @@ import type { PayPeriod } from "src/modules/shared/models/pay-period.models";
 import type { TimesheetResponse } from "src/modules/timesheets/models/timesheet.models";
 import type { TimesheetApprovalOverview } from "src/modules/timesheet-approval/models/timesheet-overview.models";
 import type { BackendResponse } from "src/modules/shared/models/backend-response.models";
+import type { FederalHoliday } from "src/modules/timesheets/models/federal-holidays.models";
 
 export const timesheetService = {
+    getAllFederalHolidays: async (year?: number): Promise<FederalHoliday[]> => {
+        const response = await api.get<{ holidays: FederalHoliday[] }>(`https://canada-holidays.ca/api/v1/holidays${year ? ('?year=' + year) : ''}`, { withCredentials: false });
+        return response.data.holidays;
+    },
+
     getPayPeriodByDate: async (date_string: string): Promise<PayPeriod> => {
         const response = await api.get<{ success: boolean, data: PayPeriod, error?: string }>(`pay-periods/date/${date_string}`);
         return response.data.data;

src/stores/timesheet-store.ts

@@ -7,6 +7,7 @@ import type { PayPeriodOverviewResponse, TimesheetApprovalOverview } from "src/m
 import type { PayPeriod } from 'src/modules/shared/models/pay-period.models';
 import type { Timesheet } from 'src/modules/timesheets/models/timesheet.models';
 import type { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
+import { type FederalHoliday, TARGO_HOLIDAY_NAMES_FR } from 'src/modules/timesheets/models/federal-holidays.models';
 
 
 export const useTimesheetStore = defineStore('timesheet', () => {
@@ -26,6 +27,20 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     const current_pay_period_overview = ref<TimesheetApprovalOverview>();
     const pay_period_report = ref();
 
+    const federal_holidays = ref<FederalHoliday[]>([]);
+
+    const getCurrentFederalHolidays = async(): Promise<boolean> => {
+        const all_federal_holidays = await timesheetService.getAllFederalHolidays();
+        const all_federal_holidays_2025 = await timesheetService.getAllFederalHolidays(2025);
+        if (!all_federal_holidays || !all_federal_holidays_2025) return false;
+
+        federal_holidays.value = all_federal_holidays.filter(holiday => TARGO_HOLIDAY_NAMES_FR.includes(holiday.nameFr));
+        const targo_fed_holidays_2025 = all_federal_holidays_2025.filter(holiday => TARGO_HOLIDAY_NAMES_FR.includes(holiday.nameFr));
+        targo_fed_holidays_2025.forEach(holiday => federal_holidays.value.push(holiday));
+        
+        return true;
+    };
+
     const getNextOrPreviousPayPeriod = (direction: number) => {
         if (!pay_period.value) return;
 
@@ -178,6 +193,8 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         timesheets,
         all_current_shifts,
         initial_timesheets,
+        federal_holidays,
+        getCurrentFederalHolidays,
         getNextOrPreviousPayPeriod,
         getPayPeriodByDateOrYearAndNumber,
         getTimesheetOverviews,