Merge pull request 'dev/matthieu/timesheet-form' (#14) from dev/matthieu/timesheet-form into main

Reviewed-on: Targo/targo_frontend#14

src/i18n/en-ca/index.ts

@@ -26,6 +26,7 @@ export default {
     userMenuHome: 'Homepage',
     userMenuEmployeeList: 'Employee Directory',
     userMenuShiftValidation: 'Timesheet Approval',
+    userMenuTimesheetTemp: 'Timesheet',
     userMenuProfile: 'Profile',
     userMenuHelp: 'Help',
     userMenuLogout: 'Log Out',
@@ -248,7 +249,35 @@ export default {
     timeSheets: 'Time sheet',
     timeSheetValidations: 'Time sheet approvals',
   },
-  timeSheet: {
+  timesheet: {
+    //employee's timesheet page
+    days: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
+    nav_button: {
+      calendar_date_picker:'Calendar',
+      current_week:'This week',
+      next_week:'Next week',
+      previous_week:'Previous week',
+    },
+    save_button:'Save',
+    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',
+    },
+    fields: {
+      start:'Start',
+      end:'End',
+      header_comment:'Shift`s comment',
+      textarea_comment: 'Leave a comment here',
+    },
+    //rest
     timeSheetTab_1: 'Shifts',
     timeSheetTab_2: 'Expenses',
     templateButton: 'Apply Templates',

src/i18n/fr-ca/index.ts

@@ -165,6 +165,7 @@ export default {
     userMenuHome: 'Accueil',
     userMenuEmployeeList: 'Répertoire employés',
     userMenuShiftValidation: 'Valider les heures',
+    userMenuTimesheetTemp: 'Carte de temps',
     userMenuProfile: 'Profil',
     userMenuHelp: 'Aide',
     userMenuLogout: 'Déconnexion',
@@ -298,7 +299,36 @@ export default {
     noResultsLabel: 'Le filtre n’a révélé aucun résultat',
     noDataLabel: 'Je n’ai rien trouvé pour toi',
   },
-  timeSheet: {
+  timesheet: {
+    //employee's timesheet page
+    days: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
+    nav_button: {
+      calendar_date_picker:'Calendrier',
+      current_week:'Semaine actuelle',
+      next_week:'Prochaine semaine',
+      previous_week:'Semaine précédente',
+    },
+    save_button:'Enregistrer',
+    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',
+    },
+    fields: {
+      start:'Entrée',
+      end:'Sortie',
+      header_comment:'Commentaire du Quart',
+      textarea_comment:'Laissez votre commentaire',
+    },
+    //rest
     timeSheetTab_1: 'Quarts de travail',
     timeSheetTab_2: 'Dépenses',
     templateButton: 'Appliquer le modèle',

src/modules/shared/components/navigation/right-drawer.vue

@@ -62,6 +62,17 @@
                     </q-item-section>
                 </q-item>
 
+                <!-- Employee Timesheet temp -- Employee, Supervisor, Accounting only -->
+                <q-item v-ripple clickable side @click="goToPageName(RouteNames.TIMESHEET_TEMP)"
+                    v-if="['supervisor', 'accounting', 'employee'].includes(authStore.user.role)">
+                    <q-item-section avatar>
+                        <q-icon name="punch_clock" color="primary" />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label class="text-uppercase text-grey-8 text-weight-bold">{{ $t('navBar.userMenuTimesheetTemp') }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+
                 <!-- Profile -->
                 <q-item v-ripple clickable side @click="goToPageName(RouteNames.PROFILE)">
                     <q-item-section avatar>

src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue

@@ -32,12 +32,12 @@
             
             expenses_dataset.value = [
                 {
-                    label: t('timeSheet.refund'),
+                    label: t('timesheet.refund'),
                     data: all_costs,
                     backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
                 },
                 {
-                    label: t('timeSheet.mileage'),
+                    label: t('timesheet.mileage'),
                     data: all_mileage,
                     backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
                 }

src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue

@@ -40,16 +40,16 @@ import { colors } from 'quasar';
 
     const shift_type_legend: shiftColor[] = [
         {
-            type: t('timeSheet.shiftRegular'),
+            type: t('timesheet.shift_types.REGULAR'),
             color: 'secondary',
             text_color: 'grey-8',
         },
         {
-            type: t('timeSheet.shiftEvening'),
+            type: t('timesheet.shift_types.EVENING'),
             color: 'warning',
         },
         {
-            type: t('timeSheet.shiftEmergency'),
+            type: t('timesheet.shift_types.EMERGENCY'),
             color: 'amber-10',
         },
         {
@@ -57,15 +57,15 @@ import { colors } from 'quasar';
             color: 'negative',
         },
         {
-            type: t('timeSheet.shiftVacation'),
+            type: t('timesheet.shift_types.VACATION'),
             color: 'purple-10',
         },
         {
-            type: t('timeSheet.shiftHoliday'),
+            type: t('timesheet.shift_types.HOLIDAY'),
             color: 'purple-8',
         },
         {
-            type: t('timeSheet.shiftSick'),
+            type: t('timesheet.shift_types.SICK'),
             color: 'grey-8',
         },
     ]

src/modules/timesheet-approval/pages/timesheet-approval.vue

@@ -48,7 +48,7 @@
                 class="text-grey-8 text-uppercase q-mx-md"
                 :class="$q.screen.lt.md ? 'text-weight-medium text-caption' : 'text-weight-bold'"
             >
-                {{ $t('timeSheet.dateRangesTo') }}
+                {{ $t('timesheet.dateRangesTo') }}
             </div>
             <div 
                 class="text-primary text-uppercase text-center text-weight-bold"

src/modules/timesheets/components/shift/timesheet-shift-comment.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+/* eslint-disable */
+const props = defineProps<{
+    commentString: string;
+}>();
+
+const emit = defineEmits<{
+    clickClose: [];
+    clickSave: [comment: string];
+}>();
+
+const text = ref(props.commentString);
+
+const close = ()=> {
+    emit('clickClose');
+    text.value = '';
+}
+
+const save = ()=> {
+    emit('clickSave',text.value);
+    close();
+}
+</script>
+
+<template>
+    <q-card class="full-width">
+        <div class="row items-center justify-between q-pa-md">
+            {{ $t('timesheet.fields.header_comment') }}
+        </div>
+        <q-separator/>
+        <div class="q-pa-md">
+            <q-input
+                v-model="text"
+                type="textarea"
+                autogrow
+                filled
+                :label= "$t('timesheet.fields.textarea_comment')"
+                :counter=true
+                maxlength="512"
+                color="primary"
+            />
+        </div>
+        <div class="row justify-end q-gutter-sm q-pa-sm">
+            <q-btn
+                color="secondary"
+                text-color="grey-8"
+                :label="$t('timesheet.cancel_button')"
+                @click="close"             
+            />  
+            <q-btn
+                :label="$t('timesheet.save_button')"
+                color="primary"
+                @click="save"
+            />
+        </div>
+    </q-card>
+</template>

src/modules/timesheets/components/timesheet/timesheet-navigation.vue

@@ -0,0 +1,109 @@
+<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': []
+        'pressed-current-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 q-mb-lg q-mt-lg" >
+        <!-- navigation to previous week -->
+        <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-tooltip 
+                anchor="top middle" 
+                self="center middle" 
+                class="bg-primary text-uppercase text-weight-bold"
+            > {{ $t( 'timesheet.nav_button.previous_week' )}}
+            </q-tooltip>
+        </q-btn>
+        <!-- navigation to current week -->
+        <q-btn
+            push rounded
+            icon="today"
+            color="primary"
+            @click="emit('pressed-current-button')"
+            :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"
+            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') }}
+            </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"
+            class="q-ml-sm q-px-sm"
+        >
+            <q-tooltip
+                anchor="top middle"
+                self="center middle"
+                class="bg-primary text-uppercase text-weight-bold"
+            > {{ $t('timesheet.nav_button.next_week') }}
+            </q-tooltip>
+        </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" 
+            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>

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>

src/modules/timesheets/components/timesheet/timesheet-shift-form.vue

@@ -0,0 +1,266 @@
+<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 { Shift } from '../../types/timesheet-shift-interface';
+import type { CreateShiftPayload } from '../../types/timesheet-shift-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>

src/modules/timesheets/composables/use-timesheet-api.ts

@@ -0,0 +1,60 @@
+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-shift-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 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); 
+    }
+
+    return { 
+        week_offset,
+        fetchWeek,
+        this_week,
+        next_week,
+        previous_week,
+        saveTimesheetShifts,
+        getCurrentWeekTimesheetOverview,
+    };
+};

src/modules/timesheets/pages/timesheet-temp-page.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+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;
+
+onMounted(async () => {
+    await this_week();
+});
+
+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'));
+
+    if ( dates.length === 1) { 
+        return { start_date: '_', end_date: '_', } 
+    }
+    return { start_date, end_date };
+});
+
+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 col-auto">
+            {{ $t('pageTitles.timeSheets') }}
+        </div>
+        <div class="row items-center justify-center q-py-none q-my-none">
+            <div class="text-primary text-h6 text-uppercase">
+                {{ timesheet_label.start_date }}
+            </div>
+            <div class="text-grey-8 text-weight-bold text-uppercase q-mx-md">
+                {{ $t('timesheet.dateRangesTo') }}
+            </div>
+            <div class="text-primary text-h6 text-uppercase">
+                {{ timesheet_label.end_date }}
+            </div>                
+        </div>
+        <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>

src/modules/timesheets/services/timesheet-services.ts

@@ -0,0 +1,18 @@
+import { api } from "src/boot/axios";
+import type  {Timesheet}  from "src/modules/timesheets/types/timesheet-interface";
+import type { CreateShiftPayload, CreateWeekShiftPayload } from "../types/timesheet-shift-interface";
+
+export const timesheetTempService = {
+    //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;
+    }
+};

src/modules/timesheets/timesheet-constants.ts

@@ -0,0 +1 @@
+//mock data

src/modules/timesheets/types/timesheet-details-interface.ts

@@ -38,7 +38,12 @@ interface TimesheetDetailsDailyExpenses {
     [otherType: string]: Expense[]; //for possible future types of expenses
 }
 
-
+//employee timesheet template
+export interface EmployeeTimesheetDetailsWeek {
+    is_approved: boolean;
+    shifts: WeekDay<TimesheetDetailsDailySchedule>;
+    expenses: WeekDay<TimesheetDetailsDailyExpenses>;
+}
 // empty default builder
 const makeWeek = <T>(factory: () => T): WeekDay<T> => ({
     sun: factory(),

src/modules/timesheets/types/timesheet-interface.ts

@@ -0,0 +1,28 @@
+export interface Timesheet {
+    is_approved: boolean;
+    start_day: string;
+    end_day: string;
+    label: string;
+    shifts: Shifts[];
+    expenses: Expenses[];
+}
+
+type Shifts = {
+    bank_type: string;
+    date: string;
+    start_time: string;
+    end_time: string;
+    description: string;
+    is_approved: boolean;
+    is_remote: boolean;
+}
+
+type Expenses = { 
+    bank_type: string;
+    date: string;
+    amount: number;
+    km: number;
+    description: string;
+    supervisor_comment: string;
+    is_approved: boolean;
+}

src/modules/timesheets/types/timesheet-shift-interface.ts

@@ -1,9 +1,24 @@
+export interface CreateShiftPayload  {
+    date: string;
+    type: string;
+    start_time: string;
+    end_time: string;
+    description?: string;
+    is_remote?: boolean;
+};
+
+export interface CreateWeekShiftPayload  {
+    shifts: CreateShiftPayload[];
+}
+
 export interface Shift {
     date       : string;
+    type       : string;
     start_time : string;
     end_time   : string;
-    type        : string;
+    comment    : string;
-    is_approved : boolean;
+    is_approved: boolean;
+    is_remote  : boolean;
 }
 
 export const default_shift: Shift = {
@@ -11,5 +26,7 @@ export const default_shift: Shift = {
     start_time: '--:--',
     end_time: '--:--',
     type: '',
+    comment: '',
     is_approved: false,
+    is_remote: false,
 }

src/router/router-constants.ts

@@ -6,4 +6,5 @@ export enum RouteNames {
     TIMESHEET_APPROVALS = 'timesheet-approvals',
     EMPLOYEE_LIST = 'employee-list',
     PROFILE = 'user/profile',
+    TIMESHEET_TEMP = 'timesheet-temp'
 }

src/router/routes.ts

@@ -22,6 +22,11 @@ const routes: RouteRecordRaw[] = [
         name: RouteNames.EMPLOYEE_LIST,
         component: () => import('src/modules/employee-list/pages/supervisor-crew-page.vue'),
       },
+      {
+        path: 'timesheet-temp',
+        name: RouteNames.TIMESHEET_TEMP,
+        component: () => import('src/modules/timesheets/pages/timesheet-temp-page.vue')
+      }
     ],
   },
 

src/stores/timesheet-store.ts

@@ -1,10 +1,13 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/services-timesheet-approval';
+import { timesheetTempService } from 'src/modules/timesheets/services/timesheet-services';
 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 { default_pay_period_employee_details, type PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-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 type { CreateShiftPayload } from 'src/modules/timesheets/types/timesheet-shift-interface';
 
 const default_pay_period: PayPeriod = { 
     pay_period_no: -1,
@@ -15,6 +18,16 @@ const default_pay_period: PayPeriod = {
     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 current_pay_period = ref<PayPeriod>(default_pay_period);
@@ -23,6 +36,9 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     const pay_period_employee_details = ref<PayPeriodEmployeeDetails>(default_pay_period_employee_details);
     const pay_period_report = ref();
 
+    //employee timesheet
+    const current_timesheet = ref<Timesheet>(default_timesheet);
+
     const getPayPeriodByDate = async (date_string: string): Promise<boolean> => {
         is_loading.value = true;
 
@@ -85,6 +101,32 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         is_loading.value = false;
     };
 
+    //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;
+        }
+    };
+
     const getTimesheetsByPayPeriodAndEmail = async (employee_email: string) => {
         is_loading.value = true;
 
@@ -126,8 +168,11 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         pay_period_overview_employees,
         pay_period_overview_employee_approval_statuses,
         pay_period_employee_details,
+        current_timesheet,
         is_loading,
         getPayPeriodByDate,
+        getTimesheetByEmail,
+        createTimesheetShifts,
         getPayPeriodByYearAndPeriodNumber,
         getTimesheetApprovalPayPeriodEmployeeOverviews,
         getTimesheetsByPayPeriodAndEmail,