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] 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>