diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index 61cd1d9..4c11085 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -137,6 +137,7 @@ export default {
             update: "update",
             modify: "modify",
             close: "close",
+            download: "download",
         },
         misc: {
             or: "or",
@@ -263,10 +264,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 402646e..2ac860d 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -138,6 +138,7 @@ export default {
             update: "mettre à jour",
             modify: "modifier",
             close: "fermer",
+            download: "téléchargement",
         },
         misc: {
             or: "ou",
@@ -264,10 +265,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-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..9ea7a91 100644
--- a/src/modules/timesheet-approval/components/overview-report.vue
+++ b/src/modules/timesheet-approval/components/overview-report.vue
@@ -1,93 +1,144 @@
-<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, watch } 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 timesheet_store = useTimesheetStore();
+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 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 () => {
+    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>
-    <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">
+    <q-dialog v-model="timesheet_store.is_report_dialog_open">
+        <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') }}
-                    </q-item-label>
-
-                    <q-item-section
-                        row
-                        no-wrap
-                    >
-                        <q-checkbox
-                            v-for="option, index in company_options"
+                    </span>
+                    <div class="row bordered-primary col-auto full-width">
+                        <div
+                            v-for="company, 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"
+                            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>
+                    </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 class="column">
+                <q-btn
+                    :disable="!is_download_button_enable"
+                    square
+                    size="md"
+                    icon="download"
+                    :color="is_download_button_enable ? 'accent' : 'grey-5'"
+                    :label="$t('shared.label.download')"
+                    @click="onClickedDownload()"
                 />
-
-                <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>
-</template>
\ No newline at end of file
+            </div>
+        </div>
+    </q-dialog>
+</template>
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/modules/timesheet-approval/services/timesheet-approval-service.ts b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
index 46b13e0..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(`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/pages/timesheet-approval-page.vue b/src/pages/timesheet-approval-page.vue
index 562a618..2dc7a08 100644
--- a/src/pages/timesheet-approval-page.vue
+++ b/src/pages/timesheet-approval-page.vue
@@ -1,24 +1,22 @@
-<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 } 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';
+import OverviewReport from 'src/modules/timesheet-approval/components/overview-report.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,20 +64,23 @@
                 ]"
             />
 
-            <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"
+                    @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 3eae467..d3b5d3d 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';
@@ -15,9 +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>();
@@ -93,15 +95,12 @@ 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;
+            return response.data;
         } catch (error) {
             console.error('There was an error retrieving the report CSV: ', error);
             // TODO: More in-depth error-handling here
@@ -110,14 +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_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,
@@ -125,6 +138,8 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         getPayPeriodByDateOrYearAndNumber,
         getTimesheetOverviews,
         getTimesheetsByOptionalEmployeeEmail,
-        getPayPeriodReportByYearAndPeriodNumber,
+        getPayPeriodReport,
+        openReportDialog,
+        closeReportDialog,
     };
 });
\ No newline at end of file
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