From a47222a7b8ebcf44598efa09ad8e01dc9e8fea7f Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Thu, 20 Nov 2025 14:41:50 -0500
Subject: [PATCH] fix(approvals): reimplement charts with new structures, clean
 UI/UX, refine list view

---
 src/css/app.scss                              |   1 -
 src/css/quasar.variables.scss                 |   4 +-
 src/i18n/en-ca/index.ts                       |   4 +-
 src/i18n/fr-ca/index.ts                       |   4 +-
 .../details-dialog-chart-expenses.vue         |  36 +++----
 .../details-dialog-chart-hours-worked.vue     | 102 ++++++++++--------
 .../details-dialog-chart-shift-types.vue      |  42 ++++----
 .../components/details-dialog.vue             |  32 +++---
 .../components/overview-list-item.vue         |   4 +-
 .../components/overview-list.vue              |  84 ++++++++++-----
 .../composables/use-timesheet-approval-api.ts |  34 +++---
 .../models/timesheet-overview.models.ts       |  58 +++++++---
 .../timesheets/components/shift-list.vue      |   1 -
 .../timesheets/models/timesheet.models.ts     |   4 +-
 .../timesheets/services/timesheet-service.ts  |   4 +-
 src/pages/timesheet-approval-page.vue         |   9 +-
 src/stores/timesheet-store.ts                 |  14 ++-
 17 files changed, 251 insertions(+), 186 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index 29d530e..1ade66d 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -5,7 +5,6 @@
   }
 }
 
-
 .text-fb-blue {
   color: #4267B2 !important;
 }
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index f803073..1b60238 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -15,9 +15,9 @@
 $primary                    : #30303A;
 $secondary                  : #DAE0E7;
 $accent                     : #0c9a3b;
-$accent2                     : #0a7d32;
+$accent2                    : #0a7d32;
 
-$dark-shadow-color          : #173625;
+$dark-shadow-color          : #000000;
 
 $elevation-dark-umbra       : rgba($dark-shadow-color, 1);
 $elevation-dark-penumbra    : rgba($dark-shadow-color, 0.75);
diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index 17831c0..1f96213 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -130,8 +130,8 @@ export default {
         nav_button: {
             calendar_date_picker: "Calendar",
             current_week: "This week",
-            next_week: "Next week",
-            previous_week: "Previous week",
+            next_week: "Next period",
+            previous_week: "Previous period",
         },
         save_button: "Save",
         cancel_button: "Cancel",
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 1fcc2bb..43b22b5 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -131,8 +131,8 @@ export default {
         nav_button: {
             calendar_date_picker: "Calendrier",
             current_week: "Semaine actuelle",
-            next_week: "Prochaine semaine",
-            previous_week: "Semaine précédente",
+            next_week: "Prochaine période",
+            previous_week: "Période précédente",
         },
         save_button: "Enregistrer",
         cancel_button: "Annuler",
diff --git a/src/modules/timesheet-approval/components/details-dialog-chart-expenses.vue b/src/modules/timesheet-approval/components/details-dialog-chart-expenses.vue
index eb74d61..3ed73c3 100644
--- a/src/modules/timesheet-approval/components/details-dialog-chart-expenses.vue
+++ b/src/modules/timesheet-approval/components/details-dialog-chart-expenses.vue
@@ -7,7 +7,7 @@
     import { ref } from 'vue';
     import { Bar } from 'vue-chartjs';
     import { useI18n } from 'vue-i18n';
-    import { useQuasar } from 'quasar';
+    import { useQuasar, colors } from 'quasar';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale, type ChartData, type ChartDataset } from 'chart.js';
 
@@ -25,28 +25,26 @@
     const expenses_labels = ref<string[]>([]);
 
     const getExpensesData = (): ChartData<'bar'> => {
-        // const all_days = timesheet_store.pay_period_details.weeks.flatMap(week => Object.values(week.expenses));
-        // const all_days_dates = timesheet_store.pay_period_details.weeks.flatMap(week => Object.values(week.shifts))
+        const all_days = timesheet_store.timesheets.flatMap(week => week.days.flatMap(day => day.daily_expenses));
 
-        // const all_costs = all_days.map(day => day.total_expenses);
-        // console.log('costs, ', all_costs);
-        // const all_mileage = all_days.map(day => day.total_mileage);
+        const all_costs = all_days.map(day => (day.expenses + day.on_call + day.per_diem));
+        const all_mileage = all_days.map(day => day.mileage);
 
 
-        // expenses_dataset.value = [
-        //     {
-        //         label: t('timesheet_approvals.table.expenses'),
-        //         data: all_costs,
-        //         backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
-        //     },
-        //     {
-        //         label: t('timesheet_approvals.table.mileage'),
-        //         data: all_mileage,
-        //         backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
-        //     }
-        // ]
+        expenses_dataset.value = [
+            {
+                label: t('timesheet_approvals.table.expenses'),
+                data: all_costs,
+                backgroundColor: colors.getPaletteColor('primary'),
+            },
+            {
+                label: t('timesheet_approvals.table.mileage'),
+                data: all_mileage,
+                backgroundColor: colors.getPaletteColor('info'),
+            }
+        ]
 
-        // expenses_labels.value = all_days_dates.map(day => day.short_date);
+        expenses_labels.value = timesheet_store.timesheets.flatMap(week => week.days.map(day => day.date.slice(-5, )));
 
         return {
             datasets: expenses_dataset.value,
diff --git a/src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue b/src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue
index 743f4fe..6a13aa8 100644
--- a/src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue
+++ b/src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue
@@ -1,67 +1,79 @@
-<script setup lang="ts">
-    /* eslint-disable */
-    import { ref } from 'vue';
-    import { colors } from 'quasar';
-    import { Bar } from 'vue-chartjs';
+<script
+    setup
+    lang="ts"
+>
+    import { ref, computed } from 'vue';
     import { useI18n } from 'vue-i18n';
-    import { useQuasar } from 'quasar';
+    import { colors, useQuasar } from 'quasar';
+    import { Bar } from 'vue-chartjs';
     import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, type ChartData, type ChartDataset } from 'chart.js';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
-    
+    import type { TotalHours } from 'src/modules/timesheets/models/timesheet.models';
+
+    interface ChartConfigHoursWorked {
+        key: keyof Pick<TotalHours, 'regular' | 'evening' | 'emergency' | 'overtime'>;
+        label: string;
+        color: string;
+    }
+
     const { t } = useI18n();
     const $q = useQuasar();
-    
+
     ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);
     ChartJS.defaults.font.family = '"Roboto", sans-serif';
-    ChartJS.defaults.maintainAspectRatio = false;
+    // ChartJS.defaults.maintainAspectRatio = false;
     ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
 
     const timesheet_store = useTimesheetStore();
 
     const hours_worked_labels = ref<string[]>([]);
-    const hours_worked_dataset = ref<ChartDataset<'bar'>[]>([]);    
+    const hours_worked_dataset = ref<ChartDataset<'bar'>[]>([]);
 
     const getHoursWorkedData = (): ChartData<'bar'> => {
-        
-            // const all_days = timesheet_store.pay_period_details.weeks.flatMap( week => Object.values(week.shifts));
-            // const datasetConfig = [
-            //     {
-            //         key: 'regular_hours',
-            //         label: t('shared.shift_type.regular'),
-            //         color: colors.getPaletteColor('green-5'),
-            //     },
-            //     {
-            //         key: 'evening_hours',
-            //         label: t('shared.shift_type.evening'),
-            //         color: colors.getPaletteColor('green-9'),
-            //     },
-            //     {
-            //         key: 'emergency_hours',
-            //         label: t('shared.shift_type.emergency'),
-            //         color: getComputedStyle(document.body).getPropertyValue('--q-warning').trim(),
-            //     },
-            //     {
-            //         key: 'overtime_hours',
-            //         label: t('shared.shift_type.overtime'),
-            //         color: getComputedStyle(document.body).getPropertyValue('--q-negative').trim(),
-            //     },
-            // ] as const;
 
-            // hours_worked_dataset.value = datasetConfig.map(cfg => ({
-            //     label: cfg.label,
-            //     data: all_days.map(day => day[ cfg.key ]),
-            //     backgroundColor: cfg.color,
-            // }));
+        const all_days = computed(() => timesheet_store.timesheets.flatMap(week => week.days));
+        const datasetConfig: ChartConfigHoursWorked[] = [
+            {
+                key: 'regular',
+                label: t('shared.shift_type.regular'),
+                color: colors.getPaletteColor('primary'),
+            },
+            {
+                key: 'evening',
+                label: t('shared.shift_type.evening'),
+                color: colors.getPaletteColor('accent'),
+            },
+            {
+                key: 'emergency',
+                label: t('shared.shift_type.emergency'),
+                color: getComputedStyle(document.body).getPropertyValue('--q-warning').trim(),
+            },
+            {
+                key: 'overtime',
+                label: t('shared.shift_type.overtime'),
+                color: getComputedStyle(document.body).getPropertyValue('--q-negative').trim(),
+            },
+        ] as const;
 
-            // hours_worked_labels.value = all_days.map(day => day.short_date);
-        
+        hours_worked_dataset.value = datasetConfig.map(cfg => ({
+            label: cfg.label,
+            data: all_days.value.map(day => day.daily_hours[cfg.key]),
+            backgroundColor: cfg.color,
+        }));
+
+        hours_worked_labels.value = all_days.value.map(day => day.date.slice(-5, ));
+
+        console.log('all days: ', all_days.value);
+
+        console.log('hours worked labels: ', hours_worked_labels.value);
+        console.log('hours worked dataset: ', hours_worked_dataset.value);
 
         return {
             labels: hours_worked_labels.value,
             datasets: hours_worked_dataset.value,
         };
     };
-    
+
 </script>
 
 <template>
@@ -69,7 +81,7 @@
         <Bar
             :data="getHoursWorkedData()"
             :options="({
-                indexAxis: $q.screen.lt.md? 'y' : 'x',
+                indexAxis: $q.screen.lt.md ? 'y' : 'x',
                 plugins: {
                     legend: {
                         labels: {
@@ -89,10 +101,10 @@
                         stacked: true,
                         suggestedMin: 0,
                         suggestedMax: 10,
-                        
+
                     }
                 }
             })"
-        />    
+        />
     </div>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue b/src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue
index f8016d0..c1edb19 100644
--- a/src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue
+++ b/src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue
@@ -17,33 +17,33 @@
     ChartJS.defaults.maintainAspectRatio = false;
     ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
 
-    const { current_pay_period_overview } = useTimesheetStore();
+    const timesheet_store = useTimesheetStore();
 
     const shift_type_labels = ref<string[]>([]);
     const shift_type_totals = ref<ChartDataset<'doughnut'>[]>([{ data: [40, 0, 2, 5], }]);
 
 
-    // shift_type_totals.value = [{
-    //     data: [
-    //         current_pay_period_overview.regular_hours,
-    //         current_pay_period_overview.other_hours.evening_hours,
-    //         current_pay_period_overview.other_hours.emergency_hours,
-    //         current_pay_period_overview.other_hours.overtime_hours,
-    //     ],
-    //     backgroundColor: [
-    //         colors.getPaletteColor('green-5'),                                          // Regular
-    //         colors.getPaletteColor('green-9'),                                          // Evening
-    //         getComputedStyle(document.body).getPropertyValue('--q-warning').trim(),     // Emergency
-    //         getComputedStyle(document.body).getPropertyValue('--q-negative').trim(),    // Overtime
-    //     ]
-    // }];
+    shift_type_totals.value = [{
+        data: [
+            timesheet_store.current_pay_period_overview!.regular_hours,
+            timesheet_store.current_pay_period_overview!.other_hours.evening_hours,
+            timesheet_store.current_pay_period_overview!.other_hours.emergency_hours,
+            timesheet_store.current_pay_period_overview!.other_hours.overtime_hours,
+        ],
+        backgroundColor: [
+            colors.getPaletteColor('primary'),   // Regular
+            colors.getPaletteColor('accent'), // Evening
+            colors.getPaletteColor('warning'),  // Emergency
+            colors.getPaletteColor('negative'), // Overtime
+        ]
+    }];
 
-    // shift_type_labels.value = [
-    //     current_pay_period_overview.regular_hours.toString() + 'h',
-    //     current_pay_period_overview.other_hours.evening_hours.toString() + 'h',
-    //     current_pay_period_overview.other_hours.emergency_hours.toString() + 'h',
-    //     current_pay_period_overview.other_hours.overtime_hours.toString() + 'h',
-    // ]
+    shift_type_labels.value = [
+        timesheet_store.current_pay_period_overview!.regular_hours.toString() + 'h',
+        timesheet_store.current_pay_period_overview!.other_hours.evening_hours.toString() + 'h',
+        timesheet_store.current_pay_period_overview!.other_hours.emergency_hours.toString() + 'h',
+        timesheet_store.current_pay_period_overview!.other_hours.overtime_hours.toString() + 'h',
+    ]
 
 
     const data = {
diff --git a/src/modules/timesheet-approval/components/details-dialog.vue b/src/modules/timesheet-approval/components/details-dialog.vue
index b68be4a..4975e1d 100644
--- a/src/modules/timesheet-approval/components/details-dialog.vue
+++ b/src/modules/timesheet-approval/components/details-dialog.vue
@@ -17,7 +17,7 @@
 
     const dialog_model = defineModel<boolean>('dialog', { default: false });
     const timesheet_store = useTimesheetStore();
-    const render_key = ref(1);
+    const is_dialog_open = ref(false);
 
     provide('employeeEmail', employeeEmail);
 </script>
@@ -29,45 +29,37 @@
         full-height
         transition-show="jump-down"
         transition-hide="jump-down"
-        @show="render_key += 1"
+        @show="is_dialog_open = true"
+        @hide="is_dialog_open = false"
     >
         <q-card
-            class="q-pa-sm shadow-12 rounded-15 column no-wrap relative"
-            :style="$q.screen.lt.md ? '' : 'width: 60vw !important;'"
+            class="shadow-12 rounded-15 column no-wrap relative bg-secondary"
+            :style="($q.screen.lt.md ? '' : 'width: 60vw !important;') + ($q.dark.isActive ? ' border: 2px solid var(--q-accent)' : '')"
         >
 
             <!-- employee name -->
             <q-card-section
-                class="text-h5 text-weight-bolder text-center bg-primary q-pa-none text-uppercase text-white col-auto"
+                class="col-auto text-h5 text-weight-bolder text-center text-uppercase text-white q-px-none q-py-xs bg-primary"
             >
-                <span>TODO: Name goes here</span>
+                <span>{{ timesheet_store.selected_employee_name }}</span>
             </q-card-section>
 
             <!-- employee pay period details using chart -->
             <q-card-section
+                v-if="is_dialog_open"
                 :horizontal="!$q.screen.lt.md"
-                class=" col-auto q-px-sm no-wrap"
+                class="col-auto q-px-sm no-wrap"
             >
-                <DetailsDialogChartHoursWorked
-                    :key="render_key"
-                    class="col"
-                />
+                <DetailsDialogChartHoursWorked class="col" />
 
-                <DetailsDialogChartShiftTypes
-                    :key="render_key + 1"
-                    class="col-2 q-ma-lg"
-                />
+                <DetailsDialogChartShiftTypes class="col q-ma-lg" />
 
-                <DetailsDialogChartExpenses
-                    :key="render_key + 2"
-                    class="col"
-                />
+                <DetailsDialogChartExpenses class="col" />
             </q-card-section>
 
             <q-card-section class="col-auto">
                 <q-separator />
                 <ExpenseDialogList
-                    horizontal
                     :employee-email="employeeEmail"
                 />
                 <q-separator />
diff --git a/src/modules/timesheet-approval/components/overview-list-item.vue b/src/modules/timesheet-approval/components/overview-list-item.vue
index 6acbe35..30720e6 100644
--- a/src/modules/timesheet-approval/components/overview-list-item.vue
+++ b/src/modules/timesheet-approval/components/overview-list-item.vue
@@ -17,13 +17,13 @@
 </script>
 
 <template>
-    <div class="q-px-sm q-pb-sm q-mt-sm col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 grid-style-transition">
+    <div class="q-px-sm q-pb-md col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 grid-style-transition">
         <transition
             appear
             enter-active-class="animated fadeInUp"
         >
             <q-card
-                class="rounded-10 shadow-15"
+                class="rounded-10 shadow-5"
                 :style="`animation-delay: ${index / 15}s;`"
             >
                 <!-- Card header with employee name and details button-->
diff --git a/src/modules/timesheet-approval/components/overview-list.vue b/src/modules/timesheet-approval/components/overview-list.vue
index 81a351f..0ae6658 100644
--- a/src/modules/timesheet-approval/components/overview-list.vue
+++ b/src/modules/timesheet-approval/components/overview-list.vue
@@ -9,7 +9,7 @@
     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 { pay_period_overview_columns, type TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
+    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();
@@ -17,7 +17,16 @@
 
     const employeeEmail = defineModel();
 
-    const visible_columns = ref<string[]>(['employee_name', 'REGULAR', 'email', '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 emit = defineEmits<{
         'clickedDetailsButton': [email: string];
@@ -34,12 +43,11 @@
         emit('clickedDetailsButton', employee_email);
 
         await timesheet_store.getTimesheetsByEmployeeEmail(employee_email);
-        // await expenses_store.getPayPeriodExpensesByTimesheetId(employee_email);
     };
 </script>
 
 <template>
-    <div class="q-pa-md">
+    <div class="q-px-md full-height">
         <LoadingOverlay v-model="timesheet_store.is_loading" />
         <transition
             appear
@@ -55,18 +63,18 @@
                 row-key="email"
                 :filter="timesheet_store.search_filter"
                 :grid="timesheet_store.is_approval_grid_mode"
-                dense
+                :dense="timesheet_store.is_approval_grid_mode"
                 hide-pagination
                 color="accent"
                 :rows-per-page-options="[0]"
                 card-container-class="justify-center"
-                class="q-py-md bg-transparent"
+                class="bg-transparent"
                 :class="timesheet_store.is_approval_grid_mode ? '' : 'sticky-header-table no-shadow'"
-                table-class="q-pa-none q-py-none q-mx-md rounded-10 bg-dark shadow-15"
+                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')"
-            >    
+            >
                 <template #header="props">
                     <q-tr
                         :props="props"
@@ -83,28 +91,54 @@
                         </q-th>
                     </q-tr>
                 </template>
-    
+
                 <template #body-cell="props">
                     <q-td
                         :props="props"
                         class="text-weight-medium"
                     >
-                        <q-icon
-                            v-if="props.col.name === 'is_approved'"
-                            :name="props.value ? 'verified' : 'remove_circle_outline'"
-                            :color="props.value ? 'accent' : 'grey-5'"
-                            :class="props.value ? 'bg-white rounded-20' : ''"
-                            size="sm"
-                        />
-    
-                        <div v-else-if="props.col.name === 'employee_name'">
-                            <span class="text-h5 text-uppercase text-accent q-mr-xs">{{ props.value.split(' ')[0]}}</span>
-                            <span class="text-uppercase text-weight-light">{{ props.value.split(' ')[1] }}</span>
-                        </div>
-                        <span v-else>{{ props.value }}</span>
+                        <transition
+                            appear
+                            enter-active-class="animated fadeInUp"
+                            leave-active-class="animated fadeOutDown"
+                            mode="out-in"
+                        >
+                            <div
+                                :key="props.rowIndex + (timesheet_store.pay_period?.pay_period_no ?? 0)"
+                                class="rounded-5"
+                                style="font-size: 1.2em;"
+                                :style="`animation-delay: ${props.rowIndex / 30}s;`"
+                            >
+                                <transition
+                                    v-if="props.col.name === 'is_approved'"
+                                    enter-active-class="animated swing"
+                                    mode="out-in"
+                                >
+                                    <q-btn
+                                        :key="props.row.is_approved"
+                                        flat
+                                        dense
+                                        :icon="props.value ? 'lock' : 'lock_open'"
+                                        :color="props.value ? 'white' : 'grey-5'"
+                                        class="rounded-5 z-top"
+                                        :class="props.value ? 'bg-accent' : ''"
+                                        @click.stop="props.row.is_approved = !props.row.is_approved"
+                                    />
+                                </transition>
+
+                                <div v-else-if="props.col.name === 'employee_name'">
+                                    <span class="text-h5 text-uppercase text-accent q-mr-xs">
+                                        {{ props.value.split(' ')[0] }}
+                                    </span>
+                                    <span class="text-uppercase text-weight-light">{{ props.value.split(' ')[1]
+                                    }}</span>
+                                </div>
+                                <span v-else>{{ props.value }}</span>
+                            </div>
+                        </transition>
                     </q-td>
                 </template>
-    
+
                 <!-- Template for individual employee cards -->
                 <template #item="props: { row: TimesheetOverview, rowIndex: number }">
                     <OverviewListItem
@@ -115,7 +149,7 @@
                         @click-details="overview => onClickedDetails(props.row.email, overview)"
                     />
                 </template>
-    
+
                 <!-- Template for custome failed-to-load state -->
                 <template #no-data="{ message, filter }">
                     <div class="full-width column items-center text-accent q-gutter-sm">
@@ -123,7 +157,7 @@
                             size="4em"
                             :name="filter ? 'filter_alt_off' : 'error_outline'"
                         />
-    
+
                         <span class="text-h6">
                             {{ message }}
                         </span>
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 2deabd8..39bb247 100644
--- a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
+++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
@@ -1,4 +1,3 @@
-import { ref } from "vue";
 import { useTimesheetStore } from "src/stores/timesheet-store";
 import type { TimesheetApprovalCSVReportFilters } from "src/modules/timesheet-approval/models/timesheet-approval-csv-report.models";
 
@@ -6,44 +5,41 @@ export const useTimesheetApprovalApi = () => {
     const timesheet_store = useTimesheetStore();
     const DATE_REGEX = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
 
-    const getTimesheetOverviews = async (date?: string) => {
+    const getTimesheetOverviews = async () => {
         timesheet_store.is_loading = true;
-        const success = ref(false);
 
-        if (date !== undefined) {
-            success.value = await timesheet_store.getPayPeriodByDateOrYearAndNumber(date);
-        } else {
-            success.value = await timesheet_store.getPayPeriodByDateOrYearAndNumber();
-        }
+        const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber();
+        if (success) await timesheet_store.getTimesheetOverviews();
 
-        if (success.value === true) {
-            await timesheet_store.getTimesheetOverviews();
-        }
+        timesheet_store.is_loading = false;
     }
 
     const getTimesheetOverviewsByDate = async (date: string) => {
         const valid_date = DATE_REGEX.test(date);
+        timesheet_store.is_loading = true;
 
         if (valid_date) {
             const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber(date);
             if (success) await timesheet_store.getTimesheetOverviews();
         }
+
+        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[], year?: number, period_number?: number) => {
         if (timesheet_store.pay_period === undefined) return;
 
-        const [ targo, solucom ] = report_filter_company;
-        const [ shifts, expenses, holiday, vacation ] = report_filter_type;
+        const [targo, solucom] = report_filter_company;
+        const [shifts, expenses, holiday, vacation] = report_filter_type;
         const options = {
             types: { shifts, expenses, holiday, vacation },
             companies: { 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.getPayPeriodReportByYearAndPeriodNumber(
+            year ?? timesheet_store.pay_period.pay_year,
+            period_number ?? timesheet_store.pay_period.pay_period_no,
+            options
         );
     };
 
diff --git a/src/modules/timesheet-approval/models/timesheet-overview.models.ts b/src/modules/timesheet-approval/models/timesheet-overview.models.ts
index ad4e4a2..9689da7 100644
--- a/src/modules/timesheet-approval/models/timesheet-overview.models.ts
+++ b/src/modules/timesheet-approval/models/timesheet-overview.models.ts
@@ -52,76 +52,102 @@ export const default_pay_period_overview: TimesheetOverview = {
     is_approved: false
 }
 
+export const overview_column_names = {
+    EMPLOYEE_NAME: 'employee_name',
+    EMAIL: 'email',
+    REGULAR: 'REGULAR',
+    EVENING: 'EVENING',
+    EMERGENCY: 'EMERGENCY',
+    SICK: 'SICK',
+    HOLIDAY: 'HOLIDAY',
+    VACATION: 'VACATION',
+    OVERTIME: 'OVERTIME',
+    EXPENSES: 'expenses',
+    MILEAGE: 'mileage',
+    IS_APPROVED: 'is_approved', 
+}
+
 export const pay_period_overview_columns: QTableColumn[] = [
     { 
-        name: 'employee_name', 
+        name: overview_column_names.EMPLOYEE_NAME, 
         label: 'timesheet_approvals.table.full_name', 
         align: 'left', 
         field: 'employee_name',
-        sortable: true 
+        sortable: true,
+        required: true, 
     },
     { 
-        name: 'email', 
-        label: 'timesheet_approvals.table.email', 
+        name: overview_column_names.EMAIL, 
+        label: 'timesheet_approvals.table.email',
+        align: 'left', 
         field: 'email', 
         sortable: true,
     },
     { 
-        name: 'REGULAR', 
-        label: 'shared.shift_type.regular', 
+        name: overview_column_names.REGULAR, 
+        label: 'shared.shift_type.regular',
+        align: 'left', 
         field: 'regular_hours', 
         sortable: true, 
     },
     { 
-        name: 'EVENING', 
-        label: 'shared.shift_type.evening', 
+        name: overview_column_names.EVENING, 
+        label: 'shared.shift_type.evening',
+        align: 'left',
         field: row => row.other_hours.evening_hours,
         sortable: true, 
     },
     { 
-        name: 'EMERGENCY', 
+        name: overview_column_names.EMERGENCY, 
         label: 'shared.shift_type.emergency', 
+        align: 'left',
         field: row => row.other_hours.emergency_hours,
         sortable: true, 
     },
      { 
-        name: 'SICK', 
+        name: overview_column_names.SICK, 
         label: 'shared.shift_type.sick', 
+        align: 'left',
         field: row => row.other_hours.sick_hours, 
         sortable: true, 
     },
     { 
-        name: 'HOLIDAY', 
+        name: overview_column_names.HOLIDAY, 
         label: 'shared.shift_type.holiday', 
+        align: 'left',
         field: row => row.other_hours.holiday_hours,
         sortable: true, 
     },
     { 
-        name: 'VACATION', 
+        name: overview_column_names.VACATION, 
         label: 'shared.shift_type.vacation', 
+        align: 'left',
         field: row => row.other_hours.vacation_hours,
         sortable: true, 
     },
     { 
-        name: 'OVERTIME', 
+        name: overview_column_names.OVERTIME, 
         label: 'shared.shift_type.overtime', 
+        align: 'left',
         field: row => row.other_hours.overtime_hours,
         sortable: true,
     },
     { 
-        name: 'expenses', 
+        name: overview_column_names.EXPENSES, 
         label: 'timesheet_approvals.table.expenses', 
+        align: 'left',
         field: 'expenses', 
         sortable: true, 
     },
     { 
-        name: 'mileage', 
+        name: overview_column_names.MILEAGE, 
         label: 'timesheet_approvals.table.mileage', 
+        align: 'left',
         field: 'mileage', 
         sortable: true,
     },
     {
-        name: 'is_approved',
+        name: overview_column_names.IS_APPROVED,
         label: 'timesheet_approvals.table.is_approved',
         field: 'is_approved',
         sortable: true,
diff --git a/src/modules/timesheets/components/shift-list.vue b/src/modules/timesheets/components/shift-list.vue
index df65ca0..0d0b6f9 100644
--- a/src/modules/timesheets/components/shift-list.vue
+++ b/src/modules/timesheets/components/shift-list.vue
@@ -31,7 +31,6 @@
             const day = timesheet_store.timesheets[timesheet_index]!.days[day_index]!;
             const shifts_without_deleted_shift = day.shifts.filter(shift => shift.id !== 0);
             day.shifts = shifts_without_deleted_shift;
-            console.log("day's shifts after cleanup: ", day.shifts);
         }
     }
 
diff --git a/src/modules/timesheets/models/timesheet.models.ts b/src/modules/timesheets/models/timesheet.models.ts
index 2a79e48..9e06725 100644
--- a/src/modules/timesheets/models/timesheet.models.ts
+++ b/src/modules/timesheets/models/timesheet.models.ts
@@ -5,7 +5,7 @@ export const TIME_FORMAT_PATTERN = /^(\d{2}:\d{2})?$/;
 export const DATE_FORMAT_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
 
 export interface TimesheetResponse {
-    employee_full_name: string;
+    employee_fullname: string;
     timesheets: Timesheet[];
 }
 
@@ -38,6 +38,8 @@ export interface TotalHours {
 
 export interface TotalExpenses {
     expenses: number;
+    per_diem: number;
+    on_call: number;
     mileage: number;
 }
 
diff --git a/src/modules/timesheets/services/timesheet-service.ts b/src/modules/timesheets/services/timesheet-service.ts
index 5810788..31d9e03 100644
--- a/src/modules/timesheets/services/timesheet-service.ts
+++ b/src/modules/timesheets/services/timesheet-service.ts
@@ -19,8 +19,8 @@ export const timesheetService = {
         return response.data;
     },
 
-    getTimesheetsByPayPeriod: async (year: number, period_number: number): Promise<TimesheetResponse> => {
-        const response = await api.get(`timesheets/${year}/${period_number}`);
+    getTimesheetsByPayPeriodAndOptionalEmail: async (year: number, period_number: number, employee_email?: string): Promise<TimesheetResponse> => {
+        const response = await api.get<{success: boolean, data: TimesheetResponse, error? : string}>(`timesheets/${year}/${period_number}/${employee_email}`);
         return response.data.data;
     },
 };
\ No newline at end of file
diff --git a/src/pages/timesheet-approval-page.vue b/src/pages/timesheet-approval-page.vue
index 509c594..1e8d778 100644
--- a/src/pages/timesheet-approval-page.vue
+++ b/src/pages/timesheet-approval-page.vue
@@ -31,12 +31,13 @@
 <template>
     <q-page
         padding
-        class="q-pa-md bg-secondary "
+        class="column q-pa-md bg-secondary"
     >
         <PageHeaderTemplate
             title="timesheet_approvals.page_title"
             :start-date="timesheet_store.pay_period?.period_start ?? ''"
             :end-date="timesheet_store.pay_period?.period_end ?? ''"
+            class="col-auto"
         />
 
         <DetailsDialog
@@ -48,8 +49,8 @@
         />
 
         <div
-            class="full-width q-mb-sm"
-            :class="$q.screen.lt.md ? 'text-center' : 'row'"
+            class="col-auto full-width q-px-lg"
+            :class="($q.screen.lt.md ? 'text-center' : 'row') + (timesheet_store.is_approval_grid_mode ? ' q-mb-sm' : ' q-mb-md')"
         >
             <PayPeriodNavigator
                 @date-selected="timesheet_approval_api.getTimesheetOverviews"
@@ -85,6 +86,6 @@
             <QTableFilters v-model:search="timesheet_store.search_filter" />
         </div>
 
-        <OverviewList @clickedDetailsButton="onDetailsClicked" />
+        <OverviewList class="col" @clickedDetailsButton="onDetailsClicked" />
     </q-page>
 </template>
\ No newline at end of file
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index 6e6566f..39a1b44 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -15,6 +15,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     const pay_period_overviews = ref<TimesheetOverview[]>([]);
     const current_pay_period_overview = ref<TimesheetOverview>();
     const timesheets = ref<Timesheet[]>([]);
+    const selected_employee_name = ref<string>();
     const initial_timesheets = ref<Timesheet[]>([]);
     const is_approval_grid_mode = ref<boolean>(true);
     const search_filter = ref<string | number | null>('');
@@ -22,7 +23,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
 
     const getPayPeriodByDateOrYearAndNumber = async (date?: string): Promise<boolean> => {
         try {
-            if (date!== undefined) {
+            if (date !== undefined) {
                 pay_period.value = await timesheetService.getPayPeriodByDate(date);
             } else if (pay_period.value !== undefined) {
                 pay_period.value = await timesheetService.getPayPeriodByYearAndPeriodNumber(pay_period.value.pay_year, pay_period.value.pay_period_no);
@@ -47,7 +48,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
                 is_loading.value = false;
                 return false;
             }
-            
+
             const response = await timesheetApprovalService.getPayPeriodOverviews(pay_period.value.pay_year, pay_period.value.pay_period_no);
             pay_period_overviews.value = response.employees_overview;
             is_loading.value = false;
@@ -65,13 +66,17 @@ export const useTimesheetStore = defineStore('timesheet', () => {
 
     const getTimesheetsByEmployeeEmail = async (employee_email?: string) => {
         is_loading.value = true;
+        let response;
 
         if (pay_period.value === undefined) return;
         try {
             if (employee_email) {
-                console.log('email: ', employee_email);
+                response = await timesheetService.getTimesheetsByPayPeriodAndOptionalEmail(pay_period.value.pay_year, pay_period.value.pay_period_no, employee_email);
+            } else {
+                response = await timesheetService.getTimesheetsByPayPeriodAndOptionalEmail(pay_period.value.pay_year, pay_period.value.pay_period_no);
             }
-            const response = await timesheetService.getTimesheetsByPayPeriod(pay_period.value.pay_year, pay_period.value.pay_period_no);
+
+            selected_employee_name.value = response.employee_fullname;
             timesheets.value = response.timesheets;
             initial_timesheets.value = unwrapAndClone(timesheets.value);
             is_loading.value = false;
@@ -107,6 +112,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         pay_period,
         pay_period_overviews,
         current_pay_period_overview,
+        selected_employee_name,
         timesheets,
         initial_timesheets,
         getPayPeriodByDateOrYearAndNumber,