From 2fb7b4a4c14ae08623f9a76141c39d018a8451ae Mon Sep 17 00:00:00 2001 From: Nicolas Drolet Date: Mon, 11 Aug 2025 17:04:21 -0400 Subject: [PATCH] feat(approvals): add page for timesheet approvals, complete date picker component, begin work for approvals table. --- src/css/quasar.variables.scss | 9 ++- src/i18n/en-ca/index.ts | 20 +++-- src/i18n/fr-ca/index.ts | 20 +++-- ...t-approval-employee-overview-list-item.vue | 0 ...esheet-approval-employee-overview-list.vue | 76 +++++++++++++++++++ .../timesheet-approval-period-picker.vue | 17 +++-- .../pages/timesheet-approval.vue | 6 +- .../services/services-timesheet-approval.ts | 27 +++++-- .../timesheet-approval-test-constants.ts | 4 +- src/stores/timesheet-store.ts | 76 +++++++++++++++++-- 10 files changed, 207 insertions(+), 48 deletions(-) create mode 100644 src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue create mode 100644 src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss index c257cfe..e728402 100644 --- a/src/css/quasar.variables.scss +++ b/src/css/quasar.variables.scss @@ -14,10 +14,13 @@ $primary: #019547; $secondary: #DAE0E7; -$accent: #81AFE3; +$accent: #AAD5C4; -$dark-font: #305530; -$dark: #323232; +$verdigris: #6EBAB0; +$mint: #56B586; + +$dark-font: #1f3a1f; +$dark: #000; $dark-page: #323232; $positive: #21ba45; diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts index 13a0655..351a4f4 100644 --- a/src/i18n/en-ca/index.ts +++ b/src/i18n/en-ca/index.ts @@ -292,19 +292,17 @@ export default { }, timeSheetValidations: { tableHeader: 'List of employees', - tableCol_1: 'Full name', - tableCol_2: 'Regular hours', - tableCol_3: 'Evening hours', - tableCol_4: 'Emergency hours', - tableCol_5: 'Overtime hours', - tableCol_6: 'Expenses', - tableCol_7: 'Mileage', - tableCol_8: 'Status', - tableCol_9: 'Supervisor', + tableColumnLabelFullname: 'Full name', + tableColumnLabelRegularHours: 'Regular hours', + tableColumnLabelEveningHours: 'Evening hours', + tableColumnLabelEmergencyHours: 'Emergency hours', + tableColumnLabelOvertime: 'Overtime hours', + tableColumnLabelExpenses: 'Expenses', + tableColumnLabelMileage: 'Mileage', actionTitle: 'Please save the changes made.', actionButton: 'Save', - timeSheetStatus_verified: 'Verified', - timeSheetStatus_unverified: 'Unverified', + timeSheetStatusVerified: 'Verified', + timeSheetStatusUnverified: 'Unverified', timeSheetStatus_partial: 'Partial', timeSheetStatus_complete: 'Complete', timeSheetStatus_empty: 'Empty', diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts index f6ef5c9..7fd85b4 100644 --- a/src/i18n/fr-ca/index.ts +++ b/src/i18n/fr-ca/index.ts @@ -338,19 +338,17 @@ export default { }, timeSheetValidations: { tableHeader: 'Liste des employés', - tableCol_1: 'Nom et prénom', - tableCol_2: 'Heures régulières', - tableCol_3: 'Heures de soir', - tableCol_4: 'Heures d’urgence', - tableCol_5: 'Heures supplémentaires', - tableCol_6: 'Dépenses ', - tableCol_7: 'Kilométrage ', - tableCol_8: 'État', - tableCol_9: 'Superviseur', + tableColumnLabelFullname: 'nom complet', + tableColumnLabelRegularHours: 'Heures régulières', + tableColumnLabelEveningHours: 'Heures de soir', + tableColumnLabelEmergencyHours: 'Heures d’urgence', + tableColumnLabelOvertime: 'Heures supplémentaires', + tableColumnLabelExpenses: 'Dépenses', + tableColumnLabelMileage: 'Kilométrage', actionTitle: 'Veuillez enregistrer les changements effectués.', actionButton: 'Enregistrer', - timeSheetStatus_verified: 'Vérifié', - timeSheetStatus_unverified: 'Invérifié', + timeSheetStatusVerified: 'Vérifié', + timeSheetStatusUnverified: 'Invérifié', timeSheetStatus_partial: 'Partiel', timeSheetStatus_complete: 'Complet', timeSheetStatus_empty: 'Vide', 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 new file mode 100644 index 0000000..e69de29 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 new file mode 100644 index 0000000..8a74061 --- /dev/null +++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue @@ -0,0 +1,76 @@ + + + + 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 f61624d..a8f680e 100644 --- a/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue +++ b/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue @@ -2,15 +2,20 @@ import { useTimesheetStore } from 'src/stores/timesheet-store'; const timesheetStore = useTimesheetStore(); + + const updateCurrentPayPeriod = () => { + timesheetStore.getCurrentPayPeriod(); + }; + \ 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 7e0f5d3..3f1c46a 100644 --- a/src/modules/timesheet-approval/pages/timesheet-approval.vue +++ b/src/modules/timesheet-approval/pages/timesheet-approval.vue @@ -1,9 +1,11 @@ \ No newline at end of file diff --git a/src/modules/timesheet-approval/services/services-timesheet-approval.ts b/src/modules/timesheet-approval/services/services-timesheet-approval.ts index b0d1750..6303eee 100644 --- a/src/modules/timesheet-approval/services/services-timesheet-approval.ts +++ b/src/modules/timesheet-approval/services/services-timesheet-approval.ts @@ -1,11 +1,28 @@ import { api } from "src/boot/axios"; -import { mock_pay_period_employee_overviews, mock_pay_periods } from "../timesheet-approval-test-constants"; -import { PayPeriod } from "src/modules/shared/types/pay-period-interface"; +import { mock_pay_periods } from "../timesheet-approval-test-constants"; +import type { PayPeriod } from "src/modules/shared/types/pay-period-interface"; export const timesheetApprovalService = { - getCurrentPayPeriod: async () :Promise => { + getCurrentPayPeriod: (): PayPeriod => { // TODO: REMOVE MOCK DATA PEFORE PUSHING TO PROD - return await api.get(`/pay-periods/date/${new Date()}`) || mock_pay_periods[0]; + //let current_pay_period: PayPeriod; + // + // try { + // console.log("Trying to get current pay period"); + // current_pay_period = await api.get(`/pay-periods/date/${(new Date()).toDateString()}`); + // return current_pay_period; + // } catch (err){ + // console.log(err); + // } + // console.log("failed to retrieve current pay period"); + + return { + "period_number": 15, + "start_date": "2025-07-27", + "end_date": "2025-08-09", + "year": 2025, + "label": "2025-07-27 → 2025-08-09" + } as PayPeriod; }, getAllPayPeriods: async () => { @@ -15,6 +32,6 @@ export const timesheetApprovalService = { getPayPeriodEmployeeOverviews: async (period_number: number) => { // TODO: REMOVE MOCK DATA PEFORE PUSHING TO PROD - return await api.get(`/pay-periods/${period_number}/overview`) || mock_pay_period_employee_overviews; + return await api.get(`/pay-periods/${period_number}/overview`); }, }; \ No newline at end of file diff --git a/src/modules/timesheet-approval/timesheet-approval-test-constants.ts b/src/modules/timesheet-approval/timesheet-approval-test-constants.ts index 31df98e..bf35e06 100644 --- a/src/modules/timesheet-approval/timesheet-approval-test-constants.ts +++ b/src/modules/timesheet-approval/timesheet-approval-test-constants.ts @@ -1,5 +1,5 @@ -import { PayPeriod } from "../shared/types/pay-period-interface"; -import { PayPeriodEmployeeOverview } from "./types/timesheet-approval-pay-period-employee-overview-interface" +import type { PayPeriod } from "../shared/types/pay-period-interface"; +import type { PayPeriodEmployeeOverview } from "./types/timesheet-approval-pay-period-employee-overview-interface" export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [ { diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts index 5dfe974..311e992 100644 --- a/src/stores/timesheet-store.ts +++ b/src/stores/timesheet-store.ts @@ -1,18 +1,78 @@ import { defineStore } from 'pinia'; import { ref } from 'vue'; -import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface'; import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/services-timesheet-approval'; +import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface'; +import type { PayPeriodEmployeeOverview } from "src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-overview-interface"; + + +const default_current_pay_period: PayPeriod = {"period_number": 1, "start_date": "1970-01-01", "end_date": "1970-01-15", "year": 1970, "label": "1970-01-01 → 1970-01-15"}; + +const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [ + { + "employee_id": 'EMP-001', + "employee_name": 'Alice Johnson', + "regular_hours": 75, + "evening_hours": 12, + "emergency_hours": 3, + "overtime_hours": 5, + "expenses": 120.50, + "mileage": 45, + "is_approved": false + }, + { + "employee_id": 'EMP-002', + "employee_name": 'Brian Smith', + "regular_hours": 80, + "evening_hours": 8, + "emergency_hours": 0, + "overtime_hours": 2, + "expenses": 75.00, + "mileage": 12, + "is_approved": true + }, + { + "employee_id": 'EMP-003', + "employee_name": 'Chloe Ramirez', + "regular_hours": 68, + "evening_hours": 15, + "emergency_hours": 1, + "overtime_hours": 0, + "expenses": 200.00, + "mileage": 88, + "is_approved": false + }, + { + "employee_id": 'EMP-004', + "employee_name": 'David Lee', + "regular_hours": 82, + "evening_hours": 5, + "emergency_hours": 4, + "overtime_hours": 6, + "expenses": 50.75, + "mileage": 20, + "is_approved": true + }, + { + "employee_id": 'EMP-005', + "employee_name": 'Emily Carter', + "regular_hours": 78, + "evening_hours": 10, + "emergency_hours": 2, + "overtime_hours": 3, + "expenses": 95.25, + "mileage": 60, + "is_approved": false + } +]; export const useTimesheetStore = defineStore('timesheet', () => { const payPeriods = ref([]); - const currentPayPeriod = ref(); + const currentPayPeriod = ref(default_current_pay_period); + const payPeriodEmployeeOverviews = ref(mock_pay_period_employee_overviews); - const getCurrentPayPeriod = async () => { - if (!currentPayPeriod.value) { - currentPayPeriod.value = await timesheetApprovalService.getCurrentPayPeriod(); - } - return currentPayPeriod.value; + const getCurrentPayPeriod = () => { + currentPayPeriod.value = timesheetApprovalService.getCurrentPayPeriod(); } - return { payPeriods, currentPayPeriod, getCurrentPayPeriod}; + return { payPeriods, currentPayPeriod, payPeriodEmployeeOverviews, getCurrentPayPeriod}; });