From 7dbb30259cd41898b80d0e2a2062e041d122d2fb Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Fri, 22 Aug 2025 11:11:14 -0400
Subject: [PATCH] refactor(many): change some components to respect 'props
 down, events up' convention for modularity and reusability. Keep branch open
 for future possible refactors.

---
 .../supervisor/supervisor-crew-table-item.vue |  17 +-
 .../shared/components/utils/table-filters.vue |  42 +++++
 .../types/pay-period-bundle-interface.ts      |   6 -
 src/modules/shared/types/q-date-details.ts    |  15 ++
 ...t-approval-employee-overview-list-item.vue |  73 +++++++--
 ...esheet-approval-employee-overview-list.vue | 145 +++++++++++-------
 .../timesheet-approval-period-picker.vue      |  42 +++--
 .../composables/use-timesheet-approval-api.ts |   8 +-
 .../pages/timesheet-approval.vue              |  33 ++--
 .../services/services-timesheet-approval.ts   |   4 +-
 src/stores/timesheet-store.ts                 |  40 ++---
 11 files changed, 285 insertions(+), 140 deletions(-)
 create mode 100644 src/modules/shared/components/utils/table-filters.vue
 delete mode 100644 src/modules/shared/types/pay-period-bundle-interface.ts
 create mode 100644 src/modules/shared/types/q-date-details.ts

diff --git a/src/modules/employee-list/components/supervisor/supervisor-crew-table-item.vue b/src/modules/employee-list/components/supervisor/supervisor-crew-table-item.vue
index 9aae542..70a0874 100644
--- a/src/modules/employee-list/components/supervisor/supervisor-crew-table-item.vue
+++ b/src/modules/employee-list/components/supervisor/supervisor-crew-table-item.vue
@@ -1,25 +1,18 @@
 <script setup lang="ts">
     /* eslint-disable */
-    import { useEmployeeStore } from 'src/stores/employee-store';
-import type { EmployeeListTableItem } from 'src/modules/employee-list/types/employee-list-table-interface';
-import { useEmployeeListApi } from 'src/modules/employee-list/composables/use-employee-api';
-
-    const employeeStore = useEmployeeStore();
-    const employeeListApi = useEmployeeListApi();
+    import type { EmployeeListTableItem } from 'src/modules/employee-list/types/employee-list-table-interface';
 
     const getEmployeeAvatar = (first_name: string, last_name: string) => {
         // add logic here to see if user has an avatar image and return that instead of initials
         return first_name.charAt(0) + last_name.charAt(0);
     };
-    const onProfileCardClick = (email: string) => {
-        employeeStore.isShowingEmployeeAddModifyWindow = true;
-        console.log("clicked profile!");
-        employeeListApi.getEmployeeDetails(email);
-    }
 
     const props = defineProps<{
         row: EmployeeListTableItem
     }>()
+    const emit = defineEmits<{
+        onProfileClick: [email: string]
+    }>();
 </script>
 
 <template>
@@ -27,7 +20,7 @@ import { useEmployeeListApi } from 'src/modules/employee-list/composables/use-em
         v-ripple 
         class="rounded-15 bg-white col-xs-6 col-sm-4 col-md-3 col-lg-2 column no-wrap cursor-pointer q-ma-sm" 
         style="max-width: 230px;"
-        @click="onProfileCardClick(props.row.email)"
+        @click="emit('onProfileClick', props.row.email)"
     >
         <q-card-section class="text-center col-5">
             <q-avatar color="primary" size="8em">
diff --git a/src/modules/shared/components/utils/table-filters.vue b/src/modules/shared/components/utils/table-filters.vue
new file mode 100644
index 0000000..5295a2a
--- /dev/null
+++ b/src/modules/shared/components/utils/table-filters.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+    searchModel: string | number | null
+}>();
+const emit = defineEmits<{
+    onSearchValueUpdated: [value: string | number | null]
+}>();
+
+</script>
+
+<template>
+    <!-- Filters toggle -->
+    <q-btn-dropdown 
+        rounded 
+        push
+        class="q-mr-md bg-white text-primary" 
+        label="filters" 
+        icon="filter_alt" 
+    />
+
+    <!-- Search bar -->
+        <q-input 
+        outlined 
+        dense 
+        rounded
+        debounce="300"
+        v-model="props.searchModel"
+        :label="$t('shared.searchBar')" 
+        label-color="primary" 
+        bg-color="white" 
+        color="primary"
+        @update:model-value="value => emit('onSearchValueUpdated', value)" 
+    >
+        <template v-slot:append>
+            <q-icon 
+                name="search" 
+                color="primary"
+            />
+        </template>
+    </q-input>
+</template>
\ No newline at end of file
diff --git a/src/modules/shared/types/pay-period-bundle-interface.ts b/src/modules/shared/types/pay-period-bundle-interface.ts
deleted file mode 100644
index 6ea23bf..0000000
--- a/src/modules/shared/types/pay-period-bundle-interface.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { PayPeriod } from "./pay-period-interface";
-
-export interface PayPeriodBundle {
-    current: PayPeriod;
-    periods: PayPeriod[];
-}
\ No newline at end of file
diff --git a/src/modules/shared/types/q-date-details.ts b/src/modules/shared/types/q-date-details.ts
new file mode 100644
index 0000000..980ca72
--- /dev/null
+++ b/src/modules/shared/types/q-date-details.ts
@@ -0,0 +1,15 @@
+export interface QDateDetails {
+  year: number;
+  month: number;
+  day: number;
+  from?: {
+    year: number;
+    month: number;
+    day: number;
+  };
+  to?: {
+    year: number;
+    month: number;
+    day: number;
+  };
+}
\ 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 8ac6054..003716a 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
@@ -18,19 +18,34 @@
     <div class="q-px-sm q-pb-sm col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 grid-style-transition">
         <q-card class="rounded-10">
             <!-- Card header with employee name -->
-            <q-card-section horizontal class="q-py-none q-px-md">
-                <div class="text-primary text-h5 text-weight-bolder q-pt-xs overflow-hidden">{{ props.row.employee_name }}</div>
+            <q-card-section 
+                horizontal 
+                class="q-py-none q-px-md"
+            >
+                <div class="text-primary text-h5 text-weight-bolder q-pt-xs overflow-hidden">
+                    {{ props.row.employee_name }}
+                </div>
             </q-card-section>
 
-            <q-separator color="accent" style="height: 2px;"/>
+            <q-separator 
+                color="accent" 
+                style="height: 2px;"
+            />
             
             <!-- Main body of pay period card -->
             <q-card-section class="q-pa-none q-mt-xs q-mb-sm">
                 <div class="row no-wrap">
                     <!-- left portion of pay period card -->
-                    <div class="column no-wrap" :class="$q.screen.lt.md ? 'col' : 'col-8'">
+                    <div 
+                        class="column no-wrap" 
+                        :class="$q.screen.lt.md ? 'col' : 'col-8'"
+                    >
                         <!-- Regular hours segment -->
-                        <q-item dense class="column" :class="$q.screen.lt.md ? 'col' : 'col-8'">
+                        <q-item 
+                            dense 
+                            class="column" 
+                            :class="$q.screen.lt.md ? 'col' : 'col-8'"
+                        >
                             <q-item-label class="text-weight-bold text-primary q-pa-none text-uppercase text-caption">
                                 {{ props.cols.find(c => c.name === 'regular_hours')?.label }}
                             </q-item-label>
@@ -39,12 +54,23 @@
                             </q-item-label>
                         </q-item>
 
-                        <q-separator color="accent" class="q-mx-sm"/>
+                        <q-separator 
+                            color="accent" 
+                            class="q-mx-sm"
+                        />
 
                         <!-- Other hour types segment -->
                         <div :class="$q.screen.lt.md ? 'column' : 'row no-wrap'">
-                            <q-item dense class="column ellipsis " v-for="col in props.cols.slice(2, 5)" :key="col.label">
-                                <q-item-label class="text-weight-bold text-primary q-pa-none text-uppercase text-caption" style="font-size: 0.65em;">
+                            <q-item 
+                                dense 
+                                class="column ellipsis " 
+                                v-for="col in props.cols.slice(2, 5)" 
+                                :key="col.label"
+                            >
+                                <q-item-label 
+                                    class="text-weight-bold text-primary q-pa-none text-uppercase text-caption" 
+                                    style="font-size: 0.65em;"
+                                >
                                     {{ col.label }}
                                 </q-item-label>
                                 <q-item-label class="text-weight-bolder q-pa-none text-h6 text-grey-8">
@@ -54,12 +80,24 @@
                         </div>
                     </div>
                     
-                    <q-separator vertical color="accent" class="q-mt-xs q-mb-none"/>
+                    <q-separator 
+                        vertical 
+                        color="accent" 
+                        class="q-mt-xs q-mb-none"
+                    />
                     
                     <!-- Right portion of pay period card -->
                     <div class="no-wrap ellipsis col">
-                        <q-item dense class="column" v-for="col in props.cols.slice(5, )" :key="col.label">
-                            <q-item-label class="text-weight-bold text-primary q-pa-none text-uppercase text-caption ellipsis" style="font-size: 0.8em;">
+                        <q-item 
+                            dense 
+                            class="column" 
+                            v-for="col in props.cols.slice(5, )" 
+                            :key="col.label"
+                        >
+                            <q-item-label 
+                                class="text-weight-bold text-primary q-pa-none text-uppercase text-caption ellipsis" 
+                                style="font-size: 0.8em;"
+                            >
                                 {{ col.label }}
                             </q-item-label>
                             <q-item-label class="text-weight-bolder q-pa-none text-h6 text-grey-8">
@@ -70,13 +108,16 @@
                 </div>
             </q-card-section>
 
-            <q-separator color="primary" style="height: 2px;" />
+            <q-separator 
+                color="primary" 
+                style="height: 2px;" 
+            />
             
             <!-- Validate entire Pay Period section -->
             <q-card-section 
-            horizontal 
-            class="q-pa-sm text-weight-bold"
-            :class="props.modelValue ? 'text-white bg-primary' : 'text-primary bg-white'"    
+                horizontal 
+                class="q-pa-sm text-weight-bold"
+                :class="props.modelValue ? 'text-white bg-primary' : 'text-primary bg-white'"    
             >
                 <q-space />
                 <q-checkbox 
@@ -90,7 +131,7 @@
                     @update:model-value="val => $emit('update:modelValue', val)"
                     :label="props.modelValue ? $t('timeSheetValidations.timeSheetStatusVerified') : $t('timeSheetValidations.timeSheetStatusUnverified')" 
                     class="text-uppercase"
-                    />
+                />
             </q-card-section>
         </q-card>
     </div>
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 79f1b41..244df57 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,54 +2,96 @@
     /* eslint-disable */
     import { computed, onMounted, ref } from 'vue';
     import { useI18n } from 'vue-i18n';
-    import type { PayPeriodEmployeeOverview } from '../types/timesheet-approval-pay-period-employee-overview-interface';
-    import type { QTableColumn } from 'quasar';
-    import TimesheetApprovalEmployeeOverviewListItem from './timesheet-approval-employee-overview-list-item.vue';
-    import { useTimesheetApprovalApi } from '../composables/use-timesheet-approval-api';
-    import { getCurrentPayPeriod } from 'src/utils/pay-period-calculator';
-    import { useAuthStore } from 'src/stores/auth-store';
+    
     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 { date, type QTableColumn } from 'quasar';
+    import type { PayPeriodEmployeeOverview } from '../types/timesheet-approval-pay-period-employee-overview-interface';
 
     const { t } = useI18n();
+    const timesheet_store = useTimesheetStore();
+    const timesheet_approval_api = useTimesheetApprovalApi();
+
+    const FORWARD = 1
+    const BACKWARD = -1
     
-    const currentPayPeriod = getCurrentPayPeriod();
-    const currentYear = (new Date()).getFullYear();
+    const filter = ref<string | number | null>('');
+    const original_approvals = ref<Record<string, boolean>>({});
+
+    const columns = computed((): QTableColumn<PayPeriodEmployeeOverview>[] => [
+        { 
+            name: 'employee_name', 
+            label: t('timeSheetValidations.tableColumnLabelFullname'), 
+            field: 'employee_name', 
+            sortable: true 
+        },
+        { 
+            name: 'regular_hours', 
+            label: t('timeSheetValidations.tableColumnLabelRegularHours'), 
+            field: 'regular_hours', 
+            sortable: true 
+        },
+        { 
+            name: 'evening_hours', 
+            label: t('timeSheetValidations.tableColumnLabelEveningHours'), 
+            field: 'evening_hours' 
+        },
+        { 
+            name: 'emergency_hours', 
+            label: t('timeSheetValidations.tableColumnLabelEmergencyHours'), 
+            field: 'emergency_hours' 
+        },
+        { 
+            name: 'overtime_hours', 
+            label: t('timeSheetValidations.tableColumnLabelOvertime'), 
+            field: 'overtime_hours' 
+        },
+        { 
+            name: 'expenses', 
+            label: t('timeSheetValidations.tableColumnLabelExpenses'), 
+            field: 'expenses', 
+            sortable: true 
+        },
+        { 
+            name: 'mileage', 
+            label: t('timeSheetValidations.tableColumnLabelMileage'), 
+            field: 'mileage', 
+            sortable: true 
+        }
+    ]);
     
-    const originalApprovals = ref<Record<string, boolean>>({});
-    const hasChanges = computed(() => {
-        return timesheetStore.payPeriodEmployeeOverviews.some(emp => {
-            return emp.is_approved !== originalApprovals.value[emp.email];
+    const has_changes = computed(() => {
+        return timesheet_store.pay_period_employee_overviews.some(emp => {
+            return emp.is_approved !== original_approvals.value[emp.email];
         });
     });
 
-    const authStore = useAuthStore();
-    const timesheetStore = useTimesheetStore();
-    const timesheetApprovalApi = useTimesheetApprovalApi();
+    const is_calendar_limit = computed( () => {
+        return  timesheet_store.current_pay_period.pay_year === 2024 && 
+                timesheet_store.current_pay_period.pay_period_no <= 1;
+    });
 
-    const columns = computed((): QTableColumn<PayPeriodEmployeeOverview>[] => [
-        { name: 'employee_name', label: t('timeSheetValidations.tableColumnLabelFullname'), field: 'employee_name', sortable: true },
-        { name: 'regular_hours', label: t('timeSheetValidations.tableColumnLabelRegularHours'), field: 'regular_hours', sortable: true },
-        { name: 'evening_hours', label: t('timeSheetValidations.tableColumnLabelEveningHours'), field: 'evening_hours' },
-        { name: 'emergency_hours', label: t('timeSheetValidations.tableColumnLabelEmergencyHours'), field: 'emergency_hours' },
-        { name: 'overtime_hours', label: t('timeSheetValidations.tableColumnLabelOvertime'), field: 'overtime_hours' },
-        { name: 'expenses', label: t('timeSheetValidations.tableColumnLabelExpenses'), field: 'expenses', sortable: true },
-        { name: 'mileage', label: t('timeSheetValidations.tableColumnLabelMileage'), field: 'mileage', sortable: true }
-    ]);
-
-    const filter = ref('');
+    const onDateSelected = async (date_string: string) => {
+        await timesheet_approval_api.getPayPeriodOverviewByDate(date_string);
+    }
 
     onMounted( async () => {
-        await timesheetApprovalApi.getPayPeriodOverviewByDate(new Date());
-        originalApprovals.value = Object.fromEntries( timesheetStore.payPeriodEmployeeOverviews.map(emp => [emp.email, emp.is_approved]));
+        const today = date.formatDate(new Date(), 'YYYY-MM-DD');
+        await timesheet_approval_api.getPayPeriodOverviewByDate(today);
+
+        const approvals = timesheet_store.pay_period_employee_overviews.map(emp => [emp.email, emp.is_approved]);
+        original_approvals.value = Object.fromEntries(approvals);
     })
 </script>
 
-
 <template>
     <div class="q-pa-md">
         <q-table 
-            :rows="timesheetStore.payPeriodEmployeeOverviews" 
+            :rows="timesheet_store.pay_period_employee_overviews" 
             :columns="columns"
             row-key="email" 
             :filter="filter" 
@@ -59,7 +101,7 @@
             color="primary"
             :rows-per-page-options="[0]" 
             card-container-class="justify-center"
-            :loading="timesheetStore.isLoading"
+            :loading="timesheet_store.is_loading"
             :no-data-label="$t('shared.failedToLoad')"
             :no-results-label="$t('shared.failedToSearch')"
             :loading-label="$t('shared.loading')"
@@ -68,37 +110,25 @@
             <template v-slot:top>
                 <div :class="$q.screen.lt.md ? 'column justify-center items-center' : 'full-width row'">
                     <!-- Date Picker -->
-                    <TimesheetApprovalPeriodPicker />
+                    <TimesheetApprovalPeriodPicker 
+                        :is-disabled="timesheet_store.is_loading"
+                        :is-previous-limit="is_calendar_limit"
+                        @date-selected="onDateSelected"
+                        @pressed-previous-button="timesheet_approval_api.getNextPayPeriodOverview(BACKWARD)"
+                        @pressed-next-button="timesheet_approval_api.getNextPayPeriodOverview(FORWARD)"
+                    />
                     
                     <q-space />
 
-                    <!-- Filters toggle -->
-                    <q-btn-dropdown 
-                        rounded 
-                        push
-                        class="q-mr-md bg-white text-primary" 
-                        label="filters" 
-                        icon="filter_alt" 
-                    />
-
-                    <!-- Search bar -->
-                     <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>
 
             <!-- Template for individual employee cards -->
-            <template v-slot:item="props: { cols: (QTableColumn<PayPeriodEmployeeOverview> & { value: unknown })[], row: PayPeriodEmployeeOverview }">
+            <template v-slot:item="props: { 
+                cols: (QTableColumn<PayPeriodEmployeeOverview> & { value: unknown })[], 
+                row: PayPeriodEmployeeOverview 
+            }">
                 <TimesheetApprovalEmployeeOverviewListItem 
                     :cols="props.cols" 
                     :row="props.row" 
@@ -111,7 +141,10 @@
                     <span class="text-h6 q-mt-xl">
                         {{ message }}
                     </span>
-                    <q-icon size="4em" :name="filter ? 'filter_alt_off' : 'error_outline'" />
+                    <q-icon 
+                        size="4em" 
+                        :name="filter ? 'filter_alt_off' : 'error_outline'" 
+                    />
                 </div>
             </template>
         </q-table>
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 be131d7..98a03c8 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue
@@ -1,18 +1,28 @@
 <script setup lang="ts">
     /* eslint-disable */
-    import { ref, computed } from 'vue';
-    import { useTimesheetApprovalApi } from '../composables/use-timesheet-approval-api';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import { ref } from 'vue';
     import { date } from 'quasar';
+    import type { QDateDetails } from 'src/modules/shared/types/q-date-details';
 
-    const timesheet_approval_api = useTimesheetApprovalApi();
-    const timesheet_store = useTimesheetStore();
     const is_showing_calendar_picker = ref(false);
     const calendar_date = ref(date.formatDate( Date.now(), 'YYYY/MM/DD' ));
-    const is_calendar_limit = computed( () => {
-        return timesheet_store.currentPayPeriod.pay_year === 2024 && timesheet_store.currentPayPeriod.pay_period_no <= 1;
-    });
+
+    const props = defineProps<{
+        isDisabled: boolean,
+        isPreviousLimit: boolean,
+    }>();
+
+    const emit = defineEmits<{
+        'date-selected': [value: string, reason?: string, details?: QDateDetails]
+        'pressed-previous-button': void
+        'pressed-next-button': void
+    }>();
     
+    const onDateSelected = (value: string, reason: string, details: QDateDetails) => {
+        calendar_date.value = value;
+        is_showing_calendar_picker.value = false;
+        emit('date-selected', value, reason, details);
+    }    
 </script>
 
 <template>
@@ -21,8 +31,8 @@
             push rounded 
             icon="keyboard_arrow_left"  
             color="primary" 
-            @click="timesheet_approval_api.getNextPayPeriodOverview(-1)" 
-            :disable="is_calendar_limit || timesheet_store.isLoading"
+            @click="$emit('pressed-previous-button')" 
+            :disable="props.isPreviousLimit || props.isDisabled"
             class="q-mr-sm q-px-sm"
         />
         <q-btn 
@@ -30,26 +40,28 @@
             icon="date_range" 
             color="primary" 
             @click="is_showing_calendar_picker = true"
-            :disable="timesheet_store.isLoading"
+            :disable="props.isDisabled"
             class="q-px-lg"
         />
         <q-btn 
             push rounded 
             icon="keyboard_arrow_right" 
             color="primary" 
-            @click="timesheet_approval_api.getNextPayPeriodOverview(1)"
-            :disable="timesheet_store.isLoading"
+            @click="$emit('pressed-next-button')"
+            :disable="props.isDisabled"
             class="q-ml-sm q-px-sm"
         />
     </div>
 
-    <q-dialog v-model="is_showing_calendar_picker" transition-show="slide-down" transition-hide="slide-up" position="top">
+    <q-dialog v-model="is_showing_calendar_picker" transition-show="jump-down" transition-hide="jump-up" position="top">
         <q-date 
             v-model="calendar_date" 
             color="primary" 
             class="q-mt-xl" 
             today-btn
-            :options="date => date > '2023/12/16'"
+            mask="YYYY-MM-DD"
+            :options="date => date > '2023-12-16'"
+            @update:model-value="onDateSelected"
         />
     </q-dialog>
 </template>
\ No newline at end of file
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 498d70f..16b8b6d 100644
--- a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
+++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
@@ -5,11 +5,11 @@ export const useTimesheetApprovalApi = () => {
     const timesheet_store = useTimesheetStore();
     const auth_store = useAuthStore();
 
-    const getPayPeriodOverviewByDate = async (date: Date) => {
-        const success = await timesheet_store.getPayPeriodByDate(date);
+    const getPayPeriodOverviewByDate = async (date_string: string) => {
+        const success = await timesheet_store.getPayPeriodByDate(date_string);
         
         if (success) {
-            const current_pay_period = timesheet_store.currentPayPeriod;
+            const current_pay_period = timesheet_store.current_pay_period;
             await timesheet_store.getTimesheetApprovalPayPeriodEmployeeOverviews(current_pay_period.pay_year, current_pay_period.pay_period_no, auth_store.user.email);
         }
     }
@@ -19,7 +19,7 @@ export const useTimesheetApprovalApi = () => {
         It then requests the matching pay period object to set as current pay period from server.
         If successful, it then requests pay period overviews from that new pay period. */
     const getNextPayPeriodOverview = async (direction: number) => {
-        const current_pay_period = timesheet_store.currentPayPeriod;
+        const current_pay_period = timesheet_store.current_pay_period;
         let new_pay_period_no = current_pay_period.pay_period_no + direction;
         let new_pay_year = current_pay_period.pay_year;
 
diff --git a/src/modules/timesheet-approval/pages/timesheet-approval.vue b/src/modules/timesheet-approval/pages/timesheet-approval.vue
index d6b0447..72bd89d 100644
--- a/src/modules/timesheet-approval/pages/timesheet-approval.vue
+++ b/src/modules/timesheet-approval/pages/timesheet-approval.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-    import TimesheetApprovalEmployeeOverviewList from '../components/timesheet-approval-employee-overview-list.vue';
+    import TimesheetApprovalEmployeeOverviewList from '/src/modules/timesheet-approval/\
+            components/timesheet-approval-employee-overview-list.vue';
     import { computed } from 'vue';
     import { useI18n } from 'vue-i18n';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
@@ -15,9 +16,12 @@
 
 
     const pay_period_label = computed(() => {
-        const dates = timesheet_store.currentPayPeriod.label.split('.');
-        const start_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[0] as string, 'YYYY-MM-DD'));
-        const end_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[1] as string, 'YYYY-MM-DD'));
+        const dates = timesheet_store.current_pay_period.label.split('.');
+        const start_date = new Intl.DateTimeFormat(locale.value, date_options); 
+        const end_date = new Intl.DateTimeFormat(locale.value, date_options); 
+        
+        start_date.format(date.extractDate(dates[0] as string, 'YYYY-MM-DD'));
+        end_date.format(date.extractDate(dates[1] as string, 'YYYY-MM-DD'));
 
         return {
             start_date: start_date, 
@@ -27,12 +31,23 @@
 </script>
 
 <template>
-    <q-page 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">{{ $t('pageTitles.timeSheetValidations') }}</div>
+    <q-page 
+        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">
+            {{ $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">{{ pay_period_label.start_date }}</div>
-            <div class="text-grey-8 text-weight-bold text-uppercase q-mx-md">{{ $t('timeSheet.dateRangesTo') }}</div>
-            <div class="text-primary text-h6 text-uppercase">{{ pay_period_label.end_date }}</div>
+            <div class="text-primary text-h6 text-uppercase">
+                {{ pay_period_label.start_date }}
+            </div>
+            <div class="text-grey-8 text-weight-bold text-uppercase q-mx-md">
+                {{ $t('timeSheet.dateRangesTo') }}
+            </div>
+            <div class="text-primary text-h6 text-uppercase">
+                {{ pay_period_label.end_date }}
+            </div>
         </div>
         <TimesheetApprovalEmployeeOverviewList />
     </q-page>
diff --git a/src/modules/timesheet-approval/services/services-timesheet-approval.ts b/src/modules/timesheet-approval/services/services-timesheet-approval.ts
index a7f4c2d..88d78ee 100644
--- a/src/modules/timesheet-approval/services/services-timesheet-approval.ts
+++ b/src/modules/timesheet-approval/services/services-timesheet-approval.ts
@@ -3,8 +3,8 @@ import type { PayPeriodOverview } from "../types/timesheet-approval-pay-period-o
 import type { PayPeriod } from "src/modules/shared/types/pay-period-interface";
 
 export const timesheetApprovalService = {
-    getPayPeriodByDate: async (date: Date): Promise<PayPeriod> => {
-        const response = await api.get(`pay-periods/date/${date.toISOString()}`);
+    getPayPeriodByDate: async (date_string: string): Promise<PayPeriod> => {
+        const response = await api.get(`pay-periods/date/${date_string}`);
         return response.data;
     },
 
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index 6b202b1..300efa8 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -14,17 +14,17 @@ const default_pay_period: PayPeriod = {
  };
 
 export const useTimesheetStore = defineStore('timesheet', () => {
-    const currentPayPeriod = ref<PayPeriod>(default_pay_period);
-    const payPeriodEmployeeOverviews = ref<PayPeriodEmployeeOverview[]>([]);
-    const isLoading = ref<boolean>(false);
+    const current_pay_period = ref<PayPeriod>(default_pay_period);
+    const pay_period_employee_overviews = ref<PayPeriodEmployeeOverview[]>([]);
+    const is_loading = ref<boolean>(false);
 
-    const getPayPeriodByDate = async (date: Date): Promise<boolean> => {
-        isLoading.value = true;
+    const getPayPeriodByDate = async (date_string: string): Promise<boolean> => {
+        is_loading.value = true;
 
         try {
-            const response = await timesheetApprovalService.getPayPeriodByDate(date);
-            currentPayPeriod.value = response;
-            isLoading.value = false;
+            const response = await timesheetApprovalService.getPayPeriodByDate(date_string);
+            current_pay_period.value = response;
+            is_loading.value = false;
 
             return true;
         } catch(error){
@@ -32,18 +32,18 @@ export const useTimesheetStore = defineStore('timesheet', () => {
             //TODO: More in-depth error-handling here
         }
 
-        isLoading.value = false;
+        is_loading.value = false;
 
         return false;
     };
 
     const getPayPeriodByYearAndPeriodNumber = async (year: number, period_number: number): Promise<boolean> => {
-        isLoading.value = true;
+        is_loading.value = true;
 
         try {
             const response = await timesheetApprovalService.getPayPeriodByYearAndPeriodNumber(year, period_number);
-            currentPayPeriod.value = response;
-            isLoading.value = false;
+            current_pay_period.value = response;
+            is_loading.value = false;
 
             return true;
         } catch(error){
@@ -51,30 +51,30 @@ export const useTimesheetStore = defineStore('timesheet', () => {
             //TODO: More in-depth error-handling here
         }
 
-        isLoading.value = false;
+        is_loading.value = false;
 
         return false;
     };
 
     const getTimesheetApprovalPayPeriodEmployeeOverviews = async (pay_year: number, period_number: number, supervisor_email: string) => {
-        isLoading.value = true;
+        is_loading.value = true;
 
         try {
             const response = await timesheetApprovalService.getPayPeriodEmployeeOverviews(pay_year, period_number, supervisor_email);
-            payPeriodEmployeeOverviews.value = response.employees_overview;
+            pay_period_employee_overviews.value = response.employees_overview;
         } catch (error) {
             console.error('There was an error retrieving Employee Pay Period overviews: ', error);
-            payPeriodEmployeeOverviews.value = [];
+            pay_period_employee_overviews.value = [];
             // TODO: trigger an alert window with an error message here!
         }
 
-        isLoading.value = false;
+        is_loading.value = false;
     };
 
     return { 
-        currentPayPeriod, 
-        payPeriodEmployeeOverviews, 
-        isLoading, 
+        current_pay_period, 
+        pay_period_employee_overviews, 
+        is_loading, 
         getPayPeriodByDate,
         getPayPeriodByYearAndPeriodNumber,
         getTimesheetApprovalPayPeriodEmployeeOverviews,