From a2f07ac3fb458fd5a424bc06690ceaa1ca919007 Mon Sep 17 00:00:00 2001
From: Matthieu Haineault <matthieuh@targointernet.com>
Date: Wed, 10 Sep 2025 15:26:32 -0400
Subject: [PATCH] feat(timesheet): added comment popup

---
 .../timesheet-approval-period-picker.vue      |   2 +-
 .../composables/use-timesheet-approval-api.ts |  21 +-
 .../deprecated-timesheet-shift-form.vue       | 266 ------------------
 .../timesheet-details-shifts-row-header.vue   |   0
 .../timesheet-details-shifts-row.vue          |  49 +++-
 .../timesheet-details-shifts.vue              |   2 +-
 .../timesheet/timesheet-navigation.vue        | 102 ++-----
 .../timesheet-shift-form-overview.vue         |   0
 .../composables/use-timesheet-api.ts          |  81 +++---
 .../pages/timesheet-details-overview.vue      |  41 ++-
 10 files changed, 145 insertions(+), 419 deletions(-)
 delete mode 100644 src/modules/timesheets/components/timesheet/deprecated-timesheet-shift-form.vue
 rename src/modules/timesheets/components/{ => timesheet}/timesheet-details-shifts-row-header.vue (100%)
 rename src/modules/timesheets/components/{ => timesheet}/timesheet-details-shifts-row.vue (67%)
 rename src/modules/timesheets/components/{ => timesheet}/timesheet-details-shifts.vue (96%)
 delete mode 100644 src/modules/timesheets/components/timesheet/timesheet-shift-form-overview.vue

diff --git a/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue b/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue
index 8681c73..e185ee2 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue
@@ -20,7 +20,7 @@
     
     const onDateSelected = (value: string, reason: string, details: QDateDetails) => {
         calendar_date.value = value;
-        is_showing_calendar_picker.value = false;
+        is_showing_calendar_picker.value = false;   
         emit('date-selected', value, reason, details);
     }    
 </script>
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 952b192..ecdf20a 100644
--- a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
+++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
@@ -2,6 +2,7 @@ import { useTimesheetStore } from "src/stores/timesheet-store";
 import { useAuthStore } from "src/stores/auth-store";
 import type { PayPeriodReportFilters } from "../types/timesheet-approval-pay-period-report-interface";
 import { default_pay_period_overview_employee, type PayPeriodOverviewEmployee } from "../types/timesheet-approval-pay-period-overview-employee-interface";
+import { date } from "quasar";
 
 export const useTimesheetApprovalApi = () => {
     const timesheet_store = useTimesheetStore();
@@ -63,11 +64,29 @@ 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,
         getPayPeriodOverviewByEmployeeEmail,
         getTimesheetsByPayPeriodAndEmail,
-        getTimesheetApprovalCSVReport
+        getTimesheetApprovalCSVReport,
+        getCurrentPayPerdioOverview
     }
 };
\ No newline at end of file
diff --git a/src/modules/timesheets/components/timesheet/deprecated-timesheet-shift-form.vue b/src/modules/timesheets/components/timesheet/deprecated-timesheet-shift-form.vue
deleted file mode 100644
index 9d3e299..0000000
--- a/src/modules/timesheets/components/timesheet/deprecated-timesheet-shift-form.vue
+++ /dev/null
@@ -1,266 +0,0 @@
-<script setup lang="ts">
-/* eslint-disable */
-import { computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useTimesheetStore } from 'src/stores/timesheet-store';
-import TimesheetShiftComment from '../shift/timesheet-shift-comment.vue';
-import TimesheetSavePayload from './timesheet-save-payload.vue';
-import type { Shift } from '../../types/timesheet-shift-interface';
-import type{ CreateShiftPayload } from '../../types/timesheet-shifts-payload-interface';
-
-const timesheet_store = useTimesheetStore();
-
-const { t, tm, locale } = useI18n();
-
-const SHIFT_KEY = ['REGULAR', 'EVENING', 'EMERGENCY', 'HOLIDAY', 'VACATION', 'SICK'] as const;
-const days = computed(()=> {
-    void locale.value;
-    return (tm('timesheet.days') as string[]) ?? [];
-});
-
-const shift_options = computed(()=> {
-    void locale.value;
-    return SHIFT_KEY.map(key => ({ value: key, label: t(`timesheet.shift_types.${key}`)}))
-});
-
-const empty_row = { date:'', type: '', start_time: '', end_time: '', comment: '', is_approved: false, is_remote: false };
-//Week dates
-const week_dates = computed(() => {
-    const start_date = timesheet_store.current_timesheet.start_day;
-    if(!start_date) return [];
-
-    const mm = /^(\d{4})-(\d{2})-(\d{2})$/.exec(start_date);
-    if(!mm) return [];
-    const year = Number(mm[1]), month = Number(mm[2]), day = Number(mm[3])
-
-    const base = new Date(Date.UTC(year, month - 1, day));
-    const yyyymmdd = (date: Date) => {
-        const yyyy = date.getFullYear();
-        const mm = String(date.getUTCMonth() + 1).padStart(2,'0');
-        const dd = String(date.getUTCDate()).padStart(2,'0');
-        return `${yyyy}-${mm}-${dd}`};
-
-    return Array.from({length:7 }, (_, i) => {
-        const date = new Date(base);
-        date.setUTCDate(base.getDate() + i);
-        return yyyymmdd(date);
-    });
-});
-
-//filling timesheet with shifts
-const rows = ref<Shift[]>(
-    days.value.map((_,index) => {
-        const date_ISO = week_dates.value[index];
-        const shift = timesheet_store.current_timesheet.shifts.find(sh => sh.date === date_ISO);
-        return shift ? {
-                        date:shift.date || '',
-                        type: shift.bank_type || '',
-                        start_time: shift.start_time || '',
-                        end_time: shift.end_time || '',
-                        comment: shift.description || '',
-                        is_approved: !!shift.is_approved,
-                        is_remote: !!shift.is_remote,
-                        }
-                     : { ...empty_row };
-    })
-);
-const hasData = (row: Shift) => !!(row.type || row.start_time || row.end_time || row.comment);
-
-const show_comment = ref(false);
-const selected_index = ref<number | null>(null);
-const selected_row = computed<Shift | undefined>(()=>
-    selected_index.value != null ? rows.value[selected_index.value] : undefined
-);
-
-const setComment = (comment: string) => {
-    if(selected_row.value) selected_row.value.comment = comment;
-    show_comment.value = false;
-}
-
-const onClickComment = (index: number)=> {
-    selected_index.value = index;
-    show_comment.value = true;
-};
-
-const clearRow = (index: number) => {
-    rows.value[index] = { ...empty_row };
-}
-
-
-const emit = defineEmits<{ (e: 'save', payload: CreateShiftPayload[]): void }>();
-
-//onMounted?
-watch(
-    () => [timesheet_store.current_timesheet.start_day, timesheet_store.current_timesheet.shifts],
-    () => {
-        const dates = week_dates.value;
-        rows.value = days.value.map((_, idx)=> {
-            const shift = timesheet_store.current_timesheet.shifts.find(sh => sh.date === dates[idx]);
-            return shift
-                ? { date: shift.date || '',
-                    type: shift.bank_type || '',
-                    start_time: shift.start_time || '',
-                    end_time: shift.end_time || '',
-                    comment: shift.description || '',
-                    is_approved: shift.is_approved,
-                    is_remote: shift.is_remote,
-                } 
-                : { date: '',
-                    type: '',
-                    start_time: '',
-                    end_time: '',
-                    comment: '',
-                    is_approved: false,
-                    is_remote: false
-                };
-        });
-    },
-    { deep: true, immediate: true }
-);
-
-</script>
-
-<template>
-    <q-card class="bg-transparent q-pa-md q-ma-md">
-        <q-dialog
-            v-model="show_comment"
-            transition-show="fade"
-            transition-hide="fade"
-            persistent
-        >
-        <!-- comment popup -->
-            <TimesheetShiftComment
-                :comment-string="selected_row?.comment ?? ''"
-                @click-save="setComment"
-                @click-close="show_comment = false"
-            />
-        </q-dialog>
-
-        <q-form 
-            autofocus 
-            class="bg-white q-pa-sm q-pt-lg rounded-10">
-            
-            <div 
-                v-for="(row, index) in rows" 
-                :key="week_dates[index] ??  index" 
-                class="q-gutter-sm q-mb-sm" 
-                :class="$q.screen.lt.md ? 'column' : 'row'" >
-            <!--Week days-->            
-                <span class="text-weight-bold text-primary col-1">{{ days[index] }}</span>
-                <!-- remote work toggle -->
-                <q-toggle
-                    v-model="row.is_remote"
-                    :disable="row.is_approved"
-                    color="primary"
-                    checked-icon="home_work"
-                    unchecked-icon="business"
-                    icon="home_work"
-                    class="col-auto q-ml-sm"
-                >
-                    <q-tooltip
-                        anchor="top middle"
-                        self="center middle"
-                        class="bg-primary text-uppercase text-weight-bold"
-                    >{{ $t('timesheet.remote_button') }}
-                    </q-tooltip>
-                </q-toggle>
-                <!-- type selection -->
-                <q-select
-                    v-model="row.type"
-                    :options="shift_options"
-                    :readonly="row.is_approved" 
-                    class="col-3"
-                    :label="$t('timesheet.shift_types_label')"
-                    dense
-                    filled
-                    color="primary"
-                    standout="bg-primary text-white"
-                    options-dense
-                    emit-value
-                    map-options
-                    option-value="value"
-                    option-label="label"
-                    hide-dropdown-icon
-                />
-                <!-- start time input -->
-                <q-input 
-                    v-model="row.start_time"
-                    :readonly="row.is_approved" 
-                    class="col-auto"
-                    :label="$t('timesheet.fields.start')"
-                    dense
-                    filled
-                    color="primary"
-                    type="time"
-                    step="300"
-                    standout="bg-primary text-white"
-                />
-                <!-- end time input -->
-                <q-input 
-                    v-model="row.end_time"
-                    :readonly="row.is_approved" 
-                    class="col-auto"
-                    :label="$t('timesheet.fields.end')"
-                    dense
-                    filled
-                    color="primary"
-                    type="time"
-                    step="300"
-                    standout="bg-primary text-white"
-                />
-                <div class="col-3">
-                    <!-- comment button -->
-                    <q-btn 
-                        :icon="row.comment.length > 0 ? 'announcement':'chat_bubble_outline'" 
-                        :color="row.comment.length > 0 ? 'primary' : 'grey-8'"
-                        :disable="row.is_approved"
-                        flat
-                        class="col-auto"
-                        @click="onClickComment(index)"
-                    />
-                    <!-- expense button -->
-                    <q-btn
-                        :icon="row.comment.length > 0 ? 'receipt_long':'attach_money'"
-                        flat
-                        dense
-                        class="q-pa-none q-ma-sm col-1"
-                        :color="hasData(row) ? 'primary' : 'grey-8'"
-                        @click="clearRow(index)"
-                    /> 
-
-                </div>
-                <!-- reset entries button -->
-                <q-btn
-                    icon="cleaning_services"
-                    flat
-                    dense
-                    class="q-pa-none q-ma-sm col-auto"
-                    :color="hasData(row) ? 'primary' : 'grey-4'"
-                    @click="clearRow(index)"
-                />
-                <!-- add one more shift buttons -->
-                <q-btn
-                    icon="more_time"
-                    flat
-                    dense
-                    class="q-pa-none q-ma-sm col-auto"
-                    color="primary"
-                >
-                    <q-tooltip
-                        anchor="top middle"
-                        self="center middle"
-                        class="bg-primary text-uppercase text-weight-bold"
-                    >{{ $t('timesheet.add_shift') }}
-                    </q-tooltip>
-                </q-btn>
-            </div>
-                <TimesheetSavePayload
-                    :week_dates="week_dates"
-                    :rows="rows"
-                    @save="(payload) => emit('save', payload)"
-                />
-        </q-form>
-
-        </q-card>
-
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/timesheet-details-shifts-row-header.vue b/src/modules/timesheets/components/timesheet/timesheet-details-shifts-row-header.vue
similarity index 100%
rename from src/modules/timesheets/components/timesheet-details-shifts-row-header.vue
rename to src/modules/timesheets/components/timesheet/timesheet-details-shifts-row-header.vue
diff --git a/src/modules/timesheets/components/timesheet-details-shifts-row.vue b/src/modules/timesheets/components/timesheet/timesheet-details-shifts-row.vue
similarity index 67%
rename from src/modules/timesheets/components/timesheet-details-shifts-row.vue
rename to src/modules/timesheets/components/timesheet/timesheet-details-shifts-row.vue
index 2fb0ab5..2c7fa7b 100644
--- a/src/modules/timesheets/components/timesheet-details-shifts-row.vue
+++ b/src/modules/timesheets/components/timesheet/timesheet-details-shifts-row.vue
@@ -1,9 +1,35 @@
 <script setup lang="ts">
-    import type { Shift } from 'src/modules/timesheets/types/timesheet-shift-interface';
-
+import type { Shift } from 'src/modules/timesheets/types/timesheet-shift-interface';
+import { computed, ref } from 'vue';
+import ShiftComment from '../shift/shift-comment.vue';
+/* eslint-disable */
     const props = defineProps<{
         shift: Shift;
     }>();
+
+    const emit = defineEmits<{
+        'save-comment': [payload: { comment: string; shift_id?: string | number; date?: string }];
+    }>();
+
+    const getComment = computed(()=> (props.shift as any).description || (props.shift as any).comment || '');
+    const show_comment = ref(false);
+    const openComment  = ()=> { show_comment.value = true; };
+    const closeComment = ()=> { show_comment.value = false; };
+    const handleSave = (comment: string)=> {
+        emit('save-comment', { 
+            comment,
+            shift_id: (props.shift as any).id,
+            date:(props.shift as any).date
+        });
+        show_comment.value = false;
+    }
+    const hasComment = computed(()=> {
+        const comment = (props.shift as any).description ?? (props.shift as any).comment ?? '';
+        return typeof comment === 'string' && comment.trim().length > 0;
+    })
+    const comment_icon = computed(()=> (hasComment.value ? 'announcement' : 'chat_bubble_outline'));
+    const comment_color = computed(()=> (hasComment.value ? 'primary' : 'grey-8'));
+
     
     const getShiftColor = (type: string): string => {
         switch(type) {
@@ -85,11 +111,11 @@
                 v-if="props.shift.type !== ''"
                 flat 
                 dense
-                color='grey-8'
-                icon="chat_bubble_outline"
+                :color="comment_color"
+                :icon="comment_icon"
                 class="q-pa-none"
+                @click="openComment"
             />
-
             <!-- insert_drive_file or request_quote -->
             <q-btn
                 v-if="props.shift.type !== ''"
@@ -101,4 +127,17 @@
             /> 
         </q-card-section>
     </q-card-section>
+
+    <q-dialog
+        v-model="show_comment"
+        transition-show="fade"
+        transition-hide="fade"
+        persistent    
+    >
+    <ShiftComment
+        :comment-string="getComment"
+        @click-close="closeComment"
+        @click-save="handleSave"
+    />
+    </q-dialog>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/timesheet-details-shifts.vue b/src/modules/timesheets/components/timesheet/timesheet-details-shifts.vue
similarity index 96%
rename from src/modules/timesheets/components/timesheet-details-shifts.vue
rename to src/modules/timesheets/components/timesheet/timesheet-details-shifts.vue
index 2129cc0..24338c1 100644
--- a/src/modules/timesheets/components/timesheet-details-shifts.vue
+++ b/src/modules/timesheets/components/timesheet/timesheet-details-shifts.vue
@@ -3,7 +3,7 @@ import { default_shift, type Shift } from 'src/modules/timesheets/types/timeshee
 import TimesheetEmployeeDetailsShiftsRowHeader from './timesheet-details-shifts-row-header.vue';
 import TimesheetEmployeeDetailsShiftsRow from './timesheet-details-shifts-row.vue';
 import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
-import type { TimesheetPayPeriodDetailsOverview } from '../types/timesheet-pay-period-details-overview-interface';
+import type { TimesheetPayPeriodDetailsOverview } from '../../types/timesheet-pay-period-details-overview-interface';
 
     const props = defineProps<{
         rawData: TimesheetPayPeriodDetailsOverview;
diff --git a/src/modules/timesheets/components/timesheet/timesheet-navigation.vue b/src/modules/timesheets/components/timesheet/timesheet-navigation.vue
index 1713d8d..ada6b56 100644
--- a/src/modules/timesheets/components/timesheet/timesheet-navigation.vue
+++ b/src/modules/timesheets/components/timesheet/timesheet-navigation.vue
@@ -1,78 +1,28 @@
 <script setup lang="ts">
     /* eslint-disable */
-    import { computed, ref, watch } from 'vue';
-    import { date as qdate } from 'quasar';
+    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;
-        minPickableDate?: string;
-        currentLabel?: string;
+        isPreviousLimit:boolean;
     }>();
-    const emit = defineEmits<{
-        (e: 'navigate-to', targetIso: string, meta?: { reason: 'previous' | 'next' | 'current' | 'picked' }): void;
-        (e: 'date-selected', value: string, reason?: string, details?: QDateDetails): void;
-        (e: 'pressed-previous-button'): void;
-        (e: 'pressed-next-button'): void;
-        (e: 'pressed-current-button'): void;
-    }>();
-
-    const is_showing_calendar_picker = ref(false);
-
-    const currentStartEndDate = computed(()=> {
-        const label = props.currentLabel ?? '';
-        const parts = label.split('.');
-        if(parts.length < 2) return null;
-        return { start_iso: parts[0]!, end_iso: parts[1]! };
-    });
-
-    const to_date = (iso?: string) => (iso ? qdate.extractDate(iso, 'YYYY-MM-DD'): null);
-    const to_iso = (date: Date) => qdate.formatDate(date, 'YYYY-MM-DD');
-
-    const calendar_date = ref(currentStartEndDate.value?.start_iso ?? to_iso(new Date()));
-
-    watch(() => props.currentLabel, () => {
-        if(currentStartEndDate.value?.start_iso) {
-            calendar_date.value = currentStartEndDate.value.start_iso;
-        }
-    });
-
-    const is_previous_limit = computed(() => {
-        const start_end = currentStartEndDate.value;
-        if (!start_end || !props.minPickableDate) return false;
-        const prev_anchor = qdate.addToDate(to_date(start_end.start_iso)!, { days: -1 });
-        return to_iso(prev_anchor) <= props.minPickableDate;
-    });
-
     
+    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);
-        emit('navigate-to', value, { reason: 'picked' });
     };
-
-    const goPrevious = () => {
-        emit('pressed-previous-button'); 
-        const start_end = currentStartEndDate.value;
-        if (!start_end) return;
-        const prev_anchor = qdate.addToDate(to_date(start_end.start_iso)!, { days: -1 });
-        emit('navigate-to', to_iso(prev_anchor), { reason: 'previous' });
-    };
-
-    const goCurrent = () => {
-        emit('pressed-current-button'); 
-        emit('navigate-to', to_iso(new Date()), { reason: 'current' });
-    };
-
-    const goNext = () => {
-        emit('pressed-next-button'); 
-        const start_end = currentStartEndDate.value;
-        if (!start_end) return;
-        const next_anchor = qdate.addToDate(to_date(start_end.end_iso)!, { days: 1 });
-        emit('navigate-to', to_iso(next_anchor), { reason: 'next' });
-    };
-
 </script>
 
 <template>
@@ -82,8 +32,8 @@
             push rounded
             icon="keyboard_arrow_left"
             color="primary"
-            @click="goPrevious"
-            :disable="is_previous_limit || props.isDisabled"
+            @click="emit('pressed-previous-button')"
+            :disable="props.isPreviousLimit || props.isDisabled"
             class="q-mr-sm q-px-sm"
         >
             <q-tooltip 
@@ -93,29 +43,13 @@
             > {{ $t( 'timesheet.nav_button.previous_week' )}}
             </q-tooltip>
         </q-btn>
-        <!-- navigation to current week -->
-        <q-btn
-            push rounded
-            icon="today"
-            color="primary"
-            @click="goCurrent"
-            :disable="!!props.isDisabled"
-            class="q-mr-sm q-px-lg"
-        >
-            <q-tooltip
-                anchor="top middle"
-                self="center middle"
-                class="bg-primary text-uppercase text-weight-bold"
-            >{{ $t('timesheet.nav_button.current_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="props.isDisabled"
             class="q-px-lg"
         >
             <q-tooltip
@@ -130,8 +64,8 @@
             push rounded
             icon="keyboard_arrow_right"
             color="primary"
-            @click="goNext"
-            :disable="!!props.isDisabled"
+            @click="emit('pressed-next-button')"
+            :disable="props.isDisabled"
             class="q-ml-sm q-px-sm"
         >
             <q-tooltip
@@ -155,7 +89,7 @@
             class="q-mt-xl"
             today-btn
             mask="YYYY-MM-DD"
-            :options="date => !props.minPickableDate || date > props.minPickableDate"
+            :options="date => date > '2023/12/16'"
             @update:model-value="onDateSelected"
         />
     </q-dialog>
diff --git a/src/modules/timesheets/components/timesheet/timesheet-shift-form-overview.vue b/src/modules/timesheets/components/timesheet/timesheet-shift-form-overview.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/modules/timesheets/composables/use-timesheet-api.ts b/src/modules/timesheets/composables/use-timesheet-api.ts
index 25e5fb1..37c81dc 100644
--- a/src/modules/timesheets/composables/use-timesheet-api.ts
+++ b/src/modules/timesheets/composables/use-timesheet-api.ts
@@ -1,60 +1,49 @@
 import { useAuthStore } from "src/stores/auth-store";
 import { useTimesheetStore } from "src/stores/timesheet-store"
-import { ref } from "vue";
-import { timesheetTempService } from "../services/timesheet-services";
-import type { CreateShiftPayload } from "../types/timesheet-shifts-payload-interface";
-
 
 export const useTimesheetApi = () => {
     const timesheet_store = useTimesheetStore();
     const auth_store = useAuthStore();
-    const week_offset = ref(0);
 
-    const fetchWeek = async (offset = week_offset.value) => {
-        const email = auth_store.user?.email;
-        if(!email) return;
-        try{
-            timesheet_store.is_loading = true;
-            const timesheet = await timesheetTempService.getTimesheetsByEmail(email, offset);
-            timesheet_store.current_timesheet = timesheet;
-            week_offset.value = offset;
-        }catch (err) {
-            console.error('fetch week error', err);
-            timesheet_store.current_timesheet = { ...timesheet_store.current_timesheet, shifts: [], expenses: [] };
-        } finally {
-            timesheet_store.is_loading = false;
+    const getTimesheetsByDate = async (date_string: string) => {
+        const success = await timesheet_store.getPayPeriodByDate(date_string);
+        
+        if (success) {
+            await timesheet_store.getTimesheetsByPayPeriodAndEmail(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;
+
+        if (new_pay_period_no > 26) {
+           new_pay_period_no = 1;
+           new_pay_year += 1; 
+        }
+
+        if (new_pay_period_no < 1) {
+            new_pay_period_no = 26;
+            new_pay_year -= 1;
+        }
+
+        const success = await timesheet_store.getPayPeriodByYearAndPeriodNumber(new_pay_year, new_pay_period_no);
+        
+        if (success) {
+            await timesheet_store.getTimesheetsByPayPeriodAndEmail(auth_store.user.email);
         }
     };
 
-    const this_week     = async () => fetchWeek(0);
-    const next_week     = async () => fetchWeek(week_offset.value + 1);
-    const previous_week = async () => fetchWeek(week_offset.value - 1);
-
-    const saveTimesheetShifts = async (shifts: CreateShiftPayload[]) => {
-        const email = auth_store.user?.email;
-        if(!email || shifts.length === 0) return;
-        await timesheet_store.createTimesheetShifts(email, shifts, week_offset.value);
-    };
-
-    const weekStart = (date: Date) => {
-        const x = new Date(date);
-        x.setHours(0, 0, 0, 0);
-        x.setDate(x.getDate() - x.getDay());
-        return x;
-    };
-
-    const getCurrentWeekTimesheetOverview = async (when: Date = new Date()) => {
-        const off = Math.trunc((weekStart(when).getTime() - weekStart(new Date()).getTime()) / 604800000);
-        await fetchWeek(off); 
-    }
+    const getCurrentPayPeriod  = async () => fetchPayPeriod(0);
+    const getNextPayPeriod     = async () => fetchPayPeriod(1);
+    const getPreviousPayPeriod = async () => fetchPayPeriod(-1);
 
     return { 
-        week_offset,
-        fetchWeek,
-        this_week,
-        next_week,
-        previous_week,
-        saveTimesheetShifts,
-        getCurrentWeekTimesheetOverview,
+        getTimesheetsByDate,
+        fetchPayPeriod,
+        getCurrentPayPeriod,
+        getNextPayPeriod,
+        getPreviousPayPeriod,
     };
 };
\ No newline at end of file
diff --git a/src/modules/timesheets/pages/timesheet-details-overview.vue b/src/modules/timesheets/pages/timesheet-details-overview.vue
index 5a625f2..015632b 100644
--- a/src/modules/timesheets/pages/timesheet-details-overview.vue
+++ b/src/modules/timesheets/pages/timesheet-details-overview.vue
@@ -1,17 +1,19 @@
 <script setup lang="ts">
 import { useTimesheetStore } from 'src/stores/timesheet-store';
+import { useAuthStore } from 'src/stores/auth-store';
+import { useTimesheetApi } from '../composables/use-timesheet-api';
 import { computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { date } from 'quasar';
-import TimesheetEmployeeDetailsShifts from '../components/timesheet-details-shifts.vue';
-import { useAuthStore } from 'src/stores/auth-store';
+import TimesheetEmployeeDetailsShifts from '../components/timesheet/timesheet-details-shifts.vue';
 import TimesheetNavigation from '../components/timesheet/timesheet-navigation.vue';
 import ShiftsLegend from '../components/shift/shifts-legend.vue';
 
- 
+ /* eslint-disable */
 const { locale } = useI18n();
 const timesheet_store = useTimesheetStore();
 const auth_store = useAuthStore();
+const timesheet_api = useTimesheetApi();
 
 const date_options: Intl.DateTimeFormatOptions = {
     day:   'numeric',
@@ -30,14 +32,22 @@ const pay_period_label = computed(() => {
     return { start_date, end_date };
 });
 
+const is_calendar_limit = computed( () => {
+    return  timesheet_store.current_pay_period.pay_year === 2024 && 
+            timesheet_store.current_pay_period.pay_period_no <= 1;
+});
+
+
+const onDateSelected = async (date_string: string) => {
+    await timesheet_api.getTimesheetsByDate(date_string);
+};
+
 const loadByDate = async (isoDate: string) => {
     await timesheet_store.getPayPeriodByDate(isoDate);
     await timesheet_store.getTimesheetsByPayPeriodAndEmail(auth_store.user.email);
 };
 
 onMounted( async () => {
-    await timesheet_store.getPayPeriodByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
-    await timesheet_store.getTimesheetsByPayPeriodAndEmail(auth_store.user.email);
     await loadByDate(date.formatDate(new Date(), 'YYYY-MM-DD' ));
 });
 
@@ -71,22 +81,23 @@ onMounted( async () => {
         </div>
         <div>
             <q-card flat class="q-mt-md bg-secondary">
-                <TimesheetNavigation
-                :is-disabled="timesheet_store.is_loading"
-                :min-pickable-date="'2023-12-16'"
-                :current-label="timesheet_store.current_pay_period?.label || ''"
-                @navigate-to="(iso) => loadByDate(iso)"
-                />
-                <ShiftsLegend
-                    :is-loading="false"
-                />
+                    <TimesheetNavigation
+                        :is-disabled="timesheet_store.is_loading"
+                        :is-previous-limit="is_calendar_limit"
+                        @date-selected="value => onDateSelected(value)"
+                        @pressed-previous-button="timesheet_api.getPreviousPayPeriod()"
+                        @pressed-next-button="timesheet_api.getNextPayPeriod()"
+                    />
+                    <ShiftsLegend
+                        :is-loading="false"
+                    />
                 <q-card-section horizontal>
                     <TimesheetEmployeeDetailsShifts
                         :raw-data="timesheet_store.pay_period_employee_details"
                         :current-pay-period="timesheet_store.current_pay_period"
                     />                    
+                    <q-inner-loading :showing="timesheet_store.is_loading" color="primary"/>
                 </q-card-section>
-                <q-inner-loading :showing="timesheet_store.is_loading" color="primary"/>
             </q-card>
         </div>
     </q-page>