From 3bf8c57f74eb49b0097a73ec8a32a529f53a8915 Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Fri, 26 Sep 2025 11:06:07 -0400
Subject: [PATCH 1/4] refactor(approvals): massive refactor of names, DRY
 component scripts, separation of concern, trim unnecessary code

---
 src/css/app.scss                              |   2 +-
 src/i18n/en-ca/index.ts                       |   1 +
 src/i18n/fr-ca/index.ts                       |   1 +
 .../components/main-layout-footer-bar.vue}    |   0
 .../main-layout-header-bar-notification.vue}  |   0
 .../components/main-layout-header-bar.vue}    |   4 +-
 .../components/main-layout-left-drawer.vue}   |  12 +-
 src/layouts/main-layout.vue                   |   6 +-
 src/modules/shared/components/auto-logout.vue |   0
 .../components/dialogs/dialog-account.vue     |   0
 .../dialogs/dialog-notification.vue           |   0
 .../dialogs/dialog-template-shifts.vue        |   0
 .../components/page-header-template.vue       |  30 ++
 .../shared/components/q-table-filters.vue     |  43 +++
 .../utils/pay-period-calendar-picker.vue      |  67 ----
 .../shared/components/utils/table-filters.vue |  42 ---
 src/modules/shared/types/global-interfaces.ts |   0
 .../shared/types/pay-period-interface.ts      |  11 +-
 src/modules/shared/types/q-date-details.ts    |  15 -
 ...-chart.vue => detailed-chart-expenses.vue} |   2 +-
 ...rt.vue => detailed-chart-hours-worked.vue} |   2 +-
 ...art.vue => detailed-chart-shift-types.vue} |   4 +-
 ...der.vue => detailed-shift-list-header.vue} |   0
 ...ts-row.vue => detailed-shift-list-row.vue} |   2 +-
 ...ils-shifts.vue => detailed-shift-list.vue} |  33 +-
 .../components/overview-list-item.vue         | 123 ++++++++
 .../components/overview-list.vue              |  72 +++++
 .../components/overview-report.vue            |  80 +++++
 ...t-approval-employee-overview-list-item.vue | 160 ----------
 ...esheet-approval-employee-overview-list.vue | 267 ----------------
 .../composables/use-timesheet-approval-api.ts |  64 ++--
 .../pages/timesheet-approval-detailed.vue     | 151 +++++++++
 .../timesheet-approval-employee-details.vue   | 164 ----------
 .../pages/timesheet-approval.vue              |  51 ++--
 ...roval.ts => timesheet-approval-service.ts} |  10 +-
 .../timesheet-approval-test-constants.ts      | 287 ------------------
 .../types/detailed-shift-color.ts             |  43 +++
 ...face.ts => pay-period-employee-details.ts} |   2 +
 .../types/pay-period-employee-overview.ts     |  82 +++++
 ...ew-interface.ts => pay-period-overview.ts} |   4 +-
 .../types/pay-period-report-options.ts        |  25 ++
 ...port-interface.ts => pay-period-report.ts} |   0
 ...-pay-period-overview-employee-interface.ts |  25 --
 .../timesheets/services/timesheet-services.ts |   6 +-
 .../timesheets/types/timesheet-interface.ts   |  11 +-
 src/stores/timesheet-store.ts                 | 263 ++++++++--------
 src/utils/store-helpers.ts                    |  10 +
 47 files changed, 902 insertions(+), 1275 deletions(-)
 rename src/{modules/shared/components/navigation/footer-bar.vue => layouts/components/main-layout-footer-bar.vue} (100%)
 rename src/{modules/shared/components/navigation/header-bar-avatar.vue => layouts/components/main-layout-header-bar-notification.vue} (100%)
 rename src/{modules/shared/components/navigation/header-bar.vue => layouts/components/main-layout-header-bar.vue} (81%)
 rename src/{modules/shared/components/navigation/right-drawer.vue => layouts/components/main-layout-left-drawer.vue} (93%)
 delete mode 100644 src/modules/shared/components/auto-logout.vue
 delete mode 100644 src/modules/shared/components/dialogs/dialog-account.vue
 delete mode 100644 src/modules/shared/components/dialogs/dialog-notification.vue
 delete mode 100644 src/modules/shared/components/dialogs/dialog-template-shifts.vue
 create mode 100644 src/modules/shared/components/page-header-template.vue
 create mode 100644 src/modules/shared/components/q-table-filters.vue
 delete mode 100644 src/modules/shared/components/utils/pay-period-calendar-picker.vue
 delete mode 100644 src/modules/shared/components/utils/table-filters.vue
 delete mode 100644 src/modules/shared/types/global-interfaces.ts
 delete mode 100644 src/modules/shared/types/q-date-details.ts
 rename src/modules/timesheet-approval/components/{graphs/timesheet-approval-employee-expenses-chart.vue => detailed-chart-expenses.vue} (95%)
 rename src/modules/timesheet-approval/components/{graphs/timesheet-approval-employee-details-hours-worked-chart.vue => detailed-chart-hours-worked.vue} (95%)
 rename src/modules/timesheet-approval/components/{graphs/timesheet-approval-employee-details-shift-types-chart.vue => detailed-chart-shift-types.vue} (89%)
 rename src/modules/timesheet-approval/components/{timesheet-approval-employee-details-shifts-row-header.vue => detailed-shift-list-header.vue} (100%)
 rename src/modules/timesheet-approval/components/{timesheet-approval-employee-details-shifts-row.vue => detailed-shift-list-row.vue} (96%)
 rename src/modules/timesheet-approval/components/{timesheet-approval-employee-details-shifts.vue => detailed-shift-list.vue} (65%)
 create mode 100644 src/modules/timesheet-approval/components/overview-list-item.vue
 create mode 100644 src/modules/timesheet-approval/components/overview-list.vue
 create mode 100644 src/modules/timesheet-approval/components/overview-report.vue
 delete mode 100644 src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue
 delete mode 100644 src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue
 create mode 100644 src/modules/timesheet-approval/pages/timesheet-approval-detailed.vue
 delete mode 100644 src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue
 rename src/modules/timesheet-approval/services/{services-timesheet-approval.ts => timesheet-approval-service.ts} (64%)
 delete mode 100644 src/modules/timesheet-approval/timesheet-approval-test-constants.ts
 create mode 100644 src/modules/timesheet-approval/types/detailed-shift-color.ts
 rename src/modules/timesheet-approval/types/{timesheet-approval-pay-period-employee-details-interface.ts => pay-period-employee-details.ts} (84%)
 create mode 100644 src/modules/timesheet-approval/types/pay-period-employee-overview.ts
 rename src/modules/timesheet-approval/types/{timesheet-approval-pay-period-overview-interface.ts => pay-period-overview.ts} (50%)
 create mode 100644 src/modules/timesheet-approval/types/pay-period-report-options.ts
 rename src/modules/timesheet-approval/types/{timesheet-approval-pay-period-report-interface.ts => pay-period-report.ts} (100%)
 delete mode 100644 src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface.ts
 create mode 100644 src/utils/store-helpers.ts

diff --git a/src/css/app.scss b/src/css/app.scss
index e3d7a16..adfa295 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -31,5 +31,5 @@ body.body--dark {
 
 .body--light {
   --q-dark: #FFF;
-  color: $grey-8;
+  color: $blue-grey-8;
 }
\ No newline at end of file
diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index 2697fe5..c70a632 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -74,6 +74,7 @@ export default {
     },
     label: {
       search: "search",
+      filter: "filters",
       loading: "loading...",
       language: "Language",
       add: "ajouter",
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 4a5a9ba..f07d515 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -74,6 +74,7 @@ export default {
     },
     label: {
       search: 'recherche',
+      filter: "filtres",
       loading: 'chargement en cours...',
       language: 'langue',
       add: "ajouter",
diff --git a/src/modules/shared/components/navigation/footer-bar.vue b/src/layouts/components/main-layout-footer-bar.vue
similarity index 100%
rename from src/modules/shared/components/navigation/footer-bar.vue
rename to src/layouts/components/main-layout-footer-bar.vue
diff --git a/src/modules/shared/components/navigation/header-bar-avatar.vue b/src/layouts/components/main-layout-header-bar-notification.vue
similarity index 100%
rename from src/modules/shared/components/navigation/header-bar-avatar.vue
rename to src/layouts/components/main-layout-header-bar-notification.vue
diff --git a/src/modules/shared/components/navigation/header-bar.vue b/src/layouts/components/main-layout-header-bar.vue
similarity index 81%
rename from src/modules/shared/components/navigation/header-bar.vue
rename to src/layouts/components/main-layout-header-bar.vue
index 253fd61..8120ef7 100644
--- a/src/modules/shared/components/navigation/header-bar.vue
+++ b/src/layouts/components/main-layout-header-bar.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
   import { useUiStore } from 'src/stores/ui-store';
-  import HeaderBarAvatar from './header-bar-avatar.vue';
+  import HeaderBarNotification from './main-layout-header-bar-notification.vue';
 
   const uiStore = useUiStore();
 </script>
@@ -14,7 +14,7 @@
         </q-btn>
       </q-toolbar-title>
       <q-item class="q-pa-none">
-        <HeaderBarAvatar />
+        <HeaderBarNotification />
       </q-item>
     </q-toolbar>
   </q-header>
diff --git a/src/modules/shared/components/navigation/right-drawer.vue b/src/layouts/components/main-layout-left-drawer.vue
similarity index 93%
rename from src/modules/shared/components/navigation/right-drawer.vue
rename to src/layouts/components/main-layout-left-drawer.vue
index 12e9e2c..c34b1eb 100644
--- a/src/modules/shared/components/navigation/right-drawer.vue
+++ b/src/layouts/components/main-layout-left-drawer.vue
@@ -26,8 +26,16 @@
 </script>
 
 <template>
-    <q-drawer overlay elevated side="left" :mini="miniState" @mouseenter="miniState = false"
-        @mouseleave="miniState = true" v-model="uiStore.isRightDrawerOpen">
+    <q-drawer 
+    v-model="uiStore.isRightDrawerOpen"
+    overlay 
+    elevated 
+    side="left" 
+    :mini="miniState" 
+    @mouseenter="miniState = false"
+    @mouseleave="miniState = true"
+    class="bg-dark"
+    >
         <q-scroll-area class="fit">
             <q-list>
                 <!-- Home  -->
diff --git a/src/layouts/main-layout.vue b/src/layouts/main-layout.vue
index 4ea70aa..3ea5017 100644
--- a/src/layouts/main-layout.vue
+++ b/src/layouts/main-layout.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
   import { RouterView } from 'vue-router';
-  import HeaderBar from 'src/modules/shared/components/navigation/header-bar.vue';
-  import FooterBar from 'src/modules/shared/components/navigation/footer-bar.vue';
-  import RightDrawer from 'src/modules/shared/components/navigation/right-drawer.vue';
+  import HeaderBar from 'src/modules/layouts/components/main-layout-header-bar.vue';
+  import FooterBar from 'src/modules/layouts/components/main-layout-footer-bar.vue';
+  import RightDrawer from 'src/modules/layouts/components/main-layout-right-drawer.vue';
 </script>
 
 <template>
diff --git a/src/modules/shared/components/auto-logout.vue b/src/modules/shared/components/auto-logout.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/modules/shared/components/dialogs/dialog-account.vue b/src/modules/shared/components/dialogs/dialog-account.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/modules/shared/components/dialogs/dialog-notification.vue b/src/modules/shared/components/dialogs/dialog-notification.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/modules/shared/components/dialogs/dialog-template-shifts.vue b/src/modules/shared/components/dialogs/dialog-template-shifts.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/modules/shared/components/page-header-template.vue b/src/modules/shared/components/page-header-template.vue
new file mode 100644
index 0000000..8fac843
--- /dev/null
+++ b/src/modules/shared/components/page-header-template.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+    const { title, startDate = "", endDate = ""  } = defineProps<{
+        title: string;
+        startDate: string;
+        endDate: string;
+    }>();
+
+    const date_format_options = { day: 'numeric', month: 'long', year: 'numeric', };
+</script>
+
+<template>
+     <div class="column q-mt-lg text-uppercase text-center text-weight-bolder text-h4">
+            <span class="col">{{ $t(title) }}</span>
+
+            <div
+                v-if="startDate.length > 0"
+                class="col row flex-center full-width q-py-none q-my-none"
+            >
+                <div class="text-primary text-weight-bold text-h6">
+                    {{ $d(new Date(startDate), date_format_options) }}
+                </div>
+                <div class="text-body2 q-mx-md text-weight-medium">
+                    {{ $t('shared.misc.to') }}
+                </div>
+                <div class="text-primary text-weight-bold text-h6">
+                    {{ $d(new Date(endDate), date_format_options) }}
+                </div>
+            </div>
+        </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/shared/components/q-table-filters.vue b/src/modules/shared/components/q-table-filters.vue
new file mode 100644
index 0000000..5ceb9d9
--- /dev/null
+++ b/src/modules/shared/components/q-table-filters.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+    const search_model = defineModel<string | number | null>({ default: null, required: true });
+</script>
+
+<template>
+    <!-- Filters toggle -->
+    <q-btn-dropdown 
+        push
+        class="q-mr-md bg-white text-primary left-rounded" 
+        :label="$t('shared.label.filter')" 
+        icon="filter_alt" 
+    />
+
+    <!-- Search bar -->
+        <q-input
+            v-model="search_model" 
+            outlined 
+            dense
+            debounce="300"
+            class="right-rounded"
+            :label="$t('shared.label.search')" 
+            label-color="primary" 
+            bg-color="white" 
+            color="primary"
+    >
+        <template #before>
+            <q-icon 
+                name="search" 
+                color="primary"
+            />
+        </template>
+    </q-input>
+</template>
+
+<style scoped>
+    .left-rounded {
+        border-radius: 50% 0 0 50%;
+    }
+
+    .right-rounded {
+        border-radius: 0 50% 50% 0;
+    }
+</style>
\ No newline at end of file
diff --git a/src/modules/shared/components/utils/pay-period-calendar-picker.vue b/src/modules/shared/components/utils/pay-period-calendar-picker.vue
deleted file mode 100644
index 6040adf..0000000
--- a/src/modules/shared/components/utils/pay-period-calendar-picker.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script setup lang="ts">
-    /* eslint-disable */
-    import { ref } from 'vue';
-    import { date } from 'quasar';
-    import type { QDateDetails } from 'src/modules/shared/types/q-date-details';
-
-    const is_showing_calendar_picker = ref(false);
-    const calendar_date = ref(date.formatDate( Date.now(), 'YYYY-MM-DD' ));
-
-    const props = defineProps<{
-        isDisabled: boolean,
-        isPreviousLimit: boolean,
-    }>();
-
-    const emit = defineEmits<{
-        'date-selected': [value: string, reason?: string, details?: QDateDetails]
-        'pressed-previous-button': []
-        'pressed-next-button': []
-    }>();
-    
-    const onDateSelected = (value: string, reason: string, details: QDateDetails) => {
-        calendar_date.value = value;
-        is_showing_calendar_picker.value = false;   
-        emit('date-selected', value, reason, details);
-    }
-</script>
-
-<template>
-    <div class="row justify-center">
-        <q-btn 
-            push rounded 
-            icon="keyboard_arrow_left"  
-            color="primary" 
-            @click="emit('pressed-previous-button')" 
-            :disable="props.isPreviousLimit || props.isDisabled"
-            class="q-mr-sm q-px-sm"
-        />
-        <q-btn 
-            push rounded 
-            icon="date_range" 
-            color="primary" 
-            @click="is_showing_calendar_picker = true"
-            :disable="props.isDisabled"
-            class="q-px-lg"
-        />
-        <q-btn 
-            push rounded 
-            icon="keyboard_arrow_right" 
-            color="primary" 
-            @click="emit('pressed-next-button')"
-            :disable="props.isDisabled"
-            class="q-ml-sm q-px-sm"
-        />
-    </div>
-
-    <q-dialog v-model="is_showing_calendar_picker" transition-show="jump-down" transition-hide="jump-up" position="top">
-        <q-date 
-            v-model="calendar_date" 
-            color="primary" 
-            class="q-mt-xl" 
-            today-btn
-            mask="YYYY-MM-DD"
-            :options="date => date > '2023/12/16'"
-            @update:model-value="onDateSelected"
-        />
-    </q-dialog>
-</template>
\ No newline at end of file
diff --git a/src/modules/shared/components/utils/table-filters.vue b/src/modules/shared/components/utils/table-filters.vue
deleted file mode 100644
index acdc527..0000000
--- a/src/modules/shared/components/utils/table-filters.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-
-const props = defineProps<{
-    searchModel: string | number | null
-}>();
-const emit = defineEmits<{
-    onSearchValueUpdated: [value: string | number | null]
-}>();
-
-</script>
-
-<template>
-    <!-- Filters toggle -->
-    <q-btn-dropdown 
-        rounded 
-        push
-        class="q-mr-md bg-white text-primary" 
-        label="filters" 
-        icon="filter_alt" 
-    />
-
-    <!-- Search bar -->
-        <q-input 
-        outlined 
-        dense 
-        rounded
-        debounce="300"
-        :label="$t('shared.label.search')" 
-        label-color="primary" 
-        bg-color="white" 
-        color="primary"
-        :model-value="props.searchModel"
-        @update:model-value="value => emit('onSearchValueUpdated', value)" 
-    >
-        <template v-slot:append>
-            <q-icon 
-                name="search" 
-                color="primary"
-            />
-        </template>
-    </q-input>
-</template>
\ No newline at end of file
diff --git a/src/modules/shared/types/global-interfaces.ts b/src/modules/shared/types/global-interfaces.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/modules/shared/types/pay-period-interface.ts b/src/modules/shared/types/pay-period-interface.ts
index 3c845b2..c4d0c78 100644
--- a/src/modules/shared/types/pay-period-interface.ts
+++ b/src/modules/shared/types/pay-period-interface.ts
@@ -5,4 +5,13 @@ export interface PayPeriod {
     payday: string;
     pay_year: number;
     label: string;
-}
\ No newline at end of file
+}
+
+export const default_pay_period: PayPeriod = { 
+    pay_period_no: -1,
+    period_start: '',
+    period_end: '',
+    payday: '',
+    pay_year: -1,
+    label: ''
+ };
\ No newline at end of file
diff --git a/src/modules/shared/types/q-date-details.ts b/src/modules/shared/types/q-date-details.ts
deleted file mode 100644
index 980ca72..0000000
--- a/src/modules/shared/types/q-date-details.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export interface QDateDetails {
-  year: number;
-  month: number;
-  day: number;
-  from?: {
-    year: number;
-    month: number;
-    day: number;
-  };
-  to?: {
-    year: number;
-    month: number;
-    day: number;
-  };
-}
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue b/src/modules/timesheet-approval/components/detailed-chart-expenses.vue
similarity index 95%
rename from src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue
rename to src/modules/timesheet-approval/components/detailed-chart-expenses.vue
index 4090ea9..f220b5c 100644
--- a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue
+++ b/src/modules/timesheet-approval/components/detailed-chart-expenses.vue
@@ -4,7 +4,7 @@
     import { useI18n } from 'vue-i18n';
     import { useQuasar } from 'quasar';
     import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale, type ChartData, type ChartDataset } from 'chart.js';
-    import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
+    import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/pay-period-employee-details';
     import type { Expense } from 'src/modules/timesheets/types/timesheet-details-interface';
 
     const { t } = useI18n();
diff --git a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue b/src/modules/timesheet-approval/components/detailed-chart-hours-worked.vue
similarity index 95%
rename from src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue
rename to src/modules/timesheet-approval/components/detailed-chart-hours-worked.vue
index 1fe6976..9d6c66a 100644
--- a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue
+++ b/src/modules/timesheet-approval/components/detailed-chart-hours-worked.vue
@@ -5,7 +5,7 @@
     import { useI18n } from 'vue-i18n';
     import { useQuasar } from 'quasar';
     import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, type ChartData, type ChartOptions, type Plugin, type ChartDataset } from 'chart.js';
-    import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
+    import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/pay-period-employee-details';
     
     const { t } = useI18n();
     const $q = useQuasar();
diff --git a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue b/src/modules/timesheet-approval/components/detailed-chart-shift-types.vue
similarity index 89%
rename from src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue
rename to src/modules/timesheet-approval/components/detailed-chart-shift-types.vue
index 7822a4e..45060a8 100644
--- a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue
+++ b/src/modules/timesheet-approval/components/detailed-chart-shift-types.vue
@@ -6,7 +6,7 @@
     import { useQuasar } from 'quasar';
     import { Doughnut } from 'vue-chartjs';
     import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale, type ChartDataset } from 'chart.js';
-    import type { PayPeriodOverviewEmployee } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface';
+    import type { PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';
     
     const { t } = useI18n();
     const $q = useQuasar();
@@ -17,7 +17,7 @@
     ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
 
     const props = defineProps<{
-        rawData: PayPeriodOverviewEmployee | undefined;
+        rawData: PayPeriodEmployeeOverview | undefined;
     }>();
 
     const shift_type_labels = ref<string[]>([]);
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue b/src/modules/timesheet-approval/components/detailed-shift-list-header.vue
similarity index 100%
rename from src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue
rename to src/modules/timesheet-approval/components/detailed-shift-list-header.vue
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue b/src/modules/timesheet-approval/components/detailed-shift-list-row.vue
similarity index 96%
rename from src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
rename to src/modules/timesheet-approval/components/detailed-shift-list-row.vue
index 2eca764..2d78058 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
+++ b/src/modules/timesheet-approval/components/detailed-shift-list-row.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
     import type { Shift } from 'src/modules/timesheets/types/timesheet-shift-interface';
-import { ref } from 'vue';
+    import { ref } from 'vue';
 
     const props = defineProps<{
         shift: Shift;
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue b/src/modules/timesheet-approval/components/detailed-shift-list.vue
similarity index 65%
rename from src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue
rename to src/modules/timesheet-approval/components/detailed-shift-list.vue
index 14c2d6c..b517698 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue
+++ b/src/modules/timesheet-approval/components/detailed-shift-list.vue
@@ -1,27 +1,29 @@
 <script setup lang="ts">
-    import TimesheetApprovalEmployeeDetailsShiftsRow from 'src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue';
-    import TimesheetApprovalEmployeeDetailsShiftsRowHeader from 'src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue';
+    import DetailedShiftListRow from 'src/modules/timesheet-approval/components/detailed-shift-list-row.vue';
+    import DetailedShiftListHeader from 'src/modules/timesheet-approval/components/detailed-shift-list-header.vue';
     import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
     import { default_shift, type Shift } from 'src/modules/timesheets/types/timesheet-shift-interface';
-    import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
+    import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/pay-period-employee-details';
 
-    const props = defineProps<{
+    const { rawData, currentPayPeriod } = defineProps<{
         rawData: PayPeriodEmployeeDetails;
         currentPayPeriod: PayPeriod;
-    }>();                         
+    }>();
+    
+    const weeks = [ rawData.week1, rawData.week2 ];
 
     const shifts_or_placeholder = (shifts: Shift[]): Shift[] => {
         return shifts.length > 0 ? shifts : [default_shift];
     };
     
     const getDate = (shift_date: string): Date => {
-        return new Date(props.currentPayPeriod.pay_year.toString() + '/' + shift_date);
+        return new Date(currentPayPeriod.pay_year.toString() + '/' + shift_date);
     };
 </script>
 
 <template>
     <div 
-        v-for="week, index in props.rawData"
+        v-for="week, index in weeks"
         :key="index"
         class="q-px-xs q-pt-xs rounded-5 col"
     >
@@ -40,20 +42,27 @@
                     <q-item-label 
                         style="font-size: 0.7em;"
                         class="text-uppercase"
-                    >{{ $d(getDate(day.short_date), {weekday: $q.screen.lt.md ? 'short' : 'long'}) }}</q-item-label>
+                    >
+                        {{ $d(getDate(day.short_date), {weekday: $q.screen.lt.md ? 'short' : 'long'}) }}
+                    </q-item-label>
                     <q-item-label 
                         class="text-weight-bolder"
                         style="font-size: 2.5em; line-height: 90% !important;"
-                    >{{ day.short_date.split('/')[1] }}</q-item-label>
+                    >
+                        {{ day.short_date.split('/')[1] }}
+                    </q-item-label>
                     <q-item-label 
                         style="font-size: 0.7em;"
                         class="text-uppercase"
-                    >{{ $d(getDate(day.short_date), {month: $q.screen.lt.md ? 'short' : 'long'}) }}</q-item-label>
+                    >
+                        {{ $d(getDate(day.short_date), {month: $q.screen.lt.md ? 'short' : 'long'}) }}
+                    </q-item-label>
                 </div>
             </q-card-section>
+
             <q-card-section class="col q-pa-none">
-                <TimesheetApprovalEmployeeDetailsShiftsRowHeader />
-                <TimesheetApprovalEmployeeDetailsShiftsRow
+                <DetailedShiftListHeader />
+                <DetailedShiftListRow
                     v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
                     :key="shift_index" 
                     :shift="shift"
diff --git a/src/modules/timesheet-approval/components/overview-list-item.vue b/src/modules/timesheet-approval/components/overview-list-item.vue
new file mode 100644
index 0000000..2702c30
--- /dev/null
+++ b/src/modules/timesheet-approval/components/overview-list-item.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+    import type { PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';
+
+    const modelApproval = defineModel<boolean>();
+    const { row } = defineProps<{ row: PayPeriodEmployeeOverview; }>();
+    const emit = defineEmits<{ clickDetails: []; }>();
+
+    const stack_label_class = "text-weight-bold text-primary text-uppercase text-caption q-pa-none q-my-none ellipsis";
+</script>
+
+<template>
+    <div class="q-px-sm q-pb-sm q-mt-sm col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 grid-style-transition">
+        <q-card class="rounded-10">
+            
+            <!-- Card header with employee name and details button-->
+            <q-card-section horizontal class="q-py-none q-px-sm q-ma-none justify-between items-center">
+                <span class="col text-primary text-h5 text-weight-bolder q-pt-xs"> {{ row.employee_name }} </span>
+
+                <!-- Buttons to view detailed shifts or view employee timesheet -->
+                <q-btn
+                flat
+                dense
+                square
+                unelevated
+                class="col-auto q-pa-none q-ma-none"
+                color="primary"
+                icon="work_history"
+                @click="emit('clickDetails')"
+                >
+                    <q-tooltip 
+                    anchor="top middle"
+                    self="center middle" 
+                    class="bg-primary text-uppercase text-weight-bold"
+                    >
+                        {{ $t('timesheet_approvals.tooltip.button_detailed_view') }}
+                    </q-tooltip>
+                </q-btn>
+            </q-card-section>
+
+            <q-separator size="2px" />
+            
+            <!-- Main body of pay period card -->
+            <q-card-section class="q-py-none q-px-sm q-mt-sm q-mb-md">
+                <div class="row no-wrap">
+
+                    <!-- left portion of pay period card -->
+                    <div class="col column no-wrap q-px-sm">
+                        
+                        <!-- Regular hours segment -->
+                        <div class="column" :class="$q.screen.lt.md ? 'col' : 'col-8'">
+                            <span :class="stack_label_class"> {{ $t('shared.shift_type.regular') }} </span>
+                            <span class="text-weight-bolder text-h3 q-py-none"> {{ row.regular_hours }} </span>
+                        </div>
+
+                        <q-separator class="q-mx-sm" />
+
+                        <!-- Other hour types segment -->
+                        <div class="row q-px-xs">
+                            <div class="col column no-wrap">
+                                <span :class="stack_label_class" style="font-size: 0.65em;"> {{ $t('shared.shift_type.evening') }} </span>
+                                <span class="text-weight-bolder text-h6 q-pa-none" style="line-height: 0.9em;"> {{ row.evening_hours }} </span>
+                            </div>
+
+                             <div class="col column no-wrap">
+                                <span :class="stack_label_class" style="font-size: 0.65em;"> {{ $t('shared.shift_type.emergency') }} </span>
+                                <span class="text-weight-bolder text-h6 q-pa-none" style="line-height: 0.9em;"> {{ row.emergency_hours }} </span>
+                            </div>
+
+                             <div class="col column no-wrap">
+                                <span :class="stack_label_class" style="font-size: 0.65em;"> {{ $t('shared.shift_type.overtime') }} </span>
+                                <span class="text-weight-bolder text-h6 q-pa-none" style="line-height: 0.9em;"> {{ row.overtime_hours }} </span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <q-separator
+                    vertical 
+                    class="q-mt-xs q-mb-none"
+                    />
+                    
+                    <!-- Right portion of pay period card -->
+                    <div class="col-auto column q-px-sm">
+                        <div class="col column no-wrap">
+                            <span :class="stack_label_class" style="font-size: 0.8em;"> {{ $t('timesheet.expense.types.EXPENSES') }} </span>
+                            <span class="text-weight-bolder text-h6 q-pa-none" style="line-height: 0.9em;"> {{ row.expenses }} </span>
+                        </div>
+
+                        <div class="col column no-wrap">
+                            <span :class="stack_label_class" style="font-size: 0.8em;"> {{ $t('timesheet.expense.types.MILEAGE') }} </span>
+                            <span class="text-weight-bolder text-h6 q-pa-none" style="line-height: 0.9em;"> {{ row.mileage }} </span>
+                        </div>
+                    </div>
+                </div>
+            </q-card-section>
+
+            <q-separator color="primary" size="2px" />
+            
+            <!-- Validate Pay Period section -->
+            <q-card-section 
+            horizontal 
+            class="justify-between items-center text-weight-bold q-px-sm"
+            :class="row.is_approved ? 'text-white bg-primary' : 'bg-dark'"
+            >
+                <div class="col-auto">
+                    <span class="text-uppercase text-h6 q-ml-sm text-weight-bolder"> {{ row.total_hours }} </span>
+                    <span class="text-uppercase text-weight-bold text-caption q-ml-xs"> total </span>
+                </div>
+
+                <q-checkbox 
+                v-model="modelApproval"
+                dense 
+                left-label
+                size="lg" 
+                checked-icon="lock" 
+                unchecked-icon="lock_open" 
+                :color="row.is_approved ? 'white' : 'primary'"
+                :label="row.is_approved ? $t('timesheet_approvals.table.verified') : $t('timesheet_approvals.table.unverified')" 
+                class="col-auto text-uppercase"
+                />
+            </q-card-section>
+        </q-card>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/overview-list.vue b/src/modules/timesheet-approval/components/overview-list.vue
new file mode 100644
index 0000000..2cc04c9
--- /dev/null
+++ b/src/modules/timesheet-approval/components/overview-list.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+    import { ref } from 'vue';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import OverviewListItem from 'src/modules/timesheet-approval/components/employee-overview/overview-list-item.vue';
+    import QTableFilters from 'src/modules/shared/components/utils/q-table-filters.vue';
+    import { pay_period_employee_overview_columns, type PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';
+
+    const timesheet_store = useTimesheetStore();
+
+    // const FORWARD = 1
+    // const BACKWARD = -1
+    const filter = ref<string | number | null>('');
+
+    const onClickedDetails = async ( employee_email: string ) => {
+        await timesheet_store.getPayPeriodEmployeeDetailsByEmployeeEmail(employee_email);
+    };
+</script>
+
+<template>
+    <div class="q-pa-md">
+        <q-table 
+        :rows="timesheet_store.pay_period_employee_overview_list" 
+        :columns="pay_period_employee_overview_columns"
+        row-key="email" 
+        :filter="filter" 
+        grid 
+        dense
+        hide-pagination
+        color="primary"
+        :rows-per-page-options="[0]" 
+        card-container-class="justify-center"
+        :loading="timesheet_store.is_loading"
+        :no-data-label="$t('shared.error.no_data_found')"
+        :no-results-label="$t('shared.error.no_search_results')"
+        :loading-label="$t('shared.label.loading')"
+        >
+            <template #top>
+                <div class="full-width" :class="$q.screen.lt.md ? 'text-center q-gutter-sm' : 'row'">
+                    <!-- Calendar Picker goes here -->
+
+                    <q-space />
+
+                    <!-- Grid-or-List toggle goes here -->
+
+                    <QTableFilters v-model="filter"/>            
+                </div>
+            </template>
+
+            <!-- Template for individual employee cards -->
+            <template #item="props: { row: PayPeriodEmployeeOverview, key: string }">
+                <OverviewListItem
+                    v-model="props.row.is_approved" 
+                    :row="props.row"
+                    @click-details="onClickedDetails(props.row.email)"
+                />
+            </template>
+
+            <!-- Template for custome failed-to-load state -->
+            <template #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/timesheet-approval/components/overview-report.vue b/src/modules/timesheet-approval/components/overview-report.vue
new file mode 100644
index 0000000..cd353ac
--- /dev/null
+++ b/src/modules/timesheet-approval/components/overview-report.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+    import { ref, computed } from 'vue';
+    import { default_pay_period_report_filters, type PayPeriodReportFilters } from 'src/modules/timesheet-approval/types/pay-period-report-options';
+    
+    const report_filter_options = ref<PayPeriodReportFilters>(default_pay_period_report_filters);
+    
+    const company_options = [
+        { label: 'Targo', value: report_filter_options.value.companies.targo },
+        { label: 'Solucom', value: report_filter_options.value.companies.solucom },
+    ];
+
+    const type_options = [
+        { label: 'timesheet_approvals.print_report.shifts', value: report_filter_options.value.types.shifts },
+        { label: 'timesheet_approvals.print_report.expenses', value: report_filter_options.value.types.expenses },
+        { label: 'shared.shift_type.holiday', value: report_filter_options.value.types.holiday },
+        { label: 'shared.shift_type.vacation', value: report_filter_options.value.types.vacation },
+    ];
+
+    const is_download_button_disabled = computed(() => { 
+        return company_options.map( option => option.value ).filter( value => value === true ).length > 0 || 
+        type_options.map( option => option.value ).filter( value => value === true ).length > 0; 
+    });
+</script>
+
+<template>
+    <q-btn-group rounded push>
+        <q-btn 
+            rounded
+            push
+            color="primary"
+            icon="print"
+            :disable="is_download_button_disabled"
+        />
+
+        <q-btn-dropdown
+            rounded
+            push
+            color="white"
+            text-color="primary"
+            icon="checklist"
+        >
+            <q-list class="row">
+                <q-item class="col">
+                    <q-item-label class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">
+                        {{$t('timesheet_approvals.print_report.company')}}
+                    </q-item-label>
+
+                    <q-item-section row no-wrap>
+                        <q-checkbox 
+                            v-for="option, index in company_options"
+                            :key="index"
+                            v-model="option.value" 
+                            :val="option.label"
+                            :label="option.label"
+                        />
+                    </q-item-section>
+                </q-item>
+
+                <q-separator
+                    spaced
+                    vertical
+                    color="primary" 
+                />
+
+                <q-item class="col">
+                    <q-item-section row no-wrap>
+                        <p class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">{{$t('timesheet_approvals.print_report.type')}}</p>
+                        <q-checkbox 
+                            v-for="option, index in type_options"
+                            :key="index"
+                            v-model="option.value"
+                            :val="option.label"
+                            :label="option.label"
+                        />
+                    </q-item-section>
+                </q-item>
+            </q-list>
+        </q-btn-dropdown>
+    </q-btn-group>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue
deleted file mode 100644
index d2cb7a7..0000000
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<script setup lang="ts">
-    import type { PayPeriodOverviewEmployee } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface';
-
-    type TableColumn = {
-        name: string;
-        label: string;
-        value: unknown;
-    };
-
-    const { cols, row, initialState } = defineProps<{
-        cols: TableColumn[];
-        row: PayPeriodOverviewEmployee;
-        initialState: boolean;
-    }>();
-    
-    const emit = defineEmits<{
-        clickDetails: [ email: string ];
-        updateApproval: [ value: boolean ];
-    }>();
-</script>
-
-<template>
-    <div class="q-px-sm q-pb-sm q-mt-sm col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 grid-style-transition">
-        <q-card class="rounded-10">
-            <!-- Card header with employee name and details button-->
-            <q-card-section 
-                horizontal 
-                class="q-py-none q-pl-md relative"
-            >
-                <div class="text-primary text-h5 text-weight-bolder q-pt-xs overflow-hidden">
-                    {{ row.employee_name }}
-                </div>
-
-                <q-space />
-
-                <!-- Buttons to view detailed shifts or view employee timesheet -->
-                <q-btn
-                    flat
-                    dense
-                    square
-                    unelevated
-                    class="q-py-none q-my-xs"
-                    color="primary"
-                    icon="work_history"
-                    @click="emit('clickDetails', row.email)"
-                >
-                    <q-tooltip 
-                        anchor="top middle"
-                        self="center middle" 
-                        class="bg-primary text-uppercase text-weight-bold"
-                    >
-                        {{ $t('timesheet_approvals.tooltip.button_detailed_view') }}
-                    </q-tooltip>
-                </q-btn>
-            </q-card-section>
-
-            <q-separator size="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">
-                                {{ cols.find(c => c.name === 'regular_hours')?.label }}
-                            </q-item-label>
-                            <q-item-label class="text-weight-bolder text-h3 q-py-none">
-                                {{ cols.find(c => c.name === 'regular_hours')?.value }}
-                            </q-item-label>
-                        </q-item>
-
-                        <q-separator 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 cols.slice(3, 6)" 
-                                :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 ">
-                                    {{ col.value }}
-                                </q-item-label>
-                            </q-item>
-                        </div>
-                    </div>
-                    
-                    <q-separator
-                        vertical 
-                        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 cols.slice(6, )" 
-                            :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 ">
-                                {{ 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 text-weight-bold"
-                :class="initialState ? 'text-white bg-primary' : 'bg-dark'"
-            >
-                <q-item-label class="text-uppercase text-h6 q-ml-sm text-weight-bolder"> {{ row.total_hours + ' h' }} </q-item-label>
-                <q-item-label class="text-uppercase text-weight-bold q-ml-xs"> total </q-item-label>
-                <q-space />
-                <q-checkbox 
-                    dense 
-                    left-label
-                    size="lg" 
-                    checked-icon="lock" 
-                    unchecked-icon="lock_open" 
-                    :color="initialState ? 'white' : 'primary'" keep-color 
-                    :model-value="initialState"
-                    @update:model-value="val => emit('updateApproval', val)"
-                    :label="initialState ? $t('timesheet_approvals.table.verified') : $t('timesheet_approvals.table.unverified')" 
-                    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
deleted file mode 100644
index af09ff4..0000000
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue
+++ /dev/null
@@ -1,267 +0,0 @@
-<script setup lang="ts">
-    /* eslint-disable */
-    import { computed, onMounted, ref } from 'vue';
-    import { useI18n } from 'vue-i18n';
-    import { date, type QTableColumn } from 'quasar';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import { useTimesheetApprovalApi } from '../composables/use-timesheet-approval-api';
-    import PayPeriodCalendarPicker from 'src/modules/shared/components/utils/pay-period-calendar-picker.vue';
-    import TimesheetApprovalEmployeeOverviewListItem from './timesheet-approval-employee-overview-list-item.vue';
-    import TimesheetApprovalEmployeeDetails from 'src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue';
-    import { type PayPeriodOverviewEmployee } from '../types/timesheet-approval-pay-period-overview-employee-interface';
-
-    const { t } = useI18n();
-    const timesheet_store = useTimesheetStore();
-    const timesheet_approval_api = useTimesheetApprovalApi();
-    const FORWARD = 1
-    const BACKWARD = -1
-    const filter = ref<string | number | null>('');
-    const original_approvals = ref<Record<string, boolean>>({});
-    const is_showing_details = ref<boolean>(false);
-    const report_filter_company = ref<boolean[]>([true, true]);
-    const report_filter_type = ref<boolean[]>([true, true, true, true]);
-    const clicked_employee_name = ref<string>('');
-    const clicked_employee_email = ref<string>('');
-    const update_key = ref<number>(0);
-    const columns = computed((): QTableColumn<PayPeriodOverviewEmployee>[] => [
-        { 
-            name: 'employee_name', 
-            label: t('timesheet_approvals.table.full_name'), 
-            field: 'employee_name', 
-            sortable: true 
-        },
-        { 
-            name: 'email', 
-            label: t('timesheet_approvals.table.email'), 
-            field: 'email', 
-            sortable: true,
-        },
-        { 
-            name: 'regular_hours', 
-            label: t('shared.shift_type.regular'), 
-            field: 'regular_hours', 
-            sortable: true 
-        },
-        { 
-            name: 'evening_hours', 
-            label: t('shared.shift_type.evening'), 
-            field: 'evening_hours' 
-        },
-        { 
-            name: 'emergency_hours', 
-            label: t('shared.shift_type.emergency'), 
-            field: 'emergency_hours' 
-        },
-        { 
-            name: 'overtime_hours', 
-            label: t('shared.shift_type.overtime'), 
-            field: 'overtime_hours' 
-        },
-        { 
-            name: 'expenses', 
-            label: t('timesheet_approvals.table.expenses'), 
-            field: 'expenses', 
-            sortable: true 
-        },
-        { 
-            name: 'mileage', 
-            label: t('timesheet_approvals.table.mileage'), 
-            field: 'mileage', 
-            sortable: true 
-        }
-    ]);
-    // const has_changes = computed(() => {
-    //     return timesheet_store.pay_period_overview_employees.some(emp => {
-    //         return emp.is_approved !== original_approvals.value[emp.email];
-    //     });
-    // });
-
-    const is_not_enough_filters = computed(() => {
-        return report_filter_company.value.filter(val => val === true).length < 1 ||
-               report_filter_type.value.filter(val => val === true).length < 1;
-    });
-
-    const filter_types_labels = [
-        t('timesheet_approvals.print_report.shifts'),
-        t('timesheet_approvals.print_report.expenses'),
-        t('shared.shift_type.holiday'),
-        t('shared.shift_type.vacation'),
-    ];
-
-    const is_calendar_limit = computed( () => {
-        return  timesheet_store.current_pay_period.pay_year === 2024 && 
-                timesheet_store.current_pay_period.pay_period_no <= 1;
-    });
-
-    const getEmployeeApprovalStatusReference = (email: string): boolean => {
-        const approval_status = timesheet_store.pay_period_overview_employee_approval_statuses?.find( status => status.key === email);
-        if (approval_status) {
-            return approval_status.value;
-        }
-        return false;
-    }
-
-    const updateEmployeeApprovalStatus = (email: string, value: boolean) => {
-        const approval_status = timesheet_store.pay_period_overview_employee_approval_statuses?.find( status => status.key === email);
-            if (approval_status) {
-                approval_status.value = value;
-            }
-    }
-
-    const getEmployeeOverview = (email: string): PayPeriodOverviewEmployee => {
-        return timesheet_approval_api.getPayPeriodOverviewByEmployeeEmail(email);
-    }
-
-    const onDateSelected = async (date_string: string) => {
-        await timesheet_approval_api.getPayPeriodOverviewByDate(date_string);
-    };
-
-    const onClickedDetails = async (email: string, name: string) => {
-        clicked_employee_name.value = name;
-        clicked_employee_email.value = email; 
-        is_showing_details.value = true;
-        
-        await timesheet_approval_api.getTimesheetsByPayPeriodAndEmail(email);
-    };
-    
-    const onClickPrintReport = async () => {
-        await timesheet_approval_api.getTimesheetApprovalCSVReport(report_filter_company.value, report_filter_type.value);
-    };
-
-    onMounted( async () => {
-        const today = date.formatDate(new Date(), 'YYYY-MM-DD');
-        await timesheet_approval_api.getPayPeriodOverviewByDate(today);
-
-        const approvals = timesheet_store.pay_period_overview_employees.map(emp => [emp.email, emp.is_approved]);
-        original_approvals.value = Object.fromEntries(approvals);
-    })
-</script>
-
-<template>
-     <q-dialog 
-        v-model="is_showing_details"
-        transition-show="jump-down"
-        transition-hide="jump-down"
-        @before-show="() => update_key += 1"
-        full-width
-        :full-height="$q.screen.gt.sm"
-    >   
-        <TimesheetApprovalEmployeeDetails 
-            :is-loading="timesheet_store.is_loading"
-            :employee-name="clicked_employee_name"
-            :employee-overview="getEmployeeOverview(clicked_employee_email)"
-            :employee-details="timesheet_store.pay_period_employee_details"
-            :current-pay-period="timesheet_store.current_pay_period"
-            :update-key="update_key"
-        />
-    </q-dialog>
-
-    <div class="q-pa-md">
-        <q-table 
-            :rows="timesheet_store.pay_period_overview_employees" 
-            :columns="columns"
-            row-key="email" 
-            :filter="filter" 
-            grid 
-            dense
-            hide-pagination
-            color="primary"
-            :rows-per-page-options="[0]" 
-            card-container-class="justify-center"
-            :loading="timesheet_store.is_loading"
-            :no-data-label="$t('shared.error.no_data_found')"
-            :no-results-label="$t('shared.error.no_search_results')"
-            :loading-label="$t('shared.label.loading')"
-        >
-            <!-- Top Bar that contains Date Picker, Search, Filters, Print Report, etc -->
-            <template #top>
-                <div class="full-width" :class="$q.screen.lt.md ? 'text-center q-gutter-sm' : 'row'">
-                    <!-- Date Picker -->
-                    <PayPeriodCalendarPicker 
-                        :is-disabled="timesheet_store.is_loading"
-                        :is-previous-limit="is_calendar_limit"
-                        @date-selected="onDateSelected"
-                        @pressed-previous-button="timesheet_approval_api.getNextPayPeriodOverview(BACKWARD)"
-                        @pressed-next-button="timesheet_approval_api.getNextPayPeriodOverview(FORWARD)"
-                    />
-                    
-                    <q-space />
-
-                    <q-btn-group rounded push>
-                        <q-btn 
-                            rounded
-                            push
-                            color="primary"
-                            icon="print"
-                            :disable="is_not_enough_filters"
-                            @click="onClickPrintReport"
-                        />
-                        <q-btn-dropdown
-                            rounded
-                            push
-                            color="white"
-                            text-color="primary"
-                            icon="checklist"
-                        >
-                            <q-list>
-                                <q-item>
-                                    <q-item-section row no-wrap>
-                                        <p class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">{{$t('timesheet_approvals.print_report.company')}}</p>
-                                        <q-checkbox 
-                                            v-for="label, index in ['Targo', 'Solucom']"
-                                            v-model="report_filter_company[index]" 
-                                            :val="label"
-                                            :label=label
-                                            :key="index"
-                                        />
-                                    </q-item-section>
-                                </q-item>
-                                <q-separator color="primary" class="q-mx-md"/>
-                                <q-item>
-                                    <q-item-section row no-wrap>
-                                        <p class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">{{$t('timesheet_approvals.print_report.type')}}</p>
-                                        <q-checkbox 
-                                            v-for="label, index in filter_types_labels"
-                                            v-model="report_filter_type[index]"
-                                            :val="label"
-                                            :label="label"
-                                            :key="index"
-                                        />
-                                    </q-item-section>
-                                </q-item>
-                            </q-list>
-                        </q-btn-dropdown>
-                    </q-btn-group>
-                </div>
-            </template>
-
-            <!-- Template for individual employee cards -->
-            <template #item="props: { 
-                cols: (QTableColumn<PayPeriodOverviewEmployee> & { value: unknown })[], 
-                row: PayPeriodOverviewEmployee,
-                key: string,
-            }">
-                <TimesheetApprovalEmployeeOverviewListItem 
-                    :cols="props.cols" 
-                    :row="props.row" 
-                    :initial-state="getEmployeeApprovalStatusReference(props.key)"
-                    @click-details="email => onClickedDetails(email, props.row.employee_name)"
-                    @update-approval="value => updateEmployeeApprovalStatus(props.key, value)"
-                />
-            </template>
-
-            <!-- Template for custome failed-to-load state -->
-            <template #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/timesheet-approval/composables/use-timesheet-approval-api.ts b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
index ecdf20a..9526fde 100644
--- a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
+++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
@@ -1,36 +1,39 @@
 import { useTimesheetStore } from "src/stores/timesheet-store";
 import { useAuthStore } from "src/stores/auth-store";
-import type { PayPeriodReportFilters } from "../types/timesheet-approval-pay-period-report-interface";
-import { default_pay_period_overview_employee, type PayPeriodOverviewEmployee } from "../types/timesheet-approval-pay-period-overview-employee-interface";
+import type { PayPeriodReportFilters } from "src/modules/timesheet-approval/types/pay-period-report";
+import { default_pay_period_employee_overview, type PayPeriodEmployeeOverview } from "src/modules/timesheet-approval/types/pay-period-employee-overview";
 import { date } from "quasar";
 
 export const useTimesheetApprovalApi = () => {
     const timesheet_store = useTimesheetStore();
     const auth_store = useAuthStore();
 
-    const getPayPeriodOverviewByDate = async (date_string: string) => {
-        const success = await timesheet_store.getPayPeriodByDate(date_string);
+    const getPayPeriodOverviewByDate = async (date_string: string): Promise<void> => {
+        const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber(date_string);
         
         if (success) {
-            const current_pay_period = timesheet_store.current_pay_period;
-            await timesheet_store.getTimesheetApprovalPayPeriodEmployeeOverviews(current_pay_period.pay_year, current_pay_period.pay_period_no, auth_store.user.email);
+            await timesheet_store.getPayPeriodEmployeeOverviewListBySupervisorEmail(
+                timesheet_store.pay_period.pay_year, 
+                timesheet_store.pay_period.pay_period_no, 
+                auth_store.user.email
+            );
         }
-    }
+    };
 
-    const getPayPeriodOverviewByEmployeeEmail = (email: string): PayPeriodOverviewEmployee => {
-        const employee_overview = timesheet_store.pay_period_overview_employees.find(overview => overview.email === email);
-        if (employee_overview !== undefined) return employee_overview;
-        return default_pay_period_overview_employee;
+    const getPayPeriodOverviewByEmployeeEmail = (email: string): void => {
+        const employee_overview = timesheet_store.getPayPeriodOverviewByEmployeeEmail(email);
     };
 
     /* This method attempts to get the next or previous pay period. 
         It checks if pay period number is within a certain range, adjusts pay period and year accordingly.
         It then requests the matching pay period object to set as current pay period from server.
-        If successful, it then requests pay period overviews from that new pay period. */
-    const getNextPayPeriodOverview = async (direction: number) => {
-        const current_pay_period = timesheet_store.current_pay_period;
-        let new_pay_period_no = current_pay_period.pay_period_no + direction;
-        let new_pay_year = current_pay_period.pay_year;
+        If successful, it then requests pay period overviews from that new pay period, using either the current user or 
+        any other supervisor email provided. */
+    const getNextOrPreviousPayPeriodOverviewList = async (direction: number, supervisor_email?: string): Promise<void> => {
+        const email = supervisor_email ?? auth_store.user.email;
+
+        let new_pay_period_no = timesheet_store.pay_period.pay_period_no + direction;
+        let new_pay_year = timesheet_store.pay_period.pay_year;
 
         if (new_pay_period_no > 26) {
            new_pay_period_no = 1;
@@ -42,17 +45,13 @@ export const useTimesheetApprovalApi = () => {
             new_pay_year -= 1;
         }
 
-        const success = await timesheet_store.getPayPeriodByYearAndPeriodNumber(new_pay_year, new_pay_period_no);
+        const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber(new_pay_year, new_pay_period_no);
         
         if (success) {
-            await timesheet_store.getTimesheetApprovalPayPeriodEmployeeOverviews(new_pay_year, new_pay_period_no, auth_store.user.email);
+            await timesheet_store.getPayPeriodEmployeeOverviewListBySupervisorEmail(new_pay_year, new_pay_period_no, email);
         }
     };
 
-    const getTimesheetsByPayPeriodAndEmail = async (employee_email: string) => {
-        await timesheet_store.getTimesheetsByPayPeriodAndEmail(employee_email);
-    };
-
     const getTimesheetApprovalCSVReport = async ( report_filter_company: boolean[], report_filter_type: boolean[] ) => {
         const [ targo, solucom ] = report_filter_company;
         const [ shifts, expenses, holiday, vacation ] = report_filter_type;
@@ -64,29 +63,10 @@ export const useTimesheetApprovalApi = () => {
         await timesheet_store.getTimesheetApprovalCSVReport(options);
     };
 
-    const getCurrentPayPerdioOverview = async (): Promise<void> => {
-        const today = date.formatDate(new Date(), 'YYYY-MM-DD');
-        const success = await timesheet_store.getPayPeriodByDate(today);
-        if(!success) return;
-
-        const { pay_year, pay_period_no } = timesheet_store.current_pay_period;
-
-        await timesheet_store.getTimesheetApprovalPayPeriodEmployeeOverviews(
-            pay_year,
-            pay_period_no,
-            auth_store.user.email
-        );
-
-        await timesheet_store.getTimesheetsByPayPeriodAndEmail(auth_store.user.email);
-
-    };
-
     return {
         getPayPeriodOverviewByDate,
-        getNextPayPeriodOverview,
+        getNextOrPreviousPayPeriodOverviewList,
         getPayPeriodOverviewByEmployeeEmail,
-        getTimesheetsByPayPeriodAndEmail,
         getTimesheetApprovalCSVReport,
-        getCurrentPayPerdioOverview
     }
 };
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/pages/timesheet-approval-detailed.vue b/src/modules/timesheet-approval/pages/timesheet-approval-detailed.vue
new file mode 100644
index 0000000..b7f1f1b
--- /dev/null
+++ b/src/modules/timesheet-approval/pages/timesheet-approval-detailed.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+    import { ref } from 'vue';
+
+    import DetailedShiftList from 'src/modules/timesheet-approval/components/detailed-shift-list.vue';
+    import DetailedChartHoursWorked from 'src/modules/timesheet-approval/components/graphs/detailed-chart-hours-worked.vue';
+    import DetailedChartShiftTypes from 'src/modules/timesheet-approval/components/graphs/detailed-chart-shift-types.vue';
+    import DetailedChartExpenses from 'src/modules/timesheet-approval/components/graphs/detailed-chart-expenses.vue';
+    import type { PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';
+    import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/pay-period-employee-details';
+    import { shift_type_legend } from 'src/modules/timesheet-approval/types/detailed-shift-color';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+
+    const dialog_model = defineModel<boolean>('dialog', { default: false });
+
+    defineProps<{
+        isLoading: boolean;
+        employeeOverview: PayPeriodEmployeeOverview;
+        employeeDetails: PayPeriodEmployeeDetails;
+    }>();
+
+    const timesheet_store = useTimesheetStore();
+    const is_showing_graph = ref<boolean>(true);
+</script>
+
+<template>
+    <q-dialog 
+        v-model="dialog_model" 
+        full-width
+        transition-show="jump-down" 
+        transition-hide="jump-down"
+    >
+        <q-card 
+            class="q-pa-sm shadow-12 rounded-15 column no-wrap relative"
+            :style="$q.screen.lt.md ? '' : 'width: 60vw !important;'"
+        >
+            <!-- loader -->
+            <q-card-section 
+                v-if="isLoading" 
+                class="column flex-center text-center"
+            >
+                <q-spinner 
+                    color="primary" 
+                    size="5em" 
+                    :thickness="10" 
+                    class="col-auto"
+                />
+                <div class="col-auto text-primary text-h6 text-weight-bold text-center ">
+                    {{ $t('shared.loading') }}
+                </div>
+            </q-card-section>
+
+            <!-- employee name -->
+            <q-card-section 
+                v-if="!isLoading"
+                class="text-h5 text-weight-bolder text-center text-primary q-pa-none text-uppercase col-auto"
+            >
+                <span> {{ employeeDetails.employee_full_name }} </span>
+
+                <q-separator 
+                    spaced 
+                    size="2px" 
+                />
+                
+                <q-card-actions 
+                    align="center" 
+                    class="q-pa-none"
+                >
+                    <q-btn-toggle 
+                        v-model="is_showing_graph" 
+                        color="white" 
+                        text-color="primary" 
+                        toggle-color="primary"
+                        :options="[
+                            { icon: 'bar_chart', value: true },
+                            { icon: 'edit', value: false },
+                        ]"
+                    />
+                </q-card-actions>
+            </q-card-section>
+
+            <!-- employee timesheet details edit -->
+            <q-card-section 
+                v-if="!is_showing_graph" 
+                class="q-pa-none"
+            >
+                <!-- shift type color legend -->
+                <q-card-section class="q-py-xs q-px-none text-center q-my-s">
+                    <q-badge 
+                        v-for="shift_type, index in shift_type_legend"
+                        :key="index"
+                        :color="shift_type.background_color" 
+                        :label="$t(shift_type.type_label)"
+                        :text-color="shift_type.font_color"
+                        class="q-px-md q-py-xs q-mx-xs q-my-none text-uppercase text-weight-bolder justify-center"
+                        style="width: 120px; font-size: 0.8em;" 
+                    />
+                </q-card-section>
+
+                <!-- list of shifts, broken down into weekly columns -->
+                <q-card-section 
+                    :horizontal="$q.screen.gt.sm" 
+                    class="q-pa-none bg-secondary rounded-10"
+                >
+                    <DetailedShiftList 
+                        :raw-data="employeeDetails"
+                        :current-pay-period="timesheet_store.pay_period" 
+                    />
+                </q-card-section>
+            </q-card-section>
+
+            <!-- employee timesheet details with chart -->
+            <q-card-section 
+                v-if="is_showing_graph" 
+                class="q-pa-md col column full-width no-wrap"
+            >
+                <q-card-section 
+                    :horizontal="!$q.screen.lt.md" 
+                    class="q-pa-none col no-wrap" 
+                    style="min-height: 300px;"
+                >
+                    <DetailedChartHoursWorked 
+                        :raw-data="employeeDetails" 
+                        class="col-7" 
+                    />
+
+                    <q-separator 
+                        spaced 
+                        :vertical="!$q.screen.lt.md" 
+                    />
+
+                    <div class="column col justify-center no-wrap q-pa-none">
+                        <DetailedChartShiftTypes 
+                            :raw-data="employeeOverview" 
+                            class="col-5" 
+                        />
+
+                        <q-separator 
+                            spaced 
+                            :vertical="!$q.screen.lt.md" 
+                        />
+
+                        <DetailedChartExpenses 
+                            :raw-data="employeeDetails" 
+                            class="col" 
+                        />
+                    </div>
+                </q-card-section>
+            </q-card-section>
+        </q-card>
+    </q-dialog>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue b/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue
deleted file mode 100644
index b2352f4..0000000
--- a/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<script setup lang="ts">
-    /*eslint-disable*/
-    import { ref } from 'vue';
-    import { useI18n } from 'vue-i18n';
-    import TimesheetApprovalEmployeeDetailsShifts from 'src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue';
-    import TimesheetApprovalEmployeeDetailsHoursWorkedChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue';
-    import TimesheetApprovalEmployeeDetailsShiftTypesChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue';
-    import TimesheetApprovalEmployeeExpensesChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue';
-    import type { PayPeriodOverviewEmployee } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface';
-    import type { PayPeriodEmployeeDetails } from '../types/timesheet-approval-pay-period-employee-details-interface';
-    import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
-
-    const props = defineProps<{
-        isLoading: boolean;
-        employeeName: string;
-        employeeOverview: PayPeriodOverviewEmployee;
-        employeeDetails: PayPeriodEmployeeDetails;
-        currentPayPeriod: PayPeriod;
-        updateKey: number;
-    }>();
-
-    const { t } = useI18n();
-    const is_showing_graph = ref<boolean>(true);
-
-    type shiftColor = {
-        type: string;
-        color: string;
-        text_color?: string;
-    }
-
-    const shift_type_legend: shiftColor[] = [
-        {
-            type: t('shared.shift_type.regular'),
-            color: 'secondary',
-            text_color: '',
-        },
-        {
-            type: t('shared.shift_type.evening'),
-            color: 'warning',
-        },
-        {
-            type: t('shared.shift_type.emergency'),
-            color: 'amber-10',
-        },
-        {
-            type: t('shared.shift_type.overtime'),
-            color: 'negative',
-        },
-        {
-            type: t('shared.shift_type.vacation'),
-            color: 'purple-10',
-        },
-        {
-            type: t('shared.shift_type.holiday'),
-            color: 'purple-8',
-        },
-        {
-            type: t('shared.shift_type.sick'),
-            color: 'grey-8',
-        },
-    ]
-</script>
-
-<template>
-    <q-card 
-        class="q-pa-sm shadow-12 rounded-15 column no-wrap relative" 
-        :style="$q.screen.lt.md ? '' : 'width: 60vw !important; height: 70vh !important;' "
-    >
-        <!-- loader -->
-        <q-card-section 
-            v-if="props.isLoading"
-            class="absolute-center text-center"
-        >
-            <q-spinner 
-                color="primary"
-                size="5em"
-                :thickness="10"
-            />
-            <div class="text-primary text-h6 text-weight-bold">
-                {{ $t('shared.loading') }}
-            </div>
-        </q-card-section>
-        
-        <!-- employee name -->
-        <q-card-section 
-            v-if="!props.isLoading"
-            class="text-h5 text-weight-bolder text-center text-primary q-pa-none text-uppercase col-auto"
-        >
-            {{ props.employeeName }}
-            
-            <q-separator spaced size="2px" />
-            <q-card-actions align="center" class="q-pa-none">     
-                <q-card flat class="bg-secondary rounded-5 q-pa-xs">
-                    <q-btn-toggle
-                        color="white" 
-                        text-color="primary" 
-                        toggle-color="primary" 
-                        v-model="is_showing_graph"
-                        :options="[
-                            {icon: 'bar_chart', value: true},
-                            {icon: 'edit', value: false},
-                        ]"
-                    />
-                </q-card>
-            </q-card-actions>
-        </q-card-section>
-        
-        <!-- employee timesheet details edit -->
-        <q-card-section 
-            v-if="!props.isLoading && !is_showing_graph"
-            class="q-pa-none"
-        >
-            <!-- shift type color legend -->
-            <q-card-section class="q-py-xs q-px-none text-center q-my-s">
-                <q-badge
-                    v-for="shift_type in shift_type_legend"
-                    :color="shift_type.color"
-                    :label="shift_type.type"
-                    :text-color="shift_type.text_color || 'white'"
-                    class="q-px-md q-py-xs q-mx-xs q-my-none text-uppercase text-weight-bolder justify-center"
-                    style="width: 120px; font-size: 0.8em;"
-                />
-            </q-card-section>
-            
-            <!-- list of shifts, broken down into weekly columns -->
-            <q-card-section 
-                :horizontal="$q.screen.gt.sm"
-                class="q-pa-none bg-secondary rounded-10"
-            >
-                <TimesheetApprovalEmployeeDetailsShifts 
-                    :raw-data="props.employeeDetails"
-                    :current-pay-period="props.currentPayPeriod"
-                />
-            </q-card-section>
-        </q-card-section>
-        
-        <!-- employee timesheet details with graphs -->
-        <q-card-section v-if="!props.isLoading && is_showing_graph" class="q-pa-md col column full-width no-wrap">
-            <q-card-section :horizontal="!$q.screen.lt.md" class="q-pa-none col no-wrap" style="min-height: 300px;">
-                <TimesheetApprovalEmployeeDetailsHoursWorkedChart
-                    :raw-data="props.employeeDetails"
-                    class="col-7"
-                />
-            
-                <q-separator vertical spaced />
-
-                <div class="column col justify-center no-wrap q-pa-none">
-                    <TimesheetApprovalEmployeeDetailsShiftTypesChart
-                        :raw-data="props.employeeOverview"
-                        class="col-5"
-                    />
-                    
-                    <q-separator :vertical="$q.screen.lt.md" spaced />
-                    
-                    <TimesheetApprovalEmployeeExpensesChart
-                        :raw-data="props.employeeDetails"
-                        class="col"
-                    />
-                    
-                </div>
-            </q-card-section>
-        </q-card-section>
-    </q-card>
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/pages/timesheet-approval.vue b/src/modules/timesheet-approval/pages/timesheet-approval.vue
index f3499de..71be5fe 100644
--- a/src/modules/timesheet-approval/pages/timesheet-approval.vue
+++ b/src/modules/timesheet-approval/pages/timesheet-approval.vue
@@ -1,23 +1,17 @@
 <script setup lang="ts">
-    import TimesheetApprovalEmployeeOverviewList from '../components/timesheet-approval-employee-overview-list.vue';
-    import { computed } from 'vue';
-    import { useI18n } from 'vue-i18n';
+    import { onMounted } from 'vue';
+    import { date } from 'quasar';
+    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import EmployeeOverviewList from 'src/modules/timesheet-approval/components/employee-overview/overview-list.vue';
+    import TimesheetApprovalDetailed from 'src/modules/timesheet-approval/pages/timesheet-approval-detailed.vue';
+    import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
 
-    const { d } = useI18n();
+    const timesheet_approval_api = useTimesheetApprovalApi();
     const timesheet_store = useTimesheetStore();
 
-    const pay_period_label = computed(() => {
-        const dates = timesheet_store.current_pay_period.label.split('.');
-        
-        if ( dates.length < 2 ) {
-            return { start_date: '—', end_date: '—' }
-        }
-
-        const start_date = d(new Date(dates[0] as string), { day: 'numeric', month: 'long', year: 'numeric', });
-        const end_date = d(new Date(dates[1] as string), { day: 'numeric', month: 'long', year: 'numeric', });
-
-        return { start_date, end_date };
+    onMounted( async () => {
+        await timesheet_approval_api.getPayPeriodOverviewByDate(date.formatDate( new Date(), 'YYYY-MM-DD'));
     });
 </script>
 
@@ -26,21 +20,18 @@
         padding 
         class="q-pa-md bg-secondary "
     >
-        <div class="column q-mt-lg text-uppercase text-center text-weight-bolder text-h4">
-            {{ $t('timesheet_approvals.page_title') }}
-            <div class="col row items-center justify-center full-width q-py-none q-my-none">
-                <div class="text-primary text-weight-bold text-h6">
-                    {{ pay_period_label.start_date }}
-                </div>
-                <div class="text-body2 q-mx-md text-weight-medium">
-                    {{ $t('shared.misc.to') }}
-                </div>
-                <div class="text-primary text-weight-bold text-h6">
-                    {{ pay_period_label.end_date }}
-                </div>
-            </div>
-        </div>
+        <PageHeaderTemplate 
+            title="timesheet_approvals.page_title"
+            :start-date="timesheet_store.pay_period.period_start"
+            :end-date="timesheet_store.pay_period.period_end"
+        />
+        
+        <TimesheetApprovalDetailed
+            :is-loading="timesheet_store.is_loading"
+            :employee-overview="timesheet_store.pay_period_employee_overview"
+            :employee-details="timesheet_store.pay_period_employee_details"
+        />
 
-        <TimesheetApprovalEmployeeOverviewList />
+        <EmployeeOverviewList />
     </q-page>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/services/services-timesheet-approval.ts b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
similarity index 64%
rename from src/modules/timesheet-approval/services/services-timesheet-approval.ts
rename to src/modules/timesheet-approval/services/timesheet-approval-service.ts
index e426961..1a15240 100644
--- a/src/modules/timesheet-approval/services/services-timesheet-approval.ts
+++ b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
@@ -1,8 +1,8 @@
 import { api } from "src/boot/axios";
-import type { PayPeriodOverview } from "../types/timesheet-approval-pay-period-overview-interface";
+import type { PayPeriodOverview } from "src/modules/timesheet-approval/types/pay-period-overview";
 import type { PayPeriod } from "src/modules/shared/types/pay-period-interface";
-import type { PayPeriodEmployeeDetails } from "../types/timesheet-approval-pay-period-employee-details-interface";
-import type { PayPeriodReportFilters } from "../types/timesheet-approval-pay-period-report-interface";
+import type { PayPeriodEmployeeDetails } from "src/modules/timesheet-approval/types/pay-period-employee-details";
+import type { PayPeriodReportFilters } from "src/modules/timesheet-approval/types/pay-period-report";
 
 export const timesheetApprovalService = {
     getPayPeriodByDate: async (date_string: string): Promise<PayPeriod> => {
@@ -16,13 +16,13 @@ export const timesheetApprovalService = {
     },
 
 
-    getPayPeriodEmployeeOverviews: async (year: number, period_number: number, supervisor_email: string): Promise<PayPeriodOverview> => {
+    getPayPeriodEmployeeOverviewListBySupervisorEmail: 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}`);
         return response.data;
     },
 
-    getTimesheetsByPayPeriodAndEmail: async (year: number, period_no: number, email: string): Promise<PayPeriodEmployeeDetails> => {
+    getPayPeriodEmployeeDetailsByPayPeriodAndEmail: async (year: number, period_no: number, email: string): Promise<PayPeriodEmployeeDetails> => {
         const response = await api.get('timesheets', { params: { year, period_no, email, }});
         return response.data;
     },
diff --git a/src/modules/timesheet-approval/timesheet-approval-test-constants.ts b/src/modules/timesheet-approval/timesheet-approval-test-constants.ts
deleted file mode 100644
index abdb8ba..0000000
--- a/src/modules/timesheet-approval/timesheet-approval-test-constants.ts
+++ /dev/null
@@ -1,287 +0,0 @@
-// 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_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/modules/timesheet-approval/types/detailed-shift-color.ts b/src/modules/timesheet-approval/types/detailed-shift-color.ts
new file mode 100644
index 0000000..439942b
--- /dev/null
+++ b/src/modules/timesheet-approval/types/detailed-shift-color.ts
@@ -0,0 +1,43 @@
+export interface shiftColor {
+    type_label: string;
+    background_color: string;
+    font_color: string;
+}
+
+export const shift_type_legend: shiftColor[] = [
+    {
+        type_label: 'shared.shift_type.regular',
+        background_color: 'blue-grey-4',
+        font_color: 'blue-grey-8',
+    },
+    {
+        type_label: 'shared.shift_type.evening',
+        background_color: 'warning',
+        font_color: 'blue-grey-2',
+    },
+    {
+        type_label: 'shared.shift_type.emergency',
+        background_color: 'amber-10',
+        font_color: 'blue-grey-2',
+    },
+    {
+        type_label: 'shared.shift_type.overtime',
+        background_color: 'negative',
+        font_color: 'blue-grey-2',
+    },
+    {
+        type_label: 'shared.shift_type.vacation',
+        background_color: 'purple-10',
+        font_color: 'blue-grey-2',
+    },
+    {
+        type_label: 'shared.shift_type.holiday',
+        background_color: 'purple-8',
+        font_color: 'blue-grey-2',
+    },
+    {
+        type_label: 'shared.shift_type.sick',
+        background_color: 'grey-8',
+        font_color: 'blue-grey-2',
+    },
+]
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface.ts b/src/modules/timesheet-approval/types/pay-period-employee-details.ts
similarity index 84%
rename from src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface.ts
rename to src/modules/timesheet-approval/types/pay-period-employee-details.ts
index 01ce1b9..c6608dc 100644
--- a/src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface.ts
+++ b/src/modules/timesheet-approval/types/pay-period-employee-details.ts
@@ -3,9 +3,11 @@ import { default_timesheet_details_week, type TimesheetDetailsWeek } from "src/m
 export interface PayPeriodEmployeeDetails {
     week1: TimesheetDetailsWeek;
     week2: TimesheetDetailsWeek;
+    employee_full_name: string;
 };
 
 export const default_pay_period_employee_details = {
     week1: default_timesheet_details_week(),
     week2: default_timesheet_details_week(),
+    employee_full_name: "",
 }
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/types/pay-period-employee-overview.ts b/src/modules/timesheet-approval/types/pay-period-employee-overview.ts
new file mode 100644
index 0000000..98cf34e
--- /dev/null
+++ b/src/modules/timesheet-approval/types/pay-period-employee-overview.ts
@@ -0,0 +1,82 @@
+export interface PayPeriodEmployeeOverview {
+    email: string;
+    employee_name: string;
+    regular_hours: number;
+    evening_hours: number;
+    emergency_hours: number;
+    overtime_hours: number;
+    total_hours: number;
+    expenses: number;
+    mileage: number;
+    is_approved: boolean;
+};
+
+export const default_pay_period_employee_overview: PayPeriodEmployeeOverview = {
+    email: '',
+    employee_name: '',
+    regular_hours: -1,
+    evening_hours: -1,
+    emergency_hours: -1,
+    overtime_hours: -1,
+    total_hours: -1,
+    expenses: -1,
+    mileage: -1,
+    is_approved: false
+}
+
+export const pay_period_employee_overview_columns = [
+        { 
+            name: 'employee_name', 
+            label: 'timesheet_approvals.table.full_name', 
+            field: 'employee_name', 
+            sortable: true 
+        },
+        { 
+            name: 'email', 
+            label: 'timesheet_approvals.table.email', 
+            field: 'email', 
+            sortable: true,
+        },
+        { 
+            name: 'regular_hours', 
+            label: 'shared.shift_type.regular', 
+            field: 'regular_hours', 
+            sortable: true, 
+        },
+        { 
+            name: 'evening_hours', 
+            label: 'shared.shift_type.evening', 
+            field: 'evening_hours',
+            sortable: true, 
+        },
+        { 
+            name: 'emergency_hours', 
+            label: 'shared.shift_type.emergency', 
+            field: 'emergency_hours',
+            sortable: true, 
+        },
+        { 
+            name: 'overtime_hours', 
+            label: 'shared.shift_type.overtime', 
+            field: 'overtime_hours',
+            sortable: true,
+        },
+        { 
+            name: 'expenses', 
+            label: 'timesheet_approvals.table.expenses', 
+            field: 'expenses', 
+            sortable: true, 
+        },
+        { 
+            name: 'mileage', 
+            label: 'timesheet_approvals.table.mileage', 
+            field: 'mileage', 
+            sortable: true,
+        },
+        {
+            name: 'is_approved',
+            label: 'timesheet_approvals.table.is_approved',
+            field: 'is_approved',
+            sortable: true,
+        }
+    ];
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-interface.ts b/src/modules/timesheet-approval/types/pay-period-overview.ts
similarity index 50%
rename from src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-interface.ts
rename to src/modules/timesheet-approval/types/pay-period-overview.ts
index c74ac70..cf3c198 100644
--- a/src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-interface.ts
+++ b/src/modules/timesheet-approval/types/pay-period-overview.ts
@@ -1,4 +1,4 @@
-import type { PayPeriodOverviewEmployee } from "./timesheet-approval-pay-period-overview-employee-interface";
+import type { PayPeriodEmployeeOverview } from "./pay-period-employee-overview";
 
 export interface PayPeriodOverview {
     pay_period_no: number;
@@ -7,5 +7,5 @@ export interface PayPeriodOverview {
     period_start: string;
     period_end: string;
     label: string;
-    employees_overview: PayPeriodOverviewEmployee[];
+    employees_overview: PayPeriodEmployeeOverview[];
 };
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/types/pay-period-report-options.ts b/src/modules/timesheet-approval/types/pay-period-report-options.ts
new file mode 100644
index 0000000..2014305
--- /dev/null
+++ b/src/modules/timesheet-approval/types/pay-period-report-options.ts
@@ -0,0 +1,25 @@
+export interface PayPeriodReportFilters {
+    types: {
+        shifts: boolean;
+        expenses: boolean;
+        holiday: boolean;
+        vacation: boolean;
+    };
+    companies: {
+        targo: boolean;
+        solucom: boolean;
+    };
+};
+
+export const default_pay_period_report_filters: PayPeriodReportFilters = {
+    types: {
+        shifts: true,
+        expenses: true,
+        holiday: true,
+        vacation: true,
+    },
+    companies: {
+        targo: true,
+        solucom: true,
+    },
+};
diff --git a/src/modules/timesheet-approval/types/timesheet-approval-pay-period-report-interface.ts b/src/modules/timesheet-approval/types/pay-period-report.ts
similarity index 100%
rename from src/modules/timesheet-approval/types/timesheet-approval-pay-period-report-interface.ts
rename to src/modules/timesheet-approval/types/pay-period-report.ts
diff --git a/src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface.ts b/src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface.ts
deleted file mode 100644
index 9ad866f..0000000
--- a/src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export interface PayPeriodOverviewEmployee {
-    email: string;
-    employee_name: string;
-    regular_hours: number;
-    evening_hours: number;
-    emergency_hours: number;
-    overtime_hours: number;
-    total_hours: number;
-    expenses: number;
-    mileage: number;
-    is_approved: boolean;
-};
-
-export const default_pay_period_overview_employee: PayPeriodOverviewEmployee = {
-    email: '',
-    employee_name: '',
-    regular_hours: -1,
-    evening_hours: -1,
-    emergency_hours: -1,
-    overtime_hours: -1,
-    total_hours: -1,
-    expenses: -1,
-    mileage: -1,
-    is_approved: false
-}
\ No newline at end of file
diff --git a/src/modules/timesheets/services/timesheet-services.ts b/src/modules/timesheets/services/timesheet-services.ts
index caab15a..e29ea34 100644
--- a/src/modules/timesheets/services/timesheet-services.ts
+++ b/src/modules/timesheets/services/timesheet-services.ts
@@ -2,9 +2,9 @@ import { api } from "src/boot/axios";
 import type {Timesheet}  from "src/modules/timesheets/types/timesheet-interface";
 import type { CreateShiftPayload, CreateWeekShiftPayload } from "../types/timesheet-shifts-payload-interface";
 import type { PayPeriod } from "src/modules/shared/types/pay-period-interface";
-import type { PayPeriodEmployeeDetails } from "src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface";
-import type { PayPeriodOverview } from "src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-interface";
-import type { PayPeriodReportFilters } from "src/modules/timesheet-approval/types/timesheet-approval-pay-period-report-interface";
+import type { PayPeriodEmployeeDetails } from "src/modules/timesheet-approval/types/pay-period-employee-details";
+import type { PayPeriodOverview } from "src/modules/timesheet-approval/types/pay-period-overview";
+import type { PayPeriodReportFilters } from "src/modules/timesheet-approval/types/pay-period-report";
 
 export const timesheetTempService = {
     //GET
diff --git a/src/modules/timesheets/types/timesheet-interface.ts b/src/modules/timesheets/types/timesheet-interface.ts
index 12334fd..2f16029 100644
--- a/src/modules/timesheets/types/timesheet-interface.ts
+++ b/src/modules/timesheets/types/timesheet-interface.ts
@@ -25,4 +25,13 @@ type Expenses = {
     comment: string;
     supervisor_comment: string;
     is_approved: boolean;
-}
\ No newline at end of file
+}
+
+export const default_timesheet: Timesheet = {
+    start_day: '',
+    end_day: '',
+    label: '',
+    is_approved: false,
+    shifts: [],
+    expenses: [],
+ };
\ No newline at end of file
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index 936ee33..085577a 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -1,181 +1,166 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
-import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/services-timesheet-approval';
+import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/timesheet-approval-service';
 import { timesheetTempService } from 'src/modules/timesheets/services/timesheet-services';
-import { default_pay_period_employee_details, type PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
-import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
-import type { PayPeriodOverviewEmployee } from "src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface";
-import type { PayPeriodReportFilters } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-report-interface';
-import type { Timesheet } from 'src/modules/timesheets/types/timesheet-interface';
+import { default_pay_period_employee_details, type PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/pay-period-employee-details';
+import { default_pay_period, type PayPeriod } from 'src/modules/shared/types/pay-period-interface';
+import { default_pay_period_employee_overview, type PayPeriodEmployeeOverview } from "src/modules/timesheet-approval/types/pay-period-employee-overview";
+import type { PayPeriodReportFilters } from 'src/modules/timesheet-approval/types/pay-period-report';
+import { default_timesheet, type Timesheet } from 'src/modules/timesheets/types/timesheet-interface';
 import type { CreateShiftPayload } from 'src/modules/timesheets/types/timesheet-shifts-payload-interface';
-
-const default_pay_period: PayPeriod = { 
-    pay_period_no: -1,
-    period_start: '',
-    period_end: '',
-    payday: '',
-    pay_year: -1,
-    label: ''
- };
-
- //employee timesheet
- const default_timesheet: Timesheet = {
-    start_day: '',
-    end_day: '',
-    label: '',
-    is_approved: false,
-    shifts: [],
-    expenses: [],
- };
+import { withLoading } from 'src/utils/store-helpers';
 
 export const useTimesheetStore = defineStore('timesheet', () => {
     const is_loading = ref<boolean>(false);
-    const current_pay_period = ref<PayPeriod>(default_pay_period);
-    const pay_period_overview_employees = ref<PayPeriodOverviewEmployee[]>([]);
-    const pay_period_overview_employee_approval_statuses = ref<{key: string, value: boolean}[] | undefined>();
+    const pay_period = ref<PayPeriod>(default_pay_period);
+    const pay_period_employee_overview_list = ref<PayPeriodEmployeeOverview[]>([]);
+    const pay_period_employee_overview = ref<PayPeriodEmployeeOverview>(default_pay_period_employee_overview);
     const pay_period_employee_details = ref<PayPeriodEmployeeDetails>(default_pay_period_employee_details);
     const pay_period_report = ref();
+    const timesheet = ref<Timesheet>(default_timesheet);
 
-    //employee timesheet
-    const current_timesheet = ref<Timesheet>(default_timesheet);
+    const getPayPeriodByDateOrYearAndNumber = (date_or_year: string | number, period_number?: number): Promise<boolean> => {
+        return withLoading( is_loading, async () => {
+            try {
+                let response;
 
-    const getPayPeriodByDate = async (date_string: string): Promise<boolean> => {
-        is_loading.value = true;
+                if (typeof date_or_year === 'string') {
+                    response = await timesheetApprovalService.getPayPeriodByDate(date_or_year);
+                    return true;
+                }
+                else if ( typeof date_or_year === 'number' && period_number ) {
+                    response = await timesheetApprovalService.getPayPeriodByYearAndPeriodNumber(date_or_year, period_number);
+                    return true;
+                }
+                else response = default_pay_period;
 
-        try {
-            const response = await timesheetApprovalService.getPayPeriodByDate(date_string);
-            current_pay_period.value = response;
-            is_loading.value = false;
+                pay_period.value = response;
+                return false;
+            } catch(error){
+                console.error('Could not get current pay period: ', error );
+                pay_period.value = default_pay_period;
+                pay_period_employee_overview_list.value = [];
+                //TODO: More in-depth error-handling here
+            }
 
-            return true;
-        } catch(error){
-            console.error('Could not get current pay period: ', error );
-            current_pay_period.value = default_pay_period;
-            pay_period_overview_employees.value = [];
-            //TODO: More in-depth error-handling here
-        }
-
-        is_loading.value = false;
-
-        return false;
+            return false;
+        });
     };
 
-    const getPayPeriodByYearAndPeriodNumber = async (year: number, period_number: number): Promise<boolean> => {
-        is_loading.value = true;
+    const getPayPeriodEmployeeOverviewListBySupervisorEmail = async (pay_year: number, period_number: number, supervisor_email: string): Promise<boolean> => {
+        return withLoading( is_loading, async () => {
+            try {
+                const response = await timesheetApprovalService.getPayPeriodEmployeeOverviewListBySupervisorEmail( pay_year,  period_number, supervisor_email );
+                pay_period_employee_overview_list.value = response.employees_overview;
+                return true;
+            } catch (error) {
+                console.error('There was an error retrieving Employee Pay Period overviews: ', error);
+                pay_period_employee_overview_list.value = [];
+                // TODO: More in-depth error-handling here
+            }
 
-        try {
-            const response = await timesheetApprovalService.getPayPeriodByYearAndPeriodNumber(year, period_number);
-            current_pay_period.value = response;
-            is_loading.value = false;
-
-            return true;
-        } catch(error){
-            console.error('Could not get current pay period: ', error );
-            current_pay_period.value = default_pay_period;
-            pay_period_overview_employees.value = [];
-            //TODO: More in-depth error-handling here
-        }
-
-        is_loading.value = false;
-
-        return false;
+            return false;
+        });
     };
 
-    const getTimesheetApprovalPayPeriodEmployeeOverviews = async (pay_year: number, period_number: number, supervisor_email: string) => {
-        is_loading.value = true;
-
-        try {
-            const response = await timesheetApprovalService.getPayPeriodEmployeeOverviews(
-                pay_year, 
-                period_number, 
-                supervisor_email
-            );
-            pay_period_overview_employees.value = response.employees_overview;
-            pay_period_overview_employee_approval_statuses.value = response.employees_overview.map( employee => ({ key: employee.email, value: employee.is_approved }) );
-        } catch (error) {
-            console.error('There was an error retrieving Employee Pay Period overviews: ', error);
-            pay_period_overview_employees.value = [];
-            // TODO: More in-depth error-handling here
+    const getPayPeriodOverviewByEmployeeEmail = (email: string): PayPeriodEmployeeOverview => {
+        const response = pay_period_employee_overview_list.value?.find( employee_overview => employee_overview.email === email);
+        if (typeof response === 'undefined') {
+            pay_period_employee_overview.value = default_pay_period_employee_overview;
+        } else {
+            pay_period_employee_overview.value = response;
         }
-
-        is_loading.value = false;
+        
+        return pay_period_employee_overview.value;
     };
 
     //employee timesheet
     const getTimesheetByEmail = async (employee_email: string) => {
-        is_loading.value = true;
-        try{
-            const response = await timesheetTempService.getTimesheetsByEmail(employee_email);
-            current_timesheet.value = response;
-        }catch (error) {
-            console.error('There was an error retrieving timesheet details for this employee: ', error);
-            current_timesheet.value = { ...default_timesheet }
-        } finally {
-            is_loading.value = false;
-        }
-    }
-    //employee timesheet
-    const createTimesheetShifts = async (employee_email: string, shifts: CreateShiftPayload[], offset = 0) => {
-        is_loading.value = true;
-        try{
-            const timesheet = await timesheetTempService.createTimesheetShifts(employee_email, shifts, offset);
-            current_timesheet.value = timesheet;
-        } catch (err) {
-            console.error('createTimesheetShifts error: ', err);
-        } finally {
-            is_loading.value = false;
-        }
+        return withLoading( is_loading, async () => {
+            try{
+                const response = await timesheetTempService.getTimesheetsByEmail(employee_email);
+                timesheet.value = response;
+
+                return true;
+            }catch (error) {
+                console.error('There was an error retrieving timesheet details for this employee: ', error);
+                timesheet.value = { ...default_timesheet }
+            }
+
+            return false;
+        });
     };
 
-    const getTimesheetsByPayPeriodAndEmail = async (employee_email: string) => {
-        is_loading.value = true;
+    //employee timesheet
+    const createTimesheetShifts = async (employee_email: string, shifts: CreateShiftPayload[], offset = 0) => {
+        return withLoading( is_loading, async () => {
+            try{
+                const response = await timesheetTempService.createTimesheetShifts(employee_email, shifts, offset);
+                timesheet.value = response;
 
-        try {
-            const response = await timesheetApprovalService.getTimesheetsByPayPeriodAndEmail(
-                current_pay_period.value.pay_year, 
-                current_pay_period.value.pay_period_no, 
-                employee_email
-            );
-            pay_period_employee_details.value = response;
-        } catch (error) {
-            console.error('There was an error retrieving timesheet details for this employee: ', error);
-            // TODO: More in-depth error-handling here
-        }
+                return true;
+            } catch (err) {
+                console.error('createTimesheetShifts error: ', err);
+            } 
 
-        is_loading.value = false;
+            return false;
+        });
+    };
+
+    const getPayPeriodEmployeeDetailsByEmployeeEmail = async (employee_email: string) => {
+        return withLoading( is_loading, async () => {
+            try {
+                const response = await timesheetApprovalService.getPayPeriodEmployeeDetailsByPayPeriodAndEmail(
+                    pay_period.value.pay_year, 
+                    pay_period.value.pay_period_no, 
+                    employee_email
+                );
+                pay_period_employee_details.value = response;
+
+                return true;
+            } catch (error) {
+                console.error('There was an error retrieving timesheet details for this employee: ', error);
+                // TODO: More in-depth error-handling here
+            }
+
+            pay_period_employee_details.value = default_pay_period_employee_details;
+            return false;
+        });
     };
 
     const getTimesheetApprovalCSVReport = async (report_filters?: PayPeriodReportFilters) => {
-        is_loading.value = true;
+        return withLoading( is_loading, async () => {
+            try {
+                const response = await timesheetApprovalService.getTimesheetApprovalCSVReport(
+                    pay_period.value.pay_year, 
+                    pay_period.value.pay_period_no, 
+                    report_filters
+                );
+                pay_period_report.value = response;
 
-        try {
-            const response = await timesheetApprovalService.getTimesheetApprovalCSVReport(
-                current_pay_period.value.pay_year, 
-                current_pay_period.value.pay_period_no, 
-                report_filters
-            );
-            pay_period_report.value = response;
-        } catch (error) {
-            console.error('There was an error retrieving the report CSV: ', error);
-            // TODO: More in-depth error-handling here
-        }
+                return true;
+            } catch (error) {
+                console.error('There was an error retrieving the report CSV: ', error);
+                // TODO: More in-depth error-handling here
+            }
 
-        is_loading.value = false;
+            return false;
+        });
     };
 
     return { 
-        current_pay_period, 
-        pay_period_overview_employees,
-        pay_period_overview_employee_approval_statuses,
+        pay_period, 
+        pay_period_employee_overview_list,
+        pay_period_employee_overview,
         pay_period_employee_details,
-        current_timesheet,
+        timesheet,
         is_loading,
-        getPayPeriodByDate,
+        getPayPeriodByDateOrYearAndNumber,
         getTimesheetByEmail,
         createTimesheetShifts,
-        getPayPeriodByYearAndPeriodNumber,
-        getTimesheetApprovalPayPeriodEmployeeOverviews,
-        getTimesheetsByPayPeriodAndEmail,
+        getPayPeriodEmployeeOverviewListBySupervisorEmail,
+        getPayPeriodOverviewByEmployeeEmail,
+        getPayPeriodEmployeeDetailsByEmployeeEmail,
         getTimesheetApprovalCSVReport,
     };
 });
\ No newline at end of file
diff --git a/src/utils/store-helpers.ts b/src/utils/store-helpers.ts
new file mode 100644
index 0000000..096b4e5
--- /dev/null
+++ b/src/utils/store-helpers.ts
@@ -0,0 +1,10 @@
+import type { Ref } from "vue";
+
+export const withLoading = async <T>( loading_state: Ref<boolean>, fn: () => Promise<T> ) => {
+    loading_state.value = true;
+    try {
+        return await fn();
+    } finally {
+        loading_state.value = false;
+    }
+};
\ No newline at end of file

From 655a7ecff128480f1d40bf9f0c38e48d14bdbc4e Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Fri, 26 Sep 2025 17:03:19 -0400
Subject: [PATCH 2/4] BREAKING(approvals): begin process of merging and DRYing
 timesheet with timesheet approvals, adjust imports, WIP - DO NOT MERGE

---
 .../components/pay-period-navigator.vue}      |  37 +++---
 ...vue => detailed-dialog-chart-expenses.vue} |  64 ++++-----
 ...=> detailed-dialog-chart-hours-worked.vue} |   0
 ... => detailed-dialog-chart-shift-types.vue} |   0
 .../detailed-dialog.vue}                      |  45 +++----
 .../components/detailed-shift-list-header.vue |  33 -----
 .../components/detailed-shift-list-row.vue    |  99 --------------
 .../components/detailed-shift-list.vue        |  82 ------------
 .../composables/use-timesheet-approval-api.ts |  14 +-
 .../detailed-dialog-shift-color.model.ts}     |   0
 .../timesheet-approval-csv-report.models.ts}  |   8 +-
 .../timesheet-approval-overview.models.ts}    |  26 +++-
 ...proval.vue => timesheet-approval-page.vue} |   8 +-
 .../types/pay-period-employee-details.ts      |  15 ---
 .../types/pay-period-overview.ts              |  11 --
 .../types/pay-period-report.ts                |  16 ---
 .../components/shift/shift-crud-dialog.vue    |   1 -
 ...-list-header.vue => shift-list-header.vue} |   0
 ...hifts-legend.vue => shift-list-legend.vue} |   0
 ...-shift-list-row.vue => shift-list-row.vue} |   0
 ...detailed-shift-list.vue => shift-list.vue} |   0
 .../expense-validation.interface.ts           |   0
 .../timesheets/models/expense.models.ts       |  78 +++++++++++
 src/modules/timesheets/models/shift.models.ts |  83 ++++++++++++
 .../timesheets/models/timesheet.models.ts     | 125 ++++++++++++++++++
 .../timesheets/{types => models}/ui.types.ts  |   0
 ...etails-overview.vue => timesheet-page.vue} |  16 +--
 ...sheet-services.ts => timesheet-service.ts} |   2 +-
 .../timesheets/types/expense.defaults.ts      |   0
 .../timesheets/types/expense.interfaces.ts    |  47 -------
 src/modules/timesheets/types/expense.types.ts |  29 ----
 .../timesheets/types/shift.defaults.ts        |  11 --
 .../timesheets/types/shift.interfaces.ts      |  44 ------
 src/modules/timesheets/types/shift.types.ts   |  30 -----
 .../timesheets/types/timesheet.defaults.ts    |  39 ------
 .../timesheets/types/timesheet.interfaces.ts  |  54 --------
 .../timesheets/types/timesheet.types.ts       |  29 ----
 src/stores/timesheet-store.ts                 |  67 ++++------
 38 files changed, 424 insertions(+), 689 deletions(-)
 rename src/modules/{timesheets/components/timesheet/timesheet-navigation.vue => shared/components/pay-period-navigator.vue} (74%)
 rename src/modules/timesheet-approval/components/{detailed-chart-expenses.vue => detailed-dialog-chart-expenses.vue} (51%)
 rename src/modules/timesheet-approval/components/{detailed-chart-hours-worked.vue => detailed-dialog-chart-hours-worked.vue} (100%)
 rename src/modules/timesheet-approval/components/{detailed-chart-shift-types.vue => detailed-dialog-chart-shift-types.vue} (100%)
 rename src/modules/timesheet-approval/{pages/timesheet-approval-detailed.vue => components/detailed-dialog.vue} (71%)
 delete mode 100644 src/modules/timesheet-approval/components/detailed-shift-list-header.vue
 delete mode 100644 src/modules/timesheet-approval/components/detailed-shift-list-row.vue
 delete mode 100644 src/modules/timesheet-approval/components/detailed-shift-list.vue
 rename src/modules/timesheet-approval/{types/detailed-shift-color.ts => models/detailed-dialog-shift-color.model.ts} (100%)
 rename src/modules/timesheet-approval/{types/pay-period-report-options.ts => models/timesheet-approval-csv-report.models.ts} (69%)
 rename src/modules/timesheet-approval/{types/pay-period-employee-overview.ts => models/timesheet-approval-overview.models.ts} (71%)
 rename src/modules/timesheet-approval/pages/{timesheet-approval.vue => timesheet-approval-page.vue} (84%)
 delete mode 100644 src/modules/timesheet-approval/types/pay-period-employee-details.ts
 delete mode 100644 src/modules/timesheet-approval/types/pay-period-overview.ts
 delete mode 100644 src/modules/timesheet-approval/types/pay-period-report.ts
 rename src/modules/timesheets/components/shift/{detailed-shift-list-header.vue => shift-list-header.vue} (100%)
 rename src/modules/timesheets/components/shift/{shifts-legend.vue => shift-list-legend.vue} (100%)
 rename src/modules/timesheets/components/shift/{detailed-shift-list-row.vue => shift-list-row.vue} (100%)
 rename src/modules/timesheets/components/shift/{detailed-shift-list.vue => shift-list.vue} (100%)
 rename src/modules/timesheets/{types => models}/expense-validation.interface.ts (100%)
 create mode 100644 src/modules/timesheets/models/expense.models.ts
 create mode 100644 src/modules/timesheets/models/shift.models.ts
 create mode 100644 src/modules/timesheets/models/timesheet.models.ts
 rename src/modules/timesheets/{types => models}/ui.types.ts (100%)
 rename src/modules/timesheets/pages/{timesheet-details-overview.vue => timesheet-page.vue} (92%)
 rename src/modules/timesheets/services/{timesheet-services.ts => timesheet-service.ts} (98%)
 delete mode 100644 src/modules/timesheets/types/expense.defaults.ts
 delete mode 100644 src/modules/timesheets/types/expense.interfaces.ts
 delete mode 100644 src/modules/timesheets/types/expense.types.ts
 delete mode 100644 src/modules/timesheets/types/shift.defaults.ts
 delete mode 100644 src/modules/timesheets/types/shift.interfaces.ts
 delete mode 100644 src/modules/timesheets/types/shift.types.ts
 delete mode 100644 src/modules/timesheets/types/timesheet.defaults.ts
 delete mode 100644 src/modules/timesheets/types/timesheet.interfaces.ts
 delete mode 100644 src/modules/timesheets/types/timesheet.types.ts

diff --git a/src/modules/timesheets/components/timesheet/timesheet-navigation.vue b/src/modules/shared/components/pay-period-navigator.vue
similarity index 74%
rename from src/modules/timesheets/components/timesheet/timesheet-navigation.vue
rename to src/modules/shared/components/pay-period-navigator.vue
index ada6b56..d440b8b 100644
--- a/src/modules/timesheets/components/timesheet/timesheet-navigation.vue
+++ b/src/modules/shared/components/pay-period-navigator.vue
@@ -1,27 +1,28 @@
 <script setup lang="ts">
-    /* eslint-disable */
-    import { ref } from 'vue';
+    import { computed, ref } from 'vue';
     import { date} from 'quasar';
-    import type { QDateDetails } from 'src/modules/shared/types/q-date-details';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+
+    const timesheet_store = useTimesheetStore();
 
     const is_showing_calendar_picker = ref(false);
     const calendar_date = ref(date.formatDate( Date.now(), 'YYYY-MM-DD' ));
-
-    const props = defineProps<{
-        isDisabled?: boolean;
-        isPreviousLimit:boolean;
-    }>();
     
     const emit = defineEmits<{
-        'date-selected': [value: string, reason?: string, details?: QDateDetails]
+        'date-selected': [ value: string ]
         'pressed-previous-button': []
         'pressed-next-button': []
     }>();
 
-    const onDateSelected = (value: string, reason: string, details: QDateDetails) => {
+    const is_previous_pay_period_limit = computed( ()=> 
+        timesheet_store.pay_period.pay_year === 2024 &&
+        timesheet_store.pay_period.pay_period_no <= 1
+    );
+
+    const onDateSelected = (value: string) => {
         calendar_date.value = value;
         is_showing_calendar_picker.value = false;
-        emit('date-selected', value, reason, details);
+        emit('date-selected', value);
     };
 </script>
 
@@ -33,39 +34,43 @@
             icon="keyboard_arrow_left"
             color="primary"
             @click="emit('pressed-previous-button')"
-            :disable="props.isPreviousLimit || props.isDisabled"
+            :disable="is_previous_pay_period_limit || timesheet_store.is_loading"
             class="q-mr-sm q-px-sm"
         >
             <q-tooltip 
                 anchor="top middle"
                 self="center middle"
                 class="bg-primary text-uppercase text-weight-bold"
-            > {{ $t( 'timesheet.nav_button.previous_week' )}}
+            > 
+                {{ $t( 'timesheet.nav_button.previous_week' )}}
             </q-tooltip>
         </q-btn>
+
         <!-- navigation through calendar date picker -->
         <q-btn 
             push rounded
             icon="calendar_month"
             color="primary"
             @click="is_showing_calendar_picker = true"
-            :disable="props.isDisabled"
+            :disable="timesheet_store.is_loading"
             class="q-px-lg"
         >
             <q-tooltip
                 anchor="top middle"
                 self="center middle"
                 class="bg-primary text-uppercase text-weight-bold"
-            >{{ $t('timesheet.nav_button.calendar_date_picker') }}
+            >
+                {{ $t('timesheet.nav_button.calendar_date_picker') }}
             </q-tooltip>
         </q-btn>
+
         <!-- navigation to next week -->
         <q-btn 
             push rounded
             icon="keyboard_arrow_right"
             color="primary"
             @click="emit('pressed-next-button')"
-            :disable="props.isDisabled"
+            :disable="timesheet_store.is_loading"
             class="q-ml-sm q-px-sm"
         >
             <q-tooltip
diff --git a/src/modules/timesheet-approval/components/detailed-chart-expenses.vue b/src/modules/timesheet-approval/components/detailed-dialog-chart-expenses.vue
similarity index 51%
rename from src/modules/timesheet-approval/components/detailed-chart-expenses.vue
rename to src/modules/timesheet-approval/components/detailed-dialog-chart-expenses.vue
index a0e0d99..18c1fe5 100644
--- a/src/modules/timesheet-approval/components/detailed-chart-expenses.vue
+++ b/src/modules/timesheet-approval/components/detailed-dialog-chart-expenses.vue
@@ -3,9 +3,9 @@
     import { Bar } from 'vue-chartjs';
     import { useI18n } from 'vue-i18n';
     import { useQuasar } from 'quasar';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale, type ChartData, type ChartDataset } from 'chart.js';
-    import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/pay-period-employee-details';
-    import type { Expense } from 'src/modules/timesheets/types/expense.interfaces';
+    import type { Expense } from 'src/modules/timesheets/models/expense.models';
 
     const { t } = useI18n();
     const $q = useQuasar();
@@ -15,44 +15,44 @@
     ChartJS.defaults.maintainAspectRatio = false;
     ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
 
-    const props = defineProps<{
-        rawData: PayPeriodEmployeeDetails | undefined;
+    defineProps<{
+        
     }>();
 
-    const expenses_dataset = ref<ChartDataset<'bar'>[]>([]);
-    const expenses_labels = ref<string[]>([]);
+    // const expenses_dataset = ref<ChartDataset<'bar'>[]>([]);
+    // const expenses_labels = ref<string[]>([]);
 
-    const getExpensesData = (): ChartData<'bar'> => {
-        if (props.rawData) {
-            const all_weeks = [props.rawData.week1, props.rawData.week2];
-            const all_days = all_weeks.flatMap( week => Object.values(week.expenses));
-            const all_days_dates = all_weeks.flatMap( week => Object.values(week.shifts))          
+    // const getExpensesData = (): ChartData<'bar'> => {
+    //     if (timesheetDetails) {
+    //         const all_weeks = [timesheetDetails.week1, timesheetDetails.week2];
+    //         const all_days = all_weeks.flatMap( week => Object.values(week.expenses));
+    //         const all_days_dates = all_weeks.flatMap( week => Object.values(week.shifts))          
 
-            const all_costs = all_days.map( day => getTotalAmounts(day.cash));
-            const all_mileage = all_days.map( day => getTotalAmounts(day.km));
+    //         const all_costs = all_days.map( day => getTotalAmounts(day.cash));
+    //         const all_mileage = all_days.map( day => getTotalAmounts(day.km));
             
             
-            expenses_dataset.value = [
-                {
-                    label: t('timesheet_approvals.table.expenses'),
-                    data: all_costs,
-                    backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
-                },
-                {
-                    label: t('timesheet_approvals.table.mileage'),
-                    data: all_mileage,
-                    backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
-                }
-            ]
+    //         expenses_dataset.value = [
+    //             {
+    //                 label: t('timesheet_approvals.table.expenses'),
+    //                 data: all_costs,
+    //                 backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
+    //             },
+    //             {
+    //                 label: t('timesheet_approvals.table.mileage'),
+    //                 data: all_mileage,
+    //                 backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
+    //             }
+    //         ]
 
-            expenses_labels.value = all_days_dates.map( day => day.short_date);
-        }
+    //         expenses_labels.value = all_days_dates.map( day => day.short_date);
+    //     }
 
-        return {
-            datasets: expenses_dataset.value,
-            labels: expenses_labels.value
-        };
-    };
+    //     return {
+    //         datasets: expenses_dataset.value,
+    //         labels: expenses_labels.value
+    //     };
+    // };
 
     const getTotalAmounts = (expenses: Expense[]): number => {
         let total_amount = 0;
diff --git a/src/modules/timesheet-approval/components/detailed-chart-hours-worked.vue b/src/modules/timesheet-approval/components/detailed-dialog-chart-hours-worked.vue
similarity index 100%
rename from src/modules/timesheet-approval/components/detailed-chart-hours-worked.vue
rename to src/modules/timesheet-approval/components/detailed-dialog-chart-hours-worked.vue
diff --git a/src/modules/timesheet-approval/components/detailed-chart-shift-types.vue b/src/modules/timesheet-approval/components/detailed-dialog-chart-shift-types.vue
similarity index 100%
rename from src/modules/timesheet-approval/components/detailed-chart-shift-types.vue
rename to src/modules/timesheet-approval/components/detailed-dialog-chart-shift-types.vue
diff --git a/src/modules/timesheet-approval/pages/timesheet-approval-detailed.vue b/src/modules/timesheet-approval/components/detailed-dialog.vue
similarity index 71%
rename from src/modules/timesheet-approval/pages/timesheet-approval-detailed.vue
rename to src/modules/timesheet-approval/components/detailed-dialog.vue
index b7f1f1b..5b547ea 100644
--- a/src/modules/timesheet-approval/pages/timesheet-approval-detailed.vue
+++ b/src/modules/timesheet-approval/components/detailed-dialog.vue
@@ -1,25 +1,23 @@
 <script setup lang="ts">
     import { ref } from 'vue';
-
-    import DetailedShiftList from 'src/modules/timesheet-approval/components/detailed-shift-list.vue';
-    import DetailedChartHoursWorked from 'src/modules/timesheet-approval/components/graphs/detailed-chart-hours-worked.vue';
-    import DetailedChartShiftTypes from 'src/modules/timesheet-approval/components/graphs/detailed-chart-shift-types.vue';
-    import DetailedChartExpenses from 'src/modules/timesheet-approval/components/graphs/detailed-chart-expenses.vue';
-    import type { PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';
-    import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/pay-period-employee-details';
-    import { shift_type_legend } from 'src/modules/timesheet-approval/types/detailed-shift-color';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    // import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import { shift_type_legend } from 'src/modules/timesheet-approval/models/detailed-dialog-shift-color.model';
+    import DetailedDialogChartHoursWorked from 'src/modules/timesheet-approval/components/graphs/detailed-chart-hours-worked.vue';
+    import DetailedDialogChartShiftTypes from 'src/modules/timesheet-approval/components/graphs/detailed-chart-shift-types.vue';
+    import DetailedDialogChartExpenses from 'src/modules/timesheet-approval/components/graphs/detailed-chart-expenses.vue';
+    import type { TimesheetApprovalOverviewCrewMember }   from 'src/modules/timesheet-approval/models/timesheet-approval-overview.models';
+    import type { TimesheetDetails } from 'src/modules/timesheets/models/timesheet.models';
 
     const dialog_model = defineModel<boolean>('dialog', { default: false });
 
     defineProps<{
         isLoading: boolean;
-        employeeOverview: PayPeriodEmployeeOverview;
-        employeeDetails: PayPeriodEmployeeDetails;
+        employeeOverview: TimesheetApprovalOverviewCrewMember;
+        timesheetDetails: TimesheetDetails;
     }>();
 
-    const timesheet_store = useTimesheetStore();
-    const is_showing_graph = ref<boolean>(true);
+    // const timesheet_store = useTimesheetStore();
+    const is_showing_graph = ref(true);
 </script>
 
 <template>
@@ -54,7 +52,7 @@
                 v-if="!isLoading"
                 class="text-h5 text-weight-bolder text-center text-primary q-pa-none text-uppercase col-auto"
             >
-                <span> {{ employeeDetails.employee_full_name }} </span>
+                <span> {{ timesheetDetails.employee_full_name }} </span>
 
                 <q-separator 
                     spaced 
@@ -62,7 +60,7 @@
                 />
                 
                 <q-card-actions 
-                    align="center" 
+                    align="center"
                     class="q-pa-none"
                 >
                     <q-btn-toggle 
@@ -78,7 +76,7 @@
                 </q-card-actions>
             </q-card-section>
 
-            <!-- employee timesheet details edit -->
+            <!-- employee timesheet for supervisor editting -->
             <q-card-section 
                 v-if="!is_showing_graph" 
                 class="q-pa-none"
@@ -101,10 +99,7 @@
                     :horizontal="$q.screen.gt.sm" 
                     class="q-pa-none bg-secondary rounded-10"
                 >
-                    <DetailedShiftList 
-                        :raw-data="employeeDetails"
-                        :current-pay-period="timesheet_store.pay_period" 
-                    />
+                    <!-- IMPORTANT: Timesheet shift list goes here!!! -->
                 </q-card-section>
             </q-card-section>
 
@@ -118,8 +113,8 @@
                     class="q-pa-none col no-wrap" 
                     style="min-height: 300px;"
                 >
-                    <DetailedChartHoursWorked 
-                        :raw-data="employeeDetails" 
+                    <DetailedDialogChartHoursWorked 
+                        :raw-data="timesheetDetails" 
                         class="col-7" 
                     />
 
@@ -129,7 +124,7 @@
                     />
 
                     <div class="column col justify-center no-wrap q-pa-none">
-                        <DetailedChartShiftTypes 
+                        <DetailedDialogChartShiftTypes 
                             :raw-data="employeeOverview" 
                             class="col-5" 
                         />
@@ -139,8 +134,8 @@
                             :vertical="!$q.screen.lt.md" 
                         />
 
-                        <DetailedChartExpenses 
-                            :raw-data="employeeDetails" 
+                        <DetailedDialogChartExpenses 
+                            :raw-data="timesheetDetails" 
                             class="col" 
                         />
                     </div>
diff --git a/src/modules/timesheet-approval/components/detailed-shift-list-header.vue b/src/modules/timesheet-approval/components/detailed-shift-list-header.vue
deleted file mode 100644
index eb36746..0000000
--- a/src/modules/timesheet-approval/components/detailed-shift-list-header.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-    <q-card-section
-        horizontal
-        class="text-uppercase text-center items-center q-pa-none"
-    >  
-        <!-- shift row itself -->
-        <q-card-section class="col q-pa-none">
-            <q-card-section horizontal class="col q-pa-none">
-                <!-- punch-in timestamps -->
-                <q-card-section class="col q-pa-none">
-                    <q-item-label class="text-weight-bolder text-primary" style="font-size: 0.7em;">
-                            {{ $t('shared.misc.in') }}
-                    </q-item-label>
-                </q-card-section>
-        
-                <!-- arrows pointing to punch-out timestamps -->
-                <q-card-section class="col q-py-none q-px-sm">
-                </q-card-section>
-        
-                <!-- punch-out timestamps -->
-                <q-card-section class="col q-pa-none">
-                    <q-item-label class="text-weight-bolder text-primary" style="font-size: 0.7em;">
-                        {{ $t('shared.misc.out') }}
-                    </q-item-label>
-                </q-card-section>
-
-                <!-- comment button -->
-                <q-card-section class="col column q-pa-none">
-                </q-card-section>
-            </q-card-section>
-        </q-card-section>
-    </q-card-section>
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/detailed-shift-list-row.vue b/src/modules/timesheet-approval/components/detailed-shift-list-row.vue
deleted file mode 100644
index 5d07553..0000000
--- a/src/modules/timesheet-approval/components/detailed-shift-list-row.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<script setup lang="ts">
-    import { ref } from 'vue';
-    import type { Shift } from 'src/modules/timesheets/types/shift.interfaces';
-
-
-    const props = defineProps<{
-        shift: Shift;
-    }>();
-
-    const is_showing_time_popup = ref<boolean>(false);
-    
-    const getShiftColor = (type: string): string => {
-        switch(type) {
-            case 'REGULAR':     return 'secondary';
-            case 'EVENING':     return 'warning';
-            case 'EMERGENCY':   return 'amber-10';
-            case 'OVERTIME':    return 'negative';
-            case 'VACATION':    return 'purple-10';
-            case 'HOLIDAY':     return 'purple-10';
-            case 'SICK':        return 'grey-8';
-            default :           return 'transparent';
-        }
-    };
-</script>
-
-<template>
-    <q-card-section 
-        horizontal
-        class="q-pa-none text-uppercase text-center items-center cursor-pointer rounded-10"
-        style="line-height: 1;"
-        @click="is_showing_time_popup = true"
-    >
-        <!-- punch-in timestamps -->
-        <q-card-section class="q-pa-none col">
-            <q-item-label 
-                class="text-weight-bolder q-pa-xs rounded-5"
-                :class="'bg-' + getShiftColor(props.shift.type) + (!$q.dark.isActive && props.shift.type === 'REGULAR' ? '' : ' text-white')"
-                style="font-size: 1.5em; line-height: 80% !important;"
-            >
-                {{ props.shift.start_time }}
-            </q-item-label>
-        </q-card-section>
-
-        <!-- arrows pointing to punch-out timestamps -->
-        <q-card-section
-            horizontal 
-            class="items-center justify-center q-mx-sm col"
-        >
-            <div 
-                v-for="icon_data, index in [
-                    { transform: 'transform: translateX(5px);', color: 'accent' }, 
-                    { transform: 'transform: translateX(-5px);', color: 'primary' }]"
-                :key="index"
-            > 
-                <q-icon
-                    v-if="props.shift.type"
-                    name="double_arrow"
-                    :color="icon_data.color"
-                    size="24px"
-                    :style="icon_data.transform"
-                />
-            </div>
-        </q-card-section>
-
-        <!-- punch-out timestamps -->
-        <q-card-section class="q-pa-none col">
-            <q-item-label 
-                class="text-weight-bolder q-pa-xs rounded-5"
-                :class="'bg-' + getShiftColor(props.shift.type) + (!$q.dark.isActive && props.shift.type === 'REGULAR' ? '' : ' text-white')"
-                style="font-size: 1.5em; line-height: 80% !important;"
-            >
-                {{ props.shift.end_time }}
-            </q-item-label>
-        </q-card-section>
-
-        <!-- comment and expenses buttons -->
-        <q-card-section
-            class="col q-pa-none text-right"
-        >
-            <!-- chat_bubble_outline or announcement -->
-            <q-btn
-                v-if="props.shift.type"
-                flat 
-                dense
-                icon="chat_bubble_outline"
-                class="q-pa-none"
-            />
-
-            <!-- insert_drive_file or request_quote -->
-            <q-btn
-                v-if="props.shift.type"
-                flat 
-                dense
-                icon="attach_money"        
-                class="q-pa-none q-mx-xs"
-            /> 
-        </q-card-section>
-    </q-card-section>
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/detailed-shift-list.vue b/src/modules/timesheet-approval/components/detailed-shift-list.vue
deleted file mode 100644
index c556ab4..0000000
--- a/src/modules/timesheet-approval/components/detailed-shift-list.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script setup lang="ts">
-    import DetailedShiftListRow from 'src/modules/timesheet-approval/components/detailed-shift-list-row.vue';
-    import DetailedShiftListHeader from 'src/modules/timesheet-approval/components/detailed-shift-list-header.vue';
-    import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
-    import type { Shift } from 'src/modules/timesheets/types/shift.interfaces';
-    import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/pay-period-employee-details';
-    import { default_shift } from 'src/modules/timesheets/types/shift.defaults';
-
-    const { rawData, currentPayPeriod } = defineProps<{
-        rawData: PayPeriodEmployeeDetails;
-        currentPayPeriod: PayPeriod;
-    }>();
-    
-    const weeks = [ rawData.week1, rawData.week2 ];
-
-    const shifts_or_placeholder = (shifts: Shift[]): Shift[] => {
-        return shifts.length > 0 ? shifts : [default_shift];
-    };
-    
-    const getDate = (shift_date: string): Date => {
-        return new Date(currentPayPeriod.pay_year.toString() + '/' + shift_date);
-    };
-</script>
-
-<template>
-    <div 
-        v-for="week, index in weeks"
-        :key="index"
-        class="q-px-xs q-pt-xs rounded-5 col"
-    >
-        <q-card
-            v-for="day, day_index in week.shifts"
-            :key="day_index"
-            flat
-            bordered
-            class="row items-center rounded-10 q-mb-xs"
-        >
-            <q-card-section class="col-auto q-pa-xs text-white">
-                <div 
-                    class="bg-primary rounded-10 q-pa-xs text-center" 
-                    :style="$q.screen.lt.md ? '' : 'width: 75px;'"
-                >
-                    <q-item-label 
-                        style="font-size: 0.7em;"
-                        class="text-uppercase"
-                    >
-                        {{ $d(getDate(day.short_date), {weekday: $q.screen.lt.md ? 'short' : 'long'}) }}
-                    </q-item-label>
-                    <q-item-label 
-                        class="text-weight-bolder"
-                        style="font-size: 2.5em; line-height: 90% !important;"
-                    >
-                        {{ day.short_date.split('/')[1] }}
-                    </q-item-label>
-                    <q-item-label 
-                        style="font-size: 0.7em;"
-                        class="text-uppercase"
-                    >
-                        {{ $d(getDate(day.short_date), {month: $q.screen.lt.md ? 'short' : 'long'}) }}
-                    </q-item-label>
-                </div>
-            </q-card-section>
-
-            <q-card-section class="col q-pa-none">
-                <DetailedShiftListHeader />
-                <DetailedShiftListRow
-                    v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
-                    :key="shift_index" 
-                    :shift="shift"
-                />
-            </q-card-section>
-            <q-card-section class="q-pr-xs col-auto">
-                <q-btn
-                    push
-                    color="primary"
-                    icon="more_time"
-                    class="q-pa-sm"
-                />
-            </q-card-section>
-        </q-card>
-    </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 9526fde..a512a93 100644
--- a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
+++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
@@ -1,7 +1,6 @@
 import { useTimesheetStore } from "src/stores/timesheet-store";
 import { useAuthStore } from "src/stores/auth-store";
-import type { PayPeriodReportFilters } from "src/modules/timesheet-approval/types/pay-period-report";
-import { default_pay_period_employee_overview, type PayPeriodEmployeeOverview } from "src/modules/timesheet-approval/types/pay-period-employee-overview";
+import type { TimesheetApprovalCSVReportFilters } from "src/modules/timesheet-approval/models/timesheet-approval-csv-report.models";
 import { date } from "quasar";
 
 export const useTimesheetApprovalApi = () => {
@@ -20,10 +19,6 @@ export const useTimesheetApprovalApi = () => {
         }
     };
 
-    const getPayPeriodOverviewByEmployeeEmail = (email: string): void => {
-        const employee_overview = timesheet_store.getPayPeriodOverviewByEmployeeEmail(email);
-    };
-
     /* This method attempts to get the next or previous pay period. 
         It checks if pay period number is within a certain range, adjusts pay period and year accordingly.
         It then requests the matching pay period object to set as current pay period from server.
@@ -56,9 +51,9 @@ export const useTimesheetApprovalApi = () => {
         const [ targo, solucom ] = report_filter_company;
         const [ shifts, expenses, holiday, vacation ] = report_filter_type;
         const options = {
-            company: { targo, solucom },
-            types: { shifts, expenses, holiday, vacation }
-        } as PayPeriodReportFilters;
+            types: { shifts, expenses, holiday, vacation },
+            companies: { targo, solucom },
+        } as TimesheetApprovalCSVReportFilters;
         
         await timesheet_store.getTimesheetApprovalCSVReport(options);
     };
@@ -66,7 +61,6 @@ export const useTimesheetApprovalApi = () => {
     return {
         getPayPeriodOverviewByDate,
         getNextOrPreviousPayPeriodOverviewList,
-        getPayPeriodOverviewByEmployeeEmail,
         getTimesheetApprovalCSVReport,
     }
 };
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/types/detailed-shift-color.ts b/src/modules/timesheet-approval/models/detailed-dialog-shift-color.model.ts
similarity index 100%
rename from src/modules/timesheet-approval/types/detailed-shift-color.ts
rename to src/modules/timesheet-approval/models/detailed-dialog-shift-color.model.ts
diff --git a/src/modules/timesheet-approval/types/pay-period-report-options.ts b/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
similarity index 69%
rename from src/modules/timesheet-approval/types/pay-period-report-options.ts
rename to src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
index 2014305..d5e8381 100644
--- a/src/modules/timesheet-approval/types/pay-period-report-options.ts
+++ b/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
@@ -1,4 +1,4 @@
-export interface PayPeriodReportFilters {
+export interface TimesheetApprovalCSVReportFilters {
     types: {
         shifts: boolean;
         expenses: boolean;
@@ -9,9 +9,9 @@ export interface PayPeriodReportFilters {
         targo: boolean;
         solucom: boolean;
     };
-};
+}
 
-export const default_pay_period_report_filters: PayPeriodReportFilters = {
+export const default_pay_period_report_filters: TimesheetApprovalCSVReportFilters = {
     types: {
         shifts: true,
         expenses: true,
@@ -22,4 +22,4 @@ export const default_pay_period_report_filters: PayPeriodReportFilters = {
         targo: true,
         solucom: true,
     },
-};
+};
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/types/pay-period-employee-overview.ts b/src/modules/timesheet-approval/models/timesheet-approval-overview.models.ts
similarity index 71%
rename from src/modules/timesheet-approval/types/pay-period-employee-overview.ts
rename to src/modules/timesheet-approval/models/timesheet-approval-overview.models.ts
index 98cf34e..85b46e8 100644
--- a/src/modules/timesheet-approval/types/pay-period-employee-overview.ts
+++ b/src/modules/timesheet-approval/models/timesheet-approval-overview.models.ts
@@ -1,4 +1,14 @@
-export interface PayPeriodEmployeeOverview {
+export interface TimesheetApprovalOverviewCrew {
+    pay_period_no: number;
+    pay_year: number;
+    payday: string;
+    period_start: string;
+    period_end: string;
+    label: string;
+    overview_crew: TimesheetApprovalOverviewCrewMember[];
+};
+
+export interface TimesheetApprovalOverviewCrewMember {
     email: string;
     employee_name: string;
     regular_hours: number;
@@ -11,7 +21,7 @@ export interface PayPeriodEmployeeOverview {
     is_approved: boolean;
 };
 
-export const default_pay_period_employee_overview: PayPeriodEmployeeOverview = {
+export const default_timesheet_approval_overview_crew_member: TimesheetApprovalOverviewCrewMember = {
     email: '',
     employee_name: '',
     regular_hours: -1,
@@ -24,7 +34,17 @@ export const default_pay_period_employee_overview: PayPeriodEmployeeOverview = {
     is_approved: false
 }
 
-export const pay_period_employee_overview_columns = [
+export const default_timesheet_approval_overview_crew: TimesheetApprovalOverviewCrew = {
+    pay_period_no: -1,
+    pay_year: -1,
+    payday: '',
+    period_start: '',
+    period_end: '',
+    label: '',
+    overview_crew: []
+}
+
+export const timesheet_approval_overview_crew_columns = [
         { 
             name: 'employee_name', 
             label: 'timesheet_approvals.table.full_name', 
diff --git a/src/modules/timesheet-approval/pages/timesheet-approval.vue b/src/modules/timesheet-approval/pages/timesheet-approval-page.vue
similarity index 84%
rename from src/modules/timesheet-approval/pages/timesheet-approval.vue
rename to src/modules/timesheet-approval/pages/timesheet-approval-page.vue
index 71be5fe..636811d 100644
--- a/src/modules/timesheet-approval/pages/timesheet-approval.vue
+++ b/src/modules/timesheet-approval/pages/timesheet-approval-page.vue
@@ -3,9 +3,9 @@
     import { date } from 'quasar';
     import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import EmployeeOverviewList from 'src/modules/timesheet-approval/components/employee-overview/overview-list.vue';
-    import TimesheetApprovalDetailed from 'src/modules/timesheet-approval/pages/timesheet-approval-detailed.vue';
     import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
+    import EmployeeOverviewList from 'src/modules/timesheet-approval/components/employee-overview/overview-list.vue';
+    import DetailedDialog from 'src/modules/timesheet-approval/components/detailed-dialog.vue';
 
     const timesheet_approval_api = useTimesheetApprovalApi();
     const timesheet_store = useTimesheetStore();
@@ -26,10 +26,10 @@
             :end-date="timesheet_store.pay_period.period_end"
         />
         
-        <TimesheetApprovalDetailed
+        <DetailedDialog
             :is-loading="timesheet_store.is_loading"
             :employee-overview="timesheet_store.pay_period_employee_overview"
-            :employee-details="timesheet_store.pay_period_employee_details"
+            :timesheet-details="timesheet_store.pay_period_employee_details"
         />
 
         <EmployeeOverviewList />
diff --git a/src/modules/timesheet-approval/types/pay-period-employee-details.ts b/src/modules/timesheet-approval/types/pay-period-employee-details.ts
deleted file mode 100644
index d9170ee..0000000
--- a/src/modules/timesheet-approval/types/pay-period-employee-details.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { defaultTimesheetDetailsWeek } from "src/modules/timesheets/types/timesheet.defaults";
-import type { TimesheetDetailsWeek } from "src/modules/timesheets/types/timesheet.interfaces";
-
-
-export interface PayPeriodEmployeeDetails {
-    week1: TimesheetDetailsWeek;
-    week2: TimesheetDetailsWeek;
-    employee_full_name: string;
-};
-
-export const default_pay_period_employee_details = {
-    week1: defaultTimesheetDetailsWeek(),
-    week2: defaultTimesheetDetailsWeek(),
-    employee_full_name: "",
-}
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/types/pay-period-overview.ts b/src/modules/timesheet-approval/types/pay-period-overview.ts
deleted file mode 100644
index cf3c198..0000000
--- a/src/modules/timesheet-approval/types/pay-period-overview.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { PayPeriodEmployeeOverview } from "./pay-period-employee-overview";
-
-export interface PayPeriodOverview {
-    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/modules/timesheet-approval/types/pay-period-report.ts b/src/modules/timesheet-approval/types/pay-period-report.ts
deleted file mode 100644
index b29579b..0000000
--- a/src/modules/timesheet-approval/types/pay-period-report.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// export interface PayPeriodReport {
-
-// }
-
-export interface PayPeriodReportFilters {
-    company: {
-        targo: boolean;
-        solucom: boolean;
-    };
-    types: {
-        shifts: boolean;
-        expenses: boolean;
-        holiday: boolean;
-        vacation: boolean;
-    };  
-}
\ No newline at end of file
diff --git a/src/modules/timesheets/components/shift/shift-crud-dialog.vue b/src/modules/timesheets/components/shift/shift-crud-dialog.vue
index 24dbce4..efb02e9 100644
--- a/src/modules/timesheets/components/shift/shift-crud-dialog.vue
+++ b/src/modules/timesheets/components/shift/shift-crud-dialog.vue
@@ -5,7 +5,6 @@ import { useI18n } from 'vue-i18n';
 import { SHIFT_KEY, type ShiftKey, type ShiftPayload, type ShiftSelectOption } from '../../types/shift.types';
 import type { UpsertShiftsBody }   from '../../types/shift.interfaces';
 import { upsertShiftsByDate } from '../../composables/api/use-shift-api';
- /* eslint-disable */
 
 const { t } = useI18n();
 
diff --git a/src/modules/timesheets/components/shift/detailed-shift-list-header.vue b/src/modules/timesheets/components/shift/shift-list-header.vue
similarity index 100%
rename from src/modules/timesheets/components/shift/detailed-shift-list-header.vue
rename to src/modules/timesheets/components/shift/shift-list-header.vue
diff --git a/src/modules/timesheets/components/shift/shifts-legend.vue b/src/modules/timesheets/components/shift/shift-list-legend.vue
similarity index 100%
rename from src/modules/timesheets/components/shift/shifts-legend.vue
rename to src/modules/timesheets/components/shift/shift-list-legend.vue
diff --git a/src/modules/timesheets/components/shift/detailed-shift-list-row.vue b/src/modules/timesheets/components/shift/shift-list-row.vue
similarity index 100%
rename from src/modules/timesheets/components/shift/detailed-shift-list-row.vue
rename to src/modules/timesheets/components/shift/shift-list-row.vue
diff --git a/src/modules/timesheets/components/shift/detailed-shift-list.vue b/src/modules/timesheets/components/shift/shift-list.vue
similarity index 100%
rename from src/modules/timesheets/components/shift/detailed-shift-list.vue
rename to src/modules/timesheets/components/shift/shift-list.vue
diff --git a/src/modules/timesheets/types/expense-validation.interface.ts b/src/modules/timesheets/models/expense-validation.interface.ts
similarity index 100%
rename from src/modules/timesheets/types/expense-validation.interface.ts
rename to src/modules/timesheets/models/expense-validation.interface.ts
diff --git a/src/modules/timesheets/models/expense.models.ts b/src/modules/timesheets/models/expense.models.ts
new file mode 100644
index 0000000..2f4d855
--- /dev/null
+++ b/src/modules/timesheets/models/expense.models.ts
@@ -0,0 +1,78 @@
+// export const EXPENSE_TYPE = [
+//     'PER_DIEM',
+//     'MILEAGE',
+//     'EXPENSES',
+//     'PRIME_GARDE',
+// ] as const;
+
+// export type ExpenseType = (typeof EXPENSE_TYPE)[number];
+
+// export const TYPES_WITH_MILEAGE_ONLY: Readonly<ExpenseType[]> = ['MILEAGE'];
+
+// export const TYPES_WITH_AMOUNT_ONLY:  Readonly<ExpenseType[]> = [
+//     'PER_DIEM',
+//     'EXPENSES',
+//     'PRIME_GARDE',
+// ];
+
+export type ExpenseType = 'PER_DIEM' | 'MILEAGE' | 'EXPENSES' | 'PRIME_GARDE';
+
+export type ExpenseTotals = { 
+    amount:  number;
+    mileage: number;
+};
+
+// export type ExpenseSavePayload = {
+//     pay_period_no: number;
+//     pay_year:      number;
+//     email:         string;
+//     expenses:      TimesheetExpense[];
+// };
+
+export interface Expense {
+//     is_approved:        boolean;
+//     comment:            string;
+//     amount:             number;
+//     supervisor_comment: string;
+// }
+
+// export interface TimesheetExpense {
+    date:                string;
+    type:                string;
+    amount?:             number;
+    mileage?:            number;
+    comment?:            string;
+    supervisor_comment?: string;
+    is_approved?:        boolean;
+}
+
+// export interface PayPeriodExpenses {
+export interface TimesheetExpenses {
+    pay_period_no:  number;
+    pay_year:       number;
+    employee_email: string;
+    is_approved:    boolean;
+    // expenses:       TimesheetExpense[];
+    expenses: Expense[];
+    totals?: {
+        amount:              number;
+        mileage:             number;
+        reimbursable_total?: number;
+    }
+}
+
+// export interface ExpensePayload{
+//     date:     string;
+//     type:     ExpenseType;
+//     amount?:  number;
+//     mileage?: number;
+//     comment:  string;
+// }
+
+// export interface UpsertExpensesBody {
+//     expenses: ExpensePayload[];
+// }
+
+// export interface UpsertExpensesResponse {
+//     data: PayPeriodExpenses;
+// }
\ No newline at end of file
diff --git a/src/modules/timesheets/models/shift.models.ts b/src/modules/timesheets/models/shift.models.ts
new file mode 100644
index 0000000..f105851
--- /dev/null
+++ b/src/modules/timesheets/models/shift.models.ts
@@ -0,0 +1,83 @@
+// export const SHIFT_KEY = [
+//     'REGULAR', 
+//     'EVENING', 
+//     'EMERGENCY', 
+//     'HOLIDAY', 
+//     'VACATION', 
+//     'SICK'
+// ] as const;
+
+// export type ShiftKey = typeof SHIFT_KEY[number];
+
+// export type ShiftSelectOption = { value: ShiftKey; label: string };
+
+// export type ShiftPayload = {
+//     start_time: string;
+//     end_time:   string;
+//     type:       ShiftKey;
+//     is_remote:  boolean;
+//     comment?:   string;
+// }
+
+export type ShiftKey = 'REGULAR' | 'EVENING' | 'EMERGENCY' | 'HOLIDAY' | 'VACATION' | 'SICK';
+
+export type UpsertAction = 'created' | 'updated' | 'deleted';
+
+export type ShiftLegendItem = {
+    type:        ShiftKey;
+    color:       string;
+    label_key:   string;
+    text_color?: string;
+};
+
+export interface Shift {
+    date:        string;
+    type:        ShiftKey;
+    start_time:  string;
+    end_time:    string;
+    comment:     string;
+    is_approved: boolean;
+    is_remote:   boolean;
+}
+
+export interface UpsertShiftsResponse {
+    action: UpsertAction;
+    // day:    DayShift[];
+    day:    Shift[];
+}
+
+// export interface CreateShiftPayload {
+//     date:       string;
+//     type:       ShiftKey;
+//     start_time: string;
+//     end_time:   string;
+//     comment?:   string;
+//     is_remote?: boolean;
+// }
+
+// export interface CreateWeekShiftPayload {
+//     shifts: CreateShiftPayload[];
+// }
+
+// export interface UpsertShiftsBody {
+//     old_shift?: ShiftPayload;
+//     new_shift?: ShiftPayload;
+// }
+
+// export interface DayShift {
+//     start_time: string;
+//     end_time:   string;
+//     type:       string;
+//     is_remote:  boolean;
+//     comment?:   string | null;
+// }
+
+export const default_shift: Readonly<Shift> = {
+    date: '',
+    start_time: '--:--',
+    end_time: '--:--',
+    type:'REGULAR',
+    comment: '',
+    is_approved: false,
+    is_remote: false,
+};
\ No newline at end of file
diff --git a/src/modules/timesheets/models/timesheet.models.ts b/src/modules/timesheets/models/timesheet.models.ts
new file mode 100644
index 0000000..4735cad
--- /dev/null
+++ b/src/modules/timesheets/models/timesheet.models.ts
@@ -0,0 +1,125 @@
+import type { Shift } from "./shift.models";
+import type { Expense } from "src/modules/timesheets/models/expense.models";
+// import type { 
+    // TimesheetExpenseEntry, 
+    // TimesheetShiftEntry, 
+//     Week 
+// } from "./timesheet.types";
+
+// export interface Timesheet {
+//     is_approved: boolean;
+//     start_day:   string;
+//     end_day:     string;
+//     label:       string;
+//     shifts:      TimesheetShiftEntry[];
+//     expenses:    TimesheetExpenseEntry[];
+// }
+
+// export type TimesheetShiftEntry = {
+//     bank_type:   string;
+//     date:        string;
+//     start_time:  string;
+//     end_time:    string;
+//     comment:     string;
+//     is_approved: boolean;
+//     is_remote:   boolean;
+// };
+
+// export type TimesheetExpenseEntry = {
+//     bank_type:   string;
+//     date:        string;
+//     amount:      number;
+//     km:          number;
+//     comment:     string;
+//     is_approved: boolean;
+//     supervisor_comment: string;
+// };
+
+export type Week<T> = {
+    sun: T;
+    mon: T;
+    tue: T;
+    wed: T;
+    thu: T;
+    fri: T;
+    sat: T;
+};
+
+export interface TimesheetDetails {
+    week1: TimesheetDetailsWeek;
+    week2: TimesheetDetailsWeek;
+    employee_full_name: string;
+}
+
+export interface TimesheetDetailsWeek {
+    is_approved: boolean;
+    shifts:   Week<TimesheetDetailsWeekDayShifts>
+    expenses: Week<TimesheetDetailsWeekDayExpenses>;
+}
+
+export interface TimesheetDetailsWeekDayShifts {
+    shifts:          Shift[];
+    regular_hours:   number;
+    evening_hours:   number;
+    emergency_hours: number;
+    overtime_hours:  number;
+    total_hours:     number;
+    short_date:      string;
+    break_duration?: number;
+}
+
+export interface TimesheetDetailsWeekDayExpenses {
+    cash: Expense[];
+    km:   Expense[];
+    [otherType: string]: Expense[];
+}
+
+// export interface DailyExpense {
+//     is_approved: boolean;
+//     comment:     string;
+//     amount:      number;
+//     supervisor_comment: string;
+// }
+
+// export interface TimesheetPayPeriodDetailsOverview {
+//     week1: TimesheetDetailsWeek;
+//     week2: TimesheetDetailsWeek;
+// }
+
+const makeWeek = <T>(factory: ()=> T): Week<T> => ({
+    sun: factory(),
+    mon: factory(),
+    tue: factory(),
+    wed: factory(),
+    thu: factory(),
+    fri: factory(),
+    sat: factory(),
+});
+
+const emptyDailySchedule = (): TimesheetDetailsWeekDayShifts => ({
+    shifts: [],
+    regular_hours: 0,
+    evening_hours: 0,
+    emergency_hours: 0,
+    overtime_hours: 0,
+    total_hours: 0,
+    short_date: "",
+    break_duration: 0,
+});
+
+const emptyDailyExpenses = (): TimesheetDetailsWeekDayExpenses => ({
+    cash: [],
+    km: [],
+});
+
+export const defaultTimesheetDetailsWeek = (): TimesheetDetailsWeek => ({
+    is_approved: false,
+    shifts: makeWeek(emptyDailySchedule),
+    expenses: makeWeek(emptyDailyExpenses),
+});
+
+export const default_timesheet_details: TimesheetDetails = {
+    week1: defaultTimesheetDetailsWeek(),
+    week2: defaultTimesheetDetailsWeek(),
+    employee_full_name: "",
+}
\ No newline at end of file
diff --git a/src/modules/timesheets/types/ui.types.ts b/src/modules/timesheets/models/ui.types.ts
similarity index 100%
rename from src/modules/timesheets/types/ui.types.ts
rename to src/modules/timesheets/models/ui.types.ts
diff --git a/src/modules/timesheets/pages/timesheet-details-overview.vue b/src/modules/timesheets/pages/timesheet-page.vue
similarity index 92%
rename from src/modules/timesheets/pages/timesheet-details-overview.vue
rename to src/modules/timesheets/pages/timesheet-page.vue
index 6f51407..0fedde9 100644
--- a/src/modules/timesheets/pages/timesheet-details-overview.vue
+++ b/src/modules/timesheets/pages/timesheet-page.vue
@@ -13,9 +13,9 @@ import   TimesheetNavigation      from '../components/timesheet/timesheet-naviga
 import   ShiftsLegend             from '../components/shift/shifts-legend.vue';
 import   ShiftCrudDialog          from '../components/shift/shift-crud-dialog.vue';
 import   TimesheetDetailsExpenses from '../components/expenses/timesheet-details-expenses.vue';
-import { SHIFT_KEY }              from '../types/shift.types';
+import   DetailedShiftList        from '../components/shift/detailed-shift-list.vue';
+import type { ShiftKey }          from '../models/shift.models';
 import type { TimesheetExpense }  from '../types/expense.interfaces';
-import DetailedShiftList from '../components/shift/detailed-shift-list.vue';
 /* eslint-disable */
 
 //------------------- stores ------------------- 
@@ -29,14 +29,13 @@ const timesheet_api   = useTimesheetApi();
 //------------------- expenses -------------------
 const openExpensesDialog = () => expenses_store.openDialog({
     email:         auth_store.user.email,
-    pay_year:      timesheet_store.current_pay_period.pay_year,
-    pay_period_no: timesheet_store.current_pay_period.pay_period_no,
+    pay_year:      timesheet_store.pay_period.pay_year,
+    pay_period_no: timesheet_store.pay_period.pay_period_no,
     t,
 });
 
 const onSaveExpenses = async ( payload: { email: string; pay_year: number; pay_period_no: number; expenses: TimesheetExpense[] }) => {
     await expenses_store.saveExpenses({...payload, t});
-    await timesheet_store.refreshCurrentPeriodForUser(auth_store.user.email);
 };
 
 const onCloseExpenses = () => expenses_store.closeDialog();
@@ -45,7 +44,7 @@ const onCloseExpenses = () => expenses_store.closeDialog();
 const date_options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year:  'numeric' };
 
 const pay_period_label = computed(() => formatPayPeriodLabel(
-        timesheet_store.current_pay_period?.label,
+        timesheet_store.pay_period.label,
         locale.value,
         date.extractDate,
         date_options
@@ -55,11 +54,6 @@ const pay_period_label = computed(() => formatPayPeriodLabel(
 //------------------- q-select Shift options -------------------
 const shift_options = computed(() => buildShiftOptions(SHIFT_KEY, t));
 
-//------------------- navigation by date -------------------
-const onDateSelected = async (date_string: string) => {
-    await timesheet_store.loadByIsoDate(date_string, auth_store.user.email);
-};
-
 onMounted(async () => {
     await timesheet_store.loadToday(auth_store.user.email);
 });
diff --git a/src/modules/timesheets/services/timesheet-services.ts b/src/modules/timesheets/services/timesheet-service.ts
similarity index 98%
rename from src/modules/timesheets/services/timesheet-services.ts
rename to src/modules/timesheets/services/timesheet-service.ts
index c5477c7..a288505 100644
--- a/src/modules/timesheets/services/timesheet-services.ts
+++ b/src/modules/timesheets/services/timesheet-service.ts
@@ -6,7 +6,7 @@ import type { PayPeriodReportFilters } from "src/modules/timesheet-approval/type
 import type { Timesheet } from "../types/timesheet.interfaces";
 import type { CreateShiftPayload, CreateWeekShiftPayload } from "../types/shift.interfaces";
 
-export const timesheetTempService = {
+export const timesheetService = {
     //GET
     getTimesheetsByEmail: async ( email: string, offset = 0): Promise<Timesheet> => {
         const response = await api.get(`/timesheets/${encodeURIComponent(email)}`, {params: offset ? { offset } : undefined});
diff --git a/src/modules/timesheets/types/expense.defaults.ts b/src/modules/timesheets/types/expense.defaults.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/modules/timesheets/types/expense.interfaces.ts b/src/modules/timesheets/types/expense.interfaces.ts
deleted file mode 100644
index b4549f6..0000000
--- a/src/modules/timesheets/types/expense.interfaces.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import type { ExpenseType } from "./expense.types";
-
-export interface Expense {
-    is_approved:        boolean;
-    comment:            string;
-    amount:             number;
-    supervisor_comment: string;
-}
-
-export interface TimesheetExpense {
-    date:                string;
-    type:                string;
-    amount?:             number;
-    mileage?:            number;
-    comment?:            string;
-    supervisor_comment?: string;
-    is_approved?:        boolean;
-}
-
-export interface PayPeriodExpenses {
-    pay_period_no:  number;
-    pay_year:       number;
-    employee_email: string;
-    is_approved:    boolean;
-    expenses:       TimesheetExpense[];
-    totals: {
-        amount:              number;
-        mileage:             number;
-        reimbursable_total?: number;
-    }
-}
-
-export interface ExpensePayload{
-    date:     string;
-    type:     ExpenseType;
-    amount?:  number;
-    mileage?: number;
-    comment:  string;
-}
-
-export interface UpsertExpensesBody {
-    expenses: ExpensePayload[];
-}
-
-export interface UpsertExpensesResponse {
-    data: PayPeriodExpenses;
-}
\ No newline at end of file
diff --git a/src/modules/timesheets/types/expense.types.ts b/src/modules/timesheets/types/expense.types.ts
deleted file mode 100644
index 4d3b7eb..0000000
--- a/src/modules/timesheets/types/expense.types.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { TimesheetExpense } from "./expense.interfaces";
-
-export const EXPENSE_TYPE = [
-    'PER_DIEM',
-    'MILEAGE',
-    'EXPENSES',
-    'PRIME_GARDE',
-] as const;
-
-export type ExpenseType = (typeof EXPENSE_TYPE)[number];
-
-export const TYPES_WITH_MILEAGE_ONLY: Readonly<ExpenseType[]> = ['MILEAGE'];
-export const TYPES_WITH_AMOUNT_ONLY:  Readonly<ExpenseType[]> = [
-    'PER_DIEM',
-    'EXPENSES',
-    'PRIME_GARDE',
-];
-
-export type ExpenseTotals = { 
-    amount:  number;
-    mileage: number;
-};
-
-export type ExpenseSavePayload = {
-    pay_period_no: number;
-    pay_year:      number;
-    email:         string;
-    expenses:      TimesheetExpense[];
-};
\ No newline at end of file
diff --git a/src/modules/timesheets/types/shift.defaults.ts b/src/modules/timesheets/types/shift.defaults.ts
deleted file mode 100644
index d95fbaa..0000000
--- a/src/modules/timesheets/types/shift.defaults.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { Shift } from "./shift.interfaces";
-
-export const default_shift: Readonly<Shift> = {
-    date: '',
-    start_time: '--:--',
-    end_time: '--:--',
-    type:'REGULAR',
-    comment: '',
-    is_approved: false,
-    is_remote: false,
-};
\ No newline at end of file
diff --git a/src/modules/timesheets/types/shift.interfaces.ts b/src/modules/timesheets/types/shift.interfaces.ts
deleted file mode 100644
index 055a4b4..0000000
--- a/src/modules/timesheets/types/shift.interfaces.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { ShiftKey, ShiftPayload, UpsertAction } from "./shift.types";
-
-export interface Shift {
-    date:        string;
-    type:        ShiftKey;
-    start_time:  string;
-    end_time:    string;
-    comment:     string;
-    is_approved: boolean;
-    is_remote:   boolean;
-}
-
-export interface CreateShiftPayload {
-    date:       string;
-    type:       ShiftKey;
-    start_time: string;
-    end_time:   string;
-    comment?:   string;
-    is_remote?: boolean;
-}
-
-export interface CreateWeekShiftPayload {
-    shifts: CreateShiftPayload[];
-}
-
-export interface UpsertShiftsBody {
-    old_shift?: ShiftPayload;
-    new_shift?: ShiftPayload;
-}
-
-export interface DayShift {
-    start_time: string;
-    end_time:   string;
-    type:       string;
-    is_remote:  boolean;
-    comment?:   string | null;
-}
-
-export interface UpsertShiftsResponse {
-    action: UpsertAction;
-    day:    DayShift[];
-}
-
-
diff --git a/src/modules/timesheets/types/shift.types.ts b/src/modules/timesheets/types/shift.types.ts
deleted file mode 100644
index db42291..0000000
--- a/src/modules/timesheets/types/shift.types.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export const SHIFT_KEY = [
-    'REGULAR', 
-    'EVENING', 
-    'EMERGENCY', 
-    'HOLIDAY', 
-    'VACATION', 
-    'SICK'
-] as const;
-
-export type ShiftKey = typeof SHIFT_KEY[number];
-
-export type ShiftSelectOption = { value: ShiftKey; label: string };
-
-export type ShiftPayload = {
-    start_time: string;
-    end_time:   string;
-    type:       ShiftKey;
-    is_remote:  boolean;
-    comment?:   string;
-}
-
-export type ShiftLegendItem = {
-    type: 'REGULAR'|'EVENING'|'EMERGENCY'|'OVERTIME'|'VACATION'|'HOLIDAY'|'SICK';
-    color: string;
-    label_key: string;
-    text_color?: string;
-};
-
-export type UpsertAction = 'created' | 'updated' | 'deleted';
-
diff --git a/src/modules/timesheets/types/timesheet.defaults.ts b/src/modules/timesheets/types/timesheet.defaults.ts
deleted file mode 100644
index 5e31768..0000000
--- a/src/modules/timesheets/types/timesheet.defaults.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { WeekDay } from "./timesheet.types";
-import type { 
-    TimesheetDetailsDailyExpenses, 
-    TimesheetDetailsDailySchedule, 
-    TimesheetDetailsWeek 
-} from "./timesheet.interfaces";
-
-const makeWeek = <T>(factory: ()=> T): WeekDay<T> => ({
-    sun: factory(),
-    mon: factory(),
-    tue: factory(),
-    wed: factory(),
-    thu: factory(),
-    fri: factory(),
-    sat: factory(),
-});
-
-const emptyDailySchedule = (): TimesheetDetailsDailySchedule => ({
-    shifts: [],
-    regular_hours: 0,
-    evening_hours: 0,
-    emergency_hours: 0,
-    overtime_hours: 0,
-    total_hours: 0,
-    comment: "",
-    short_date: "",
-    break_duration: 0,
-});
-
-const emptyDailyExpenses = (): TimesheetDetailsDailyExpenses => ({
-    cash: [],
-    km: [],
-});
-
-export const defaultTimesheetDetailsWeek = (): TimesheetDetailsWeek => ({
-    is_approved: false,
-    shifts: makeWeek(emptyDailySchedule),
-    expenses: makeWeek(emptyDailyExpenses),
-});
\ No newline at end of file
diff --git a/src/modules/timesheets/types/timesheet.interfaces.ts b/src/modules/timesheets/types/timesheet.interfaces.ts
deleted file mode 100644
index 034262d..0000000
--- a/src/modules/timesheets/types/timesheet.interfaces.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { Shift } from "./shift.interfaces";
-import type { 
-    TimesheetExpenseEntry, 
-    TimesheetShiftEntry, 
-    WeekDay 
-} from "./timesheet.types";
-
-
-export interface Timesheet {
-    is_approved: boolean;
-    start_day:   string;
-    end_day:     string;
-    label:       string;
-    shifts:      TimesheetShiftEntry[];
-    expenses:    TimesheetExpenseEntry[];
-}
-
-export interface TimesheetDetailsWeek {
-    is_approved: boolean;
-    shifts:   WeekDay<TimesheetDetailsDailySchedule>
-    expenses: WeekDay<TimesheetDetailsDailyExpenses>;
-}
-
-export interface TimesheetDetailsDailySchedule {
-    shifts:          Shift[];
-    regular_hours:   number;
-    evening_hours:   number;
-    emergency_hours: number;
-    overtime_hours:  number;
-    total_hours:     number;
-    comment:         string;
-    short_date:      string;
-    break_duration?: number;
-}
-
-export interface DailyExpense {
-    is_approved: boolean;
-    comment:     string;
-    amount:      number;
-    supervisor_comment: string;
-}
-
-export interface TimesheetDetailsDailyExpenses {
-    cash: DailyExpense[];
-    km:   DailyExpense[];
-    [otherType: string]: DailyExpense[];
-}
-
-
-export interface TimesheetPayPeriodDetailsOverview {
-    week1: TimesheetDetailsWeek;
-    week2: TimesheetDetailsWeek;
-}
-
diff --git a/src/modules/timesheets/types/timesheet.types.ts b/src/modules/timesheets/types/timesheet.types.ts
deleted file mode 100644
index 95144bd..0000000
--- a/src/modules/timesheets/types/timesheet.types.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export type TimesheetShiftEntry = {
-    bank_type:   string;
-    date:        string;
-    start_time:  string;
-    end_time:    string;
-    comment:     string;
-    is_approved: boolean;
-    is_remote:   boolean;
-};
-
-export type TimesheetExpenseEntry = {
-    bank_type:   string;
-    date:        string;
-    amount:      number;
-    km:          number;
-    comment:     string;
-    is_approved: boolean;
-    supervisor_comment: string;
-};
-
-export type WeekDay<T> = {
-    sun: T;
-    mon: T;
-    tue: T;
-    wed: T;
-    thu: T;
-    fri: T;
-    sat: T;
-};
\ No newline at end of file
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index 63a5937..577da3e 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -1,42 +1,23 @@
-import { date } from 'quasar';
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
 import { withLoading } from 'src/utils/store-helpers';
 import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/timesheet-approval-service';
-import { timesheetTempService } from 'src/modules/timesheets/services/timesheet-services';
-import { default_pay_period_employee_details, type PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/pay-period-employee-details';
-import { default_pay_period_employee_overview, type PayPeriodEmployeeOverview } from "src/modules/timesheet-approval/types/pay-period-employee-overview";
-import type { Timesheet } from 'src/modules/timesheets/types/timesheet.interfaces';
-import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
+import { timesheetService } from 'src/modules/timesheets/services/timesheet-service';
+import { default_timesheet_approval_overview_crew, type TimesheetApprovalOverviewCrew } from "src/modules/timesheet-approval/models/timesheet-approval-overview.models";
+// import type { Timesheet } from 'src/modules/timesheets/types/timesheet.interfaces';
+import type { TimesheetDetails } from 'src/modules/timesheets/models/timesheet.models';
+import { default_timesheet_details } from 'src/modules/timesheets/types/timesheet.defaults';
+import { default_pay_period, type PayPeriod } from 'src/modules/shared/types/pay-period-interface';
 import type { PayPeriodReportFilters } from 'src/modules/timesheet-approval/types/pay-period-report';
 
-const default_pay_period: PayPeriod = { 
-    pay_period_no: -1,
-    period_start: '',
-    period_end: '',
-    payday: '',
-    pay_year: -1,
-    label: ''
- };
-
- //employee timesheet
- const default_timesheet: Timesheet = {
-    start_day: '',
-    end_day: '',
-    label: '',
-    is_approved: false,
-    shifts: [],
-    expenses: [],
- };
-
 export const useTimesheetStore = defineStore('timesheet', () => {
     const is_loading = ref<boolean>(false);
     const pay_period = ref<PayPeriod>(default_pay_period);
-    const pay_period_employee_overview_list = ref<PayPeriodEmployeeOverview[]>([]);
-    const pay_period_employee_overview = ref<PayPeriodEmployeeOverview>(default_pay_period_employee_overview);
-    const pay_period_employee_details = ref<PayPeriodEmployeeDetails>(default_pay_period_employee_details);
+    const timesheet_approval_overview_list = ref<TimesheetApprovalOverview[]>([]);
+    const timesheet_aproval_overview = ref<TimesheetApprovalOverview>(default_pay_period_employee_overview);
+    const pay_period_employee_details = ref<TimesheetDetails>(default_timesheet_details);
     const pay_period_report = ref();
-    const timesheet = ref<Timesheet>(default_timesheet);
+    // const timesheet = ref<Timesheet>(default_timesheet);
     const is_calendar_limit = computed( ()=> 
         pay_period.value.pay_year === 2024 &&
         pay_period.value.pay_period_no <= 1
@@ -97,21 +78,21 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         return pay_period_employee_overview.value;
     };
 
-    const getTimesheetByEmail = async (employee_email: string) => {
-        return withLoading( is_loading, async () => {
-            try{
-                const response = await timesheetTempService.getTimesheetsByEmail(employee_email);
-                timesheet.value = response;
+    // const getTimesheetByEmail = async (employee_email: string) => {
+    //     return withLoading( is_loading, async () => {
+    //         try{
+    //             const response = await timesheetTempService.getTimesheetsByEmail(employee_email);
+    //             timesheet.value = response;
 
-                return true;
-            }catch (error) {
-                console.error('There was an error retrieving timesheet details for this employee: ', error);
-                timesheet.value = { ...default_timesheet }
-            }
+    //             return true;
+    //         }catch (error) {
+    //             console.error('There was an error retrieving timesheet details for this employee: ', error);
+    //             timesheet.value = { ...default_timesheet }
+    //         }
 
-            return false;
-        });
-    };
+    //         return false;
+    //     });
+    // };
 
     const getPayPeriodEmployeeDetailsByEmployeeEmail = async (employee_email: string) => {
         return withLoading( is_loading, async () => {
@@ -163,7 +144,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         is_loading,
         is_calendar_limit,
         getPayPeriodByDateOrYearAndNumber,
-        getTimesheetByEmail,
+        // getTimesheetByEmail,
         getPayPeriodEmployeeOverviewListBySupervisorEmail,
         getPayPeriodOverviewByEmployeeEmail,
         getPayPeriodEmployeeDetailsByEmployeeEmail,

From 00f5565fe57a50e39648ee5756b45602c7ccaa70 Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Thu, 2 Oct 2025 16:09:18 -0400
Subject: [PATCH 3/4] BREAKING(refactor): more refactor to streamline and
 standardize approvals and timesheet, pull to get expense changes

---
 .../components/page-header-template.vue       |   4 +-
 src/modules/shared/composables/use-toggle.ts  |  17 -
 .../pay-period.models.ts}                     |   0
 .../user.models.ts}                           |   0
 ...=> details-crud-dialog-chart-expenses.vue} |   0
 ...etails-crud-dialog-chart-hours-worked.vue} |   4 +-
 ...details-crud-dialog-chart-shift-types.vue} |   0
 ...led-dialog.vue => details-crud-dialog.vue} |  16 +-
 .../composables/use-timesheet-approval-api.ts |  44 +--
 .../models/pay-period-overview.models.ts      |  82 +++++
 .../timesheet-approval-overview.models.ts     | 102 ------
 .../services/timesheet-approval-service.ts    |  27 +-
 ...-form.vue => expense-crud-dialog-form.vue} | 108 +++----
 ...-list.vue => expense-crud-dialog-list.vue} |   0
 ...xpense-crud-dialog-supervisor-comment.vue} |  49 +--
 .../expenses/expense-crud-dialog.vue          | 121 ++++++++
 .../expenses/timesheet-details-expenses.vue   | 164 ----------
 .../components/shift/shift-crud-dialog.vue    | 293 +++++++-----------
 .../components/shift/shift-list-legend.vue    |  18 +-
 .../components/shift/shift-list-row.vue       | 102 +++---
 .../components/shift/shift-list.vue           |  92 +++---
 .../timesheet/timesheet-save-payload.vue      |  63 ----
 .../timesheet/timesheet-wrapper.vue           |  68 ++++
 .../composables/api/use-expense-api.ts        | 102 ++----
 .../composables/api/use-shift-api.ts          | 218 +++++--------
 .../composables/api/use-timesheet-api.ts      |  67 ++--
 .../composables/use-expense-items.ts          |  61 ++--
 .../models/expense-validation.interface.ts    |  34 --
 .../timesheets/models/expense.models.ts       | 100 ++----
 .../timesheets/models/expense.validation.ts   |  77 +++++
 .../models/pay-period-details.models.ts       |  77 +++++
 src/modules/timesheets/models/shift.models.ts |  73 ++---
 .../timesheets/models/timesheet.models.ts     | 125 --------
 .../models/{ui.types.ts => ui.models.ts}      |   2 -
 .../timesheets/pages/timesheet-page.vue       | 200 ++----------
 .../timesheets/services/timesheet-service.ts  |  41 +--
 src/modules/timesheets/utils/expense.util.ts  |  28 +-
 .../timesheets/utils/expenses-validators.ts   |  23 +-
 src/modules/timesheets/utils/shift.util.ts    |  33 +-
 src/pages/error-page.vue                      |  39 ++-
 src/pages/test-page.vue                       | 111 ++++---
 src/stores/expense-store.ts                   | 164 ++++++----
 src/stores/shift-store.ts                     |  78 +++--
 src/stores/timesheet-store.ts                 | 113 +++----
 src/utils/deep-equal.ts                       |  59 ++--
 src/utils/normalize-object.ts                 |  31 ++
 src/utils/store-helpers.ts                    |   8 +-
 src/utils/to-qselect-options.ts               |   6 +
 src/utils/unwrap-and-clone.ts                 |  16 +
 49 files changed, 1415 insertions(+), 1845 deletions(-)
 delete mode 100644 src/modules/shared/composables/use-toggle.ts
 rename src/modules/shared/{types/pay-period-interface.ts => models/pay-period.models.ts} (100%)
 rename src/modules/shared/{types/user-interface.ts => models/user.models.ts} (100%)
 rename src/modules/timesheet-approval/components/{detailed-dialog-chart-expenses.vue => details-crud-dialog-chart-expenses.vue} (100%)
 rename src/modules/timesheet-approval/components/{detailed-dialog-chart-hours-worked.vue => details-crud-dialog-chart-hours-worked.vue} (92%)
 rename src/modules/timesheet-approval/components/{detailed-dialog-chart-shift-types.vue => details-crud-dialog-chart-shift-types.vue} (100%)
 rename src/modules/timesheet-approval/components/{detailed-dialog.vue => details-crud-dialog.vue} (87%)
 create mode 100644 src/modules/timesheet-approval/models/pay-period-overview.models.ts
 delete mode 100644 src/modules/timesheet-approval/models/timesheet-approval-overview.models.ts
 rename src/modules/timesheets/components/expenses/{expense-form.vue => expense-crud-dialog-form.vue} (65%)
 rename src/modules/timesheets/components/expenses/{expense-list.vue => expense-crud-dialog-list.vue} (100%)
 rename src/modules/timesheets/components/expenses/{expense-supervisor-comment.vue => expense-crud-dialog-supervisor-comment.vue} (59%)
 create mode 100644 src/modules/timesheets/components/expenses/expense-crud-dialog.vue
 delete mode 100644 src/modules/timesheets/components/expenses/timesheet-details-expenses.vue
 delete mode 100644 src/modules/timesheets/components/timesheet/timesheet-save-payload.vue
 create mode 100644 src/modules/timesheets/components/timesheet/timesheet-wrapper.vue
 delete mode 100644 src/modules/timesheets/models/expense-validation.interface.ts
 create mode 100644 src/modules/timesheets/models/expense.validation.ts
 create mode 100644 src/modules/timesheets/models/pay-period-details.models.ts
 delete mode 100644 src/modules/timesheets/models/timesheet.models.ts
 rename src/modules/timesheets/models/{ui.types.ts => ui.models.ts} (60%)
 create mode 100644 src/utils/normalize-object.ts
 create mode 100644 src/utils/to-qselect-options.ts
 create mode 100644 src/utils/unwrap-and-clone.ts

diff --git a/src/modules/shared/components/page-header-template.vue b/src/modules/shared/components/page-header-template.vue
index 8fac843..24106a7 100644
--- a/src/modules/shared/components/page-header-template.vue
+++ b/src/modules/shared/components/page-header-template.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
     const { title, startDate = "", endDate = ""  } = defineProps<{
         title: string;
-        startDate: string;
-        endDate: string;
+        startDate?: string;
+        endDate?: string;
     }>();
 
     const date_format_options = { day: 'numeric', month: 'long', year: 'numeric', };
diff --git a/src/modules/shared/composables/use-toggle.ts b/src/modules/shared/composables/use-toggle.ts
deleted file mode 100644
index 64a026c..0000000
--- a/src/modules/shared/composables/use-toggle.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ref } from "vue";
-
-//date picker state
-export const useToggle = (initial = false) => {
-  const state = ref<boolean>(initial);
-
-  const setTrue  = () => { state.value = true;         };
-  const setFalse = () => { state.value = false;        };
-  const toggle   = () => { state.value = !state.value; };
-
-  return { 
-    state,
-    setTrue,
-    setFalse,
-    toggle
- };
-};
\ No newline at end of file
diff --git a/src/modules/shared/types/pay-period-interface.ts b/src/modules/shared/models/pay-period.models.ts
similarity index 100%
rename from src/modules/shared/types/pay-period-interface.ts
rename to src/modules/shared/models/pay-period.models.ts
diff --git a/src/modules/shared/types/user-interface.ts b/src/modules/shared/models/user.models.ts
similarity index 100%
rename from src/modules/shared/types/user-interface.ts
rename to src/modules/shared/models/user.models.ts
diff --git a/src/modules/timesheet-approval/components/detailed-dialog-chart-expenses.vue b/src/modules/timesheet-approval/components/details-crud-dialog-chart-expenses.vue
similarity index 100%
rename from src/modules/timesheet-approval/components/detailed-dialog-chart-expenses.vue
rename to src/modules/timesheet-approval/components/details-crud-dialog-chart-expenses.vue
diff --git a/src/modules/timesheet-approval/components/detailed-dialog-chart-hours-worked.vue b/src/modules/timesheet-approval/components/details-crud-dialog-chart-hours-worked.vue
similarity index 92%
rename from src/modules/timesheet-approval/components/detailed-dialog-chart-hours-worked.vue
rename to src/modules/timesheet-approval/components/details-crud-dialog-chart-hours-worked.vue
index 9d6c66a..4a5bcad 100644
--- a/src/modules/timesheet-approval/components/detailed-dialog-chart-hours-worked.vue
+++ b/src/modules/timesheet-approval/components/details-crud-dialog-chart-hours-worked.vue
@@ -5,7 +5,7 @@
     import { useI18n } from 'vue-i18n';
     import { useQuasar } from 'quasar';
     import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, type ChartData, type ChartOptions, type Plugin, type ChartDataset } from 'chart.js';
-    import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/pay-period-employee-details';
+    import type { TimesheetDetails } from 'src/modules/timesheets/models/pay-period-details.models';
     
     const { t } = useI18n();
     const $q = useQuasar();
@@ -16,7 +16,7 @@
     ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
 
     const props = defineProps<{
-        rawData: PayPeriodEmployeeDetails | undefined;
+        rawData: TimesheetDetails | undefined;
         options?: ChartOptions<"bar"> | undefined;
         plugins?: Plugin<"bar">[] | undefined;
     }>();
diff --git a/src/modules/timesheet-approval/components/detailed-dialog-chart-shift-types.vue b/src/modules/timesheet-approval/components/details-crud-dialog-chart-shift-types.vue
similarity index 100%
rename from src/modules/timesheet-approval/components/detailed-dialog-chart-shift-types.vue
rename to src/modules/timesheet-approval/components/details-crud-dialog-chart-shift-types.vue
diff --git a/src/modules/timesheet-approval/components/detailed-dialog.vue b/src/modules/timesheet-approval/components/details-crud-dialog.vue
similarity index 87%
rename from src/modules/timesheet-approval/components/detailed-dialog.vue
rename to src/modules/timesheet-approval/components/details-crud-dialog.vue
index 5b547ea..a594f1d 100644
--- a/src/modules/timesheet-approval/components/detailed-dialog.vue
+++ b/src/modules/timesheet-approval/components/details-crud-dialog.vue
@@ -5,15 +5,15 @@
     import DetailedDialogChartHoursWorked from 'src/modules/timesheet-approval/components/graphs/detailed-chart-hours-worked.vue';
     import DetailedDialogChartShiftTypes from 'src/modules/timesheet-approval/components/graphs/detailed-chart-shift-types.vue';
     import DetailedDialogChartExpenses from 'src/modules/timesheet-approval/components/graphs/detailed-chart-expenses.vue';
-    import type { TimesheetApprovalOverviewCrewMember }   from 'src/modules/timesheet-approval/models/timesheet-approval-overview.models';
-    import type { TimesheetDetails } from 'src/modules/timesheets/models/timesheet.models';
+    import type { PayPeriodOverview }   from 'src/modules/timesheet-approval/models/pay-period-overview.models';
+    import type { PayPeriodDetails } from 'src/modules/timesheets/models/pay-period-details.models';
 
     const dialog_model = defineModel<boolean>('dialog', { default: false });
 
     defineProps<{
         isLoading: boolean;
-        employeeOverview: TimesheetApprovalOverviewCrewMember;
-        timesheetDetails: TimesheetDetails;
+        payPeriodOverview: PayPeriodOverview;
+        payPeriodDetails: PayPeriodDetails;
     }>();
 
     // const timesheet_store = useTimesheetStore();
@@ -52,7 +52,7 @@
                 v-if="!isLoading"
                 class="text-h5 text-weight-bolder text-center text-primary q-pa-none text-uppercase col-auto"
             >
-                <span> {{ timesheetDetails.employee_full_name }} </span>
+                <span> {{ payPeriodDetails.employee_full_name }} </span>
 
                 <q-separator 
                     spaced 
@@ -114,7 +114,7 @@
                     style="min-height: 300px;"
                 >
                     <DetailedDialogChartHoursWorked 
-                        :raw-data="timesheetDetails" 
+                        :raw-data="payPeriodDetails" 
                         class="col-7" 
                     />
 
@@ -125,7 +125,7 @@
 
                     <div class="column col justify-center no-wrap q-pa-none">
                         <DetailedDialogChartShiftTypes 
-                            :raw-data="employeeOverview" 
+                            :raw-data="payPeriodOverview" 
                             class="col-5" 
                         />
 
@@ -135,7 +135,7 @@
                         />
 
                         <DetailedDialogChartExpenses 
-                            :raw-data="timesheetDetails" 
+                            :raw-data="payPeriodDetails" 
                             class="col" 
                         />
                     </div>
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 a512a93..4f60aeb 100644
--- a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
+++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
@@ -1,17 +1,16 @@
 import { useTimesheetStore } from "src/stores/timesheet-store";
 import { useAuthStore } from "src/stores/auth-store";
 import type { TimesheetApprovalCSVReportFilters } from "src/modules/timesheet-approval/models/timesheet-approval-csv-report.models";
-import { date } from "quasar";
 
 export const useTimesheetApprovalApi = () => {
     const timesheet_store = useTimesheetStore();
     const auth_store = useAuthStore();
 
-    const getPayPeriodOverviewByDate = async (date_string: string): Promise<void> => {
+    const getPayPeriodOverviewsByDate = async (date_string: string): Promise<void> => {
         const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber(date_string);
         
         if (success) {
-            await timesheet_store.getPayPeriodEmployeeOverviewListBySupervisorEmail(
+            await timesheet_store.getPayPeriodOverviewsBySupervisorEmail(
                 timesheet_store.pay_period.pay_year, 
                 timesheet_store.pay_period.pay_period_no, 
                 auth_store.user.email
@@ -19,35 +18,7 @@ export const useTimesheetApprovalApi = () => {
         }
     };
 
-    /* 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, using either the current user or 
-        any other supervisor email provided. */
-    const getNextOrPreviousPayPeriodOverviewList = async (direction: number, supervisor_email?: string): Promise<void> => {
-        const email = supervisor_email ?? auth_store.user.email;
-
-        let new_pay_period_no = timesheet_store.pay_period.pay_period_no + direction;
-        let new_pay_year = timesheet_store.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.getPayPeriodByDateOrYearAndNumber(new_pay_year, new_pay_period_no);
-        
-        if (success) {
-            await timesheet_store.getPayPeriodEmployeeOverviewListBySupervisorEmail(new_pay_year, new_pay_period_no, email);
-        }
-    };
-
-    const getTimesheetApprovalCSVReport = async ( report_filter_company: boolean[], report_filter_type: boolean[] ) => {
+    const getTimesheetApprovalCSVReport = async ( report_filter_company: boolean[], report_filter_type: boolean[], year?: number, period_number?: number ) => {
         const [ targo, solucom ] = report_filter_company;
         const [ shifts, expenses, holiday, vacation ] = report_filter_type;
         const options = {
@@ -55,12 +26,15 @@ export const useTimesheetApprovalApi = () => {
             companies: { targo, solucom },
         } as TimesheetApprovalCSVReportFilters;
         
-        await timesheet_store.getTimesheetApprovalCSVReport(options);
+        await timesheet_store.getPayPeriodReportByYearAndPeriodNumber( 
+            year ?? timesheet_store.pay_period.pay_year, 
+            period_number ?? timesheet_store.pay_period.pay_period_no, 
+            options 
+        );
     };
 
     return {
-        getPayPeriodOverviewByDate,
-        getNextOrPreviousPayPeriodOverviewList,
+        getPayPeriodOverviewsByDate,
         getTimesheetApprovalCSVReport,
     }
 };
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/models/pay-period-overview.models.ts b/src/modules/timesheet-approval/models/pay-period-overview.models.ts
new file mode 100644
index 0000000..57c32ba
--- /dev/null
+++ b/src/modules/timesheet-approval/models/pay-period-overview.models.ts
@@ -0,0 +1,82 @@
+export interface PayPeriodOverview {
+    email: string;
+    employee_name: string;
+    regular_hours: number;
+    evening_hours: number;
+    emergency_hours: number;
+    overtime_hours: number;
+    total_hours: number;
+    expenses: number;
+    mileage: number;
+    is_approved: boolean;
+};
+
+export const default_pay_period_overview: PayPeriodOverview = {
+    email: '',
+    employee_name: '',
+    regular_hours: -1,
+    evening_hours: -1,
+    emergency_hours: -1,
+    overtime_hours: -1,
+    total_hours: -1,
+    expenses: -1,
+    mileage: -1,
+    is_approved: false
+}
+
+export const pay_period_overview_columns = [
+    { 
+        name: 'employee_name', 
+        label: 'timesheet_approvals.table.full_name', 
+        field: 'employee_name', 
+        sortable: true 
+    },
+    { 
+        name: 'email', 
+        label: 'timesheet_approvals.table.email', 
+        field: 'email', 
+        sortable: true,
+    },
+    { 
+        name: 'regular_hours', 
+        label: 'shared.shift_type.regular', 
+        field: 'regular_hours', 
+        sortable: true, 
+    },
+    { 
+        name: 'evening_hours', 
+        label: 'shared.shift_type.evening', 
+        field: 'evening_hours',
+        sortable: true, 
+    },
+    { 
+        name: 'emergency_hours', 
+        label: 'shared.shift_type.emergency', 
+        field: 'emergency_hours',
+        sortable: true, 
+    },
+    { 
+        name: 'overtime_hours', 
+        label: 'shared.shift_type.overtime', 
+        field: 'overtime_hours',
+        sortable: true,
+    },
+    { 
+        name: 'expenses', 
+        label: 'timesheet_approvals.table.expenses', 
+        field: 'expenses', 
+        sortable: true, 
+    },
+    { 
+        name: 'mileage', 
+        label: 'timesheet_approvals.table.mileage', 
+        field: 'mileage', 
+        sortable: true,
+    },
+    {
+        name: 'is_approved',
+        label: 'timesheet_approvals.table.is_approved',
+        field: 'is_approved',
+        sortable: true,
+    }
+];
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/models/timesheet-approval-overview.models.ts b/src/modules/timesheet-approval/models/timesheet-approval-overview.models.ts
deleted file mode 100644
index 85b46e8..0000000
--- a/src/modules/timesheet-approval/models/timesheet-approval-overview.models.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-export interface TimesheetApprovalOverviewCrew {
-    pay_period_no: number;
-    pay_year: number;
-    payday: string;
-    period_start: string;
-    period_end: string;
-    label: string;
-    overview_crew: TimesheetApprovalOverviewCrewMember[];
-};
-
-export interface TimesheetApprovalOverviewCrewMember {
-    email: string;
-    employee_name: string;
-    regular_hours: number;
-    evening_hours: number;
-    emergency_hours: number;
-    overtime_hours: number;
-    total_hours: number;
-    expenses: number;
-    mileage: number;
-    is_approved: boolean;
-};
-
-export const default_timesheet_approval_overview_crew_member: TimesheetApprovalOverviewCrewMember = {
-    email: '',
-    employee_name: '',
-    regular_hours: -1,
-    evening_hours: -1,
-    emergency_hours: -1,
-    overtime_hours: -1,
-    total_hours: -1,
-    expenses: -1,
-    mileage: -1,
-    is_approved: false
-}
-
-export const default_timesheet_approval_overview_crew: TimesheetApprovalOverviewCrew = {
-    pay_period_no: -1,
-    pay_year: -1,
-    payday: '',
-    period_start: '',
-    period_end: '',
-    label: '',
-    overview_crew: []
-}
-
-export const timesheet_approval_overview_crew_columns = [
-        { 
-            name: 'employee_name', 
-            label: 'timesheet_approvals.table.full_name', 
-            field: 'employee_name', 
-            sortable: true 
-        },
-        { 
-            name: 'email', 
-            label: 'timesheet_approvals.table.email', 
-            field: 'email', 
-            sortable: true,
-        },
-        { 
-            name: 'regular_hours', 
-            label: 'shared.shift_type.regular', 
-            field: 'regular_hours', 
-            sortable: true, 
-        },
-        { 
-            name: 'evening_hours', 
-            label: 'shared.shift_type.evening', 
-            field: 'evening_hours',
-            sortable: true, 
-        },
-        { 
-            name: 'emergency_hours', 
-            label: 'shared.shift_type.emergency', 
-            field: 'emergency_hours',
-            sortable: true, 
-        },
-        { 
-            name: 'overtime_hours', 
-            label: 'shared.shift_type.overtime', 
-            field: 'overtime_hours',
-            sortable: true,
-        },
-        { 
-            name: 'expenses', 
-            label: 'timesheet_approvals.table.expenses', 
-            field: 'expenses', 
-            sortable: true, 
-        },
-        { 
-            name: 'mileage', 
-            label: 'timesheet_approvals.table.mileage', 
-            field: 'mileage', 
-            sortable: true,
-        },
-        {
-            name: 'is_approved',
-            label: 'timesheet_approvals.table.is_approved',
-            field: 'is_approved',
-            sortable: true,
-        }
-    ];
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/services/timesheet-approval-service.ts b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
index 1a15240..d156929 100644
--- a/src/modules/timesheet-approval/services/timesheet-approval-service.ts
+++ b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
@@ -1,33 +1,14 @@
 import { api } from "src/boot/axios";
-import type { PayPeriodOverview } from "src/modules/timesheet-approval/types/pay-period-overview";
-import type { PayPeriod } from "src/modules/shared/types/pay-period-interface";
-import type { PayPeriodEmployeeDetails } from "src/modules/timesheet-approval/types/pay-period-employee-details";
-import type { PayPeriodReportFilters } from "src/modules/timesheet-approval/types/pay-period-report";
+import type { TimesheetApprovalCSVReportFilters } from "src/modules/timesheet-approval/models/timesheet-approval-csv-report.models";
+import type { PayPeriodOverview } from "src/modules/timesheet-approval/models/pay-period-overview.models";
 
 export const timesheetApprovalService = {
-    getPayPeriodByDate: async (date_string: string): Promise<PayPeriod> => {
-        const response = await api.get(`pay-periods/date/${date_string}`);
-        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;
-    },
-
-
-    getPayPeriodEmployeeOverviewListBySupervisorEmail: async (year: number, period_number: number, supervisor_email: string): Promise<PayPeriodOverview> => {
-        // TODO: REMOVE MOCK DATA PEFORE PUSHING TO PROD
+    getPayPeriodOverviewsBySupervisorEmail: async (year: number, period_number: number, supervisor_email: string): Promise<PayPeriodOverview[]> => {
         const response = await api.get(`pay-periods/${year}/${period_number}/${supervisor_email}`);
         return response.data;
     },
 
-    getPayPeriodEmployeeDetailsByPayPeriodAndEmail: async (year: number, period_no: number, email: string): Promise<PayPeriodEmployeeDetails> => {
-        const response = await api.get('timesheets', { params: { year, period_no, email, }});
-        return response.data;
-    },
-
-    getTimesheetApprovalCSVReport: async (year: number, period_number: number, report_filters?: PayPeriodReportFilters) => {
+    getPayPeriodReportByYearAndPeriodNumber: async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
         const response = await api.get(`csv/${year}/${period_number}`, { params: { report_filters, }});
         return response.data;
     },
diff --git a/src/modules/timesheets/components/expenses/expense-form.vue b/src/modules/timesheets/components/expenses/expense-crud-dialog-form.vue
similarity index 65%
rename from src/modules/timesheets/components/expenses/expense-form.vue
rename to src/modules/timesheets/components/expenses/expense-crud-dialog-form.vue
index 7522815..ba79884 100644
--- a/src/modules/timesheets/components/expenses/expense-form.vue
+++ b/src/modules/timesheets/components/expenses/expense-crud-dialog-form.vue
@@ -1,44 +1,44 @@
-<script setup lang="ts">
-import type { TimesheetExpense } from '../../types/expense.interfaces';
-import type { ExpenseType }      from '../../types/expense.types';
-/* eslint-disable */
+<script
+    setup
+    lang="ts"
+>
+    import type { ExpenseType, Expense } from 'src/modules/timesheets/models/expense.models';
+    import { ref } from 'vue';
 
-//---------------- v-models ------------------
-const draft = defineModel<Partial<TimesheetExpense>>('draft');
-const files = defineModel<File[] | null>('files'); 
-const datePickerOpen = defineModel<boolean | null>('datePickerOpen', {default: false });
+    const files = defineModel<File[] | null>('files');
+    const is_navigator_open = ref(false);
 
-//------------------ props ------------------
-const props = defineProps<{
-    type_options: { label: string; value: ExpenseType }[];
-    show_amount: boolean;
-    is_readonly: boolean;
-    rules: {
-        typeRequired:    (val: unknown) => true | string;
-        amountRequired:  (val: unknown) => true | string;
-        mileageRequired: (val: unknown) => true | string;
-        commentRequired: (val: unknown) => true | string;
-        commentTooLong:  (val: unknown) => true | string;
-    };
-    comment_max_length: number;
-    setType: (val: ExpenseType) => void;
-}>();
-
-//------------------ emits ------------------
-const emit = defineEmits<{
-    (e: 'submit'): void;
-}>();
+    //------------------ props ------------------
+    defineProps<{
+        
+        type_options: { label: string; value: ExpenseType }[];
+        show_amount: boolean;
+        is_readonly: boolean;
+        rules: {
+            typeRequired: (val: unknown) => true | string;
+            amountRequired: (val: unknown) => true | string;
+            mileageRequired: (val: unknown) => true | string;
+            commentRequired: (val: unknown) => true | string;
+            commentTooLong: (val: unknown) => true | string;
+        };
+        comment_max_length: number;
+        setType: (val: ExpenseType) => void;
+    }>();
 
+    //------------------ emits ------------------
+    const emit = defineEmits<{
+        'submit': [void];
+    }>();
 </script>
 
 <template>
-    <q-form 
-        flat 
+    <q-form
+        flat
         v-if="!is_readonly"
         @submit.prevent="emit('submit')"
     >
         <div class="text-subtitle2 q-py-sm">
-            {{ $t('timesheet.expense.add_expense')}}
+            {{ $t('timesheet.expense.add_expense') }}
         </div>
         <div class="row justify-between">
 
@@ -53,22 +53,22 @@ const emit = defineEmits<{
                 color="primary"
                 :label="$t('timesheet.expense.date')"
             >
-            <template #before>
-                <q-btn
-                    push
-                    dense
-                    icon="event"
-                    color="primary"
-                    @click="datePickerOpen = true"
-                />
-                <q-dialog v-model="datePickerOpen">
-                    <q-date 
-                        v-model="draft!.date"
-                        @update:model-value="datePickerOpen = false"
-                        mask="YYYY-MM-DD"
-                    />    
-                </q-dialog>
-            </template>
+                <template #before>
+                    <q-btn
+                        push
+                        dense
+                        icon="event"
+                        color="primary"
+                        @click="datePickerOpen = true"
+                    />
+                    <q-dialog v-model="datePickerOpen">
+                        <q-date
+                            v-model="draft!.date"
+                            @update:model-value="datePickerOpen = false"
+                            mask="YYYY-MM-DD"
+                        />
+                    </q-dialog>
+                </template>
             </q-input>
 
             <!-- expenses type selection -->
@@ -82,7 +82,8 @@ const emit = defineEmits<{
                 emit-value
                 map-options
                 :label="$t('timesheet.expense.type')"
-                :rules="[ rules.typeRequired ]"
+                :rules="[rules.typeRequired]"
+                :option-label="label => $t(label)"
                 @update:model-value="val => setType(val as ExpenseType)"
             />
 
@@ -101,7 +102,7 @@ const emit = defineEmits<{
                     :label="$t('timesheet.expense.amount')"
                     suffix="$"
                     lazy-rules="ondemand"
-                    :rules="[ rules.amountRequired ]"
+                    :rules="[rules.amountRequired]"
                 />
             </template>
 
@@ -120,7 +121,7 @@ const emit = defineEmits<{
                     :label="$t('timesheet.expense.mileage')"
                     suffix="km"
                     lazy-rules="ondemand"
-                    :rules="[ rules.mileageRequired ]"
+                    :rules="[rules.mileageRequired]"
                 />
             </template>
 
@@ -137,7 +138,7 @@ const emit = defineEmits<{
                 :counter="true"
                 :maxlength="comment_max_length"
                 lazy-rules="ondemand"
-                :rules="[ rules.commentRequired, rules.commentTooLong ]"
+                :rules="[rules.commentRequired, rules.commentTooLong]"
             >
                 <template #label>
                     <span class="text-weight-bold ">
@@ -163,11 +164,10 @@ const emit = defineEmits<{
                         name="attach_file"
                         size="sm"
                         color="primary"
-                        
                     />
                 </template>
             </q-file>
-            
+
             <!-- add btn section -->
             <div>
                 <q-btn
@@ -178,7 +178,7 @@ const emit = defineEmits<{
                     size="sm"
                     class="q-mt-sm q-ml-sm"
                     type="submit"
-                />                
+                />
             </div>
         </div>
     </q-form>
diff --git a/src/modules/timesheets/components/expenses/expense-list.vue b/src/modules/timesheets/components/expenses/expense-crud-dialog-list.vue
similarity index 100%
rename from src/modules/timesheets/components/expenses/expense-list.vue
rename to src/modules/timesheets/components/expenses/expense-crud-dialog-list.vue
diff --git a/src/modules/timesheets/components/expenses/expense-supervisor-comment.vue b/src/modules/timesheets/components/expenses/expense-crud-dialog-supervisor-comment.vue
similarity index 59%
rename from src/modules/timesheets/components/expenses/expense-supervisor-comment.vue
rename to src/modules/timesheets/components/expenses/expense-crud-dialog-supervisor-comment.vue
index 997487f..ffa5604 100644
--- a/src/modules/timesheets/components/expenses/expense-supervisor-comment.vue
+++ b/src/modules/timesheets/components/expenses/expense-crud-dialog-supervisor-comment.vue
@@ -1,26 +1,29 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-/* eslint-disable */
-const props = defineProps<{
-    commentString: string;
-}>();
+<script
+    setup
+    lang="ts"
+>
+    import { ref } from 'vue';
 
-const emit = defineEmits<{
-    clickClose: [];
-    clickSave: [comment: string];
-}>();
+    const { commentString } = defineProps<{
+        commentString: string;
+    }>();
 
-const text = ref(props.commentString);
+    const emit = defineEmits<{
+        clickClose: [];
+        clickSave: [comment: string];
+    }>();
 
-const close = ()=> {
-    emit('clickClose');
-    text.value = '';
-}
+    const text = ref(commentString);
 
-const save = ()=> {
-    emit('clickSave',text.value);
-    close();
-}
+    const close = () => {
+        emit('clickClose');
+        text.value = '';
+    }
+
+    const save = () => {
+        emit('clickSave', text.value);
+        close();
+    }
 </script>
 
 <template>
@@ -28,14 +31,14 @@ const save = ()=> {
         <div class="row items-center justify-between q-pa-md">
             {{ $t('timesheet.fields.header_comment') }}
         </div>
-        <q-separator/>
+        <q-separator />
         <div class="q-pa-md">
             <q-input
                 v-model="text"
                 type="textarea"
                 autogrow
                 filled
-                :label= "$t('timesheet.fields.textarea_comment')"
+                :label="$t('timesheet.fields.textarea_comment')"
                 :counter=true
                 maxlength="512"
                 color="primary"
@@ -46,8 +49,8 @@ const save = ()=> {
                 color="secondary"
                 text-color="grey-8"
                 :label="$t('timesheet.cancel_button')"
-                @click="close"             
-            />  
+                @click="close"
+            />
             <q-btn
                 :label="$t('timesheet.save_button')"
                 color="primary"
diff --git a/src/modules/timesheets/components/expenses/expense-crud-dialog.vue b/src/modules/timesheets/components/expenses/expense-crud-dialog.vue
new file mode 100644
index 0000000..7c78582
--- /dev/null
+++ b/src/modules/timesheets/components/expenses/expense-crud-dialog.vue
@@ -0,0 +1,121 @@
+<script
+    setup
+    lang="ts"
+>
+    import { useI18n } from 'vue-i18n';
+    import { computed, ref } from 'vue';
+    import { useExpensesStore } from 'src/stores/expense-store';
+    import { useExpenseForm } from '../../composables/use-expense-form';
+    import { COMMENT_MAX_LENGTH } from '../../constants/expense.constants';
+    import ExpenseList from './expense-list.vue';
+    import ExpenseCrudDialogForm from 'src/modules/timesheets/components/expenses/expense-crud-dialog-form.vue';
+    import { computeExpenseTotals, makeExpenseRules, buildExpenseSavePayload } from '../../utils/expense.util';
+    import { EXPENSE_TYPE } from 'src/modules/timesheets/models/expense.models';
+    import type { Expense, ExpenseType, PayPeriodExpenses } from 'src/modules/timesheets/models/expense.models';
+    import { toQSelectOptions } from 'src/utils/to-qselect-options';
+
+    const { t } = useI18n();
+    const rules = makeExpenseRules(t, COMMENT_MAX_LENGTH);
+    const expense_store = useExpensesStore();
+
+    const { employeeEmail } = defineProps<{
+        employeeEmail: string;
+    }>();
+
+    const type_options = toQSelectOptions<ExpenseType>(EXPENSE_TYPE, 'timesheet.expense.types.');
+
+
+
+    //------------------ refs and computed ------------------
+    const files = ref<File[] | null>(null);
+    const { validateAnd } = useExpenseForm();
+    
+    const totals = computed(() => computeExpenseTotals(expenses));
+</script>
+
+<template>
+    <q-dialog
+        v-model="expense_store.is_open"
+        persistent
+    >
+        <q-card
+            class="q-pa-md"
+            style=" min-width: 70vw;"
+        >
+            <q-inner-loading :showing="expense_store.is_loading">
+                <q-spinner size="32px" />
+            </q-inner-loading>
+
+            <q-card-section>
+                <!-- <q-banner 
+                    v-if="expenses_error"
+                    dense
+                    class="bg-red-2 col-auto text-negative q-mt-sm"
+                >
+                    {{ expenses_error }}
+                </q-banner> -->
+
+                <!-- header (title with totals)-->
+                <q-item class="row justify-between">
+                    <q-item-label
+                        header
+                        class="text-h6 col-auto"
+                    >
+                        {{ $t('timesheet.expense.title') }}
+                    </q-item-label>
+                    <q-item-section class="items-center col-auto">
+                        <q-badge
+                            lines="1"
+                            class="q-pa-sm q-px-md"
+                            :label="$t('timesheet.expense.total_amount') + ': ' + totals.amount.toFixed(2)"
+                        />
+                        <q-separator spaced />
+                        <q-badge
+                            lines="2"
+                            class="q-pa-sm q-px-md"
+                            :label="$t('timesheet.expense.total_mileage') + ': ' + totals.mileage.toFixed(1)"
+                        />
+                    </q-item-section>
+                </q-item>
+                <ExpenseList
+                    :items="expense_store.current_expenses"
+                    @remove="expense_store.upsertOrDeletePayPeriodExpenseByEmployeeEmail(employeeEmail, expense_store.current_expenses.expenses)"
+                />
+                <ExpenseCrudDialogForm
+                    :current-expenses:"expense_store.current_expenses.exp"
+                    v-model:files="files"
+                    :is_readonly="expense_store.current_expenses.is_approved"
+                    :type_options="type_options"
+                    :rules="rules"
+                    :comment_max_length="COMMENT_MAX_LENGTH"
+                    :set-type="setType"
+                    @submit="expense_store.upsertOrDeletePayPeriodExpenseByEmployeeEmail(employeeEmail, expense_store.current_expenses.expenses)"
+                />
+
+                <q-separator spaced />
+
+            </q-card-section>
+
+            <q-card-actions align="right">
+                <!-- close btn -->
+                <q-btn
+                    flat
+                    class="col-auto q-mr-sm"
+                    color="primary"
+                    :label="$t('timesheet.cancel_button')"
+                    @click="close"
+                />
+                <!-- save btn -->
+                <q-btn
+                    push
+                    color="primary"
+                    class="col-auto"
+                    :disable="pay_period_expenses.is_approved || expenses.length === 0"
+                    :label="$t('timesheet.save_button')"
+                    @click="onSave"
+                />
+            </q-card-actions>
+
+        </q-card>
+    </q-dialog>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/expenses/timesheet-details-expenses.vue b/src/modules/timesheets/components/expenses/timesheet-details-expenses.vue
deleted file mode 100644
index f229af9..0000000
--- a/src/modules/timesheets/components/expenses/timesheet-details-expenses.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n';
-import { computed, ref } from 'vue';
-import { useExpenseForm }  from '../../composables/use-expense-form';
-import { useExpenseDraft } from '../../composables/use-expense-draft';
-import { useExpenseItems } from '../../composables/use-expense-items';
-import { COMMENT_MAX_LENGTH } from '../../constants/expense.constants';
-import { useToggle } from 'src/modules/shared/composables/use-toggle';
-import ExpenseList from './expense-list.vue';
-import ExpenseForm from './expense-form.vue';
-import { 
-    buildExpenseTypeOptions,
-    computeExpenseTotals,
-    makeExpenseRules,
-    buildExpenseSavePayload
-} from '../../utils/expense.util';
-import { EXPENSE_TYPE }     from '../../types/expense.types';
-import { ExpensesValidationError } from '../../types/expense-validation.interface';
-import type { TimesheetExpense } from '../../types/expense.interfaces';
-
-/* eslint-disable */
-
-const { t , locale } = useI18n();
-const rules = makeExpenseRules(t, COMMENT_MAX_LENGTH);
-
-//------------------ props ------------------
-const props = defineProps<{
-    pay_period_no: number;
-    pay_year:      number;
-    email:         string;
-    is_approved?:  boolean;
-    initial_expenses?: TimesheetExpense[];
-}>();
-
-//------------------ emits ------------------
-const emit = defineEmits<{
-    (e:'close'): void;
-    (e: 'save', payload: {
-        pay_period_no: number;
-        pay_year:      number;
-        email:         string;
-        expenses: TimesheetExpense[];
-    }): void;
-    (e: 'error', err: ExpensesValidationError): void;
-}>();
-
-//------------------ q-select mapper ------------------
-const type_options = computed(()=> {
-    void locale.value;
-    return buildExpenseTypeOptions(EXPENSE_TYPE, t);
-})
-
-//------------------ refs and computed ------------------
-const files               = ref<File[] | null>(null);
-const is_readonly = computed(()=> !!props.is_approved);
-
-const { state: is_open_date_picker } = useToggle();
-const { draft, setType, reset, showAmount } = useExpenseDraft();
-const { validateAnd } = useExpenseForm();
-const { items, addFromDraft, removeAt, validateAll, payload } = useExpenseItems({
-    initial_expenses: props.initial_expenses,
-    draft,
-    is_approved: is_readonly,
-});
-const totals = computed(()=> computeExpenseTotals(items.value));
-
-//------------------ actions ------------------
-const onSave = () => {
-    try {
-        validateAll();
-        reset();
-        emit('save', buildExpenseSavePayload({
-            pay_period_no: props.pay_period_no,
-            pay_year:      props.pay_year,
-            email:         props.email,
-            expenses:      payload(),
-        }));
-
-    } catch(err: any) {
-        const e = err instanceof ExpensesValidationError
-            ? err
-            : new ExpensesValidationError({
-                status_code: 400,
-                message: String(err?.message || err)
-            });
-        emit('error', e);
-    }
-};
-
-const onFormSubmit = async () => {
-    try {
-        await validateAnd(async () => {
-            addFromDraft();
-            reset();
-        });
-    } catch (err: any) {
-        const e = err instanceof ExpensesValidationError
-            ? err
-            : new ExpensesValidationError({
-                status_code: 400,
-                message: String(err?.message || err)
-            });
-        emit('error', e);
-    }
-};
-
-const onClose = () => emit('close');
-
-</script>
-
-<template>
-    <div>
-        <!-- header (title with totals)-->
-        <q-item class="row justify-between">
-            <q-item-label header class="text-h6 col-auto"> 
-                {{ $t('timesheet.expense.title') }}
-            </q-item-label>
-        <q-item-section class="items-center col-auto">
-            <q-badge lines="1" class="q-pa-sm q-px-md" :label="$t('timesheet.expense.total_amount')  + ': ' + totals.amount.toFixed(2)"/>
-            <q-separator spaced/>
-            <q-badge lines="2" class="q-pa-sm q-px-md" :label="$t('timesheet.expense.total_mileage') + ': ' + totals.mileage.toFixed(1)"/>
-        </q-item-section>
-        </q-item>
-        <ExpenseList
-            :items="items"
-            :is_readonly="is_readonly"
-            @remove="removeAt"
-        />
-        <ExpenseForm
-            v-model:draft="draft"
-            v-model:files="files"
-            v-model:date-picker-open="is_open_date_picker"
-            :type_options="type_options"
-            :show_amount="showAmount"
-            :is_readonly="is_readonly"
-            :rules="rules"
-            :comment_max_length="COMMENT_MAX_LENGTH"
-            :set-type="setType"
-            @submit="onFormSubmit"
-        />
-        
-        <q-separator spaced/>
-        
-        <div class="row col-auto justify-end">
-            <!-- close btn -->
-            <q-btn
-                flat
-                class="q-mr-sm"
-                color="primary"
-                :label="$t('timesheet.cancel_button')"
-                @click="onClose"
-            />
-            <!-- save btn -->
-            <q-btn
-                color="primary"
-                unelevated
-                push
-                :disable="is_readonly || items.length === 0"
-                :label="$t('timesheet.save_button')"
-                @click="onSave"
-            />
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/shift/shift-crud-dialog.vue b/src/modules/timesheets/components/shift/shift-crud-dialog.vue
index efb02e9..b85f6c5 100644
--- a/src/modules/timesheets/components/shift/shift-crud-dialog.vue
+++ b/src/modules/timesheets/components/shift/shift-crud-dialog.vue
@@ -1,214 +1,149 @@
-<script setup lang="ts">
+<script
+    setup
+    lang="ts"
+>
+    import { computed, ref } from 'vue';
+    import { useShiftStore } from 'src/stores/shift-store';
+    import { useShiftApi } from 'src/modules/timesheets/composables/api/use-shift-api';
+    import { SHIFT_TYPES } from 'src/modules/timesheets/models/shift.models';
 
-import { computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { SHIFT_KEY, type ShiftKey, type ShiftPayload, type ShiftSelectOption } from '../../types/shift.types';
-import type { UpsertShiftsBody }   from '../../types/shift.interfaces';
-import { upsertShiftsByDate } from '../../composables/api/use-shift-api';
+    const { date_iso, mode, current_shift, is_open, close } = useShiftStore();
+    const { upsertOrDeleteShiftByEmployeeEmail } = useShiftApi();
 
-const { t } = useI18n();
+    const { employeeEmail } = defineProps<{
+        employeeEmail: string;
+    }>();
 
-const props = defineProps<{
-    mode:          'create' | 'edit' | 'delete';
-    dateIso:       string;
-    initialShift?: ShiftPayload | null;
-    shiftOptions:  ShiftSelectOption[];
-    email:         string;
-}>();
+    const isSubmitting = ref(false);
+    const errorBanner = ref<string | null>(null);
+    const conflicts = ref<Array<{ start_time: string; end_time: string; type: string }>>([]);
 
-const emit = defineEmits<{
-    'close': []
-    'saved': []
-}>();
+    const canSubmit = computed(() =>
+        mode === 'delete' ||
+        (current_shift.start_time.trim().length === 5 &&
+            current_shift.end_time.trim().length === 5 &&
+            current_shift.type !== undefined)
+    );
+</script>
 
-const isSubmitting = ref(false);
-const errorBanner  = ref<string | null>(null);
-const conflicts    = ref<Array<{start_time: string; end_time: string; type: string}>>([]);
-
-const opened    = defineModel<boolean>       (             { default: false });
-const startTime = defineModel<string>        ('startTime', { default: ''    });
-const endTime   = defineModel<string>        ('endTime'  , { default: ''    });
-const type      = defineModel<ShiftKey | ''> ('type'     , { default: ''    });
-const isRemote  = defineModel<boolean>       ('isRemote' , { default: false });
-const comment   = defineModel<string>        ('comment'  , { default: ''    });
-
-const isShiftKey = (val: unknown): val is ShiftKey => SHIFT_KEY.includes(val as ShiftKey);
-
-const buildNewShiftPayload = (): ShiftPayload => {
-    if(!isShiftKey(type.value)) throw new Error('Invalid shift type');
-    const trimmed = (comment.value ??  '').trim();
-    return {
-        start_time: startTime.value,
-        end_time:   endTime.value,
-        type:       type.value,
-        is_remote:  isRemote.value,
-        ...(trimmed ? { comment: trimmed } : {}),
-    };
-};
-
-const onSubmit = async () => {
-    errorBanner.value  = null;
-    conflicts.value    = [];
-    isSubmitting.value = true;
-
-    try{
-        let body: UpsertShiftsBody;
-        if(props.mode === 'create') {
-            body = { new_shift: buildNewShiftPayload() };
-        } else if (props.mode === 'edit') {
-            if(!props.initialShift) throw new Error('Missing initial Shift for edit');
-            body = { old_shift: props.initialShift, new_shift: buildNewShiftPayload() };
-        } else {
-            if (!props.initialShift) throw new Error('Missing initial Shift for delete.');
-            body = { old_shift: props.initialShift };
-        }
-        await upsertShiftsByDate(props.email, props.dateIso, body);
-        opened.value = false;
-        emit('saved');
-    } catch (error: any) {
-        const status = error?.status_code ?? error.response?.status ?? 500;
-
-        const apiConflicts = error?.response?.data?.conflicts ?? error?.data?.conflicts;
-        if(Array.isArray(apiConflicts)){
-            conflicts.value = apiConflicts.map((c:any)=> ({
-                start_time: String(c.start_time ?? ''),
-                end_time:   String(c.end_time   ?? ''),
-                type:       String(c.type       ?? ''),
-            }));
-        } else {
-            conflicts.value = [];
-        }
-
-        if      (status === 404) errorBanner.value = t('timesheet.shift.errors.not_found')
-        else if (status === 409) errorBanner.value = t('timesheet.shift.errors.overlap')
-        else if (status === 422) errorBanner.value = t('timesheet.shift.errors.invalid')
-        else                     errorBanner.value = t('timesheet.shift.errors.unknown')
-    //add conflicts.value error management
-    } finally {
-        isSubmitting.value = false;
-    }
-}
-
-const hydrateFromProps = () => {
-    if(props.mode === 'edit' || props.mode === 'delete') {
-        const shift = props.initialShift;
-        startTime.value = shift?.start_time ?? '';
-        endTime.value   = shift?.end_time ?? '';
-        type.value      = shift?.type ?? '';
-        isRemote.value  = !!shift?.is_remote;
-        comment.value   = (shift as any)?.comment ?? '';
-    } else {
-        startTime.value = '';
-        endTime.value   = '';
-        type.value      = '';
-        isRemote.value  = false;
-        comment.value   = '';
-    }
-};
-
-const canSubmit = computed(() => 
-    props.mode === 'delete' ||
-    (startTime.value.trim().length === 5 &&
-     endTime.value.trim().length   === 5 &&
-     isShiftKey(type.value))
-);
-
-watch(
-    ()=> [opened.value, props.mode, props.initialShift, props.dateIso],
-    ()=> { if (opened.value) hydrateFromProps();},
-    { immediate: true }
-);
-
-
-</script> 
- 
- <!-- create/edit/delete shifts dialog -->
 <template>
-    <q-dialog   v-model="opened"
-                persistent 
-                transition-show="fade" 
-                transition-hide="fade">
+    <q-dialog
+        v-model=" is_open"
+        persistent
+        transition-show="fade"
+        transition-hide="fade"
+    >
 
         <q-card class="q-pa-md">
             <div class="row items-center q-mb-sm">
-                <q-icon name="schedule" 
-                        size="24px"
-                        class="q-mr-sm"/>
+                <q-icon
+                    name="schedule"
+                    size="24px"
+                    class="q-mr-sm"
+                />
                 <div class="text-h6">
-                    {{ 
-                        props.mode === 'create' 
-                        ? $t('timesheet.shift.actions.add') 
-                        : props.mode === 'edit' 
-                        ? $t('timesheet.shift.actions.edit') 
-                        : $t('timesheet.shift.actions.delete')
+                    {{
+                        mode === 'create'
+                            ? $t('timesheet.shift.actions.add')
+                            : mode === 'update'
+                                ? $t('timesheet.shift.actions.edit')
+                                : $t('timesheet.shift.actions.delete')
                     }}
                 </div>
-                <q-space/>
-                <q-badge outline color="primary">
-                    {{ props.dateIso }}
+                <q-space />
+                <q-badge
+                    outline
+                    color="primary"
+                >
+                    {{ date_iso }}
                 </q-badge>
             </div>
-            
-            <q-separator spaced/>
-            
-            <div v-if="props.mode !== 'delete'" class="column q-gutter-md">
+
+            <q-separator spaced />
+
+            <div
+                v-if="mode !== 'delete'"
+                class="column q-gutter-md"
+            >
                 <div class="row ">
                     <div class="col">
-                        <q-input 
-                            v-model="startTime"
+                        <q-input
+                            v-model="current_shift.start_time"
                             :label="$t('timesheet.shift.fields.start')"
-                            filled dense
+                            filled
+                            dense
                             inputmode="numeric"
                             mask="##:##"
                         />
                     </div>
                     <div class="col">
-                        <q-input 
-                            v-model="endTime"
+                        <q-input
+                            v-model="current_shift.end_time"
                             :label="$t('timesheet.shift.fields.end')"
-                            filled dense 
-                            inputmode="numeric" 
-                            mask="##:##" 
+                            filled
+                            dense
+                            inputmode="numeric"
+                            mask="##:##"
                         />
                     </div>
                 </div>
                 <div class="row items-center">
                     <q-select
-                        v-model="type"
+                        v-model="current_shift.type"
                         options-dense
-                        :options="props.shiftOptions"
+                        :options="SHIFT_TYPES"
                         :label="$t('timesheet.shift.types.label')"
                         class="col"
                         color="primary"
-                        filled dense
+                        filled
+                        dense
                         hide-dropdown-icon
                         emit-value
                         map-options
                     />
-                    <q-toggle 
-                        v-model="isRemote"
-                        :label="$t('timesheet.shift.types.REMOTE')" 
-                        class="col-auto" />
+                    <q-toggle
+                        v-model="current_shift.is_remote"
+                        :label="$t('timesheet.shift.types.REMOTE')"
+                        class="col-auto"
+                    />
                 </div>
-                <q-input 
-                    v-model="comment"
-                    type="textarea" 
-                    autogrow filled dense 
-                    :label="$t('timesheet.shift.fields.header_comment')" 
-                    :counter="true" :maxlength="512" 
+                <q-input
+                    v-model="current_shift.comment"
+                    type="textarea"
+                    autogrow
+                    filled
+                    dense
+                    :label="$t('timesheet.shift.fields.header_comment')"
+                    :counter="true"
+                    :maxlength="512"
                 />
             </div>
 
-            <div v-else class="q-pa-md">
+            <div
+                v-else
+                class="q-pa-md"
+            >
                 {{ $t('timesheet.shift.actions.delete_confirmation_msg') }}
             </div>
 
-            <div v-if="errorBanner" class="q-mt-md">
-                <q-banner dense class="bg-red-2 text-negative">{{ errorBanner }}</q-banner>
-                <div v-if="conflicts.length" class="q-mt-xs">
+            <div
+                v-if="errorBanner"
+                class="q-mt-md"
+            >
+                <q-banner
+                    dense
+                    class="bg-red-2 text-negative"
+                >{{ errorBanner }}</q-banner>
+                <div
+                    v-if="conflicts.length"
+                    class="q-mt-xs"
+                >
                     <div class="text-caption">Conflits :</div>
                     <ul class="q-pl-md q-mt-xs">
-                        <li v-for="(c, i) in conflicts" :key="i">
+                        <li
+                            v-for="(c, i) in conflicts"
+                            :key="i"
+                        >
                             {{ c.start_time }}–{{ c.end_time }} ({{ c.type }})
                         </li>
                     </ul>
@@ -218,28 +153,20 @@ watch(
             <q-separator spaced />
 
             <div class="row justify-end q-gutter-sm">
-                <q-btn 
-                    flat 
-                    color="grey-8" 
-                    :label="$t('timesheet.cancel_button')" 
-                    @click="() => { opened = false; emit('close');}" 
+                <q-btn
+                    flat
+                    color="grey-8"
+                    :label="$t('timesheet.cancel_button')"
+                    @click="close"
                 />
                 <q-btn
-                    v-if="props.mode === 'delete'"
-                    outline color="negative" 
-                    icon="cancel" 
-                    :label="$t('timesheet.delete_button')"
+                    color="primary"
+                    icon="save_alt"
+                    :label="mode === 'delete' ? $t('timesheet.delete_button') : $t('timesheet.save_button')"
                     :loading="isSubmitting"
                     :disable="!canSubmit"
-                    @click="onSubmit"
+                    @click="upsertOrDeleteShiftByEmployeeEmail(employeeEmail)"
                 />
-                <q-btn  v-else
-                        color="primary" 
-                        icon="save_alt" 
-                        :label="$t('timesheet.save_button')"
-                        :loading="isSubmitting"
-                        :disable="!canSubmit"
-                        @click="onSubmit"/>
             </div>
         </q-card>
     </q-dialog>
diff --git a/src/modules/timesheets/components/shift/shift-list-legend.vue b/src/modules/timesheets/components/shift/shift-list-legend.vue
index 035d78d..82f5f7a 100644
--- a/src/modules/timesheets/components/shift/shift-list-legend.vue
+++ b/src/modules/timesheets/components/shift/shift-list-legend.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import type { ShiftLegendItem } from '../../types/shift.types';
+import type { ShiftLegendItem } from 'src/modules/timesheets/models/shift.models';
 
 const { t } = useI18n();
 const props = defineProps<{ isLoading: boolean; }>();
 
 const legend: ShiftLegendItem[] = [
-    {type:'REGULAR'  , color: 'secondary', label_key: 'timesheet.shift.types.REGULAR', text_color: 'grey-8'},
-    {type:'EVENING'  , color: 'warning'  , label_key: 'timesheet.shift.types.EVENING'},
-    {type:'EMERGENCY', color: 'amber-10' , label_key: 'timesheet.shift.types.EMERGENCY'},
-    {type:'OVERTIME' , color: 'negative' , label_key: 'timesheet.shift.types.OVERTIME'},
-    {type:'VACATION' , color: 'purple-10', label_key: 'timesheet.shift.types.VACATION'},
-    {type:'HOLIDAY'  , color: 'purple-8' , label_key: 'timesheet.shift.types.HOLIDAY'},
-    {type:'SICK'     , color: 'grey-8'   , label_key: 'timesheet.shift.types.SICK'},
+    {type:'REGULAR'  , color: 'secondary', label_type: 'timesheet.shift.types.REGULAR', text_color: 'grey-8'},
+    {type:'EVENING'  , color: 'warning'  , label_type: 'timesheet.shift.types.EVENING'},
+    {type:'EMERGENCY', color: 'amber-10' , label_type: 'timesheet.shift.types.EMERGENCY'},
+    {type:'OVERTIME' , color: 'negative' , label_type: 'timesheet.shift.types.OVERTIME'},
+    {type:'VACATION' , color: 'purple-10', label_type: 'timesheet.shift.types.VACATION'},
+    {type:'HOLIDAY'  , color: 'purple-8' , label_type: 'timesheet.shift.types.HOLIDAY'},
+    {type:'SICK'     , color: 'grey-8'   , label_type: 'timesheet.shift.types.SICK'},
 ]
 
 const shift_type_legend = computed(()=>
-    legend.map(item => ({ ...item, label: t(item.label_key)} ))
+    legend.map(item => ({ ...item, label: t(item.label_type)} ))
 );
 
 </script>
diff --git a/src/modules/timesheets/components/shift/shift-list-row.vue b/src/modules/timesheets/components/shift/shift-list-row.vue
index 62586f8..3e18540 100644
--- a/src/modules/timesheets/components/shift/shift-list-row.vue
+++ b/src/modules/timesheets/components/shift/shift-list-row.vue
@@ -1,85 +1,85 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import type { Shift } from '../../types/shift.interfaces';
+    import { computed } from 'vue';
+    import type { Shift } from 'src/modules/timesheets/models/shift.models';
 
-/* eslint-disable */
-    const props = defineProps<{
+
+    const { shift } = defineProps<{
         shift: Shift;
     }>();
 
     const emit = defineEmits<{
-        'save-comment'  : [payload: { comment: string; shift: Shift }];
-        'request-edit'  : [payload: { shift: Shift }];
-        'request-delete': [payload: { shift: Shift }];
+        'save-comment': [comment: string, shift: Shift];
+        'request-update': [shift: Shift];
+        'request-delete': [shift: Shift];
     }>();
 
-    const has_comment = computed(()=> {
-        const comment = (props.shift as any).description ?? (props.shift as any).comment ?? '';
+    const has_comment = computed(() => {
+        const comment = (shift as any).description ?? (shift as any).comment ?? '';
         return typeof comment === 'string' && comment.trim().length > 0;
     })
-    const comment_icon  = computed(()=> (has_comment.value ? 'announcement' : 'chat_bubble_outline'));
-    const comment_color = computed(()=> (has_comment.value ?      'primary' : 'grey-8'));
+    const comment_icon = computed(() => (has_comment.value ? 'announcement' : 'chat_bubble_outline'));
+    const comment_color = computed(() => (has_comment.value ? 'primary' : 'grey-8'));
 
-    
     const get_shift_color = (type: string): string => {
-        switch(type) {
-            case 'REGULAR':     return 'secondary';
-            case 'EVENING':     return 'warning';
-            case 'EMERGENCY':   return 'amber-10';
-            case 'OVERTIME':    return 'negative';
-            case 'VACATION':    return 'purple-10';
-            case 'HOLIDAY':     return 'purple-10';
-            case 'SICK':        return 'grey-8';
-            default :           return 'transparent';
+        switch (type) {
+            case 'REGULAR': return 'secondary';
+            case 'EVENING': return 'warning';
+            case 'EMERGENCY': return 'amber-10';
+            case 'OVERTIME': return 'negative';
+            case 'VACATION': return 'purple-10';
+            case 'HOLIDAY': return 'purple-10';
+            case 'SICK': return 'grey-8';
+            default: return 'transparent';
         }
     };
 
     const get_text_color = (type: string): string => {
-        switch(type) {
+        switch (type) {
             case 'REGULAR': return 'grey-8';
-            case '':        return 'grey-5';
-            default:        return 'white';
+            case '': return 'grey-5';
+            default: return 'white';
         }
     }
-const on_click_edit    = (type: string) => {
-    if(type !== '') { emit('request-edit', { shift: props.shift })};
-}
-const on_click_delete  = () => emit('request-delete', { shift: props.shift });
 
+    const onClickUpdate = (type: string) => {
+        if (type !== '') { emit('request-update', shift) };
+    }
+
+    const onClickDelete = () => emit('request-delete', shift);
 </script>
 
 <template>
-    <q-card-section 
+    <q-card-section
         horizontal
         class="q-pa-none text-uppercase text-center items-center rounded-10"
-        :class="props.shift.type"
+        :class="shift.type"
         style="line-height: 1;"
-        @click.stop="on_click_edit(props.shift.type)"
+        @click.stop="onClickUpdate(shift.type)"
     >
         <!-- punch-in timestamps -->
         <q-card-section class="q-pa-none col">
-            <q-item-label 
+            <q-item-label
                 class="text-weight-bolder q-pa-xs rounded-5"
-                :class="'bg-' + get_shift_color(props.shift.type) + ' text-' + get_text_color(props.shift.type)"
+                :class="'bg-' + get_shift_color(shift.type) + ' text-' + get_text_color(shift.type)"
                 style="font-size: 1.5em; line-height: 80% !important;"
             >
-                {{ props.shift.start_time }}
+                {{ shift.start_time }}
             </q-item-label>
         </q-card-section>
 
         <!-- arrows pointing to punch-out timestamps -->
         <q-card-section
-            horizontal 
+            horizontal
             class="items-center justify-center q-mx-sm col"
         >
-            <div 
+            <div
                 v-for="icon_data, index in [
-                    { transform: 'transform: translateX(5px);', color: 'accent' }, 
+                    { transform: 'transform: translateX(5px);', color: 'accent' },
                     { transform: 'transform: translateX(-5px);', color: 'primary' }]"
                 :key="index"
-            > 
+            >
                 <q-icon
-                    v-if="props.shift.type"
+                    v-if="shift.type"
                     name="double_arrow"
                     :color="icon_data.color"
                     size="24px"
@@ -90,22 +90,20 @@ const on_click_delete  = () => emit('request-delete', { shift: props.shift });
 
         <!-- punch-out timestamps -->
         <q-card-section class="q-pa-none col">
-            <q-item-label 
+            <q-item-label
                 class="text-weight-bolder text-white q-pa-xs rounded-5"
-                :class="'bg-' + get_shift_color(props.shift.type) + ' text-' + get_text_color(props.shift.type)"
+                :class="'bg-' + get_shift_color(shift.type) + ' text-' + get_text_color(shift.type)"
                 style="font-size: 1.5em; line-height: 80% !important;"
             >
-                {{ props.shift.end_time }}
+                {{ shift.end_time }}
             </q-item-label>
         </q-card-section>
 
         <!-- comment and expenses buttons -->
-        <q-card-section
-            class="col q-pa-none text-right"
-        >
+        <q-card-section class="col q-pa-none text-right">
             <!-- comment btn -->
             <q-icon
-                v-if="props.shift.type"
+                v-if="shift.type"
                 :name="comment_icon"
                 :color="comment_color"
                 class="q-pa-none q-mx-xs"
@@ -113,23 +111,23 @@ const on_click_delete  = () => emit('request-delete', { shift: props.shift });
             />
             <!-- expenses btn -->
             <q-btn
-                v-if="props.shift.type"
-                flat 
+                v-if="shift.type"
+                flat
                 dense
                 color='grey-8'
-                icon="attach_money"        
+                icon="attach_money"
                 class="q-pa-none q-mx-xs"
-            /> 
+            />
             <!-- delete btn -->
             <q-btn
-                v-if="props.shift.type"
+                v-if="shift.type"
                 push
                 dense
                 size="sm"
                 color="red-6"
                 icon="close"
                 class="q-ml-xs"
-                @click.stop="on_click_delete"
+                @click.stop="onClickDelete"
             />
         </q-card-section>
     </q-card-section>
diff --git a/src/modules/timesheets/components/shift/shift-list.vue b/src/modules/timesheets/components/shift/shift-list.vue
index 340478e..6b6a4ef 100644
--- a/src/modules/timesheets/components/shift/shift-list.vue
+++ b/src/modules/timesheets/components/shift/shift-list.vue
@@ -1,46 +1,49 @@
-<script setup lang="ts">
-import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
-import detailedShiftListHeader from './detailed-shift-list-header.vue';
-import detailedShiftListRow from './detailed-shift-list-row.vue';
-import { date } from 'quasar';
-import type { TimesheetPayPeriodDetailsOverview } from '../../types/timesheet.interfaces';
-import type { Shift } from '../../types/shift.interfaces';
-import { default_shift } from '../../types/shift.defaults';
+<script
+    setup
+    lang="ts"
+>
+    import { date } from 'quasar';
+    import ShiftListHeader from 'src/modules/timesheets/components/shift/shift-list-header.vue';
+    import ShiftListRow from 'src/modules/timesheets/components/shift/shift-list-row.vue';
+    import ShiftListLegend from 'src/modules/timesheets/components/shift/shift-list-legend.vue';
+    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
+    import { useShiftStore } from 'src/stores/shift-store';
+    import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
+    import { type Shift, default_shift } from 'src/modules/timesheets/models/shift.models';
+    import type { PayPeriodDetails } from 'src/modules/timesheets/models/pay-period-details.models';
+    import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
 
     const props = defineProps<{
-        rawData: TimesheetPayPeriodDetailsOverview;
+        rawData: PayPeriodDetails;
         currentPayPeriod: PayPeriod;
     }>();
-    
-    const emit = defineEmits<{
-        'request-add'    : [payload: { date: string }];
-        'request-edit'   : [payload: { date: string; shift: Shift }];
-        'request-delete' : [payload: { date: string; shift: Shift }];
-        // 'save-comment'   : [payload: { date: string; shift: Shift; comment: string }];
-    }>();
 
-    const get_date_from_short = (short_date: string): 
-        Date   => new Date(props.currentPayPeriod.pay_year.toString() + '/' + short_date);
-    const to_iso_date         = (short_date: string): 
-        string => date.formatDate(get_date_from_short(short_date), 'YYYY-MM-DD');
+    const timesheet_api = useTimesheetApi();
+    const { openCreate, openDelete, openUpdate } = useShiftStore();
+
+    const get_date_from_short = (short_date: string): Date => {
+        return new Date(props.currentPayPeriod.pay_year.toString() + '/' + short_date);
+    };
+
+    const to_iso_date = (short_date: string): string => {
+        return date.formatDate(get_date_from_short(short_date), 'YYYY-MM-DD');
+    };
+
+    const shifts_or_placeholder = (shifts: Shift[]): Shift[] => {
+        return shifts.length > 0 ? shifts : [default_shift];
+    };
 
-    const shifts_or_placeholder = (shifts: Shift[]):
-        Shift[] => { return shifts.length > 0 ? shifts : [default_shift]; };
-    
     const getDate = (shift_date: string): Date => {
         return new Date(props.currentPayPeriod.pay_year.toString() + '/' + shift_date);
     };
-
-    const on_request_add    = (iso_date: string)                                => emit('request-add',    { date: iso_date });
-    const on_request_edit   = (iso_date: string, shift: Shift)                  => emit('request-edit',   { date: iso_date, shift });
-    const on_request_delete = (iso_date: string, shift: Shift)                  => emit('request-delete', { date: iso_date, shift });
-    // const on_save_comment   = (iso_date: string, shift: Shift, comment: string) => emit('save-comment',   { date: iso_date, shift, comment });
-
 </script>
 
 <template>
-    <div 
-        v-for="week, index in props.rawData"
+    <!-- shift's colored legend -->
+    <ShiftListLegend :is-loading="false" />
+
+    <div
+        v-for="week, index in props.rawData.weeks"
         :key="index"
         class="q-px-xs q-pt-xs rounded-5 col"
     >
@@ -51,35 +54,34 @@ import { default_shift } from '../../types/shift.defaults';
             bordered
             class="row items-center rounded-10 q-mb-xs"
         >
+
             <!-- Dates column -->
             <q-card-section class="col-auto q-pa-xs text-white">
-                <div 
-                    class="bg-primary rounded-10 q-pa-xs text-center" 
-                >
-                    <q-item-label 
+                <div class="bg-primary rounded-10 q-pa-xs text-center">
+                    <q-item-label
                         style="font-size: 0.7em;"
                         class="text-uppercase"
-                    >{{ $d(getDate(day.short_date), {weekday: $q.screen.lt.md ? 'short' : 'long'}) }}</q-item-label>
-                    <q-item-label 
+                    >{{ $d(getDate(day.short_date), { weekday: $q.screen.lt.md ? 'short' : 'long' }) }}</q-item-label>
+                    <q-item-label
                         class="text-weight-bolder"
                         style="font-size: 2.5em; line-height: 90% !important;"
                     >{{ day.short_date.split('/')[1] }}</q-item-label>
-                    <q-item-label 
+                    <q-item-label
                         style="font-size: 0.7em;"
                         class="text-uppercase"
-                    >{{ $d(getDate(day.short_date), {month: $q.screen.lt.md ? 'short' : 'long'}) }}</q-item-label>
+                    >{{ $d(getDate(day.short_date), { month: $q.screen.lt.md ? 'short' : 'long' }) }}</q-item-label>
                 </div>
             </q-card-section>
 
             <!-- List of shifts column -->
             <q-card-section class="col q-pa-none">
-                <detailedShiftListHeader />
-                <detailedShiftListRow
+                <ShiftListHeader />
+                <ShiftListRow
                     v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
-                    :key="shift_index" 
+                    :key="shift_index"
                     :shift="shift"
-                    @request-edit="  ({ shift }) => on_request_edit(to_iso_date(day.short_date), shift )"
-                    @request-delete="({ shift }) => on_request_delete(to_iso_date(day.short_date), shift )"
+                    @request-update="value => openUpdate(to_iso_date(day.short_date), value)"
+                    @request-delete="value => openDelete(to_iso_date(day.short_date), value)"
                 />
             </q-card-section>
             <!-- add shift btn column -->
@@ -89,7 +91,7 @@ import { default_shift } from '../../types/shift.defaults';
                     color="primary"
                     icon="more_time"
                     class="q-pa-sm"
-                    @click="on_request_add(to_iso_date(day.short_date))"
+                    @click="openCreate(to_iso_date(day.short_date))"
                 />
             </q-card-section>
         </q-card>
diff --git a/src/modules/timesheets/components/timesheet/timesheet-save-payload.vue b/src/modules/timesheets/components/timesheet/timesheet-save-payload.vue
deleted file mode 100644
index 9cc7c8b..0000000
--- a/src/modules/timesheets/components/timesheet/timesheet-save-payload.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { CreateShiftPayload, Shift } from '../../types/shift.interfaces';
-
-/* eslint-disable */
-const props = defineProps<{
-    rows:       Shift[];
-    week_dates: string[];
-}>();
-
-const emit = defineEmits<{
-    (e: 'save', payload: CreateShiftPayload[]): void;
-}>();
-
-const buildPayload = (): CreateShiftPayload[] => {
-    const dates = props.week_dates;
-    if(!Array.isArray(dates) || dates.length === 0) return [];
-
-    return props.rows.flatMap((row, idx) => {
-        const date = dates[idx];
-        const has_data = !!(row.type || row.start_time || row.end_time || row.comment);
-        if(!date || !has_data) return [];
-
-        const item: CreateShiftPayload = {
-            date,
-            type: row.type,
-            start_time: row.start_time,
-            end_time: row.end_time,
-            is_remote: row.is_remote,
-        };
-        if(row.comment) item.comment = row.comment;
-        return[item];
-    })
-};
-
-const payload = computed(buildPayload);
-const canSave = computed(()=> payload.value.length > 0);
-
-const saveWeek = () => {
-    emit('save', payload.value);
-}
-
-</script>
-
-<template>
-        <!-- save button -->
-        <q-btn
-            color="primary"
-            icon="save_alt"
-            class="col-1"
-            push
-            rounded
-            :disable="!canSave"
-            @click="saveWeek"        
-        >
-            <q-tooltip
-                anchor="top middle"
-                self="center middle"
-                class="bg-primary text-uppercase text-weight-bold"
-            >{{ $t('timesheet.save_button') }}
-            </q-tooltip>
-        </q-btn>
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/timesheet/timesheet-wrapper.vue b/src/modules/timesheets/components/timesheet/timesheet-wrapper.vue
new file mode 100644
index 0000000..fa4f330
--- /dev/null
+++ b/src/modules/timesheets/components/timesheet/timesheet-wrapper.vue
@@ -0,0 +1,68 @@
+<script
+    setup
+    lang="ts"
+>
+    import ShiftList from 'src/modules/timesheets/components/shift/shift-list.vue';
+    import ShiftCrudDialog from 'src/modules/timesheets/components/shift/shift-crud-dialog.vue';
+    import ExpenseCrudDialog from 'src/modules/timesheets/components/expenses/expense-crud-dialog.vue';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
+    import { useExpensesStore } from 'src/stores/expense-store';
+    import { onMounted } from 'vue';
+
+    const { openExpensesDialog } = useExpensesStore();
+
+    const { employeeEmail } = defineProps<{
+        employeeEmail: string;
+    }>();
+
+    const { pay_period, pay_period_details, is_loading } = useTimesheetStore();
+    const { getPayPeriodDetailsByDate, getPreviousPayPeriodDetails, getNextPayPeriodDetails } = useTimesheetApi();
+
+    onMounted(() => {
+
+    });
+</script>
+
+<template>
+    <q-card
+        flat
+        class=" col q-mt-md bg-secondary"
+    >
+        <q-inner-loading
+            :showing="is_loading"
+            color="primary"
+        />
+
+        <q-card-section horizontal>
+            <!-- expenses button -->
+            <q-btn
+                color="primary"
+                unelevated
+                icon="receipt_long"
+                :label="$t('timesheet.expense.open_btn')"
+                @click="openExpensesDialog"
+            />
+
+            <!-- navigation btn -->
+            <PayPeriodNavigator
+                @date-selected="getPayPeriodDetailsByDate"
+                @pressed-previous-button="getPreviousPayPeriodDetails"
+                @pressed-next-button="getNextPayPeriodDetails"
+            />
+        </q-card-section>
+
+        <q-card-section>
+            <ShiftList
+                :raw-data="pay_period_details"
+                :current-pay-period="pay_period"
+            />
+        </q-card-section>
+    </q-card>
+
+    <!-- dialog for Expenses or Shifts -->
+    <ExpenseCrudDialog :email="employeeEmail" />
+
+    <!-- shift crud dialog -->
+    <ShiftCrudDialog :employee-email="employeeEmail" />
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/composables/api/use-expense-api.ts b/src/modules/timesheets/composables/api/use-expense-api.ts
index 899e3d0..f4aa15d 100644
--- a/src/modules/timesheets/composables/api/use-expense-api.ts
+++ b/src/modules/timesheets/composables/api/use-expense-api.ts
@@ -1,81 +1,21 @@
-import { api } from "src/boot/axios";
-import { isProxy, toRaw } from "vue";
+import { useTimesheetStore } from "src/stores/timesheet-store";
+import { useExpenseItems } from "src/modules/timesheets/composables/use-expense-items";
 import { normalizeExpense, validateExpenseUI } from "../../utils/expenses-validators";
-import type { ExpenseType } from "../../types/expense.types";
-import { ExpensesApiError } from "../../types/expense-validation.interface";
-import type { 
-    ExpensePayload, 
-    PayPeriodExpenses, 
-    TimesheetExpense, 
-    UpsertExpensesBody, 
-    UpsertExpensesResponse 
-} from "../../types/expense.interfaces";
+import type { ExpensesApiError } from "src/modules/timesheets/models/expense.validation";
+import type { Expense, ExpenseType, PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
 
-/* eslint-disable */
-const toPlain = <T extends object>(obj:T): T => {
-    const raw = isProxy(obj) ? toRaw(obj) : obj;
-    if( typeof (globalThis as any).structuredClone === 'function') {
-        return (globalThis as any).structuredClone(raw);
-    }
-    return JSON.parse(JSON.stringify(raw));
-};
+const { pay_period } = useTimesheetStore();
+const expense_items = useExpenseItems(draft);
 
-const normalizePayload = (expense: ExpensePayload): ExpensePayload => {
-    const exp = normalizeExpense(expense as unknown as TimesheetExpense);
-    const out: ExpensePayload = {
-        date: exp.date,
-        type: exp.type as ExpenseType,
-        comment: exp.comment || '',
-    };
-    if(typeof exp.amount  === 'number') out.amount  = exp.amount;
-    if(typeof exp.mileage === 'number') out.mileage = exp.mileage;
-    return out;
-}
+//PUT by employee_email, year and period no
+export const putPayPeriodExpensesByEmployeeEmail = async (employee_email: string, expenses: Expense[]): Promise<PayPeriodExpenses> => {
+    const encoded_email = encodeURIComponent(employee_email);
+    const encoded_year  = encodeURIComponent(String(pay_period.pay_year));
+    const encoded_pay_period_no = encodeURIComponent(String(pay_period.pay_period_no));
 
-//GET by email, year and period no
-export const getPayPeriodExpenses = async (
-    email: string,
-    pay_year: number,
-    pay_period_no: number
-) : Promise<PayPeriodExpenses> => {
-    const encoded_email = encodeURIComponent(email);
-    const encoded_year  = encodeURIComponent(String(pay_year));
-    const encoded_pay_period_no = encodeURIComponent(String(pay_period_no));
+    const flat_expenses = expenses.map(expenses): [];
 
-    try {
-        const { data } = await api.get<PayPeriodExpenses>(`/expenses/${encoded_email}/${encoded_year}/${encoded_pay_period_no}`);
-
-        const items = Array.isArray(data.expenses) ? data.expenses.map(normalizeExpense) : [];
-        return {
-            ...data,
-            expenses: items,
-        };
-    } catch(err:any) {
-        const status_code: number = err?.response?.status ?? 500;
-        const data = err?.response?.data ?? {};
-        throw new ExpensesApiError({
-            status_code,
-            error_code: data.error_code,
-            message: data.message || data.error || err.message,
-            context: data.context,
-        });
-    }
-};
-
-//PUT by email, year and period no
-export const putPayPeriodExpenses = async (
-    email: string,
-    pay_year: number,
-    pay_period_no: number,
-    expenses: TimesheetExpense[]
-): Promise<PayPeriodExpenses> => {
-    const encoded_email = encodeURIComponent(email);
-    const encoded_year  = encodeURIComponent(String(pay_year));
-    const encoded_pay_period_no = encodeURIComponent(String(pay_period_no));
-
-    const plain = Array.isArray(expenses) ? expenses.map(toPlain): [];
-
-    const normalized: ExpensePayload[] = plain.map((exp) => {
+    const normalized: Expense[] = plain.map((exp) => {
         const norm = normalizeExpense(exp as TimesheetExpense);
         validateExpenseUI(norm, 'expense_item');        
         return normalizePayload(norm as unknown as ExpensePayload);
@@ -85,10 +25,10 @@ export const putPayPeriodExpenses = async (
 
     try {
         const { data } = await api.put<UpsertExpensesResponse>(
-            `/expenses/${encoded_email}/${encoded_year}/${encoded_pay_period_no}`,
-            body,
-            { headers: {'Content-Type': 'application/json'}}
-        );
+        //     `/expenses/${encoded_email}/${encoded_year}/${encoded_pay_period_no}`,
+        //     body,
+        //     { headers: {'Content-Type': 'application/json'}}
+        // );
 
         const items = Array.isArray(data?.data?.expenses)
         ? data.data.expenses.map(normalizeExpense)
@@ -97,7 +37,7 @@ export const putPayPeriodExpenses = async (
             ...(data?.data ?? {
                 pay_period_no,
                 pay_year,
-                employee_email: email,
+                employee_email: employee_email,
                 is_approved: false,
                 expenses: [],
                 totals: {amount: 0, mileage: 0},
@@ -117,12 +57,12 @@ export const putPayPeriodExpenses = async (
 };
 
 export const postPayPeriodExpenses = async (
-  email: string,
+  employee_email: string,
   pay_year: number,
   pay_period_no: number,
   new_expenses: TimesheetExpense[]
 ): Promise<PayPeriodExpenses> => {
-  const encoded_email = encodeURIComponent(email);
+  const encoded_email = encodeURIComponent(employee_email);
   const encoded_year = encodeURIComponent(String(pay_year));
   const encoded_pp = encodeURIComponent(String(pay_period_no));
 
@@ -148,7 +88,7 @@ export const postPayPeriodExpenses = async (
       ...(data?.data ?? {
         pay_period_no,
         pay_year,
-        employee_email: email,
+        employee_email: employee_email,
         is_approved: false,
         expenses: [],
         totals: { amount: 0, mileage: 0 },
diff --git a/src/modules/timesheets/composables/api/use-shift-api.ts b/src/modules/timesheets/composables/api/use-shift-api.ts
index 855738b..a7f043c 100644
--- a/src/modules/timesheets/composables/api/use-shift-api.ts
+++ b/src/modules/timesheets/composables/api/use-shift-api.ts
@@ -1,141 +1,85 @@
-import { api } from "src/boot/axios";
-import { isProxy, toRaw } from "vue";
-import { DATE_FORMAT_PATTERN, TIME_FORMAT_PATTERN } from "../../constants/shift.constants";
-import type { ShiftPayload } from "../../types/shift.types";
-import type { UpsertShiftsBody, UpsertShiftsResponse } from "../../types/shift.interfaces";
-/* eslint-disable */
+import { unwrapAndClone } from "src/utils/unwrap-and-clone";
+import { DATE_FORMAT_PATTERN, TIME_FORMAT_PATTERN } from "src/modules/timesheets/constants/shift.constants";
+import { GenericApiError } from "src/modules/timesheets/models/expense.validation";
+import { useShiftStore } from "src/stores/shift-store";
+import { default_shift, type Shift, type UpsertShift } from "src/modules/timesheets/models/shift.models";
+import { deepEqual } from "src/utils/deep-equal";
 
-//normalize payload to match backend data
-export const normalize_comment = (input?: string): string | undefined => {
-    if ( typeof input === 'undefined' || input === null) return undefined;
-    const trimmed = String(input).trim();
-    return trimmed.length ? trimmed : undefined;
-}
+export const useShiftApi = () => {
+    const shift_store = useShiftStore();
 
-export const normalize_payload = (payload: ShiftPayload): ShiftPayload => {
-    const comment = normalize_comment(payload.comment);
-    return {
-        start_time: payload.start_time,
-        end_time:   payload.end_time,
-        type:       payload.type,
-        is_remote:  Boolean(payload.is_remote),
-        ...(comment !== undefined ? { comment } : {}),
-    };
-};
+    const normalizeShiftPayload = (shift: Shift): Shift => {
+        const comment = shift.comment?.trim() || undefined;
 
-const toPlain = <T extends object>(obj: T): T => {
-    const raw = isProxy(obj) ? toRaw(obj): obj;
-    if(typeof (globalThis as any).structuredClone === 'function') {
-        return (globalThis as any).structuredClone(raw);
-    }
-    return JSON.parse(JSON.stringify(raw));
-}
-
-//error handling
-export interface ApiErrorPayload {
-    status_code: number;
-    error_code?: string;
-    message?:    string;
-    context?:    Record<string, unknown>;
-}
-
-export class UpsertShiftsError extends Error {
-    status_code: number;
-    error_code?: string | undefined;
-    context?:    Record<string, unknown> | undefined;
-    constructor(payload: ApiErrorPayload) {
-        super(payload.message || 'Request failed');
-        this.name        = 'UpsertShiftsError';
-        this.status_code = payload.status_code;
-        this.error_code  = payload.error_code;
-        this.context     = payload.context;
-    }
-}
-
-const parseHHMM = (s:string): [number, number] => {
-    const m = /^(\d{2}):(\d{2})$/.exec(s);
-    if(!m) {
-        throw new UpsertShiftsError({ status_code: 400, message: `Invalid time format: ${s}. Expected HH:MM.`});
-    }
-
-    const h   = Number(m[1]);
-    const min = Number(m[2]);
-
-    if(Number.isNaN(h) || Number.isNaN(min) || h < 0 || h> 23 || min < 0 || min > 59) {
-        throw new UpsertShiftsError({ status_code: 400, message: `Invalid time value: ${s}.`})
-    }
-    return [h, min];
-}
-
-const toMinutes = (hhmm: string): number => {
-    const [h,m] = parseHHMM(hhmm);
-    return h * 60 + m;
-}
-
-const validateShift = (payload: ShiftPayload, label: 'old_shift'|'new_shift') => {
-    if(!TIME_FORMAT_PATTERN.test(payload.start_time) || !TIME_FORMAT_PATTERN.test(payload.end_time)) {
-        throw new UpsertShiftsError({
-            status_code: 400,
-            message: `Invalid time format in ${label}. Expected HH:MM`,
-            context: { [label]: payload }
-        });
-    }
-
-    if(toMinutes(payload.end_time) <= toMinutes(payload.start_time)) {
-        throw new UpsertShiftsError({
-            status_code: 400,
-            message: `Invalid time range in ${label}. The End time must be after the Start time`,
-            context: { [label]: payload}
-        });
-    }
-}
-
-export const upsertShiftsByDate = async (
-    email: string,
-    date: string,
-    body: UpsertShiftsBody,
-): Promise<UpsertShiftsResponse> => {
-
-    if (!DATE_FORMAT_PATTERN.test(date)){
-        throw new UpsertShiftsError({
-            status_code: 400,
-            message: 'Invalid date format, expected YYYY-MM-DD',
-        });
-    }
-
-    const flatBody: UpsertShiftsBody = {
-        ...(body.old_shift ? { old_shift: toPlain(body.old_shift) }: {}),
-        ...(body.new_shift ? { new_shift: toPlain(body.new_shift) }: {}),
-    };
-
-    const normalized: UpsertShiftsBody = {
-        ...(flatBody.old_shift ? { old_shift: normalize_payload(flatBody.old_shift) } : {}),
-        ...(flatBody.new_shift ? { new_shift: normalize_payload(flatBody.new_shift) } : {}),
-    };
-
-    if(normalized.old_shift) validateShift(normalized.old_shift, 'old_shift');
-    if(normalized.new_shift) validateShift(normalized.new_shift, 'new_shift');
-
-    const encoded_email = encodeURIComponent(email);
-    const encoded_date  = encodeURIComponent(date);
-
-    //error handling to be used with notify in case of bad input
-    try {
-        const { data } = await api.put<UpsertShiftsResponse>(
-            `/shifts/upsert/${encoded_email}/${encoded_date}`,
-            normalized,
-            { headers: {'content-type': 'application/json'}}
-        );
-        return data;
-    } catch (err: any) {
-        const status_code: number = err?.response?.status ?? 500;
-        const data = err?.response?.data ?? {};
-        const payload: ApiErrorPayload = {
-            status_code,
-            error_code: data.error_code,
-            message: data.message || data.error || err.message,
-            context: data.context,
+        return {
+            date: shift.date,
+            start_time: shift.start_time,
+            end_time: shift.end_time,
+            type: shift.type,
+            is_approved: false,
+            is_remote: shift.is_remote,
+            comment: comment,
         };
-        throw new UpsertShiftsError(payload);
-    }
-};
\ No newline at end of file
+    };
+
+    const parseHHMM = (s: string): [number, number] => {
+        const m = /^(\d{2}):(\d{2})$/.exec(s);
+
+        if (!m) {
+            throw new GenericApiError({ status_code: 400, message: `Invalid time format: ${s}. Expected HH:MM.` });
+        }
+
+        const h = Number(m[1]);
+        const min = Number(m[2]);
+
+        if (Number.isNaN(h) || Number.isNaN(min) || h < 0 || h > 23 || min < 0 || min > 59) {
+            throw new GenericApiError({ status_code: 400, message: `Invalid time value: ${s}.` })
+        }
+        return [h, min];
+    };
+
+    const toMinutes = (hhmm: string): number => {
+        const [h, m] = parseHHMM(hhmm);
+        return h * 60 + m;
+    };
+
+    const validateShift = (shift: Shift, label: 'old_shift' | 'new_shift') => {
+        if (!TIME_FORMAT_PATTERN.test(shift.start_time) || !TIME_FORMAT_PATTERN.test(shift.end_time)) {
+            throw new GenericApiError({
+                status_code: 400,
+                message: `Invalid time format in ${label}. Expected HH:MM`,
+                context: { [label]: shift }
+            });
+        }
+
+        if (toMinutes(shift.end_time) <= toMinutes(shift.start_time)) {
+            throw new GenericApiError({
+                status_code: 400,
+                message: `Invalid time range in ${label}. The End time must be after the Start time`,
+                context: { [label]: shift }
+            });
+        }
+    };
+
+    const upsertOrDeleteShiftByEmployeeEmail = async (employee_email: string): Promise<void> => {
+        const flat_upsert_shift: UpsertShift = {
+            ...(deepEqual(shift_store.initial_shift, default_shift) ? { old_shift: unwrapAndClone(shift_store.initial_shift) } : {}),
+            ...(deepEqual(shift_store.current_shift, default_shift) ? { new_shift: unwrapAndClone(shift_store.current_shift) } : {}),
+        };
+
+        const normalized_upsert_shift: UpsertShift = {
+            ...(flat_upsert_shift.old_shift ? { old_shift: normalizeShiftPayload(flat_upsert_shift.old_shift) } : {}),
+            ...(flat_upsert_shift.new_shift ? { new_shift: normalizeShiftPayload(flat_upsert_shift.new_shift) } : {}),
+        };
+
+        if (normalized_upsert_shift.old_shift) validateShift(normalized_upsert_shift.old_shift, 'old_shift');
+        if (normalized_upsert_shift.new_shift) validateShift(normalized_upsert_shift.new_shift, 'new_shift');
+
+        await shift_store.upsertOrDeleteShiftByEmployeeEmail(employee_email, normalized_upsert_shift);
+    };
+
+    return {
+        upsertOrDeleteShiftByEmployeeEmail,
+    };
+}
+
diff --git a/src/modules/timesheets/composables/api/use-timesheet-api.ts b/src/modules/timesheets/composables/api/use-timesheet-api.ts
index 0b60564..7692ffd 100644
--- a/src/modules/timesheets/composables/api/use-timesheet-api.ts
+++ b/src/modules/timesheets/composables/api/use-timesheet-api.ts
@@ -1,58 +1,53 @@
 import { useAuthStore } from "src/stores/auth-store";
 import { useTimesheetStore } from "src/stores/timesheet-store"
-/* eslint-disable */
+
 export const useTimesheetApi = () => {
     const timesheet_store = useTimesheetStore();
     const auth_store = useAuthStore();
+    const NEXT = 1;
+    const PREVIOUS = -1;
+
+    const getPayPeriodDetailsByDate = async (date_string: string, employee_email?: string) => {
+        const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber(date_string);
 
-    const getTimesheetsByDate = async (date_string: string) => {
-        const success = await timesheet_store.getPayPeriodByDate(date_string);
-        
         if (success) {
-            await timesheet_store.getTimesheetsByPayPeriodAndEmail(auth_store.user.email)
+            await timesheet_store.getPayPeriodDetailsByEmployeeEmail(employee_email ?? auth_store.user.email)
         }
     }
 
-    const fetchPayPeriod = async (direction: number) => {
-        const current_pay_period = timesheet_store.current_pay_period;
-        let new_pay_period_no = current_pay_period.pay_period_no + direction;
-        let new_pay_year = current_pay_period.pay_year;
+    const getNextOrPreviousPayPeriodDetails = async (direction: number, employee_email?: string) => {
+        const { pay_period } = timesheet_store;
+        let new_number = pay_period.pay_period_no + direction;
+        let new_year = pay_period.pay_year;
 
-        if (new_pay_period_no > 26) {
-           new_pay_period_no = 1;
-           new_pay_year += 1; 
+        if (new_number > 26) {
+            new_number = 1;
+            new_year += 1;
         }
 
-        if (new_pay_period_no < 1) {
-            new_pay_period_no = 26;
-            new_pay_year -= 1;
+        if (new_number < 1) {
+            new_number = 26;
+            new_year -= 1;
         }
 
-        const success = await timesheet_store.getPayPeriodByYearAndPeriodNumber(new_pay_year, new_pay_period_no);
-        
+        const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber(new_year, new_number);
+
         if (success) {
-            await timesheet_store.getTimesheetsByPayPeriodAndEmail(auth_store.user.email);
+            await timesheet_store.getPayPeriodDetailsByEmployeeEmail(employee_email ?? auth_store.user.email);
         }
     };
+
+    const getNextPayPeriodDetails = async (employee_email?: string) => {
+        await getNextOrPreviousPayPeriodDetails(NEXT, employee_email ?? auth_store.user.email);
+    }
     
-    const getNextPayPeriod     = async () => fetchPayPeriod(1);
-    const getPreviousPayPeriod = async () => fetchPayPeriod(-1);
+    const getPreviousPayPeriodDetails = async (employee_email?: string) => {
+        await getNextOrPreviousPayPeriodDetails(PREVIOUS, employee_email ?? auth_store.user.email);
+    }
 
-    const getPreviousPeriodForUser = async (_employee_email: string) => {
-        await getPreviousPayPeriod();
-    };
-
-    const getNextPeriodForUser = async (_employee_email: string) => {
-        await getNextPayPeriod();
-    };
-
-    return { 
-        getTimesheetsByDate,
-        fetchPayPeriod,
-        // getCurrentPayPeriod,
-        getNextPayPeriod,
-        getPreviousPayPeriod,
-        getPreviousPeriodForUser,
-        getNextPeriodForUser,
+    return {
+        getPayPeriodDetailsByDate,
+        getNextPayPeriodDetails,
+        getPreviousPayPeriodDetails,
     };
 };
\ No newline at end of file
diff --git a/src/modules/timesheets/composables/use-expense-items.ts b/src/modules/timesheets/composables/use-expense-items.ts
index 5b90aa8..46d4e8e 100644
--- a/src/modules/timesheets/composables/use-expense-items.ts
+++ b/src/modules/timesheets/composables/use-expense-items.ts
@@ -1,52 +1,55 @@
 import { ref, type Ref } from "vue";
 import { normalizeExpense, validateExpenseUI } from "../utils/expenses-validators";
 import { normExpenseType } from "../utils/expense.util";
-import type { TimesheetExpense } from "../types/expense.interfaces";
+import type { Expense, PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
+import { useExpensesStore } from "src/stores/expense-store";
+import { unwrapAndClone } from "src/utils/unwrap-and-clone";
 
-type UseExpenseItemsParams = {
-    initial_expenses?: TimesheetExpense[] | null | undefined;
-    draft: Ref<Partial<TimesheetExpense>>;
-    is_approved: Ref<boolean> | boolean;
-};
-export const useExpenseItems = ({ 
-    initial_expenses,
-    draft,
-    is_approved
-}: UseExpenseItemsParams) => {
-    const items = ref<TimesheetExpense[]>(
-        Array.isArray(initial_expenses) ? initial_expenses.map(normalizeExpense) : []
-    );
+const expenses_store = useExpensesStore();
+
+export const useExpenseItems = () => {
+    let expenses = unwrapAndClone(expenses_store.pay_period_expenses.expenses.map(normalizeExpense));
+
+    const normalizePayload = (expense: Expense): Expense => {
+    const exp = normalizeExpense(expense);
+    const out: Expense = {
+        date: exp.date,
+        type: exp.type as ExpenseType,
+        comment: exp.comment || '',
+    };
+    if(typeof exp.amount  === 'number') out.amount  = exp.amount;
+    if(typeof exp.mileage === 'number') out.mileage = exp.mileage;
+    return out;
+}
 
     const addFromDraft = () => {
-        const candidate: TimesheetExpense = normalizeExpense({
-            date: draft.value.date,
-            type: normExpenseType(draft.value.type),
-            ...(typeof draft.value.amount  === 'number' ? { amount: draft.value.amount   }: {}),
-            ...(typeof draft.value.mileage === 'number' ? { mileage: draft.value.mileage }: {}),
-            comment: String(draft.value.comment ?? '').trim(),
-        } as TimesheetExpense);
+        const candidate: Expense = normalizeExpense({
+            date: draft.date,
+            type: normExpenseType(draft.type),
+            ...(typeof draft.amount  === 'number' ? { amount: draft.amount   }: {}),
+            ...(typeof draft.mileage === 'number' ? { mileage: draft.mileage }: {}),
+            comment: String(draft.comment ?? '').trim(),
+        } as Expense);
 
         validateExpenseUI(candidate, 'expense_draft');
-        items.value = [ ...items.value, candidate];
+        expenses = [ ...expenses, candidate];
     };
 
     const removeAt = (index: number) => {
-        const locked = typeof is_approved === 'boolean' ? is_approved : is_approved.value;
-        if(locked) return;
-        if(index < 0 || index >= items.value.length) return;
-        items.value = items.value.filter((_,i)=> i !== index);
+        if(index < 0 || index >= expenses.length) return;
+        expenses = expenses.filter((_,i)=> i !== index);
     };
 
     const validateAll = () => {
-        for (const expense of items.value) {
+        for (const expense of expenses) {
             validateExpenseUI(expense, 'expense_item');
         }
     };
 
-    const payload = () => items.value.map(normalizeExpense);
+    const payload = () => expenses.map(normalizeExpense);
 
     return {
-        items,
+        expenses,
         addFromDraft,
         removeAt,
         validateAll,
diff --git a/src/modules/timesheets/models/expense-validation.interface.ts b/src/modules/timesheets/models/expense-validation.interface.ts
deleted file mode 100644
index 64c3af0..0000000
--- a/src/modules/timesheets/models/expense-validation.interface.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export interface ApiErrorPayload {
-    status_code: number;
-    error_code?: string;
-    message?:    string;
-    context?:    Record<string, unknown>;
-}
-
-export class ExpensesValidationError extends Error {
-    status_code: number;
-    error_code?: string | undefined;
-    context?:    Record<string, unknown> | undefined;
-
-    constructor(payload: ApiErrorPayload) {
-        super(payload.message || 'Invalid expense payload');
-        this.name        = 'ExpensesValidationError';
-        this.status_code = payload.status_code;
-        this.error_code  = payload.error_code;
-        this.context     = payload.context;
-    }
-}
-
-export class ExpensesApiError extends Error {
-    status_code: number;
-    error_code?: string;
-    context?:    Record<string, unknown>;
-    constructor(payload: ApiErrorPayload) {
-        super(payload.message || 'Request failed');
-        this.name        = 'ExpensesApiError';
-        this.status_code = payload.status_code;
-
-        if(payload.error_code !== undefined) this.error_code = payload.error_code;
-        if(payload.context    !== undefined) this.context    = payload.context;
-    }
-}
\ No newline at end of file
diff --git a/src/modules/timesheets/models/expense.models.ts b/src/modules/timesheets/models/expense.models.ts
index 2f4d855..12d8c08 100644
--- a/src/modules/timesheets/models/expense.models.ts
+++ b/src/modules/timesheets/models/expense.models.ts
@@ -1,78 +1,46 @@
-// export const EXPENSE_TYPE = [
-//     'PER_DIEM',
-//     'MILEAGE',
-//     'EXPENSES',
-//     'PRIME_GARDE',
-// ] as const;
-
-// export type ExpenseType = (typeof EXPENSE_TYPE)[number];
-
-// export const TYPES_WITH_MILEAGE_ONLY: Readonly<ExpenseType[]> = ['MILEAGE'];
-
-// export const TYPES_WITH_AMOUNT_ONLY:  Readonly<ExpenseType[]> = [
-//     'PER_DIEM',
-//     'EXPENSES',
-//     'PRIME_GARDE',
-// ];
-
 export type ExpenseType = 'PER_DIEM' | 'MILEAGE' | 'EXPENSES' | 'PRIME_GARDE';
 
-export type ExpenseTotals = { 
-    amount:  number;
-    mileage: number;
-};
-
-// export type ExpenseSavePayload = {
-//     pay_period_no: number;
-//     pay_year:      number;
-//     email:         string;
-//     expenses:      TimesheetExpense[];
-// };
+export const EXPENSE_TYPE: ExpenseType[] = ['PER_DIEM', 'MILEAGE', 'EXPENSES', 'PRIME_GARDE',];
+export const TYPES_WITH_MILEAGE_ONLY: Readonly<ExpenseType[]> = ['MILEAGE'];
+export const TYPES_WITH_AMOUNT_ONLY: Readonly<ExpenseType[]> = ['PER_DIEM', 'EXPENSES', 'PRIME_GARDE',];
 
 export interface Expense {
-//     is_approved:        boolean;
-//     comment:            string;
-//     amount:             number;
-//     supervisor_comment: string;
-// }
-
-// export interface TimesheetExpense {
-    date:                string;
-    type:                string;
-    amount?:             number;
-    mileage?:            number;
-    comment?:            string;
+    date: string;
+    type: ExpenseType;
+    amount?: number;
+    mileage?: number;
+    comment: string;
     supervisor_comment?: string;
-    is_approved?:        boolean;
+    is_approved: boolean;
 }
 
-// export interface PayPeriodExpenses {
-export interface TimesheetExpenses {
-    pay_period_no:  number;
-    pay_year:       number;
-    employee_email: string;
-    is_approved:    boolean;
-    // expenses:       TimesheetExpense[];
+export type ExpenseTotals = {
+    amount: number;
+    mileage: number;
+    reimburseable_total?: number;
+};
+
+export interface PayPeriodExpenses {
+    is_approved: boolean;
     expenses: Expense[];
-    totals?: {
-        amount:              number;
-        mileage:             number;
-        reimbursable_total?: number;
-    }
+    totals?: ExpenseTotals;
 }
 
-// export interface ExpensePayload{
-//     date:     string;
-//     type:     ExpenseType;
-//     amount?:  number;
-//     mileage?: number;
-//     comment:  string;
-// }
+export interface TimesheetDetailsWeekDayExpenses {
+    cash: Expense[];
+    km: Expense[];
+    [otherType: string]: Expense[];
+}
 
-// export interface UpsertExpensesBody {
-//     expenses: ExpensePayload[];
-// }
+export const default_expense: Expense = {
+    date: '',
+    type: 'EXPENSES',
+    amount: 0,
+    comment: '',
+    is_approved: false,
+};
 
-// export interface UpsertExpensesResponse {
-//     data: PayPeriodExpenses;
-// }
\ No newline at end of file
+export const default_pay_period_expenses: PayPeriodExpenses = {
+    is_approved: false,
+    expenses: [],
+}
\ No newline at end of file
diff --git a/src/modules/timesheets/models/expense.validation.ts b/src/modules/timesheets/models/expense.validation.ts
new file mode 100644
index 0000000..11f8aa3
--- /dev/null
+++ b/src/modules/timesheets/models/expense.validation.ts
@@ -0,0 +1,77 @@
+import { Expense, EXPENSE_TYPE, ExpenseType } from "src/modules/timesheets/models/expense.models";
+import { Normalizer } from "src/utils/normalize-object";
+
+export interface ApiErrorPayload {
+  status_code: number;
+  error_code?: string;
+  message?: string;
+  context?: Record<string, unknown>;
+};
+
+export abstract class ApiError extends Error {
+  status_code: number;
+  error_code?: string;
+  context?: Record<string, unknown>;
+
+  constructor(payload: ApiErrorPayload, defaultMessage: string) {
+    super(payload.message || defaultMessage);
+    this.status_code = payload.status_code;
+    this.error_code = payload.error_code ?? "unknown";
+    this.context = payload.context ?? {'unknown': 'unknown error has occured', };
+  }
+};
+
+export class GenericApiError extends ApiError {
+    constructor(payload: ApiErrorPayload) {
+        super(payload, 'Encountered an error processing request');
+        this.name = 'GenericApiError';
+    }
+};
+
+export class ExpensesValidationError extends ApiError {
+  constructor(payload: ApiErrorPayload) {
+    super(payload, 'Invalid expense payload');
+    this.name = 'ExpensesValidationError';
+  }
+};
+
+export class ExpensesApiError extends ApiError {
+  constructor(payload: ApiErrorPayload) {
+    super(payload, 'Request failed');
+    this.name = 'ExpensesApiError';
+  }
+};
+
+export const expense_normalizer: Normalizer<Expense> = {
+    date:               v => String(v ?? "1970-01-01").trim(),
+    type:               v => EXPENSE_TYPE.includes(v) ? v as ExpenseType : "EXPENSES",
+    amount:             v => typeof v === "number" ? v : undefined,
+    mileage:            v => typeof v === "number" ? v : undefined,
+    comment:            v => String(v ?? "").trim(),
+    supervisor_comment: v => String(v ?? "").trim(),
+    is_approved:        v => !!v,
+};
+
+export function toExpensesError(err: unknown): ExpensesValidationError | ExpensesApiError {
+    if (err instanceof ExpensesValidationError || err instanceof ExpensesApiError) {
+        return err;
+    }
+
+    if (typeof err === 'object' && err !== null && 'status_code' in err) {
+        const payload = err as ApiErrorPayload;
+
+        // Don't know how to differentiate both types of errors, can be updated here
+        if (payload.error_code?.startsWith('API_')) {
+            return new ExpensesApiError(payload);
+        }
+
+        return new ExpensesValidationError(payload);
+    }
+
+    // Fallback with ValidationError as default
+    return new ExpensesValidationError({
+        status_code: 500,
+        message: err instanceof Error ? err.message : 'Unknown error',
+        context: { original: err }
+    });
+}
diff --git a/src/modules/timesheets/models/pay-period-details.models.ts b/src/modules/timesheets/models/pay-period-details.models.ts
new file mode 100644
index 0000000..c19a69f
--- /dev/null
+++ b/src/modules/timesheets/models/pay-period-details.models.ts
@@ -0,0 +1,77 @@
+import type { Shift } from "./shift.models";
+import type { Expense } from "src/modules/timesheets/models/expense.models";
+
+export type Week<T> = {
+    sun: T;
+    mon: T;
+    tue: T;
+    wed: T;
+    thu: T;
+    fri: T;
+    sat: T;
+};
+
+export interface PayPeriodDetails {
+    weeks: PayPeriodDetailsWeek[];
+    employee_full_name: string;
+}
+
+export interface PayPeriodDetailsWeek {
+    is_approved: boolean;
+    shifts:   Week<PayPeriodDetailsWeekDayShifts>
+    expenses: Week<PayPeriodDetailsWeekDayExpenses>;
+}
+
+export interface PayPeriodDetailsWeekDayShifts {
+    shifts:          Shift[];
+    regular_hours:   number;
+    evening_hours:   number;
+    emergency_hours: number;
+    overtime_hours:  number;
+    total_hours:     number;
+    short_date:      string;
+    break_duration?: number;
+}
+
+export interface PayPeriodDetailsWeekDayExpenses {
+    cash: Expense[];
+    km:   Expense[];
+    [otherType: string]: Expense[];
+}
+
+const makeWeek = <T>(factory: ()=> T): Week<T> => ({
+    sun: factory(),
+    mon: factory(),
+    tue: factory(),
+    wed: factory(),
+    thu: factory(),
+    fri: factory(),
+    sat: factory(),
+});
+
+const emptyDailySchedule = (): PayPeriodDetailsWeekDayShifts => ({
+    shifts: [],
+    regular_hours: 0,
+    evening_hours: 0,
+    emergency_hours: 0,
+    overtime_hours: 0,
+    total_hours: 0,
+    short_date: "",
+    break_duration: 0,
+});
+
+const emptyDailyExpenses = (): PayPeriodDetailsWeekDayExpenses => ({
+    cash: [],
+    km: [],
+});
+
+export const defaultPayPeriodDetailsWeek = (): PayPeriodDetailsWeek => ({
+    is_approved: false,
+    shifts: makeWeek(emptyDailySchedule),
+    expenses: makeWeek(emptyDailyExpenses),
+});
+
+export const default_pay_period_details: PayPeriodDetails = {
+    weeks: [ defaultPayPeriodDetailsWeek(), ],
+    employee_full_name: "",
+}
\ No newline at end of file
diff --git a/src/modules/timesheets/models/shift.models.ts b/src/modules/timesheets/models/shift.models.ts
index f105851..143d3ed 100644
--- a/src/modules/timesheets/models/shift.models.ts
+++ b/src/modules/timesheets/models/shift.models.ts
@@ -1,82 +1,49 @@
-// export const SHIFT_KEY = [
-//     'REGULAR', 
-//     'EVENING', 
-//     'EMERGENCY', 
-//     'HOLIDAY', 
-//     'VACATION', 
-//     'SICK'
-// ] as const;
+export const SHIFT_TYPES = [
+    'REGULAR', 
+    'EVENING', 
+    'EMERGENCY',
+    'OVERTIME', 
+    'HOLIDAY', 
+    'VACATION', 
+    'SICK'
+];
 
-// export type ShiftKey = typeof SHIFT_KEY[number];
+export type ShiftType = 'REGULAR' | 'EVENING' | 'EMERGENCY' | 'OVERTIME' | 'HOLIDAY' | 'VACATION' | 'SICK' ;
 
-// export type ShiftSelectOption = { value: ShiftKey; label: string };
-
-// export type ShiftPayload = {
-//     start_time: string;
-//     end_time:   string;
-//     type:       ShiftKey;
-//     is_remote:  boolean;
-//     comment?:   string;
-// }
-
-export type ShiftKey = 'REGULAR' | 'EVENING' | 'EMERGENCY' | 'HOLIDAY' | 'VACATION' | 'SICK';
-
-export type UpsertAction = 'created' | 'updated' | 'deleted';
+export type UpsertAction = 'create' | 'update' | 'delete';
 
 export type ShiftLegendItem = {
-    type:        ShiftKey;
+    type:        ShiftType;
     color:       string;
-    label_key:   string;
+    label_type:   string;
     text_color?: string;
 };
 
 export interface Shift {
     date:        string;
-    type:        ShiftKey;
+    type:        ShiftType;
     start_time:  string;
     end_time:    string;
-    comment:     string;
+    comment:     string | undefined;
     is_approved: boolean;
     is_remote:   boolean;
 }
 
 export interface UpsertShiftsResponse {
     action: UpsertAction;
-    // day:    DayShift[];
     day:    Shift[];
 }
 
-// export interface CreateShiftPayload {
-//     date:       string;
-//     type:       ShiftKey;
-//     start_time: string;
-//     end_time:   string;
-//     comment?:   string;
-//     is_remote?: boolean;
-// }
-
-// export interface CreateWeekShiftPayload {
-//     shifts: CreateShiftPayload[];
-// }
-
-// export interface UpsertShiftsBody {
-//     old_shift?: ShiftPayload;
-//     new_shift?: ShiftPayload;
-// }
-
-// export interface DayShift {
-//     start_time: string;
-//     end_time:   string;
-//     type:       string;
-//     is_remote:  boolean;
-//     comment?:   string | null;
-// }
+export interface UpsertShift {
+    old_shift?: Shift | undefined;
+    new_shift?: Shift | undefined;
+}
 
 export const default_shift: Readonly<Shift> = {
     date: '',
     start_time: '--:--',
     end_time: '--:--',
-    type:'REGULAR',
+    type: 'REGULAR',
     comment: '',
     is_approved: false,
     is_remote: false,
diff --git a/src/modules/timesheets/models/timesheet.models.ts b/src/modules/timesheets/models/timesheet.models.ts
deleted file mode 100644
index 4735cad..0000000
--- a/src/modules/timesheets/models/timesheet.models.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import type { Shift } from "./shift.models";
-import type { Expense } from "src/modules/timesheets/models/expense.models";
-// import type { 
-    // TimesheetExpenseEntry, 
-    // TimesheetShiftEntry, 
-//     Week 
-// } from "./timesheet.types";
-
-// export interface Timesheet {
-//     is_approved: boolean;
-//     start_day:   string;
-//     end_day:     string;
-//     label:       string;
-//     shifts:      TimesheetShiftEntry[];
-//     expenses:    TimesheetExpenseEntry[];
-// }
-
-// export type TimesheetShiftEntry = {
-//     bank_type:   string;
-//     date:        string;
-//     start_time:  string;
-//     end_time:    string;
-//     comment:     string;
-//     is_approved: boolean;
-//     is_remote:   boolean;
-// };
-
-// export type TimesheetExpenseEntry = {
-//     bank_type:   string;
-//     date:        string;
-//     amount:      number;
-//     km:          number;
-//     comment:     string;
-//     is_approved: boolean;
-//     supervisor_comment: string;
-// };
-
-export type Week<T> = {
-    sun: T;
-    mon: T;
-    tue: T;
-    wed: T;
-    thu: T;
-    fri: T;
-    sat: T;
-};
-
-export interface TimesheetDetails {
-    week1: TimesheetDetailsWeek;
-    week2: TimesheetDetailsWeek;
-    employee_full_name: string;
-}
-
-export interface TimesheetDetailsWeek {
-    is_approved: boolean;
-    shifts:   Week<TimesheetDetailsWeekDayShifts>
-    expenses: Week<TimesheetDetailsWeekDayExpenses>;
-}
-
-export interface TimesheetDetailsWeekDayShifts {
-    shifts:          Shift[];
-    regular_hours:   number;
-    evening_hours:   number;
-    emergency_hours: number;
-    overtime_hours:  number;
-    total_hours:     number;
-    short_date:      string;
-    break_duration?: number;
-}
-
-export interface TimesheetDetailsWeekDayExpenses {
-    cash: Expense[];
-    km:   Expense[];
-    [otherType: string]: Expense[];
-}
-
-// export interface DailyExpense {
-//     is_approved: boolean;
-//     comment:     string;
-//     amount:      number;
-//     supervisor_comment: string;
-// }
-
-// export interface TimesheetPayPeriodDetailsOverview {
-//     week1: TimesheetDetailsWeek;
-//     week2: TimesheetDetailsWeek;
-// }
-
-const makeWeek = <T>(factory: ()=> T): Week<T> => ({
-    sun: factory(),
-    mon: factory(),
-    tue: factory(),
-    wed: factory(),
-    thu: factory(),
-    fri: factory(),
-    sat: factory(),
-});
-
-const emptyDailySchedule = (): TimesheetDetailsWeekDayShifts => ({
-    shifts: [],
-    regular_hours: 0,
-    evening_hours: 0,
-    emergency_hours: 0,
-    overtime_hours: 0,
-    total_hours: 0,
-    short_date: "",
-    break_duration: 0,
-});
-
-const emptyDailyExpenses = (): TimesheetDetailsWeekDayExpenses => ({
-    cash: [],
-    km: [],
-});
-
-export const defaultTimesheetDetailsWeek = (): TimesheetDetailsWeek => ({
-    is_approved: false,
-    shifts: makeWeek(emptyDailySchedule),
-    expenses: makeWeek(emptyDailyExpenses),
-});
-
-export const default_timesheet_details: TimesheetDetails = {
-    week1: defaultTimesheetDetailsWeek(),
-    week2: defaultTimesheetDetailsWeek(),
-    employee_full_name: "",
-}
\ No newline at end of file
diff --git a/src/modules/timesheets/models/ui.types.ts b/src/modules/timesheets/models/ui.models.ts
similarity index 60%
rename from src/modules/timesheets/models/ui.types.ts
rename to src/modules/timesheets/models/ui.models.ts
index d738779..3cf536d 100644
--- a/src/modules/timesheets/models/ui.types.ts
+++ b/src/modules/timesheets/models/ui.models.ts
@@ -1,5 +1,3 @@
-export type FormMode = 'create' | 'edit' | 'delete';
-
 export type PayPeriodLabel = {
     start_date: string;
     end_date:   string;
diff --git a/src/modules/timesheets/pages/timesheet-page.vue b/src/modules/timesheets/pages/timesheet-page.vue
index 0fedde9..7be7fd6 100644
--- a/src/modules/timesheets/pages/timesheet-page.vue
+++ b/src/modules/timesheets/pages/timesheet-page.vue
@@ -1,182 +1,48 @@
-<script setup lang="ts">
-import { date } from 'quasar';
-import { computed, onMounted }    from 'vue';
-import { useI18n }                from 'vue-i18n';
-import { useAuthStore }           from 'src/stores/auth-store';
-import { useExpensesStore }       from 'src/stores/expense-store';
-import { useShiftStore }          from 'src/stores/shift-store';
-import { useTimesheetStore }      from 'src/stores/timesheet-store';
-import { useTimesheetApi }        from '../composables/api/use-timesheet-api';
-import { buildShiftOptions }      from '../utils/shift.util';
-import { formatPayPeriodLabel }   from '../utils/timesheet-format.util';
-import   TimesheetNavigation      from '../components/timesheet/timesheet-navigation.vue';
-import   ShiftsLegend             from '../components/shift/shifts-legend.vue';
-import   ShiftCrudDialog          from '../components/shift/shift-crud-dialog.vue';
-import   TimesheetDetailsExpenses from '../components/expenses/timesheet-details-expenses.vue';
-import   DetailedShiftList        from '../components/shift/detailed-shift-list.vue';
-import type { ShiftKey }          from '../models/shift.models';
-import type { TimesheetExpense }  from '../types/expense.interfaces';
-/* eslint-disable */
+<script
+    setup
+    lang="ts"
+>
+    import { date } from 'quasar';
+    import { computed, onMounted } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import { useAuthStore } from 'src/stores/auth-store';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import { useTimesheetApi } from '../composables/api/use-timesheet-api';
+    import { formatPayPeriodLabel } from '../utils/timesheet-format.util';
+    import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
 
-//------------------- stores ------------------- 
-const { locale, t }   = useI18n();
-const auth_store      = useAuthStore();
-const expenses_store  = useExpensesStore();
-const shift_store     = useShiftStore();
-const timesheet_store = useTimesheetStore();
-const timesheet_api   = useTimesheetApi();
+    //------------------- stores ------------------- 
+    const { locale } = useI18n();
+    const auth_store = useAuthStore();
+    const timesheet_api = useTimesheetApi();
 
-//------------------- expenses -------------------
-const openExpensesDialog = () => expenses_store.openDialog({
-    email:         auth_store.user.email,
-    pay_year:      timesheet_store.pay_period.pay_year,
-    pay_period_no: timesheet_store.pay_period.pay_period_no,
-    t,
-});
+    //------------------- pay-period format label -------------------
+    const date_options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };
 
-const onSaveExpenses = async ( payload: { email: string; pay_year: number; pay_period_no: number; expenses: TimesheetExpense[] }) => {
-    await expenses_store.saveExpenses({...payload, t});
-};
-
-const onCloseExpenses = () => expenses_store.closeDialog();
-
-//------------------- pay-period format label -------------------
-const date_options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year:  'numeric' };
-
-const pay_period_label = computed(() => formatPayPeriodLabel(
-        timesheet_store.pay_period.label,
+    const pay_period_label = computed(() => formatPayPeriodLabel(
+        pay_period.label,
         locale.value,
         date.extractDate,
         date_options
     )
-);
+    );
 
-//------------------- q-select Shift options -------------------
-const shift_options = computed(() => buildShiftOptions(SHIFT_KEY, t));
-
-onMounted(async () => {
-    await timesheet_store.loadToday(auth_store.user.email);
-});
-
-// ------------------- shifts -------------------
-const onRequestAdd    =       ({ date        }: { date: string }) => shift_store.openCreate(date);
-const onRequestEdit   =       ({ date, shift }: { date: string; shift: any }) => shift_store.openEdit(date, shift);
-const onRequestDelete = async ({ date, shift }: { date: string; shift: any }) => shift_store.openDelete(date, shift);
-const onShiftSaved = async () => {
-    await timesheet_store.refreshCurrentPeriodForUser(auth_store.user.email);
-};
+    onMounted(async () => {
+        await timesheet_api.getPayPeriodDetailsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
+    });
 </script>
 
 
 <template>
-    <q-page padding class="q-pa-md bg-secondary" >
-         <!-- title and dates -->
-        <div class="text-h4 row justify-center text-center q-mt-lg text-uppercase text-weight-bolder text-grey-8">
-            {{ $t('timesheet.title') }}
-        </div>
-        <div class="row items-center justify-center q-py-none q-my-none">
-            <div 
-                class="text-primary text-uppercase text-weight-bold"
-                :class="$q.screen.lt.md ? '' : 'text-h6'"
-            >
-                {{ pay_period_label.start_date }}
-            </div>
-            <div 
-                class="text-grey-8 text-uppercase q-mx-md"
-                :class="$q.screen.lt.md ? 'text-weight-medium text-caption' : 'text-weight-bold'"
-            >
-                {{ $t('timesheet.date_ranges_to') }}
-            </div>
-            <div 
-                class="text-primary text-uppercase text-center text-weight-bold"
-                :class="$q.screen.lt.md ? '' : 'text-h6'"
-            >
-                {{ pay_period_label.end_date }}
-            </div>
-        </div>
-        <div>
-            <q-card flat class=" col q-mt-md bg-secondary">
-                <!-- navigation btn -->
-                <q-card-section horizontal>
-                    <q-btn
-                        color="primary"
-                        unelevated
-                        icon="receipt_long"
-                        :label="$t('timesheet.expense.open_btn')"
-                        @click="openExpensesDialog"
-                    />
-                </q-card-section>
-                <q-card-section class="row items-center justify-between q-px-md q-pb-none">
-                    <TimesheetNavigation
-                        :is-disabled="timesheet_store.is_loading"
-                        :is-previous-limit="timesheet_store.is_calendar_limit"
-                        @date-selected="onDateSelected"
-                        @pressed-previous-button="timesheet_api.getPreviousPeriodForUser(auth_store.user.email)"
-                        @pressed-next-button="timesheet_api.getNextPeriodForUser(auth_store.user.email)"
-                    />
-                </q-card-section>
-                <!-- shift's colored legend -->
-                <ShiftsLegend
-                    :is-loading="false"
-                />
-                <q-card-section horizontal>
-                    <!-- display of shifts for 2 timesheets -->
-                    <DetailedShiftList
-                        :raw-data="timesheet_store.pay_period_employee_details"
-                        :current-pay-period="timesheet_store.current_pay_period"
-                        @request-add="onRequestAdd"
-                        @request-edit="onRequestEdit"
-                        @request-delete="onRequestDelete"
-                    />                    
-                    <q-inner-loading :showing="timesheet_store.is_loading" color="primary"/>
-                </q-card-section>
-            </q-card>
-        </div>
-        <!-- read/edit/create/delete expense dialog -->
-        <q-dialog
-            v-model="expenses_store.is_dialog_open"
-            persistent         
-        >
-            <q-card 
-                class="q-pa-md column"
-                style=" min-width: 70vw;"
-            >
-                <q-inner-loading :showing="expenses_store.is_loading">
-                    <q-spinner size="32px"/>
-                </q-inner-loading>
-
-                <!-- <q-banner 
-                    v-if="expenses_error"
-                    dense
-                    class="bg-red-2 col-auto text-negative q-mt-sm"
-                >
-                    {{ expenses_error }}
-                </q-banner> -->
-
-                <TimesheetDetailsExpenses
-                v-if="expenses_store.data"
-                :pay_period_no="expenses_store.data.pay_period_no"
-                :pay_year="expenses_store.data.pay_year"
-                :email="expenses_store.data.employee_email"
-                :is_approved="expenses_store.data.is_approved"
-                :initial_expenses="expenses_store.data.expenses"
-                @save="onSaveExpenses"
-                @close="onCloseExpenses"
-                @error=" "
-                />
-            </q-card>
-        </q-dialog>
-
-        <!-- shift crud dialog -->
-        <ShiftCrudDialog
-        v-model="shift_store.is_open"
-        :mode="shift_store.mode"
-        :date-iso="shift_store.date_iso"
-        :email="auth_store.user.email"
-        :initial-shift="shift_store.initial_shift"
-        :shift-options="shift_options"
-        @close="shift_store.close"
-        @saved="onShiftSaved"
+    <q-page
+        padding
+        class="q-pa-md bg-secondary"
+    >
+        <PageHeaderTemplate
+            :title="$t('timesheet.title')"
+            :start-date="pay_period_label.start_date"
+            :end-date="pay_period_label.end_date"
         />
+
     </q-page>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheets/services/timesheet-service.ts b/src/modules/timesheets/services/timesheet-service.ts
index a288505..d52d38c 100644
--- a/src/modules/timesheets/services/timesheet-service.ts
+++ b/src/modules/timesheets/services/timesheet-service.ts
@@ -1,23 +1,14 @@
 import { api } from "src/boot/axios";
-import type { PayPeriod } from "src/modules/shared/types/pay-period-interface";
-import type { PayPeriodEmployeeDetails } from "src/modules/timesheet-approval/types/pay-period-employee-details";
-import type { PayPeriodOverview } from "src/modules/timesheet-approval/types/pay-period-overview";
-import type { PayPeriodReportFilters } from "src/modules/timesheet-approval/types/pay-period-report";
-import type { Timesheet } from "../types/timesheet.interfaces";
-import type { CreateShiftPayload, CreateWeekShiftPayload } from "../types/shift.interfaces";
+import type { UpsertShift } from "src/modules/timesheets/models/shift.models";
+import type { PayPeriod } from "src/modules/shared/models/pay-period.models";
+import type { PayPeriodDetails } from "src/modules/timesheets/models/pay-period-details.models";
+import type { PayPeriodOverview } from "src/modules/timesheet-approval/models/pay-period-overview.models";
+import type { PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
 
 export const timesheetService = {
-    //GET
-    getTimesheetsByEmail: async ( email: string, offset = 0): Promise<Timesheet> => {
-        const response = await api.get(`/timesheets/${encodeURIComponent(email)}`, {params: offset ? { offset } : undefined});
-        return response.data as Timesheet;
-    },
-    
-    //POST
-    createTimesheetShifts: async ( email: string, shifts: CreateShiftPayload[], offset = 0): Promise<Timesheet> => {
-        const payload: CreateWeekShiftPayload = { shifts };
-        const response = await api.post(`/timesheets/shifts/${encodeURIComponent(email)}`, payload, { params: offset ? { offset }: undefined });
-        return response.data as Timesheet;
+    getPayPeriodDetailsByEmployeeEmail: async (email: string): Promise<PayPeriodDetails> => {
+        const response = await api.get(`/timesheets/${encodeURIComponent(email)}`);
+        return response.data;
     },
 
     getPayPeriodByDate: async (date_string: string): Promise<PayPeriod> => {
@@ -30,22 +21,18 @@ export const timesheetService = {
         return response.data;
     },
 
-
-    getPayPeriodEmployeeOverviews: async (year: number, period_number: number, supervisor_email: string): Promise<PayPeriodOverview> => {
-        // TODO: REMOVE MOCK DATA PEFORE PUSHING TO PROD
+    getPayPeriodOverviewsBySupervisorEmail: async (year: number, period_number: number, supervisor_email: string): Promise<PayPeriodOverview[]> => {
         const response = await api.get(`pay-periods/${year}/${period_number}/${supervisor_email}`);
-        console.log('pay period data: ', response.data);
         return response.data;
     },
 
-    getTimesheetsByPayPeriodAndEmail: async (year: number, period_no: number, email: string): Promise<PayPeriodEmployeeDetails> => {
-        const response = await api.get('timesheets', { params: { year, period_no, email, }});
-        console.log('employee details: ', response.data);
+    getPayPeriodDetailsByPayPeriodAndEmployeeEmail: async (year: number, period_no: number, email: string): Promise<PayPeriodDetails> => {
+        const response = await api.get('timesheets', { params: { year, period_no, email, } });
         return response.data;
     },
 
-    getTimesheetApprovalCSVReport: async (year: number, period_number: number, report_filters?: PayPeriodReportFilters) => {
-        const response = await api.get(`csv/${year}/${period_number}`, { params: { report_filters, }});
-        return response.data;
+    upsertOrDeletePayPeriodDetailsByDateAndEmployeeEmail: async (email: string, payload: UpsertShift[] | PayPeriodExpenses, pay_period: PayPeriod, date?: string): Promise<PayPeriodDetails> => {
+        if (date) return (await api.put(`/shifts/upsert/${email}/${date}`, payload)).data;
+        else return (await api.put(`/expenses/${email}/${pay_period.pay_year}/${pay_period.pay_period_no}`, payload, { headers: {'Content-Type': 'application/json'}})).data;
     },
 };
\ No newline at end of file
diff --git a/src/modules/timesheets/utils/expense.util.ts b/src/modules/timesheets/utils/expense.util.ts
index 2ad7e3e..7ccbb04 100644
--- a/src/modules/timesheets/utils/expense.util.ts
+++ b/src/modules/timesheets/utils/expense.util.ts
@@ -1,6 +1,5 @@
-import type { TimesheetExpense } from "../types/expense.interfaces";
-import type { ExpenseSavePayload, ExpenseTotals, ExpenseType } from "../types/expense.types";
-/* eslint-disable */
+import type { Expense, ExpenseTotals, ExpenseType, PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
+
 //------------------ normalization / icons ------------------
 export const normExpenseType = (type: unknown): string => 
     String(type ?? '').trim().toUpperCase();
@@ -21,16 +20,8 @@ export const expenseTypeIcon = (type: unknown): string => {
     );
 };
 
-//------------------ q-select options ------------------
-export const buildExpenseTypeOptions = ( types: readonly ExpenseType[], t: (key:string) => string):
- { label: string; value: ExpenseType } [] =>
-    types.map((val)=> ({
-        label: t(`timesheet.expense.types.${val}`),
-        value: val,
-}));
-
 //------------------ totals ------------------
-export const computeExpenseTotals = (items: readonly TimesheetExpense[]): ExpenseTotals =>
+export const computeExpenseTotals = (items: readonly Expense[]): ExpenseTotals =>
     items.reduce<ExpenseTotals>(
         (acc, e) => ({
             amount:  acc.amount  + (Number(e.amount)  || 0),
@@ -47,7 +38,7 @@ export const makeExpenseRules = (t: (key: string) => string, max_comment_char: n
 
     const amountRequired  = (val: unknown) => (isPresent(val)) || t('timesheet.expense.errors.amount_required_for_type');
 
-    const mileageRequired = (val: unknown) => (isPresent(val)) || t('timesheet.expense.erros.mileage_required_for_type');
+    const mileageRequired = (val: unknown) => (isPresent(val)) || t('timesheet.expense.errors.mileage_required_for_type');
     
     const commentRequired = (val: unknown) => (String(val ?? '').trim().length > 0) || t('timesheet.expense.errors.comment_required');
 
@@ -63,14 +54,11 @@ export const makeExpenseRules = (t: (key: string) => string, max_comment_char: n
 };
 
 //------------------ saving payload ------------------
-export const buildExpenseSavePayload = (args: {
-    pay_period_no:  number;
-    pay_year:       number;
-    email:          string;
-    expenses:       TimesheetExpense[];
-}): ExpenseSavePayload => ({
+export const buildExpenseSavePayload = (args: PayPeriodExpenses): PayPeriodExpenses => ({
     pay_period_no:  args.pay_period_no,
     pay_year:       args.pay_year,
-    email:          args.email,
+    employee_email: args.employee_email,
+    is_approved:    args.is_approved ?? false,
     expenses:       args.expenses,
+    totals: computeExpenseTotals(args.expenses),
 });
\ No newline at end of file
diff --git a/src/modules/timesheets/utils/expenses-validators.ts b/src/modules/timesheets/utils/expenses-validators.ts
index 392d776..c1146d1 100644
--- a/src/modules/timesheets/utils/expenses-validators.ts
+++ b/src/modules/timesheets/utils/expenses-validators.ts
@@ -1,31 +1,29 @@
-import { COMMENT_MAX_LENGTH, DATE_FORMAT_PATTERN } from "../constants/expense.constants";
-import { ExpensesValidationError } from "../types/expense-validation.interface";
-import type { TimesheetExpense } from "../types/expense.interfaces";
-import { 
-    type ExpenseType, 
-    TYPES_WITH_AMOUNT_ONLY, 
-    TYPES_WITH_MILEAGE_ONLY 
-} from "../types/expense.types";
+import { COMMENT_MAX_LENGTH, DATE_FORMAT_PATTERN }                                           from "src/modules/timesheets/constants/expense.constants";
+import { ExpensesValidationError }                                                           from "src/modules/timesheets/models/expense.validation";
+import { type Expense, type ExpenseType, TYPES_WITH_AMOUNT_ONLY, TYPES_WITH_MILEAGE_ONLY }   from "src/modules/timesheets/models/expense.models";
 
 //normalization helpers
 export const toNumOrUndefined = (value: unknown): number | undefined => {
     if(value === undefined || value === null || (typeof value === 'string' && value.trim() === '')) return undefined;
     const num = Number(value);
+    
     return Number.isFinite(num) ? num : undefined;
 };
 
 export const normalizeComment = (input?: string): string | undefined => {
     if(typeof input === 'undefined' || input === null) return undefined;
     const trimmed = String(input).trim();
+    
     return trimmed.length ? trimmed : undefined;
 };
 
 export const normalizeType = (input: string): string => (input ?? '').trim().toUpperCase();
 
-export const normalizeExpense = (expense: TimesheetExpense): TimesheetExpense => {
+export const normalizeExpense = (expense: Expense): Expense => {
     const comment = normalizeComment(expense.comment);
     const amount = toNumOrUndefined(expense.amount);
     const mileage = toNumOrUndefined(expense.mileage);
+    
     return {
         date: (expense.date ?? '').trim(),
         type: normalizeType(expense.type),
@@ -40,7 +38,7 @@ export const normalizeExpense = (expense: TimesheetExpense): TimesheetExpense =>
 };
 
 //UI validation error messages
-export const validateExpenseUI = (raw: TimesheetExpense, label: string = 'expense'): void => {
+export const validateExpenseUI = (raw: Expense, label: string = 'expense'): void => {
     const expense = normalizeExpense(raw);
 
     //Date input validation
@@ -60,6 +58,7 @@ export const validateExpenseUI = (raw: TimesheetExpense, label: string = 'expens
             context: { [label]: expense },
         })
     }
+    
     if((expense.comment.length ?? 0) > COMMENT_MAX_LENGTH) {
         throw new ExpensesValidationError({
             status_code: 400,
@@ -100,7 +99,7 @@ export const validateExpenseUI = (raw: TimesheetExpense, label: string = 'expens
 
     //type constraint validation
     const type = expense.type as ExpenseType;
-    if(TYPES_WITH_MILEAGE_ONLY.includes(type) && !has_mileage) {
+    if( TYPES_WITH_MILEAGE_ONLY.includes(type) && !has_mileage ) {
         throw new ExpensesValidationError({
             status_code: 400,
             message: 'timesheet.expense.errors.mileage_required_for_type',
@@ -117,7 +116,7 @@ export const validateExpenseUI = (raw: TimesheetExpense, label: string = 'expens
 };
 
 //totals per pay-period
-export const compute_expense_totals = (items: TimesheetExpense[]) => items.reduce(
+export const compute_expense_totals = (items: Expense[]) => items.reduce(
     (acc, raw) => {
         const expense = normalizeExpense(raw);
         if(typeof expense.amount  === 'number' && expense.amount  > 0) acc.amount  +=  expense.amount;
diff --git a/src/modules/timesheets/utils/shift.util.ts b/src/modules/timesheets/utils/shift.util.ts
index 11b86fe..ac6f6d6 100644
--- a/src/modules/timesheets/utils/shift.util.ts
+++ b/src/modules/timesheets/utils/shift.util.ts
@@ -1,19 +1,18 @@
-import type { ShiftKey, ShiftPayload, ShiftSelectOption } from "../types/shift.types";
- /* eslint-disable */
+// import type { ShiftKey, ShiftPayload, ShiftSelectOption } from "../types/shift.types";
 
-export const toShiftPayload = (shift: any): ShiftPayload => ({ 
-    start_time: String(shift.start_time),
-    end_time:   String(shift.end_time),
-    type:       String(shift.type).toUpperCase() as ShiftKey,
-    is_remote:  !!shift.is_remote,
-    ...(shift.comment ? { comment: String(shift.comment) } : {}), 
-});
+// export const toShiftPayload = (shift: any): ShiftPayload => ({ 
+//     start_time: String(shift.start_time),
+//     end_time:   String(shift.end_time),
+//     type:       String(shift.type).toUpperCase() as ShiftKey,
+//     is_remote:  !!shift.is_remote,
+//     ...(shift.comment ? { comment: String(shift.comment) } : {}), 
+// });
 
-export const buildShiftOptions = (
-    keys: readonly string[],
-    t:(k: string) => string
-): ShiftSelectOption[] => 
-    keys.map((key) => ({
-        value: key as any,
-        label: t(`timesheet.shift.types.${key}`),
-    }));
\ No newline at end of file
+// export const buildShiftOptions = (
+//     keys: readonly string[],
+//     t:(k: string) => string
+// ): ShiftSelectOption[] => 
+//     keys.map((key) => ({
+//         value: key as any,
+//         label: t(`timesheet.shift.types.${key}`),
+//     }));
\ No newline at end of file
diff --git a/src/pages/error-page.vue b/src/pages/error-page.vue
index cbe39b9..8bf297d 100644
--- a/src/pages/error-page.vue
+++ b/src/pages/error-page.vue
@@ -1,23 +1,20 @@
-<script setup lang="ts">
-  /* eslint-disable */
-</script>
-
 <template>
-  <q-layout view="hHh lpR fFf">
-    <q-page-container>
-      <q-page padding class="column justify-center items-center bg-secondary">
-        <q-card class="col-shrink rounded-20">         
-          <q-img src="src/assets/line-truck-1.jpg" height="20vh">
-            <div class="absolute-bottom text-h4 text-center text-weight-bolder justify-center items-center row">
-              <div class="q-pr-md text-primary text-h3 text-weight-bolder">404</div> 
-              PAGE NOT FOUND
-            </div>
-          </q-img>
-          <q-card-section class="text-center text-h5 text-primary">
-            {{$t('notFoundPage.pageText')}}
-          </q-card-section>
-        </q-card>
-      </q-page>
-    </q-page-container>
-  </q-layout>
+    <q-layout view="hHh lpR fFf">
+        <q-page-container>
+            <q-page padding class="column justify-center items-center bg-secondary">
+                <q-card class="col-shrink rounded-20">
+                    <q-img src="src/assets/line-truck-1.jpg" height="20vh">
+                        <div
+                            class="absolute-bottom text-h4 text-center text-weight-bolder justify-center items-center row">
+                            <div class="q-pr-md text-primary text-h3 text-weight-bolder">404</div>
+                            PAGE NOT FOUND
+                        </div>
+                    </q-img>
+                    <q-card-section class="text-center text-h5 text-primary">
+                        {{ $t('notFoundPage.pageText') }}
+                    </q-card-section>
+                </q-card>
+            </q-page>
+        </q-page-container>
+    </q-layout>
 </template>
\ No newline at end of file
diff --git a/src/pages/test-page.vue b/src/pages/test-page.vue
index 5ab28f6..2954dd8 100644
--- a/src/pages/test-page.vue
+++ b/src/pages/test-page.vue
@@ -1,56 +1,73 @@
-<script setup lang="ts">
-  import { useQuasar } from 'quasar';
-  import type { QVueGlobals } from 'quasar';
-  
-  const q: QVueGlobals = useQuasar();
+<script
+    setup
+    lang="ts"
+>
+    import { useQuasar } from 'quasar';
+    import type { QVueGlobals } from 'quasar';
 
-  const clickNotify = () => {
-    q.notify({
-      message: 'Nick pinged you.',
-    })
-  }
+    const q: QVueGlobals = useQuasar();
+
+    const clickNotify = () => {
+        q.notify({
+            message: 'Nick pinged you.',
+        })
+    }
 </script>
 
 <template>
-  <q-page padding class="q-pa-md row items-center justify-center">
-    <q-card class="shadow-2 col-9 dark-font">
-      <q-img src="src/assets/line-truck-1.jpg">
-        <div class="absolute-bottom text-h5">
-          Welcome to App Targo!
-        </div>
-      </q-img>
+    <q-page
+        padding
+        class="q-pa-md row items-center justify-center"
+    >
+        <q-card class="shadow-2 col-9 dark-font">
+            <q-img src="src/assets/line-truck-1.jpg">
+                <div class="absolute-bottom text-h5">
+                    Welcome to App Targo!
+                </div>
+            </q-img>
 
-      <q-card-section class="text-center">
-        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
-        totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta 
-        sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia 
-        consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui 
-        dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora 
-        incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum 
-        exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem 
-        vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui 
-        dolorem eum fugiat quo voluptas nulla pariatur?
-      </q-card-section>
-      
-      <q-card-section class="text-center">
-        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
-      </q-card-section>
+            <q-card-section class="text-center">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
+                totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
+                sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
+                consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
+                dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
+                incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
+                exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
+                vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum
+                qui
+                dolorem eum fugiat quo voluptas nulla pariatur?
+            </q-card-section>
 
-      <q-card-section class="text-center">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-      </q-card-section>
+            <q-card-section class="text-center">
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+                deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+                provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
+                Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
+                eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
+                assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
+                necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum
+                rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut
+                perferendis doloribus asperiores repellat.
+            </q-card-section>
 
-      <q-separator />
+            <q-card-section class="text-center">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                deserunt mollit anim id est laborum.
+            </q-card-section>
 
-      <q-card-actions align="center">
-        <q-btn color="primary" label="Click Me" @click="clickNotify" />
-      </q-card-actions>
-    </q-card>
-  </q-page>
-</template>
+            <q-separator />
 
-<style scoped>
-  .dark-font {
-    color: #676;
-  }
-</style>
+            <q-card-actions align="center">
+                <q-btn
+                    color="primary"
+                    label="Click Me"
+                    @click="clickNotify"
+                />
+            </q-card-actions>
+        </q-card>
+    </q-page>
+</template>
\ No newline at end of file
diff --git a/src/stores/expense-store.ts b/src/stores/expense-store.ts
index b66aedf..f4895d6 100644
--- a/src/stores/expense-store.ts
+++ b/src/stores/expense-store.ts
@@ -1,88 +1,124 @@
 import { ref } from "vue";
 import { defineStore } from "pinia";
-import { type PayPeriodExpenses } from "src/modules/timesheets/types/expense.interfaces";
-import { ExpensesApiError }  from "src/modules/timesheets/types/expense-validation.interface";
-import { getPayPeriodExpenses, putPayPeriodExpenses } from "src/modules/timesheets/composables/api/use-expense-api";
+import { useTimesheetStore } from "src/stores/timesheet-store";
+import
+import { default_expense, default_pay_period_expenses, type Expense, type PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
+import { unwrapAndClone } from "src/utils/unwrap-and-clone";
+
+const { pay_period } = useTimesheetStore();
 
-/* eslint-disable */
 export const useExpensesStore = defineStore('expenses', () => {
-    const is_dialog_open = ref(false);
-    const is_loading     = ref(false);
-    const data           = ref<PayPeriodExpenses | null>(null);
-    const error          = ref<string | null>(null);
+    const is_open = ref(false);
+    const is_loading = ref(false);
+    const current_expenses = ref<PayPeriodExpenses>(default_pay_period_expenses);
+    const current_expense = ref<Expense>(default_expense);
+    const initial_expense = ref<Expense>(default_expense);
+    const error = ref<string | null>(null);
 
-    const setErrorFrom = (err: unknown, t?: (_key: string) => string) => {
+    const setErrorFrom = (err: unknown) => {
         const e = err as any;
-        error.value = (err instanceof ExpensesApiError && t 
-                        ? t(e.message): undefined)
-                        || e?.message
-                        || 'Unknown error';
+        error.value = e?.message || 'Unknown error';
     };
 
-    const openDialog = async (
-        params: { email: string; pay_year: number; pay_period_no: number; t?: (_key: string)=> string}) => {
-            is_dialog_open.value = true;
-            is_loading.value     = true;
-            error.value          = null;
-            try {
-                const response = await getPayPeriodExpenses(
-                    params.email,
-                    params.pay_year,
-                    params.pay_period_no,
-                );
-                data.value = response;
-            } catch (err) {
-                setErrorFrom(err, params.t);
-                data.value = {
-                    pay_period_no:  params.pay_period_no,
-                    pay_year:       params.pay_year,
-                    employee_email:  params.email,
-                    is_approved:    false,
-                    expenses:       [],
-                    totals:         { amount: 0, mileage: 0},
-                };
-            } finally {
-                is_loading.value = false;
-            }
-    }
-
-    const saveExpenses = async (payload: {
-        email: string;
-        pay_year: number;
-        pay_period_no: number;
-        expenses: any[]; t?: (_key: string) => string
-    }) => {
+    const open = async (employee_email: string) => {
+        is_open.value = true;
         is_loading.value = true;
-        error.value      = null;
+        error.value = null;
 
         try {
-            const updated = await putPayPeriodExpenses(
-                payload.email,
-                payload.pay_year,
-                payload.pay_period_no,
-                payload.expenses
-            );
-            data.value = updated;
-            is_dialog_open.value = false;
+            const response = await getPayPeriodExpenses(employee_email, pay_period.pay_year, pay_period.pay_period_no,);
+            current_expenses.value = response;
+            initial_expenses.value = unwrapAndClone(response);
         } catch (err) {
-            setErrorFrom(err, payload.t);
+            setErrorFrom(err);
+            current_expenses.value = default_pay_period_expenses;
+            initial_expenses.value = default_pay_period_expenses;
+        } finally {
+            is_loading.value = false;
+        }
+    }
+
+    const getPayPeriodExpensesByEmployeeEmail = async (employee_email: string): Promise<PayPeriodExpenses> => {
+        const encoded_email = encodeURIComponent(employee_email);
+        const encoded_year  = encodeURIComponent(String(pay_period.pay_year));
+        const encoded_pay_period_no = encodeURIComponent(String(pay_period.pay_period_no));
+    
+        try {
+            const { data } = await api.get<PayPeriodExpenses>(`/expenses/${encoded_email}/${encoded_year}/${encoded_pay_period_no}`);
+    
+            const items = Array.isArray(data.expenses) ? data.expenses.map(normalizeExpense) : [];
+            return {
+                ...data,
+                expenses: items,
+            };
+        } catch(err:any) {
+            const status_code: number = err?.response?.status ?? 500;
+            const data = err?.response?.data ?? {};
+            throw new ExpensesApiError({
+                status_code,
+                error_code: data.error_code,
+                message: data.message || data.error || err.message,
+                context: data.context,
+            });
+        }
+    };
+
+    const onSave = () => {
+        try {
+            validateAll();
+            reset();
+            emit('save', buildExpenseSavePayload({
+                pay_period_no: pay_period.pay_period_no,
+                pay_year: pay_period.pay_year,
+                employee_email: employeeEmail,
+                is_approved: false,
+                expenses: payload(),
+            }));
+
+        } catch (err: any) {
+            emit('error', toExpensesError(err));
+        }
+    };
+
+    const onFormSubmit = async () => {
+        try {
+            await validateAnd(async () => {
+                addFromDraft();
+                reset();
+            });
+        } catch (err: any) {
+            emit('error', toExpensesError(err));
+        }
+    };
+
+    const upsertOrDeletePayPeriodExpenseByEmployeeEmail = async (employee_email: string, expenses: Expense[]) => {
+        is_loading.value = true;
+        error.value = null;
+
+        try {
+            const updated = await putPayPeriodExpenses(employee_email, pay_period.pay_year, pay_period.pay_period_no, expenses);
+            pay_period_expenses.value = updated;
+            is_open.value = false;
+        } catch (err) {
+            setErrorFrom(err);
         } finally {
             is_loading.value = false;
         }
     };
 
-    const closeDialog = () => {
-        error.value          = null;
-        is_dialog_open.value = false;
+    const close = () => {
+        error.value = null;
+        is_open.value = false;
     };
 
     return {
-        is_dialog_open,
+        is_open,
         is_loading,
-        data,
+        current_expenses,
+        initial_expenses,
         error,
-        openDialog,
-        saveExpenses,
-        closeDialog,
+        open,
+        upsertOrDeletePayPeriodExpenseByEmployeeEmail,
+        close,
     };
 });
\ No newline at end of file
diff --git a/src/stores/shift-store.ts b/src/stores/shift-store.ts
index 5acf6b2..c5b33c3 100644
--- a/src/stores/shift-store.ts
+++ b/src/stores/shift-store.ts
@@ -1,50 +1,80 @@
-import { defineStore } from "pinia";
 import { ref } from "vue";
-import { toShiftPayload } from "src/modules/timesheets/utils/shift.util";
-import type { FormMode } from "src/modules/timesheets/types/ui.types";
-import type { ShiftPayload } from "src/modules/timesheets/types/shift.types";
+import { defineStore } from "pinia";
+import { unwrapAndClone } from "src/utils/unwrap-and-clone";
+import { timesheetService } from "src/modules/timesheets/services/timesheet-service";
+import { useTimesheetStore } from "src/stores/timesheet-store";
+import { default_shift, type UpsertAction, type Shift, UpsertShift } from "src/modules/timesheets/models/shift.models";
+import { GenericApiError } from "src/modules/timesheets/models/expense.validation";
 
- /* eslint-disable */
 export const useShiftStore = defineStore('shift', () => {
-    const is_open       = ref(false);
-    const mode          = ref<FormMode>('create');
-    const date_iso      = ref<string>('');
-    const initial_shift = ref<ShiftPayload | null>(null);
+    const is_open = ref(false);
+    const mode = ref<UpsertAction>('create');
+    const date_iso = ref<string>('');
+    const current_shift = ref<Shift>(default_shift);
+    const initial_shift = ref<Shift>(default_shift);
 
-    const open = (nextMode: FormMode, date: string, payload: ShiftPayload | null) => {
-        mode.value          = nextMode;
-        date_iso.value      = date;
-        initial_shift.value = payload;
-        is_open.value       = true;
+    const timesheet_store = useTimesheetStore();
+
+    const open = (next_mode: UpsertAction, date: string, current: Shift, initial: Shift) => {
+        mode.value = next_mode;
+        date_iso.value = date;
+        current_shift.value = current;                    // new shift
+        initial_shift.value = initial;                    // old shift
+        is_open.value = true;
     };
 
     const openCreate = (date: string) => {
-        open('create', date, null);
+        open('create', date, default_shift, default_shift);
     };
 
-    const openEdit = (date: string, shift: any) => {
-        open('edit', date, toShiftPayload(shift as any));
+    const openUpdate = (date: string, shift: Shift) => {
+        open('update', date, shift, unwrapAndClone(shift));
     };
 
     const openDelete = (date: string, shift: any) => {
-        open('delete', date, toShiftPayload(shift as any));
+        open('delete', date, default_shift, shift);
     }
 
-    const close = () => { 
-        is_open.value       = false;
-        mode.value          = 'create';
-        date_iso.value      = '';
-        initial_shift.value = null;
+    const close = () => {
+        is_open.value = false;
+        mode.value = 'create';
+        date_iso.value = '';
+        current_shift.value = default_shift;
+        initial_shift.value = default_shift;
     };
 
+    const upsertOrDeleteShiftByEmployeeEmail = async (employee_email: string, upsert_shift: UpsertShift) => {
+        const encoded_email = encodeURIComponent(employee_email);
+        const encoded_date = encodeURIComponent(current_shift.value.date);
+
+        try {
+            const result = await timesheetService.upsertOrDeletePayPeriodShifts(encoded_email, encoded_date, [ upsert_shift, ]);
+            timesheet_store.pay_period_details = result;
+        } catch (err: any) {
+            const status_code: number = err?.response?.status ?? 500;
+            const data = err?.response?.data ?? {};
+            throw new GenericApiError({
+                status_code,
+                error_code: data.error_code,
+                message: data.message || data.error || err.message,
+                context: data.context,
+            });
+        } finally {
+            close();
+        }
+    }
+
+
     return {
         is_open,
         mode,
         date_iso,
+        current_shift,
         initial_shift,
         openCreate,
-        openEdit,
+        openUpdate,
         openDelete,
         close,
+        upsertOrDeleteShiftByEmployeeEmail,
     };
 })
\ No newline at end of file
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index 577da3e..00c09ed 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -3,21 +3,18 @@ import { computed, ref } from 'vue';
 import { withLoading } from 'src/utils/store-helpers';
 import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/timesheet-approval-service';
 import { timesheetService } from 'src/modules/timesheets/services/timesheet-service';
-import { default_timesheet_approval_overview_crew, type TimesheetApprovalOverviewCrew } from "src/modules/timesheet-approval/models/timesheet-approval-overview.models";
-// import type { Timesheet } from 'src/modules/timesheets/types/timesheet.interfaces';
-import type { TimesheetDetails } from 'src/modules/timesheets/models/timesheet.models';
-import { default_timesheet_details } from 'src/modules/timesheets/types/timesheet.defaults';
+import { default_pay_period_overview, type PayPeriodOverview } from "src/modules/timesheet-approval/models/pay-period-overview.models";
 import { default_pay_period, type PayPeriod } from 'src/modules/shared/types/pay-period-interface';
-import type { PayPeriodReportFilters } from 'src/modules/timesheet-approval/types/pay-period-report';
+import { default_pay_period_details, type PayPeriodDetails } from 'src/modules/timesheets/models/pay-period-details.models';
+import { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
 
 export const useTimesheetStore = defineStore('timesheet', () => {
     const is_loading = ref<boolean>(false);
     const pay_period = ref<PayPeriod>(default_pay_period);
-    const timesheet_approval_overview_list = ref<TimesheetApprovalOverview[]>([]);
-    const timesheet_aproval_overview = ref<TimesheetApprovalOverview>(default_pay_period_employee_overview);
-    const pay_period_employee_details = ref<TimesheetDetails>(default_timesheet_details);
+    const pay_period_overviews = ref<PayPeriodOverview[]>([ default_pay_period_overview, ]);
+    const current_pay_period_overview = ref<PayPeriodOverview>(default_pay_period_overview);
+    const pay_period_details = ref<PayPeriodDetails>(default_pay_period_details);
     const pay_period_report = ref();
-    // const timesheet = ref<Timesheet>(default_timesheet);
     const is_calendar_limit = computed( ()=> 
         pay_period.value.pay_year === 2024 &&
         pay_period.value.pay_period_no <= 1
@@ -29,11 +26,11 @@ export const useTimesheetStore = defineStore('timesheet', () => {
                 let response;
 
                 if (typeof date_or_year === 'string') {
-                    response = await timesheetApprovalService.getPayPeriodByDate(date_or_year);  
+                    response = await timesheetService.getPayPeriodByDate(date_or_year);  
                     return true;
                 }
                 else if ( typeof date_or_year === 'number' && period_number ) {
-                    response = await timesheetApprovalService.getPayPeriodByYearAndPeriodNumber(date_or_year, period_number);
+                    response = await timesheetService.getPayPeriodByYearAndPeriodNumber(date_or_year, period_number);
                     return true;
                 }
                 else response = default_pay_period;
@@ -43,7 +40,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
             } catch(error){
                 console.error('Could not get current pay period: ', error );
                 pay_period.value = default_pay_period;
-                pay_period_employee_overview_list.value = [];
+                pay_period_overviews.value = [ default_pay_period_overview, ];
                 //TODO: More in-depth error-handling here
             }
 
@@ -51,58 +48,15 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         });
     };
 
-    const getPayPeriodEmployeeOverviewListBySupervisorEmail = async (pay_year: number, period_number: number, supervisor_email: string): Promise<boolean> => {
+    const getPayPeriodDetailsByEmployeeEmail = async (employee_email: string) => {
         return withLoading( is_loading, async () => {
             try {
-                const response = await timesheetApprovalService.getPayPeriodEmployeeOverviewListBySupervisorEmail( pay_year,  period_number, supervisor_email );
-                pay_period_employee_overview_list.value = response.employees_overview;
-                return true;
-            } catch (error) {
-                console.error('There was an error retrieving Employee Pay Period overviews: ', error);
-                pay_period_employee_overview_list.value = [];
-                // TODO: More in-depth error-handling here
-            }
-
-            return false;
-        });
-    };
-
-    const getPayPeriodOverviewByEmployeeEmail = (email: string): PayPeriodEmployeeOverview => {
-        const response = pay_period_employee_overview_list.value?.find( employee_overview => employee_overview.email === email);
-        if (typeof response === 'undefined') {
-            pay_period_employee_overview.value = default_pay_period_employee_overview;
-        } else {
-            pay_period_employee_overview.value = response;
-        }
-        
-        return pay_period_employee_overview.value;
-    };
-
-    // const getTimesheetByEmail = async (employee_email: string) => {
-    //     return withLoading( is_loading, async () => {
-    //         try{
-    //             const response = await timesheetTempService.getTimesheetsByEmail(employee_email);
-    //             timesheet.value = response;
-
-    //             return true;
-    //         }catch (error) {
-    //             console.error('There was an error retrieving timesheet details for this employee: ', error);
-    //             timesheet.value = { ...default_timesheet }
-    //         }
-
-    //         return false;
-    //     });
-    // };
-
-    const getPayPeriodEmployeeDetailsByEmployeeEmail = async (employee_email: string) => {
-        return withLoading( is_loading, async () => {
-            try {
-                const response = await timesheetApprovalService.getPayPeriodEmployeeDetailsByPayPeriodAndEmail(
+                const response = await timesheetService.getPayPeriodDetailsByPayPeriodAndEmployeeEmail(
                     pay_period.value.pay_year, 
                     pay_period.value.pay_period_no, 
                     employee_email
                 );
-                pay_period_employee_details.value = response;
+                pay_period_details.value = response;
 
                 return true;
             } catch (error) {
@@ -110,17 +64,33 @@ export const useTimesheetStore = defineStore('timesheet', () => {
                 // TODO: More in-depth error-handling here
             }
 
-            pay_period_employee_details.value = default_pay_period_employee_details;
+            pay_period_details.value = default_pay_period_details;
             return false;
         });
     };
 
-    const getTimesheetApprovalCSVReport = async (report_filters?: PayPeriodReportFilters) => {
+    const getPayPeriodOverviewsBySupervisorEmail = async (pay_year: number, period_number: number, supervisor_email: string): Promise<boolean> => {
         return withLoading( is_loading, async () => {
             try {
-                const response = await timesheetApprovalService.getTimesheetApprovalCSVReport(
-                    pay_period.value.pay_year, 
-                    pay_period.value.pay_period_no, 
+                const response = await timesheetApprovalService.getPayPeriodOverviewsBySupervisorEmail( pay_year,  period_number, supervisor_email );
+                pay_period_overviews.value = response;
+                return true;
+            } catch (error) {
+                console.error('There was an error retrieving Employee Pay Period overviews: ', error);
+                pay_period_overviews.value = [ default_pay_period_overview, ];
+                // TODO: More in-depth error-handling here
+            }
+
+            return false;
+        });
+    };
+
+    const getPayPeriodReportByYearAndPeriodNumber = async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
+        return withLoading( is_loading, async () => {
+            try {
+                const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(
+                    year, 
+                    period_number, 
                     report_filters
                 );
                 pay_period_report.value = response;
@@ -136,18 +106,15 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     };
 
     return { 
-        pay_period, 
-        pay_period_employee_overview_list,
-        pay_period_employee_overview,
-        pay_period_employee_details,
-        timesheet,
         is_loading,
         is_calendar_limit,
+        pay_period, 
+        pay_period_overviews,
+        current_pay_period_overview,
+        pay_period_details,
         getPayPeriodByDateOrYearAndNumber,
-        // getTimesheetByEmail,
-        getPayPeriodEmployeeOverviewListBySupervisorEmail,
-        getPayPeriodOverviewByEmployeeEmail,
-        getPayPeriodEmployeeDetailsByEmployeeEmail,
-        getTimesheetApprovalCSVReport,
+        getPayPeriodOverviewsBySupervisorEmail,
+        getPayPeriodDetailsByEmployeeEmail,
+        getPayPeriodReportByYearAndPeriodNumber,
     };
 });
\ No newline at end of file
diff --git a/src/utils/deep-equal.ts b/src/utils/deep-equal.ts
index 352cce9..3b575f3 100644
--- a/src/utils/deep-equal.ts
+++ b/src/utils/deep-equal.ts
@@ -1,28 +1,41 @@
-export const deepEqual = (a: unknown, b: unknown): boolean => {
-  if (a === b) {
-    return true;
-  }
+import { unwrapAndClone } from "src/utils/unwrap-and-clone";
 
-  if (
-    a == null || // handles null and undefined
-    b == null ||
-    typeof a !== 'object' ||
-    typeof b !== 'object'
-  ) {
-    return false;
-  }
+/**
+ * Internal recursive function comparing two plain values.
+ */
+const _deepEqualRecursive = (a: unknown, b: unknown): boolean => {
+    if (a === b) return true;
 
-  const aKeys = Object.keys(a as Record<string, unknown>);
-  const bKeys = Object.keys(b as Record<string, unknown>);
+    if (a == null || b == null || typeof a !== "object" || typeof b !== "object") {
+        return false;
+    }
 
-  if (aKeys.length !== bKeys.length) {
-    return false;
-  }
+    // Handle arrays
+    if (Array.isArray(a) && Array.isArray(b)) {
+        if (a.length !== b.length) return false;
+        return a.every((val, i) => _deepEqualRecursive(val, b[i]));
+    } else if (Array.isArray(a) || Array.isArray(b)) {
+        return false; // one is array, other is not
+    }
 
-  return aKeys.every((key) =>
-    deepEqual(
-      (a as Record<string, unknown>)[key],
-      (b as Record<string, unknown>)[key]
-    )
-  );
+    const aKeys = Object.keys(a as Record<string, unknown>);
+    const bKeys = Object.keys(b as Record<string, unknown>);
+
+    if (aKeys.length !== bKeys.length) return false;
+
+    return aKeys.every((key) =>
+        _deepEqualRecursive(
+            (a as Record<string, unknown>)[key],
+            (b as Record<string, unknown>)[key]
+        )
+    );
+};
+
+/**
+ * Deep equality check that normalizes reactive objects first.
+ */
+export const deepEqual = (given: unknown, expected: unknown): boolean => {
+    const a = unwrapAndClone(given as object);
+    const b = unwrapAndClone(expected as object);
+    return _deepEqualRecursive(a, b);
 };
diff --git a/src/utils/normalize-object.ts b/src/utils/normalize-object.ts
new file mode 100644
index 0000000..2b1c6d4
--- /dev/null
+++ b/src/utils/normalize-object.ts
@@ -0,0 +1,31 @@
+export type Normalizer<T> = {
+    [K in keyof T]: (val: unknown) => T[K];
+};
+
+export const normalizeObject = <T>(raw: any, schema: Normalizer<T>): T => {
+    const result = {} as T;
+    for (const key in schema) {
+        result[key] = schema[key](raw[key]);
+    }
+    return result;
+}
+
+// Example for Expense
+// export interface Expense {
+//     date: string;
+//     type: "TRAVEL" | "MEAL" | "OTHER";
+//     comment: string;
+//     amount?: number;
+//     mileage?: number;
+// }
+
+// const expenseNormalizer: Normalizer<Expense> = {
+//     date: (v) => String(v ?? ""), // fallback to ""
+//     type: (v) => (["TRAVEL", "MEAL", "OTHER"].includes(v) ? v : "OTHER"),
+//     comment: (v) => String(v ?? ""),
+//     amount: (v) => (typeof v === "number" ? v : undefined),
+//     mileage: (v) => (typeof v === "number" ? v : undefined),
+// };
+
+// export const normalizeExpense = (raw: unknown): Expense =>
+//     normalizeObject(raw, expenseNormalizer);
\ No newline at end of file
diff --git a/src/utils/store-helpers.ts b/src/utils/store-helpers.ts
index 096b4e5..99c2daf 100644
--- a/src/utils/store-helpers.ts
+++ b/src/utils/store-helpers.ts
@@ -1,10 +1,8 @@
-import type { Ref } from "vue";
-
-export const withLoading = async <T>( loading_state: Ref<boolean>, fn: () => Promise<T> ) => {
-    loading_state.value = true;
+export const withLoading = async <T>( loading_state: boolean, fn: () => Promise<T> ) => {
+    loading_state = true;
     try {
         return await fn();
     } finally {
-        loading_state.value = false;
+        loading_state = false;
     }
 };
\ No newline at end of file
diff --git a/src/utils/to-qselect-options.ts b/src/utils/to-qselect-options.ts
new file mode 100644
index 0000000..c12619b
--- /dev/null
+++ b/src/utils/to-qselect-options.ts
@@ -0,0 +1,6 @@
+export const toQSelectOptions = <T>(values: readonly T[], i18n_domain?: string): { label: string; value: T }[] => {
+    return values.map(value => ({
+        label: ((i18n_domain ?? "") + value).toString(),
+        value: value as T
+    }));
+};
\ No newline at end of file
diff --git a/src/utils/unwrap-and-clone.ts b/src/utils/unwrap-and-clone.ts
new file mode 100644
index 0000000..779a358
--- /dev/null
+++ b/src/utils/unwrap-and-clone.ts
@@ -0,0 +1,16 @@
+import { isProxy, toRaw } from "vue";
+
+/**
+ * Converts reactive proxies or objects into a deep, plain clone.
+ */
+export const unwrapAndClone = <T extends object>(obj: T): T => {
+    const raw = isProxy(obj) ? toRaw(obj) : obj;
+
+    // Use structuredClone if available (handles Dates, Maps, Sets, circulars)
+    if (typeof (globalThis as any).structuredClone === "function") {
+        return (globalThis as any).structuredClone(raw);
+    }
+
+    // Fallback for older environments (loses Dates, Sets, Maps)
+    return JSON.parse(JSON.stringify(raw));
+};
\ No newline at end of file

From dc615340bcc83674d7f356b32762b0bcd568fa1a Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Tue, 7 Oct 2025 14:13:04 -0400
Subject: [PATCH 4/4] fix(auth): change auth signup to use authentik test
 account rather than seed account for supervisor

---
 quasar.config.ts                              |  12 +-
 src/i18n/en-ca/index.ts                       |   1 +
 src/i18n/fr-ca/index.ts                       |   1 +
 src/layouts/main-layout.vue                   |   8 +-
 .../auth.models.ts}                           |   2 +-
 .../components/pay-period-navigator.vue       |   4 +-
 .../shared/components/q-table-filters.vue     |  18 +-
 .../details-crud-dialog-chart-expenses.vue    |  83 +++---
 ...details-crud-dialog-chart-hours-worked.vue |  17 +-
 .../details-crud-dialog-chart-shift-types.vue |  66 +++--
 .../components/details-crud-dialog.vue        | 158 +++++------
 .../components/overview-list-item.vue         |  10 +-
 .../components/overview-list.vue              |  91 +++---
 .../components/overview-report.vue            |  49 ++--
 .../models/pay-period-overview.models.ts      |  10 +
 .../timesheet-approval-csv-report.models.ts   |   2 +-
 .../pages/timesheet-approval-page.vue         |  37 ---
 .../services/timesheet-approval-service.ts    |   4 +-
 .../expense-crud-dialog-form.vue              |  83 +++---
 .../components/expense-crud-dialog-header.vue |  34 +++
 .../components/expense-crud-dialog-list.vue   | 151 ++++++++++
 ...expense-crud-dialog-supervisor-comment.vue |   0
 .../components/expense-crud-dialog.vue        |  58 ++++
 .../expenses/expense-crud-dialog-list.vue     | 117 --------
 .../expenses/expense-crud-dialog.vue          | 121 --------
 .../expenses/timesheet-details-expenses.vue   | 267 ------------------
 .../{shift => }/shift-crud-dialog.vue         |   0
 .../{shift => }/shift-list-header.vue         |   4 +-
 .../components/shift-list-legend.vue          |  72 +++++
 .../components/{shift => }/shift-list-row.vue |  10 +-
 .../components/{shift => }/shift-list.vue     |  65 +++--
 .../components/shift/shift-list-legend.vue    |  42 ---
 .../components/timesheet-wrapper.vue          |  88 ++++++
 .../timesheet/timesheet-wrapper.vue           |  68 -----
 .../composables/api/use-expense-api.ts        |  14 +-
 .../composables/api/use-shift-api.ts          |   2 +-
 .../composables/use-expense-draft.ts          |   8 +-
 .../composables/use-expense-items.ts          |  99 +++----
 .../timesheets/constants/expense.constants.ts |   2 -
 .../timesheets/models/expense.models.ts       |   9 +-
 .../timesheets/models/expense.validation.ts   |  14 +-
 .../models/pay-period-details.models.ts       |  13 +-
 .../timesheets/pages/timesheet-page.vue       |  48 ----
 .../timesheets/services/timesheet-service.ts  |  20 +-
 src/modules/timesheets/utils/expense.util.ts  |  11 +-
 .../timesheets/utils/timesheet-format.util.ts |   2 +-
 .../profile-page.vue}                         |   0
 .../pages/supervisor-crew-page.vue            |   0
 src/pages/timesheet-approval-page.vue         |  46 +++
 src/pages/timesheet-page.vue                  |  37 +++
 src/router/routes.ts                          |   8 +-
 src/stores/auth-store.ts                      |   6 +-
 src/stores/expense-store.ts                   | 117 ++++----
 src/stores/shift-store.ts                     |  26 +-
 src/stores/timesheet-store.ts                 | 124 ++++----
 src/utils/normalize-object.ts                 |   4 +-
 src/utils/store-helpers.ts                    |   1 +
 src/utils/to-qselect-options.ts               |   2 +-
 src/utils/unwrap-and-clone.ts                 |   4 +-
 59 files changed, 1092 insertions(+), 1278 deletions(-)
 rename src/modules/auth/{types/auth-interface.ts => models/auth.models.ts} (56%)
 delete mode 100644 src/modules/timesheet-approval/pages/timesheet-approval-page.vue
 rename src/modules/timesheets/components/{expenses => }/expense-crud-dialog-form.vue (65%)
 create mode 100644 src/modules/timesheets/components/expense-crud-dialog-header.vue
 create mode 100644 src/modules/timesheets/components/expense-crud-dialog-list.vue
 rename src/modules/timesheets/components/{expenses => }/expense-crud-dialog-supervisor-comment.vue (100%)
 create mode 100644 src/modules/timesheets/components/expense-crud-dialog.vue
 delete mode 100644 src/modules/timesheets/components/expenses/expense-crud-dialog-list.vue
 delete mode 100644 src/modules/timesheets/components/expenses/expense-crud-dialog.vue
 delete mode 100644 src/modules/timesheets/components/expenses/timesheet-details-expenses.vue
 rename src/modules/timesheets/components/{shift => }/shift-crud-dialog.vue (100%)
 rename src/modules/timesheets/components/{shift => }/shift-list-header.vue (91%)
 create mode 100644 src/modules/timesheets/components/shift-list-legend.vue
 rename src/modules/timesheets/components/{shift => }/shift-list-row.vue (92%)
 rename src/modules/timesheets/components/{shift => }/shift-list.vue (56%)
 delete mode 100644 src/modules/timesheets/components/shift/shift-list-legend.vue
 create mode 100644 src/modules/timesheets/components/timesheet-wrapper.vue
 delete mode 100644 src/modules/timesheets/components/timesheet/timesheet-wrapper.vue
 delete mode 100644 src/modules/timesheets/pages/timesheet-page.vue
 rename src/{modules/profile/pages/profile-container.vue => pages/profile-page.vue} (100%)
 rename src/{modules/employee-list => }/pages/supervisor-crew-page.vue (100%)
 create mode 100644 src/pages/timesheet-approval-page.vue
 create mode 100644 src/pages/timesheet-page.vue

diff --git a/quasar.config.ts b/quasar.config.ts
index 3821349..13781d0 100644
--- a/quasar.config.ts
+++ b/quasar.config.ts
@@ -106,7 +106,7 @@ export default defineConfig((ctx) => {
           color: 'primary',
           avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
         },
-        dark: "auto",
+        dark: false,
       },
 
       // iconSet: 'material-icons', // Quasar icon set
@@ -127,15 +127,7 @@ export default defineConfig((ctx) => {
 
     // animations: 'all', // --- includes all animations
     // https://v2.quasar.dev/options/animations
-    animations: [
-      'fadeIn',
-      'fadeOut',
-      'fadeInUp',
-      'zoomIn',
-      'zoomOut',
-      'flipInX',
-      'flipOutX',
-    ],
+    animations: 'all',
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#sourcefiles
     // sourceFiles: {
diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index 6c8f371..922125b 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -83,6 +83,7 @@ export default {
       cancel: "cancel",
       update: "update",
       modify: "modify",
+      close: "close",
     },
     misc: {
       or: "or",
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 907802f..213d174 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -83,6 +83,7 @@ export default {
       cancel: "annuler",
       update: "mettre à jour",
       modify: "modifier",
+      close: "fermer",
     },
     misc: {
       or: "ou",
diff --git a/src/layouts/main-layout.vue b/src/layouts/main-layout.vue
index 3ea5017..90b6276 100644
--- a/src/layouts/main-layout.vue
+++ b/src/layouts/main-layout.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
   import { RouterView } from 'vue-router';
-  import HeaderBar from 'src/modules/layouts/components/main-layout-header-bar.vue';
-  import FooterBar from 'src/modules/layouts/components/main-layout-footer-bar.vue';
-  import RightDrawer from 'src/modules/layouts/components/main-layout-right-drawer.vue';
+  import HeaderBar from 'src/layouts/components/main-layout-header-bar.vue';
+  import FooterBar from 'src/layouts/components/main-layout-footer-bar.vue';
+  import LeftDrawer from 'src/layouts/components/main-layout-left-drawer.vue';
 </script>
 
 <template>
   <q-layout view="hHh lpR fFf">
     <HeaderBar />
-    <RightDrawer />
+    <LeftDrawer />
     <q-page-container>
       <router-view class="q-pa-sm bg-secondary" />
     </q-page-container>
diff --git a/src/modules/auth/types/auth-interface.ts b/src/modules/auth/models/auth.models.ts
similarity index 56%
rename from src/modules/auth/types/auth-interface.ts
rename to src/modules/auth/models/auth.models.ts
index 6027520..8a1042c 100644
--- a/src/modules/auth/types/auth-interface.ts
+++ b/src/modules/auth/models/auth.models.ts
@@ -1,4 +1,4 @@
-import type { User } from "src/modules/shared/types/user-interface";
+import type { User } from "src/modules/shared/models/user.models";
 
 export interface AuthState {
   token: string;
diff --git a/src/modules/shared/components/pay-period-navigator.vue b/src/modules/shared/components/pay-period-navigator.vue
index d440b8b..4485c1e 100644
--- a/src/modules/shared/components/pay-period-navigator.vue
+++ b/src/modules/shared/components/pay-period-navigator.vue
@@ -27,7 +27,7 @@
 </script>
 
 <template>
-    <div class="row q-mb-lg q-mt-lg" >
+    <div class="row" >
         <!-- navigation to previous week -->
         <q-btn 
             push rounded
@@ -53,7 +53,7 @@
             color="primary"
             @click="is_showing_calendar_picker = true"
             :disable="timesheet_store.is_loading"
-            class="q-px-lg"
+            class="q-px-xl"
         >
             <q-tooltip
                 anchor="top middle"
diff --git a/src/modules/shared/components/q-table-filters.vue b/src/modules/shared/components/q-table-filters.vue
index 5ceb9d9..1cb919a 100644
--- a/src/modules/shared/components/q-table-filters.vue
+++ b/src/modules/shared/components/q-table-filters.vue
@@ -6,7 +6,8 @@
     <!-- Filters toggle -->
     <q-btn-dropdown 
         push
-        class="q-mr-md bg-white text-primary left-rounded" 
+        rounded
+        class="q-mr-md bg-white text-primary" 
         :label="$t('shared.label.filter')" 
         icon="filter_alt" 
     />
@@ -16,6 +17,7 @@
             v-model="search_model" 
             outlined 
             dense
+            rounded
             debounce="300"
             class="right-rounded"
             :label="$t('shared.label.search')" 
@@ -23,21 +25,11 @@
             bg-color="white" 
             color="primary"
     >
-        <template #before>
+        <template #prepend>
             <q-icon 
                 name="search" 
                 color="primary"
             />
         </template>
     </q-input>
-</template>
-
-<style scoped>
-    .left-rounded {
-        border-radius: 50% 0 0 50%;
-    }
-
-    .right-rounded {
-        border-radius: 0 50% 50% 0;
-    }
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/details-crud-dialog-chart-expenses.vue b/src/modules/timesheet-approval/components/details-crud-dialog-chart-expenses.vue
index 18c1fe5..8854179 100644
--- a/src/modules/timesheet-approval/components/details-crud-dialog-chart-expenses.vue
+++ b/src/modules/timesheet-approval/components/details-crud-dialog-chart-expenses.vue
@@ -1,11 +1,13 @@
-<script setup lang="ts">
+<script
+    setup
+    lang="ts"
+>
     import { ref } from 'vue';
     import { Bar } from 'vue-chartjs';
     import { useI18n } from 'vue-i18n';
     import { useQuasar } from 'quasar';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale, type ChartData, type ChartDataset } from 'chart.js';
-    import type { Expense } from 'src/modules/timesheets/models/expense.models';
 
     const { t } = useI18n();
     const $q = useQuasar();
@@ -15,70 +17,55 @@
     ChartJS.defaults.maintainAspectRatio = false;
     ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
 
-    defineProps<{
-        
-    }>();
+    const timesheet_store = useTimesheetStore();
 
-    // const expenses_dataset = ref<ChartDataset<'bar'>[]>([]);
-    // const expenses_labels = ref<string[]>([]);
+    const expenses_dataset = ref<ChartDataset<'bar'>[]>([]);
+    const expenses_labels = ref<string[]>([]);
 
-    // const getExpensesData = (): ChartData<'bar'> => {
-    //     if (timesheetDetails) {
-    //         const all_weeks = [timesheetDetails.week1, timesheetDetails.week2];
-    //         const all_days = all_weeks.flatMap( week => Object.values(week.expenses));
-    //         const all_days_dates = all_weeks.flatMap( week => Object.values(week.shifts))          
+    const getExpensesData = (): ChartData<'bar'> => {
+        const all_days = timesheet_store.pay_period_details.weeks.flatMap(week => Object.values(week.expenses));
+        const all_days_dates = timesheet_store.pay_period_details.weeks.flatMap(week => Object.values(week.shifts))
 
-    //         const all_costs = all_days.map( day => getTotalAmounts(day.cash));
-    //         const all_mileage = all_days.map( day => getTotalAmounts(day.km));
-            
-            
-    //         expenses_dataset.value = [
-    //             {
-    //                 label: t('timesheet_approvals.table.expenses'),
-    //                 data: all_costs,
-    //                 backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
-    //             },
-    //             {
-    //                 label: t('timesheet_approvals.table.mileage'),
-    //                 data: all_mileage,
-    //                 backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
-    //             }
-    //         ]
+        const all_costs = all_days.map(day => day.total_expenses);
+        const all_mileage = all_days.map(day => day.total_mileage);
 
-    //         expenses_labels.value = all_days_dates.map( day => day.short_date);
-    //     }
 
-    //     return {
-    //         datasets: expenses_dataset.value,
-    //         labels: expenses_labels.value
-    //     };
-    // };
+        expenses_dataset.value = [
+            {
+                label: t('timesheet_approvals.table.expenses'),
+                data: all_costs,
+                backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
+            },
+            {
+                label: t('timesheet_approvals.table.mileage'),
+                data: all_mileage,
+                backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
+            }
+        ]
 
-    const getTotalAmounts = (expenses: Expense[]): number => {
-        let total_amount = 0;
+        expenses_labels.value = all_days_dates.map(day => day.short_date);
 
-        for (const expense of expenses) {
-            total_amount += expense.amount;
-        }
-
-        return total_amount;
-    }
+        return {
+            datasets: expenses_dataset.value,
+            labels: expenses_labels.value
+        };
+    };
 </script>
 
 <template>
     <div>
-        <Bar 
+        <Bar
             :data="getExpensesData()"
             :options="({
-                indexAxis: $q.screen.lt.md? 'y' : 'x',
+                indexAxis: $q.screen.lt.md ? 'y' : 'x',
                 plugins: {
-                
+
                     title: {
                         display: true,
                         text: t('timesheet_approvals.chart.expenses_title'),
                     },
-                    legend:{
-                        labels:{
+                    legend: {
+                        labels: {
                             boxWidth: 15,
                         }
                     }
diff --git a/src/modules/timesheet-approval/components/details-crud-dialog-chart-hours-worked.vue b/src/modules/timesheet-approval/components/details-crud-dialog-chart-hours-worked.vue
index 4a5bcad..862fae3 100644
--- a/src/modules/timesheet-approval/components/details-crud-dialog-chart-hours-worked.vue
+++ b/src/modules/timesheet-approval/components/details-crud-dialog-chart-hours-worked.vue
@@ -4,8 +4,8 @@
     import { Bar } from 'vue-chartjs';
     import { useI18n } from 'vue-i18n';
     import { useQuasar } from 'quasar';
-    import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, type ChartData, type ChartOptions, type Plugin, type ChartDataset } from 'chart.js';
-    import type { TimesheetDetails } from 'src/modules/timesheets/models/pay-period-details.models';
+    import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, type ChartData, type ChartDataset } from 'chart.js';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
     
     const { t } = useI18n();
     const $q = useQuasar();
@@ -15,19 +15,14 @@
     ChartJS.defaults.maintainAspectRatio = false;
     ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
 
-    const props = defineProps<{
-        rawData: TimesheetDetails | undefined;
-        options?: ChartOptions<"bar"> | undefined;
-        plugins?: Plugin<"bar">[] | undefined;
-    }>();
+    const { pay_period_details } = useTimesheetStore();
 
     const hours_worked_labels = ref<string[]>([]);
     const hours_worked_dataset = ref<ChartDataset<'bar'>[]>([]);    
 
     const getHoursWorkedData = (): ChartData<'bar'> => {
-        if (props.rawData) {
-            const all_weeks = [props.rawData.week1, props.rawData.week2];
-            const all_days = all_weeks.flatMap( week => Object.values(week.shifts));
+        
+            const all_days = pay_period_details.weeks.flatMap( week => Object.values(week.shifts));
             const datasetConfig = [
                 {
                     key: 'regular_hours',
@@ -58,7 +53,7 @@
             }));
 
             hours_worked_labels.value = all_days.map(day => day.short_date);
-        }
+        
 
         return {
             labels: hours_worked_labels.value,
diff --git a/src/modules/timesheet-approval/components/details-crud-dialog-chart-shift-types.vue b/src/modules/timesheet-approval/components/details-crud-dialog-chart-shift-types.vue
index 45060a8..14bd9c9 100644
--- a/src/modules/timesheet-approval/components/details-crud-dialog-chart-shift-types.vue
+++ b/src/modules/timesheet-approval/components/details-crud-dialog-chart-shift-types.vue
@@ -1,51 +1,49 @@
-<script setup lang="ts">
-    /* eslint-disable */
+<script
+    setup
+    lang="ts"
+>
     import { ref } from 'vue';
     import { colors } from 'quasar';
-    import { useI18n } from 'vue-i18n';
     import { useQuasar } from 'quasar';
     import { Doughnut } from 'vue-chartjs';
     import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale, type ChartDataset } from 'chart.js';
-    import type { PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';
-    
-    const { t } = useI18n();
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+
     const $q = useQuasar();
-    
+
     ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale);
     ChartJS.defaults.font.family = '"Roboto", sans-serif';
     ChartJS.defaults.maintainAspectRatio = false;
     ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
 
-    const props = defineProps<{
-        rawData: PayPeriodEmployeeOverview | undefined;
-    }>();
+    const { current_pay_period_overview } = useTimesheetStore();
 
     const shift_type_labels = ref<string[]>([]);
     const shift_type_totals = ref<ChartDataset<'doughnut'>[]>([{ data: [40, 0, 2, 5], }]);
 
-    if (props.rawData){
-        shift_type_totals.value = [{
-            data: [
-                props.rawData.regular_hours, 
-                props.rawData.evening_hours,
-                props.rawData.emergency_hours,
-                props.rawData.overtime_hours,
-            ],
-            backgroundColor: [
-                colors.getPaletteColor('green-5'),                                          // Regular
-                colors.getPaletteColor('green-9'),                                          // Evening
-                getComputedStyle(document.body).getPropertyValue('--q-warning').trim(),     // Emergency
-                getComputedStyle(document.body).getPropertyValue('--q-negative').trim(),    // Overtime
-            ]
-        }];
 
-        shift_type_labels.value = [
-            props.rawData.regular_hours.toString() + 'h', 
-            props.rawData.evening_hours.toString()  + 'h',
-            props.rawData.emergency_hours.toString()  + 'h',
-            props.rawData.overtime_hours.toString()  + 'h',
+    shift_type_totals.value = [{
+        data: [
+            current_pay_period_overview.regular_hours,
+            current_pay_period_overview.evening_hours,
+            current_pay_period_overview.emergency_hours,
+            current_pay_period_overview.overtime_hours,
+        ],
+        backgroundColor: [
+            colors.getPaletteColor('green-5'),                                          // Regular
+            colors.getPaletteColor('green-9'),                                          // Evening
+            getComputedStyle(document.body).getPropertyValue('--q-warning').trim(),     // Emergency
+            getComputedStyle(document.body).getPropertyValue('--q-negative').trim(),    // Overtime
         ]
-    }
+    }];
+
+    shift_type_labels.value = [
+        current_pay_period_overview.regular_hours.toString() + 'h',
+        current_pay_period_overview.evening_hours.toString() + 'h',
+        current_pay_period_overview.emergency_hours.toString() + 'h',
+        current_pay_period_overview.overtime_hours.toString() + 'h',
+    ]
+
 
     const data = {
         labels: shift_type_labels.value,
@@ -59,9 +57,9 @@
         <Doughnut
             :data="data"
             :options="({
-                plugins:{
-                    legend:{
-                        labels:{
+                plugins: {
+                    legend: {
+                        labels: {
                             boxWidth: 15,
                         }
                     }
diff --git a/src/modules/timesheet-approval/components/details-crud-dialog.vue b/src/modules/timesheet-approval/components/details-crud-dialog.vue
index a594f1d..35530f4 100644
--- a/src/modules/timesheet-approval/components/details-crud-dialog.vue
+++ b/src/modules/timesheet-approval/components/details-crud-dialog.vue
@@ -1,72 +1,73 @@
-<script setup lang="ts">
+<script
+    setup
+    lang="ts"
+>
     import { ref } from 'vue';
-    // import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import { shift_type_legend } from 'src/modules/timesheet-approval/models/detailed-dialog-shift-color.model';
-    import DetailedDialogChartHoursWorked from 'src/modules/timesheet-approval/components/graphs/detailed-chart-hours-worked.vue';
-    import DetailedDialogChartShiftTypes from 'src/modules/timesheet-approval/components/graphs/detailed-chart-shift-types.vue';
-    import DetailedDialogChartExpenses from 'src/modules/timesheet-approval/components/graphs/detailed-chart-expenses.vue';
-    import type { PayPeriodOverview }   from 'src/modules/timesheet-approval/models/pay-period-overview.models';
-    import type { PayPeriodDetails } from 'src/modules/timesheets/models/pay-period-details.models';
-
-    const dialog_model = defineModel<boolean>('dialog', { default: false });
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import DetailedDialogChartHoursWorked from 'src/modules/timesheet-approval/components/details-crud-dialog-chart-hours-worked.vue';
+    import DetailedDialogChartShiftTypes from 'src/modules/timesheet-approval/components/details-crud-dialog-chart-shift-types.vue';
+    import DetailedDialogChartExpenses from 'src/modules/timesheet-approval/components/details-crud-dialog-chart-expenses.vue';
+    import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';
 
     defineProps<{
-        isLoading: boolean;
-        payPeriodOverview: PayPeriodOverview;
-        payPeriodDetails: PayPeriodDetails;
+        employeeEmail: string;
     }>();
 
+    const dialog_model = defineModel<boolean>('dialog', { default: false });
+    const timesheet_store = useTimesheetStore();
+
     // const timesheet_store = useTimesheetStore();
     const is_showing_graph = ref(true);
 </script>
 
 <template>
-    <q-dialog 
-        v-model="dialog_model" 
+    <q-dialog
+        v-model="dialog_model"
         full-width
-        transition-show="jump-down" 
+        transition-show="jump-down"
         transition-hide="jump-down"
     >
-        <q-card 
+        <!-- loader -->
+        <q-card
+            v-if="timesheet_store.is_loading"
+            class="column flex-center text-center"
+        >
+            <q-spinner
+                color="primary"
+                size="5em"
+                :thickness="10"
+                class="col-auto"
+            />
+            <div class="col-auto text-primary text-h6 text-weight-bold text-center ">
+                {{ $t('shared.loading') }}
+            </div>
+        </q-card>
+
+        <q-card
+            v-else
             class="q-pa-sm shadow-12 rounded-15 column no-wrap relative"
             :style="$q.screen.lt.md ? '' : 'width: 60vw !important;'"
         >
-            <!-- loader -->
-            <q-card-section 
-                v-if="isLoading" 
-                class="column flex-center text-center"
-            >
-                <q-spinner 
-                    color="primary" 
-                    size="5em" 
-                    :thickness="10" 
-                    class="col-auto"
-                />
-                <div class="col-auto text-primary text-h6 text-weight-bold text-center ">
-                    {{ $t('shared.loading') }}
-                </div>
-            </q-card-section>
 
             <!-- employee name -->
-            <q-card-section 
-                v-if="!isLoading"
+            <q-card-section
                 class="text-h5 text-weight-bolder text-center text-primary q-pa-none text-uppercase col-auto"
             >
-                <span> {{ payPeriodDetails.employee_full_name }} </span>
+                <span>{{ timesheet_store.pay_period_details.employee_full_name }}</span>
 
-                <q-separator 
-                    spaced 
-                    size="2px" 
+                <q-separator
+                    spaced
+                    size="2px"
                 />
-                
-                <q-card-actions 
+
+                <q-card-actions
                     align="center"
                     class="q-pa-none"
                 >
-                    <q-btn-toggle 
-                        v-model="is_showing_graph" 
-                        color="white" 
-                        text-color="primary" 
+                    <q-btn-toggle
+                        v-model="is_showing_graph"
+                        color="white"
+                        text-color="primary"
                         toggle-color="primary"
                         :options="[
                             { icon: 'bar_chart', value: true },
@@ -77,67 +78,48 @@
             </q-card-section>
 
             <!-- employee timesheet for supervisor editting -->
-            <q-card-section 
-                v-if="!is_showing_graph" 
+            <q-card-section
+                v-if="!is_showing_graph"
                 class="q-pa-none"
             >
-                <!-- shift type color legend -->
-                <q-card-section class="q-py-xs q-px-none text-center q-my-s">
-                    <q-badge 
-                        v-for="shift_type, index in shift_type_legend"
-                        :key="index"
-                        :color="shift_type.background_color" 
-                        :label="$t(shift_type.type_label)"
-                        :text-color="shift_type.font_color"
-                        class="q-px-md q-py-xs q-mx-xs q-my-none text-uppercase text-weight-bolder justify-center"
-                        style="width: 120px; font-size: 0.8em;" 
-                    />
-                </q-card-section>
-
-                <!-- list of shifts, broken down into weekly columns -->
-                <q-card-section 
-                    :horizontal="$q.screen.gt.sm" 
-                    class="q-pa-none bg-secondary rounded-10"
+                <!-- list of shifts -->
+                <q-card-section
+                    :horizontal="$q.screen.gt.sm"
+                    class="q-pa-none rounded-10"
                 >
-                    <!-- IMPORTANT: Timesheet shift list goes here!!! -->
+                    <TimesheetWrapper
+                        dense
+                        :employee-email="employeeEmail"
+                    />
                 </q-card-section>
             </q-card-section>
 
             <!-- employee timesheet details with chart -->
-            <q-card-section 
-                v-if="is_showing_graph" 
+            <q-card-section
+                v-if="is_showing_graph"
                 class="q-pa-md col column full-width no-wrap"
             >
-                <q-card-section 
-                    :horizontal="!$q.screen.lt.md" 
-                    class="q-pa-none col no-wrap" 
+                <q-card-section
+                    :horizontal="!$q.screen.lt.md"
+                    class="q-pa-none col no-wrap"
                     style="min-height: 300px;"
                 >
-                    <DetailedDialogChartHoursWorked 
-                        :raw-data="payPeriodDetails" 
-                        class="col-7" 
-                    />
+                    <DetailedDialogChartHoursWorked class="col-7" />
 
-                    <q-separator 
-                        spaced 
-                        :vertical="!$q.screen.lt.md" 
+                    <q-separator
+                        spaced
+                        :vertical="!$q.screen.lt.md"
                     />
 
                     <div class="column col justify-center no-wrap q-pa-none">
-                        <DetailedDialogChartShiftTypes 
-                            :raw-data="payPeriodOverview" 
-                            class="col-5" 
+                        <DetailedDialogChartShiftTypes class="col-5" />
+
+                        <q-separator
+                            spaced
+                            :vertical="!$q.screen.lt.md"
                         />
 
-                        <q-separator 
-                            spaced 
-                            :vertical="!$q.screen.lt.md" 
-                        />
-
-                        <DetailedDialogChartExpenses 
-                            :raw-data="payPeriodDetails" 
-                            class="col" 
-                        />
+                        <DetailedDialogChartExpenses class="col" />
                     </div>
                 </q-card-section>
             </q-card-section>
diff --git a/src/modules/timesheet-approval/components/overview-list-item.vue b/src/modules/timesheet-approval/components/overview-list-item.vue
index 2702c30..852fa91 100644
--- a/src/modules/timesheet-approval/components/overview-list-item.vue
+++ b/src/modules/timesheet-approval/components/overview-list-item.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-    import type { PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';
+    import type { PayPeriodOverview } from 'src/modules/timesheet-approval/models/pay-period-overview.models';
 
     const modelApproval = defineModel<boolean>();
-    const { row } = defineProps<{ row: PayPeriodEmployeeOverview; }>();
-    const emit = defineEmits<{ clickDetails: []; }>();
+    const { row } = defineProps<{ row: PayPeriodOverview; }>();
+    const emit = defineEmits<{ 
+        'clickDetails': [overview: PayPeriodOverview]; 
+    }>();
 
     const stack_label_class = "text-weight-bold text-primary text-uppercase text-caption q-pa-none q-my-none ellipsis";
 </script>
@@ -25,7 +27,7 @@
                 class="col-auto q-pa-none q-ma-none"
                 color="primary"
                 icon="work_history"
-                @click="emit('clickDetails')"
+                @click="emit('clickDetails', row)"
                 >
                     <q-tooltip 
                     anchor="top middle"
diff --git a/src/modules/timesheet-approval/components/overview-list.vue b/src/modules/timesheet-approval/components/overview-list.vue
index 2cc04c9..923469e 100644
--- a/src/modules/timesheet-approval/components/overview-list.vue
+++ b/src/modules/timesheet-approval/components/overview-list.vue
@@ -1,70 +1,89 @@
-<script setup lang="ts">
-    import { ref } from 'vue';
+<script
+    setup
+    lang="ts"
+>
+    import { computed, ref } from 'vue';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import OverviewListItem from 'src/modules/timesheet-approval/components/employee-overview/overview-list-item.vue';
-    import QTableFilters from 'src/modules/shared/components/utils/q-table-filters.vue';
-    import { pay_period_employee_overview_columns, type PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';
+    import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
+    import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
+    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
+    import { pay_period_overview_columns, type PayPeriodOverview } from 'src/modules/timesheet-approval/models/pay-period-overview.models';
 
     const timesheet_store = useTimesheetStore();
-
-    // const FORWARD = 1
-    // const BACKWARD = -1
     const filter = ref<string | number | null>('');
 
-    const onClickedDetails = async ( employee_email: string ) => {
-        await timesheet_store.getPayPeriodEmployeeDetailsByEmployeeEmail(employee_email);
+    const employeeEmail = defineModel();
+
+    const emit = defineEmits<{
+        'clickedDetailsButton': [email: string];
+    }>();
+
+    const overview_rows = computed(() => timesheet_store.pay_period_overviews[0]?.regular_hours === -1 ?
+        [] :
+        timesheet_store.pay_period_overviews
+    )
+
+    const onClickedDetails = async (employee_email: string, row: PayPeriodOverview) => {
+        employeeEmail.value = employee_email;
+        emit('clickedDetailsButton', employee_email);
+        timesheet_store.current_pay_period_overview = row;
+        await timesheet_store.getPayPeriodDetailsByEmployeeEmail(employee_email);
     };
 </script>
 
 <template>
     <div class="q-pa-md">
-        <q-table 
-        :rows="timesheet_store.pay_period_employee_overview_list" 
-        :columns="pay_period_employee_overview_columns"
-        row-key="email" 
-        :filter="filter" 
-        grid 
-        dense
-        hide-pagination
-        color="primary"
-        :rows-per-page-options="[0]" 
-        card-container-class="justify-center"
-        :loading="timesheet_store.is_loading"
-        :no-data-label="$t('shared.error.no_data_found')"
-        :no-results-label="$t('shared.error.no_search_results')"
-        :loading-label="$t('shared.label.loading')"
+        <q-table
+            :rows="overview_rows"
+            :columns="pay_period_overview_columns"
+            row-key="email"
+            :filter="filter"
+            grid
+            dense
+            hide-pagination
+            color="primary"
+            :rows-per-page-options="[0]"
+            card-container-class="justify-center"
+            :loading="timesheet_store.is_loading"
+            :no-data-label="$t('shared.error.no_data_found')"
+            :no-results-label="$t('shared.error.no_search_results')"
+            :loading-label="$t('shared.label.loading')"
         >
             <template #top>
-                <div class="full-width" :class="$q.screen.lt.md ? 'text-center q-gutter-sm' : 'row'">
-                    <!-- Calendar Picker goes here -->
+                <div
+                    class="full-width"
+                    :class="$q.screen.lt.md ? 'text-center' : 'row'"
+                >
+                    <PayPeriodNavigator />
 
                     <q-space />
 
                     <!-- Grid-or-List toggle goes here -->
 
-                    <QTableFilters v-model="filter"/>            
+                    <QTableFilters v-model="filter" />
                 </div>
             </template>
 
             <!-- Template for individual employee cards -->
-            <template #item="props: { row: PayPeriodEmployeeOverview, key: string }">
+            <template #item="props: { row: PayPeriodOverview, key: string }">
                 <OverviewListItem
-                    v-model="props.row.is_approved" 
+                    v-model="props.row.is_approved"
                     :row="props.row"
-                    @click-details="onClickedDetails(props.row.email)"
+                    @click-details="overview => onClickedDetails(props.row.email, overview)"
                 />
             </template>
 
             <!-- Template for custome failed-to-load state -->
             <template #no-data="{ message, filter }">
                 <div class="full-width column items-center text-primary q-gutter-sm">
-                    <span class="text-h6 q-mt-xl">
+                    <q-icon
+                    size="4em"
+                    :name="filter ? 'filter_alt_off' : 'error_outline'"
+                    />
+
+                    <span class="text-h6">
                         {{ message }}
                     </span>
-                    <q-icon 
-                    size="4em" 
-                    :name="filter ? 'filter_alt_off' : 'error_outline'" 
-                    />
                 </div>
             </template>
         </q-table>
diff --git a/src/modules/timesheet-approval/components/overview-report.vue b/src/modules/timesheet-approval/components/overview-report.vue
index cd353ac..417f2b4 100644
--- a/src/modules/timesheet-approval/components/overview-report.vue
+++ b/src/modules/timesheet-approval/components/overview-report.vue
@@ -1,9 +1,12 @@
-<script setup lang="ts">
+<script
+    setup
+    lang="ts"
+>
+    import { default_timesheet_approval_cvs_report_filters, type TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
     import { ref, computed } from 'vue';
-    import { default_pay_period_report_filters, type PayPeriodReportFilters } from 'src/modules/timesheet-approval/types/pay-period-report-options';
-    
-    const report_filter_options = ref<PayPeriodReportFilters>(default_pay_period_report_filters);
-    
+
+    const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(default_timesheet_approval_cvs_report_filters);
+
     const company_options = [
         { label: 'Targo', value: report_filter_options.value.companies.targo },
         { label: 'Solucom', value: report_filter_options.value.companies.solucom },
@@ -16,15 +19,18 @@
         { label: 'shared.shift_type.vacation', value: report_filter_options.value.types.vacation },
     ];
 
-    const is_download_button_disabled = computed(() => { 
-        return company_options.map( option => option.value ).filter( value => value === true ).length > 0 || 
-        type_options.map( option => option.value ).filter( value => value === true ).length > 0; 
+    const is_download_button_disabled = computed(() => {
+        return company_options.map(option => option.value).filter(value => value === true).length > 0 ||
+            type_options.map(option => option.value).filter(value => value === true).length > 0;
     });
 </script>
 
 <template>
-    <q-btn-group rounded push>
-        <q-btn 
+    <q-btn-group
+        rounded
+        push
+    >
+        <q-btn
             rounded
             push
             color="primary"
@@ -42,14 +48,17 @@
             <q-list class="row">
                 <q-item class="col">
                     <q-item-label class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">
-                        {{$t('timesheet_approvals.print_report.company')}}
+                        {{ $t('timesheet_approvals.print_report.company') }}
                     </q-item-label>
 
-                    <q-item-section row no-wrap>
-                        <q-checkbox 
+                    <q-item-section
+                        row
+                        no-wrap
+                    >
+                        <q-checkbox
                             v-for="option, index in company_options"
                             :key="index"
-                            v-model="option.value" 
+                            v-model="option.value"
                             :val="option.label"
                             :label="option.label"
                         />
@@ -59,13 +68,17 @@
                 <q-separator
                     spaced
                     vertical
-                    color="primary" 
+                    color="primary"
                 />
 
                 <q-item class="col">
-                    <q-item-section row no-wrap>
-                        <p class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">{{$t('timesheet_approvals.print_report.type')}}</p>
-                        <q-checkbox 
+                    <q-item-section
+                        row
+                        no-wrap
+                    >
+                        <p class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">
+                            {{ $t('timesheet_approvals.print_report.type') }}</p>
+                        <q-checkbox
                             v-for="option, index in type_options"
                             :key="index"
                             v-model="option.value"
diff --git a/src/modules/timesheet-approval/models/pay-period-overview.models.ts b/src/modules/timesheet-approval/models/pay-period-overview.models.ts
index 57c32ba..a83271d 100644
--- a/src/modules/timesheet-approval/models/pay-period-overview.models.ts
+++ b/src/modules/timesheet-approval/models/pay-period-overview.models.ts
@@ -11,6 +11,16 @@ export interface PayPeriodOverview {
     is_approved: boolean;
 };
 
+export interface PayPeriodOverviewResponse {
+  pay_period_no: number;
+  pay_year: number;
+  period_start: string;
+  period_end: string;
+  payday: string;
+  label: string;
+  employees_overview: PayPeriodOverview[];
+}
+
 export const default_pay_period_overview: PayPeriodOverview = {
     email: '',
     employee_name: '',
diff --git a/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts b/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
index d5e8381..3633813 100644
--- a/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
+++ b/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
@@ -11,7 +11,7 @@ export interface TimesheetApprovalCSVReportFilters {
     };
 }
 
-export const default_pay_period_report_filters: TimesheetApprovalCSVReportFilters = {
+export const default_timesheet_approval_cvs_report_filters: TimesheetApprovalCSVReportFilters = {
     types: {
         shifts: true,
         expenses: true,
diff --git a/src/modules/timesheet-approval/pages/timesheet-approval-page.vue b/src/modules/timesheet-approval/pages/timesheet-approval-page.vue
deleted file mode 100644
index 636811d..0000000
--- a/src/modules/timesheet-approval/pages/timesheet-approval-page.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-    import { onMounted } from 'vue';
-    import { date } from 'quasar';
-    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
-    import EmployeeOverviewList from 'src/modules/timesheet-approval/components/employee-overview/overview-list.vue';
-    import DetailedDialog from 'src/modules/timesheet-approval/components/detailed-dialog.vue';
-
-    const timesheet_approval_api = useTimesheetApprovalApi();
-    const timesheet_store = useTimesheetStore();
-
-    onMounted( async () => {
-        await timesheet_approval_api.getPayPeriodOverviewByDate(date.formatDate( new Date(), 'YYYY-MM-DD'));
-    });
-</script>
-
-<template>
-    <q-page 
-        padding 
-        class="q-pa-md bg-secondary "
-    >
-        <PageHeaderTemplate 
-            title="timesheet_approvals.page_title"
-            :start-date="timesheet_store.pay_period.period_start"
-            :end-date="timesheet_store.pay_period.period_end"
-        />
-        
-        <DetailedDialog
-            :is-loading="timesheet_store.is_loading"
-            :employee-overview="timesheet_store.pay_period_employee_overview"
-            :timesheet-details="timesheet_store.pay_period_employee_details"
-        />
-
-        <EmployeeOverviewList />
-    </q-page>
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/services/timesheet-approval-service.ts b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
index d156929..53e3e9b 100644
--- a/src/modules/timesheet-approval/services/timesheet-approval-service.ts
+++ b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
@@ -1,9 +1,9 @@
 import { api } from "src/boot/axios";
 import type { TimesheetApprovalCSVReportFilters } from "src/modules/timesheet-approval/models/timesheet-approval-csv-report.models";
-import type { PayPeriodOverview } from "src/modules/timesheet-approval/models/pay-period-overview.models";
+import type { PayPeriodOverviewResponse } from "src/modules/timesheet-approval/models/pay-period-overview.models";
 
 export const timesheetApprovalService = {
-    getPayPeriodOverviewsBySupervisorEmail: async (year: number, period_number: number, supervisor_email: string): Promise<PayPeriodOverview[]> => {
+    getPayPeriodOverviewsBySupervisorEmail: async (year: number, period_number: number, supervisor_email: string): Promise<PayPeriodOverviewResponse> => {
         const response = await api.get(`pay-periods/${year}/${period_number}/${supervisor_email}`);
         return response.data;
     },
diff --git a/src/modules/timesheets/components/expenses/expense-crud-dialog-form.vue b/src/modules/timesheets/components/expense-crud-dialog-form.vue
similarity index 65%
rename from src/modules/timesheets/components/expenses/expense-crud-dialog-form.vue
rename to src/modules/timesheets/components/expense-crud-dialog-form.vue
index 8ffeb3a..38773bf 100644
--- a/src/modules/timesheets/components/expenses/expense-crud-dialog-form.vue
+++ b/src/modules/timesheets/components/expense-crud-dialog-form.vue
@@ -2,50 +2,53 @@
     setup
     lang="ts"
 >
-    import { ref } from 'vue';
+    import { inject, ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
     import { useExpensesStore } from 'src/stores/expense-store';
-    import type { ExpenseType, Expense } from 'src/modules/timesheets/models/expense.models';
+    import { default_expense, EXPENSE_TYPE, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
+    import { makeExpenseRules } from 'src/modules/timesheets/utils/expense.util';
+    import { useExpensesApi } from 'src/modules/timesheets/composables/api/use-expense-api';
 
-    const expense_store = useExpensesStore();
+    const { t } = useI18n();
+
+    const expenses_store = useExpensesStore();
+    const expenses_api = useExpensesApi();
     const files = defineModel<File[] | null>('files');
     const is_navigator_open = ref(false);
 
-    //------------------ props ------------------
-    defineProps<{     
-        type_options: { label: string; value: ExpenseType }[];
-        show_amount: boolean;
-        is_readonly: boolean;
-        rules: {
-            typeRequired: (val: unknown) => true | string;
-            amountRequired: (val: unknown) => true | string;
-            mileageRequired: (val: unknown) => true | string;
-            commentRequired: (val: unknown) => true | string;
-            commentTooLong: (val: unknown) => true | string;
-        };
-        comment_max_length: number;
-        setType: (val: ExpenseType) => void;
-    }>();
+    const COMMENT_MAX_LENGTH = 280;
+    const employee_email = inject<string>('employeeEmail');
+    const rules = makeExpenseRules(t);
 
-    //------------------ emits ------------------
-    const emit = defineEmits<{
-        'submit': [void];
-    }>();
+    const cancelUpdateMode = () => {
+        expenses_store.current_expense = default_expense;
+        expenses_store.initial_expense = default_expense;
+        expenses_store.mode = 'create';
+    }
+
+    const requestExpenseCreationOrUpdate = async () => {
+        if (expenses_store.mode === 'create') await expenses_api.createExpenseByEmployeeEmail(employee_email ?? '', expenses_store.current_expense.date);
+        else await expenses_api.updateExpenseByEmployeeEmail(employee_email ?? '', expenses_store.current_expense.date);
+    }
 </script>
 
 <template>
     <q-form
         flat
-        v-if="!is_readonly"
-        @submit.prevent="$emit('submit')"
+        v-if="!expenses_store.pay_period_expenses.is_approved"
+        @submit.prevent="requestExpenseCreationOrUpdate"
     >
         <div class="text-subtitle2 q-py-sm">
             {{ $t('timesheet.expense.add_expense') }}
         </div>
-        <div class="row justify-between">
+        <div
+            class="row justify-between rounded-5"
+            :class="expenses_store.mode === 'update' ? 'bg-accent' : ''"
+        >
 
             <!-- date selection input -->
             <q-input
-                v-model="expense_store.current_expense.date"
+                v-model="expenses_store.current_expense.date"
                 dense
                 filled
                 readonly
@@ -64,7 +67,7 @@
                     />
                     <q-dialog v-model="is_navigator_open">
                         <q-date
-                            v-model="expense_store.current_expense.date"
+                            v-model="expenses_store.current_expense.date"
                             @update:model-value="is_navigator_open = false"
                             mask="YYYY-MM-DD"
                         />
@@ -74,8 +77,8 @@
 
             <!-- expenses type selection -->
             <q-select
-                v-model="expense_store.current_expense.type"
-                :options="type_options"
+                v-model="expenses_store.current_expense.type"
+                :options="EXPENSE_TYPE"
                 filled
                 dense
                 class="col q-px-xs"
@@ -85,14 +88,13 @@
                 :label="$t('timesheet.expense.type')"
                 :rules="[rules.typeRequired]"
                 :option-label="label => $t(label)"
-                @update:model-value="val => setType(val as ExpenseType)"
             />
 
             <!-- amount input -->
-            <template v-if="show_amount">
+            <template v-if="TYPES_WITH_AMOUNT_ONLY.includes(expenses_store.current_expense.type)">
                 <q-input
                     key="amount"
-                    v-model.number="expense_store.current_expense.amount"
+                    v-model.number="expenses_store.current_expense.amount"
                     filled
                     input-class="text-right"
                     dense
@@ -111,7 +113,7 @@
             <template v-else>
                 <q-input
                     key="mileage"
-                    v-model.number="expense_store.current_expense.mileage"
+                    v-model.number="expenses_store.current_expense.mileage"
                     filled
                     input-class="text-right"
                     dense
@@ -128,7 +130,7 @@
 
             <!-- employee comment input -->
             <q-input
-                v-model="expense_store.current_expense.comment"
+                v-model="expenses_store.current_expense.comment"
                 filled
                 color="primary"
                 type="text"
@@ -137,9 +139,9 @@
                 stack-label
                 clearable
                 :counter="true"
-                :maxlength="comment_max_length"
+                :maxlength="COMMENT_MAX_LENGTH"
                 lazy-rules="ondemand"
-                :rules="[rules.commentRequired, rules.commentTooLong]"
+                :rules="[rules.commentRequired]"
             >
                 <template #label>
                     <span class="text-weight-bold ">
@@ -171,6 +173,15 @@
 
             <!-- add btn section -->
             <div>
+                <q-btn
+                    v-if="expenses_store.mode === 'update'"
+                    flat
+                    dense
+                    size="sm"
+                    class="q-mt-sm q-ml-sm"
+                    @click="cancelUpdateMode"
+                />
+
                 <q-btn
                     push
                     dense
diff --git a/src/modules/timesheets/components/expense-crud-dialog-header.vue b/src/modules/timesheets/components/expense-crud-dialog-header.vue
new file mode 100644
index 0000000..682b8e5
--- /dev/null
+++ b/src/modules/timesheets/components/expense-crud-dialog-header.vue
@@ -0,0 +1,34 @@
+<script
+    setup
+    lang="ts"
+>
+    import { useExpensesStore } from 'src/stores/expense-store';
+
+    const expense_store = useExpensesStore();
+</script>
+
+<template>
+    <q-item class="row justify-between">
+        <q-item-label
+            header
+            class="text-h6 col-auto"
+        >
+            {{ $t('timesheet.expense.title') }}
+        </q-item-label>
+        <q-item-section class="items-center col-auto">
+            <q-badge
+                lines="1"
+                class="q-pa-sm q-px-md"
+                :label="$t('timesheet.expense.total_amount') + ': ' + expense_store.pay_period_expenses_totals.amount.toFixed(2)"
+            />
+
+            <q-separator spaced />
+
+            <q-badge
+                lines="2"
+                class="q-pa-sm q-px-md"
+                :label="$t('timesheet.expense.total_mileage') + ': ' + expense_store.pay_period_expenses_totals.mileage.toFixed(1)"
+            />
+        </q-item-section>
+    </q-item>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/expense-crud-dialog-list.vue b/src/modules/timesheets/components/expense-crud-dialog-list.vue
new file mode 100644
index 0000000..eef7b96
--- /dev/null
+++ b/src/modules/timesheets/components/expense-crud-dialog-list.vue
@@ -0,0 +1,151 @@
+<script
+    setup
+    lang="ts"
+>
+    import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
+    import { expenseTypeIcon } from 'src/modules/timesheets/utils/expense.util';
+    import { useExpensesStore } from 'src/stores/expense-store';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import { useExpensesApi } from 'src/modules/timesheets/composables/api/use-expense-api';
+    import { default_expense, type Expense } from 'src/modules/timesheets/models/expense.models';
+    import { computed, inject } from 'vue';
+
+    const timesheet_store = useTimesheetStore();
+    const expenses_store = useExpensesStore();
+    const expenses_api = useExpensesApi();
+
+    const expenses_list = computed(() => timesheet_store.pay_period_details.weeks.flatMap(week =>
+        Object.values(week.expenses).flatMap(day => day.expenses)));
+
+    const employee_email = inject('employeeEmail', '');
+
+    const setExpenseToModify = (expense: Expense) => {
+        expenses_store.mode = 'update';
+        expenses_store.current_expense = expense;
+        expenses_store.initial_expense = unwrapAndClone(expense);
+    };
+
+    const requestExpenseDeletion = async (expense: Expense) => {
+        expenses_store.mode = 'delete';
+        expenses_store.initial_expense = expense;
+        expenses_store.current_expense = default_expense;
+        await expenses_api.deleteExpenseByEmployeeEmail(employee_email, expenses_store.initial_expense.date);
+    }
+</script>
+
+<template>
+    <!-- liste des dépenses pré existantes -->
+    <q-list
+        padding
+        class="rounded-borders"
+    >
+        <q-item-label
+            v-if="expenses_store.pay_period_expenses.expenses.length === 0"
+            class="text-italic q-px-sm"
+        >
+            {{ $t('timesheet.expense.empty_list') }}
+        </q-item-label>
+        <q-item
+            style="border: solid 1px lightgrey; border-radius: 7px;"
+            v-for="(expense, index) in expenses_list"
+            :key="index"
+            class="q-my-xs shadow-1"
+            :class="expenses_store.mode === 'update' ? 'bg-accent' : ''"
+        >
+            <!-- avatar type icon section -->
+            <q-item-section avatar>
+                <q-icon
+                    :name="expenseTypeIcon(expense.type)"
+                    color="primary"
+                />
+            </q-item-section>
+
+            <!-- amount or mileage section -->
+            <q-item-section top>
+                <q-item-label v-if="String(expense.type).trim().toUpperCase() === 'MILEAGE'">
+                    <template v-if="typeof expense.mileage === 'number'">
+                        {{ expense.mileage?.toFixed(1) }} km
+                    </template>
+                    <template v-else>
+                        {{ expense.amount.toFixed(2) }} $
+                    </template>
+                </q-item-label>
+                <q-item-label v-else>
+                    {{ expense.amount.toFixed(2) }} $
+                </q-item-label>
+
+                <!-- date label -->
+                <q-item-label
+                    caption
+                    lines="2"
+                >
+                    {{ $d(new Date(expense.date), { year: 'numeric', month: 'short', day: 'numeric', weekday: 'short' })
+                    }}
+                </q-item-label>
+            </q-item-section>
+
+            <!-- attachment file icon -->
+            <q-item-section side>
+                <q-btn
+                    push
+                    dense
+                    size="md"
+                    color="primary"
+                    class="q-mx-lg"
+                    icon="attach_file"
+                />
+            </q-item-section>
+
+            <!-- comment section -->
+            <q-item-section top>
+                <q-item-label lines="1">
+                    {{ $t('timesheet.expense.employee_comment') }}
+                </q-item-label>
+                <q-item-label
+                    caption
+                    lines="2"
+                >
+                    {{ expense.comment }}
+                </q-item-label>
+            </q-item-section>
+
+            <!-- supervisor comment section -->
+            <q-item-section top>
+                <q-item-label lines="1">
+                    {{ $t('timesheet.expense.supervisor_comment') }}
+                </q-item-label>
+                <q-item-label
+                    v-if="expense.supervisor_comment"
+                    caption
+                    lines="2"
+                >
+                    {{ expense.supervisor_comment }}
+                </q-item-label>
+            </q-item-section>
+
+            <q-item-section
+                v-if="!expenses_store.pay_period_expenses.is_approved && !expense.is_approved"
+                side
+            >
+                <q-btn
+                    push
+                    dense
+                    size="xs"
+                    color="primary"
+                    icon="edit"
+                    @click="setExpenseToModify(expense)"
+                />
+
+                <q-btn
+                    push
+                    dense
+                    size="xs"
+                    color="negative"
+                    icon="close"
+                    @click="requestExpenseDeletion(expense)"
+                />
+            </q-item-section>
+        </q-item>
+    </q-list>
+
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/expenses/expense-crud-dialog-supervisor-comment.vue b/src/modules/timesheets/components/expense-crud-dialog-supervisor-comment.vue
similarity index 100%
rename from src/modules/timesheets/components/expenses/expense-crud-dialog-supervisor-comment.vue
rename to src/modules/timesheets/components/expense-crud-dialog-supervisor-comment.vue
diff --git a/src/modules/timesheets/components/expense-crud-dialog.vue b/src/modules/timesheets/components/expense-crud-dialog.vue
new file mode 100644
index 0000000..ed9d3ed
--- /dev/null
+++ b/src/modules/timesheets/components/expense-crud-dialog.vue
@@ -0,0 +1,58 @@
+<script
+    setup
+    lang="ts"
+>
+    import { useExpensesStore } from 'src/stores/expense-store';
+    import ExpenseCrudDialogList from 'src/modules/timesheets/components/expense-crud-dialog-list.vue';
+    import ExpenseCrudDialogForm from 'src/modules/timesheets/components/expense-crud-dialog-form.vue';
+    import ExpenseCrudDialogHeader from 'src/modules/timesheets/components/expense-crud-dialog-header.vue';
+
+    const expense_store = useExpensesStore();
+</script>
+
+<template>
+    <q-dialog
+        v-model="expense_store.is_open"
+        persistent
+    >
+        <q-card
+            class="q-pa-md"
+            style=" min-width: 70vw;"
+        >
+            <q-inner-loading :showing="expense_store.is_loading">
+                <q-spinner size="32px" />
+            </q-inner-loading>
+
+            <q-card-section>
+                <!-- <q-banner 
+                    v-if="expenses_error"
+                    dense
+                    class="bg-red-2 col-auto text-negative q-mt-sm"
+                >
+                    {{ expenses_error }}
+                </q-banner> -->
+
+                <ExpenseCrudDialogHeader />
+
+                <ExpenseCrudDialogList />
+
+                <ExpenseCrudDialogForm />
+
+                <q-separator spaced />
+
+            </q-card-section>
+
+            <q-card-actions align="right">
+                <!-- close btn -->
+                <q-btn
+                    flat
+                    class="col-auto q-mr-sm"
+                    color="primary"
+                    :label="$t('shared.label.close')"
+                    @click="expense_store.close"
+                />
+            </q-card-actions>
+
+        </q-card>
+    </q-dialog>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/expenses/expense-crud-dialog-list.vue b/src/modules/timesheets/components/expenses/expense-crud-dialog-list.vue
deleted file mode 100644
index 9e5f12b..0000000
--- a/src/modules/timesheets/components/expenses/expense-crud-dialog-list.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<script setup lang="ts">
-import type { TimesheetExpense } from '../../types/expense.interfaces';
-import { expenseTypeIcon }  from '../../utils/expense.util';
-/* eslint-disable */
-defineProps<{
-    items: TimesheetExpense[];
-    is_readonly: boolean;
-}>();
-
-defineEmits<{
-    (e: 'remove', index: number): void;
-    (e: 'edit'  , index: number): void;
-}>();
-
-</script>
-
-<template>
-    <!-- liste des dépenses pré existantes -->
-    <q-list 
-        padding 
-        class="rounded-borders"
-
-    >
-        <q-item-label v-if="items.length === 0" class="text-italic q-px-sm">
-            {{ $t('timesheet.expense.empty_list') }}
-        </q-item-label>
-        <q-item
-            style="border: solid 1px lightgrey; border-radius: 7px;"
-            v-for="(expense, index) in items" :key="index"
-            class="q-my-xs shadow-1"
-        >
-            <!-- avatar type icon section -->
-            <q-item-section avatar>
-                <q-icon :name="expenseTypeIcon(expense.type)" color="primary"/>
-            </q-item-section>
-
-            <!-- amount or mileage section -->
-            <q-item-section top>
-                <q-item-label v-if="String(expense.type).trim().toUpperCase() === 'MILEAGE'">
-                    <template v-if="typeof expense.mileage === 'number'">
-                        {{ expense.mileage?.toFixed(1) }} km
-                    </template>
-                    <template v-else>
-                        {{ expense.amount?.toFixed(2) }} $
-                    </template>
-                </q-item-label>
-                <q-item-label v-else>
-                    {{ expense.amount?.toFixed(2) }} $
-                </q-item-label>
-                
-                <!-- date label -->
-                <q-item-label caption lines="2">
-                        {{ $d(new Date(expense.date + 'T00:00:00'), { year:'numeric', month:'short', day: 'numeric', weekday: 'short'}) }}
-                </q-item-label>
-            </q-item-section>
-
-            <!-- attachment file icon -->
-            <q-item-section side>
-                <q-btn
-                    push   
-                    dense
-                    size="md"
-                    color="primary"
-                    class="q-mx-lg"
-                    icon="attach_file"
-                />
-            </q-item-section>
-
-            <!-- comment section -->
-            <q-item-section top>
-                <q-item-label lines="1">
-                    {{ $t('timesheet.expense.employee_comment') }}
-                </q-item-label>
-                <q-item-label caption lines="2">
-                    {{ expense.comment }}
-                </q-item-label>
-            </q-item-section>
-
-            <!-- supervisor comment section -->
-            <q-item-section top>
-                <q-item-label lines="1">
-                    {{ $t('timesheet.expense.supervisor_comment') }}
-                </q-item-label>
-                <q-item-label v-if="expense.supervisor_comment" caption lines="2">
-                    {{ expense.supervisor_comment }}    
-                </q-item-label>
-            </q-item-section>
-            
-            <!-- delete btn -->
-            <q-item-section side>
-                <q-btn
-                    v-if="!is_readonly"
-                    push
-                    dense
-                    size="xs"
-                    color="primary"
-                    icon="edit"
-                    @click="$emit('edit', index)"
-                />
-            </q-item-section>
-
-            <!-- delete btn -->
-            <q-item-section side>
-                <q-btn
-                    v-if="!is_readonly"
-                    push
-                    dense
-                    size="xs"
-                    color="negative"
-                    icon="close"
-                    @click="$emit('remove', index)"
-                />
-            </q-item-section>
-        </q-item>
-    </q-list>
-
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/expenses/expense-crud-dialog.vue b/src/modules/timesheets/components/expenses/expense-crud-dialog.vue
deleted file mode 100644
index 7c78582..0000000
--- a/src/modules/timesheets/components/expenses/expense-crud-dialog.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script
-    setup
-    lang="ts"
->
-    import { useI18n } from 'vue-i18n';
-    import { computed, ref } from 'vue';
-    import { useExpensesStore } from 'src/stores/expense-store';
-    import { useExpenseForm } from '../../composables/use-expense-form';
-    import { COMMENT_MAX_LENGTH } from '../../constants/expense.constants';
-    import ExpenseList from './expense-list.vue';
-    import ExpenseCrudDialogForm from 'src/modules/timesheets/components/expenses/expense-crud-dialog-form.vue';
-    import { computeExpenseTotals, makeExpenseRules, buildExpenseSavePayload } from '../../utils/expense.util';
-    import { EXPENSE_TYPE } from 'src/modules/timesheets/models/expense.models';
-    import type { Expense, ExpenseType, PayPeriodExpenses } from 'src/modules/timesheets/models/expense.models';
-    import { toQSelectOptions } from 'src/utils/to-qselect-options';
-
-    const { t } = useI18n();
-    const rules = makeExpenseRules(t, COMMENT_MAX_LENGTH);
-    const expense_store = useExpensesStore();
-
-    const { employeeEmail } = defineProps<{
-        employeeEmail: string;
-    }>();
-
-    const type_options = toQSelectOptions<ExpenseType>(EXPENSE_TYPE, 'timesheet.expense.types.');
-
-
-
-    //------------------ refs and computed ------------------
-    const files = ref<File[] | null>(null);
-    const { validateAnd } = useExpenseForm();
-    
-    const totals = computed(() => computeExpenseTotals(expenses));
-</script>
-
-<template>
-    <q-dialog
-        v-model="expense_store.is_open"
-        persistent
-    >
-        <q-card
-            class="q-pa-md"
-            style=" min-width: 70vw;"
-        >
-            <q-inner-loading :showing="expense_store.is_loading">
-                <q-spinner size="32px" />
-            </q-inner-loading>
-
-            <q-card-section>
-                <!-- <q-banner 
-                    v-if="expenses_error"
-                    dense
-                    class="bg-red-2 col-auto text-negative q-mt-sm"
-                >
-                    {{ expenses_error }}
-                </q-banner> -->
-
-                <!-- header (title with totals)-->
-                <q-item class="row justify-between">
-                    <q-item-label
-                        header
-                        class="text-h6 col-auto"
-                    >
-                        {{ $t('timesheet.expense.title') }}
-                    </q-item-label>
-                    <q-item-section class="items-center col-auto">
-                        <q-badge
-                            lines="1"
-                            class="q-pa-sm q-px-md"
-                            :label="$t('timesheet.expense.total_amount') + ': ' + totals.amount.toFixed(2)"
-                        />
-                        <q-separator spaced />
-                        <q-badge
-                            lines="2"
-                            class="q-pa-sm q-px-md"
-                            :label="$t('timesheet.expense.total_mileage') + ': ' + totals.mileage.toFixed(1)"
-                        />
-                    </q-item-section>
-                </q-item>
-                <ExpenseList
-                    :items="expense_store.current_expenses"
-                    @remove="expense_store.upsertOrDeletePayPeriodExpenseByEmployeeEmail(employeeEmail, expense_store.current_expenses.expenses)"
-                />
-                <ExpenseCrudDialogForm
-                    :current-expenses:"expense_store.current_expenses.exp"
-                    v-model:files="files"
-                    :is_readonly="expense_store.current_expenses.is_approved"
-                    :type_options="type_options"
-                    :rules="rules"
-                    :comment_max_length="COMMENT_MAX_LENGTH"
-                    :set-type="setType"
-                    @submit="expense_store.upsertOrDeletePayPeriodExpenseByEmployeeEmail(employeeEmail, expense_store.current_expenses.expenses)"
-                />
-
-                <q-separator spaced />
-
-            </q-card-section>
-
-            <q-card-actions align="right">
-                <!-- close btn -->
-                <q-btn
-                    flat
-                    class="col-auto q-mr-sm"
-                    color="primary"
-                    :label="$t('timesheet.cancel_button')"
-                    @click="close"
-                />
-                <!-- save btn -->
-                <q-btn
-                    push
-                    color="primary"
-                    class="col-auto"
-                    :disable="pay_period_expenses.is_approved || expenses.length === 0"
-                    :label="$t('timesheet.save_button')"
-                    @click="onSave"
-                />
-            </q-card-actions>
-
-        </q-card>
-    </q-dialog>
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/expenses/timesheet-details-expenses.vue b/src/modules/timesheets/components/expenses/timesheet-details-expenses.vue
deleted file mode 100644
index 40ba68a..0000000
--- a/src/modules/timesheets/components/expenses/timesheet-details-expenses.vue
+++ /dev/null
@@ -1,267 +0,0 @@
-<script setup lang="ts">
-import { useI18n }         from 'vue-i18n';
-import { computed, ref }   from 'vue';
-import { useExpenseForm }  from '../../composables/use-expense-form';
-import { useExpenseDraft } from '../../composables/use-expense-draft';
-import { useExpenseItems } from '../../composables/use-expense-items';
-import { useToggle }       from 'src/modules/shared/composables/use-toggle';
-import ExpenseList         from './expense-list.vue';
-import ExpenseForm         from './expense-form.vue';
-import {
-    buildExpenseTypeOptions,
-    computeExpenseTotals,
-    makeExpenseRules,
-    buildExpenseSavePayload
-} from '../../utils/expense.util';
-import { COMMENT_MAX_LENGTH }      from '../../constants/expense.constants';
-import { ExpensesValidationError } from '../../types/expense-validation.interface';
-import { EXPENSE_TYPE }            from '../../types/expense.types';
-import type { ExpenseType }        from '../../types/expense.types';
-import type { ExpenseDay, TimesheetExpense }   from '../../types/expense.interfaces';
-import { 
-    createExpenseByDate, 
-    deleteExpenseByDate, 
-    getPayPeriodExpenses, 
-    updateExpenseByDate
-} from '../../composables/api/use-expense-api';
-
-/* eslint-disable */
-
-const { t, locale } = useI18n();
-const rules = makeExpenseRules(t, COMMENT_MAX_LENGTH);
-
-//------------------ props ------------------
-const {email, pay_period_no, pay_year, is_approved, initial_expenses} = defineProps<{
-    pay_period_no: number;
-    pay_year: number;
-    email: string;
-    is_approved?: boolean;
-    initial_expenses?: TimesheetExpense[];
-}>();
-
-//------------------ emits ------------------
-const emit = defineEmits<{
-    (e: 'close'): void;
-    (e: 'save', payload: {
-        pay_period_no: number;
-        pay_year:       number;
-        email:          string;
-        expenses: TimesheetExpense[];
-    }): void;
-    (e: 'error', err: ExpensesValidationError): void;
-}>();
-
-//------------------ q-select mapper ------------------
-const type_options = computed(() => {
-    void locale.value;
-    return buildExpenseTypeOptions(EXPENSE_TYPE, t);
-})
-
-//------------------ refs and computed ------------------
-const files       = ref<File[] | null>(null);
-const is_readonly = computed(() => !!is_approved);
-const editing_old = ref<ExpenseDay | null>(null);
-
-const { state: is_open_date_picker }        = useToggle();
-const { draft, setType, reset, showAmount } = useExpenseDraft();
-const { formRef, validateAnd }              = useExpenseForm();
-const { items, validateAll, payload }       = useExpenseItems({
-    initial_expenses: initial_expenses,
-    is_approved:      is_readonly,
-    draft,
-});
-const totals = computed(() => computeExpenseTotals(items.value));
-
-//------------------ actions ------------------
-const onSave = () => {
-    try {
-        validateAll();
-        reset();
-        emit('save', buildExpenseSavePayload({
-            pay_period_no: pay_period_no,
-            pay_year:      pay_year,
-            email:         email,
-            expenses:      payload(),
-        }));
-
-    } catch (err: any) {
-        const e = err instanceof ExpensesValidationError
-            ? err
-            : new ExpensesValidationError({
-                status_code: 400,
-                message: String(err?.message || err)
-            });
-        emit('error', e);
-    }
-};
-
-const refreshFromServer = async () => {
-    const fresh = await getPayPeriodExpenses(email, pay_year, pay_period_no);
-    items.value = Array.isArray(fresh.expenses) ? fresh.expenses : [];
-};
-
-const onFormSubmit = async () => {
-    try {
-        await validateAnd(async () => {
-            if (is_readonly.value) throw new Error(t('common.read_only') || 'Read-only');
-
-            const day = draft.value;
-            if (!day?.date || !day?.type || !day?.comment) {
-                throw new ExpensesValidationError({ status_code: 400, message: 'Missing required fields' });
-            }
-
-            const is_mileage = String(day.type).toUpperCase() === 'MILEAGE';
-            const new_payload = {
-                date:    day.date,
-                type:    day.type as ExpenseType,
-                comment: day.comment,
-                ...(is_mileage && typeof day.mileage === 'number'
-                    ? { mileage: day.mileage }
-                    : !is_mileage && typeof day.amount === 'number'
-                        ? { amount: day.amount }
-                        : {}),
-            };
-            if(editing_old.value) {
-                await updateExpenseByDate(email, editing_old.value, new_payload as any);
-                editing_old.value = null;
-            } else {
-                await createExpenseByDate(email, new_payload as any);
-            }
-            await refreshFromServer();
-            reset();
-        });
-    } catch (err: any) {
-        const e = err instanceof ExpensesValidationError ? err : new ExpensesValidationError({
-            status_code: 400,
-            message: String(err?.message || err)
-        });
-        emit('error', e);
-    }
-};
-
-const onRemove = async (index: number) => {
-    try {
-        if (is_readonly.value) throw new Error(t('common.read_only') || 'Read-only');
-
-        const item = items.value[index];
-        if (!item) return;
-        const is_mileage = String(item.type).toUpperCase() === 'MILEAGE';
-
-        const old_payload: any = {
-            date:    item.date,
-            type:    item.type as ExpenseType,
-            comment: item.comment ?? '',
-            ...(is_mileage && typeof item.mileage === 'number'
-                ? { mileage: item.mileage }
-                : !is_mileage && typeof item.amount === 'number'
-                    ? { amount: item.amount }
-                    : {}),
-        };
-
-            await deleteExpenseByDate(email, old_payload as any);
-            await refreshFromServer();
-    } catch (err: any) {
-        const e = err instanceof ExpensesValidationError ? err : new ExpensesValidationError({
-            status_code: 400, message: String(err?.message || err)
-        });
-        emit('error', e);
-    }
-};
-
-const onEdit = async (index: number) => {
-    if(is_readonly) return;
-    const item = items.value[index];
-    if(!item) return;
-    const old_amount = Number(item.amount) || 0;
-    editing_old.value = {
-        date: item.date,
-        type: item.type as ExpenseType,
-        amount: old_amount,
-        comment: item.comment ?? '',
-        is_approved: !!item.is_approved,
-    };
-
-    const is_mileage = String(item.type).toUpperCase() === 'MILEAGE';
-    const next: Partial<TimesheetExpense> = {
-        date: item.date,
-        type: item.type,
-        comment: item.comment ?? '',
-        ...(is_mileage
-            ? (typeof item.mileage === 'number' ? { mileage: item.mileage } : {})
-            : (typeof item.amount === 'number' ? { amnount: item.amount } : {})),
-    };
-    (draft as any).value = next;
-    setType(item.type as ExpenseType);
-};
-
-const onClose = () => emit('close');
-
-</script>
-
-<template>
-    <div>
-        <!-- header (title with totals)-->
-        <q-item class="row justify-between">
-            <q-item-label
-                header
-                class="text-h6 col-auto"
-            >
-                {{ $t('timesheet.expense.title') }}
-            </q-item-label>
-            <q-item-section class="items-center col-auto">
-                <q-badge
-                    lines="1"
-                    class="q-pa-sm q-px-md"
-                    :label="$t('timesheet.expense.total_amount') + ': ' + totals.amount.toFixed(2)"
-                />
-                <q-separator spaced />
-                <q-badge
-                    lines="2"
-                    class="q-pa-sm q-px-md"
-                    :label="$t('timesheet.expense.total_mileage') + ': ' + totals.mileage.toFixed(1)"
-                />
-            </q-item-section>
-        </q-item>
-        <ExpenseList
-            :items="items"
-            :is_readonly="is_readonly"
-            @remove="onRemove"
-            @edit="onEdit"
-        />
-        <ExpenseForm
-            ref="formRef"
-            v-model:draft="draft"
-            v-model:files="files"
-            v-model:date-picker-open="is_open_date_picker"
-            :type_options="type_options"
-            :show_amount="showAmount"
-            :is_readonly="is_readonly"
-            :rules="rules"
-            :comment_max_length="COMMENT_MAX_LENGTH"
-            :set-type="setType"
-            @submit="onFormSubmit"
-        />
-
-        <q-separator spaced />
-
-        <div class="row col-auto justify-end">
-            <!-- close btn -->
-            <q-btn
-                flat
-                class="q-mr-sm"
-                color="primary"
-                :label="$t('timesheet.cancel_button')"
-                @click="onClose"
-            />
-            <!-- save btn -->
-            <q-btn
-                color="primary"
-                unelevated
-                push
-                :disable="is_readonly || items.length === 0"
-                :label="$t('timesheet.save_button')"
-                @click="onSave"
-            />
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/shift/shift-crud-dialog.vue b/src/modules/timesheets/components/shift-crud-dialog.vue
similarity index 100%
rename from src/modules/timesheets/components/shift/shift-crud-dialog.vue
rename to src/modules/timesheets/components/shift-crud-dialog.vue
diff --git a/src/modules/timesheets/components/shift/shift-list-header.vue b/src/modules/timesheets/components/shift-list-header.vue
similarity index 91%
rename from src/modules/timesheets/components/shift/shift-list-header.vue
rename to src/modules/timesheets/components/shift-list-header.vue
index 37d2af7..780e833 100644
--- a/src/modules/timesheets/components/shift/shift-list-header.vue
+++ b/src/modules/timesheets/components/shift-list-header.vue
@@ -9,7 +9,7 @@
                 <!-- punch-in timestamps -->
                 <q-card-section class="col q-pa-none">
                     <q-item-label class="text-weight-bolder text-primary" style="font-size: 0.7em;">
-                            {{ $t('shiftColumns.labelIn') }}
+                            {{ $t('shared.misc.in') }}
                     </q-item-label>
                 </q-card-section>
         
@@ -20,7 +20,7 @@
                 <!-- punch-out timestamps -->
                 <q-card-section class="col q-pa-none">
                     <q-item-label class="text-weight-bolder text-primary" style="font-size: 0.7em;">
-                        {{ $t('shiftColumns.labelOut') }}
+                        {{ $t('shared.misc.out') }}
                     </q-item-label>
                 </q-card-section>
 
diff --git a/src/modules/timesheets/components/shift-list-legend.vue b/src/modules/timesheets/components/shift-list-legend.vue
new file mode 100644
index 0000000..f8327fe
--- /dev/null
+++ b/src/modules/timesheets/components/shift-list-legend.vue
@@ -0,0 +1,72 @@
+<script
+    setup
+    lang="ts"
+>
+    import { computed, ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import type { ShiftLegendItem } from 'src/modules/timesheets/models/shift.models';
+
+    const { t } = useI18n();
+    const is_showing_legend = ref(false);
+
+    const legend: ShiftLegendItem[] = [
+        { type: 'REGULAR', color: 'secondary', label_type: 'timesheet.shift.types.REGULAR', text_color: 'grey-8' },
+        { type: 'EVENING', color: 'warning', label_type: 'timesheet.shift.types.EVENING' },
+        { type: 'EMERGENCY', color: 'amber-10', label_type: 'timesheet.shift.types.EMERGENCY' },
+        { type: 'OVERTIME', color: 'negative', label_type: 'timesheet.shift.types.OVERTIME' },
+        { type: 'VACATION', color: 'purple-10', label_type: 'timesheet.shift.types.VACATION' },
+        { type: 'HOLIDAY', color: 'purple-5', label_type: 'timesheet.shift.types.HOLIDAY' },
+        { type: 'SICK', color: 'grey-8', label_type: 'timesheet.shift.types.SICK' },
+    ]
+
+    const shift_type_legend = computed(() =>
+        legend.map(item => ({ ...item, label: t(item.label_type) }))
+    );
+
+</script>
+
+<template>
+    <div
+        class="items-center"
+        :class="$q.screen.lt.md ? 'column' : 'row'"
+    >
+        <q-btn
+            flat
+            dense
+            rounded
+            color="primary"
+            class="col-auto q-ma-sm"
+            @click="is_showing_legend = !is_showing_legend"
+        >
+            <template #default>
+                <q-icon
+                    :name="is_showing_legend ? 'close' : 'info_outline'"
+                    size="md"
+                    class="col-auto"
+                />
+            </template>
+        </q-btn>
+
+        <transition
+            appear
+            enter-active-class="animated fadeIn"
+            leave-active-class="animated fadeOut"
+            class="col-auto"
+        >
+            <div
+                v-if="is_showing_legend"
+                class="q-pa-xs bg-white rounded-5 shadow-2 text-center q-ma-xs"
+            >
+                <q-badge
+                    v-for="shift_type in shift_type_legend"
+                    :key="shift_type.type"
+                    :color="shift_type.color"
+                    :label="shift_type.label"
+                    :text-color="shift_type.text_color || 'white'"
+                    class="q-px-md q-py-xs q-mx-xs q-my-none text-uppercase text-weight-bolder justify-center"
+                    style="font-size: 0.8em;"
+                />
+            </div>
+        </transition>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/shift/shift-list-row.vue b/src/modules/timesheets/components/shift-list-row.vue
similarity index 92%
rename from src/modules/timesheets/components/shift/shift-list-row.vue
rename to src/modules/timesheets/components/shift-list-row.vue
index 3e18540..b978473 100644
--- a/src/modules/timesheets/components/shift/shift-list-row.vue
+++ b/src/modules/timesheets/components/shift-list-row.vue
@@ -3,8 +3,9 @@
     import type { Shift } from 'src/modules/timesheets/models/shift.models';
 
 
-    const { shift } = defineProps<{
+    const { shift, dense = false } = defineProps<{
         shift: Shift;
+        dense?: boolean;
     }>();
 
     const emit = defineEmits<{
@@ -14,11 +15,12 @@
     }>();
 
     const has_comment = computed(() => {
-        const comment = (shift as any).description ?? (shift as any).comment ?? '';
+        const comment = shift.comment ?? '';
         return typeof comment === 'string' && comment.trim().length > 0;
     })
     const comment_icon = computed(() => (has_comment.value ? 'announcement' : 'chat_bubble_outline'));
     const comment_color = computed(() => (has_comment.value ? 'primary' : 'grey-8'));
+    const hour_font_size = computed(() => dense ? '0.9em' : '1.5em' )
 
     const get_shift_color = (type: string): string => {
         switch (type) {
@@ -27,7 +29,7 @@
             case 'EMERGENCY': return 'amber-10';
             case 'OVERTIME': return 'negative';
             case 'VACATION': return 'purple-10';
-            case 'HOLIDAY': return 'purple-10';
+            case 'HOLIDAY': return 'purple-5';
             case 'SICK': return 'grey-8';
             default: return 'transparent';
         }
@@ -61,7 +63,7 @@
             <q-item-label
                 class="text-weight-bolder q-pa-xs rounded-5"
                 :class="'bg-' + get_shift_color(shift.type) + ' text-' + get_text_color(shift.type)"
-                style="font-size: 1.5em; line-height: 80% !important;"
+                :style="'font-size: ' + hour_font_size + '; line-height: 80% !important;'"
             >
                 {{ shift.start_time }}
             </q-item-label>
diff --git a/src/modules/timesheets/components/shift/shift-list.vue b/src/modules/timesheets/components/shift-list.vue
similarity index 56%
rename from src/modules/timesheets/components/shift/shift-list.vue
rename to src/modules/timesheets/components/shift-list.vue
index 6b6a4ef..fc43565 100644
--- a/src/modules/timesheets/components/shift/shift-list.vue
+++ b/src/modules/timesheets/components/shift-list.vue
@@ -3,26 +3,23 @@
     lang="ts"
 >
     import { date } from 'quasar';
-    import ShiftListHeader from 'src/modules/timesheets/components/shift/shift-list-header.vue';
-    import ShiftListRow from 'src/modules/timesheets/components/shift/shift-list-row.vue';
-    import ShiftListLegend from 'src/modules/timesheets/components/shift/shift-list-legend.vue';
-    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
+    import ShiftListHeader from 'src/modules/timesheets/components/shift-list-header.vue';
+    import ShiftListRow from 'src/modules/timesheets/components/shift-list-row.vue';
     import { useShiftStore } from 'src/stores/shift-store';
-    import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { type Shift, default_shift } from 'src/modules/timesheets/models/shift.models';
-    import type { PayPeriodDetails } from 'src/modules/timesheets/models/pay-period-details.models';
-    import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
+import { computed } from 'vue';
 
-    const props = defineProps<{
-        rawData: PayPeriodDetails;
-        currentPayPeriod: PayPeriod;
+    const timesheet_store = useTimesheetStore();
+    const { openCreate, openDelete, openUpdate } = useShiftStore();
+    const { dense = false } = defineProps<{
+        dense?: boolean;
     }>();
 
-    const timesheet_api = useTimesheetApi();
-    const { openCreate, openDelete, openUpdate } = useShiftStore();
+    const font_size = computed(() => dense ? '1.5em' : '2.5em')
 
     const get_date_from_short = (short_date: string): Date => {
-        return new Date(props.currentPayPeriod.pay_year.toString() + '/' + short_date);
+        return new Date(timesheet_store.pay_period.pay_year.toString() + '/' + short_date);
     };
 
     const to_iso_date = (short_date: string): string => {
@@ -34,37 +31,35 @@
     };
 
     const getDate = (shift_date: string): Date => {
-        return new Date(props.currentPayPeriod.pay_year.toString() + '/' + shift_date);
+        return new Date(timesheet_store.pay_period.pay_year.toString() + '/' + shift_date);
     };
 </script>
 
 <template>
-    <!-- shift's colored legend -->
-    <ShiftListLegend :is-loading="false" />
-
     <div
-        v-for="week, index in props.rawData.weeks"
+        v-for="week, index in timesheet_store.pay_period_details.weeks"
         :key="index"
-        class="q-px-xs q-pt-xs rounded-5 col"
+        class="col q-px-xs q-pt-xs q-mx-sm rounded-5"
     >
         <q-card
             v-for="day, day_index in week.shifts"
-            :key="day_index"
-            flat
-            bordered
+            :key="day_index + index"
             class="row items-center rounded-10 q-mb-xs"
         >
 
             <!-- Dates column -->
-            <q-card-section class="col-auto q-pa-xs text-white">
-                <div class="bg-primary rounded-10 q-pa-xs text-center">
+            <q-card-section class="col-auto q-pa-xs text-white q-mr-md">
+                <div
+                    class="bg-primary rounded-10 q-pa-xs text-center"
+                    :style="'width: ' + dense? '60px' : '75px;'"
+                >
                     <q-item-label
                         style="font-size: 0.7em;"
                         class="text-uppercase"
                     >{{ $d(getDate(day.short_date), { weekday: $q.screen.lt.md ? 'short' : 'long' }) }}</q-item-label>
                     <q-item-label
                         class="text-weight-bolder"
-                        style="font-size: 2.5em; line-height: 90% !important;"
+                        :style="'font-size: ' + font_size + '; line-height: 90% !important;'"
                     >{{ day.short_date.split('/')[1] }}</q-item-label>
                     <q-item-label
                         style="font-size: 0.7em;"
@@ -75,14 +70,18 @@
 
             <!-- List of shifts column -->
             <q-card-section class="col q-pa-none">
-                <ShiftListHeader />
-                <ShiftListRow
-                    v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
-                    :key="shift_index"
-                    :shift="shift"
-                    @request-update="value => openUpdate(to_iso_date(day.short_date), value)"
-                    @request-delete="value => openDelete(to_iso_date(day.short_date), value)"
-                />
+                <ShiftListHeader v-if="day.shifts.length > 0"/>
+                <div
+                    v-if="day.shifts.length > 0"
+                >
+                    <ShiftListRow
+                        v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
+                        :key="shift_index"    
+                        :shift="shift"
+                        @request-update="value => openUpdate(to_iso_date(day.short_date), value)"
+                        @request-delete="value => openDelete(to_iso_date(day.short_date), value)"
+                    />
+                </div>
             </q-card-section>
             <!-- add shift btn column -->
             <q-card-section class="q-pr-xs col-auto">
diff --git a/src/modules/timesheets/components/shift/shift-list-legend.vue b/src/modules/timesheets/components/shift/shift-list-legend.vue
deleted file mode 100644
index 82f5f7a..0000000
--- a/src/modules/timesheets/components/shift/shift-list-legend.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import type { ShiftLegendItem } from 'src/modules/timesheets/models/shift.models';
-
-const { t } = useI18n();
-const props = defineProps<{ isLoading: boolean; }>();
-
-const legend: ShiftLegendItem[] = [
-    {type:'REGULAR'  , color: 'secondary', label_type: 'timesheet.shift.types.REGULAR', text_color: 'grey-8'},
-    {type:'EVENING'  , color: 'warning'  , label_type: 'timesheet.shift.types.EVENING'},
-    {type:'EMERGENCY', color: 'amber-10' , label_type: 'timesheet.shift.types.EMERGENCY'},
-    {type:'OVERTIME' , color: 'negative' , label_type: 'timesheet.shift.types.OVERTIME'},
-    {type:'VACATION' , color: 'purple-10', label_type: 'timesheet.shift.types.VACATION'},
-    {type:'HOLIDAY'  , color: 'purple-8' , label_type: 'timesheet.shift.types.HOLIDAY'},
-    {type:'SICK'     , color: 'grey-8'   , label_type: 'timesheet.shift.types.SICK'},
-]
-
-const shift_type_legend = computed(()=>
-    legend.map(item => ({ ...item, label: t(item.label_type)} ))
-);
-
-</script>
-
-<template>
-    <q-card class="q-px-xs q-pt-xs col rounded-10 q-mx-xs q-py-xs">
-        <q-card-section 
-            class="q-py-xs q-pa-none text-center q-my-s"
-            v-if="!props.isLoading"    
-        >
-            <q-badge
-                v-for="shift_type in shift_type_legend"
-                :key="shift_type.type"
-                :color="shift_type.color"
-                :label="shift_type.label"
-                :text-color="shift_type.text_color || 'white'"
-                class="q-px-md q-py-xs q-mx-xs q-my-none text-uppercase text-weight-bolder justify-center"
-                style="width: 120px; font-size: 0.8em;"
-            />
-        </q-card-section>
-    </q-card>
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/timesheet-wrapper.vue b/src/modules/timesheets/components/timesheet-wrapper.vue
new file mode 100644
index 0000000..31bd9a8
--- /dev/null
+++ b/src/modules/timesheets/components/timesheet-wrapper.vue
@@ -0,0 +1,88 @@
+<script
+    setup
+    lang="ts"
+>
+    import ShiftList from 'src/modules/timesheets/components/shift-list.vue';
+    import ShiftCrudDialog from 'src/modules/timesheets/components/shift-crud-dialog.vue';
+    import ExpenseCrudDialog from 'src/modules/timesheets/components/expense-crud-dialog.vue';
+    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
+    import ShiftListLegend from 'src/modules/timesheets/components/shift-list-legend.vue';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
+    import { useExpensesStore } from 'src/stores/expense-store';
+    import { provide } from 'vue';
+
+    const { open } = useExpensesStore();
+
+    const { employeeEmail, dense = false } = defineProps<{
+        employeeEmail: string;
+        dense?: boolean;
+    }>();
+
+    const { is_loading } = useTimesheetStore();
+    const { getPayPeriodDetailsByDate, getPreviousPayPeriodDetails, getNextPayPeriodDetails } = useTimesheetApi();
+
+    provide('employeeEmail', employeeEmail);
+</script>
+
+<template>
+    <q-card
+        flat
+        class="q-mt-md bg-secondary full-width"
+    >
+        <q-inner-loading
+            :showing="is_loading"
+            color="primary"
+        />
+
+        <q-card-section
+            :horizontal="$q.screen.gt.sm"
+            class="q-px-lg items-center"
+            :class="$q.screen.lt.md ? 'column' : ''"
+        >
+            <!-- navigation btn -->
+            <PayPeriodNavigator
+                @date-selected="getPayPeriodDetailsByDate"
+                @pressed-previous-button="getPreviousPayPeriodDetails"
+                @pressed-next-button="getNextPayPeriodDetails"
+            />
+
+            <!-- mobile expenses button -->
+            <q-btn
+                v-if="$q.screen.lt.md"
+                push
+                rounded
+                color="primary"
+                icon="receipt_long"
+                :label="$t('timesheet.expense.open_btn')"
+                class="q-mt-sm"
+                @click="open(employeeEmail)"
+            />
+
+            <!-- shift's colored legend -->
+            <ShiftListLegend :is-loading="false" />
+
+            <q-space />
+
+            <!-- desktop expenses button -->
+            <q-btn
+                v-if="$q.screen.gt.sm"
+                push
+                rounded
+                color="primary"
+                icon="receipt_long"
+                :label="$t('timesheet.expense.open_btn')"
+                @click="open(employeeEmail)"
+            />
+
+        </q-card-section>
+
+        <q-card-section :horizontal="$q.screen.gt.sm">
+            <ShiftList :dense="dense"/>
+        </q-card-section>
+    </q-card>
+
+    <ExpenseCrudDialog />
+
+    <ShiftCrudDialog :employee-email="employeeEmail" />
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/timesheet/timesheet-wrapper.vue b/src/modules/timesheets/components/timesheet/timesheet-wrapper.vue
deleted file mode 100644
index fa4f330..0000000
--- a/src/modules/timesheets/components/timesheet/timesheet-wrapper.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script
-    setup
-    lang="ts"
->
-    import ShiftList from 'src/modules/timesheets/components/shift/shift-list.vue';
-    import ShiftCrudDialog from 'src/modules/timesheets/components/shift/shift-crud-dialog.vue';
-    import ExpenseCrudDialog from 'src/modules/timesheets/components/expenses/expense-crud-dialog.vue';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
-    import { useExpensesStore } from 'src/stores/expense-store';
-    import { onMounted } from 'vue';
-
-    const { openExpensesDialog } = useExpensesStore();
-
-    const { employeeEmail } = defineProps<{
-        employeeEmail: string;
-    }>();
-
-    const { pay_period, pay_period_details, is_loading } = useTimesheetStore();
-    const { getPayPeriodDetailsByDate, getPreviousPayPeriodDetails, getNextPayPeriodDetails } = useTimesheetApi();
-
-    onMounted(() => {
-
-    });
-</script>
-
-<template>
-    <q-card
-        flat
-        class=" col q-mt-md bg-secondary"
-    >
-        <q-inner-loading
-            :showing="is_loading"
-            color="primary"
-        />
-
-        <q-card-section horizontal>
-            <!-- expenses button -->
-            <q-btn
-                color="primary"
-                unelevated
-                icon="receipt_long"
-                :label="$t('timesheet.expense.open_btn')"
-                @click="openExpensesDialog"
-            />
-
-            <!-- navigation btn -->
-            <PayPeriodNavigator
-                @date-selected="getPayPeriodDetailsByDate"
-                @pressed-previous-button="getPreviousPayPeriodDetails"
-                @pressed-next-button="getNextPayPeriodDetails"
-            />
-        </q-card-section>
-
-        <q-card-section>
-            <ShiftList
-                :raw-data="pay_period_details"
-                :current-pay-period="pay_period"
-            />
-        </q-card-section>
-    </q-card>
-
-    <!-- dialog for Expenses or Shifts -->
-    <ExpenseCrudDialog :email="employeeEmail" />
-
-    <!-- shift crud dialog -->
-    <ShiftCrudDialog :employee-email="employeeEmail" />
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/composables/api/use-expense-api.ts b/src/modules/timesheets/composables/api/use-expense-api.ts
index 4bcc01c..ee9a3fd 100644
--- a/src/modules/timesheets/composables/api/use-expense-api.ts
+++ b/src/modules/timesheets/composables/api/use-expense-api.ts
@@ -1,6 +1,6 @@
 import { normalizeObject } from "src/utils/normalize-object";
 import { useExpensesStore } from "src/stores/expense-store";
-import { expense_validation_schema, type ExpensesApiError } from "src/modules/timesheets/models/expense.validation";
+import { expense_validation_schema } from "src/modules/timesheets/models/expense.validation";
 import type { Expense, UpsertExpense } from "src/modules/timesheets/models/expense.models";
 
 export const useExpensesApi = () => {
@@ -11,26 +11,26 @@ export const useExpensesApi = () => {
         new_expense?: Expense;
     }) => obj as UpsertExpense;
 
-    const createExpenseByEmployeeEmail = async (employee_email: string): Promise<void> => {
+    const createExpenseByEmployeeEmail = async (employee_email: string, date: string): Promise<void> => {
         const upsert_expense = toUpsertExpense({ 
             new_expense: normalizeObject(expenses_store.current_expense, expense_validation_schema),
         });
-        await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, upsert_expense);
+        await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, date, upsert_expense);
     };
 
-    const updateExpenseByEmployeeEmail = async (employee_email: string): Promise<void> => {
+    const updateExpenseByEmployeeEmail = async (employee_email: string, date: string): Promise<void> => {
         const upsert_expense = toUpsertExpense({
             old_expense: normalizeObject(expenses_store.initial_expense, expense_validation_schema),
             new_expense: normalizeObject(expenses_store.current_expense, expense_validation_schema),
         });
-        await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, upsert_expense);
+        await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, date, upsert_expense);
     };
 
-    const deleteExpenseByEmployeeEmail = async (employee_email: string): Promise<void> => {
+    const deleteExpenseByEmployeeEmail = async (employee_email: string, date: string): Promise<void> => {
         const upsert_expense = toUpsertExpense({
             old_expense: normalizeObject(expenses_store.initial_expense, expense_validation_schema),
         });
-        await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, upsert_expense);
+        await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, date, upsert_expense);
     };
 
     return {
diff --git a/src/modules/timesheets/composables/api/use-shift-api.ts b/src/modules/timesheets/composables/api/use-shift-api.ts
index a7f043c..f32461d 100644
--- a/src/modules/timesheets/composables/api/use-shift-api.ts
+++ b/src/modules/timesheets/composables/api/use-shift-api.ts
@@ -1,5 +1,5 @@
 import { unwrapAndClone } from "src/utils/unwrap-and-clone";
-import { DATE_FORMAT_PATTERN, TIME_FORMAT_PATTERN } from "src/modules/timesheets/constants/shift.constants";
+import { TIME_FORMAT_PATTERN } from "src/modules/timesheets/constants/shift.constants";
 import { GenericApiError } from "src/modules/timesheets/models/expense.validation";
 import { useShiftStore } from "src/stores/shift-store";
 import { default_shift, type Shift, type UpsertShift } from "src/modules/timesheets/models/shift.models";
diff --git a/src/modules/timesheets/composables/use-expense-draft.ts b/src/modules/timesheets/composables/use-expense-draft.ts
index 182a5d3..8b7afa2 100644
--- a/src/modules/timesheets/composables/use-expense-draft.ts
+++ b/src/modules/timesheets/composables/use-expense-draft.ts
@@ -1,11 +1,11 @@
 import { ref, computed } from "vue";
-import type { TimesheetExpense } from "../types/expense.interfaces";
-import type { ExpenseType } from "../types/expense.types";
+import type { Expense } from "src/modules/timesheets/models/expense.models";
+import type { ExpenseType } from "src/modules/timesheets/models/expense.models";
 
-export const useExpenseDraft = (initial?: Partial<TimesheetExpense>) => {
+export const useExpenseDraft = (initial?: Partial<Expense>) => {
     const DEFAULT_TYPE: ExpenseType = 'EXPENSES';
 
-    const draft = ref<Partial<TimesheetExpense>>({
+    const draft = ref<Partial<Expense>>({
         date: '',
         type: DEFAULT_TYPE,
         comment: '',
diff --git a/src/modules/timesheets/composables/use-expense-items.ts b/src/modules/timesheets/composables/use-expense-items.ts
index 46d4e8e..aeeae5a 100644
--- a/src/modules/timesheets/composables/use-expense-items.ts
+++ b/src/modules/timesheets/composables/use-expense-items.ts
@@ -1,58 +1,59 @@
-import { ref, type Ref } from "vue";
-import { normalizeExpense, validateExpenseUI } from "../utils/expenses-validators";
-import { normExpenseType } from "../utils/expense.util";
-import type { Expense, PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
-import { useExpensesStore } from "src/stores/expense-store";
-import { unwrapAndClone } from "src/utils/unwrap-and-clone";
+// import { ref, type Ref } from "vue";
+// import { normalizeObject } from "src/utils/normalize-object";
+// import { normExpenseType } from "../utils/expense.util";
+// import type { Expense, PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
+// import { useExpensesStore } from "src/stores/expense-store";
+// import { unwrapAndClone } from "src/utils/unwrap-and-clone";
+// import { expense_validation_schema } from "src/modules/timesheets/models/expense.validation";
 
-const expenses_store = useExpensesStore();
+// const expenses_store = useExpensesStore();
 
-export const useExpenseItems = () => {
-    let expenses = unwrapAndClone(expenses_store.pay_period_expenses.expenses.map(normalizeExpense));
+// export const useExpenseItems = () => {
+//     let expenses = unwrapAndClone(expenses_store.pay_period_expenses.expenses.map(normalizeExpense));
 
-    const normalizePayload = (expense: Expense): Expense => {
-    const exp = normalizeExpense(expense);
-    const out: Expense = {
-        date: exp.date,
-        type: exp.type as ExpenseType,
-        comment: exp.comment || '',
-    };
-    if(typeof exp.amount  === 'number') out.amount  = exp.amount;
-    if(typeof exp.mileage === 'number') out.mileage = exp.mileage;
-    return out;
-}
+//     const normalizePayload = (expense: Expense): Expense => {
+//     const exp = normalizeObject(expense, expense_validation_schema);
+//     const out: Expense = {
+//         date: exp.date,
+//         type: exp.type as ExpenseType,
+//         comment: exp.comment || '',
+//     };
+//     if(typeof exp.amount  === 'number') out.amount  = exp.amount;
+//     if(typeof exp.mileage === 'number') out.mileage = exp.mileage;
+//     return out;
+// }
 
-    const addFromDraft = () => {
-        const candidate: Expense = normalizeExpense({
-            date: draft.date,
-            type: normExpenseType(draft.type),
-            ...(typeof draft.amount  === 'number' ? { amount: draft.amount   }: {}),
-            ...(typeof draft.mileage === 'number' ? { mileage: draft.mileage }: {}),
-            comment: String(draft.comment ?? '').trim(),
-        } as Expense);
+//     const addFromDraft = () => {
+//         const candidate: Expense = normalizeExpense({
+//             date: draft.date,
+//             type: normExpenseType(draft.type),
+//             ...(typeof draft.amount  === 'number' ? { amount: draft.amount   }: {}),
+//             ...(typeof draft.mileage === 'number' ? { mileage: draft.mileage }: {}),
+//             comment: String(draft.comment ?? '').trim(),
+//         } as Expense);
 
-        validateExpenseUI(candidate, 'expense_draft');
-        expenses = [ ...expenses, candidate];
-    };
+//         validateExpenseUI(candidate, 'expense_draft');
+//         expenses = [ ...expenses, candidate];
+//     };
 
-    const removeAt = (index: number) => {
-        if(index < 0 || index >= expenses.length) return;
-        expenses = expenses.filter((_,i)=> i !== index);
-    };
+//     const removeAt = (index: number) => {
+//         if(index < 0 || index >= expenses.length) return;
+//         expenses = expenses.filter((_,i)=> i !== index);
+//     };
 
-    const validateAll = () => {
-        for (const expense of expenses) {
-            validateExpenseUI(expense, 'expense_item');
-        }
-    };
+//     const validateAll = () => {
+//         for (const expense of expenses) {
+//             validateExpenseUI(expense, 'expense_item');
+//         }
+//     };
 
-    const payload = () => expenses.map(normalizeExpense);
+//     const payload = () => expenses.map(normalizeExpense);
 
-    return {
-        expenses,
-        addFromDraft,
-        removeAt,
-        validateAll,
-        payload,
-    };
-};
+//     return {
+//         expenses,
+//         addFromDraft,
+//         removeAt,
+//         validateAll,
+//         payload,
+//     };
+// };
diff --git a/src/modules/timesheets/constants/expense.constants.ts b/src/modules/timesheets/constants/expense.constants.ts
index 14ad95b..ce6d207 100644
--- a/src/modules/timesheets/constants/expense.constants.ts
+++ b/src/modules/timesheets/constants/expense.constants.ts
@@ -1,3 +1 @@
-export const COMMENT_MAX_LENGTH = 280;
-
 export const DATE_FORMAT_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
\ No newline at end of file
diff --git a/src/modules/timesheets/models/expense.models.ts b/src/modules/timesheets/models/expense.models.ts
index 12d8c08..dbc32a5 100644
--- a/src/modules/timesheets/models/expense.models.ts
+++ b/src/modules/timesheets/models/expense.models.ts
@@ -7,7 +7,7 @@ export const TYPES_WITH_AMOUNT_ONLY: Readonly<ExpenseType[]> = ['PER_DIEM', 'EXP
 export interface Expense {
     date: string;
     type: ExpenseType;
-    amount?: number;
+    amount: number;
     mileage?: number;
     comment: string;
     supervisor_comment?: string;
@@ -26,10 +26,9 @@ export interface PayPeriodExpenses {
     totals?: ExpenseTotals;
 }
 
-export interface TimesheetDetailsWeekDayExpenses {
-    cash: Expense[];
-    km: Expense[];
-    [otherType: string]: Expense[];
+export interface UpsertExpense {
+    old_expense: Expense;
+    new_expense: Expense;
 }
 
 export const default_expense: Expense = {
diff --git a/src/modules/timesheets/models/expense.validation.ts b/src/modules/timesheets/models/expense.validation.ts
index 5fbe65a..9a9700a 100644
--- a/src/modules/timesheets/models/expense.validation.ts
+++ b/src/modules/timesheets/models/expense.validation.ts
@@ -1,5 +1,5 @@
-import { Expense, EXPENSE_TYPE, ExpenseType } from "src/modules/timesheets/models/expense.models";
-import { Normalizer } from "src/utils/normalize-object";
+import { type Expense, EXPENSE_TYPE, type ExpenseType } from "src/modules/timesheets/models/expense.models";
+import type { Normalizer } from "src/utils/normalize-object";
 
 export interface ApiErrorPayload {
   status_code: number;
@@ -43,12 +43,12 @@ export class ExpensesApiError extends ApiError {
 };
 
 export const expense_validation_schema: Normalizer<Expense> = {
-    date:               v => String(v ?? "1970-01-01").trim(),
-    type:               v => EXPENSE_TYPE.includes(v) ? v as ExpenseType : "EXPENSES",
-    amount:             v => typeof v === "number" ? v : undefined,
+    date:               v => typeof v === 'string' ? v.trim() : '1970-01-01',
+    type:               v => EXPENSE_TYPE.includes(v as ExpenseType) ? v as ExpenseType : "EXPENSES",
+    amount:             v => typeof v === "number" ? v : -1,
     mileage:            v => typeof v === "number" ? v : undefined,
-    comment:            v => String(v ?? "").trim(),
-    supervisor_comment: v => String(v ?? "").trim(),
+    comment:            v => typeof v === 'string' ? v.trim() : '',
+    supervisor_comment: v => typeof v === 'string' ? v.trim() : '',
     is_approved:        v => !!v,
 };
 
diff --git a/src/modules/timesheets/models/pay-period-details.models.ts b/src/modules/timesheets/models/pay-period-details.models.ts
index c19a69f..4ec846c 100644
--- a/src/modules/timesheets/models/pay-period-details.models.ts
+++ b/src/modules/timesheets/models/pay-period-details.models.ts
@@ -1,5 +1,5 @@
 import type { Shift } from "./shift.models";
-import type { Expense } from "src/modules/timesheets/models/expense.models";
+import { default_expense, type Expense } from "src/modules/timesheets/models/expense.models";
 
 export type Week<T> = {
     sun: T;
@@ -34,9 +34,9 @@ export interface PayPeriodDetailsWeekDayShifts {
 }
 
 export interface PayPeriodDetailsWeekDayExpenses {
-    cash: Expense[];
-    km:   Expense[];
-    [otherType: string]: Expense[];
+    expenses: Expense[];
+    total_expenses: number;
+    total_mileage: number;
 }
 
 const makeWeek = <T>(factory: ()=> T): Week<T> => ({
@@ -61,8 +61,9 @@ const emptyDailySchedule = (): PayPeriodDetailsWeekDayShifts => ({
 });
 
 const emptyDailyExpenses = (): PayPeriodDetailsWeekDayExpenses => ({
-    cash: [],
-    km: [],
+    expenses: [default_expense,],
+    total_expenses: -1,
+    total_mileage: -1,
 });
 
 export const defaultPayPeriodDetailsWeek = (): PayPeriodDetailsWeek => ({
diff --git a/src/modules/timesheets/pages/timesheet-page.vue b/src/modules/timesheets/pages/timesheet-page.vue
deleted file mode 100644
index 7be7fd6..0000000
--- a/src/modules/timesheets/pages/timesheet-page.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script
-    setup
-    lang="ts"
->
-    import { date } from 'quasar';
-    import { computed, onMounted } from 'vue';
-    import { useI18n } from 'vue-i18n';
-    import { useAuthStore } from 'src/stores/auth-store';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import { useTimesheetApi } from '../composables/api/use-timesheet-api';
-    import { formatPayPeriodLabel } from '../utils/timesheet-format.util';
-    import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
-
-    //------------------- stores ------------------- 
-    const { locale } = useI18n();
-    const auth_store = useAuthStore();
-    const timesheet_api = useTimesheetApi();
-
-    //------------------- pay-period format label -------------------
-    const date_options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };
-
-    const pay_period_label = computed(() => formatPayPeriodLabel(
-        pay_period.label,
-        locale.value,
-        date.extractDate,
-        date_options
-    )
-    );
-
-    onMounted(async () => {
-        await timesheet_api.getPayPeriodDetailsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
-    });
-</script>
-
-
-<template>
-    <q-page
-        padding
-        class="q-pa-md bg-secondary"
-    >
-        <PageHeaderTemplate
-            :title="$t('timesheet.title')"
-            :start-date="pay_period_label.start_date"
-            :end-date="pay_period_label.end_date"
-        />
-
-    </q-page>
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/services/timesheet-service.ts b/src/modules/timesheets/services/timesheet-service.ts
index d52d38c..0f4fdda 100644
--- a/src/modules/timesheets/services/timesheet-service.ts
+++ b/src/modules/timesheets/services/timesheet-service.ts
@@ -3,7 +3,7 @@ import type { UpsertShift } from "src/modules/timesheets/models/shift.models";
 import type { PayPeriod } from "src/modules/shared/models/pay-period.models";
 import type { PayPeriodDetails } from "src/modules/timesheets/models/pay-period-details.models";
 import type { PayPeriodOverview } from "src/modules/timesheet-approval/models/pay-period-overview.models";
-import type { PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
+import type { Expense, PayPeriodExpenses, UpsertExpense } from "src/modules/timesheets/models/expense.models";
 
 export const timesheetService = {
     getPayPeriodDetailsByEmployeeEmail: async (email: string): Promise<PayPeriodDetails> => {
@@ -31,8 +31,20 @@ export const timesheetService = {
         return response.data;
     },
 
-    upsertOrDeletePayPeriodDetailsByDateAndEmployeeEmail: async (email: string, payload: UpsertShift[] | PayPeriodExpenses, pay_period: PayPeriod, date?: string): Promise<PayPeriodDetails> => {
-        if (date) return (await api.put(`/shifts/upsert/${email}/${date}`, payload)).data;
-        else return (await api.put(`/expenses/${email}/${pay_period.pay_year}/${pay_period.pay_period_no}`, payload, { headers: {'Content-Type': 'application/json'}})).data;
+    getExpensesByPayPeriodAndEmployeeEmail: async (email: string, year: string, period_number: string): Promise<PayPeriodExpenses> => {
+        const response = await api.get(`/expenses/${email}/${year}/${period_number}`);
+        return response.data;
     },
+
+    upsertOrDeleteShiftsByDateAndEmployeeEmail: async (email: string, payload: UpsertShift[], date: string): Promise<PayPeriodDetails> => {
+        const response = await api.put(`/shifts/upsert/${email}/${date}`, payload);
+        return response.data;
+    },
+
+    upsertOrDeleteExpensesByPayPeriodAndEmployeeEmail: async (email: string, date: string, payload: UpsertExpense): Promise<Expense[]> => {
+        const headers = { 'Content-Type': 'application/json' }
+
+        const response = await api.put(`/expenses/upsert/${email}/${date}`, payload, { headers });
+        return response.data;
+    }
 };
\ No newline at end of file
diff --git a/src/modules/timesheets/utils/expense.util.ts b/src/modules/timesheets/utils/expense.util.ts
index b81918b..36e0bb3 100644
--- a/src/modules/timesheets/utils/expense.util.ts
+++ b/src/modules/timesheets/utils/expense.util.ts
@@ -1,8 +1,8 @@
-import type { Expense, ExpenseTotals, ExpenseType, PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
+import type { Expense, ExpenseTotals } from "src/modules/timesheets/models/expense.models";
 
 //------------------ normalization / icons ------------------
 export const normExpenseType = (type: unknown): string => 
-    String(type ?? '').trim().toUpperCase();
+    typeof type === 'string' ? type.trim().toUpperCase() : '';
 
 const icon_map: Record<string,string> = {
     MILEAGE:     'time_to_leave',
@@ -31,7 +31,7 @@ export const computeExpenseTotals = (items: readonly Expense[]): ExpenseTotals =
 );
 
 //------------------ Quasar :rules=[] ------------------
-export const makeExpenseRules = (t: (key: string) => string, max_comment_char: number) => {
+export const makeExpenseRules = (t: (_key: string) => string) => {
     const isPresent = (val: unknown) => val !== undefined && val !== null && val !== '';
 
     const typeRequired    = (val: unknown) => (!!val)                               || t('timesheet.expense.errors.type_required');
@@ -40,15 +40,12 @@ export const makeExpenseRules = (t: (key: string) => string, max_comment_char: n
 
     const mileageRequired = (val: unknown) => (isPresent(val))                      || t('timesheet.expense.errors.mileage_required_for_type');
     
-    const commentRequired = (val: unknown) => (String(val ?? '').trim().length > 0) || t('timesheet.expense.errors.comment_required');
-
-    const commentTooLong  = (val: unknown) => (String(val ?? '').trim().length <= max_comment_char) || t('timesheet.expense.errors.comment_too_long');
+    const commentRequired = (val: unknown) => (typeof val === 'string' ? val.trim().length > 0 : false ) || t('timesheet.expense.errors.comment_required');
 
     return {
         typeRequired,
         amountRequired,
         mileageRequired,
         commentRequired,
-        commentTooLong,
     };
 };
\ No newline at end of file
diff --git a/src/modules/timesheets/utils/timesheet-format.util.ts b/src/modules/timesheets/utils/timesheet-format.util.ts
index 5c4775a..c2ecb12 100644
--- a/src/modules/timesheets/utils/timesheet-format.util.ts
+++ b/src/modules/timesheets/utils/timesheet-format.util.ts
@@ -1,4 +1,4 @@
-import type { PayPeriodLabel } from "../types/ui.types";
+import type { PayPeriodLabel } from "src/modules/timesheets/models/ui.models";
 
 export const formatPayPeriodLabel = (
     raw_label: string | undefined,
diff --git a/src/modules/profile/pages/profile-container.vue b/src/pages/profile-page.vue
similarity index 100%
rename from src/modules/profile/pages/profile-container.vue
rename to src/pages/profile-page.vue
diff --git a/src/modules/employee-list/pages/supervisor-crew-page.vue b/src/pages/supervisor-crew-page.vue
similarity index 100%
rename from src/modules/employee-list/pages/supervisor-crew-page.vue
rename to src/pages/supervisor-crew-page.vue
diff --git a/src/pages/timesheet-approval-page.vue b/src/pages/timesheet-approval-page.vue
new file mode 100644
index 0000000..cb972db
--- /dev/null
+++ b/src/pages/timesheet-approval-page.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+    import { onMounted, ref } from 'vue';
+    import { date } from 'quasar';
+    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
+    import OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
+    import DetailscrudDialog from 'src/modules/timesheet-approval/components/details-crud-dialog.vue';
+
+    const timesheet_approval_api = useTimesheetApprovalApi();
+    const timesheet_store = useTimesheetStore();
+    const is_details_dialog_open = ref(false);
+    const employee_email = ref('');
+
+    const onDetailsClicked = (email: string) => {
+        employee_email.value = email;
+        is_details_dialog_open.value = true;
+    };
+
+    onMounted( async () => {
+        await timesheet_approval_api.getPayPeriodOverviewsByDate(date.formatDate( new Date(), 'YYYY-MM-DD'));
+    });
+</script>
+
+<template>
+    <q-page 
+        padding 
+        class="q-pa-md bg-secondary "
+    >
+        <PageHeaderTemplate 
+            title="timesheet_approvals.page_title"
+            :start-date="timesheet_store.pay_period.period_start"
+            :end-date="timesheet_store.pay_period.period_end"
+        />
+        
+        <DetailscrudDialog
+            v-model:dialog="is_details_dialog_open"
+            :employee-email="employee_email"
+            :is-loading="timesheet_store.is_loading"
+            :employee-overview="timesheet_store.current_pay_period_overview"
+            :timesheet-details="timesheet_store.pay_period_details"
+        />
+
+        <OverviewList @clickedDetailsButton="onDetailsClicked"/>
+    </q-page>
+</template>
\ No newline at end of file
diff --git a/src/pages/timesheet-page.vue b/src/pages/timesheet-page.vue
new file mode 100644
index 0000000..639d8db
--- /dev/null
+++ b/src/pages/timesheet-page.vue
@@ -0,0 +1,37 @@
+<script
+    setup
+    lang="ts"
+>
+    import { date } from 'quasar';
+    import { onMounted } from 'vue';
+    import { useAuthStore } from 'src/stores/auth-store';
+    import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
+    import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';
+
+    const { user } = useAuthStore();
+    const timesheet_store = useTimesheetStore();
+    const timesheet_api = useTimesheetApi();
+
+    onMounted(async () => {
+        await timesheet_api.getPayPeriodDetailsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
+    });
+</script>
+
+
+<template>
+    <q-page
+        padding
+        class="q-pa-md bg-secondary"
+    >
+        <PageHeaderTemplate
+            :title="$t('timesheet.page_header')"
+            :start-date="timesheet_store.pay_period.period_start"
+            :end-date="timesheet_store.pay_period.period_end"
+        />
+
+        <TimesheetWrapper :employee-email="user.email" />
+
+    </q-page>
+</template>
\ No newline at end of file
diff --git a/src/router/routes.ts b/src/router/routes.ts
index a0c8225..7a21d96 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -15,22 +15,22 @@ const routes: RouteRecordRaw[] = [
       {
         path: 'timesheet-approvals',
         name: RouteNames.TIMESHEET_APPROVALS,
-        component: () => import('src/modules/timesheet-approval/pages/timesheet-approval.vue'),
+        component: () => import('src/pages/timesheet-approval-page.vue'),
       },
       {
         path: 'employees',
         name: RouteNames.EMPLOYEE_LIST,
-        component: () => import('src/modules/employee-list/pages/supervisor-crew-page.vue'),
+        component: () => import('src/pages/supervisor-crew-page.vue'),
       },
       {
         path: 'timesheet-temp',
         name: RouteNames.TIMESHEET_TEMP,
-        component: () => import('src/modules/timesheets/pages/timesheet-details-overview.vue')
+        component: () => import('src/pages/timesheet-page.vue')
       },
       {
         path: 'user/profile',
         name: RouteNames.PROFILE,
-        component: () => import('src/modules/profile/pages/profile-container.vue'),
+        component: () => import('src/pages/profile-page.vue'),
       },
     ],
   },
diff --git a/src/stores/auth-store.ts b/src/stores/auth-store.ts
index d7ba1f5..603876f 100644
--- a/src/stores/auth-store.ts
+++ b/src/stores/auth-store.ts
@@ -1,20 +1,20 @@
 import { computed, ref } from "vue";
 import { defineStore } from "pinia";
 import { AuthService } from "../modules/auth/services/services-auth";
-import type { User } from "src/modules/shared/types/user-interface";
+import type { User } from "src/modules/shared/models/user.models";
 
 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' },
+  supervisor: { firstName: 'User', lastName: 'Test', email: 'user@targointernet.com', 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(TestUsers.guest);
+  const user = ref<User>(TestUsers.guest);
   const authError = ref("");
   const isAuthorizedUser = computed(() => user.value.role !== 'guest');
 
diff --git a/src/stores/expense-store.ts b/src/stores/expense-store.ts
index 307ccf8..b9bbfbd 100644
--- a/src/stores/expense-store.ts
+++ b/src/stores/expense-store.ts
@@ -1,86 +1,103 @@
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { defineStore } from "pinia";
 import { useTimesheetStore } from "src/stores/timesheet-store";
-import { default_expense, default_pay_period_expenses, type Expense, type PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
-import { unwrapAndClone } from "src/utils/unwrap-and-clone";
+import { default_expense, default_pay_period_expenses, type UpsertExpense, type Expense, type PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
 import { timesheetService } from "src/modules/timesheets/services/timesheet-service";
-import { ExpensesApiError } from "src/modules/timesheets/models/expense.validation";
+import { ExpensesApiError, type GenericApiError } from "src/modules/timesheets/models/expense.validation";
+import { computeExpenseTotals } from "src/modules/timesheets/utils/expense.util";
+import type { UpsertAction } from "src/modules/timesheets/models/shift.models";
 
-const { pay_period } = useTimesheetStore();
 
-const encodeData = ( email: string, year: number, period_number: number ) => {
-    return { email: encodeURIComponent(email), year: encodeURIComponent(year), period_number: encodeURIComponent(period_number)};
-}
 
 export const useExpensesStore = defineStore('expenses', () => {
+    const timesheet_store = useTimesheetStore();
     const is_open = ref(false);
     const is_loading = ref(false);
+    const mode = ref<UpsertAction>('create');
     const pay_period_expenses = ref<PayPeriodExpenses>(default_pay_period_expenses);
+    const pay_period_expenses_totals = computed(() => computeExpenseTotals(pay_period_expenses.value.expenses))
     const current_expense = ref<Expense>(default_expense);
     const initial_expense = ref<Expense>(default_expense);
     const error = ref<string | null>(null);
 
-    const setErrorFrom = (err: unknown) => {
-        const e = err as any;
-        error.value = e?.message || 'Unknown error';
-    };
+    // const setErrorFrom = (err: unknown) => {
+    //     const e = err as any;
+    //     error.value = e?.message || 'Unknown error';
+    // };
 
     const open = async (employee_email: string): Promise<void> => {
         is_open.value = true;
         is_loading.value = true;
         error.value = null;
+        current_expense.value = default_expense;
+        initial_expense.value = default_expense;
 
         await getPayPeriodExpensesByEmployeeEmail(employee_email);
         is_loading.value = false;
     }
 
-    const getPayPeriodExpensesByEmployeeEmail = async (employee_email: string): Promise<void> => {
-        const encoded_data = encodeData(employee_email, pay_period.pay_year, pay_period.pay_period_no);
-
-        try {
-            const expenses = await timesheetService.getExpensesByPayPeriodAndEmployeeEmail(encoded_data.email, encoded_data.year, encoded_data.period_number);
-            pay_period_expenses.value = expenses;
-        } catch(err:any) {
-            const status_code: number = err?.response?.status ?? 500;
-            const data = err?.response?.data ?? {};
-            error.value = data.message || data.error || err.message;
-
-            throw new ExpensesApiError({
-                status_code,
-                error_code: data.error_code,
-                message: data.message || data.error || err.message,
-                context: data.context,
-            });
-        }
-    };
-
-    const upsertOrDeleteExpensesByEmployeeEmail = async (employee_email: string, expenses: Expense[]): Promise<void> => {
-        is_loading.value = true;
-        error.value = null;
-
-        try {
-            const encoded_data = encodeData(employee_email, pay_period.pay_year, pay_period.pay_period_no);
-            const payload = { is_approved: false, expenses };
-            
-            const updated_expenses = await timesheetService.upsertOrDeleteExpensesByPayPeriodAndEmployeeEmail(encoded_data.email, encoded_data.year, encoded_data.period_number, payload);
-            pay_period_expenses.value.expenses = updated_expenses;
-            is_open.value = false;
-        } catch (err) {
-            setErrorFrom(err);
-        } finally {
-            is_loading.value = false;
-        }
-    };
-
     const close = () => {
         error.value = null;
         is_open.value = false;
     };
 
+    const getPayPeriodExpensesByEmployeeEmail = async (employee_email: string): Promise<void> => {
+        is_loading.value = true;
+        error.value = null;
+
+        try {
+            const expenses = await timesheetService.getExpensesByPayPeriodAndEmployeeEmail(
+                encodeURIComponent(employee_email),
+                encodeURIComponent(timesheet_store.pay_period.pay_year),
+                encodeURIComponent(timesheet_store.pay_period.pay_period_no),
+            );
+            pay_period_expenses.value = expenses;
+        } catch (err: unknown) {
+            if (typeof err === 'object') {
+                const error = err as GenericApiError;
+                const status_code: number = error.status_code ?? 500;
+                // const data = error.context ?? '';
+                // error.value = data.message || data.error || err.message;
+                
+                throw new ExpensesApiError({
+                    status_code,
+                    // error_code: data.error_code,
+                    // message: data.message || data.error || err.message,
+                    // context: data.context,
+                });
+            }
+
+        } finally {
+            is_loading.value = false;
+        }
+    };
+
+    const upsertOrDeleteExpensesByEmployeeEmail = async (employee_email: string, date: string, expense: UpsertExpense): Promise<void> => {
+        is_loading.value = true;
+        error.value = null;
+
+        try {
+            const updated_expenses = await timesheetService.upsertOrDeleteExpensesByPayPeriodAndEmployeeEmail(
+                encodeURIComponent(employee_email),
+                encodeURIComponent(date),
+                expense,
+            );
+            console.log('updated expenses received: ', updated_expenses)
+            pay_period_expenses.value.expenses = updated_expenses;
+        } catch (err) {
+            // setErrorFrom(err);
+            console.log('error doing some expense thing: ', err)
+        } finally {
+            is_loading.value = false;
+        }
+    };
+
     return {
         is_open,
         is_loading,
+        mode,
         pay_period_expenses,
+        pay_period_expenses_totals,
         current_expense,
         initial_expense,
         error,
diff --git a/src/stores/shift-store.ts b/src/stores/shift-store.ts
index c5b33c3..1dac9be 100644
--- a/src/stores/shift-store.ts
+++ b/src/stores/shift-store.ts
@@ -3,8 +3,7 @@ import { defineStore } from "pinia";
 import { unwrapAndClone } from "src/utils/unwrap-and-clone";
 import { timesheetService } from "src/modules/timesheets/services/timesheet-service";
 import { useTimesheetStore } from "src/stores/timesheet-store";
-import { default_shift, type UpsertAction, type Shift, UpsertShift } from "src/modules/timesheets/models/shift.models";
-import { GenericApiError } from "src/modules/timesheets/models/expense.validation";
+import { default_shift, type UpsertAction, type Shift, type UpsertShift } from "src/modules/timesheets/models/shift.models";
 
 export const useShiftStore = defineStore('shift', () => {
     const is_open = ref(false);
@@ -31,7 +30,7 @@ export const useShiftStore = defineStore('shift', () => {
         open('update', date, shift, unwrapAndClone(shift));
     };
 
-    const openDelete = (date: string, shift: any) => {
+    const openDelete = (date: string, shift: Shift) => {
         open('delete', date, default_shift, shift);
     }
 
@@ -48,17 +47,18 @@ export const useShiftStore = defineStore('shift', () => {
         const encoded_date = encodeURIComponent(current_shift.value.date);
 
         try {
-            const result = await timesheetService.upsertOrDeletePayPeriodShifts(encoded_email, encoded_date, [ upsert_shift, ]);
+            const result = await timesheetService.upsertOrDeleteShiftsByDateAndEmployeeEmail(encoded_email, [ upsert_shift, ], encoded_date);
             timesheet_store.pay_period_details = result;
-        } catch (err: any) {
-            const status_code: number = err?.response?.status ?? 500;
-            const data = err?.response?.data ?? {};
-            throw new GenericApiError({
-                status_code,
-                error_code: data.error_code,
-                message: data.message || data.error || err.message,
-                context: data.context,
-            });
+        } catch (err) {
+            console.log('error doing thing: ', err)
+            // const status_code: number = err?.response?.status ?? 500;
+            // const data = err?.response?.data ?? {};
+            // throw new GenericApiError({
+            //     status_code,
+            //     error_code: data.error_code,
+            //     message: data.message || data.error || err.message,
+            //     context: data.context,
+            // });
         } finally {
             close();
         }
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index 00c09ed..b93a33d 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -4,93 +4,91 @@ import { withLoading } from 'src/utils/store-helpers';
 import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/timesheet-approval-service';
 import { timesheetService } from 'src/modules/timesheets/services/timesheet-service';
 import { default_pay_period_overview, type PayPeriodOverview } from "src/modules/timesheet-approval/models/pay-period-overview.models";
-import { default_pay_period, type PayPeriod } from 'src/modules/shared/types/pay-period-interface';
+import { default_pay_period, type PayPeriod } from 'src/modules/shared/models/pay-period.models';
 import { default_pay_period_details, type PayPeriodDetails } from 'src/modules/timesheets/models/pay-period-details.models';
-import { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
+import type { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
 
 export const useTimesheetStore = defineStore('timesheet', () => {
     const is_loading = ref<boolean>(false);
     const pay_period = ref<PayPeriod>(default_pay_period);
-    const pay_period_overviews = ref<PayPeriodOverview[]>([ default_pay_period_overview, ]);
+    const pay_period_overviews = ref<PayPeriodOverview[]>([default_pay_period_overview,]);
     const current_pay_period_overview = ref<PayPeriodOverview>(default_pay_period_overview);
     const pay_period_details = ref<PayPeriodDetails>(default_pay_period_details);
     const pay_period_report = ref();
-    const is_calendar_limit = computed( ()=> 
+    const is_calendar_limit = computed(() =>
         pay_period.value.pay_year === 2024 &&
         pay_period.value.pay_period_no <= 1
     );
 
-    const getPayPeriodByDateOrYearAndNumber = (date_or_year: string | number, period_number?: number): Promise<boolean> => {
-        return withLoading( is_loading, async () => {
-            try {
-                let response;
+    const getPayPeriodByDateOrYearAndNumber = async (date_or_year: string | number, period_number?: number): Promise<boolean> => {
+        is_loading.value = true;
 
-                if (typeof date_or_year === 'string') {
-                    response = await timesheetService.getPayPeriodByDate(date_or_year);  
-                    return true;
-                }
-                else if ( typeof date_or_year === 'number' && period_number ) {
-                    response = await timesheetService.getPayPeriodByYearAndPeriodNumber(date_or_year, period_number);
-                    return true;
-                }
-                else response = default_pay_period;
-
-                pay_period.value = response;
-                return false;
-            } catch(error){
-                console.error('Could not get current pay period: ', error );
-                pay_period.value = default_pay_period;
-                pay_period_overviews.value = [ default_pay_period_overview, ];
-                //TODO: More in-depth error-handling here
+        try {
+            if (typeof date_or_year === 'string') {
+                pay_period.value = await timesheetService.getPayPeriodByDate(date_or_year);
             }
+            else if (typeof date_or_year === 'number' && period_number) {
+                pay_period.value = await timesheetService.getPayPeriodByYearAndPeriodNumber(date_or_year, period_number);
+            }
+            else pay_period.value = default_pay_period;
+            is_loading.value = false;
+
+            return true;
+        } catch (error) {
+            console.error('Could not get current pay period: ', error);
+            pay_period.value = default_pay_period;
+            pay_period_overviews.value = [default_pay_period_overview,];
+            //TODO: More in-depth error-handling here
+            is_loading.value = false;
 
             return false;
-        });
-    };
-
-    const getPayPeriodDetailsByEmployeeEmail = async (employee_email: string) => {
-        return withLoading( is_loading, async () => {
-            try {
-                const response = await timesheetService.getPayPeriodDetailsByPayPeriodAndEmployeeEmail(
-                    pay_period.value.pay_year, 
-                    pay_period.value.pay_period_no, 
-                    employee_email
-                );
-                pay_period_details.value = response;
-
-                return true;
-            } catch (error) {
-                console.error('There was an error retrieving timesheet details for this employee: ', error);
-                // TODO: More in-depth error-handling here
-            }
-
-            pay_period_details.value = default_pay_period_details;
-            return false;
-        });
+        }
     };
 
     const getPayPeriodOverviewsBySupervisorEmail = async (pay_year: number, period_number: number, supervisor_email: string): Promise<boolean> => {
-        return withLoading( is_loading, async () => {
-            try {
-                const response = await timesheetApprovalService.getPayPeriodOverviewsBySupervisorEmail( pay_year,  period_number, supervisor_email );
-                pay_period_overviews.value = response;
-                return true;
-            } catch (error) {
-                console.error('There was an error retrieving Employee Pay Period overviews: ', error);
-                pay_period_overviews.value = [ default_pay_period_overview, ];
-                // TODO: More in-depth error-handling here
-            }
+        is_loading.value = true;
 
+        try {
+            const response = await timesheetApprovalService.getPayPeriodOverviewsBySupervisorEmail(pay_year, period_number, supervisor_email);
+            pay_period_overviews.value = response.employees_overview;
+            is_loading.value = false;
+
+            return true;
+        } catch (error) {
+            console.error('There was an error retrieving Employee Pay Period overviews: ', error);
+            pay_period_overviews.value = [default_pay_period_overview,];
+            // TODO: More in-depth error-handling here
+            is_loading.value = false;
+            
             return false;
-        });
+        }
+    };
+
+    const getPayPeriodDetailsByEmployeeEmail = async (employee_email: string) => {
+        is_loading.value = true;
+        try {
+            const response = await timesheetService.getPayPeriodDetailsByPayPeriodAndEmployeeEmail(
+                pay_period.value.pay_year,
+                pay_period.value.pay_period_no,
+                employee_email
+            );
+            pay_period_details.value = response;
+            console.log('pay period details: ', response, pay_period_details.value.employee_full_name)
+            is_loading.value = false;
+        } catch (error) {
+            console.error('There was an error retrieving timesheet details for this employee: ', error);
+            // TODO: More in-depth error-handling here
+            pay_period_details.value = default_pay_period_details;
+            is_loading.value = false;
+        } 
     };
 
     const getPayPeriodReportByYearAndPeriodNumber = async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
-        return withLoading( is_loading, async () => {
+        return withLoading(is_loading.value, async () => {
             try {
                 const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(
-                    year, 
-                    period_number, 
+                    year,
+                    period_number,
                     report_filters
                 );
                 pay_period_report.value = response;
@@ -105,10 +103,10 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         });
     };
 
-    return { 
+    return {
         is_loading,
         is_calendar_limit,
-        pay_period, 
+        pay_period,
         pay_period_overviews,
         current_pay_period_overview,
         pay_period_details,
diff --git a/src/utils/normalize-object.ts b/src/utils/normalize-object.ts
index 2b1c6d4..dfb6316 100644
--- a/src/utils/normalize-object.ts
+++ b/src/utils/normalize-object.ts
@@ -1,8 +1,8 @@
 export type Normalizer<T> = {
-    [K in keyof T]: (val: unknown) => T[K];
+    [K in keyof T]: (_val: unknown) => T[K];
 };
 
-export const normalizeObject = <T>(raw: any, schema: Normalizer<T>): T => {
+export const normalizeObject = <T>(raw: Partial<Record<keyof T, unknown>>, schema: Normalizer<T>): T => {
     const result = {} as T;
     for (const key in schema) {
         result[key] = schema[key](raw[key]);
diff --git a/src/utils/store-helpers.ts b/src/utils/store-helpers.ts
index 99c2daf..e38831c 100644
--- a/src/utils/store-helpers.ts
+++ b/src/utils/store-helpers.ts
@@ -1,5 +1,6 @@
 export const withLoading = async <T>( loading_state: boolean, fn: () => Promise<T> ) => {
     loading_state = true;
+    
     try {
         return await fn();
     } finally {
diff --git a/src/utils/to-qselect-options.ts b/src/utils/to-qselect-options.ts
index c12619b..15c670c 100644
--- a/src/utils/to-qselect-options.ts
+++ b/src/utils/to-qselect-options.ts
@@ -1,6 +1,6 @@
 export const toQSelectOptions = <T>(values: readonly T[], i18n_domain?: string): { label: string; value: T }[] => {
     return values.map(value => ({
         label: ((i18n_domain ?? "") + value).toString(),
-        value: value as T
+        value: value
     }));
 };
\ No newline at end of file
diff --git a/src/utils/unwrap-and-clone.ts b/src/utils/unwrap-and-clone.ts
index 779a358..73cc45a 100644
--- a/src/utils/unwrap-and-clone.ts
+++ b/src/utils/unwrap-and-clone.ts
@@ -7,8 +7,8 @@ export const unwrapAndClone = <T extends object>(obj: T): T => {
     const raw = isProxy(obj) ? toRaw(obj) : obj;
 
     // Use structuredClone if available (handles Dates, Maps, Sets, circulars)
-    if (typeof (globalThis as any).structuredClone === "function") {
-        return (globalThis as any).structuredClone(raw);
+    if (typeof globalThis.structuredClone === "function") {
+        return globalThis.structuredClone(raw);
     }
 
     // Fallback for older environments (loses Dates, Sets, Maps)