From e7dfe6db0049ef30ca2403e8459b02f14adcba24 Mon Sep 17 00:00:00 2001
From: Matthieu Haineault <matthieuh@targointernet.com>
Date: Mon, 8 Sep 2025 16:14:57 -0400
Subject: [PATCH] feat(timesheet): added remote_work, add_shift, add_expense
 btns,

---
 src/i18n/en-ca/index.ts                       |  10 +-
 src/i18n/fr-ca/index.ts                       |  11 +-
 .../shift/timesheet-shift-comment.vue         |   8 +-
 .../timesheet/timesheet-expense-list.vue      |   0
 .../timesheet/timesheet-navigation.vue        |   5 +
 .../timesheet/timesheet-save-payload.vue      |  64 +++++
 .../timesheet/timesheet-shift-form.vue        | 243 +++++++++---------
 .../timesheets/pages/timesheet-temp-page.vue  |  93 ++++---
 .../timesheets/types/timesheet-interface.ts   |   1 +
 .../types/timesheet-shift-interface.ts        |   8 +-
 10 files changed, 273 insertions(+), 170 deletions(-)
 delete mode 100644 src/modules/timesheets/components/timesheet/timesheet-expense-list.vue
 create mode 100644 src/modules/timesheets/components/timesheet/timesheet-save-payload.vue

diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index 2e94179..fe6b433 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -259,19 +259,23 @@ export default {
       previous_week:'Previous week',
     },
     save_button:'Save',
-    shift_types: 'Shift`s Type',
-    shiftTypes: {
+    cancel_button:'Cancel',
+    remote_button: 'Remote work',
+    add_shift:'Add Shift',
+    shift_types_label: 'Shift`s Type',
+    shift_types: {
       EMERGENCY: 'Emergency',
       EVENING: 'Evening',
       HOLIDAY: 'Holiday',
       REGULAR: 'Regular',
       SICK: 'Sick Leave',
       VACATION: 'Vacation',
-      WORK_FROM_HOME: 'Work from home',
     },
     fields: {
       start:'Start',
       end:'End',
+      header_comment:'Shift`s comment',
+      textarea_comment: 'Leave a comment here',
     },
     //rest
     timeSheetTab_1: 'Shifts',
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 3067ace..bed8c78 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -309,19 +309,24 @@ export default {
       previous_week:'Semaine précédente',
     },
     save_button:'Enregistrer',
-    shift_types: 'Type de quart',
-    shiftTypes: {
+    cancel_button:'Annuler',
+    remote_button: 'Télétravail',
+  
+    add_shift:'Ajouter une quart',
+    shift_types_label: 'Type de quart',
+    shift_types: {
       EMERGENCY: 'Urgence',
       EVENING: 'Soir',
       HOLIDAY: 'Férier',
       SICK: 'Absence',
       REGULAR: 'Régulier',
       VACATION: 'Vacance',
-      WORK_FROM_HOME: 'Télétravail',
     },
     fields: {
       start:'Entrée',
       end:'Sortie',
+      header_comment:'Commentaire du Quart',
+      textarea_comment:'Laissez votre commentaire',
     },
     //rest
     timeSheetTab_1: 'Quarts de travail',
diff --git a/src/modules/timesheets/components/shift/timesheet-shift-comment.vue b/src/modules/timesheets/components/shift/timesheet-shift-comment.vue
index d8c88cf..997487f 100644
--- a/src/modules/timesheets/components/shift/timesheet-shift-comment.vue
+++ b/src/modules/timesheets/components/shift/timesheet-shift-comment.vue
@@ -26,7 +26,7 @@ const save = ()=> {
 <template>
     <q-card class="full-width">
         <div class="row items-center justify-between q-pa-md">
-            <div class="text-h6">Commentaire du quart</div>
+            {{ $t('timesheet.fields.header_comment') }}
         </div>
         <q-separator/>
         <div class="q-pa-md">
@@ -35,7 +35,7 @@ const save = ()=> {
                 type="textarea"
                 autogrow
                 filled
-                label="Votre commentaire"
+                :label= "$t('timesheet.fields.textarea_comment')"
                 :counter=true
                 maxlength="512"
                 color="primary"
@@ -45,11 +45,11 @@ const save = ()=> {
             <q-btn
                 color="secondary"
                 text-color="grey-8"
-                label="close"
+                :label="$t('timesheet.cancel_button')"
                 @click="close"             
             />  
             <q-btn
-                label="Sauvegarder"
+                :label="$t('timesheet.save_button')"
                 color="primary"
                 @click="save"
             />
diff --git a/src/modules/timesheets/components/timesheet/timesheet-expense-list.vue b/src/modules/timesheets/components/timesheet/timesheet-expense-list.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/modules/timesheets/components/timesheet/timesheet-navigation.vue b/src/modules/timesheets/components/timesheet/timesheet-navigation.vue
index 635c5d0..1a1136b 100644
--- a/src/modules/timesheets/components/timesheet/timesheet-navigation.vue
+++ b/src/modules/timesheets/components/timesheet/timesheet-navigation.vue
@@ -28,6 +28,7 @@
 
 <template>
     <div class="row q-mb-lg q-mt-lg" >
+        <!-- navigation to previous week -->
         <q-btn 
             push rounded 
             icon="keyboard_arrow_left"  
@@ -43,6 +44,7 @@
             > {{ $t( 'timesheet.nav_button.previous_week' )}}
             </q-tooltip>
         </q-btn>
+        <!-- navigation to current week -->
         <q-btn
             push rounded
             icon="today"
@@ -58,6 +60,7 @@
             >{{ $t('timesheet.nav_button.current_week') }}
             </q-tooltip>
         </q-btn>
+        <!-- navigation through calendar date picker -->
         <q-btn 
             push rounded 
             icon="calendar_month" 
@@ -73,6 +76,7 @@
             >{{ $t('timesheet.nav_button.calendar_date_picker') }}
             </q-tooltip>
         </q-btn>
+        <!-- navigation to next week -->
         <q-btn 
             push rounded 
             icon="keyboard_arrow_right" 
@@ -90,6 +94,7 @@
         </q-btn>
     </div>
 
+    <!-- date picker calendar -->
     <q-dialog v-model="is_showing_calendar_picker" transition-show="jump-down" transition-hide="jump-up" position="top">
         <q-date 
             v-model="calendar_date" 
diff --git a/src/modules/timesheets/components/timesheet/timesheet-save-payload.vue b/src/modules/timesheets/components/timesheet/timesheet-save-payload.vue
new file mode 100644
index 0000000..c71840b
--- /dev/null
+++ b/src/modules/timesheets/components/timesheet/timesheet-save-payload.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+/* eslint-disable */
+import { computed } from 'vue';
+import type { CreateShiftPayload, Shift } from '../../types/timesheet-shift-interface';
+
+
+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.description = 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-shift-form.vue b/src/modules/timesheets/components/timesheet/timesheet-shift-form.vue
index 9020a7b..c583a08 100644
--- a/src/modules/timesheets/components/timesheet/timesheet-shift-form.vue
+++ b/src/modules/timesheets/components/timesheet/timesheet-shift-form.vue
@@ -1,42 +1,29 @@
-<!-- list of days with shifts infos-->
-
 <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 TimesheetNavigation from './timesheet-navigation.vue';
+import TimesheetSavePayload from './timesheet-save-payload.vue';
+import type { Shift } from '../../types/timesheet-shift-interface';
 import type { CreateShiftPayload } from '../../types/timesheet-shift-interface';
-import { useTimesheetApi } from '../../composables/use-timesheet-api';
-import { date as qdate } from 'quasar';
-import { useI18n } from 'vue-i18n';
-
-type ShiftRow = { 
-    type: string;
-    start_time: string;
-    end_time: string;
-    comment: string;
-    is_approved: boolean;
-}
-
-const { t, tm } = useI18n();
-
-const emit = defineEmits<{
-    (e: 'save', payload: CreateShiftPayload[]): void;
-}>();
 
 const timesheet_store = useTimesheetStore();
-const timesheet_api = useTimesheetApi();
 
-const SHIFT_KEY = ['REGULAR','WORK_FROM_HOME', 'EVENING', 'EMERGENCY', 'HOLIDAY', 'VACATION', 'SICK'] as const;
-const days = computed(()=> (tm('timesheet.days') as string[]) ?? []);
+const { t, tm, locale } = useI18n();
 
-const shift_options = computed(()=> SHIFT_KEY.map(key => ({ value: key, label: t(`timeSheet.shiftType.${key}`)})));
+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_type = computed(() => SHIFT_KEY.map(key => (`timesheet.shiftTypes.${key}`)));
+const shift_options = computed(()=> {
+    void locale.value;
+    return SHIFT_KEY.map(key => ({ value: key, label: t(`timesheet.shift_types.${key}`)}))
+});
 
-
-const empty_row = { type: '', start_time: '', end_time: '', comment: '', is_approved: false };
+const empty_row = { 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;
@@ -46,17 +33,22 @@ const week_dates = computed(() => {
     if(!mm) return [];
     const year = Number(mm[1]), month = Number(mm[2]), day = Number(mm[3])
 
-    const base = new Date(year, month - 1, day);
-    const yyyymmdd = (date: Date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`;
+    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.setDate(base.getDate() + i);
+        date.setUTCDate(base.getDate() + i);
         return yyyymmdd(date);
     });
 });
 
 //filling timesheet with shifts
-const rows = ref<ShiftRow[]>(
+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);
@@ -66,31 +58,21 @@ const rows = ref<ShiftRow[]>(
                         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<ShiftRow | undefined>(()=>
+const selected_row = computed<Shift | undefined>(()=>
     selected_index.value != null ? rows.value[selected_index.value] : undefined
 );
 
-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) => {
-    const when = qdate.extractDate(date_string, 'YYYY-MM-DD');
-    timesheet_api.getCurrentWeekTimesheetOverview(when);
-};
-
 const setComment = (comment: string) => {
-    if(selected_row.value) {
-        selected_row.value.comment = comment;
-    }
+    if(selected_row.value) selected_row.value.comment = comment;
     show_comment.value = false;
 }
 
@@ -99,34 +81,12 @@ const onClickComment = (index: number)=> {
     show_comment.value = true;
 };
 
-const buildPayload = (): CreateShiftPayload[] => {
-    const dates = week_dates.value;
-    if(!Array.isArray(dates) || dates.length === 0) return [];
-
-    return rows.value.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,
-        };
-        if(row.comment) item.description = row.comment;
-        return[item];
-    })
-};
-
-const saveWeek = () => {
-    const payload = buildPayload();
-    emit('save', payload);
+const clearRow = (index: number) => {
+    rows.value[index] = { ...empty_row };
 }
 
-const clearRow = (idx: number) => {
-    rows.value[idx] = { ...empty_row };
-}
+
+const emit = defineEmits<{ (e: 'save', payload: CreateShiftPayload[]): void }>();
 
 watch(
     () => [timesheet_store.current_timesheet.start_day, timesheet_store.current_timesheet.shifts],
@@ -135,8 +95,20 @@ watch(
         rows.value = days.value.map((_, idx)=> {
             const shift = timesheet_store.current_timesheet.shifts.find(sh => sh.date === dates[idx]);
             return shift
-                ? { type: shift.bank_type || '', start_time: shift.start_time || '', end_time: shift.end_time || '', comment: shift.description || '', is_approved: shift.is_approved} 
-                : { type: '', start_time: '', end_time: '', comment: '', is_approved: false };
+                ? { 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,
+                } 
+                : { type: '',
+                    start_time: '',
+                    end_time: '',
+                    comment: '',
+                    is_approved: false,
+                    is_remote: false
+                };
         });
     },
     { deep: true, immediate: true }
@@ -145,7 +117,7 @@ watch(
 </script>
 
 <template>
-    <q-card class="q-pa-md q-ma-md">
+    <q-card class="bg-transparent q-pa-md q-ma-md">
         <q-dialog
             v-model="show_comment"
             transition-show="fade"
@@ -159,33 +131,46 @@ watch(
                 @click-close="show_comment = false"
             />
         </q-dialog>
-        <q-form autofocus>
-            <!-- navigation buttons -->
-            <TimesheetNavigation 
-                :is-disabled="timesheet_store.is_loading"
-                :is-previous-limit="is_calendar_limit"
-                @date-selected="onDateSelected"
-                @pressed-previous-button="timesheet_api.previous_week()"
-                @pressed-current-button="timesheet_api.getCurrentWeekTimesheetOverview()"
-                @pressed-next-button="timesheet_api.next_week()"
-            />
-            <div v-for="row, index in rows" :key="index" class="row q-gutter-sm q-mb-sm">
-                <!--Week days-->
+
+        <q-form id="timesheet_shifts" 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_type"
+                    :options="shift_options"
                     :readonly="row.is_approved" 
-                    class="col-1"
-                    :label="$t('timesheet.shift_types')"
+                    class="col-3"
+                    :label="$t('timesheet.shift_types_label')"
                     dense
                     filled
                     color="primary"
                     standout="bg-primary text-white"
                     options-dense
-                    map-options    
-                    hide-dropdown-icon                    
+                    emit-value
+                    map-options
+                    option-value="value"
+                    option-label="label"
+                    hide-dropdown-icon
                 />
                 <!-- start time input -->
                 <q-input 
@@ -213,41 +198,59 @@ watch(
                     step="300"
                     standout="bg-primary text-white"
                 />
-                <!-- comment icon -->
-                <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)"
-                />
-                <!-- reset entries icon -->
+                <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-none justify-right col-1"
-                    :color="row.type.length || row.start_time.length || row.end_time.length || row.comment.length > 0 ? 'primary' : 'accent'"
+                    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>
-            <!-- save button -->
-            <q-btn
-                color="primary"
-                icon="save_alt"
-                class="col-1 "
-                rounded
-                push                
-                @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>
+                <TimesheetSavePayload
+                    :week_dates="week_dates"
+                    :rows="rows"
+                    @save="(payload) => emit('save', payload)"
+                />
         </q-form>
-    </q-card>
+
+        </q-card>
+
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheets/pages/timesheet-temp-page.vue b/src/modules/timesheets/pages/timesheet-temp-page.vue
index e68b6c3..dd2c731 100644
--- a/src/modules/timesheets/pages/timesheet-temp-page.vue
+++ b/src/modules/timesheets/pages/timesheet-temp-page.vue
@@ -1,53 +1,59 @@
 <script setup lang="ts">
-import { date } from 'quasar';
 import { useTimesheetStore } from 'src/stores/timesheet-store';
 import { useTimesheetApi } from '../composables/use-timesheet-api';
 import { computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import TimesheetShiftForm from '../components/timesheet/timesheet-shift-form.vue';
 import type { CreateShiftPayload } from '../types/timesheet-shift-interface';
+import TimesheetNavigation from '../components/timesheet/timesheet-navigation.vue';
+import { date as qdate } from 'quasar';
 
+const { locale } = useI18n();
+const timesheet_store = useTimesheetStore();
+const timesheet_api = useTimesheetApi();
+const { this_week, saveTimesheetShifts } = timesheet_api;
 
-    const { locale } = useI18n();
-    const timesheet_store = useTimesheetStore();
-    const { this_week, saveTimesheetShifts } = useTimesheetApi();
+onMounted(async () => {
+    await this_week();
+});
 
-    onMounted(async () => {
-        await this_week();
-    });
+const date_options: Intl.DateTimeFormatOptions = {
+    day:   'numeric',
+    month: 'long',
+    year:  'numeric',
+};
 
-    const date_options: Intl.DateTimeFormatOptions = {
-        day:   'numeric',
-        month: 'long',
-        year:  'numeric',
-    };
+const timesheet_label = computed(() => { 
+    const dates = timesheet_store.current_timesheet.label.split('.'); 
+    const start_date = new Intl.DateTimeFormat(locale.value, date_options).format(qdate.extractDate(dates[0] as string, 'YYYY-MM-DD')); 
+    const end_date = new Intl.DateTimeFormat(locale.value, date_options).format(qdate.extractDate(dates[1] as string, 'YYYY-MM-DD'));
 
-    const timesheet_label = computed(() => {
-        const dates = timesheet_store.current_timesheet.label.split('.');
-        const start_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[0] as string, 'YYYY-MM-DD'));
-        const end_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[1] as string, 'YYYY-MM-DD'));
-       
-        if ( dates.length === 1) {
-            return {
-                start_date: '_',
-                end_date: '_',
-            }
-        }
-        return { start_date, end_date };
-    });
+    if ( dates.length === 1) { 
+        return { start_date: '_', end_date: '_', } 
+    }
+    return { start_date, end_date };
+});
 
-    const onSaveShifts = async (payload: CreateShiftPayload[]) => {
-        await saveTimesheetShifts(payload);
-    };
+const onSaveShifts = async (payload: CreateShiftPayload[]) => {
+    await saveTimesheetShifts(payload);
+};
+
+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) => {
+    const when =  qdate.extractDate(date_string, 'YYYY-MM-DD');
+     await timesheet_api.getCurrentWeekTimesheetOverview(when);
+};
 </script>
 
 
 <template>
-    <q-page
-        padding
-        class="q-pa-md bg secondary"
-    >
-        <div class="text-h4 row justify-center q-mt-lg text-uppercase text-weight-bolder text-grey-8">
+    
+    <q-page padding class="q-pa-md bg-secondary" >    
+        <div class="text-h4 row justify-center q-mt-lg text-uppercase text-weight-bolder text-grey-8 col-auto">
             {{ $t('pageTitles.timeSheets') }}
         </div>
         <div class="row items-center justify-center q-py-none q-my-none">
@@ -59,11 +65,22 @@ import type { CreateShiftPayload } from '../types/timesheet-shift-interface';
             </div>
             <div class="text-primary text-h6 text-uppercase">
                 {{ timesheet_label.end_date }}
-            </div>
+            </div>                
         </div>
-        <q-card class="q-mt-md">
-            <q-inner-loading :showing="timesheet_store.is_loading"/>
-            <TimesheetShiftForm @save="onSaveShifts"/>
-        </q-card>
+        <div>
+            <TimesheetNavigation 
+                :is-disabled="timesheet_store.is_loading"
+                :is-previous-limit="is_calendar_limit"
+                @date-selected="onDateSelected"
+                @pressed-previous-button="timesheet_api.previous_week()"
+                @pressed-current-button="timesheet_api.getCurrentWeekTimesheetOverview()"
+                @pressed-next-button="timesheet_api.next_week()"
+            />
+            <q-card flat class="q-mt-md bg-secondary">
+                    <TimesheetShiftForm @save="onSaveShifts" class="col-12"/>
+                <q-inner-loading :showing="timesheet_store.is_loading" color="primary"/>
+            </q-card>
+        </div>
+        <!-- navigation buttons -->
     </q-page>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheets/types/timesheet-interface.ts b/src/modules/timesheets/types/timesheet-interface.ts
index 8fa1a02..927cfd0 100644
--- a/src/modules/timesheets/types/timesheet-interface.ts
+++ b/src/modules/timesheets/types/timesheet-interface.ts
@@ -14,6 +14,7 @@ type Shifts = {
     end_time: string;
     description: string;
     is_approved: boolean;
+    is_remote: boolean;
 }
 
 type Expenses = { 
diff --git a/src/modules/timesheets/types/timesheet-shift-interface.ts b/src/modules/timesheets/types/timesheet-shift-interface.ts
index 1811d97..d5eab27 100644
--- a/src/modules/timesheets/types/timesheet-shift-interface.ts
+++ b/src/modules/timesheets/types/timesheet-shift-interface.ts
@@ -4,6 +4,7 @@ export type CreateShiftPayload = {
     start_time: string;
     end_time: string;
     description?: string;
+    is_remote?: boolean;
 };
 
 export type CreateWeekShiftPayload = {
@@ -11,7 +12,10 @@ export type CreateWeekShiftPayload = {
 }
 
 export type Shift = {
+    type: string;
+    start_time: string;
+    end_time: string;
+    comment: string;
     is_approved: boolean;
-    start: string;
-    end: string;
+    is_remote: boolean;
 }
\ No newline at end of file