From 803c9f977fdcaf5797a2000b3c60113f4f3e8109 Mon Sep 17 00:00:00 2001
From: Matthieu Haineault <matthieuh@targointernet.com>
Date: Wed, 3 Dec 2025 14:40:05 -0500
Subject: [PATCH 1/5] feat(csv): started to implements the dialog for the csv
 download feature

---
 src/i18n/en-ca/index.ts                       |  1 +
 src/i18n/fr-ca/index.ts                       |  1 +
 .../options-dialog-csv-download.vue           | 38 +++++++++++++++
 .../services/timesheet-approval-service.ts    |  2 +-
 src/pages/timesheet-approval-page.vue         | 46 +++++++++----------
 src/stores/timesheet-store.ts                 |  8 ++--
 6 files changed, 67 insertions(+), 29 deletions(-)
 create mode 100644 src/modules/timesheet-approval/components/options-dialog-csv-download.vue

diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index e9e1b3d..5e4d1d1 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -123,6 +123,7 @@ export default {
             update: "update",
             modify: "modify",
             close: "close",
+            download: "download",
         },
         misc: {
             or: "or",
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 48e3201..173d4b2 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -124,6 +124,7 @@ export default {
             update: "mettre à jour",
             modify: "modifier",
             close: "fermer",
+            download: "téléchargement",
         },
         misc: {
             or: "ou",
diff --git a/src/modules/timesheet-approval/components/options-dialog-csv-download.vue b/src/modules/timesheet-approval/components/options-dialog-csv-download.vue
new file mode 100644
index 0000000..d1e41a9
--- /dev/null
+++ b/src/modules/timesheet-approval/components/options-dialog-csv-download.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useTimesheetStore } from 'src/stores/timesheet-store';
+
+const timesheet_store = useTimesheetStore();
+
+</script>
+
+<template>
+    <q-dialog
+        v-model="timesheet_store.is_csv_dialog_open"
+        persistent
+        transition-show="jump-down"
+        transition-hide="jump-down"
+    >
+        <q-card
+            class="q-pa-none rounded-10 shadow-10"
+            :class="$q.screen.lt.md ? ' bg-primary' : 'bg-secondary'"
+            style=" min-width: 70vw;"
+            :style="$q.dark.isActive ? 'border: solid 2px var(--q-accent);' : ''"
+        >
+            <q-inner-loading :showing="timesheet_store.is_loading">
+                <q-spinner size="32px" />
+            </q-inner-loading>
+
+            <q-card-section class="q-pa-none">
+                <q-separator
+                    v-if="$q.screen.lt.md"
+                    spaced
+                    color="accent"
+                    size="2px"
+                    class="q-mx-md"
+                />
+            </q-card-section>
+        </q-card>
+
+    </q-dialog>
+
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/services/timesheet-approval-service.ts b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
index 46b13e0..7689075 100644
--- a/src/modules/timesheet-approval/services/timesheet-approval-service.ts
+++ b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
@@ -9,7 +9,7 @@ export const timesheetApprovalService = {
     },
 
     getPayPeriodReportByYearAndPeriodNumber: async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
-        const response = await api.get(`csv/${year}/${period_number}`, { params: { report_filters, }});
+        const response = await api.get(`exports/csv/${year}/${period_number}`, { params: { report_filters, }});
         return response.data;
     },
 };
\ No newline at end of file
diff --git a/src/pages/timesheet-approval-page.vue b/src/pages/timesheet-approval-page.vue
index 562a618..d9201cb 100644
--- a/src/pages/timesheet-approval-page.vue
+++ b/src/pages/timesheet-approval-page.vue
@@ -1,24 +1,21 @@
-<script
-    setup
-    lang="ts"
->
-    /* eslint-disable */
-    import { onMounted, ref } from 'vue';
-    import { date } from 'quasar';
-    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
-    import OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
-    import DetailsDialog from 'src/modules/timesheet-approval/components/details-dialog.vue';
-    import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
-    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
+<script setup lang="ts">
+/* eslint-disable */
+import { onMounted, ref } from 'vue';
+import { date } from 'quasar';
+import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
+import { useTimesheetStore } from 'src/stores/timesheet-store';
+import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
+import OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
+import DetailsDialog from 'src/modules/timesheet-approval/components/details-dialog.vue';
+import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
+import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
 
-    const timesheet_approval_api = useTimesheetApprovalApi();
-    const timesheet_store = useTimesheetStore();
+const timesheet_approval_api = useTimesheetApprovalApi();
+const timesheet_store = useTimesheetStore();
 
-    onMounted(async () => {
-        await timesheet_approval_api.getTimesheetOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
-    });
+onMounted(async () => {
+    await timesheet_approval_api.getTimesheetOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
+});
 </script>
 
 <template>
@@ -66,13 +63,16 @@
                 ]"
             />
 
-            <div class="col-auto row no-wrap flex-center" :class="$q.screen.lt.md  ? 'q-mb-md' : ''">
-                <q-btn-dropdown
+            <div
+                class="col-auto row no-wrap flex-center"
+                :class="$q.screen.lt.md ? 'q-mb-md' : ''"
+            >
+                <q-btn
                     push
                     rounded
-                    icon="filter_alt"
+                    icon="download"
                     color="accent"
-                    :label="$q.screen.lt.md ? '' : $t('shared.label.filter')"
+                    :label="$q.screen.lt.md ? '' : $t('shared.label.download')"
                     class="col-auto q-mr-sm"
                 />
 
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index 3eae467..22b9f56 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -17,6 +17,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     const initial_timesheets = ref<Timesheet[]>([]);
     
     const pay_period_overviews = ref<TimesheetOverview[]>([]);
+    const is_csv_dialog_open = ref(false);
     
     const is_details_dialog_open = ref(false);
     const selected_employee_name = ref<string>();
@@ -95,11 +96,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
 
     const getPayPeriodReportByYearAndPeriodNumber = async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
         try {
-            const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(
-                year,
-                period_number,
-                report_filters
-            );
+            const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(year, period_number, report_filters);
             pay_period_report.value = response;
             return true;
         } catch (error) {
@@ -112,6 +109,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
 
     return {
         is_loading,
+        is_csv_dialog_open,
         is_approval_grid_mode,
         is_details_dialog_open,
         search_filter,

From 0c6fd3289ef7c0387d0e72b45f6739a791682025 Mon Sep 17 00:00:00 2001
From: Matthieu Haineault <matthieuh@targointernet.com>
Date: Tue, 9 Dec 2025 11:48:44 -0500
Subject: [PATCH 2/5] feat(csv): added a dialog to personnalize the csv to
 download

---
 .../options-dialog-csv-download.vue           |  38 ----
 .../components/overview-list.vue              |  65 ++++---
 .../components/overview-report.vue            | 165 +++++++++---------
 .../composables/use-timesheet-approval-api.ts |  11 +-
 .../timesheet-approval-csv-report.models.ts   |  37 ++--
 src/pages/timesheet-approval-page.vue         |   5 +-
 src/stores/timesheet-store.ts                 |  29 ++-
 7 files changed, 156 insertions(+), 194 deletions(-)
 delete mode 100644 src/modules/timesheet-approval/components/options-dialog-csv-download.vue

diff --git a/src/modules/timesheet-approval/components/options-dialog-csv-download.vue b/src/modules/timesheet-approval/components/options-dialog-csv-download.vue
deleted file mode 100644
index d1e41a9..0000000
--- a/src/modules/timesheet-approval/components/options-dialog-csv-download.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { useTimesheetStore } from 'src/stores/timesheet-store';
-
-const timesheet_store = useTimesheetStore();
-
-</script>
-
-<template>
-    <q-dialog
-        v-model="timesheet_store.is_csv_dialog_open"
-        persistent
-        transition-show="jump-down"
-        transition-hide="jump-down"
-    >
-        <q-card
-            class="q-pa-none rounded-10 shadow-10"
-            :class="$q.screen.lt.md ? ' bg-primary' : 'bg-secondary'"
-            style=" min-width: 70vw;"
-            :style="$q.dark.isActive ? 'border: solid 2px var(--q-accent);' : ''"
-        >
-            <q-inner-loading :showing="timesheet_store.is_loading">
-                <q-spinner size="32px" />
-            </q-inner-loading>
-
-            <q-card-section class="q-pa-none">
-                <q-separator
-                    v-if="$q.screen.lt.md"
-                    spaced
-                    color="accent"
-                    size="2px"
-                    class="q-mx-md"
-                />
-            </q-card-section>
-        </q-card>
-
-    </q-dialog>
-
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/overview-list.vue b/src/modules/timesheet-approval/components/overview-list.vue
index 46153d8..14671d9 100644
--- a/src/modules/timesheet-approval/components/overview-list.vue
+++ b/src/modules/timesheet-approval/components/overview-list.vue
@@ -1,42 +1,37 @@
-<script
-    setup
-    lang="ts"
->
-    /* eslint-disable */
-    import { computed, ref } from 'vue';
-    import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
-    import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
-    import { useExpensesStore } from 'src/stores/expense-store';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
-    import { overview_column_names, pay_period_overview_columns, type TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
+<script setup lang="ts">
+/* eslint-disable */
+import { computed, ref } from 'vue';
+import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
+import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
+import { useTimesheetStore } from 'src/stores/timesheet-store';
+import { overview_column_names, pay_period_overview_columns, type TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
 
-    const expenses_store = useExpensesStore();
-    const timesheet_store = useTimesheetStore();
-    const timesheet_approval_api = useTimesheetApprovalApi();
+const timesheet_store = useTimesheetStore();
 
-    const visible_columns = ref<string[]>([
-        overview_column_names.REGULAR,
-        overview_column_names.EVENING,
-        overview_column_names.EMERGENCY,
-        overview_column_names.SICK,
-        overview_column_names.VACATION,
-        overview_column_names.HOLIDAY,
-        overview_column_names.OVERTIME,
-        overview_column_names.IS_APPROVED,
-    ]);
+const visible_columns = ref<string[]>([
+    overview_column_names.REGULAR,
+    overview_column_names.EVENING,
+    overview_column_names.EMERGENCY,
+    overview_column_names.SICK,
+    overview_column_names.VACATION,
+    overview_column_names.HOLIDAY,
+    overview_column_names.OVERTIME,
+    overview_column_names.IS_APPROVED,
+]);
+
+const overview_rows = computed(() => timesheet_store.pay_period_overviews[0]?.regular_hours === -1 ?
+    [] :
+    timesheet_store.pay_period_overviews
+)
+
+const onClickedDetails = async (row: TimesheetOverview) => {
+    timesheet_store.current_pay_period_overview = row;
+    await timesheet_store.getTimesheetsByOptionalEmployeeEmail(row.email);
+
+    timesheet_store.is_details_dialog_open = true;
+};
 
-    const overview_rows = computed(() => timesheet_store.pay_period_overviews[0]?.regular_hours === -1 ?
-        [] :
-        timesheet_store.pay_period_overviews
-    )
 
-    const onClickedDetails = async (row: TimesheetOverview) => {
-        timesheet_store.current_pay_period_overview = row;
-        await timesheet_store.getTimesheetsByOptionalEmployeeEmail(row.email);
-        
-        timesheet_store.is_details_dialog_open = true;
-    };
 </script>
 
 <template>
diff --git a/src/modules/timesheet-approval/components/overview-report.vue b/src/modules/timesheet-approval/components/overview-report.vue
index 417f2b4..2813411 100644
--- a/src/modules/timesheet-approval/components/overview-report.vue
+++ b/src/modules/timesheet-approval/components/overview-report.vue
@@ -1,93 +1,92 @@
-<script
-    setup
-    lang="ts"
->
-    import { default_timesheet_approval_cvs_report_filters, type TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
-    import { ref, computed } from 'vue';
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useTimesheetStore } from 'src/stores/timesheet-store';
+import { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
 
-    const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(default_timesheet_approval_cvs_report_filters);
+const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(new TimesheetApprovalCSVReportFilters);
 
-    const company_options = [
-        { label: 'Targo', value: report_filter_options.value.companies.targo },
-        { label: 'Solucom', value: report_filter_options.value.companies.solucom },
-    ];
+const selected_report_filters = ref<(keyof TimesheetApprovalCSVReportFilters)[]>(
+    Object.entries(report_filter_options.value).filter(([_key, value]) => value).map(([key]) => key as keyof TimesheetApprovalCSVReportFilters)
+);
 
-    const type_options = [
-        { label: 'timesheet_approvals.print_report.shifts', value: report_filter_options.value.types.shifts },
-        { label: 'timesheet_approvals.print_report.expenses', value: report_filter_options.value.types.expenses },
-        { label: 'shared.shift_type.holiday', value: report_filter_options.value.types.holiday },
-        { label: 'shared.shift_type.vacation', value: report_filter_options.value.types.vacation },
-    ];
+interface ReportOptions {
+    label: string;
+    value: keyof TimesheetApprovalCSVReportFilters;
+};
 
-    const is_download_button_disabled = computed(() => {
-        return company_options.map(option => option.value).filter(value => value === true).length > 0 ||
-            type_options.map(option => option.value).filter(value => value === true).length > 0;
-    });
+const timesheet_store = useTimesheetStore();
+
+const company_options: ReportOptions[] = [
+    { label: 'Targo', value: 'targo' },
+    { label: 'Solucom', value: 'solucom' },
+];
+
+const type_options: ReportOptions[] = [
+    { label: 'timesheet_approvals.print_report.shifts', value: 'shifts' },
+    { label: 'timesheet_approvals.print_report.expenses', value: 'expenses' },
+    { label: 'shared.shift_type.holiday', value: 'holiday' },
+    { label: 'shared.shift_type.vacation', value: 'vacation' },
+];
+
+const is_download_button_enable = computed(() =>
+    company_options.map(option => option.value).some(option => selected_report_filters.value.includes(option)) &&
+    type_options.map(option => option.value).some(option => selected_report_filters.value.includes(option))
+);
+
+const onClickedDownload = async () => {
+    await timesheet_store.getPayPeriodReport(report_filter_options.value);
+}
 </script>
 
 <template>
-    <q-btn-group
-        rounded
-        push
-    >
-        <q-btn
-            rounded
-            push
-            color="primary"
-            icon="print"
-            :disable="is_download_button_disabled"
-        />
-
-        <q-btn-dropdown
-            rounded
-            push
-            color="white"
-            text-color="primary"
-            icon="checklist"
-        >
-            <q-list class="row">
-                <q-item class="col">
-                    <q-item-label class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">
-                        {{ $t('timesheet_approvals.print_report.company') }}
-                    </q-item-label>
-
-                    <q-item-section
-                        row
-                        no-wrap
-                    >
-                        <q-checkbox
-                            v-for="option, index in company_options"
-                            :key="index"
-                            v-model="option.value"
-                            :val="option.label"
-                            :label="option.label"
-                        />
-                    </q-item-section>
-                </q-item>
-
-                <q-separator
-                    spaced
-                    vertical
-                    color="primary"
+    <q-dialog v-model="timesheet_store.is_report_dialog_open">
+        <div class="bg-dark column full-width">
+            <div class="row col-auto q-py-md q-px-sm">
+                <q-checkbox
+                    v-for="company, index in company_options"
+                    :key="index"
+                    v-model="selected_report_filters"
+                    left-label
+                    :label="$t(company.label)"
+                    :val="company.value"
+                    class="col-auto q-px-md q-mx-xs shadow-1 rounded-25"
+                    dense
+                    :class="selected_report_filters.includes(company.value) ? 'bg-accent text-white' : ''"
+                    color="white"
+                    checked-icon="download"
+                    unchecked-icon="highlight_off"
                 />
+            </div>
 
-                <q-item class="col">
-                    <q-item-section
-                        row
-                        no-wrap
-                    >
-                        <p class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">
-                            {{ $t('timesheet_approvals.print_report.type') }}</p>
-                        <q-checkbox
-                            v-for="option, index in type_options"
-                            :key="index"
-                            v-model="option.value"
-                            :val="option.label"
-                            :label="option.label"
-                        />
-                    </q-item-section>
-                </q-item>
-            </q-list>
-        </q-btn-dropdown>
-    </q-btn-group>
+            <div class="row col-auto q-py-md q-px-sm">
+                <q-checkbox
+                    v-for="type, index in type_options"
+                    :key="index"
+                    v-model="selected_report_filters"
+                    left-label
+                    color="white"
+                    class="col-auto q-px-md q-mx-xs shadow-1 rounded-25"
+                    dense
+                    :class="selected_report_filters.includes(type.value) ? 'bg-accent text-white' : ''"
+                    :label="$t(type.label)"
+                    :val="type.value"
+                    checked-icon="download"
+                    unchecked-icon="highlight_off"
+                />
+            </div>
+            <div>
+                <q-btn
+                    :disable="!is_download_button_enable"
+                    dense
+                    push
+                    size="md"
+                    icon="download"
+                    class=""
+                    :color="is_download_button_enable ? 'accent' : 'grey-5'"
+                    :label="$t('shared.label.download')"
+                    @click="onClickedDownload()"
+                />
+            </div>
+        </div>
+    </q-dialog>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
index 39bb247..ffb74a9 100644
--- a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
+++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
@@ -26,21 +26,16 @@ export const useTimesheetApprovalApi = () => {
         timesheet_store.is_loading = false;
     };
 
-    const getTimesheetApprovalCSVReport = async (report_filter_company: boolean[], report_filter_type: boolean[], year?: number, period_number?: number) => {
+    const getTimesheetApprovalCSVReport = async (report_filter_company: boolean[], report_filter_type: boolean[]) => {
         if (timesheet_store.pay_period === undefined) return;
 
         const [targo, solucom] = report_filter_company;
         const [shifts, expenses, holiday, vacation] = report_filter_type;
         const options = {
-            types: { shifts, expenses, holiday, vacation },
-            companies: { targo, solucom },
+             shifts, expenses, holiday, vacation, targo, solucom 
         } as TimesheetApprovalCSVReportFilters;
 
-        await timesheet_store.getPayPeriodReportByYearAndPeriodNumber(
-            year ?? timesheet_store.pay_period.pay_year,
-            period_number ?? timesheet_store.pay_period.pay_period_no,
-            options
-        );
+        await timesheet_store.getPayPeriodReport(options);
     };
 
     return {
diff --git a/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts b/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
index 3633813..572e1a6 100644
--- a/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
+++ b/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
@@ -1,25 +1,18 @@
-export interface TimesheetApprovalCSVReportFilters {
-    types: {
-        shifts: boolean;
-        expenses: boolean;
-        holiday: boolean;
-        vacation: boolean;
-    };
-    companies: {
-        targo: boolean;
-        solucom: boolean;
+export class TimesheetApprovalCSVReportFilters {
+    shifts: boolean;
+    expenses: boolean;
+    holiday: boolean;
+    vacation: boolean;
+    targo: boolean;
+    solucom: boolean;
+
+    constructor() {
+        this.shifts = true;
+        this.expenses = true;
+        this.holiday = false;
+        this.vacation = false;
+        this.targo = true;
+        this.solucom = true;
     };
 }
 
-export const default_timesheet_approval_cvs_report_filters: TimesheetApprovalCSVReportFilters = {
-    types: {
-        shifts: true,
-        expenses: true,
-        holiday: true,
-        vacation: true,
-    },
-    companies: {
-        targo: true,
-        solucom: true,
-    },
-};
\ No newline at end of file
diff --git a/src/pages/timesheet-approval-page.vue b/src/pages/timesheet-approval-page.vue
index d9201cb..f0d3834 100644
--- a/src/pages/timesheet-approval-page.vue
+++ b/src/pages/timesheet-approval-page.vue
@@ -9,6 +9,7 @@ import OverviewList from 'src/modules/timesheet-approval/components/overview-lis
 import DetailsDialog from 'src/modules/timesheet-approval/components/details-dialog.vue';
 import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
 import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
+import OverviewReport from 'src/modules/timesheet-approval/components/overview-report.vue';
 
 const timesheet_approval_api = useTimesheetApprovalApi();
 const timesheet_store = useTimesheetStore();
@@ -74,12 +75,12 @@ onMounted(async () => {
                     color="accent"
                     :label="$q.screen.lt.md ? '' : $t('shared.label.download')"
                     class="col-auto q-mr-sm"
+                    @click="timesheet_store.is_report_dialog_open = true"
                 />
-
                 <QTableFilters v-model:search="timesheet_store.search_filter" />
             </div>
         </div>
-
+        <OverviewReport />
         <OverviewList class="col" />
     </q-page>
 </template>
\ No newline at end of file
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index 22b9f56..e749d4f 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
 import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/timesheet-approval-service';
 import { timesheetService } from 'src/modules/timesheets/services/timesheet-service';
-import type { TimesheetOverview } from "src/modules/timesheet-approval/models/timesheet-overview.models";
+import type { PayPeriodOverviewResponse, TimesheetOverview } from "src/modules/timesheet-approval/models/timesheet-overview.models";
 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';
@@ -17,7 +17,8 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     const initial_timesheets = ref<Timesheet[]>([]);
     
     const pay_period_overviews = ref<TimesheetOverview[]>([]);
-    const is_csv_dialog_open = ref(false);
+    const pay_period_infos = ref<PayPeriodOverviewResponse>();
+    const is_report_dialog_open = ref(false);
     
     const is_details_dialog_open = ref(false);
     const selected_employee_name = ref<string>();
@@ -94,9 +95,10 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         }
     };
 
-    const getPayPeriodReportByYearAndPeriodNumber = async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
+    const getPayPeriodReport = async ( report_filters?: TimesheetApprovalCSVReportFilters) => {
         try {
-            const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(year, period_number, report_filters);
+            if(!pay_period.value) return false;
+            const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(pay_period.value.pay_year, pay_period.value.pay_period_no, report_filters);
             pay_period_report.value = response;
             return true;
         } catch (error) {
@@ -107,15 +109,28 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         return false;
     };
 
+    const openReportDialog = () => {
+        is_report_dialog_open.value = true;
+        is_loading.value = true;
+        
+
+        is_loading.value = false;
+    };
+
+    const closeReportDialog = () => {
+        is_report_dialog_open.value = false;
+    };
+
     return {
         is_loading,
-        is_csv_dialog_open,
+        is_report_dialog_open,
         is_approval_grid_mode,
         is_details_dialog_open,
         search_filter,
         pay_period,
         pay_period_overviews,
         current_pay_period_overview,
+        pay_period_infos,
         selected_employee_name,
         timesheets,
         all_current_shifts,
@@ -123,6 +138,8 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         getPayPeriodByDateOrYearAndNumber,
         getTimesheetOverviews,
         getTimesheetsByOptionalEmployeeEmail,
-        getPayPeriodReportByYearAndPeriodNumber,
+        getPayPeriodReport,
+        openReportDialog,
+        closeReportDialog,
     };
 });
\ No newline at end of file

From a859ad8107b65554f5a8c10ac6aea019c649ef5e Mon Sep 17 00:00:00 2001
From: Matthieu Haineault <matthieuh@targointernet.com>
Date: Thu, 11 Dec 2025 08:43:30 -0500
Subject: [PATCH 3/5] feat(csv): work on the dialog for the report extraction

---
 src/i18n/en-ca/index.ts                       |   4 +-
 src/i18n/fr-ca/index.ts                       |   4 +-
 .../components/overview-report.vue            | 100 +++++++++++-------
 3 files changed, 68 insertions(+), 40 deletions(-)

diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index 1ab8980..29fdd3a 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -259,10 +259,12 @@ export default {
             expenses_title: "expenses accrued",
         },
         print_report: {
-            company: "company",
+            title: "Download options",
+            company: "companies",
             type: "type",
             shifts: "shifts",
             expenses: "expenses",
+            options: "options",
         },
         tooltip: {
             button_detailed_view: "detailed view",
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 180ed18..6c9483d 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -260,10 +260,12 @@ export default {
             expenses_title: "dépenses encourues"
         },
         print_report: {
-            company: "compagnie",
+            title: "options de téléchargement",
+            company: "compagnies",
             type: "types de données",
             shifts: "quarts de travail",
             expenses: "dépenses",
+            options: "options",
         },
         tooltip: {
             button_detailed_view: "vue détaillée",
diff --git a/src/modules/timesheet-approval/components/overview-report.vue b/src/modules/timesheet-approval/components/overview-report.vue
index 2813411..1fd78bc 100644
--- a/src/modules/timesheet-approval/components/overview-report.vue
+++ b/src/modules/timesheet-approval/components/overview-report.vue
@@ -3,6 +3,7 @@ import { computed, ref } from 'vue';
 import { useTimesheetStore } from 'src/stores/timesheet-store';
 import { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
 
+const timesheet_store = useTimesheetStore();
 const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(new TimesheetApprovalCSVReportFilters);
 
 const selected_report_filters = ref<(keyof TimesheetApprovalCSVReportFilters)[]>(
@@ -14,8 +15,6 @@ interface ReportOptions {
     value: keyof TimesheetApprovalCSVReportFilters;
 };
 
-const timesheet_store = useTimesheetStore();
-
 const company_options: ReportOptions[] = [
     { label: 'Targo', value: 'targo' },
     { label: 'Solucom', value: 'solucom' },
@@ -40,48 +39,73 @@ const onClickedDownload = async () => {
 
 <template>
     <q-dialog v-model="timesheet_store.is_report_dialog_open">
-        <div class="bg-dark column full-width">
-            <div class="row col-auto q-py-md q-px-sm">
-                <q-checkbox
-                    v-for="company, index in company_options"
-                    :key="index"
-                    v-model="selected_report_filters"
-                    left-label
-                    :label="$t(company.label)"
-                    :val="company.value"
-                    class="col-auto q-px-md q-mx-xs shadow-1 rounded-25"
-                    dense
-                    :class="selected_report_filters.includes(company.value) ? 'bg-accent text-white' : ''"
-                    color="white"
-                    checked-icon="download"
-                    unchecked-icon="highlight_off"
-                />
+        <div class="bg-secondary full-width shadow-24 rounded-10 column">
+            <div class="shadow-1 bg-primary text-accent text-weight-bold text-center text-uppercase">
+                <span> {{ $t('timesheet_approvals.print_report.title') }}</span>
             </div>
+            <div class="row q-py-md q-px-lg">
+                <div class="col-auto full-width shadow-1 row bg-dark q-py-xs q-px-lg rounded-10">
+                    <span class="col q-px-sm q-pt-xs text-weight-bolder text-accent text-uppercase col-3">
+                        {{ $t('timesheet_approvals.print_report.company') }}
+                    </span>
+                    <div class="row bordered-primary col-auto full-width">
+                        <div
+                            v-for="company, index in company_options"
+                            :key="index"
+                            class="q-pa-xs col-6"
+                        >
+                            <q-checkbox
+                                v-model="selected_report_filters"
+                                left-label
+                                color="white"
+                                class="q-px-md shadow-4 rounded-25 full-width"
+                                dense
+                                :class="selected_report_filters.includes(company.value) ? 'bg-accent text-white' : 'bg-dark'"
+                                :label="$t(company.label)"
+                                :val="company.value"
+                                checked-icon="download"
+                                unchecked-icon="highlight_off"
+                            />
 
-            <div class="row col-auto q-py-md q-px-sm">
-                <q-checkbox
-                    v-for="type, index in type_options"
-                    :key="index"
-                    v-model="selected_report_filters"
-                    left-label
-                    color="white"
-                    class="col-auto q-px-md q-mx-xs shadow-1 rounded-25"
-                    dense
-                    :class="selected_report_filters.includes(type.value) ? 'bg-accent text-white' : ''"
-                    :label="$t(type.label)"
-                    :val="type.value"
-                    checked-icon="download"
-                    unchecked-icon="highlight_off"
-                />
+                        </div>
+
+                    </div>
+                </div>
+                <div class="row q-py-md">
+                    <div class="col-auto full-width shadow-1 row bg-dark q-px-lg rounded-10 q-pb-sm">
+                        <span class="col q-px-sm q-pt-xs text-weight-bolder text-accent text-uppercase col-3">
+                            {{ $t('timesheet_approvals.print_report.options') }}
+                        </span>
+                        <div class=" row bordered-primary col-auto full-width">
+                            <div
+                                v-for="type, index in type_options"
+                                :key="index"
+                                class="q-pa-xs col-6"
+                            >
+                                <q-checkbox
+                                    v-model="selected_report_filters"
+                                    left-label
+                                    color="white"
+                                    class="q-px-md shadow-4 rounded-25 full-width"
+                                    dense
+                                    :class="selected_report_filters.includes(type.value) ? 'bg-accent text-white' : 'bg-dark'"
+                                    :label="$t(type.label)"
+                                    :val="type.value"
+                                    checked-icon="download"
+                                    unchecked-icon="highlight_off"
+                                />
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div>
+            <div class="column">
                 <q-btn
                     :disable="!is_download_button_enable"
-                    dense
-                    push
+                    square
                     size="md"
                     icon="download"
-                    class=""
                     :color="is_download_button_enable ? 'accent' : 'grey-5'"
                     :label="$t('shared.label.download')"
                     @click="onClickedDownload()"
@@ -89,4 +113,4 @@ const onClickedDownload = async () => {
             </div>
         </div>
     </q-dialog>
-</template>
\ No newline at end of file
+</template>

From c3681e50c72b61fa1c99b6002cf8bd5daef6fbdd Mon Sep 17 00:00:00 2001
From: Matthieu Haineault <matthieuh@targointernet.com>
Date: Thu, 11 Dec 2025 10:47:50 -0500
Subject: [PATCH 4/5] fix(employees_list): added schedule_preset_id to return
 object

---
 src/pages/timesheet-approval-page.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/timesheet-approval-page.vue b/src/pages/timesheet-approval-page.vue
index f0d3834..2dc7a08 100644
--- a/src/pages/timesheet-approval-page.vue
+++ b/src/pages/timesheet-approval-page.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /* eslint-disable */
-import { onMounted, ref } from 'vue';
+import { onMounted } from 'vue';
 import { date } from 'quasar';
 import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
 import { useTimesheetStore } from 'src/stores/timesheet-store';
@@ -80,7 +80,7 @@ onMounted(async () => {
                 <QTableFilters v-model:search="timesheet_store.search_filter" />
             </div>
         </div>
-        <OverviewReport />
+        <OverviewReport/>
         <OverviewList class="col" />
     </q-page>
 </template>
\ No newline at end of file

From 6120bd5e23f10134704153bdb5298848fecccdda Mon Sep 17 00:00:00 2001
From: Matthieu Haineault <matthieuh@targointernet.com>
Date: Fri, 12 Dec 2025 13:25:33 -0500
Subject: [PATCH 5/5] feat(csv): finished setup the download csv options

---
 .../components/overview-report.vue            | 38 ++++++++++++++++---
 .../services/timesheet-approval-service.ts    |  8 ++--
 src/stores/timesheet-store.ts                 | 12 +++---
 src/utils/boolean-utils.ts                    | 25 ++++++++++++
 4 files changed, 68 insertions(+), 15 deletions(-)
 create mode 100644 src/utils/boolean-utils.ts

diff --git a/src/modules/timesheet-approval/components/overview-report.vue b/src/modules/timesheet-approval/components/overview-report.vue
index 1fd78bc..9ea7a91 100644
--- a/src/modules/timesheet-approval/components/overview-report.vue
+++ b/src/modules/timesheet-approval/components/overview-report.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useTimesheetStore } from 'src/stores/timesheet-store';
 import { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
 
@@ -33,8 +33,39 @@ const is_download_button_enable = computed(() =>
 );
 
 const onClickedDownload = async () => {
-    await timesheet_store.getPayPeriodReport(report_filter_options.value);
+    try {
+        const data = await timesheet_store.getPayPeriodReport(report_filter_options.value);
+
+        const companies = Object.entries(report_filter_options.value)
+            .filter(([key, value]) => value && (key === 'targo' || key === 'solucom')).map(([key]) => key).join('-');
+
+        const types = Object.entries(report_filter_options.value)
+            .filter(([key, value]) => value && ['shifts', 'expenses', 'holiday', 'vacation'].includes(key)).map(([key]) => key).join('-');
+
+        const file_name = `Desjardins_${companies}_${types}_${new Date().toISOString().split('T')[0]}.csv`;
+
+        const blob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+
+        link.href = url;
+        link.setAttribute('download', file_name);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+        console.log('CSV preview:', data);
+    } catch (error) {
+        console.error(`An error occured during the CSV download: `, error)
+    }
 }
+
+watch(selected_report_filters, (new_values) => {
+    Object.keys(report_filter_options.value).forEach(key => {
+        const typed_key = key as keyof TimesheetApprovalCSVReportFilters;
+        report_filter_options.value[typed_key] = new_values.includes(key as keyof TimesheetApprovalCSVReportFilters);
+    });
+});
 </script>
 
 <template>
@@ -66,9 +97,7 @@ const onClickedDownload = async () => {
                                 checked-icon="download"
                                 unchecked-icon="highlight_off"
                             />
-
                         </div>
-
                     </div>
                 </div>
                 <div class="row q-py-md">
@@ -94,7 +123,6 @@ const onClickedDownload = async () => {
                                     checked-icon="download"
                                     unchecked-icon="highlight_off"
                                 />
-
                             </div>
                         </div>
                     </div>
diff --git a/src/modules/timesheet-approval/services/timesheet-approval-service.ts b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
index 7689075..a72c561 100644
--- a/src/modules/timesheet-approval/services/timesheet-approval-service.ts
+++ b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
@@ -4,12 +4,12 @@ import type { PayPeriodOverviewResponse } from "src/modules/timesheet-approval/m
 
 export const timesheetApprovalService = {
     getPayPeriodOverviews: async (year: number, period_number: number): Promise<PayPeriodOverviewResponse> => {
-        const response = await api.get<{success: boolean, data: PayPeriodOverviewResponse, error? : string}>(`pay-periods/overview/${year}/${period_number}`);
+        const response = await api.get<{ success: boolean, data: PayPeriodOverviewResponse, error?: string }>(`pay-periods/overview/${year}/${period_number}`);
         return response.data.data;
     },
 
-    getPayPeriodReportByYearAndPeriodNumber: async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
-        const response = await api.get(`exports/csv/${year}/${period_number}`, { params: { report_filters, }});
-        return response.data;
+    getPayPeriodReportByYearAndPeriodNumber: async (year: number, period_number: number, filters?: TimesheetApprovalCSVReportFilters) => {
+        const response = await api.get(`exports/csv/${year}/${period_number}`, { params: filters, responseType: 'arraybuffer' });
+        return response;
     },
 };
\ No newline at end of file
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index e749d4f..d3b5d3d 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -15,11 +15,11 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     const timesheets = ref<Timesheet[]>([]);
     const all_current_shifts = computed(() => timesheets.value.flatMap(week => week.days.flatMap(day => day.shifts)) ?? []);
     const initial_timesheets = ref<Timesheet[]>([]);
-    
+
     const pay_period_overviews = ref<TimesheetOverview[]>([]);
     const pay_period_infos = ref<PayPeriodOverviewResponse>();
     const is_report_dialog_open = ref(false);
-    
+
     const is_details_dialog_open = ref(false);
     const selected_employee_name = ref<string>();
     const current_pay_period_overview = ref<TimesheetOverview>();
@@ -95,12 +95,12 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         }
     };
 
-    const getPayPeriodReport = async ( report_filters?: TimesheetApprovalCSVReportFilters) => {
+    const getPayPeriodReport = async (report_filters: TimesheetApprovalCSVReportFilters) => {
         try {
-            if(!pay_period.value) return false;
+            if (!pay_period.value) return false;
             const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(pay_period.value.pay_year, pay_period.value.pay_period_no, report_filters);
             pay_period_report.value = response;
-            return true;
+            return response.data;
         } catch (error) {
             console.error('There was an error retrieving the report CSV: ', error);
             // TODO: More in-depth error-handling here
@@ -112,7 +112,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     const openReportDialog = () => {
         is_report_dialog_open.value = true;
         is_loading.value = true;
-        
+
 
         is_loading.value = false;
     };
diff --git a/src/utils/boolean-utils.ts b/src/utils/boolean-utils.ts
new file mode 100644
index 0000000..8335e2c
--- /dev/null
+++ b/src/utils/boolean-utils.ts
@@ -0,0 +1,25 @@
+// export const createDefaultBooleanValue = <T extends PropertyKey>(keys_list: PropertyKey[]): Record<T, boolean> =>
+//     keys_list.reduce((acc, mod) => {
+//         acc[mod] = false;
+//         return acc;
+//     }, {} as Record<T, boolean>);
+
+
+// export const toBooleanFromKeys = <T extends PropertyKey>(keys_list: PropertyKey[], arr?: readonly PropertyKey[] | null): Record<T, boolean> => {
+//     const result = createDefaultBooleanValue(keys_list);
+//     if (!arr || !Array.isArray(arr)) return result;
+//     for (const item of arr) {
+//         if (typeof item !== 'string') continue;
+//         const trimmed = item.trim();
+//         if ((keys_list as readonly PropertyKey[]).includes(trimmed)) {
+//             result[trimmed as T] = true;
+//         }
+//     }
+//     return result;
+// }
+
+export const toKeysFromBoolean = <T extends PropertyKey>(boolean_values: Record<T, boolean>): T[] => {
+    const values_array = Object.entries(boolean_values);
+    const values = values_array.filter(([_key, value]) => value === true);
+    return values.map(([key]) => key as T);
+} 
\ No newline at end of file