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