From 89148343b610fa81733123eadcb447cc5a53a699 Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Tue, 2 Sep 2025 16:56:04 -0400
Subject: [PATCH 1/5] feat(approvals): add chart to track total hours for each
 type, chart to track expenses, begin work on widget to display detailed shift
 info.

---
 src/i18n/en-ca/index.ts                       |  2 +-
 ...al-employee-details-hours-worked-chart.vue | 26 +----
 ...val-employee-details-shift-types-chart.vue | 63 ++++++++++++
 ...sheet-approval-employee-expenses-chart.vue | 81 ++++++++++++++++
 ...sheet-approval-employee-details-shifts.vue | 14 +++
 .../timesheet-approval-employee-details.vue   | 95 +++++++++++++++++--
 ...esheet-approval-employee-overview-list.vue | 12 ++-
 .../composables/use-timesheet-approval-api.ts | 12 ++-
 .../services/services-timesheet-approval.ts   |  3 +-
 .../types/timesheet-details-interface.ts      | 25 ++---
 10 files changed, 282 insertions(+), 51 deletions(-)
 create mode 100644 src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue
 create mode 100644 src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue
 create mode 100644 src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue

diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index 71b4552..c7ac6d0 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -246,7 +246,7 @@ export default {
     newUsers: 'New user',
     updateUsers: 'Update user',
     timeSheets: 'Time sheet',
-    timeSheetValidations: 'Time sheet',
+    timeSheetValidations: 'Time sheet approvals',
   },
   timeSheet: {
     timeSheetTab_1: 'Shifts',
diff --git a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue
index 95bcbfc..0b57ee6 100644
--- a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue
+++ b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue
@@ -6,6 +6,7 @@
     import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
     
     const { t } = useI18n();
+
     
     ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);
     ChartJS.defaults.font.family = '"Roboto", sans-serif';
@@ -21,8 +22,7 @@
     });
 
     const hours_worked_labels = ref<string[]>([]);
-    const hours_worked_dataset = ref<ChartDataset<'bar'>[]>([]);
-    
+    const hours_worked_dataset = ref<ChartDataset<'bar'>[]>([]);    
 
     const getHoursWorkedData = (): ChartData<'bar'> => {
         if (props.rawData) {
@@ -63,30 +63,12 @@
             datasets: hours_worked_dataset.value,
         };
     };
-
     
 </script>
 
 <template>
-    <Bar 
+    <Bar
         :data="getHoursWorkedData()"
-        :options="({
-                    indexAxis: $q.screen.lt.md? 'y' : 'x',
-                    plugins: {
-                        title: {
-                            display: true,
-                            text: t('timeSheetValidations.hoursWorkedChartTitle'),
-                            color: '#616161'
-                        }
-                    },
-                    scales: {
-                        x: {
-                            stacked: true,
-                        },
-                        y: {
-                            stacked: true,
-                        }
-                    }
-                })"
+        :options="props.options"
     />    
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue
new file mode 100644
index 0000000..a736325
--- /dev/null
+++ b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+    /* eslint-disable */
+    import { ref } from 'vue';
+    import { Doughnut } from 'vue-chartjs';
+    import { useI18n } from 'vue-i18n';
+    import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale, type ChartData, type ChartOptions, type Plugin, type ChartDataset } from 'chart.js';
+    import type { PayPeriodOverviewEmployee } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface';
+    
+    const { t } = useI18n();
+    
+    ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale);
+    ChartJS.defaults.font.family = '"Roboto", sans-serif';
+    ChartJS.defaults.maintainAspectRatio = false;
+
+    const props = withDefaults(defineProps<{
+        rawData: PayPeriodOverviewEmployee | undefined;
+        options?: ChartOptions<"doughnut"> | undefined;
+        plugins?: Plugin<"doughnut">[] | undefined;
+    }>(), {
+        options: () => ({}),
+        plugins: () => [],
+    });
+
+    const shift_type_labels = ref<string[]>([]);
+    const shift_type_totals = ref<ChartDataset<'doughnut'>[]>([{ data: [40, 0, 2, 5], }]);
+
+    if (props.rawData){
+        shift_type_totals.value = [{
+            data: [
+                props.rawData.regular_hours, 
+                props.rawData.evening_hours,
+                props.rawData.emergency_hours,
+                props.rawData.overtime_hours,
+            ],
+            backgroundColor: [
+                getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
+                getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
+                getComputedStyle(document.body).getPropertyValue('--q-warning').trim(),
+                getComputedStyle(document.body).getPropertyValue('--q-negative').trim(),
+            ]
+        }];
+
+        shift_type_labels.value = [
+            props.rawData.regular_hours.toString() + 'h', 
+            props.rawData.evening_hours.toString()  + 'h',
+            props.rawData.emergency_hours.toString()  + 'h',
+            props.rawData.overtime_hours.toString()  + 'h',
+        ]
+    }
+
+    const data = {
+        labels: shift_type_labels.value,
+        datasets: shift_type_totals.value,
+    }
+
+</script>
+
+<template>
+    <Doughnut
+        :data="data"
+        :options="props.options"
+    />
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue
new file mode 100644
index 0000000..1817716
--- /dev/null
+++ b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+    /*eslint-disable*/
+    import { ref } from 'vue';
+    import { Line } from 'vue-chartjs';
+    import { useI18n } from 'vue-i18n';
+    import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, PointElement, LineController, CategoryScale, LinearScale, TimeScale, type ChartData, type ChartOptions, type Plugin, type ChartDataset } from 'chart.js';
+    import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
+    import type { Expense } from 'src/modules/timesheets/types/timesheet-details-interface';
+
+    const { t } = useI18n();
+
+    ChartJS.register(Title, Tooltip, Legend, LineElement, LineController, PointElement, CategoryScale, LinearScale, TimeScale);
+    ChartJS.defaults.font.family = '"Roboto", sans-serif';
+    // ChartJS.defaults.maintainAspectRatio = false;
+
+    const props = withDefaults(defineProps<{
+        rawData: PayPeriodEmployeeDetails | undefined;
+        options?: ChartOptions<"line"> | undefined;
+        plugins?: Plugin<"line">[] | undefined;
+    }>(), {
+        options: () => ({}),
+        plugins: () => [],
+    });
+
+    const expenses_dataset = ref<ChartDataset<'line'>[]>([]);
+    const expenses_labels = ref<string[]>([]);
+
+    const getExpensesData = (): ChartData<'line'> => {
+        if (props.rawData) {
+            const all_weeks = [props.rawData.week1, props.rawData.week2];
+            const all_days = all_weeks.flatMap( week => Object.values(week.expenses));
+            console.log('all days: ', all_days);
+            const all_days_dates = all_weeks.flatMap( week => Object.values(week.shifts))          
+
+            const all_costs = all_days.map( day => getTotalAmounts(day.cash));
+            const all_mileage = all_days.map( day => getTotalAmounts(day.km));
+            
+            
+            expenses_dataset.value = [
+                {
+                    label: t('timeSheet.refund'),
+                    data: all_costs,
+                    borderColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
+                    backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
+                    borderWidth: 2,
+                },
+                {
+                    label: t('timeSheet.mileage'),
+                    data: all_mileage,
+                    borderColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
+                    backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
+                    borderWidth: 2,
+                }
+            ]
+
+            expenses_labels.value = all_days_dates.map( day => day.short_date);
+        }
+
+        return {
+            datasets: expenses_dataset.value,
+            labels: expenses_labels.value
+        };
+    };
+
+    const getTotalAmounts = (expenses: Expense[]): number => {
+        let total_amount = 0;
+
+        for (const expense of expenses) {
+            total_amount += expense.amount;
+        }
+
+        return total_amount;
+    }
+</script>
+
+<template>
+    <Line 
+        :data="getExpensesData()"
+        :options="props.options"
+    />
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue
new file mode 100644
index 0000000..6806242
--- /dev/null
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
+
+
+    const props = defineProps<{
+        rawData: PayPeriodEmployeeDetails;
+    }>();
+
+    
+</script>
+
+<template>
+
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-details.vue
index cf235b1..9c7c955 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-details.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-details.vue
@@ -1,17 +1,25 @@
 <script setup lang="ts">
-    import type { PayPeriodEmployeeDetails } from '../types/timesheet-approval-pay-period-employee-details-interface';
+    /*eslint-disable*/
+    import { useI18n } from 'vue-i18n';
     import TimesheetApprovalEmployeeDetailsHoursWorkedChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue';
+    import TimesheetApprovalEmployeeDetailsShiftTypesChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue';
+    import TimesheetApprovalEmployeeExpensesChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue';
+    import type { PayPeriodOverviewEmployee } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface';
+    import type { PayPeriodEmployeeDetails } from '../types/timesheet-approval-pay-period-employee-details-interface';
 
     const props = defineProps<{
         isLoading: boolean;
         employeeName: string;
+        employeeOverview: PayPeriodOverviewEmployee | undefined;
         employeeDetails: PayPeriodEmployeeDetails | undefined;
         updateKey: number;
     }>();
+
+    const { t } = useI18n();
 </script>
 
 <template>
-    <q-card class="q-pa-md bg-white shadow-12">
+    <q-card class="q-pa-md bg-white shadow-12 full-width rounded-15">
         <!-- loader -->
         <q-card-section 
             v-if="props.isLoading"
@@ -28,21 +36,90 @@
         </q-card-section>
         
         <!-- employee name -->
-        <q-card-section v-if="!props.isLoading" class="text-h5 text-weight-bolder text-center full-width text-primary q-pt-none">
+        <q-card-section v-if="!props.isLoading" class="text-h5 text-weight-bolder text-center full-width text-primary q-pa-none text-uppercase">
             {{ props.employeeName }}
+            <q-separator class="q-mb-sm" color="accent" size="2px" />
         </q-card-section>
+        
 
         <!-- employee timesheet details -->
-        <q-card-section 
-            v-if="!props.isLoading" 
-            class="q-pa-none justify-center" 
-            :class="$q.screen.lt.lg? 'column': 'row'"
-        >
-            <TimesheetApprovalEmployeeDetailsHoursWorkedChart 
+        <q-card-section v-if="!props.isLoading" class="q-pa-none justify-center">
+            <TimesheetApprovalEmployeeDetailsHoursWorkedChart
+                ref="chart1" 
                 :key="props.updateKey" 
                 :raw-data="props.employeeDetails"
                 style="min-height: 300px;"
+                :options="({
+                    indexAxis: $q.screen.lt.md? 'y' : 'x',
+                    plugins: {
+                        legend: {
+                            labels: {
+                                boxWidth: 15,
+                            },
+                        },
+                        title: {
+                            display: true,
+                            text: t('timeSheetValidations.hoursWorkedChartTitle'),
+                            color: '#616161'
+                        }
+                    },
+                    scales: {
+                        x: {
+                            stacked: true,
+                        },
+                        y: {
+                            stacked: true,
+                        }
+                    }
+                })"
             />
         </q-card-section>
+
+        <q-separator class="q-my-sm"/>
+
+        <q-card-section :horizontal="$q.screen.gt.sm">
+            <q-card-section class="q-pa-none q-ma-none">
+                <TimesheetApprovalEmployeeDetailsShiftTypesChart
+                    :key="props.updateKey + 1"
+                    style="max-height: 200px;"
+                    :raw-data="props.employeeOverview"
+                    :options="({
+                        plugins:{
+                            legend:{
+                                labels:{
+                                    boxWidth: 15,
+                                }
+                            }
+                        }
+                    })"
+                />
+            </q-card-section>
+            <q-separator :vertical="$q.screen.gt.sm" class="q-my-sm" />
+            <q-card-section class="q-py-none q-ma-none">
+                <TimesheetApprovalEmployeeExpensesChart
+                    :style="$q.screen.lt.md ? 'min-height: 200px;': '' "
+                    :raw-data="props.employeeDetails"
+                    :options="({
+                        plugins: {
+                            title: {
+                               display: true,
+                               text: t('timeSheetValidations.reportFilterExpenses'),
+                               color: '#616161'
+                           },
+                           legend:{
+                               labels:{
+                                   boxWidth: 15,
+                               }
+                           }
+                        },
+                        elements: {
+                            point:{
+                                pointStyle: false,
+                            }
+                        },
+                    })"
+                />
+            </q-card-section>
+        </q-card-section>
     </q-card>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue
index 3f361fb..e97cd0c 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue
@@ -26,6 +26,7 @@
     const report_filter_company = ref<boolean[]>([true, true]);
     const report_filter_type = ref<boolean[]>([true, true, true, true]);
     const clicked_employee_name = ref<string>('');
+    const clicked_employee_email = ref<string>('');
     const update_key = ref<number>(0);
 
     const columns = computed((): QTableColumn<PayPeriodOverviewEmployee>[] => [
@@ -114,13 +115,19 @@
             }
     }
 
+    const getEmployeeOverview = (email: string): PayPeriodOverviewEmployee | undefined => {
+        return timesheet_approval_api.getPayPeriodOverviewByEmployeeEmail(email);
+    }
+
     const onDateSelected = async (date_string: string) => {
         await timesheet_approval_api.getPayPeriodOverviewByDate(date_string);
     };
 
     const onClickedDetails = async (email: string, name: string) => {
-        clicked_employee_name.value = name; 
+        clicked_employee_name.value = name;
+        clicked_employee_email.value = email; 
         is_showing_details.value = true;
+        
         await timesheet_approval_api.getTimesheetsByPayPeriodAndEmail(email);
     };
     
@@ -143,13 +150,14 @@
         transition-show="jump-down"
         transition-hide="jump-down"
         @before-show="() => update_key += 1"
+        class="full-width"
     >   
         <TimesheetApprovalEmployeeDetails 
             :is-loading="timesheet_store.is_loading"
             :employee-name="clicked_employee_name"
+            :employee-overview="getEmployeeOverview(clicked_employee_email)"
             :employee-details="timesheet_store.pay_period_employee_details"
             :update-key="update_key"
-            class="full-width"
         />
     </q-dialog>
     <div class="q-pa-md">
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 4f424d5..3b7018d 100644
--- a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
+++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
@@ -1,6 +1,7 @@
 import { useTimesheetStore } from "src/stores/timesheet-store";
 import { useAuthStore } from "src/stores/auth-store";
 import type { PayPeriodReportFilters } from "../types/timesheet-approval-pay-period-report-interface";
+import type { PayPeriodOverviewEmployee } from "../types/timesheet-approval-pay-period-overview-employee-interface";
 
 export const useTimesheetApprovalApi = () => {
     const timesheet_store = useTimesheetStore();
@@ -15,6 +16,10 @@ export const useTimesheetApprovalApi = () => {
         }
     }
 
+    const getPayPeriodOverviewByEmployeeEmail = (email: string): PayPeriodOverviewEmployee | undefined => {
+        return timesheet_store.pay_period_overview_employees.find(overview => overview.email === email);
+    };
+
     /* This method attempts to get the next or previous pay period. 
         It checks if pay period number is within a certain range, adjusts pay period and year accordingly.
         It then requests the matching pay period object to set as current pay period from server.
@@ -39,11 +44,11 @@ export const useTimesheetApprovalApi = () => {
         if (success) {
             await timesheet_store.getTimesheetApprovalPayPeriodEmployeeOverviews(new_pay_year, new_pay_period_no, auth_store.user.email);
         }
-    }
+    };
 
     const getTimesheetsByPayPeriodAndEmail = async (employee_email: string) => {
         await timesheet_store.getTimesheetsByPayPeriodAndEmail(employee_email);
-    }
+    };
 
     const getTimesheetApprovalCSVReport = async ( report_filter_company: boolean[], report_filter_type: boolean[] ) => {
         const [ targo, solucom ] = report_filter_company;
@@ -54,11 +59,12 @@ export const useTimesheetApprovalApi = () => {
         } as PayPeriodReportFilters;
         
         await timesheet_store.getTimesheetApprovalCSVReport(options);
-    }
+    };
 
     return {
         getPayPeriodOverviewByDate,
         getNextPayPeriodOverview,
+        getPayPeriodOverviewByEmployeeEmail,
         getTimesheetsByPayPeriodAndEmail,
         getTimesheetApprovalCSVReport
     }
diff --git a/src/modules/timesheet-approval/services/services-timesheet-approval.ts b/src/modules/timesheet-approval/services/services-timesheet-approval.ts
index 43f509d..814e7f1 100644
--- a/src/modules/timesheet-approval/services/services-timesheet-approval.ts
+++ b/src/modules/timesheet-approval/services/services-timesheet-approval.ts
@@ -19,13 +19,12 @@ export const timesheetApprovalService = {
     getPayPeriodEmployeeOverviews: async (year: number, period_number: number, supervisor_email: string): Promise<PayPeriodOverview> => {
         // TODO: REMOVE MOCK DATA PEFORE PUSHING TO PROD
         const response = await api.get(`pay-periods/${year}/${period_number}/${supervisor_email}`);
-        console.log('all employee data: ', response.data);
+        console.log('pay period data: ', response.data);
         return response.data;
     },
 
     getTimesheetsByPayPeriodAndEmail: async (year: number, period_no: number, email: string): Promise<PayPeriodEmployeeDetails> => {
         const response = await api.get('timesheets', { params: { year, period_no, email, }});
-        console.log('employee details: ', response.data);
         return response.data;
     },
 
diff --git a/src/modules/timesheets/types/timesheet-details-interface.ts b/src/modules/timesheets/types/timesheet-details-interface.ts
index b9d940d..13a2817 100644
--- a/src/modules/timesheets/types/timesheet-details-interface.ts
+++ b/src/modules/timesheets/types/timesheet-details-interface.ts
@@ -6,6 +6,16 @@ export interface TimesheetDetailsWeek {
     expenses: WeekDay<TimesheetDetailsDailyExpenses>;
 }
 
+export interface TimesheetDetailsDailySchedule {
+    shifts: Shift[];
+    regular_hours: number;    
+    evening_hours: number;
+    emergency_hours: number;
+    overtime_hours: number;
+    short_date: string;     // ex. 08/24
+    break_duration?: number;
+}
+
 type WeekDay<T> = {
     sun: T;
     mon: T;
@@ -16,23 +26,14 @@ type WeekDay<T> = {
     sat: T;
 }
 
-interface TimesheetDetailsDailySchedule {
-    shifts: Shift[];
-    regular_hours: number;    
-    evening_hours: number;
-    emergency_hours: number;
-    overtime_hours: number;
-    short_date: string;     // ex. 08/24
-    break_duration?: number;
-}
 
 interface TimesheetDetailsDailyExpenses {
-    costs: Expense[];
-    mileage: Expense[];
+    cash: Expense[];
+    km: Expense[];
     [otherType: string]: Expense[]; //for possible future types of expenses
 }
 
-interface Expense {
+export interface Expense {
     is_approved: boolean;
     amount: number;
 };
\ No newline at end of file

From 5bd19c4a9c2b63ff12f7bfa2f05b3d05373346ac Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Thu, 4 Sep 2025 17:04:03 -0400
Subject: [PATCH 2/5] feat(deatils): add component to show row details,
 finalize appearance of chart layout, finetune mobile layout

---
 src/css/quasar.variables.scss                 |   4 +-
 src/i18n/en-ca/index.ts                       |  16 +-
 src/i18n/fr-ca/index.ts                       |  16 +-
 .../supervisor/supervisor-crew-table.vue      |  36 ++--
 .../navigation/header-bar-avatar.vue          |   2 +-
 ...al-employee-details-hours-worked-chart.vue |   2 +-
 ...val-employee-details-shift-types-chart.vue |   2 +-
 ...sheet-approval-employee-expenses-chart.vue |  23 +--
 ...t-approval-employee-details-shifts-row.vue |  28 +++
 ...sheet-approval-employee-details-shifts.vue |  67 ++++++-
 .../timesheet-approval-employee-details.vue   | 125 -------------
 ...t-approval-employee-overview-list-item.vue |   2 +-
 ...esheet-approval-employee-overview-list.vue |   9 +-
 .../timesheet-approval-period-picker.vue      |   2 +-
 .../composables/use-timesheet-approval-api.ts |   8 +-
 .../timesheet-approval-employee-details.vue   | 166 ++++++++++++++++++
 .../pages/timesheet-approval.vue              |  17 +-
 .../services/services-timesheet-approval.ts   |   1 +
 ...l-pay-period-employee-details-interface.ts |   9 +-
 ...-pay-period-overview-employee-interface.ts |  14 +-
 .../types/timesheet-details-interface.ts      |  41 ++++-
 .../types/timesheet-shift-interface.ts        |   8 +-
 src/stores/timesheet-store.ts                 |   4 +-
 23 files changed, 398 insertions(+), 204 deletions(-)
 create mode 100644 src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
 delete mode 100644 src/modules/timesheet-approval/components/timesheet-approval-employee-details.vue
 create mode 100644 src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue

diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index f919a2b..1725989 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -24,7 +24,7 @@ $dark: #000;
 $dark-page: #323232;
 
 $positive: #21ba45;
-$negative: #ff576ba9;
-$info: #54bbdd;
+$negative: #e6364b;
+$info: #6bb9e7;
 $warning: #eec964;
 $white: white;
diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index c7ac6d0..beebf76 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -260,13 +260,13 @@ export default {
     shiftComment: 'Comment',
     overTimeTitle: 'Overtime regular hours: ',
     totalPayedHours: 'Total hours worked: ',
-    //shiftOptions
-    regularShift: 'Regular',
-    eveningShift: 'Evening',
-    emergencyShift: 'Emergency',
-    sickDay: 'Sick working day',
-    vacancyDay: 'vacation',
-    holiday: 'Holiday',
+    // shift options
+    shiftRegular: 'regular',
+    shiftEvening: 'evening',
+    shiftEmergency: 'emergency',
+    shiftSick: 'sick',
+    shiftVacation: 'vacation',
+    shiftHoliday: 'holiday',
     dateRangesFrom: 'from',
     dateRangesTo: 'to',
     shiftBankedHours: 'Total hours to bank',
@@ -369,7 +369,7 @@ export default {
     message_start: 'Attention: You will be automatically logged out in',
     message_end: 'seconds if you do not interact with the screen.',
   },
-  daysOfWeek: {
+  weekdays: {
     Sunday: ' Sunday',
     Monday: 'Monday',
     Tuesday: 'Tuesday',
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 2008d4a..8e4aeba 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -55,7 +55,7 @@ export default {
     message_start: 'Attention : vous serez automatiquement déconnecté dans',
     message_end: 'secondes si vous n’interagissez pas avec l’écran.',
   },
-  daysOfWeek: {
+  weekdays: {
     Sunday: 'dimanche',
     Monday: 'lundi',
     Tuesday: 'mardi',
@@ -310,13 +310,13 @@ export default {
     shiftComment: 'Commentaire',
     overTimeTitle: 'Heures régulières supplémentaires: ',
     totalPayedHours: 'Total des heures travaillées: ',
-    //shiftOptions
-    regularShift: 'Régulier',
-    eveningShift: 'Soir',
-    emergencyShift: 'Urgence',
-    sickDay: 'Maladie',
-    vacancyDay: 'Vacances',
-    holiday: 'Férié',
+    // shift options
+    shiftRegular: 'régulier',
+    shiftEvening: 'soir',
+    shiftEmergency: 'urgence',
+    shiftSick: 'maladie',
+    shiftVacation: 'vacances',
+    shiftHoliday: 'férié',
     dateRangesFrom: 'du',
     dateRangesTo: 'au',
     shiftBankedHours: 'Totale d’heures à banquer',
diff --git a/src/modules/employee-list/components/supervisor/supervisor-crew-table.vue b/src/modules/employee-list/components/supervisor/supervisor-crew-table.vue
index df4b982..8b40260 100644
--- a/src/modules/employee-list/components/supervisor/supervisor-crew-table.vue
+++ b/src/modules/employee-list/components/supervisor/supervisor-crew-table.vue
@@ -68,24 +68,26 @@
             <template v-slot:top>
                 <div class="row full-width q-mb-sm">
                 <q-btn push icon="person_add" color="primary" :label="$t('usersListPage.addButton')"/>
+                
                 <q-space />
-                    <q-btn-toggle push class="q-mr-md" color="white" text-color="primary" toggle-color="primary" v-model="isGridMode"
-                    :options="[
-                        {icon: 'grid_view', value: true},
-                        {icon: 'view_list', value: false},
-                    ]"/>
-                    <q-input 
-                        outlined 
-                        dense 
-                        rounded
-                        v-model="filter"
-                        :label="$t('shared.searchBar')" 
-                        label-color="primary" bg-color="white" color="primary" 
-                    >
-                        <template v-slot:append>
-                            <q-icon name="search" color="primary"/>
-                        </template>
-                    </q-input>
+                
+                <q-btn-toggle push class="q-mr-md" color="white" text-color="primary" toggle-color="primary" v-model="isGridMode"
+                :options="[
+                    {icon: 'grid_view', value: true},
+                    {icon: 'view_list', value: false},
+                ]"/>
+                <q-input 
+                    outlined 
+                    dense 
+                    rounded
+                    v-model="filter"
+                    :label="$t('shared.searchBar')" 
+                    label-color="primary" bg-color="white" color="primary" 
+                >
+                    <template v-slot:append>
+                        <q-icon name="search" color="primary"/>
+                    </template>
+                </q-input>
                 </div>
             </template>
 
diff --git a/src/modules/shared/components/navigation/header-bar-avatar.vue b/src/modules/shared/components/navigation/header-bar-avatar.vue
index 420a6cb..89e7edf 100644
--- a/src/modules/shared/components/navigation/header-bar-avatar.vue
+++ b/src/modules/shared/components/navigation/header-bar-avatar.vue
@@ -14,7 +14,7 @@
         <q-item-section :side="$q.screen.gt.sm">
             <q-avatar rounded >
                 <q-img src="src/assets/targo-default-avatar.png" />
-                <q-badge floating color="red" v-if="notifAmount > 0" >{{ notifAmount }}</q-badge>
+                <q-badge floating color="negative" v-if="notifAmount > 0" >{{ notifAmount }}</q-badge>
             </q-avatar>
         </q-item-section>
 
diff --git a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue
index 0b57ee6..424e65c 100644
--- a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue
+++ b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue
@@ -47,7 +47,7 @@
                 {
                     label: t('timeSheetValidations.hoursWorkedEmergency'),
                     data: emergency_hours,
-                    backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-warning').trim(),
+                    backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-accent').trim(),
                 },
                 {
                     label: t('timeSheetValidations.hoursWorkedOvertime'),
diff --git a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue
index a736325..f5b4c1a 100644
--- a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue
+++ b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue
@@ -35,7 +35,7 @@
             backgroundColor: [
                 getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
                 getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
-                getComputedStyle(document.body).getPropertyValue('--q-warning').trim(),
+                getComputedStyle(document.body).getPropertyValue('--q-accent').trim(),
                 getComputedStyle(document.body).getPropertyValue('--q-negative').trim(),
             ]
         }];
diff --git a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue
index 1817716..7bd78b5 100644
--- a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue
+++ b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue
@@ -1,35 +1,34 @@
 <script setup lang="ts">
     /*eslint-disable*/
     import { ref } from 'vue';
-    import { Line } from 'vue-chartjs';
+    import { Bar } from 'vue-chartjs';
     import { useI18n } from 'vue-i18n';
-    import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, PointElement, LineController, CategoryScale, LinearScale, TimeScale, type ChartData, type ChartOptions, type Plugin, type ChartDataset } from 'chart.js';
+    import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale, type ChartData, type ChartOptions, type Plugin, type ChartDataset } from 'chart.js';
     import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
     import type { Expense } from 'src/modules/timesheets/types/timesheet-details-interface';
 
     const { t } = useI18n();
 
-    ChartJS.register(Title, Tooltip, Legend, LineElement, LineController, PointElement, CategoryScale, LinearScale, TimeScale);
+    ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale);
     ChartJS.defaults.font.family = '"Roboto", sans-serif';
-    // ChartJS.defaults.maintainAspectRatio = false;
+    ChartJS.defaults.maintainAspectRatio = false;
 
     const props = withDefaults(defineProps<{
         rawData: PayPeriodEmployeeDetails | undefined;
-        options?: ChartOptions<"line"> | undefined;
-        plugins?: Plugin<"line">[] | undefined;
+        options?: ChartOptions<"bar"> | undefined;
+        plugins?: Plugin<"bar">[] | undefined;
     }>(), {
         options: () => ({}),
         plugins: () => [],
     });
 
-    const expenses_dataset = ref<ChartDataset<'line'>[]>([]);
+    const expenses_dataset = ref<ChartDataset<'bar'>[]>([]);
     const expenses_labels = ref<string[]>([]);
 
-    const getExpensesData = (): ChartData<'line'> => {
+    const getExpensesData = (): ChartData<'bar'> => {
         if (props.rawData) {
             const all_weeks = [props.rawData.week1, props.rawData.week2];
             const all_days = all_weeks.flatMap( week => Object.values(week.expenses));
-            console.log('all days: ', all_days);
             const all_days_dates = all_weeks.flatMap( week => Object.values(week.shifts))          
 
             const all_costs = all_days.map( day => getTotalAmounts(day.cash));
@@ -40,16 +39,12 @@
                 {
                     label: t('timeSheet.refund'),
                     data: all_costs,
-                    borderColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
                     backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
-                    borderWidth: 2,
                 },
                 {
                     label: t('timeSheet.mileage'),
                     data: all_mileage,
-                    borderColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
                     backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
-                    borderWidth: 2,
                 }
             ]
 
@@ -74,7 +69,7 @@
 </script>
 
 <template>
-    <Line 
+    <Bar 
         :data="getExpensesData()"
         :options="props.options"
     />
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
new file mode 100644
index 0000000..7e1a586
--- /dev/null
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+    import { date } from 'quasar';
+    import type { TimesheetDetailsDailySchedule } from 'src/modules/timesheets/types/timesheet-details-interface';
+
+    const props = defineProps<{
+        dayData: TimesheetDetailsDailySchedule;
+    }>();
+
+    const getWeekDay = (shift_date: string): string => {
+        const d = date.extractDate(shift_date, 'YYYY/MM/DD');
+        return date.formatDate(d, 'dddd');
+    };
+</script>
+
+<template>
+    <q-card>
+        <q-card-section 
+            horizontal 
+            class="q-pa-xs"
+        >
+            <q-card-section>
+                <div class="bg-primary rounded-10">
+                    <span></span>
+                </div>
+            </q-card-section>
+        </q-card-section>
+    </q-card>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue
index 6806242..c8fa840 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue
@@ -1,14 +1,77 @@
 <script setup lang="ts">
-import { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
+    /*eslint-disable*/
+    import { useI18n } from 'vue-i18n';
+    import TimesheetApprovalEmployeeDetailsShiftsRow from 'src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue';
+    import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
 
+    const { t } = useI18n();
 
     const props = defineProps<{
         rawData: PayPeriodEmployeeDetails;
     }>();
 
-    
+    const weeks = [ props.rawData.week1, props.rawData?.week2 ];
+    const days = weeks.flatMap( week => Object.values(week.shifts) );
+
+    const getShiftColor = (type: string): string => {
+        switch(type) {
+            case 'REGULAR':     return 'primary';
+            case 'EVENING':     return 'info';
+            case 'EMERGENCY':   return 'teal-14';
+            case 'OVERTIME':    return 'negative';
+            case 'VACATION':    return 'purple-10';
+            case 'HOLIDAY':     return 'indigo-13';
+            case 'SICK':        return 'grey-9';
+            default :           return '';
+        }
+    };
+
 </script>
 
 <template>
+    <div class="bg-secondary full-width q-pa-sm rounded-5">
+        <q-card
+            v-for="day, index in days"    
+        >
+            <q-card-section>
+                <TimesheetApprovalEmployeeDetailsShiftsRow 
+                    :day-data="day"
+                />
+            </q-card-section>
+        </q-card>
+    </div>
 
+    <!-- <q-card-section :horizontal="$q.screen.gt.sm" class="row">
+        <q-card-section v-for="week in props.rawData" class="q-pa-none q-ma-none col">
+            <div v-for="day, index in week.shifts">
+                <div class=" text-primary text-uppercase q-pa-none q-ma-none"> {{ day_labels[index] }} </div>
+                <div v-if="day.shifts.length === 0" class="q-pa-none q-ma-none">---</div>
+                <div v-for="shift in day.shifts">
+                    <div class="text-caption row items-center">
+                        <div class="col row">
+                            {{ shift.start_time }}
+                            <q-space />
+                            <q-separator vertical :color="getShiftColor(shift.type)"/>
+                        </div>
+                        <q-separator class="col" :color="getShiftColor(shift.type)"/>
+                        <div class="col-auto">
+                            <q-badge
+                                :color="getShiftColor(shift.type)"
+                                class="text-lowercase text-center"
+                                style="font-size: 0.8em;"
+                            >
+                                {{ shift.type }}
+                            </q-badge>
+                        </div>
+                        <q-separator class="col" :color="getShiftColor(shift.type)"/>
+                        <div class="col row">
+                            <q-separator vertical :color="getShiftColor(shift.type)"/>
+                            <q-space />
+                            {{ shift.end_time }} 
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </q-card-section>
+    </q-card-section> -->
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-details.vue
deleted file mode 100644
index 9c7c955..0000000
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-details.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<script setup lang="ts">
-    /*eslint-disable*/
-    import { useI18n } from 'vue-i18n';
-    import TimesheetApprovalEmployeeDetailsHoursWorkedChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue';
-    import TimesheetApprovalEmployeeDetailsShiftTypesChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue';
-    import TimesheetApprovalEmployeeExpensesChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue';
-    import type { PayPeriodOverviewEmployee } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface';
-    import type { PayPeriodEmployeeDetails } from '../types/timesheet-approval-pay-period-employee-details-interface';
-
-    const props = defineProps<{
-        isLoading: boolean;
-        employeeName: string;
-        employeeOverview: PayPeriodOverviewEmployee | undefined;
-        employeeDetails: PayPeriodEmployeeDetails | undefined;
-        updateKey: number;
-    }>();
-
-    const { t } = useI18n();
-</script>
-
-<template>
-    <q-card class="q-pa-md bg-white shadow-12 full-width rounded-15">
-        <!-- loader -->
-        <q-card-section 
-            v-if="props.isLoading"
-            class="text-center"
-        >
-            <q-spinner 
-                color="primary"
-                size="5em"
-                :thickness="10"
-            />
-            <div class="text-primary text-h6 text-weight-bold">
-                {{ $t('shared.loading') }}
-            </div>
-        </q-card-section>
-        
-        <!-- employee name -->
-        <q-card-section v-if="!props.isLoading" class="text-h5 text-weight-bolder text-center full-width text-primary q-pa-none text-uppercase">
-            {{ props.employeeName }}
-            <q-separator class="q-mb-sm" color="accent" size="2px" />
-        </q-card-section>
-        
-
-        <!-- employee timesheet details -->
-        <q-card-section v-if="!props.isLoading" class="q-pa-none justify-center">
-            <TimesheetApprovalEmployeeDetailsHoursWorkedChart
-                ref="chart1" 
-                :key="props.updateKey" 
-                :raw-data="props.employeeDetails"
-                style="min-height: 300px;"
-                :options="({
-                    indexAxis: $q.screen.lt.md? 'y' : 'x',
-                    plugins: {
-                        legend: {
-                            labels: {
-                                boxWidth: 15,
-                            },
-                        },
-                        title: {
-                            display: true,
-                            text: t('timeSheetValidations.hoursWorkedChartTitle'),
-                            color: '#616161'
-                        }
-                    },
-                    scales: {
-                        x: {
-                            stacked: true,
-                        },
-                        y: {
-                            stacked: true,
-                        }
-                    }
-                })"
-            />
-        </q-card-section>
-
-        <q-separator class="q-my-sm"/>
-
-        <q-card-section :horizontal="$q.screen.gt.sm">
-            <q-card-section class="q-pa-none q-ma-none">
-                <TimesheetApprovalEmployeeDetailsShiftTypesChart
-                    :key="props.updateKey + 1"
-                    style="max-height: 200px;"
-                    :raw-data="props.employeeOverview"
-                    :options="({
-                        plugins:{
-                            legend:{
-                                labels:{
-                                    boxWidth: 15,
-                                }
-                            }
-                        }
-                    })"
-                />
-            </q-card-section>
-            <q-separator :vertical="$q.screen.gt.sm" class="q-my-sm" />
-            <q-card-section class="q-py-none q-ma-none">
-                <TimesheetApprovalEmployeeExpensesChart
-                    :style="$q.screen.lt.md ? 'min-height: 200px;': '' "
-                    :raw-data="props.employeeDetails"
-                    :options="({
-                        plugins: {
-                            title: {
-                               display: true,
-                               text: t('timeSheetValidations.reportFilterExpenses'),
-                               color: '#616161'
-                           },
-                           legend:{
-                               labels:{
-                                   boxWidth: 15,
-                               }
-                           }
-                        },
-                        elements: {
-                            point:{
-                                pointStyle: false,
-                            }
-                        },
-                    })"
-                />
-            </q-card-section>
-        </q-card-section>
-    </q-card>
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue
index 3fbf2a1..94a9f62 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue
@@ -52,7 +52,7 @@
                     dense
                     v-for="(button, index) in card_buttons"
                     :key="index"
-                    class="q-py-none bg-white q-my-xs"
+                    class="q-py-none q-my-xs"
                     color="primary"
                     :icon="button.icon"
                     @click="button.onClick"
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue
index e97cd0c..55424b0 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue
@@ -8,7 +8,7 @@
     
     import TimesheetApprovalPeriodPicker from '../components/timesheet-approval-period-picker.vue';
     import TimesheetApprovalEmployeeOverviewListItem from './timesheet-approval-employee-overview-list-item.vue';
-    import TimesheetApprovalEmployeeDetails from '../components/timesheet-approval-employee-details.vue';
+    import TimesheetApprovalEmployeeDetails from 'src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue';
     
     import { date, type QTableColumn } from 'quasar';
     import type { PayPeriodOverviewEmployee } from '../types/timesheet-approval-pay-period-overview-employee-interface';
@@ -115,7 +115,7 @@
             }
     }
 
-    const getEmployeeOverview = (email: string): PayPeriodOverviewEmployee | undefined => {
+    const getEmployeeOverview = (email: string): PayPeriodOverviewEmployee => {
         return timesheet_approval_api.getPayPeriodOverviewByEmployeeEmail(email);
     }
 
@@ -150,7 +150,8 @@
         transition-show="jump-down"
         transition-hide="jump-down"
         @before-show="() => update_key += 1"
-        class="full-width"
+        :full-width="$q.screen.gt.sm"
+        :full-height="$q.screen.gt.sm"
     >   
         <TimesheetApprovalEmployeeDetails 
             :is-loading="timesheet_store.is_loading"
@@ -179,7 +180,7 @@
         >
             <!-- Top Bar that contains Search, Title, Filters -->
             <template v-slot:top>
-                <div :class="$q.screen.lt.md ? 'column justify-center items-center' : 'full-width row'">
+                <div class="full-width" :class="$q.screen.lt.md ? 'text-center q-gutter-sm' : 'row'">
                     <!-- Date Picker -->
                     <TimesheetApprovalPeriodPicker 
                         :is-disabled="timesheet_store.is_loading"
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue b/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue
index fd6b6bd..8681c73 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue
@@ -26,7 +26,7 @@
 </script>
 
 <template>
-    <div class="row">
+    <div class="row justify-center">
         <q-btn 
             push rounded 
             icon="keyboard_arrow_left"  
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 3b7018d..952b192 100644
--- a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
+++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
@@ -1,7 +1,7 @@
 import { useTimesheetStore } from "src/stores/timesheet-store";
 import { useAuthStore } from "src/stores/auth-store";
 import type { PayPeriodReportFilters } from "../types/timesheet-approval-pay-period-report-interface";
-import type { PayPeriodOverviewEmployee } from "../types/timesheet-approval-pay-period-overview-employee-interface";
+import { default_pay_period_overview_employee, type PayPeriodOverviewEmployee } from "../types/timesheet-approval-pay-period-overview-employee-interface";
 
 export const useTimesheetApprovalApi = () => {
     const timesheet_store = useTimesheetStore();
@@ -16,8 +16,10 @@ export const useTimesheetApprovalApi = () => {
         }
     }
 
-    const getPayPeriodOverviewByEmployeeEmail = (email: string): PayPeriodOverviewEmployee | undefined => {
-        return timesheet_store.pay_period_overview_employees.find(overview => overview.email === email);
+    const getPayPeriodOverviewByEmployeeEmail = (email: string): PayPeriodOverviewEmployee => {
+        const employee_overview = timesheet_store.pay_period_overview_employees.find(overview => overview.email === email);
+        if (employee_overview !== undefined) return employee_overview;
+        return default_pay_period_overview_employee;
     };
 
     /* This method attempts to get the next or previous pay period. 
diff --git a/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue b/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue
new file mode 100644
index 0000000..9c94a89
--- /dev/null
+++ b/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+    /*eslint-disable*/
+    import { ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import TimesheetApprovalEmployeeDetailsShifts from 'src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue';
+    import TimesheetApprovalEmployeeDetailsHoursWorkedChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue';
+    import TimesheetApprovalEmployeeDetailsShiftTypesChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue';
+    import TimesheetApprovalEmployeeExpensesChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue';
+    import type { PayPeriodOverviewEmployee } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface';
+    import type { PayPeriodEmployeeDetails } from '../types/timesheet-approval-pay-period-employee-details-interface';
+
+    const props = defineProps<{
+        isLoading: boolean;
+        employeeName: string;
+        employeeOverview: PayPeriodOverviewEmployee;
+        employeeDetails: PayPeriodEmployeeDetails;
+        updateKey: number;
+    }>();
+
+    const { t } = useI18n();
+    const is_showing_graph = ref<boolean>(true);
+</script>
+
+<template>
+    <q-card 
+        class="q-pa-md bg-white shadow-12 rounded-15 column no-wrap relative" 
+        :style="$q.screen.gt.sm ? 'width: 70vw !important; height: 90vh !important;' : '' "
+    >
+        <!-- loader -->
+        <q-card-section 
+            v-if="props.isLoading"
+            class="absolute-center text-center"
+        >
+            <q-spinner 
+                color="primary"
+                size="5em"
+                :thickness="10"
+            />
+            <div class="text-primary text-h6 text-weight-bold">
+                {{ $t('shared.loading') }}
+            </div>
+        </q-card-section>
+        
+        <!-- employee name -->
+        <q-card-section 
+            v-if="!props.isLoading"
+            class="text-h5 text-weight-bolder text-center text-primary q-pa-none text-uppercase col-auto"
+        >
+            {{ props.employeeName }}
+            
+            <q-separator class="q-mb-sm" color="accent" size="2px" />
+            <q-card-actions align="center">     
+                <q-card flat class="bg-secondary rounded-5 q-pa-xs">
+                    <q-btn-toggle
+                        color="white" 
+                        text-color="primary" 
+                        toggle-color="primary" 
+                        v-model="is_showing_graph"
+                        :options="[
+                            {icon: 'bar_chart', value: true},
+                            {icon: 'mode_edit_outline', value: false},
+                        ]"
+                    />
+                </q-card>
+            </q-card-actions>
+        </q-card-section>
+        
+        <!-- employee timesheet details edit -->
+        <q-card-section v-if="!props.isLoading && !is_showing_graph">
+            <TimesheetApprovalEmployeeDetailsShifts 
+                :raw-data="props.employeeDetails"
+            />
+        </q-card-section>
+        
+        <!-- employee timesheet details, but look at these graphs -->
+        <q-card-section v-if="!props.isLoading && is_showing_graph" class="q-pa-md col column full-width no-wrap">
+            <q-card-section class="q-pa-none col no-wrap" style="min-height: 300px;">
+                <TimesheetApprovalEmployeeDetailsHoursWorkedChart
+                    :raw-data="props.employeeDetails"
+                    :options="({
+                        indexAxis: $q.screen.lt.md? 'y' : 'x',
+                        plugins: {
+                            legend: {
+                                labels: {
+                                    boxWidth: 15,
+                                },
+                            },
+                            title: {
+                                display: true,
+                                text: t('timeSheetValidations.hoursWorkedChartTitle'),
+                                color: '#616161'
+                            }
+                        },
+                        scales: {
+                            x: {
+                                stacked: true,
+                            },
+                            y: {
+                                stacked: true,
+                                suggestedMin: 0,
+                                suggestedMax: 10,
+                                
+                            }
+                        }
+                    })"
+                />
+            </q-card-section>
+    
+            <q-separator class="q-ma-sm"/>
+    
+            <q-card-section 
+                :horizontal="$q.screen.gt.sm" 
+                class="justify-center no-wrap col full-width q-pa-none"
+            >
+                <q-card-section class="q-pa-none q-ma-none col-4">
+                    <TimesheetApprovalEmployeeDetailsShiftTypesChart
+                        :raw-data="props.employeeOverview"
+                        :options="({
+                            plugins:{
+                                legend:{
+                                    labels:{
+                                        boxWidth: 15,
+                                    }
+                                }
+                            }
+                        })"
+                    />
+                </q-card-section>
+    
+                <q-separator :vertical="$q.screen.gt.sm" class="q-ma-md" />
+                
+                <q-card-section  class="q-pa-none q-ma-none col" :class="$q.screen.lt.md ? 'full-width' : ''">
+                    <TimesheetApprovalEmployeeExpensesChart
+                        :style="$q.screen.lt.md ? 'min-height: 300px;': '' "
+                        :raw-data="props.employeeDetails"
+                        :options="({
+                            indexAxis: $q.screen.lt.md? 'y' : 'x',
+                            plugins: {
+                                title: {
+                                   display: true,
+                                   text: t('timeSheetValidations.reportFilterExpenses'),
+                                   color: '#616161'
+                               },
+                               legend:{
+                                   labels:{
+                                       boxWidth: 15,
+                                   }
+                               }
+                            },
+                            scales: {
+                                x: {
+                                    stacked: true
+                                },
+                                y: {
+                                    suggestedMin: 0,
+                                    suggestedMax: 100,
+                                    stacked: true
+                                }
+                            }
+                        })"
+                    />
+                </q-card-section>
+            </q-card-section>
+        </q-card-section>
+    </q-card>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/pages/timesheet-approval.vue b/src/modules/timesheet-approval/pages/timesheet-approval.vue
index 391bc69..c924c24 100644
--- a/src/modules/timesheet-approval/pages/timesheet-approval.vue
+++ b/src/modules/timesheet-approval/pages/timesheet-approval.vue
@@ -34,17 +34,26 @@
         padding 
         class="q-pa-md bg-secondary"
     >
-        <div class="text-h4 row justify-center q-mt-lg text-uppercase text-weight-bolder text-grey-8">
+        <div class="text-h4 row justify-center text-center q-mt-lg text-uppercase text-weight-bolder text-grey-8">
             {{ $t('pageTitles.timeSheetValidations') }}
         </div>
         <div class="row items-center justify-center q-py-none q-my-none">
-            <div class="text-primary text-h6 text-uppercase">
+            <div 
+                class="text-primary text-uppercase text-weight-bold"
+                :class="$q.screen.lt.md ? '' : 'text-h6'"
+            >
                 {{ pay_period_label.start_date }}
             </div>
-            <div class="text-grey-8 text-weight-bold text-uppercase q-mx-md">
+            <div 
+                class="text-grey-8 text-uppercase q-mx-md"
+                :class="$q.screen.lt.md ? 'text-weight-medium text-caption' : 'text-weight-bold'"
+            >
                 {{ $t('timeSheet.dateRangesTo') }}
             </div>
-            <div class="text-primary text-h6 text-uppercase">
+            <div 
+                class="text-primary text-uppercase text-center text-weight-bold"
+                :class="$q.screen.lt.md ? '' : 'text-h6'"
+            >
                 {{ pay_period_label.end_date }}
             </div>
         </div>
diff --git a/src/modules/timesheet-approval/services/services-timesheet-approval.ts b/src/modules/timesheet-approval/services/services-timesheet-approval.ts
index 814e7f1..48761e7 100644
--- a/src/modules/timesheet-approval/services/services-timesheet-approval.ts
+++ b/src/modules/timesheet-approval/services/services-timesheet-approval.ts
@@ -25,6 +25,7 @@ export const timesheetApprovalService = {
 
     getTimesheetsByPayPeriodAndEmail: async (year: number, period_no: number, email: string): Promise<PayPeriodEmployeeDetails> => {
         const response = await api.get('timesheets', { params: { year, period_no, email, }});
+        console.log('employee details: ', response.data);
         return response.data;
     },
 
diff --git a/src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface.ts b/src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface.ts
index bc8955e..01ce1b9 100644
--- a/src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface.ts
+++ b/src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface.ts
@@ -1,6 +1,11 @@
-import type { TimesheetDetailsWeek } from "src/modules/timesheets/types/timesheet-details-interface";
+import { default_timesheet_details_week, type TimesheetDetailsWeek } from "src/modules/timesheets/types/timesheet-details-interface";
 
 export interface PayPeriodEmployeeDetails {
     week1: TimesheetDetailsWeek;
     week2: TimesheetDetailsWeek;
-};
\ No newline at end of file
+};
+
+export const default_pay_period_employee_details = {
+    week1: default_timesheet_details_week(),
+    week2: default_timesheet_details_week(),
+}
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface.ts b/src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface.ts
index b0ebd46..30f2fe3 100644
--- a/src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface.ts
+++ b/src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface.ts
@@ -8,4 +8,16 @@ export interface PayPeriodOverviewEmployee {
     expenses: number;
     mileage: number;
     is_approved: boolean;
-};
\ No newline at end of file
+};
+
+export const default_pay_period_overview_employee: PayPeriodOverviewEmployee = {
+    email: '',
+    employee_name: '',
+    regular_hours: -1,
+    evening_hours: -1,
+    emergency_hours: -1,
+    overtime_hours: -1,
+    expenses: -1,
+    mileage: -1,
+    is_approved: false
+}
\ No newline at end of file
diff --git a/src/modules/timesheets/types/timesheet-details-interface.ts b/src/modules/timesheets/types/timesheet-details-interface.ts
index 13a2817..daf3874 100644
--- a/src/modules/timesheets/types/timesheet-details-interface.ts
+++ b/src/modules/timesheets/types/timesheet-details-interface.ts
@@ -16,6 +16,11 @@ export interface TimesheetDetailsDailySchedule {
     break_duration?: number;
 }
 
+export interface Expense {
+    is_approved: boolean;
+    amount: number;
+};
+
 type WeekDay<T> = {
     sun: T;
     mon: T;
@@ -33,7 +38,35 @@ interface TimesheetDetailsDailyExpenses {
     [otherType: string]: Expense[]; //for possible future types of expenses
 }
 
-export interface Expense {
-    is_approved: boolean;
-    amount: number;
-};
\ No newline at end of file
+
+// empty default builder
+const makeWeek = <T>(factory: () => T): WeekDay<T> => ({
+    sun: factory(),
+    mon: factory(),
+    tue: factory(),
+    wed: factory(),
+    thu: factory(),
+    fri: factory(),
+    sat: factory(),
+});
+
+const emptyDailySchedule = (): TimesheetDetailsDailySchedule => ({
+    shifts: [],
+    regular_hours: 0,
+    evening_hours: 0,
+    emergency_hours: 0,
+    overtime_hours: 0,
+    short_date: "",
+    break_duration: 0,
+});
+
+const emptyDailyExpenses = (): TimesheetDetailsDailyExpenses => ({
+    cash: [],
+    km: [],
+});
+
+export const default_timesheet_details_week = (): TimesheetDetailsWeek => ({
+    is_approved: false,
+    shifts: makeWeek(emptyDailySchedule),
+    expenses: makeWeek(emptyDailyExpenses),
+});
diff --git a/src/modules/timesheets/types/timesheet-shift-interface.ts b/src/modules/timesheets/types/timesheet-shift-interface.ts
index 474b532..e75f528 100644
--- a/src/modules/timesheets/types/timesheet-shift-interface.ts
+++ b/src/modules/timesheets/types/timesheet-shift-interface.ts
@@ -1,5 +1,7 @@
 export interface Shift {
-    is_approved: boolean;
-    start: string;
-    end: string;
+    date        : string;
+    start_time  : string;
+    end_time    : string;
+    type        : string;
+    is_approved : boolean;
 }
\ No newline at end of file
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index caeba8c..ad97173 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/services-timesheet-approval';
 import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
 import type { PayPeriodOverviewEmployee } from "src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface";
-import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
+import { default_pay_period_employee_details, type PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
 import type { PayPeriodReportFilters } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-report-interface';
 
 const default_pay_period: PayPeriod = { 
@@ -20,7 +20,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     const current_pay_period = ref<PayPeriod>(default_pay_period);
     const pay_period_overview_employees = ref<PayPeriodOverviewEmployee[]>([]);
     const pay_period_overview_employee_approval_statuses = ref<{key: string, value: boolean}[] | undefined>();
-    const pay_period_employee_details = ref<PayPeriodEmployeeDetails | undefined>();
+    const pay_period_employee_details = ref<PayPeriodEmployeeDetails>(default_pay_period_employee_details);
     const pay_period_report = ref();
 
     const getPayPeriodByDate = async (date_string: string): Promise<boolean> => {

From fbf81146664eb80a7402d59628c2f7850784f896 Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Fri, 5 Sep 2025 17:08:43 -0400
Subject: [PATCH 3/5] feat(details): add ui elements to shift rows in employee
 details

---
 src/i18n/en-ca/index.ts                       |  14 +--
 src/i18n/fr-ca/index.ts                       |  12 +-
 ...val-employee-details-shifts-row-header.vue |  58 +++++++++
 ...t-approval-employee-details-shifts-row.vue | 116 +++++++++++++++---
 ...sheet-approval-employee-details-shifts.vue |  96 ++++++---------
 ...t-approval-employee-overview-list-item.vue |   2 +-
 ...esheet-approval-employee-overview-list.vue |  13 +-
 .../timesheet-approval-employee-details.vue   |  13 +-
 .../types/timesheet-shift-interface.ts        |   8 ++
 ...d-calculator.ts => date-and-time-utils.ts} |   2 +-
 10 files changed, 231 insertions(+), 103 deletions(-)
 create mode 100644 src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue
 rename src/utils/{pay-period-calculator.ts => date-and-time-utils.ts} (96%)

diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index beebf76..eaf461a 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -342,13 +342,13 @@ export default {
     reportFilterVacation: 'Vacation',
   },
   shiftColumns: {
-    title: 'Shifts',
-    column_1: 'Type',
-    column_2: 'Start time',
-    column_3: 'End time',
-    column_4: 'Comment',
-    column_5: 'Status',
-    column_6: 'Supervisor’s report',
+    title: 'shifts',
+    labelType: 'type',
+    labelIn: 'start',
+    labelOut: 'end',
+    labelComment: 'comment',
+    labelState: 'state',
+    labelSupervisorReport: 'supervisor report',
   },
   expenseColumns: {
     title: 'Expenses',
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 8e4aeba..873ab03 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -236,12 +236,12 @@ export default {
   },
   shiftColumns: {
     title: 'Quarts de travail',
-    column_1: 'Type',
-    column_2: 'Entrée',
-    column_3: 'Sortie',
-    column_4: 'Commentaire',
-    column_5: 'État',
-    column_6: 'Rapport du superviseur',
+    labelType: 'type',
+    labelIn: 'entrée',
+    labelOut: 'sortie',
+    labelComment: 'commentaire',
+    labelState: 'état',
+    labelSupervisorReport: 'rapport du superviseur',
   },
   shiftsTemplate: {
     tabTitle1: 'Quarts de travail',
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue
new file mode 100644
index 0000000..4cb2735
--- /dev/null
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue
@@ -0,0 +1,58 @@
+<template>
+    <!-- This header component is placed in absolute top in order to keep the timestamps
+     below it centered. As such it must imitate the column width of the shift row below it 
+     as much as possible, hence the empty q-card-sections. -->
+    <q-card-section
+        horizontal
+        class="text-uppercase text-center items-center q-px-xs"
+    >   
+        <!-- Date widget -->
+        <q-card-section class="q-px-xs q-py-none col-auto" style="width: 75px;"></q-card-section>
+
+        <!-- shift row itself -->
+        <q-card-section horizontal class="q-px-xs col">
+            <!-- punch-in timestamps -->
+            <q-card-section class="col q-px-xs q-py-none">
+                <q-item-label class="text-weight-bolder text-primary">
+                        {{ $t('shiftColumns.labelIn') }}
+                </q-item-label>
+            </q-card-section>
+    
+            <!-- arrows pointing to punch-out timestamps -->
+            <q-card-section class="col-auto q-pa-none q-mx-sm">
+                <q-icon 
+                    name="double_arrow"
+                    color="transparent"
+                    size="24px"
+                    style="transform: translateX(5px);"
+                />
+                <q-icon 
+                    name="double_arrow"
+                    color="transparent"
+                    size="24px"
+                    style="transform: translateX(-5px);"
+                />
+            </q-card-section>
+    
+            <!-- punch-out timestamps -->
+            <q-card-section class="col q-px-xs q-py-none">
+                <q-item-label class="text-weight-bolder text-primary">
+                    {{ $t('shiftColumns.labelOut') }}
+                </q-item-label>
+            </q-card-section>
+    
+            <!-- shift type badge -->
+            <q-card-section class="col q-pa-none"></q-card-section>
+
+            <!-- comment button -->
+            <q-card-section class="col-auto q-pa-none">
+                <q-btn
+                    icon="chat_bubble_outline" 
+                    color="transparent"
+                    flat
+                    class="q-pa-sm"
+                />
+            </q-card-section>
+        </q-card-section>
+    </q-card-section>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
index 7e1a586..741360f 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
@@ -1,28 +1,112 @@
 <script setup lang="ts">
-    import { date } from 'quasar';
+    import { computed } from 'vue';
+    import { default_shift } from 'src/modules/timesheets/types/timesheet-shift-interface';
     import type { TimesheetDetailsDailySchedule } from 'src/modules/timesheets/types/timesheet-details-interface';
 
     const props = defineProps<{
         dayData: TimesheetDetailsDailySchedule;
     }>();
-
-    const getWeekDay = (shift_date: string): string => {
-        const d = date.extractDate(shift_date, 'YYYY/MM/DD');
-        return date.formatDate(d, 'dddd');
+    const shifts_or_placeholder = computed(() => {
+        return props.dayData.shifts.length > 0 ? props.dayData.shifts : [default_shift];
+    })
+    
+    const getShiftColor = (type: string): string => {
+        switch(type) {
+            case 'REGULAR':     return 'primary';
+            case 'EVENING':     return 'info';
+            case 'EMERGENCY':   return 'teal-14';
+            case 'OVERTIME':    return 'negative';
+            case 'VACATION':    return 'purple-10';
+            case 'HOLIDAY':     return 'indigo-13';
+            case 'SICK':        return 'grey-9';
+            default :           return 'transparent';
+        }
     };
 </script>
 
 <template>
-    <q-card>
-        <q-card-section 
-            horizontal 
-            class="q-pa-xs"
-        >
-            <q-card-section>
-                <div class="bg-primary rounded-10">
-                    <span></span>
-                </div>
-            </q-card-section>
+    <q-card-section 
+        horizontal 
+        class="q-pa-xs text-uppercase text-center items-center"
+    >
+        <!-- punch-in timestamps -->
+        <q-card-section class="q-pa-none col">
+            <q-item-label 
+                v-for="shift, index in props.dayData.shifts" 
+                :key="index"
+                class="text-weight-bolder text-grey-8 bg-secondary q-pa-xs rounded-5"
+                style="font-size: 1.75em; line-height: 80% !important;"
+            >
+                {{ shift.start_time }}
+            </q-item-label>
+            <q-item-label v-if="props.dayData.shifts.length === 0" 
+                class="text-weight-bolder text-grey-5"
+                style="font-size: 1.75em; line-height: 80% !important;"
+            > 
+                --- 
+            </q-item-label>
         </q-card-section>
-    </q-card>
+
+        <!-- arrows pointing to punch-out timestamps -->
+        <q-card-section 
+            horizontal class="items-center justify-center  q-ma-sm col-auto">
+            <q-icon 
+                name="double_arrow"
+                :color=" props.dayData.shifts.length > 0 ? 'accent' : 'transparent'"
+                size="24px"
+                style="transform: translateX(5px);"
+            />
+            <q-icon 
+                name="double_arrow"
+                :color=" props.dayData.shifts.length > 0 ? 'primary' : 'transparent'"
+                size="24px"
+                style="transform: translateX(-5px);"
+            />
+        </q-card-section>
+
+        <!-- punch-out timestamps -->
+        <q-card-section class="q-pa-none col">
+            <q-item-label 
+                v-for="shift, index in props.dayData.shifts" 
+                :key="index"
+                class="text-weight-bolder text-grey-8 bg-secondary q-pa-xs rounded-5"
+                style="font-size: 1.75em; line-height: 80% !important;"
+            >
+                {{ shift.end_time }}
+            </q-item-label>
+            <q-item-label v-if="props.dayData.shifts.length === 0" 
+                class="text-weight-bolder text-grey-5"
+                style="font-size: 1.75em; line-height: 80% !important;"
+            > 
+                --- 
+            </q-item-label>
+        </q-card-section>
+
+        <!-- shift type badge -->
+        <q-card-section class="col q-pa-none">
+            <q-badge
+                v-for="shift, index in shifts_or_placeholder"
+                :key="index"
+                :color="shift.type ? getShiftColor(shift.type) : 'transparent'"
+                :label="shift.type || ''"
+                class="text-weight-medium justify-center"
+                style="width: 80px; font-size: 0.8em;"
+            />
+        </q-card-section>
+
+        <!-- comment button -->
+        <q-card-actions
+            class="col-auto q-pa-none"
+        >
+            <q-btn
+                v-for="(shift, index) in shifts_or_placeholder" 
+                :key="index" 
+                flat
+                :disable="shift.type === ''"
+                icon="chat_bubble_outline" 
+                :color="shift.type === '' ? 'grey-5' : 'grey-8'"
+                class="q-pa-sm"
+            />
+        </q-card-actions>
+    </q-card-section>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue
index c8fa840..24432cc 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue
@@ -1,77 +1,57 @@
 <script setup lang="ts">
-    /*eslint-disable*/
-    import { useI18n } from 'vue-i18n';
     import TimesheetApprovalEmployeeDetailsShiftsRow from 'src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue';
+    import TimesheetApprovalEmployeeDetailsShiftsRowHeader from 'src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue';
+    import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
     import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
 
-    const { t } = useI18n();
-
     const props = defineProps<{
         rawData: PayPeriodEmployeeDetails;
-    }>();
-
-    const weeks = [ props.rawData.week1, props.rawData?.week2 ];
-    const days = weeks.flatMap( week => Object.values(week.shifts) );
-
-    const getShiftColor = (type: string): string => {
-        switch(type) {
-            case 'REGULAR':     return 'primary';
-            case 'EVENING':     return 'info';
-            case 'EMERGENCY':   return 'teal-14';
-            case 'OVERTIME':    return 'negative';
-            case 'VACATION':    return 'purple-10';
-            case 'HOLIDAY':     return 'indigo-13';
-            case 'SICK':        return 'grey-9';
-            default :           return '';
-        }
+        currentPayPeriod: PayPeriod;
+    }>();                         
+    
+    const getDate = (shift_date: string): Date => {
+        return new Date(props.currentPayPeriod.pay_year.toString() + '/' + shift_date);
     };
-
 </script>
 
 <template>
-    <div class="bg-secondary full-width q-pa-sm rounded-5">
+    <div 
+        v-for="week, index in props.rawData"
+        :key="index"
+        class="q-px-xs q-pt-xs rounded-5 col"
+    >
         <q-card
-            v-for="day, index in days"    
+            v-for="day, day_index in week.shifts"
+            :key="day_index"
+            flat
+            bordered
+            class="row items-center rounded-10 q-mb-xs"
         >
-            <q-card-section>
+            <TimesheetApprovalEmployeeDetailsShiftsRowHeader class="absolute-top" />
+            <q-card-section class="col-auto q-pa-xs text-white">
+                <div 
+                    class="bg-primary rounded-10 q-pa-xs text-center" 
+                    style="width: 75px;"
+                >
+                    <q-item-label 
+                        style="font-size: 0.8em;"
+                        class="text-uppercase"
+                    >{{ $d(getDate(day.short_date), {weekday: 'long'}) }}</q-item-label>
+                    <q-item-label 
+                        class="text-weight-bolder"
+                        style="font-size: 3em; line-height: 90% !important;"
+                    >{{ day.short_date.split('/')[1] }}</q-item-label>
+                    <q-item-label 
+                        style="font-size: 0.8em;"
+                        class="text-uppercase"
+                    >{{ $d(getDate(day.short_date), {month: 'long'}) }}</q-item-label>
+                </div>
+            </q-card-section>
+            <q-card-section class="col q-pa-none">
                 <TimesheetApprovalEmployeeDetailsShiftsRow 
                     :day-data="day"
                 />
             </q-card-section>
         </q-card>
     </div>
-
-    <!-- <q-card-section :horizontal="$q.screen.gt.sm" class="row">
-        <q-card-section v-for="week in props.rawData" class="q-pa-none q-ma-none col">
-            <div v-for="day, index in week.shifts">
-                <div class=" text-primary text-uppercase q-pa-none q-ma-none"> {{ day_labels[index] }} </div>
-                <div v-if="day.shifts.length === 0" class="q-pa-none q-ma-none">---</div>
-                <div v-for="shift in day.shifts">
-                    <div class="text-caption row items-center">
-                        <div class="col row">
-                            {{ shift.start_time }}
-                            <q-space />
-                            <q-separator vertical :color="getShiftColor(shift.type)"/>
-                        </div>
-                        <q-separator class="col" :color="getShiftColor(shift.type)"/>
-                        <div class="col-auto">
-                            <q-badge
-                                :color="getShiftColor(shift.type)"
-                                class="text-lowercase text-center"
-                                style="font-size: 0.8em;"
-                            >
-                                {{ shift.type }}
-                            </q-badge>
-                        </div>
-                        <q-separator class="col" :color="getShiftColor(shift.type)"/>
-                        <div class="col row">
-                            <q-separator vertical :color="getShiftColor(shift.type)"/>
-                            <q-space />
-                            {{ shift.end_time }} 
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </q-card-section>
-    </q-card-section> -->
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue
index 94a9f62..4952663 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue
@@ -60,7 +60,7 @@
                     <q-tooltip 
                         anchor="top middle"
                         self="center middle" 
-                        class="bg-primary uppercase text-weight-bold"
+                        class="bg-primary text-uppercase text-weight-bold"
                     >
                         {{$t(button.label)}}
                     </q-tooltip>
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue
index 55424b0..d7626a9 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue
@@ -2,24 +2,19 @@
     /* eslint-disable */
     import { computed, onMounted, ref } from 'vue';
     import { useI18n } from 'vue-i18n';
-    
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { useTimesheetApprovalApi } from '../composables/use-timesheet-approval-api';
-    
     import TimesheetApprovalPeriodPicker from '../components/timesheet-approval-period-picker.vue';
     import TimesheetApprovalEmployeeOverviewListItem from './timesheet-approval-employee-overview-list-item.vue';
     import TimesheetApprovalEmployeeDetails from 'src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue';
-    
     import { date, type QTableColumn } from 'quasar';
     import type { PayPeriodOverviewEmployee } from '../types/timesheet-approval-pay-period-overview-employee-interface';
 
     const { t } = useI18n();
     const timesheet_store = useTimesheetStore();
     const timesheet_approval_api = useTimesheetApprovalApi();
-
     const FORWARD = 1
     const BACKWARD = -1
-    
     const filter = ref<string | number | null>('');
     const original_approvals = ref<Record<string, boolean>>({});
     const is_showing_details = ref<boolean>(false);
@@ -28,7 +23,6 @@
     const clicked_employee_name = ref<string>('');
     const clicked_employee_email = ref<string>('');
     const update_key = ref<number>(0);
-
     const columns = computed((): QTableColumn<PayPeriodOverviewEmployee>[] => [
         { 
             name: 'employee_name', 
@@ -76,25 +70,21 @@
             sortable: true 
         }
     ]);
-    
     const has_changes = computed(() => {
         return timesheet_store.pay_period_overview_employees.some(emp => {
             return emp.is_approved !== original_approvals.value[emp.email];
         });
     });
-
     const is_not_enough_filters = computed(() => {
         return report_filter_company.value.filter(val => val === true).length < 1 ||
                report_filter_type.value.filter(val => val === true).length < 1;
     })
-
     const filter_types_labels = [
         t('timeSheetValidations.reportFilterShifts'),
         t('timeSheetValidations.reportFilterExpenses'),
         t('timeSheetValidations.reportFilterHoliday'),
         t('timeSheetValidations.reportFilterVacation'),
     ]
-
     const is_calendar_limit = computed( () => {
         return  timesheet_store.current_pay_period.pay_year === 2024 && 
                 timesheet_store.current_pay_period.pay_period_no <= 1;
@@ -150,7 +140,7 @@
         transition-show="jump-down"
         transition-hide="jump-down"
         @before-show="() => update_key += 1"
-        :full-width="$q.screen.gt.sm"
+        full-width
         :full-height="$q.screen.gt.sm"
     >   
         <TimesheetApprovalEmployeeDetails 
@@ -158,6 +148,7 @@
             :employee-name="clicked_employee_name"
             :employee-overview="getEmployeeOverview(clicked_employee_email)"
             :employee-details="timesheet_store.pay_period_employee_details"
+            :current-pay-period="timesheet_store.current_pay_period"
             :update-key="update_key"
         />
     </q-dialog>
diff --git a/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue b/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue
index 9c94a89..60e6ff2 100644
--- a/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue
+++ b/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue
@@ -8,12 +8,14 @@
     import TimesheetApprovalEmployeeExpensesChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue';
     import type { PayPeriodOverviewEmployee } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface';
     import type { PayPeriodEmployeeDetails } from '../types/timesheet-approval-pay-period-employee-details-interface';
+import { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
 
     const props = defineProps<{
         isLoading: boolean;
         employeeName: string;
         employeeOverview: PayPeriodOverviewEmployee;
         employeeDetails: PayPeriodEmployeeDetails;
+        currentPayPeriod: PayPeriod;
         updateKey: number;
     }>();
 
@@ -23,7 +25,7 @@
 
 <template>
     <q-card 
-        class="q-pa-md bg-white shadow-12 rounded-15 column no-wrap relative" 
+        class="q-pa-sm bg-white shadow-12 rounded-15 column no-wrap relative" 
         :style="$q.screen.gt.sm ? 'width: 70vw !important; height: 90vh !important;' : '' "
     >
         <!-- loader -->
@@ -58,7 +60,7 @@
                         v-model="is_showing_graph"
                         :options="[
                             {icon: 'bar_chart', value: true},
-                            {icon: 'mode_edit_outline', value: false},
+                            {icon: 'edit', value: false},
                         ]"
                     />
                 </q-card>
@@ -66,9 +68,14 @@
         </q-card-section>
         
         <!-- employee timesheet details edit -->
-        <q-card-section v-if="!props.isLoading && !is_showing_graph">
+        <q-card-section 
+            v-if="!props.isLoading && !is_showing_graph"
+            :horizontal="$q.screen.gt.sm"
+            class="q-pa-none bg-secondary rounded-10"
+        >
             <TimesheetApprovalEmployeeDetailsShifts 
                 :raw-data="props.employeeDetails"
+                :current-pay-period="props.currentPayPeriod"
             />
         </q-card-section>
         
diff --git a/src/modules/timesheets/types/timesheet-shift-interface.ts b/src/modules/timesheets/types/timesheet-shift-interface.ts
index e75f528..ca9a316 100644
--- a/src/modules/timesheets/types/timesheet-shift-interface.ts
+++ b/src/modules/timesheets/types/timesheet-shift-interface.ts
@@ -4,4 +4,12 @@ export interface Shift {
     end_time    : string;
     type        : string;
     is_approved : boolean;
+}
+
+export const default_shift: Shift = {
+    date: '',
+    start_time: '',
+    end_time: '',
+    type: '',
+    is_approved: false,
 }
\ No newline at end of file
diff --git a/src/utils/pay-period-calculator.ts b/src/utils/date-and-time-utils.ts
similarity index 96%
rename from src/utils/pay-period-calculator.ts
rename to src/utils/date-and-time-utils.ts
index 36adb38..5ce223e 100644
--- a/src/utils/pay-period-calculator.ts
+++ b/src/utils/date-and-time-utils.ts
@@ -13,4 +13,4 @@ export const getCurrentPayPeriod = (today = new Date()): number => {
 
   console.log(current_period);
   return current_period;
-}
+}
\ No newline at end of file

From b8c9b8ed7604f4118a8f65ad497ea2dc020365cb Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Mon, 8 Sep 2025 10:00:25 -0400
Subject: [PATCH 4/5] feat(details): functional UI for detailed shift display,
 pending approval from higher-ups

---
 ...val-employee-details-shifts-row-header.vue | 91 ++++++++++---------
 ...t-approval-employee-details-shifts-row.vue | 16 ++--
 2 files changed, 56 insertions(+), 51 deletions(-)

diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue
index 4cb2735..e907035 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue
@@ -1,57 +1,60 @@
 <template>
     <!-- This header component is placed in absolute top in order to keep the timestamps
-     below it centered. As such it must imitate the column width of the shift row below it 
-     as much as possible, hence the empty q-card-sections. -->
+     below it vertically centered in the row. Since being absolute top makes it no longer 
+     follow the alignment of the shift rows below it, it must containt the same elements 
+     as them to remain aligned. -->
     <q-card-section
         horizontal
         class="text-uppercase text-center items-center q-px-xs"
     >   
         <!-- Date widget -->
-        <q-card-section class="q-px-xs q-py-none col-auto" style="width: 75px;"></q-card-section>
+        <q-card-section class="q-px-xs q-py-none col-auto"> <div class="q-px-xs q-py-none" style="width: 75px;"></div></q-card-section>
 
         <!-- shift row itself -->
-        <q-card-section horizontal class="q-px-xs col">
-            <!-- punch-in timestamps -->
-            <q-card-section class="col q-px-xs q-py-none">
-                <q-item-label class="text-weight-bolder text-primary">
-                        {{ $t('shiftColumns.labelIn') }}
-                </q-item-label>
-            </q-card-section>
-    
-            <!-- arrows pointing to punch-out timestamps -->
-            <q-card-section class="col-auto q-pa-none q-mx-sm">
-                <q-icon 
-                    name="double_arrow"
-                    color="transparent"
-                    size="24px"
-                    style="transform: translateX(5px);"
-                />
-                <q-icon 
-                    name="double_arrow"
-                    color="transparent"
-                    size="24px"
-                    style="transform: translateX(-5px);"
-                />
-            </q-card-section>
-    
-            <!-- punch-out timestamps -->
-            <q-card-section class="col q-px-xs q-py-none">
-                <q-item-label class="text-weight-bolder text-primary">
-                    {{ $t('shiftColumns.labelOut') }}
-                </q-item-label>
-            </q-card-section>
-    
-            <!-- shift type badge -->
-            <q-card-section class="col q-pa-none"></q-card-section>
+        <q-card-section class="col q-pa-none">
+            <q-card-section horizontal class="col q-px-xs">
+                <!-- punch-in timestamps -->
+                <q-card-section class="col q-px-xs q-py-none">
+                    <q-item-label class="text-weight-bolder text-primary">
+                            {{ $t('shiftColumns.labelIn') }}
+                    </q-item-label>
+                </q-card-section>
+        
+                <!-- arrows pointing to punch-out timestamps -->
+                <q-card-section class="col-auto q-pa-none q-mx-sm">
+                    <q-icon 
+                        name="double_arrow"
+                        color="transparent"
+                        size="24px"
+                        style="transform: translateX(5px);"
+                    />
+                    <q-icon 
+                        name="double_arrow"
+                        color="transparent"
+                        size="24px"
+                        style="transform: translateX(-5px);"
+                    />
+                </q-card-section>
+        
+                <!-- punch-out timestamps -->
+                <q-card-section class="col q-px-xs q-py-none">
+                    <q-item-label class="text-weight-bolder text-primary">
+                        {{ $t('shiftColumns.labelOut') }}
+                    </q-item-label>
+                </q-card-section>
+        
+                <!-- shift type badge -->
+                <q-card-section class="col column q-pa-none q-gutter-md"><div style="width: 80px;"></div></q-card-section>
 
-            <!-- comment button -->
-            <q-card-section class="col-auto q-pa-none">
-                <q-btn
-                    icon="chat_bubble_outline" 
-                    color="transparent"
-                    flat
-                    class="q-pa-sm"
-                />
+                <!-- comment button -->
+                <q-card-section class="col-auto column q-pa-none">
+                    <q-btn
+                        icon="chat_bubble_outline" 
+                        color="transparent"
+                        flat
+                        class="q-pa-sm col"
+                    />
+                </q-card-section>
             </q-card-section>
         </q-card-section>
     </q-card-section>
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
index 741360f..ae8b1a9 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
@@ -26,7 +26,7 @@
 
 <template>
     <q-card-section 
-        horizontal 
+        horizontal
         class="q-pa-xs text-uppercase text-center items-center"
     >
         <!-- punch-in timestamps -->
@@ -83,30 +83,32 @@
         </q-card-section>
 
         <!-- shift type badge -->
-        <q-card-section class="col q-pa-none">
+        <q-card-section class="col column q-pa-none items-center q-gutter-md">
             <q-badge
                 v-for="shift, index in shifts_or_placeholder"
                 :key="index"
                 :color="shift.type ? getShiftColor(shift.type) : 'transparent'"
                 :label="shift.type || ''"
-                class="text-weight-medium justify-center"
+                class="text-weight-medium justify-center col"
                 style="width: 80px; font-size: 0.8em;"
             />
         </q-card-section>
 
         <!-- comment button -->
-        <q-card-actions
-            class="col-auto q-pa-none"
+        <q-card-section
+            class="col-auto column q-pa-none items-end"
         >
+            <q-space />
             <q-btn
                 v-for="(shift, index) in shifts_or_placeholder" 
                 :key="index" 
                 flat
+                dense
                 :disable="shift.type === ''"
                 icon="chat_bubble_outline" 
                 :color="shift.type === '' ? 'grey-5' : 'grey-8'"
-                class="q-pa-sm"
+                class="q-pa-xs col"
             />
-        </q-card-actions>
+        </q-card-section>
     </q-card-section>
 </template>
\ No newline at end of file

From 072e0931a15dd3f5852eb1efaac09f41b3aff047 Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Mon, 8 Sep 2025 16:11:48 -0400
Subject: [PATCH 5/5] feat(details): Adjust shift display UI, DRY code in
 details components, prep for modifying UI

---
 src/css/quasar.variables.scss                 |   2 +-
 ...al-employee-details-hours-worked-chart.vue |  71 ++++++---
 ...val-employee-details-shift-types-chart.vue |  30 ++--
 ...sheet-approval-employee-expenses-chart.vue |  36 ++++-
 ...val-employee-details-shifts-row-header.vue |  46 ++----
 ...t-approval-employee-details-shifts-row.vue | 132 ++++++++---------
 ...sheet-approval-employee-details-shifts.vue |  33 +++--
 .../timesheet-approval-employee-details.vue   | 140 +++++++++---------
 .../types/timesheet-shift-interface.ts        |   4 +-
 9 files changed, 262 insertions(+), 232 deletions(-)

diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 1725989..4279286 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -26,5 +26,5 @@ $dark-page: #323232;
 $positive: #21ba45;
 $negative: #e6364b;
 $info: #6bb9e7;
-$warning: #eec964;
+$warning: #e4a944;
 $white: white;
diff --git a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue
index 424e65c..728e623 100644
--- a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue
+++ b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
     import { ref } from 'vue';
+    import { colors } from 'quasar';
     import { Bar } from 'vue-chartjs';
     import { useI18n } from 'vue-i18n';
     import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, type ChartData, type ChartOptions, type Plugin, type ChartDataset } from 'chart.js';
@@ -12,14 +13,11 @@
     ChartJS.defaults.font.family = '"Roboto", sans-serif';
     ChartJS.defaults.maintainAspectRatio = false;
 
-    const props = withDefaults(defineProps<{
+    const props = defineProps<{
         rawData: PayPeriodEmployeeDetails | undefined;
         options?: ChartOptions<"bar"> | undefined;
         plugins?: Plugin<"bar">[] | undefined;
-    }>(), {
-        options: () => ({}),
-        plugins: () => [],
-    });
+    }>();
 
     const hours_worked_labels = ref<string[]>([]);
     const hours_worked_dataset = ref<ChartDataset<'bar'>[]>([]);    
@@ -28,34 +26,36 @@
         if (props.rawData) {
             const all_weeks = [props.rawData.week1, props.rawData.week2];
             const all_days = all_weeks.flatMap( week => Object.values(week.shifts));
-            const regular_hours = all_days.map( day => day.regular_hours);
-            const evening_hours = all_days.map( day => day.evening_hours);
-            const emergency_hours = all_days.map( day => day.emergency_hours);
-            const overtime_hours = all_days.map( day => day.overtime_hours);
-
-            hours_worked_dataset.value = [
+            const datasetConfig = [
                 {
+                    key: 'regular_hours',
                     label: t('timeSheetValidations.hoursWorkedRegular'),
-                    data: regular_hours,
-                    backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
-                }, 
+                    color: colors.getPaletteColor('green-5'),
+                },
                 {
+                    key: 'evening_hours',
                     label: t('timeSheetValidations.hoursWorkedEvening'),
-                    data: evening_hours,
-                    backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
+                    color: colors.getPaletteColor('green-9'),
                 },
                 {
+                    key: 'emergency_hours',
                     label: t('timeSheetValidations.hoursWorkedEmergency'),
-                    data: emergency_hours,
-                    backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-accent').trim(),
+                    color: getComputedStyle(document.body).getPropertyValue('--q-warning').trim(),
                 },
                 {
+                    key: 'overtime_hours',
                     label: t('timeSheetValidations.hoursWorkedOvertime'),
-                    data: overtime_hours,
-                    backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-negative').trim(),
+                    color: getComputedStyle(document.body).getPropertyValue('--q-negative').trim(),
                 },
-            ]
-            hours_worked_labels.value = all_days.map( day => day.short_date);
+            ] as const;
+
+            hours_worked_dataset.value = datasetConfig.map(cfg => ({
+                label: cfg.label,
+                data: all_days.map(day => day[ cfg.key ]),
+                backgroundColor: cfg.color,
+            }));
+
+            hours_worked_labels.value = all_days.map(day => day.short_date);
         }
 
         return {
@@ -69,6 +69,31 @@
 <template>
     <Bar
         :data="getHoursWorkedData()"
-        :options="props.options"
+        :options="({
+            indexAxis: $q.screen.lt.md? 'y' : 'x',
+            plugins: {
+                legend: {
+                    labels: {
+                        boxWidth: 15,
+                    },
+                },
+                title: {
+                    display: true,
+                    text: t('timeSheetValidations.hoursWorkedChartTitle'),
+                    color: '#616161'
+                }
+            },
+            scales: {
+                x: {
+                    stacked: true,
+                },
+                y: {
+                    stacked: true,
+                    suggestedMin: 0,
+                    suggestedMax: 10,
+                    
+                }
+            }
+        })"
     />    
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue
index f5b4c1a..2e6cad1 100644
--- a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue
+++ b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
     /* eslint-disable */
     import { ref } from 'vue';
-    import { Doughnut } from 'vue-chartjs';
+    import { colors } from 'quasar';
     import { useI18n } from 'vue-i18n';
+    import { Doughnut } from 'vue-chartjs';
     import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale, type ChartData, type ChartOptions, type Plugin, type ChartDataset } from 'chart.js';
     import type { PayPeriodOverviewEmployee } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface';
     
@@ -12,14 +13,9 @@
     ChartJS.defaults.font.family = '"Roboto", sans-serif';
     ChartJS.defaults.maintainAspectRatio = false;
 
-    const props = withDefaults(defineProps<{
+    const props = defineProps<{
         rawData: PayPeriodOverviewEmployee | undefined;
-        options?: ChartOptions<"doughnut"> | undefined;
-        plugins?: Plugin<"doughnut">[] | undefined;
-    }>(), {
-        options: () => ({}),
-        plugins: () => [],
-    });
+    }>();
 
     const shift_type_labels = ref<string[]>([]);
     const shift_type_totals = ref<ChartDataset<'doughnut'>[]>([{ data: [40, 0, 2, 5], }]);
@@ -33,10 +29,10 @@
                 props.rawData.overtime_hours,
             ],
             backgroundColor: [
-                getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
-                getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
-                getComputedStyle(document.body).getPropertyValue('--q-accent').trim(),
-                getComputedStyle(document.body).getPropertyValue('--q-negative').trim(),
+                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
             ]
         }];
 
@@ -58,6 +54,14 @@
 <template>
     <Doughnut
         :data="data"
-        :options="props.options"
+        :options="({
+            plugins:{
+                legend:{
+                    labels:{
+                        boxWidth: 15,
+                    }
+                }
+            }
+        })"
     />
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue
index 7bd78b5..9382ccd 100644
--- a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue
+++ b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue
@@ -13,14 +13,9 @@
     ChartJS.defaults.font.family = '"Roboto", sans-serif';
     ChartJS.defaults.maintainAspectRatio = false;
 
-    const props = withDefaults(defineProps<{
+    const props = defineProps<{
         rawData: PayPeriodEmployeeDetails | undefined;
-        options?: ChartOptions<"bar"> | undefined;
-        plugins?: Plugin<"bar">[] | undefined;
-    }>(), {
-        options: () => ({}),
-        plugins: () => [],
-    });
+    }>();
 
     const expenses_dataset = ref<ChartDataset<'bar'>[]>([]);
     const expenses_labels = ref<string[]>([]);
@@ -71,6 +66,31 @@
 <template>
     <Bar 
         :data="getExpensesData()"
-        :options="props.options"
+        :options="({
+            indexAxis: $q.screen.lt.md? 'y' : 'x',
+            plugins: {
+                title: {
+                    display: true,
+                    text: t('timeSheetValidations.reportFilterExpenses'),
+                    color: '#616161'
+                },
+                legend:{
+                    labels:{
+                        boxWidth: 15,
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    stacked: true
+                },
+                y: {
+                    suggestedMin: 0,
+                    suggestedMax: 100,
+                    stacked: true
+                }
+            }
+        })"
+        :style="$q.screen.lt.md ? 'min-height: 300px;': '' "
     />
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue
index e907035..14cce9d 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue
@@ -1,59 +1,31 @@
 <template>
-    <!-- This header component is placed in absolute top in order to keep the timestamps
-     below it vertically centered in the row. Since being absolute top makes it no longer 
-     follow the alignment of the shift rows below it, it must containt the same elements 
-     as them to remain aligned. -->
     <q-card-section
         horizontal
-        class="text-uppercase text-center items-center q-px-xs"
-    >   
-        <!-- Date widget -->
-        <q-card-section class="q-px-xs q-py-none col-auto"> <div class="q-px-xs q-py-none" style="width: 75px;"></div></q-card-section>
-
+        class="text-uppercase text-center items-center q-pa-none"
+    >  
         <!-- shift row itself -->
         <q-card-section class="col q-pa-none">
-            <q-card-section horizontal class="col q-px-xs">
+            <q-card-section horizontal class="col q-pa-none">
                 <!-- punch-in timestamps -->
-                <q-card-section class="col q-px-xs q-py-none">
-                    <q-item-label class="text-weight-bolder text-primary">
+                <q-card-section class="col q-pa-none">
+                    <q-item-label class="text-weight-bolder text-primary" style="font-size: 0.7em;">
                             {{ $t('shiftColumns.labelIn') }}
                     </q-item-label>
                 </q-card-section>
         
                 <!-- arrows pointing to punch-out timestamps -->
-                <q-card-section class="col-auto q-pa-none q-mx-sm">
-                    <q-icon 
-                        name="double_arrow"
-                        color="transparent"
-                        size="24px"
-                        style="transform: translateX(5px);"
-                    />
-                    <q-icon 
-                        name="double_arrow"
-                        color="transparent"
-                        size="24px"
-                        style="transform: translateX(-5px);"
-                    />
+                <q-card-section class="col q-py-none q-px-sm">
                 </q-card-section>
         
                 <!-- punch-out timestamps -->
-                <q-card-section class="col q-px-xs q-py-none">
-                    <q-item-label class="text-weight-bolder text-primary">
+                <q-card-section class="col q-pa-none">
+                    <q-item-label class="text-weight-bolder text-primary" style="font-size: 0.7em;">
                         {{ $t('shiftColumns.labelOut') }}
                     </q-item-label>
                 </q-card-section>
-        
-                <!-- shift type badge -->
-                <q-card-section class="col column q-pa-none q-gutter-md"><div style="width: 80px;"></div></q-card-section>
 
                 <!-- comment button -->
-                <q-card-section class="col-auto column q-pa-none">
-                    <q-btn
-                        icon="chat_bubble_outline" 
-                        color="transparent"
-                        flat
-                        class="q-pa-sm col"
-                    />
+                <q-card-section class="col column q-pa-none">
                 </q-card-section>
             </q-card-section>
         </q-card-section>
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
index ae8b1a9..97da77d 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
@@ -1,114 +1,104 @@
 <script setup lang="ts">
-    import { computed } from 'vue';
-    import { default_shift } from 'src/modules/timesheets/types/timesheet-shift-interface';
-    import type { TimesheetDetailsDailySchedule } from 'src/modules/timesheets/types/timesheet-details-interface';
+    import type { Shift } from 'src/modules/timesheets/types/timesheet-shift-interface';
 
     const props = defineProps<{
-        dayData: TimesheetDetailsDailySchedule;
+        shift: Shift;
     }>();
-    const shifts_or_placeholder = computed(() => {
-        return props.dayData.shifts.length > 0 ? props.dayData.shifts : [default_shift];
-    })
     
     const getShiftColor = (type: string): string => {
         switch(type) {
-            case 'REGULAR':     return 'primary';
-            case 'EVENING':     return 'info';
-            case 'EMERGENCY':   return 'teal-14';
+            case 'REGULAR':     return 'secondary';
+            case 'EVENING':     return 'warning';
+            case 'EMERGENCY':   return 'amber-10';
             case 'OVERTIME':    return 'negative';
             case 'VACATION':    return 'purple-10';
-            case 'HOLIDAY':     return 'indigo-13';
-            case 'SICK':        return 'grey-9';
+            case 'HOLIDAY':     return 'purple-10';
+            case 'SICK':        return 'grey-8';
             default :           return 'transparent';
         }
     };
+
+    const getTextColor = (type: string): string => {
+        switch(type) {
+            case 'REGULAR': return 'grey-8';
+            case '':        return 'transparent';
+            default:        return 'white';
+        }
+    }
 </script>
 
 <template>
     <q-card-section 
         horizontal
-        class="q-pa-xs text-uppercase text-center items-center"
+        class="q-pa-none text-uppercase text-center items-center cursor-pointer rounded-10"
+        style="line-height: 1;"
     >
         <!-- punch-in timestamps -->
         <q-card-section class="q-pa-none col">
             <q-item-label 
-                v-for="shift, index in props.dayData.shifts" 
-                :key="index"
-                class="text-weight-bolder text-grey-8 bg-secondary q-pa-xs rounded-5"
-                style="font-size: 1.75em; line-height: 80% !important;"
+                class="text-weight-bolder q-pa-xs rounded-5"
+                :class="'bg-' + getShiftColor(props.shift.type) + ' text-' + getTextColor(props.shift.type)"
+                style="font-size: 1.5em; line-height: 80% !important;"
             >
-                {{ shift.start_time }}
-            </q-item-label>
-            <q-item-label v-if="props.dayData.shifts.length === 0" 
-                class="text-weight-bolder text-grey-5"
-                style="font-size: 1.75em; line-height: 80% !important;"
-            > 
-                --- 
+                {{ props.shift.start_time }}
             </q-item-label>
         </q-card-section>
 
         <!-- arrows pointing to punch-out timestamps -->
-        <q-card-section 
-            horizontal class="items-center justify-center  q-ma-sm col-auto">
-            <q-icon 
-                name="double_arrow"
-                :color=" props.dayData.shifts.length > 0 ? 'accent' : 'transparent'"
-                size="24px"
-                style="transform: translateX(5px);"
-            />
-            <q-icon 
-                name="double_arrow"
-                :color=" props.dayData.shifts.length > 0 ? 'primary' : 'transparent'"
-                size="24px"
-                style="transform: translateX(-5px);"
-            />
+        <q-card-section
+            horizontal 
+            class="items-center justify-center q-mx-sm col"
+        >
+            <div 
+                v-for="icon_data, index in [
+                    { transform: 'transform: translateX(5px);', color: 'accent' }, 
+                    { transform: 'transform: translateX(-5px);', color: 'primary' }]"
+                :key="index"
+            > 
+                <q-icon
+                    v-if="props.shift.type !== ''"
+                    name="double_arrow"
+                    :color="icon_data.color"
+                    size="24px"
+                    :style="icon_data.transform"
+                />
+            </div>
         </q-card-section>
 
         <!-- punch-out timestamps -->
         <q-card-section class="q-pa-none col">
             <q-item-label 
-                v-for="shift, index in props.dayData.shifts" 
-                :key="index"
-                class="text-weight-bolder text-grey-8 bg-secondary q-pa-xs rounded-5"
-                style="font-size: 1.75em; line-height: 80% !important;"
+                class="text-weight-bolder text-white q-pa-xs rounded-5"
+                :class="'bg-' + getShiftColor(props.shift.type) + ' text-' + getTextColor(props.shift.type)"
+                style="font-size: 1.5em; line-height: 80% !important;"
             >
-                {{ shift.end_time }}
-            </q-item-label>
-            <q-item-label v-if="props.dayData.shifts.length === 0" 
-                class="text-weight-bolder text-grey-5"
-                style="font-size: 1.75em; line-height: 80% !important;"
-            > 
-                --- 
+                {{ props.shift.end_time }}
             </q-item-label>
         </q-card-section>
 
-        <!-- shift type badge -->
-        <q-card-section class="col column q-pa-none items-center q-gutter-md">
-            <q-badge
-                v-for="shift, index in shifts_or_placeholder"
-                :key="index"
-                :color="shift.type ? getShiftColor(shift.type) : 'transparent'"
-                :label="shift.type || ''"
-                class="text-weight-medium justify-center col"
-                style="width: 80px; font-size: 0.8em;"
-            />
-        </q-card-section>
-
-        <!-- comment button -->
+        <!-- comment and expenses buttons -->
         <q-card-section
-            class="col-auto column q-pa-none items-end"
+            class="col q-pa-none text-right"
         >
-            <q-space />
+            <!-- chat_bubble_outline or announcement -->
             <q-btn
-                v-for="(shift, index) in shifts_or_placeholder" 
-                :key="index" 
-                flat
+                v-if="props.shift.type !== ''"
+                flat 
                 dense
-                :disable="shift.type === ''"
-                icon="chat_bubble_outline" 
-                :color="shift.type === '' ? 'grey-5' : 'grey-8'"
-                class="q-pa-xs col"
+                color='grey-8'
+                icon="chat_bubble_outline"
+                class="q-pa-none"
             />
+
+            <!-- insert_drive_file or request_quote -->
+            <q-btn
+                v-if="props.shift.type !== ''"
+                flat 
+                dense
+                color='grey-8'
+                icon="attach_money"        
+                class="q-pa-none q-mx-xs"
+            /> 
         </q-card-section>
     </q-card-section>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue
index 24432cc..14c2d6c 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue
@@ -2,12 +2,17 @@
     import TimesheetApprovalEmployeeDetailsShiftsRow from 'src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue';
     import TimesheetApprovalEmployeeDetailsShiftsRowHeader from 'src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue';
     import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
+    import { default_shift, type Shift } from 'src/modules/timesheets/types/timesheet-shift-interface';
     import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
 
     const props = defineProps<{
         rawData: PayPeriodEmployeeDetails;
         currentPayPeriod: PayPeriod;
     }>();                         
+
+    const shifts_or_placeholder = (shifts: Shift[]): Shift[] => {
+        return shifts.length > 0 ? shifts : [default_shift];
+    };
     
     const getDate = (shift_date: string): Date => {
         return new Date(props.currentPayPeriod.pay_year.toString() + '/' + shift_date);
@@ -27,29 +32,39 @@
             bordered
             class="row items-center rounded-10 q-mb-xs"
         >
-            <TimesheetApprovalEmployeeDetailsShiftsRowHeader class="absolute-top" />
             <q-card-section class="col-auto q-pa-xs text-white">
                 <div 
                     class="bg-primary rounded-10 q-pa-xs text-center" 
-                    style="width: 75px;"
+                    :style="$q.screen.lt.md ? '' : 'width: 75px;'"
                 >
                     <q-item-label 
-                        style="font-size: 0.8em;"
+                        style="font-size: 0.7em;"
                         class="text-uppercase"
-                    >{{ $d(getDate(day.short_date), {weekday: 'long'}) }}</q-item-label>
+                    >{{ $d(getDate(day.short_date), {weekday: $q.screen.lt.md ? 'short' : 'long'}) }}</q-item-label>
                     <q-item-label 
                         class="text-weight-bolder"
-                        style="font-size: 3em; line-height: 90% !important;"
+                        style="font-size: 2.5em; line-height: 90% !important;"
                     >{{ day.short_date.split('/')[1] }}</q-item-label>
                     <q-item-label 
-                        style="font-size: 0.8em;"
+                        style="font-size: 0.7em;"
                         class="text-uppercase"
-                    >{{ $d(getDate(day.short_date), {month: 'long'}) }}</q-item-label>
+                    >{{ $d(getDate(day.short_date), {month: $q.screen.lt.md ? 'short' : 'long'}) }}</q-item-label>
                 </div>
             </q-card-section>
             <q-card-section class="col q-pa-none">
-                <TimesheetApprovalEmployeeDetailsShiftsRow 
-                    :day-data="day"
+                <TimesheetApprovalEmployeeDetailsShiftsRowHeader />
+                <TimesheetApprovalEmployeeDetailsShiftsRow
+                    v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
+                    :key="shift_index" 
+                    :shift="shift"
+                />
+            </q-card-section>
+            <q-card-section class="q-pr-xs col-auto">
+                <q-btn
+                    push
+                    color="primary"
+                    icon="more_time"
+                    class="q-pa-sm"
                 />
             </q-card-section>
         </q-card>
diff --git a/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue b/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue
index 60e6ff2..048b5a7 100644
--- a/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue
+++ b/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue
@@ -9,6 +9,7 @@
     import type { PayPeriodOverviewEmployee } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface';
     import type { PayPeriodEmployeeDetails } from '../types/timesheet-approval-pay-period-employee-details-interface';
 import { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
+import { colors } from 'quasar';
 
     const props = defineProps<{
         isLoading: boolean;
@@ -21,6 +22,53 @@ import { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
 
     const { t } = useI18n();
     const is_showing_graph = ref<boolean>(true);
+
+    //  case 'REGULAR':     return 'green-5';
+    //         case 'EVENING':     return 'green-9';
+    //         case 'EMERGENCY':   return 'warning';
+    //         case 'OVERTIME':    return 'negative';
+    //         case 'VACATION':    return 'purple-10';
+    //         case 'HOLIDAY':     return 'purple-10';
+    //         case 'SICK':        return 'grey-9';
+    //         default :           return 'transparent';
+
+    type shiftColor = {
+        type: string;
+        color: string;
+        text_color?: string;
+    }
+
+    const shift_type_legend: shiftColor[] = [
+        {
+            type: t('timeSheet.shiftRegular'),
+            color: 'secondary',
+            text_color: 'grey-8',
+        },
+        {
+            type: t('timeSheet.shiftEvening'),
+            color: 'warning',
+        },
+        {
+            type: t('timeSheet.shiftEmergency'),
+            color: 'amber-10',
+        },
+        {
+            type: t('timeSheetValidations.hoursWorkedOvertime'),
+            color: 'negative',
+        },
+        {
+            type: t('timeSheet.shiftVacation'),
+            color: 'purple-10',
+        },
+        {
+            type: t('timeSheet.shiftHoliday'),
+            color: 'purple-8',
+        },
+        {
+            type: t('timeSheet.shiftSick'),
+            color: 'grey-8',
+        },
+    ]
 </script>
 
 <template>
@@ -51,7 +99,7 @@ import { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
             {{ props.employeeName }}
             
             <q-separator class="q-mb-sm" color="accent" size="2px" />
-            <q-card-actions align="center">     
+            <q-card-actions align="center" class="q-pa-none">     
                 <q-card flat class="bg-secondary rounded-5 q-pa-xs">
                     <q-btn-toggle
                         color="white" 
@@ -70,13 +118,30 @@ import { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
         <!-- employee timesheet details edit -->
         <q-card-section 
             v-if="!props.isLoading && !is_showing_graph"
-            :horizontal="$q.screen.gt.sm"
-            class="q-pa-none bg-secondary rounded-10"
+            class="q-pa-none"
         >
-            <TimesheetApprovalEmployeeDetailsShifts 
-                :raw-data="props.employeeDetails"
-                :current-pay-period="props.currentPayPeriod"
-            />
+            <!-- shift type color legend -->
+            <q-card-section class="q-py-xs q-px-none text-center q-my-s">
+                <q-badge
+                    v-for="shift_type in shift_type_legend"
+                    :color="shift_type.color"
+                    :label="shift_type.type"
+                    :text-color="shift_type.text_color || 'white'"
+                    class="q-px-md q-py-xs q-mx-xs q-my-none text-uppercase text-weight-bolder justify-center"
+                    style="width: 120px; font-size: 0.8em;"
+                />
+            </q-card-section>
+            
+            <!-- list of shifts, broken down into weekly columns -->
+            <q-card-section 
+                :horizontal="$q.screen.gt.sm"
+                class="q-pa-none bg-secondary rounded-10"
+            >
+                <TimesheetApprovalEmployeeDetailsShifts 
+                    :raw-data="props.employeeDetails"
+                    :current-pay-period="props.currentPayPeriod"
+                />
+            </q-card-section>
         </q-card-section>
         
         <!-- employee timesheet details, but look at these graphs -->
@@ -84,32 +149,6 @@ import { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
             <q-card-section class="q-pa-none col no-wrap" style="min-height: 300px;">
                 <TimesheetApprovalEmployeeDetailsHoursWorkedChart
                     :raw-data="props.employeeDetails"
-                    :options="({
-                        indexAxis: $q.screen.lt.md? 'y' : 'x',
-                        plugins: {
-                            legend: {
-                                labels: {
-                                    boxWidth: 15,
-                                },
-                            },
-                            title: {
-                                display: true,
-                                text: t('timeSheetValidations.hoursWorkedChartTitle'),
-                                color: '#616161'
-                            }
-                        },
-                        scales: {
-                            x: {
-                                stacked: true,
-                            },
-                            y: {
-                                stacked: true,
-                                suggestedMin: 0,
-                                suggestedMax: 10,
-                                
-                            }
-                        }
-                    })"
                 />
             </q-card-section>
     
@@ -122,15 +161,6 @@ import { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
                 <q-card-section class="q-pa-none q-ma-none col-4">
                     <TimesheetApprovalEmployeeDetailsShiftTypesChart
                         :raw-data="props.employeeOverview"
-                        :options="({
-                            plugins:{
-                                legend:{
-                                    labels:{
-                                        boxWidth: 15,
-                                    }
-                                }
-                            }
-                        })"
                     />
                 </q-card-section>
     
@@ -138,33 +168,7 @@ import { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
                 
                 <q-card-section  class="q-pa-none q-ma-none col" :class="$q.screen.lt.md ? 'full-width' : ''">
                     <TimesheetApprovalEmployeeExpensesChart
-                        :style="$q.screen.lt.md ? 'min-height: 300px;': '' "
                         :raw-data="props.employeeDetails"
-                        :options="({
-                            indexAxis: $q.screen.lt.md? 'y' : 'x',
-                            plugins: {
-                                title: {
-                                   display: true,
-                                   text: t('timeSheetValidations.reportFilterExpenses'),
-                                   color: '#616161'
-                               },
-                               legend:{
-                                   labels:{
-                                       boxWidth: 15,
-                                   }
-                               }
-                            },
-                            scales: {
-                                x: {
-                                    stacked: true
-                                },
-                                y: {
-                                    suggestedMin: 0,
-                                    suggestedMax: 100,
-                                    stacked: true
-                                }
-                            }
-                        })"
                     />
                 </q-card-section>
             </q-card-section>
diff --git a/src/modules/timesheets/types/timesheet-shift-interface.ts b/src/modules/timesheets/types/timesheet-shift-interface.ts
index ca9a316..8438cfc 100644
--- a/src/modules/timesheets/types/timesheet-shift-interface.ts
+++ b/src/modules/timesheets/types/timesheet-shift-interface.ts
@@ -8,8 +8,8 @@ export interface Shift {
 
 export const default_shift: Shift = {
     date: '',
-    start_time: '',
-    end_time: '',
+    start_time: '--:--',
+    end_time: '--:--',
     type: '',
     is_approved: false,
 }
\ No newline at end of file