From 0c1d21442049e0b1d30d63bddedb403940ea357c Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Tue, 19 Aug 2025 16:49:49 -0400
Subject: [PATCH 1/4] refactor(approvals): fully overhaul timesheet approvals
 to work with backend, begin to implement approval logic.

---
 src/i18n/en-ca/index.ts                       |   3 +
 src/i18n/fr-ca/index.ts                       |   3 +
 src/modules/auth/composables/use-auth-api.ts  |   5 +-
 src/modules/auth/pages/auth-login.vue         |  11 +-
 .../supervisor/supervisor-crew-table.vue      |  64 +++--
 .../components/navigation/right-drawer.vue    |  45 ++--
 ...t-approval-employee-overview-list-item.vue |  53 ++++
 ...esheet-approval-employee-overview-list.vue | 102 ++++----
 .../composables/use-timesheet-approval-api.ts |  13 +
 .../services/services-timesheet-approval.ts   |  18 +-
 .../timesheet-approval-test-constants.ts      |  38 +--
 ...-pay-period-employee-overview-interface.ts |   2 +-
 ...-approval-pay-period-overview-interface.ts |  11 +-
 src/stores/auth-store.ts                      |  28 ++-
 src/stores/timesheet-store.ts                 | 229 ++----------------
 src/utils/has-required-role.ts                |   7 -
 src/utils/pay-period-calculator.ts            |  16 ++
 17 files changed, 275 insertions(+), 373 deletions(-)
 create mode 100644 src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
 delete mode 100644 src/utils/has-required-role.ts
 create mode 100644 src/utils/pay-period-calculator.ts

diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index 1c592ed..34868c8 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -159,6 +159,9 @@ export default {
   },
   shared:{
     searchBar: 'Search',
+    loading: 'Obtaining data...',
+    failedToLoad: 'No data to show',
+    failedToSearch: 'No data matching search',
   },
   editUserPage: {
     title: 'Edit Account',
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 59dfd5b..e489482 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -228,6 +228,9 @@ export default {
   },
   shared:{
     searchBar: 'Rechercher',
+    loading: 'Téléchargement des données en cours...',
+    failedToLoad: 'Aucune donnée à afficher',
+    failedToSearch: 'Aucun résultat de recherche obtenu',
   },
   shiftColumns: {
     title: 'Quarts de travail',
diff --git a/src/modules/auth/composables/use-auth-api.ts b/src/modules/auth/composables/use-auth-api.ts
index 8a7b8c2..719fe01 100644
--- a/src/modules/auth/composables/use-auth-api.ts
+++ b/src/modules/auth/composables/use-auth-api.ts
@@ -1,5 +1,4 @@
 import { useAuthStore } from "../../../stores/auth-store";
-import type { User } from "src/modules/shared/types/user-interface";
 
 export const useAuthApi = () => {
     const authStore = useAuthStore();
@@ -22,8 +21,8 @@ export const useAuthApi = () => {
         return authStore.isAuthorizedUser;
     };
 
-    const setUser = (currentUser: User) => {
-        authStore.user = currentUser;
+    const setUser = (bypassRole: string) => {
+        authStore.setUser(bypassRole);
     }
 
     return {
diff --git a/src/modules/auth/pages/auth-login.vue b/src/modules/auth/pages/auth-login.vue
index d08ca9d..982deea 100644
--- a/src/modules/auth/pages/auth-login.vue
+++ b/src/modules/auth/pages/auth-login.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
     import { ref, watch } from 'vue';
     import { useAuthApi } from '../composables/use-auth-api';
-    import type { User } from 'src/modules/shared/types/user-interface';
     import { useRouter } from 'vue-router';
 
-
     const authApi = useAuthApi();
     const email = ref('');
     const isShowingEmployeeLoginButton = ref(false);
@@ -12,12 +10,7 @@
     const router = useRouter();
 
     const setBypassUser = (bypassRole: string) => {
-        authApi.setUser({ 
-            firstName: "Testing", 
-            lastName: bypassRole, 
-            email: "testingT@targointernet.com", 
-            role: bypassRole || "guest"
-        } as User);
+        authApi.setUser(bypassRole);
         
         router.push({ name: 'dashboard' }).catch( err => {
             console.error('Router navigation failed: ', err);
@@ -94,7 +87,7 @@
                         <q-btn-group push rounded>
                             <q-btn push color="primary" text-color="white" label="ACCOUNTING" icon="attach_money" @click="setBypassUser('accounting')"/>
                             <q-btn push color="primary" text-color="white" label="SUPERVISOR" icon="supervisor_account" @click="setBypassUser('supervisor')"/>
-                            <q-btn push color="primary" text-color="white" label="HR" icon="diversity_3" @click="setBypassUser('human resources')"/>
+                            <q-btn push color="primary" text-color="white" label="HR" icon="diversity_3" @click="setBypassUser('human_resources')"/>
                             <q-btn push color="primary" text-color="white" label="EMPLOYEE" icon="support_agent" @click="setBypassUser('employee')"/>
                         </q-btn-group>
                     </q-card-section>
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 fde5f6d..09d1191 100644
--- a/src/modules/employee-list/components/supervisor/supervisor-crew-table.vue
+++ b/src/modules/employee-list/components/supervisor/supervisor-crew-table.vue
@@ -1,29 +1,29 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
-import { useEmployeeListApi } from 'src/modules/employee-list/composables/use-employee-api';
-import { useEmployeeStore } from 'src/stores/employee-store';
-import { useI18n } from 'vue-i18n';
-import SupervisorCrewTableItem from './supervisor-crew-table-item.vue';
+    import { computed, onMounted, ref } from 'vue';
+    import { useEmployeeListApi } from 'src/modules/employee-list/composables/use-employee-api';
+    import { useEmployeeStore } from 'src/stores/employee-store';
+    import { useI18n } from 'vue-i18n';
+    import SupervisorCrewTableItem from './supervisor-crew-table-item.vue';
 
-import type { EmployeeListTableItem } from '../../types/employee-list-table-interface';
-import type { QTableColumn } from 'quasar';
+    import type { EmployeeListTableItem } from '../../types/employee-list-table-interface';
+    import type { QTableColumn } from 'quasar';
 
-const employeeListApi =  useEmployeeListApi();
-const employeeStore = useEmployeeStore();
-const isLoadingList = ref<boolean>(true);
+    const employeeListApi =  useEmployeeListApi();
+    const employeeStore = useEmployeeStore();
+    const isLoadingList = ref<boolean>(true);
 
-const { t } = useI18n();
-const filter = ref("");
-const isGridMode = ref(true);
+    const { t } = useI18n();
+    const filter = ref("");
+    const isGridMode = ref(true);
 
-const employeeListColumns = computed((): QTableColumn<EmployeeListTableItem>[] => [
-    {name: 'first_name', label: t('usersListPage.userListFirstName'), field: 'first_name'},
-    {name: 'last_name', label: t('usersListPage.userListLastName'), field: 'last_name', align: 'left'},
-    {name: 'email', label: t('usersListPage.userListEmail'), field: 'email', align:'center'},
-    {name: 'supervisor_full_name', label: t('usersListPage.userListSupervisor'), field: 'supervisor_full_name', align: 'left'},
-    {name: 'company_name', label: t('usersListPage.userListCompany'), field: 'company_name'},
-    {name: 'job_title', label: t('usersListPage.userListRole'), field: 'job_title'},
-]);
+    const employeeListColumns = computed((): QTableColumn<EmployeeListTableItem>[] => [
+        {name: 'first_name', label: t('usersListPage.userListFirstName'), field: 'first_name', align: 'left'},
+        {name: 'last_name', label: t('usersListPage.userListLastName'), field: 'last_name', align: 'left'},
+        {name: 'email', label: t('usersListPage.userListEmail'), field: 'email', align: 'left'},
+        {name: 'supervisor_full_name', label: t('usersListPage.userListSupervisor'), field: 'supervisor_full_name', align: 'left'},
+        {name: 'company_name', label: t('usersListPage.userListCompany'), field: 'company_name', align: 'left'},
+        {name: 'job_title', label: t('usersListPage.userListRole'), field: 'job_title', align: 'left'},
+    ]);
 
     onMounted( async () => {
         isLoadingList.value = true;
@@ -41,22 +41,27 @@ const employeeListColumns = computed((): QTableColumn<EmployeeListTableItem>[] =
             row-key="name"
             :rows-per-page-options="[0]"
             :filter="filter"
-            class="q-pa-md"
+            class="q-pa-md bg-transparent"
+            color="primary"
             table-header-class="text-primary text-uppercase"
             card-container-class="justify-center q-gutter-md"
             :grid="isGridMode"
             :loading="isLoadingList"
-            flat
             dense
+            flat
+            :no-data-label="$t('shared.failedToLoad')"
+            :no-results-label="$t('shared.failedToSearch')"
+            :loading-label="$t('shared.loading')"
+            table-class="bg-white q-pa-md q-mx-md rounded-15 shadow-12"
         >
             <template v-slot:item="props">
                 <SupervisorCrewTableItem :row="props.row"/>
             </template>
 
             <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 />
-                <div class="row q-mb-lg">
                     <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},
@@ -65,6 +70,7 @@ const employeeListColumns = computed((): QTableColumn<EmployeeListTableItem>[] =
                     <q-input 
                         outlined 
                         dense 
+                        rounded
                         v-model="filter"
                         :label="$t('shared.searchBar')" 
                         label-color="primary" bg-color="white" color="primary" 
@@ -75,6 +81,16 @@ const employeeListColumns = computed((): QTableColumn<EmployeeListTableItem>[] =
                     </q-input>
                 </div>
             </template>
+
+            <!-- Template for custome failed-to-load state -->
+            <template v-slot:no-data="{ message, filter }">
+                <div class="full-width column items-center text-primary q-gutter-sm">
+                    <span class="text-h6 q-mt-xl">
+                        {{ message }}
+                    </span>
+                    <q-icon size="4em" :name="filter ? 'filter_alt_off' : 'error_outline'" />
+                </div>
+            </template>
         </q-table>
     </div>
 </template>
\ No newline at end of file
diff --git a/src/modules/shared/components/navigation/right-drawer.vue b/src/modules/shared/components/navigation/right-drawer.vue
index 9a65f45..e344713 100644
--- a/src/modules/shared/components/navigation/right-drawer.vue
+++ b/src/modules/shared/components/navigation/right-drawer.vue
@@ -1,29 +1,28 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
-import { useAuthStore } from 'src/stores/auth-store';
-import { hasRequiredRole } from 'src/utils/has-required-role';
-import { useUiStore } from 'src/stores/ui-store';
-import { ref } from 'vue';
-import { RouteNames } from 'src/router/router-constants';
+    import { useRouter } from 'vue-router';
+    import { useAuthStore } from 'src/stores/auth-store';
+    import { useUiStore } from 'src/stores/ui-store';
+    import { ref } from 'vue';
+    import { RouteNames } from 'src/router/router-constants';
 
-const authStore = useAuthStore();
-const uiStore = useUiStore();
-const router = useRouter();
-const miniState = ref(true);
+    const authStore = useAuthStore();
+    const uiStore = useUiStore();
+    const router = useRouter();
+    const miniState = ref(true);
 
-const goToPageName = (pageName: string) => {
-    router.push({ name: pageName }).catch(err => {
-        console.error('Error with Vue Router: ', err);
-    });
-};
+    const goToPageName = (pageName: string) => {
+        router.push({ name: pageName }).catch(err => {
+            console.error('Error with Vue Router: ', err);
+        });
+    };
 
-const handleLogout = () => {
-    authStore.logout();
+    const handleLogout = () => {
+        authStore.logout();
 
-    router.push({ name: 'login' }).catch(err => {
-        console.log('could not log you out: ', err);
-    })
-}
+        router.push({ name: 'login' }).catch(err => {
+            console.log('could not log you out: ', err);
+        })
+    }
 </script>
 
 <template>
@@ -43,7 +42,7 @@ const handleLogout = () => {
 
                 <!-- Timesheet Validation -- Supervisor and Accounting only -->
                 <q-item v-ripple clickable side @click="goToPageName(RouteNames.TIMESHEET_APPROVALS)"
-                    v-if="hasRequiredRole('supervisor', 'accounting')">
+                    v-if="['supervisor', 'accounting'].includes(authStore.user.role)">
                     <q-item-section avatar>
                         <q-icon name="event_available" color="primary" />
                     </q-item-section>
@@ -54,7 +53,7 @@ const handleLogout = () => {
 
                 <!-- Employee List -- Supervisor, Accounting and HR only -->
                 <q-item v-ripple clickable side @click="goToPageName(RouteNames.EMPLOYEE_LIST)"
-                    v-if="hasRequiredRole('supervisor', 'human resources', 'accounting')">
+                    v-if="['supervisor', 'accounting', 'human_resources'].includes(authStore.user.role)">
                     <q-item-section avatar>
                         <q-icon name="view_list" color="primary" />
                     </q-item-section>
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 e69de29..8713c76 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
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+    import type { PayPeriodEmployeeOverview } from '../types/timesheet-approval-pay-period-employee-overview-interface';
+
+    interface TableColumn {
+        name: string;
+        label: string;
+        value: unknown;
+    };
+
+    const props = defineProps<{
+        cols: TableColumn[];
+        row: PayPeriodEmployeeOverview;
+        modelValue: boolean;
+    }>();
+</script>
+
+<template>
+    <div class="q-px-sm q-pb-sm col-xs-6 col-sm-4 col-md-3 col-lg-2 grid-style-transition">
+        <q-card class="rounded-10">
+            <q-card-section class="q-pb-sm">
+                <div class="text-primary text-h5 text-weight-bolder ellipsis">{{ props.row.employee_name }}</div>
+            </q-card-section>
+            <div 
+                v-for="col in props.cols.filter(col => col.name !== 'employee_name')"
+                :key="col.name"
+                class="q-pa-none q-mx-sm items-center row" 
+                :class="{ 'bg-warning': col.name == 'overtime_hours' && col.value as number > 0 }"
+            >
+                <q-card-section class="text-right text-weight-bolder text-subtitle1 text-primary q-pr-sm q-py-none col-3 ellipsis" style="line-height: 1.2em;">{{ col.value }}</q-card-section>
+                <q-card-section class="text-weight-bold q-pa-none col-9" >{{ col.label }}</q-card-section>
+            </div>
+            <q-card-section 
+                horizontal 
+                class="q-pa-sm q-mt-sm text-weight-bold"
+                :class="props.modelValue ? 'text-white bg-primary' : 'text-primary bg-white'"    
+            >
+                <q-space />
+                <q-checkbox 
+                    dense 
+                    left-label
+                    size="lg" 
+                    checked-icon="lock" 
+                    unchecked-icon="lock_open" 
+                    :color="props.modelValue ? 'white' : 'primary'" keep-color 
+                    :model-value="props.modelValue"
+                    @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>
+</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 ee23bba..f1c408d 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
@@ -1,12 +1,21 @@
 <script setup lang="ts">
     /* eslint-disable */
-    import { computed, ref } from 'vue';
+    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 { mock_pay_period_employee_overviews } from '../timesheet-approval-test-constants';
+    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';
 
     const { t } = useI18n();
+    const timesheetApprovalApi = useTimesheetApprovalApi();
+    const currentPayPeriod = getCurrentPayPeriod();
+    const currentYear = (new Date()).getFullYear();
+    const authStore = useAuthStore();
+    const timesheetStore = useTimesheetStore();
 
     const columns = computed((): QTableColumn<PayPeriodEmployeeOverview>[] => [
         { name: 'employee_name', label: t('timeSheetValidations.tableColumnLabelFullname'), field: 'employee_name', sortable: true },
@@ -19,74 +28,75 @@
     ]);
 
     const filter = ref('');
-    const selectedRows = ref<PayPeriodEmployeeOverview[]>();
-    const rows: PayPeriodEmployeeOverview[] = mock_pay_period_employee_overviews;
+
+    onMounted( async () => {
+        await timesheetApprovalApi.getTimesheetApprovalPayPeriodEmployeeOverviews(currentYear, currentPayPeriod, authStore.user.email);
+    })
 </script>
 
 
 <template>
     <div class="q-pa-md">
         <q-table 
-            :rows="rows" 
+            :rows="timesheetStore.payPeriodEmployeeOverviews" 
             :columns="columns"
-            row-key="employee_id" 
-            selection="multiple" 
-            v-model:selected="selectedRows" 
+            row-key="email" 
             :filter="filter" 
             grid 
             dense
+            color="primary"
             :rows-per-page-options="[0]" 
             card-container-class="justify-center q-gutter-md"
+            :loading="timesheetStore.isLoading"
+            :no-data-label="$t('shared.failedToLoad')"
+            :no-results-label="$t('shared.failedToSearch')"
+            :loading-label="$t('shared.loading')"
         >
             <!-- Top Bar that contains Search, Title, Filters -->
             <template v-slot:top>
-                <q-card flat class="full-width bg-primary row q-px-md">
-                    <!-- Table Title -->
-                    <q-card-section class="q-py-xs">
-                        <div class="text-h4 text-white text-weight-bold">{{$t('timeSheetValidations.tableHeader')}}</div>
-                    </q-card-section>
-                    
+                <q-card flat class="full-width bg-transparent row q-px-md">
                     <q-space />
 
                     <!-- Filters toggle -->
-                    <q-btn flat dense class="text-white" label="filters" icon-right="filter_alt" />
+                    <q-btn-dropdown 
+                        rounded 
+                        push
+                        class="q-mr-md bg-white text-primary" 
+                        label="filters" 
+                        icon="filter_alt" 
+                    />
 
                     <!-- Search bar -->
-                     <q-card-section class="q-py-xs">
-                         <q-input rounded standout="bg-white" dense debounce="300" v-model="filter" placeholder="Search" label-color="primary" bg-color="white">
-                             <template v-slot:append>
-                                 <q-icon name="search" color="primary" />
-                             </template>
-                         </q-input>
-                     </q-card-section>
+                     <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-card>
             </template>
 
             <!-- Template for individual employee cards -->
-            <template v-slot:item="props: { cols: (QTableColumn<PayPeriodEmployeeOverview> & { value: unknown })[], row: PayPeriodEmployeeOverview, selected: boolean }">
-                <div class="q-px-sm q-pb-sm col-xs-6 col-sm-4 col-md-3 col-lg-2 grid-style-transition">
-                    <q-card class="rounded-15">
-                        <q-card-section class="q-pb-sm">
-                            <div class="text-primary text-h5 text-weight-bolder ellipsis">{{ props.row.employee_name }}</div>
-                        </q-card-section>
-                        <div v-for="col in props.cols.filter(col => col.name !== 'employee_name')" class="q-pa-none q-mx-sm items-center row" :class="{ 'bg-warning': col.name == 'overtime_hours' && col.value as number > 0 }" >
-                            <q-card-section class="text-right text-weight-bolder text-subtitle1 text-primary q-pr-sm q-py-none col-3 ellipsis" style="line-height: 1.2em;">{{ col.value }}</q-card-section>
-                            <q-card-section class="text-weight-bold q-pa-none col-9" >{{ col.label }}</q-card-section>
-                        </div>
-                        <q-card-section horizontal class="q-pa-sm q-mt-sm" :class="{ 'bg-primary text-white': props.selected}">
-                            <q-space />
-                            <!-- TODO: Replace checkbox with simple display of timesheet status (approved/pending/partial/complete/) -->
-                            <q-checkbox 
-                                dense 
-                                left-label
-                                size="lg" 
-                                checked-icon="lock" 
-                                unchecked-icon="lock_open" 
-                                :color="props.selected ? 'white' : 'primary'" keep-color 
-                                v-model="props.selected"
-                                :label="props.selected ? $t('timeSheetValidations.timeSheetStatusVerified') : ''" />
-                        </q-card-section>
-                    </q-card>
+            <template v-slot:item="props: { cols: (QTableColumn<PayPeriodEmployeeOverview> & { value: unknown })[], row: PayPeriodEmployeeOverview }">
+                <TimesheetApprovalEmployeeOverviewListItem 
+                    :cols="props.cols" 
+                    :row="props.row" 
+                    v-model="props.row.is_approved"/>
+            </template>
+
+            <!-- Template for custome failed-to-load state -->
+            <template v-slot:no-data="{ message, filter }">
+                <div class="full-width column items-center text-primary q-gutter-sm">
+                    <span class="text-h6 q-mt-xl">
+                        {{ message }}
+                    </span>
+                    <q-icon size="4em" :name="filter ? 'filter_alt_off' : 'error_outline'" />
                 </div>
             </template>
         </q-table>
diff --git a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
new file mode 100644
index 0000000..e66f8ff
--- /dev/null
+++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
@@ -0,0 +1,13 @@
+import { useTimesheetStore } from "src/stores/timesheet-store";
+
+export const useTimesheetApprovalApi = () => {
+    const timesheetStore = useTimesheetStore();
+
+    const getTimesheetApprovalPayPeriodEmployeeOverviews = async (year: number, period_number: number, supervisor_email: string): Promise<void> => {
+        await timesheetStore.getTimesheetApprovalPayPeriodEmployeeOverviews(year, period_number, supervisor_email);
+    }
+
+    return {
+        getTimesheetApprovalPayPeriodEmployeeOverviews,
+    }
+};
\ 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 6303eee..30a09b6 100644
--- a/src/modules/timesheet-approval/services/services-timesheet-approval.ts
+++ b/src/modules/timesheet-approval/services/services-timesheet-approval.ts
@@ -1,21 +1,10 @@
 import { api } from "src/boot/axios";
 import { mock_pay_periods } from "../timesheet-approval-test-constants";
 import type { PayPeriod } from "src/modules/shared/types/pay-period-interface";
+import type { PayPeriodOverview } from "../types/timesheet-approval-pay-period-overview-interface";
 
 export const timesheetApprovalService = {
     getCurrentPayPeriod: (): PayPeriod => {
-        // TODO: REMOVE MOCK DATA PEFORE PUSHING TO PROD
-        //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",
@@ -30,8 +19,9 @@ export const timesheetApprovalService = {
         return await api.get(`/pay-periods/`) || mock_pay_periods;
     },
 
-    getPayPeriodEmployeeOverviews: async (period_number: number) => {
+    getPayPeriodEmployeeOverviews: async (year: number, period_number: number, supervisor_email: string): Promise<PayPeriodOverview> => {
         // TODO: REMOVE MOCK DATA PEFORE PUSHING TO PROD
-        return await api.get(`/pay-periods/${period_number}/overview`);
+        const response = await api.get(`/pay-periods/${year}/${period_number}/${supervisor_email}`);
+        return response.data;
     },
 };
\ 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 556bf7c..28db6c4 100644
--- a/src/modules/timesheet-approval/timesheet-approval-test-constants.ts
+++ b/src/modules/timesheet-approval/timesheet-approval-test-constants.ts
@@ -3,7 +3,7 @@ import type { PayPeriodEmployeeOverview } from "./types/timesheet-approval-pay-p
 
 export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
     {
-        "employee_id": 'EMP-001',
+        "email": 'EMP-001',
         "employee_name": 'Alice Johnson',
         "regular_hours": 75,
         "evening_hours": 12,
@@ -14,7 +14,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": false
     },
     {
-        "employee_id": 'EMP-002',
+        "email": 'EMP-002',
         "employee_name": 'Brian Smith',
         "regular_hours": 80,
         "evening_hours": 8,
@@ -25,7 +25,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": true
     },
     {
-        "employee_id": 'EMP-003',
+        "email": 'EMP-003',
         "employee_name": 'Chloe Ramirez',
         "regular_hours": 68,
         "evening_hours": 15,
@@ -36,7 +36,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": false
     },
     {
-        "employee_id": 'EMP-004',
+        "email": 'EMP-004',
         "employee_name": 'David Lee',
         "regular_hours": 82,
         "evening_hours": 5,
@@ -47,7 +47,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": true
     },
     {
-        "employee_id": 'EMP-005',
+        "email": 'EMP-005',
         "employee_name": 'Emily Carter',
         "regular_hours": 78,
         "evening_hours": 10,
@@ -58,7 +58,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": false
     },
     {
-        "employee_id": 'EMP-006',
+        "email": 'EMP-006',
         "employee_name": 'Maxime Murray Gendron',
         "regular_hours": 80,
         "evening_hours": 0,
@@ -69,7 +69,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": false
     },
     {
-        "employee_id": 'EMP-007',
+        "email": 'EMP-007',
         "employee_name": 'Marc-André Henrico',
         "regular_hours": 80,
         "evening_hours": 0,
@@ -80,7 +80,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": false
     },
     {
-        "employee_id": 'EMP-008',
+        "email": 'EMP-008',
         "employee_name": 'Jessy Sharock',
         "regular_hours": 80,
         "evening_hours": 0,
@@ -91,7 +91,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": false
     },
     {
-        "employee_id": 'EMP-009',
+        "email": 'EMP-009',
         "employee_name": 'David Richer',
         "regular_hours": 80,
         "evening_hours": 0,
@@ -102,7 +102,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": false
     },
     {
-        "employee_id": 'EMP-010',
+        "email": 'EMP-010',
         "employee_name": 'Nicolas Drolet',
         "regular_hours": 80,
         "evening_hours": 0,
@@ -113,7 +113,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": false
     },
     {
-        "employee_id": 'EMP-011',
+        "email": 'EMP-011',
         "employee_name": 'Frederick Pruneau',
         "regular_hours": 16,
         "evening_hours": 0,
@@ -124,7 +124,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": false
     },
     {
-        "employee_id": 'EMP-012',
+        "email": 'EMP-012',
         "employee_name": 'Matthieu Haineault Gervais',
         "regular_hours": 80,
         "evening_hours": 0,
@@ -135,7 +135,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": false
     },
     {
-        "employee_id": 'EMP-013',
+        "email": 'EMP-013',
         "employee_name": 'Robinson Viaud',
         "regular_hours": 80,
         "evening_hours": 0,
@@ -146,7 +146,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": false
     },
     {
-        "employee_id": 'EMP-014',
+        "email": 'EMP-014',
         "employee_name": 'Geneviève Bourdon',
         "regular_hours": 80,
         "evening_hours": 0,
@@ -157,7 +157,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": false
     },
     {
-        "employee_id": 'EMP-015',
+        "email": 'EMP-015',
         "employee_name": 'Frédérique Soulard',
         "regular_hours": 80,
         "evening_hours": 0,
@@ -168,7 +168,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": false
     },
     {
-        "employee_id": 'EMP-016',
+        "email": 'EMP-016',
         "employee_name": 'Patrick Doucet',
         "regular_hours": 80,
         "evening_hours": 0,
@@ -179,7 +179,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": false
     },
     {
-        "employee_id": 'EMP-017',
+        "email": 'EMP-017',
         "employee_name": 'Dahlia Tremblay',
         "regular_hours": 80,
         "evening_hours": 0,
@@ -190,7 +190,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": false
     },
     {
-        "employee_id": 'EMP-018',
+        "email": 'EMP-018',
         "employee_name": 'Louis Morneau',
         "regular_hours": 80,
         "evening_hours": 0,
@@ -201,7 +201,7 @@ export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
         "is_approved": false
     },
     {
-        "employee_id": 'EMP-019',
+        "email": 'EMP-019',
         "employee_name": 'Michel Blais',
         "regular_hours": 80,
         "evening_hours": 0,
diff --git a/src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-overview-interface.ts b/src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-overview-interface.ts
index f935687..03783da 100644
--- a/src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-overview-interface.ts
+++ b/src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-overview-interface.ts
@@ -1,5 +1,5 @@
 export interface PayPeriodEmployeeOverview {
-    employee_id: string;
+    email: string;
     employee_name: string;
     regular_hours: number;
     evening_hours: number;
diff --git a/src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-interface.ts b/src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-interface.ts
index 130ee40..f12b0e0 100644
--- a/src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-interface.ts
+++ b/src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-interface.ts
@@ -1,6 +1,11 @@
+import type { PayPeriodEmployeeOverview } from "./timesheet-approval-pay-period-employee-overview-interface";
+
 export interface PayPeriodOverview {
-    period_number: number;
-    start_date: string;
-    end_date: string;
+    pay_period_no: number;
+    pay_year: number;
+    payday: string;
+    period_start: string;
+    period_end: string;
     label: string;
+    employees_overview: PayPeriodEmployeeOverview[];
 };
\ No newline at end of file
diff --git a/src/stores/auth-store.ts b/src/stores/auth-store.ts
index f25f094..d7ba1f5 100644
--- a/src/stores/auth-store.ts
+++ b/src/stores/auth-store.ts
@@ -3,15 +3,18 @@ import { defineStore } from "pinia";
 import { AuthService } from "../modules/auth/services/services-auth";
 import type { User } from "src/modules/shared/types/user-interface";
 
-const defaultUser: User = {
-    firstName: 'Unknown',
-    lastName: 'Unknown',
-    email: 'guest@guest.com',
-    role: 'guest'
-  };
+export type CompanyRole = 'guest' | 'supervisor' | 'accounting' | 'human_resources' | 'employee';
+
+const TestUsers: Record<CompanyRole, User> = {
+  guest: { firstName: 'Unknown', lastName: 'Unknown', email: 'guest@guest.com', role: 'guest' },
+  supervisor: { firstName: 'Robin', lastName: 'Clark', email: 'user5@example.test', role: 'supervisor' },
+  accounting: { firstName: 'Robin', lastName: 'Clark', email: 'user5@example.test', role: 'supervisor' },
+  human_resources: { firstName: 'Robin', lastName: 'Clark', email: 'user5@example.test', role: 'supervisor' },
+  employee: { firstName: 'Robin', lastName: 'Clark', email: 'user5@example.test', role: 'supervisor' },
+}
 
 export const useAuthStore = defineStore('auth', () => {  
-  const user = ref(defaultUser);
+  const user = ref(TestUsers.guest);
   const authError = ref("");
   const isAuthorizedUser = computed(() => user.value.role !== 'guest');
 
@@ -27,11 +30,16 @@ export const useAuthStore = defineStore('auth', () => {
   };
 
   const logout = () => {
-    user.value = defaultUser;
+    user.value = TestUsers.guest;
   };
 
-  const setUser = (currentUser: User) => {
-    user.value = currentUser;
+  const setUser = (bypassRole: string) => {
+    if (bypassRole in TestUsers) { 
+      user.value = TestUsers[bypassRole as CompanyRole];
+    }
+    else { 
+      user.value = TestUsers.guest; 
+    }
   };
 
   return { user, authError, isAuthorizedUser, login, oidcLogin, logout, setUser };
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index a6b79d3..0877b5f 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -7,226 +7,27 @@ import type { PayPeriodEmployeeOverview } from "src/modules/timesheet-approval/t
 
 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
-    },
-    {
-        "employee_id": 'EMP-006',
-        "employee_name": 'Maxime Murray Gendron',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 20000,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "employee_id": 'EMP-007',
-        "employee_name": 'Marc-André Henrico',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "employee_id": 'EMP-008',
-        "employee_name": 'Jessy Sharock',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "employee_id": 'EMP-009',
-        "employee_name": 'David Richer',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "employee_id": 'EMP-010',
-        "employee_name": 'Nicolas Drolet',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "employee_id": 'EMP-011',
-        "employee_name": 'Frederick Pruneau',
-        "regular_hours": 16,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "employee_id": 'EMP-012',
-        "employee_name": 'Matthieu Haineault Gervais',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "employee_id": 'EMP-013',
-        "employee_name": 'Robinson Viaud',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "employee_id": 'EMP-014',
-        "employee_name": 'Geneviève Bourdon',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "employee_id": 'EMP-015',
-        "employee_name": 'Frédérique Soulard',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "employee_id": 'EMP-016',
-        "employee_name": 'Patrick Doucet',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "employee_id": 'EMP-017',
-        "employee_name": 'Dahlia Tremblay',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "employee_id": 'EMP-018',
-        "employee_name": 'Louis Morneau',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "employee_id": 'EMP-019',
-        "employee_name": 'Michel Blais',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    }
-];
-
 export const useTimesheetStore = defineStore('timesheet', () => {
     const payPeriods = ref<PayPeriod[]>([]);
     const currentPayPeriod = ref<PayPeriod>(default_current_pay_period);
-    const payPeriodEmployeeOverviews = ref<PayPeriodEmployeeOverview[]>(mock_pay_period_employee_overviews);
+    const payPeriodEmployeeOverviews = ref<PayPeriodEmployeeOverview[]>([]);
+    const isLoading = ref<boolean>(false);
 
     const getCurrentPayPeriod = () => {
         currentPayPeriod.value = timesheetApprovalService.getCurrentPayPeriod();
     }
 
-    return { payPeriods, currentPayPeriod, payPeriodEmployeeOverviews, getCurrentPayPeriod};
+    const getTimesheetApprovalPayPeriodEmployeeOverviews = async (year: number, period_number: number, supervisor_email: string) => {
+        isLoading.value = true;
+        try {
+            const response = await timesheetApprovalService.getPayPeriodEmployeeOverviews(year, period_number, supervisor_email);
+            payPeriodEmployeeOverviews.value = response.employees_overview;
+        } catch (error) {
+            console.error('There was an error retrieving Employee Pay Period overviews: ', error);
+            // TODO: trigger an alert window with an error message here!
+        }
+        isLoading.value = false;
+    }
+
+    return { payPeriods, currentPayPeriod, payPeriodEmployeeOverviews, isLoading, getCurrentPayPeriod, getTimesheetApprovalPayPeriodEmployeeOverviews};
 });
diff --git a/src/utils/has-required-role.ts b/src/utils/has-required-role.ts
deleted file mode 100644
index dbd7056..0000000
--- a/src/utils/has-required-role.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { useAuthStore } from "src/stores/auth-store";
-
-export const hasRequiredRole = (...requiredRoles: string[] ) => {
-    const currentUserRole = useAuthStore().user.role;
-    
-    return requiredRoles.includes(currentUserRole);
-};
\ No newline at end of file
diff --git a/src/utils/pay-period-calculator.ts b/src/utils/pay-period-calculator.ts
new file mode 100644
index 0000000..36adb38
--- /dev/null
+++ b/src/utils/pay-period-calculator.ts
@@ -0,0 +1,16 @@
+import { date } from 'quasar';
+
+const anchor_date: Date = new Date('2023-12-17');
+
+export const getCurrentPayPeriod = (today = new Date()): number => {
+  const period_length = 14; // days
+  const periods_per_year = 26;
+
+  const days_since_anchor = date.getDateDiff(today, anchor_date, 'days');
+  const periods_since_anchor = Math.floor(days_since_anchor / period_length);
+
+  const current_period = (periods_since_anchor % periods_per_year) + 1;
+
+  console.log(current_period);
+  return current_period;
+}

From 21b98ec825cd29445a7d62fd089f267ce642da83 Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Wed, 20 Aug 2025 17:03:32 -0400
Subject: [PATCH 2/4] refactor(approvals): remake entire card appearance, hook
 up to pay period picker to backend, make the period picker actually
 functional.

---
 src/css/app.scss                              |   2 +-
 src/i18n/en-ca/index.ts                       |  10 +-
 src/i18n/fr-ca/index.ts                       |  10 +-
 .../supervisor/supervisor-crew-table-item.vue |   4 +-
 .../supervisor/supervisor-crew-table.vue      |  17 +-
 .../types/pay-period-bundle-interface.ts      |   6 +
 .../shared/types/pay-period-interface.ts      |  11 +-
 ...t-approval-employee-overview-list-item.vue |  74 ++-
 ...esheet-approval-employee-overview-list.vue |  20 +-
 .../timesheet-approval-period-picker.vue      |  13 +-
 .../composables/use-timesheet-approval-api.ts |   9 +-
 .../services/services-timesheet-approval.ts   |  19 +-
 .../timesheet-approval-test-constants.ts      | 570 +++++++++---------
 src/stores/timesheet-store.ts                 |  30 +-
 14 files changed, 434 insertions(+), 361 deletions(-)
 create mode 100644 src/modules/shared/types/pay-period-bundle-interface.ts

diff --git a/src/css/app.scss b/src/css/app.scss
index 74df4ee..2acab20 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -1,7 +1,7 @@
 // app global css in SCSS form
 @each $size in (5, 10, 15, 20, 25) {
   .rounded-#{$size} {
-    border-radius: #{$size}px;
+    border-radius: #{$size}px !important;
   }
 }
 
diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index 34868c8..5ac2cfd 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -297,11 +297,11 @@ export default {
     tableHeader: 'List of employees',
     tableColumnLabelFullname: 'Full name',
     tableColumnLabelRegularHours: 'regular hours',
-    tableColumnLabelEveningHours: 'evening hours',
-    tableColumnLabelEmergencyHours: 'emergency hours',
-    tableColumnLabelOvertime: 'overtime hours',
-    tableColumnLabelExpenses: 'of expenses',
-    tableColumnLabelMileage: 'of mileage',
+    tableColumnLabelEveningHours: 'evening',
+    tableColumnLabelEmergencyHours: 'emergency',
+    tableColumnLabelOvertime: 'overtime',
+    tableColumnLabelExpenses: 'expenses',
+    tableColumnLabelMileage: 'mileage',
     actionTitle: 'Please save the changes made.',
     actionButton: 'Save',
     timeSheetStatusVerified: 'approved',
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index e489482..e710a53 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -347,11 +347,11 @@ export default {
     tableHeader: 'Liste des employés',
     tableColumnLabelFullname: 'nom complet',
     tableColumnLabelRegularHours: 'heures régulières',
-    tableColumnLabelEveningHours: 'heures de soir',
-    tableColumnLabelEmergencyHours: 'heures d’urgence',
-    tableColumnLabelOvertime: 'heures supplémentaires',
-    tableColumnLabelExpenses: 'de dépenses',
-    tableColumnLabelMileage: 'de kilométrage',
+    tableColumnLabelEveningHours: 'soir',
+    tableColumnLabelEmergencyHours: 'urgence',
+    tableColumnLabelOvertime: 'supplémentaires',
+    tableColumnLabelExpenses: 'dépenses',
+    tableColumnLabelMileage: 'kilométrage',
     actionTitle: 'Veuillez enregistrer les changements effectués.',
     actionButton: 'Enregistrer',
     timeSheetStatusVerified: 'validé',
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 5da5f32..9aae542 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
@@ -25,7 +25,7 @@ import { useEmployeeListApi } from 'src/modules/employee-list/composables/use-em
 <template>
     <q-card 
         v-ripple 
-        class="rounded-15 bg-white col-xs-6 col-sm-4 col-md-3 col-lg-2 column no-wrap cursor-pointer" 
+        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)"
     >
@@ -37,9 +37,9 @@ import { useEmployeeListApi } from 'src/modules/employee-list/composables/use-em
         <q-card-section class="text-center text-h6 text-primary text-weight-medium text-uppercase q-pb-none col-2 content-end" style="line-height: 0.7em;">
             <div class="ellipsis">
                 {{ props.row.first_name }} {{ props.row.last_name }}
-                <q-separator color="primary" />
             </div>
         </q-card-section>
+        <q-separator color="primary" class="q-mx-sm q-mt-xs" />
         <q-card-section class="text-caption text-grey-8 text-body2 text-uppercase q-pt-none text-center col content-start" style="min-height: 5em;">
             <div class=" ellipsis-2-lines">
                 {{ props.row.job_title }}
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 09d1191..df4b982 100644
--- a/src/modules/employee-list/components/supervisor/supervisor-crew-table.vue
+++ b/src/modules/employee-list/components/supervisor/supervisor-crew-table.vue
@@ -15,6 +15,7 @@
     const { t } = useI18n();
     const filter = ref("");
     const isGridMode = ref(true);
+    const pagination = ref({ rowsPerPage: 0 });
 
     const employeeListColumns = computed((): QTableColumn<EmployeeListTableItem>[] => [
         {name: 'first_name', label: t('usersListPage.userListFirstName'), field: 'first_name', align: 'left'},
@@ -35,24 +36,30 @@
 <template>
     <div class="q-pa-lg col">
         <q-table
-            title=" " 
+            dense
+            flat
+            hide-pagination
+            virtual-scroll
+            title=" "
+            card-style="max-height: 70vh;"
             :rows="employeeStore.employeeList" 
             :columns="employeeListColumns" 
             row-key="name"
+            v-model:pagination="pagination"
             :rows-per-page-options="[0]"
             :filter="filter"
             class="q-pa-md bg-transparent"
             color="primary"
             table-header-class="text-primary text-uppercase"
-            card-container-class="justify-center q-gutter-md"
+            card-container-class="justify-center"
             :grid="isGridMode"
             :loading="isLoadingList"
-            dense
-            flat
             :no-data-label="$t('shared.failedToLoad')"
             :no-results-label="$t('shared.failedToSearch')"
             :loading-label="$t('shared.loading')"
-            table-class="bg-white q-pa-md q-mx-md rounded-15 shadow-12"
+            table-class="bg-white q-pa-md q-mx-md rounded-10 shadow-12"
+            table-style=""
+            @row-click="() => console.log('click!')"
         >
             <template v-slot:item="props">
                 <SupervisorCrewTableItem :row="props.row"/>
diff --git a/src/modules/shared/types/pay-period-bundle-interface.ts b/src/modules/shared/types/pay-period-bundle-interface.ts
new file mode 100644
index 0000000..6ea23bf
--- /dev/null
+++ b/src/modules/shared/types/pay-period-bundle-interface.ts
@@ -0,0 +1,6 @@
+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/pay-period-interface.ts b/src/modules/shared/types/pay-period-interface.ts
index 7f9e3a3..3c845b2 100644
--- a/src/modules/shared/types/pay-period-interface.ts
+++ b/src/modules/shared/types/pay-period-interface.ts
@@ -1,7 +1,8 @@
 export interface PayPeriod {
-    period_number: number;
-    start_date: string;
-    end_date: string;
-    year: number;
+    pay_period_no: number;
+    period_start: string;
+    period_end: string;
+    payday: string;
+    pay_year: number;
     label: string;
-};
\ No newline at end of file
+}
\ 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 8713c76..8ac6054 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
@@ -15,24 +15,68 @@
 </script>
 
 <template>
-    <div class="q-px-sm q-pb-sm col-xs-6 col-sm-4 col-md-3 col-lg-2 grid-style-transition">
+    <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">
-            <q-card-section class="q-pb-sm">
-                <div class="text-primary text-h5 text-weight-bolder ellipsis">{{ props.row.employee_name }}</div>
+            <!-- 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>
-            <div 
-                v-for="col in props.cols.filter(col => col.name !== 'employee_name')"
-                :key="col.name"
-                class="q-pa-none q-mx-sm items-center row" 
-                :class="{ 'bg-warning': col.name == 'overtime_hours' && col.value as number > 0 }"
-            >
-                <q-card-section class="text-right text-weight-bolder text-subtitle1 text-primary q-pr-sm q-py-none col-3 ellipsis" style="line-height: 1.2em;">{{ col.value }}</q-card-section>
-                <q-card-section class="text-weight-bold q-pa-none col-9" >{{ col.label }}</q-card-section>
-            </div>
+
+            <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'">
+                        <!-- Regular hours segment -->
+                        <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>
+                            <q-item-label class="text-weight-bolder text-h3 text-grey-8 q-py-none">
+                                {{ props.cols.find(c => c.name === 'regular_hours')?.value }}
+                            </q-item-label>
+                        </q-item>
+
+                        <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;">
+                                    {{ col.label }}
+                                </q-item-label>
+                                <q-item-label class="text-weight-bolder q-pa-none text-h6 text-grey-8">
+                                    {{ col.value }}
+                                </q-item-label>
+                            </q-item>
+                        </div>
+                    </div>
+                    
+                    <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;">
+                                {{ col.label }}
+                            </q-item-label>
+                            <q-item-label class="text-weight-bolder q-pa-none text-h6 text-grey-8">
+                                {{ col.value }}
+                            </q-item-label>
+                        </q-item>
+                    </div>
+                </div>
+            </q-card-section>
+
+            <q-separator color="primary" style="height: 2px;" />
+            
+            <!-- Validate entire Pay Period section -->
             <q-card-section 
-                horizontal 
-                class="q-pa-sm q-mt-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 
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 f1c408d..54846ae 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
@@ -11,11 +11,20 @@
     import { useTimesheetStore } from 'src/stores/timesheet-store';
 
     const { t } = useI18n();
-    const timesheetApprovalApi = useTimesheetApprovalApi();
+    
     const currentPayPeriod = getCurrentPayPeriod();
     const currentYear = (new Date()).getFullYear();
+    
+    const originalApprovals = ref<Record<string, boolean>>({});
+    const hasChanges = computed(() => {
+        return timesheetStore.payPeriodEmployeeOverviews.some(emp => {
+            return emp.is_approved !== originalApprovals.value[emp.email];
+        });
+    });
+
     const authStore = useAuthStore();
     const timesheetStore = useTimesheetStore();
+    const timesheetApprovalApi = useTimesheetApprovalApi();
 
     const columns = computed((): QTableColumn<PayPeriodEmployeeOverview>[] => [
         { name: 'employee_name', label: t('timeSheetValidations.tableColumnLabelFullname'), field: 'employee_name', sortable: true },
@@ -30,7 +39,9 @@
     const filter = ref('');
 
     onMounted( async () => {
+        await timesheetApprovalApi.getCurrentAndAllPayPeriods();
         await timesheetApprovalApi.getTimesheetApprovalPayPeriodEmployeeOverviews(currentYear, currentPayPeriod, authStore.user.email);
+        originalApprovals.value = Object.fromEntries( timesheetStore.payPeriodEmployeeOverviews.map(emp => [emp.email, emp.is_approved]));
     })
 </script>
 
@@ -44,9 +55,10 @@
             :filter="filter" 
             grid 
             dense
+            hide-pagination
             color="primary"
             :rows-per-page-options="[0]" 
-            card-container-class="justify-center q-gutter-md"
+            card-container-class="justify-center"
             :loading="timesheetStore.isLoading"
             :no-data-label="$t('shared.failedToLoad')"
             :no-results-label="$t('shared.failedToSearch')"
@@ -54,7 +66,7 @@
         >
             <!-- Top Bar that contains Search, Title, Filters -->
             <template v-slot:top>
-                <q-card flat class="full-width bg-transparent row q-px-md">
+                <div class="full-width row">
                     <q-space />
 
                     <!-- Filters toggle -->
@@ -79,7 +91,7 @@
                             <q-icon name="search" color="primary"/>
                         </template>
                     </q-input>
-                </q-card>
+                </div>
             </template>
 
             <!-- Template for individual employee cards -->
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 a8f680e..4c020bf 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue
@@ -2,20 +2,15 @@
     import { useTimesheetStore } from 'src/stores/timesheet-store';
 
     const timesheetStore = useTimesheetStore();
-
-    const updateCurrentPayPeriod = () => {
-        timesheetStore.getCurrentPayPeriod();
-    };
-
 </script>
 
 <template>
     <div class="column items-center">
-        <div class="text-primary text-h5">{{ timesheetStore.currentPayPeriod?.label }}</div>
+        <div class="text-primary text-h5">{{ timesheetStore.currentPayPeriod?.label || '' }}</div>
         <q-btn-group push rounded>
-            <q-btn push icon="keyboard_arrow_left" color="primary"  class="q-px-xl" />
-            <q-btn push icon="date_range" color="primary" class="q-px-xl" @click="updateCurrentPayPeriod" />
-            <q-btn push icon="keyboard_arrow_right" color="primary" class="q-px-xl" />
+            <q-btn push icon="keyboard_arrow_left" color="primary"  class="q-px-xl" @click="timesheetStore.getPreviousOrNextPayPeriod(-1)"/>
+            <q-btn push icon="date_range" color="primary" class="q-px-xl" />
+            <q-btn push icon="keyboard_arrow_right" color="primary" class="q-px-xl" @click="timesheetStore.getPreviousOrNextPayPeriod(1)"/>
         </q-btn-group>
     </div>
 </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 e66f8ff..9e30562 100644
--- a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
+++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
@@ -1,13 +1,18 @@
 import { useTimesheetStore } from "src/stores/timesheet-store";
 
 export const useTimesheetApprovalApi = () => {
-    const timesheetStore = useTimesheetStore();
+    const timesheet_store = useTimesheetStore();
+
+    const getCurrentAndAllPayPeriods = async () => {
+        await timesheet_store.getCurrentAndAllPayPeriods();
+    }
 
     const getTimesheetApprovalPayPeriodEmployeeOverviews = async (year: number, period_number: number, supervisor_email: string): Promise<void> => {
-        await timesheetStore.getTimesheetApprovalPayPeriodEmployeeOverviews(year, period_number, supervisor_email);
+        await timesheet_store.getTimesheetApprovalPayPeriodEmployeeOverviews(year, period_number, supervisor_email);
     }
 
     return {
         getTimesheetApprovalPayPeriodEmployeeOverviews,
+        getCurrentAndAllPayPeriods,
     }
 };
\ 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 30a09b6..1db5a00 100644
--- a/src/modules/timesheet-approval/services/services-timesheet-approval.ts
+++ b/src/modules/timesheet-approval/services/services-timesheet-approval.ts
@@ -1,22 +1,11 @@
 import { api } from "src/boot/axios";
-import { mock_pay_periods } from "../timesheet-approval-test-constants";
-import type { PayPeriod } from "src/modules/shared/types/pay-period-interface";
 import type { PayPeriodOverview } from "../types/timesheet-approval-pay-period-overview-interface";
+import type { PayPeriodBundle } from "src/modules/shared/types/pay-period-bundle-interface";
 
 export const timesheetApprovalService = {
-    getCurrentPayPeriod: (): PayPeriod => {
-        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 () => {
-        // TODO: REMOVE MOCK DATA PEFORE PUSHING TO PROD
-        return await api.get(`/pay-periods/`) || mock_pay_periods;
+    getCurrentAndAllPayPeriod: async (): Promise<PayPeriodBundle> => {
+        const response = await api.get('pay-periods/bundle/current-and-all');
+        return response.data;
     },
 
     getPayPeriodEmployeeOverviews: async (year: number, period_number: number, supervisor_email: string): Promise<PayPeriodOverview> => {
diff --git a/src/modules/timesheet-approval/timesheet-approval-test-constants.ts b/src/modules/timesheet-approval/timesheet-approval-test-constants.ts
index 28db6c4..abdb8ba 100644
--- a/src/modules/timesheet-approval/timesheet-approval-test-constants.ts
+++ b/src/modules/timesheet-approval/timesheet-approval-test-constants.ts
@@ -1,287 +1,287 @@
-import type { PayPeriod } from "../shared/types/pay-period-interface";
-import type { 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[] = [
-    {
-        "email": '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
-    },
-    {
-        "email": '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
-    },
-    {
-        "email": '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
-    },
-    {
-        "email": '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
-    },
-    {
-        "email": '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
-    },
-    {
-        "email": 'EMP-006',
-        "employee_name": 'Maxime Murray Gendron',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "email": 'EMP-007',
-        "employee_name": 'Marc-André Henrico',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "email": 'EMP-008',
-        "employee_name": 'Jessy Sharock',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "email": 'EMP-009',
-        "employee_name": 'David Richer',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "email": 'EMP-010',
-        "employee_name": 'Nicolas Drolet',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "email": 'EMP-011',
-        "employee_name": 'Frederick Pruneau',
-        "regular_hours": 16,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "email": 'EMP-012',
-        "employee_name": 'Matthieu Haineault Gervais',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "email": 'EMP-013',
-        "employee_name": 'Robinson Viaud',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "email": 'EMP-014',
-        "employee_name": 'Geneviève Bourdon',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "email": 'EMP-015',
-        "employee_name": 'Frédérique Soulard',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "email": 'EMP-016',
-        "employee_name": 'Patrick Doucet',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "email": 'EMP-017',
-        "employee_name": 'Dahlia Tremblay',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "email": 'EMP-018',
-        "employee_name": 'Louis Morneau',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    },
-    {
-        "email": 'EMP-019',
-        "employee_name": 'Michel Blais',
-        "regular_hours": 80,
-        "evening_hours": 0,
-        "emergency_hours": 0,
-        "overtime_hours": 0,
-        "expenses": 0,
-        "mileage": 0,
-        "is_approved": false
-    }
-];
+// export const mock_pay_period_employee_overviews: PayPeriodEmployeeOverview[] = [
+//     {
+//         "email": '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
+//     },
+//     {
+//         "email": '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
+//     },
+//     {
+//         "email": '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
+//     },
+//     {
+//         "email": '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
+//     },
+//     {
+//         "email": '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
+//     },
+//     {
+//         "email": 'EMP-006',
+//         "employee_name": 'Maxime Murray Gendron',
+//         "regular_hours": 80,
+//         "evening_hours": 0,
+//         "emergency_hours": 0,
+//         "overtime_hours": 0,
+//         "expenses": 0,
+//         "mileage": 0,
+//         "is_approved": false
+//     },
+//     {
+//         "email": 'EMP-007',
+//         "employee_name": 'Marc-André Henrico',
+//         "regular_hours": 80,
+//         "evening_hours": 0,
+//         "emergency_hours": 0,
+//         "overtime_hours": 0,
+//         "expenses": 0,
+//         "mileage": 0,
+//         "is_approved": false
+//     },
+//     {
+//         "email": 'EMP-008',
+//         "employee_name": 'Jessy Sharock',
+//         "regular_hours": 80,
+//         "evening_hours": 0,
+//         "emergency_hours": 0,
+//         "overtime_hours": 0,
+//         "expenses": 0,
+//         "mileage": 0,
+//         "is_approved": false
+//     },
+//     {
+//         "email": 'EMP-009',
+//         "employee_name": 'David Richer',
+//         "regular_hours": 80,
+//         "evening_hours": 0,
+//         "emergency_hours": 0,
+//         "overtime_hours": 0,
+//         "expenses": 0,
+//         "mileage": 0,
+//         "is_approved": false
+//     },
+//     {
+//         "email": 'EMP-010',
+//         "employee_name": 'Nicolas Drolet',
+//         "regular_hours": 80,
+//         "evening_hours": 0,
+//         "emergency_hours": 0,
+//         "overtime_hours": 0,
+//         "expenses": 0,
+//         "mileage": 0,
+//         "is_approved": false
+//     },
+//     {
+//         "email": 'EMP-011',
+//         "employee_name": 'Frederick Pruneau',
+//         "regular_hours": 16,
+//         "evening_hours": 0,
+//         "emergency_hours": 0,
+//         "overtime_hours": 0,
+//         "expenses": 0,
+//         "mileage": 0,
+//         "is_approved": false
+//     },
+//     {
+//         "email": 'EMP-012',
+//         "employee_name": 'Matthieu Haineault Gervais',
+//         "regular_hours": 80,
+//         "evening_hours": 0,
+//         "emergency_hours": 0,
+//         "overtime_hours": 0,
+//         "expenses": 0,
+//         "mileage": 0,
+//         "is_approved": false
+//     },
+//     {
+//         "email": 'EMP-013',
+//         "employee_name": 'Robinson Viaud',
+//         "regular_hours": 80,
+//         "evening_hours": 0,
+//         "emergency_hours": 0,
+//         "overtime_hours": 0,
+//         "expenses": 0,
+//         "mileage": 0,
+//         "is_approved": false
+//     },
+//     {
+//         "email": 'EMP-014',
+//         "employee_name": 'Geneviève Bourdon',
+//         "regular_hours": 80,
+//         "evening_hours": 0,
+//         "emergency_hours": 0,
+//         "overtime_hours": 0,
+//         "expenses": 0,
+//         "mileage": 0,
+//         "is_approved": false
+//     },
+//     {
+//         "email": 'EMP-015',
+//         "employee_name": 'Frédérique Soulard',
+//         "regular_hours": 80,
+//         "evening_hours": 0,
+//         "emergency_hours": 0,
+//         "overtime_hours": 0,
+//         "expenses": 0,
+//         "mileage": 0,
+//         "is_approved": false
+//     },
+//     {
+//         "email": 'EMP-016',
+//         "employee_name": 'Patrick Doucet',
+//         "regular_hours": 80,
+//         "evening_hours": 0,
+//         "emergency_hours": 0,
+//         "overtime_hours": 0,
+//         "expenses": 0,
+//         "mileage": 0,
+//         "is_approved": false
+//     },
+//     {
+//         "email": 'EMP-017',
+//         "employee_name": 'Dahlia Tremblay',
+//         "regular_hours": 80,
+//         "evening_hours": 0,
+//         "emergency_hours": 0,
+//         "overtime_hours": 0,
+//         "expenses": 0,
+//         "mileage": 0,
+//         "is_approved": false
+//     },
+//     {
+//         "email": 'EMP-018',
+//         "employee_name": 'Louis Morneau',
+//         "regular_hours": 80,
+//         "evening_hours": 0,
+//         "emergency_hours": 0,
+//         "overtime_hours": 0,
+//         "expenses": 0,
+//         "mileage": 0,
+//         "is_approved": false
+//     },
+//     {
+//         "email": 'EMP-019',
+//         "employee_name": 'Michel Blais',
+//         "regular_hours": 80,
+//         "evening_hours": 0,
+//         "emergency_hours": 0,
+//         "overtime_hours": 0,
+//         "expenses": 0,
+//         "mileage": 0,
+//         "is_approved": false
+//     }
+// ];
 
-export const mock_pay_periods: PayPeriod[] = [
-  {
-    "period_number": 15,
-    "start_date": "2025-07-27",
-    "end_date": "2025-08-09",
-    "year": 2025,
-    "label": "2025-07-27 → 2025-08-09"
-  },
-  {
-    "period_number": 14,
-    "start_date": "2025-07-13",
-    "end_date": "2025-07-26",
-    "year": 2025,
-    "label": "2025-07-13 → 2025-07-26"
-  },
-  {
-    "period_number": 13,
-    "start_date": "2025-06-29",
-    "end_date": "2025-07-12",
-    "year": 2025,
-    "label": "2025-06-29 → 2025-07-12"
-  },
-  {
-    "period_number": 12,
-    "start_date": "2025-06-15",
-    "end_date": "2025-06-28",
-    "year": 2025,
-    "label": "2025-06-15 → 2025-06-28"
-  },
-  {
-    "period_number": 11,
-    "start_date": "2025-06-01",
-    "end_date": "2025-06-14",
-    "year": 2025,
-    "label": "2025-06-01 → 2025-06-14"
-  },
-  {
-    "period_number": 10,
-    "start_date": "2025-05-18",
-    "end_date": "2025-05-31",
-    "year": 2025,
-    "label": "2025-05-18 → 2025-05-31"
-  },
-  {
-    "period_number": 9,
-    "start_date": "2025-05-04",
-    "end_date": "2025-05-17",
-    "year": 2025,
-    "label": "2025-05-04 → 2025-05-17"
-  },
-  {
-    "period_number": 8,
-    "start_date": "2025-04-20",
-    "end_date": "2025-05-03",
-    "year": 2025,
-    "label": "2025-04-20 → 2025-05-03"
-  },
-  {
-    "period_number": 7,
-    "start_date": "2025-04-06",
-    "end_date": "2025-04-19",
-    "year": 2025,
-    "label": "2025-04-06 → 2025-04-19"
-  },
-  {
-    "period_number": 6,
-    "start_date": "2025-03-23",
-    "end_date": "2025-04-05",
-    "year": 2025,
-    "label": "2025-03-23 → 2025-04-05"
-  }
-]
+// export const mock_pay_periods: PayPeriod[] = [
+//   {
+//     "period_number": 15,
+//     "start_date": "2025-07-27",
+//     "end_date": "2025-08-09",
+//     "year": 2025,
+//     "label": "2025-07-27 → 2025-08-09"
+//   },
+//   {
+//     "period_number": 14,
+//     "start_date": "2025-07-13",
+//     "end_date": "2025-07-26",
+//     "year": 2025,
+//     "label": "2025-07-13 → 2025-07-26"
+//   },
+//   {
+//     "period_number": 13,
+//     "start_date": "2025-06-29",
+//     "end_date": "2025-07-12",
+//     "year": 2025,
+//     "label": "2025-06-29 → 2025-07-12"
+//   },
+//   {
+//     "period_number": 12,
+//     "start_date": "2025-06-15",
+//     "end_date": "2025-06-28",
+//     "year": 2025,
+//     "label": "2025-06-15 → 2025-06-28"
+//   },
+//   {
+//     "period_number": 11,
+//     "start_date": "2025-06-01",
+//     "end_date": "2025-06-14",
+//     "year": 2025,
+//     "label": "2025-06-01 → 2025-06-14"
+//   },
+//   {
+//     "period_number": 10,
+//     "start_date": "2025-05-18",
+//     "end_date": "2025-05-31",
+//     "year": 2025,
+//     "label": "2025-05-18 → 2025-05-31"
+//   },
+//   {
+//     "period_number": 9,
+//     "start_date": "2025-05-04",
+//     "end_date": "2025-05-17",
+//     "year": 2025,
+//     "label": "2025-05-04 → 2025-05-17"
+//   },
+//   {
+//     "period_number": 8,
+//     "start_date": "2025-04-20",
+//     "end_date": "2025-05-03",
+//     "year": 2025,
+//     "label": "2025-04-20 → 2025-05-03"
+//   },
+//   {
+//     "period_number": 7,
+//     "start_date": "2025-04-06",
+//     "end_date": "2025-04-19",
+//     "year": 2025,
+//     "label": "2025-04-06 → 2025-04-19"
+//   },
+//   {
+//     "period_number": 6,
+//     "start_date": "2025-03-23",
+//     "end_date": "2025-04-05",
+//     "year": 2025,
+//     "label": "2025-03-23 → 2025-04-05"
+//   }
+// ]
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index 0877b5f..2f7de55 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -4,17 +4,31 @@ import { timesheetApprovalService } from 'src/modules/timesheet-approval/service
 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"};
-
 export const useTimesheetStore = defineStore('timesheet', () => {
     const payPeriods = ref<PayPeriod[]>([]);
-    const currentPayPeriod = ref<PayPeriod>(default_current_pay_period);
+    const currentPayPeriod = ref<PayPeriod>();
+    const currentPayPeriodIndex = ref<number>(-1);
     const payPeriodEmployeeOverviews = ref<PayPeriodEmployeeOverview[]>([]);
     const isLoading = ref<boolean>(false);
 
-    const getCurrentPayPeriod = () => {
-        currentPayPeriod.value = timesheetApprovalService.getCurrentPayPeriod();
+    const getCurrentAndAllPayPeriods = async () => {
+        isLoading.value = true;
+        try {
+            const response = await timesheetApprovalService.getCurrentAndAllPayPeriod();
+            currentPayPeriod.value = response.current;
+            payPeriods.value = response.periods;
+            currentPayPeriodIndex.value = payPeriods.value.findIndex( pay_period => pay_period.pay_period_no === currentPayPeriod.value?.pay_period_no);
+        } catch( error ){
+            console.error('Could not get current pay period: ', error );
+        }
+        isLoading.value = false;
+    };
+
+    const getPreviousOrNextPayPeriod = (direction: number) => {
+        if ( currentPayPeriodIndex.value + direction >= 0 && currentPayPeriodIndex.value + direction < payPeriods.value.length ) {
+            currentPayPeriodIndex.value += direction;
+            currentPayPeriod.value = payPeriods.value.at(currentPayPeriodIndex.value);
+        }
     }
 
     const getTimesheetApprovalPayPeriodEmployeeOverviews = async (year: number, period_number: number, supervisor_email: string) => {
@@ -27,7 +41,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
             // TODO: trigger an alert window with an error message here!
         }
         isLoading.value = false;
-    }
+    };
 
-    return { payPeriods, currentPayPeriod, payPeriodEmployeeOverviews, isLoading, getCurrentPayPeriod, getTimesheetApprovalPayPeriodEmployeeOverviews};
+    return { payPeriods, currentPayPeriod, payPeriodEmployeeOverviews, isLoading, getCurrentAndAllPayPeriods, getTimesheetApprovalPayPeriodEmployeeOverviews, getPreviousOrNextPayPeriod};
 });

From 27e73f8f51d52f1886f1584cd382e590718489f9 Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Thu, 21 Aug 2025 10:44:23 -0400
Subject: [PATCH 3/4] refactor(approvals): change timesheet store to no longer
 rely on array of pay periods, now requests new pay period objects depending
 on date picker button pressed.

---
 ...esheet-approval-employee-overview-list.vue |  2 +-
 .../timesheet-approval-period-picker.vue      | 10 +--
 .../composables/use-timesheet-approval-api.ts | 35 +++++++++-
 .../services/services-timesheet-approval.ts   | 12 +++-
 src/stores/timesheet-store.ts                 | 66 +++++++++++++------
 5 files changed, 95 insertions(+), 30 deletions(-)

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 54846ae..8762910 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
@@ -39,7 +39,7 @@
     const filter = ref('');
 
     onMounted( async () => {
-        await timesheetApprovalApi.getCurrentAndAllPayPeriods();
+        await timesheetApprovalApi.getPayPeriodByDate(new Date());
         await timesheetApprovalApi.getTimesheetApprovalPayPeriodEmployeeOverviews(currentYear, currentPayPeriod, authStore.user.email);
         originalApprovals.value = Object.fromEntries( timesheetStore.payPeriodEmployeeOverviews.map(emp => [emp.email, emp.is_approved]));
     })
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 4c020bf..7ac0768 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
+    import { useTimesheetApprovalApi } from '../composables/use-timesheet-approval-api';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
 
-    const timesheetStore = useTimesheetStore();
+    const timesheet_approval_api = useTimesheetApprovalApi();
+    const timesheet_store = useTimesheetStore();
 </script>
 
 <template>
     <div class="column items-center">
-        <div class="text-primary text-h5">{{ timesheetStore.currentPayPeriod?.label || '' }}</div>
+        <div class="text-primary text-h5">{{ timesheet_store.currentPayPeriod?.label || '' }}</div>
         <q-btn-group push rounded>
-            <q-btn push icon="keyboard_arrow_left" color="primary"  class="q-px-xl" @click="timesheetStore.getPreviousOrNextPayPeriod(-1)"/>
+            <q-btn push icon="keyboard_arrow_left" color="primary"  class="q-px-xl" @click="timesheet_approval_api.getNextPayPeriodOverview(-1)"/>
             <q-btn push icon="date_range" color="primary" class="q-px-xl" />
-            <q-btn push icon="keyboard_arrow_right" color="primary" class="q-px-xl" @click="timesheetStore.getPreviousOrNextPayPeriod(1)"/>
+            <q-btn push icon="keyboard_arrow_right" color="primary" class="q-px-xl" @click="timesheet_approval_api.getNextPayPeriodOverview(1)"/>
         </q-btn-group>
     </div>
 </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 9e30562..3bf78cb 100644
--- a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
+++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
@@ -1,10 +1,38 @@
 import { useTimesheetStore } from "src/stores/timesheet-store";
+import { useAuthStore } from "src/stores/auth-store";
 
 export const useTimesheetApprovalApi = () => {
     const timesheet_store = useTimesheetStore();
+    const auth_store = useAuthStore();
 
-    const getCurrentAndAllPayPeriods = async () => {
-        await timesheet_store.getCurrentAndAllPayPeriods();
+    const getPayPeriodByDate = async (date: Date) => {
+        await timesheet_store.getPayPeriodByDate(date);
+    }
+
+    /* 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.
+        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;
+        let new_pay_period_no = current_pay_period.pay_period_no + direction;
+        let new_pay_year = current_pay_period.pay_year;
+
+        if (new_pay_period_no > 26) {
+           new_pay_period_no = 1;
+           new_pay_year += 1; 
+        }
+
+        if (new_pay_period_no < 1) {
+            new_pay_period_no = 26;
+            new_pay_year -= 1;
+        }
+
+        const success = await timesheet_store.getPayPeriodByYearAndPeriodNumber(new_pay_year, new_pay_period_no);
+        
+        if (success) {
+            await timesheet_store.getTimesheetApprovalPayPeriodEmployeeOverviews(new_pay_year, new_pay_period_no, auth_store.user.email);
+        }
     }
 
     const getTimesheetApprovalPayPeriodEmployeeOverviews = async (year: number, period_number: number, supervisor_email: string): Promise<void> => {
@@ -12,7 +40,8 @@ export const useTimesheetApprovalApi = () => {
     }
 
     return {
+        getPayPeriodByDate,
+        getNextPayPeriodOverview,
         getTimesheetApprovalPayPeriodEmployeeOverviews,
-        getCurrentAndAllPayPeriods,
     }
 };
\ 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 1db5a00..a7f4c2d 100644
--- a/src/modules/timesheet-approval/services/services-timesheet-approval.ts
+++ b/src/modules/timesheet-approval/services/services-timesheet-approval.ts
@@ -1,13 +1,19 @@
 import { api } from "src/boot/axios";
 import type { PayPeriodOverview } from "../types/timesheet-approval-pay-period-overview-interface";
-import type { PayPeriodBundle } from "src/modules/shared/types/pay-period-bundle-interface";
+import type { PayPeriod } from "src/modules/shared/types/pay-period-interface";
 
 export const timesheetApprovalService = {
-    getCurrentAndAllPayPeriod: async (): Promise<PayPeriodBundle> => {
-        const response = await api.get('pay-periods/bundle/current-and-all');
+    getPayPeriodByDate: async (date: Date): Promise<PayPeriod> => {
+        const response = await api.get(`pay-periods/date/${date.toISOString()}`);
         return response.data;
     },
 
+    getPayPeriodByYearAndPeriodNumber: async (year: number, period_number: number): Promise<PayPeriod> => {
+        const response = await api.get(`pay-periods/${year}/${period_number}`);
+        return response.data;
+    },
+
+
     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}`);
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index 2f7de55..8ce8e0c 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -4,44 +4,72 @@ import { timesheetApprovalService } from 'src/modules/timesheet-approval/service
 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_pay_period: PayPeriod = { 
+    pay_period_no: -1,
+    period_start: '',
+    period_end: '',
+    payday: '',
+    pay_year: -1,
+    label: ''
+ };
+
 export const useTimesheetStore = defineStore('timesheet', () => {
-    const payPeriods = ref<PayPeriod[]>([]);
-    const currentPayPeriod = ref<PayPeriod>();
-    const currentPayPeriodIndex = ref<number>(-1);
+    const currentPayPeriod = ref<PayPeriod>(default_pay_period);
     const payPeriodEmployeeOverviews = ref<PayPeriodEmployeeOverview[]>([]);
     const isLoading = ref<boolean>(false);
 
-    const getCurrentAndAllPayPeriods = async () => {
+    const getPayPeriodByDate = async (date: Date) => {
         isLoading.value = true;
+
         try {
-            const response = await timesheetApprovalService.getCurrentAndAllPayPeriod();
-            currentPayPeriod.value = response.current;
-            payPeriods.value = response.periods;
-            currentPayPeriodIndex.value = payPeriods.value.findIndex( pay_period => pay_period.pay_period_no === currentPayPeriod.value?.pay_period_no);
-        } catch( error ){
+            const response = await timesheetApprovalService.getPayPeriodByDate(date);
+            currentPayPeriod.value = response;
+        } catch(error){
             console.error('Could not get current pay period: ', error );
+            //TODO: More in-depth error-handling here
         }
+
         isLoading.value = false;
     };
 
-    const getPreviousOrNextPayPeriod = (direction: number) => {
-        if ( currentPayPeriodIndex.value + direction >= 0 && currentPayPeriodIndex.value + direction < payPeriods.value.length ) {
-            currentPayPeriodIndex.value += direction;
-            currentPayPeriod.value = payPeriods.value.at(currentPayPeriodIndex.value);
-        }
-    }
-
-    const getTimesheetApprovalPayPeriodEmployeeOverviews = async (year: number, period_number: number, supervisor_email: string) => {
+    const getPayPeriodByYearAndPeriodNumber = async (year: number, period_number: number): Promise<boolean> => {
         isLoading.value = true;
+
         try {
-            const response = await timesheetApprovalService.getPayPeriodEmployeeOverviews(year, period_number, supervisor_email);
+            const response = await timesheetApprovalService.getPayPeriodByYearAndPeriodNumber(year, period_number);
+            currentPayPeriod.value = response;
+            return true;
+        } catch(error){
+            console.error('Could not get current pay period: ', error );
+            //TODO: More in-depth error-handling here
+        }
+
+        isLoading.value = false;
+
+        return false;
+    };
+
+    const getTimesheetApprovalPayPeriodEmployeeOverviews = async (pay_year: number, period_number: number, supervisor_email: string) => {
+        isLoading.value = true;
+
+        try {
+            const response = await timesheetApprovalService.getPayPeriodEmployeeOverviews(pay_year, period_number, supervisor_email);
             payPeriodEmployeeOverviews.value = response.employees_overview;
         } catch (error) {
             console.error('There was an error retrieving Employee Pay Period overviews: ', error);
+            payPeriodEmployeeOverviews.value = [];
             // TODO: trigger an alert window with an error message here!
         }
+        
         isLoading.value = false;
     };
 
-    return { payPeriods, currentPayPeriod, payPeriodEmployeeOverviews, isLoading, getCurrentAndAllPayPeriods, getTimesheetApprovalPayPeriodEmployeeOverviews, getPreviousOrNextPayPeriod};
+    return { 
+        currentPayPeriod, 
+        payPeriodEmployeeOverviews, 
+        isLoading, 
+        getPayPeriodByDate,
+        getPayPeriodByYearAndPeriodNumber,
+        getTimesheetApprovalPayPeriodEmployeeOverviews, 
+    };
 });

From d0e64bdffc539a2859d15d7b7c4b986b16325d0e Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Thu, 21 Aug 2025 17:06:57 -0400
Subject: [PATCH 4/4] refactor(approvals): move functionalities for separation
 of concern, page formatting, i18n refactoring, consideration for mobile
 appearance.

---
 src/boot/i18n.ts                              | 13 ++---
 src/i18n/en-ca/index.ts                       | 19 +++----
 src/i18n/fr-ca/index.ts                       | 19 +++----
 src/i18n/index.ts                             |  4 +-
 .../pages/supervisor-crew-page.vue            |  4 +-
 .../shared/components/language-switch.vue     | 24 +++++++--
 .../navigation/header-bar-avatar.vue          | 10 ++--
 .../components/navigation/right-drawer.vue    | 12 ++---
 ...esheet-approval-employee-overview-list.vue |  9 ++--
 .../timesheet-approval-period-picker.vue      | 51 ++++++++++++++++---
 .../composables/use-timesheet-approval-api.ts | 16 +++---
 .../pages/timesheet-approval.vue              | 33 ++++++++++--
 src/stores/timesheet-store.ts                 | 11 +++-
 13 files changed, 153 insertions(+), 72 deletions(-)

diff --git a/src/boot/i18n.ts b/src/boot/i18n.ts
index 996594c..bdbcc67 100644
--- a/src/boot/i18n.ts
+++ b/src/boot/i18n.ts
@@ -4,26 +4,19 @@ import { createI18n } from 'vue-i18n';
 import messages from 'src/i18n';
 
 export type MessageLanguages = keyof typeof messages;
-// Type-define 'en-US' as the master schema for the resource
-export type MessageSchema = typeof messages['en'];
+export type MessageSchema = typeof messages['en-CA'];
 
-// See https://vue-i18n.intlify.dev/guide/advanced/typescript.html#global-resource-schema-type-definition
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 declare module 'vue-i18n' {
-  // define the locale messages schema
   export interface DefineLocaleMessage extends MessageSchema {}
-
-  // define the datetime format schema
   export interface DefineDateTimeFormat {}
-
-  // define the number format schema
   export interface DefineNumberFormat {}
 }
-/* eslint-enable @typescript-eslint/no-empty-object-type */
 
+/* eslint-enable @typescript-eslint/no-empty-object-type */
 export default defineBoot(({ app }) => {
   const i18n = createI18n<{ message: MessageSchema }, MessageLanguages>({
-    locale: 'fr',
+    locale: 'fr-FR',
     legacy: false,
     messages,
   });
diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index 5ac2cfd..94335df 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -24,7 +24,7 @@ export default {
   },
   navBar: {
     userMenuHome: 'Homepage',
-    userMenuEmployeeList: 'Employee list',
+    userMenuEmployeeList: 'Employee Directory',
     userMenuShiftValidation: 'Timesheet Approval',
     userMenuProfile: 'Profile',
     userMenuHelp: 'Help',
@@ -140,7 +140,7 @@ export default {
     card_4: 'Customers',
   },
   usersListPage: {
-    tableHeader: 'Employee list',
+    tableHeader: 'Employee Directory',
     searchInput: 'Search',
     userListFirstName: 'First name',
     userListLastName: 'Last name',
@@ -162,6 +162,7 @@ export default {
     loading: 'Obtaining data...',
     failedToLoad: 'No data to show',
     failedToSearch: 'No data matching search',
+    languageLabel: 'Language',
   },
   editUserPage: {
     title: 'Edit Account',
@@ -240,11 +241,12 @@ export default {
     passwordValidation: 'Password must meet all criteria.',
     confirmPasswordValidation: 'Password must match new Password.',
   },
-  pagesTitles: {
-    newUserPageTitle: 'New user',
-    updateUserPageTitle: 'Update user',
-    timeSheetPageTitle: 'Time sheet',
-    timeSheetValidationsIdPageTitle: 'Time sheet',
+  pageTitles: {
+    employeeDirectory: 'Employee Directory',
+    newUsers: 'New user',
+    updateUsers: 'Update user',
+    timeSheets: 'Time sheet',
+    timeSheetValidations: 'Time sheet',
   },
   timeSheet: {
     timeSheetTab_1: 'Shifts',
@@ -265,7 +267,7 @@ export default {
     sickDay: 'Sick working day',
     vacancyDay: 'vacation',
     holiday: 'Holiday',
-    dateRangesWeek: 'Week from',
+    dateRangesFrom: 'from',
     dateRangesTo: 'to',
     shiftBankedHours: 'Total hours to bank',
     bankedHoursHint_1: ' on',
@@ -294,7 +296,6 @@ export default {
     mileage: 'Mileage',
   },
   timeSheetValidations: {
-    tableHeader: 'List of employees',
     tableColumnLabelFullname: 'Full name',
     tableColumnLabelRegularHours: 'regular hours',
     tableColumnLabelEveningHours: 'evening',
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index e710a53..8c5005a 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -163,7 +163,7 @@ export default {
   },
   navBar: {
     userMenuHome: 'Accueil',
-    userMenuEmployeeList: 'Liste employés',
+    userMenuEmployeeList: 'Répertoire employés',
     userMenuShiftValidation: 'Valider les heures',
     userMenuProfile: 'Profil',
     userMenuHelp: 'Aide',
@@ -181,11 +181,12 @@ export default {
     deleteAll: 'Supprimer tout',
     close: 'Fermer',
   },
-  pagesTitles: {
-    newUserPageTitle: 'Nouvel utilisateur',
-    updateUserPageTitle: 'Mettre à jour l’utilisateur',
-    timeSheetPageTitle: 'Carte de temps',
-    timeSheetValidationsIdPageTitle: 'Carte de temps',
+  pageTitles: {
+    employeeDirectory: 'Répertoire des Employés',
+    newUsers: 'Nouvel utilisateur',
+    updateUsers: 'Mettre à jour l’utilisateur',
+    timeSheets: 'Carte de temps',
+    timeSheetValidations: 'Validation cartes de temps',
   },
   profilePage: {
     title: 'Profil',
@@ -231,6 +232,7 @@ export default {
     loading: 'Téléchargement des données en cours...',
     failedToLoad: 'Aucune donnée à afficher',
     failedToSearch: 'Aucun résultat de recherche obtenu',
+    languageLabel: 'Langue',
   },
   shiftColumns: {
     title: 'Quarts de travail',
@@ -315,7 +317,7 @@ export default {
     sickDay: 'Maladie',
     vacancyDay: 'Vacances',
     holiday: 'Férié',
-    dateRangesWeek: 'Semaine du',
+    dateRangesFrom: 'du',
     dateRangesTo: 'au',
     shiftBankedHours: 'Totale d’heures à banquer',
     bankedHoursHint_1: ' sur',
@@ -344,7 +346,6 @@ export default {
     mileage: 'Kilometrage',
   },
   timeSheetValidations: {
-    tableHeader: 'Liste des employés',
     tableColumnLabelFullname: 'nom complet',
     tableColumnLabelRegularHours: 'heures régulières',
     tableColumnLabelEveningHours: 'soir',
@@ -378,7 +379,7 @@ export default {
     unlockToolTip: 'Déverrouiller la semaine',
   },
   usersListPage: {
-    tableHeader: 'Liste d’employées',
+    tableHeader: 'Répertoire du personnel',
     searchInput: 'rechercher',
     userListFirstName: 'prénom',
     userListLastName: 'nom de famille',
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 86d6924..13153ce 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -2,6 +2,6 @@ import enCA from './en-ca';
 import frCA from './fr-ca';
 
 export default {
-  'en': enCA,
-  'fr': frCA,
+  'en-CA': enCA,
+  'fr-FR': frCA,
 };
diff --git a/src/modules/employee-list/pages/supervisor-crew-page.vue b/src/modules/employee-list/pages/supervisor-crew-page.vue
index 70471a2..9c349b9 100644
--- a/src/modules/employee-list/pages/supervisor-crew-page.vue
+++ b/src/modules/employee-list/pages/supervisor-crew-page.vue
@@ -6,8 +6,8 @@
 <template>
     <q-page>
         <EmployeeListAddModifyDialog />
-        <div class="text-h4 row justify-center q-py-sm q-mt-lg text-uppercase text-weight-bolder text-primary">
-            {{ $t('usersListPage.tableHeader') }}
+        <div class="text-h4 row justify-center q-py-sm q-mt-lg text-uppercase text-weight-bolder text-grey-8">
+            {{ $t('pageTitles.employeeDirectory') }}
         </div>
         <SupervisorCrewTable />
     </q-page>
diff --git a/src/modules/shared/components/language-switch.vue b/src/modules/shared/components/language-switch.vue
index 8113faf..d2b2051 100644
--- a/src/modules/shared/components/language-switch.vue
+++ b/src/modules/shared/components/language-switch.vue
@@ -2,19 +2,33 @@
     import { useI18n } from 'vue-i18n';
 
     const { locale } = useI18n();
-    const setLocale = (newLocale: string) => { locale.value = newLocale; };
     const localeOptions = [
-        { value: 'en', label: 'English' },
-        { value: 'fr', label: 'Francais' },
+        { value: 'en-CA', label: 'English' },
+        { value: 'fr-FR', label: 'Francais' },
     ];
 </script>
 
 <template>
-    <q-btn-dropdown flat :label=locale class="rounded-borders" icon="language">
+    <q-btn-dropdown flat :label="$t('shared.languageLabel')" class="rounded-borders" icon="language">
         <q-list>
-            <q-item clickable v-close-popup v-for="option in localeOptions" :key="option.value" @click="setLocale(option.value)">
+            <q-item clickable v-close-popup v-for="option in localeOptions" :key="option.value" @click="locale = option.value">
                 <q-item-section>{{ option.label }}</q-item-section>
             </q-item>
         </q-list>
     </q-btn-dropdown>
+
+    <!-- <q-select
+        v-model="locale"
+        :options="localeOptions"
+        dense
+        borderless
+        emit-value
+        map-options
+        hide-dropdown-icon
+        class="text-white"
+    >
+        <template v-slot:prepend>
+            <q-icon name="language" color="white"/>
+        </template>
+    </q-select> -->
 </template>
\ No newline at end of file
diff --git a/src/modules/shared/components/navigation/header-bar-avatar.vue b/src/modules/shared/components/navigation/header-bar-avatar.vue
index fea344d..420a6cb 100644
--- a/src/modules/shared/components/navigation/header-bar-avatar.vue
+++ b/src/modules/shared/components/navigation/header-bar-avatar.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
     import { useAuthStore } from 'src/stores/auth-store';
-import { useUiStore } from 'src/stores/ui-store';
-import { ref } from 'vue';
+    import { ref } from 'vue';
     
     const authStore = useAuthStore();
-    const uiStore = useUiStore();
     const currentUser = authStore.user;
 
     // Will need to implement this eventually, just testing the look for now
@@ -12,15 +10,15 @@ import { ref } from 'vue';
 </script>
 
 <template>
-    <q-item clickable v-ripple dark @click="uiStore.toggleRightDrawer">
-        <q-item-section side>
+    <q-item clickable v-ripple dark class="q-pa-none">
+        <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-avatar>
         </q-item-section>
 
-        <q-item-section>
+        <q-item-section v-if="$q.screen.gt.sm">
             <q-item-label>{{ currentUser.firstName }}  {{ currentUser.lastName }}</q-item-label>
             <q-item-label caption>{{ notifAmount }} new messages</q-item-label>
         </q-item-section>
diff --git a/src/modules/shared/components/navigation/right-drawer.vue b/src/modules/shared/components/navigation/right-drawer.vue
index e344713..e1352b1 100644
--- a/src/modules/shared/components/navigation/right-drawer.vue
+++ b/src/modules/shared/components/navigation/right-drawer.vue
@@ -36,7 +36,7 @@
                         <q-icon name="home" color="primary" />
                     </q-item-section>
                     <q-item-section>
-                        <q-item-label>{{ $t('navBar.userMenuHome') }}</q-item-label>
+                        <q-item-label class="text-uppercase text-grey-8 text-weight-bold">{{ $t('navBar.userMenuHome') }}</q-item-label>
                     </q-item-section>
                 </q-item>
 
@@ -47,7 +47,7 @@
                         <q-icon name="event_available" color="primary" />
                     </q-item-section>
                     <q-item-section>
-                        <q-item-label>{{ $t('navBar.userMenuShiftValidation') }}</q-item-label>
+                        <q-item-label class="text-uppercase text-grey-8 text-weight-bold">{{ $t('navBar.userMenuShiftValidation') }}</q-item-label>
                     </q-item-section>
                 </q-item>
 
@@ -58,7 +58,7 @@
                         <q-icon name="view_list" color="primary" />
                     </q-item-section>
                     <q-item-section>
-                        <q-item-label>{{ $t('navBar.userMenuEmployeeList') }}</q-item-label>
+                        <q-item-label class="text-uppercase text-grey-8 text-weight-bold">{{ $t('navBar.userMenuEmployeeList') }}</q-item-label>
                     </q-item-section>
                 </q-item>
 
@@ -68,7 +68,7 @@
                         <q-icon name="account_box" color="primary" />
                     </q-item-section>
                     <q-item-section>
-                        <q-item-label>{{ $t('navBar.userMenuProfile') }}</q-item-label>
+                        <q-item-label class="text-uppercase text-grey-8 text-weight-bold">{{ $t('navBar.userMenuProfile') }}</q-item-label>
                     </q-item-section>
                 </q-item>
 
@@ -78,7 +78,7 @@
                         <q-icon name="contact_support" color="primary" />
                     </q-item-section>
                     <q-item-section>
-                        <q-item-label>{{ $t('navBar.userMenuHelp') }}</q-item-label>
+                        <q-item-label class="text-uppercase text-grey-8 text-weight-bold">{{ $t('navBar.userMenuHelp') }}</q-item-label>
                     </q-item-section>
                 </q-item>
             </q-list>
@@ -89,7 +89,7 @@
                     <q-icon name="exit_to_app" color="primary" />
                 </q-item-section>
                 <q-item-section>
-                    <q-item-label>{{ $t('navBar.userMenuLogout') }}</q-item-label>
+                    <q-item-label class="text-uppercase text-grey-8 text-weight-bold">{{ $t('navBar.userMenuLogout') }}</q-item-label>
                 </q-item-section>
             </q-item>
         </q-scroll-area>
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 8762910..79f1b41 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
@@ -9,6 +9,7 @@
     import { getCurrentPayPeriod } from 'src/utils/pay-period-calculator';
     import { useAuthStore } from 'src/stores/auth-store';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import TimesheetApprovalPeriodPicker from '../components/timesheet-approval-period-picker.vue';
 
     const { t } = useI18n();
     
@@ -39,8 +40,7 @@
     const filter = ref('');
 
     onMounted( async () => {
-        await timesheetApprovalApi.getPayPeriodByDate(new Date());
-        await timesheetApprovalApi.getTimesheetApprovalPayPeriodEmployeeOverviews(currentYear, currentPayPeriod, authStore.user.email);
+        await timesheetApprovalApi.getPayPeriodOverviewByDate(new Date());
         originalApprovals.value = Object.fromEntries( timesheetStore.payPeriodEmployeeOverviews.map(emp => [emp.email, emp.is_approved]));
     })
 </script>
@@ -66,7 +66,10 @@
         >
             <!-- Top Bar that contains Search, Title, Filters -->
             <template v-slot:top>
-                <div class="full-width row">
+                <div :class="$q.screen.lt.md ? 'column justify-center items-center' : 'full-width row'">
+                    <!-- Date Picker -->
+                    <TimesheetApprovalPeriodPicker />
+                    
                     <q-space />
 
                     <!-- Filters toggle -->
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 7ac0768..be131d7 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,55 @@
 <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 { date } from 'quasar';
 
     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;
+    });
+    
 </script>
 
 <template>
-    <div class="column items-center">
-        <div class="text-primary text-h5">{{ timesheet_store.currentPayPeriod?.label || '' }}</div>
-        <q-btn-group push rounded>
-            <q-btn push icon="keyboard_arrow_left" color="primary"  class="q-px-xl" @click="timesheet_approval_api.getNextPayPeriodOverview(-1)"/>
-            <q-btn push icon="date_range" color="primary" class="q-px-xl" />
-            <q-btn push icon="keyboard_arrow_right" color="primary" class="q-px-xl" @click="timesheet_approval_api.getNextPayPeriodOverview(1)"/>
-        </q-btn-group>
+    <div class="row">
+        <q-btn 
+            push rounded 
+            icon="keyboard_arrow_left"  
+            color="primary" 
+            @click="timesheet_approval_api.getNextPayPeriodOverview(-1)" 
+            :disable="is_calendar_limit || timesheet_store.isLoading"
+            class="q-mr-sm q-px-sm"
+        />
+        <q-btn 
+            push rounded 
+            icon="date_range" 
+            color="primary" 
+            @click="is_showing_calendar_picker = true"
+            :disable="timesheet_store.isLoading"
+            class="q-px-lg"
+        />
+        <q-btn 
+            push rounded 
+            icon="keyboard_arrow_right" 
+            color="primary" 
+            @click="timesheet_approval_api.getNextPayPeriodOverview(1)"
+            :disable="timesheet_store.isLoading"
+            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-date 
+            v-model="calendar_date" 
+            color="primary" 
+            class="q-mt-xl" 
+            today-btn
+            :options="date => date > '2023/12/16'"
+        />
+    </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 3bf78cb..498d70f 100644
--- a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
+++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
@@ -5,8 +5,13 @@ export const useTimesheetApprovalApi = () => {
     const timesheet_store = useTimesheetStore();
     const auth_store = useAuthStore();
 
-    const getPayPeriodByDate = async (date: Date) => {
-        await timesheet_store.getPayPeriodByDate(date);
+    const getPayPeriodOverviewByDate = async (date: Date) => {
+        const success = await timesheet_store.getPayPeriodByDate(date);
+        
+        if (success) {
+            const current_pay_period = timesheet_store.currentPayPeriod;
+            await timesheet_store.getTimesheetApprovalPayPeriodEmployeeOverviews(current_pay_period.pay_year, current_pay_period.pay_period_no, auth_store.user.email);
+        }
     }
 
     /* This method attempts to get the next or previous pay period. 
@@ -35,13 +40,8 @@ export const useTimesheetApprovalApi = () => {
         }
     }
 
-    const getTimesheetApprovalPayPeriodEmployeeOverviews = async (year: number, period_number: number, supervisor_email: string): Promise<void> => {
-        await timesheet_store.getTimesheetApprovalPayPeriodEmployeeOverviews(year, period_number, supervisor_email);
-    }
-
     return {
-        getPayPeriodByDate,
+        getPayPeriodOverviewByDate,
         getNextPayPeriodOverview,
-        getTimesheetApprovalPayPeriodEmployeeOverviews,
     }
 };
\ 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 ed00b1d..d6b0447 100644
--- a/src/modules/timesheet-approval/pages/timesheet-approval.vue
+++ b/src/modules/timesheet-approval/pages/timesheet-approval.vue
@@ -1,12 +1,39 @@
 <script setup lang="ts">
-    // const testDates: string[] = ['25 Juin 2025', '12 Juillet 2025', '13 Juillet 2025', '26 Juillet 2025', '27 Juillet 2025', '9 Aout 2025']
-    import TimesheetApprovalPeriodPicker from '../components/timesheet-approval-period-picker.vue';
     import TimesheetApprovalEmployeeOverviewList from '../components/timesheet-approval-employee-overview-list.vue';
+    import { computed } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import { date } from 'quasar';
+
+    const { locale } = useI18n();
+    const timesheet_store = useTimesheetStore();
+    const date_options: Intl.DateTimeFormatOptions = {
+        day: 'numeric',
+        month: "long",
+        year: 'numeric',
+     };
+
+
+    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'));
+
+        return {
+            start_date: start_date, 
+            end_date: end_date,
+        };
+    });
 </script>
 
 <template>
     <q-page padding class="q-pa-md bg-secondary">
-        <TimesheetApprovalPeriodPicker />
+        <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>
         <TimesheetApprovalEmployeeOverviewList />
     </q-page>
 </template>
\ No newline at end of file
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index 8ce8e0c..6b202b1 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -18,18 +18,23 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     const payPeriodEmployeeOverviews = ref<PayPeriodEmployeeOverview[]>([]);
     const isLoading = ref<boolean>(false);
 
-    const getPayPeriodByDate = async (date: Date) => {
+    const getPayPeriodByDate = async (date: Date): Promise<boolean> => {
         isLoading.value = true;
 
         try {
             const response = await timesheetApprovalService.getPayPeriodByDate(date);
             currentPayPeriod.value = response;
+            isLoading.value = false;
+
+            return true;
         } catch(error){
             console.error('Could not get current pay period: ', error );
             //TODO: More in-depth error-handling here
         }
 
         isLoading.value = false;
+
+        return false;
     };
 
     const getPayPeriodByYearAndPeriodNumber = async (year: number, period_number: number): Promise<boolean> => {
@@ -38,6 +43,8 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         try {
             const response = await timesheetApprovalService.getPayPeriodByYearAndPeriodNumber(year, period_number);
             currentPayPeriod.value = response;
+            isLoading.value = false;
+
             return true;
         } catch(error){
             console.error('Could not get current pay period: ', error );
@@ -60,7 +67,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
             payPeriodEmployeeOverviews.value = [];
             // TODO: trigger an alert window with an error message here!
         }
-        
+
         isLoading.value = false;
     };