From a07086fa2ecdaa266b3554536f3b9fd72a4e8748 Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Thu, 18 Dec 2025 11:00:31 -0500
Subject: [PATCH 1/6] feat(timesheet-approval): add filter template, working on
 filling. Merging with other changes on main.

---
 .../components/overview-list-filters.vue      | 12 ++++
 .../components/overview-list.vue              |  5 +-
 src/pages/timesheet-approval-page.vue         | 59 ++++++++++++++-----
 3 files changed, 56 insertions(+), 20 deletions(-)
 create mode 100644 src/modules/timesheet-approval/components/overview-list-filters.vue

diff --git a/src/modules/timesheet-approval/components/overview-list-filters.vue b/src/modules/timesheet-approval/components/overview-list-filters.vue
new file mode 100644
index 0000000..46728a4
--- /dev/null
+++ b/src/modules/timesheet-approval/components/overview-list-filters.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="column bg-accent q-pa-sm">
+        <span class="col">test</span>
+        <span class="col">test</span>
+        <span class="col">test</span>
+        <span class="col">test</span>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/overview-list.vue b/src/modules/timesheet-approval/components/overview-list.vue
index 46153d8..848c2ef 100644
--- a/src/modules/timesheet-approval/components/overview-list.vue
+++ b/src/modules/timesheet-approval/components/overview-list.vue
@@ -26,10 +26,7 @@
         overview_column_names.IS_APPROVED,
     ]);
 
-    const overview_rows = computed(() => timesheet_store.pay_period_overviews[0]?.regular_hours === -1 ?
-        [] :
-        timesheet_store.pay_period_overviews
-    )
+    const overview_rows = computed(() => timesheet_store.pay_period_overviews.filter(overview => overview))
 
     const onClickedDetails = async (row: TimesheetOverview) => {
         timesheet_store.current_pay_period_overview = row;
diff --git a/src/pages/timesheet-approval-page.vue b/src/pages/timesheet-approval-page.vue
index 562a618..a4c60b4 100644
--- a/src/pages/timesheet-approval-page.vue
+++ b/src/pages/timesheet-approval-page.vue
@@ -3,19 +3,23 @@
     lang="ts"
 >
     /* eslint-disable */
-    import { onMounted, ref } from 'vue';
-    import { date } from 'quasar';
-    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
     import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
     import OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
     import DetailsDialog from 'src/modules/timesheet-approval/components/details-dialog.vue';
     import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
     import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
+    import OverviewListFilters from 'src/modules/timesheet-approval/components/overview-list-filters.vue';
+
+    import { date } from 'quasar';
+    import { onMounted, ref } from 'vue';
+    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
 
     const timesheet_approval_api = useTimesheetApprovalApi();
     const timesheet_store = useTimesheetStore();
 
+    const is_showing_filters = ref(false);
+
     onMounted(async () => {
         await timesheet_approval_api.getTimesheetOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
     });
@@ -40,14 +44,15 @@
         />
 
         <div
-            class="col-auto full-width q-px-lg"
-            :class="($q.screen.lt.md ? 'column flex-center' : 'row') + (timesheet_store.is_approval_grid_mode ? ' q-mb-sm' : ' q-mb-md')"
+            class="col-auto row items-start full-width q-px-lg"
+            :class="($q.platform.is.mobile ? 'column flex-center' : 'row q-mt-md') + (timesheet_store.is_approval_grid_mode ? '' : ' q-mb-md')"
         >
             <PayPeriodNavigator
                 @date-selected="timesheet_approval_api.getTimesheetOverviews"
                 @pressed-next-button="timesheet_approval_api.getTimesheetOverviews"
                 @pressed-previous-button="timesheet_approval_api.getTimesheetOverviews"
-                :class="$q.screen.lt.md ? 'q-mb-sm' : ''"
+                :class="$q.platform.is.mobile ? 'q-mb-sm' : ''"
+                style="height: 40px;"
             />
 
             <q-space />
@@ -59,27 +64,49 @@
                 color="white"
                 text-color="accent"
                 toggle-color="accent"
-                :class="$q.screen.lt.md ? 'q-mb-sm' : 'q-mr-md'"
+                class="col-auto"
+                :class="$q.platform.is.mobile ? 'q-mb-sm' : 'q-mr-md'"
                 :options="[
                     { icon: 'grid_view', value: true },
                     { icon: 'view_list', value: false },
                 ]"
+                style="height: 40px;"
             />
 
-            <div class="col-auto row no-wrap flex-center" :class="$q.screen.lt.md  ? 'q-mb-md' : ''">
-                <q-btn-dropdown
-                    push
-                    rounded
+            <div
+                class="col-auto row no-wrap items-start"
+                :class="$q.platform.is.mobile ? 'q-mb-md' : ''"
+            >
+                <q-btn
+                    flat
                     icon="filter_alt"
-                    color="accent"
-                    :label="$q.screen.lt.md ? '' : $t('shared.label.filter')"
-                    class="col-auto q-mr-sm"
+                    color="white"
+                    :label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
+                    class="col q-mr-sm self-stretch bg-accent"
+                    style="border-radius: 10px 10px 0 0;"
+                    @click="is_showing_filters = !is_showing_filters"
                 />
 
-                <QTableFilters v-model:search="timesheet_store.search_filter" />
+                <QTableFilters
+                    v-model:search="timesheet_store.search_filter"
+                    class="col-auto q-mb-xs"
+                />
             </div>
         </div>
 
+        <q-slide-transition>
+            <OverviewListFilters
+                v-if="is_showing_filters"
+                class="q-mx-lg"
+            />
+        </q-slide-transition>
+
+        <q-separator
+            color="accent"
+            size="4px"
+            class="q-mx-lg"
+        />
+
         <OverviewList class="col" />
     </q-page>
 </template>
\ No newline at end of file

From 4231b51c11a2bfd4baf8cc9574fc66da83f968df Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Thu, 18 Dec 2025 17:14:31 -0500
Subject: [PATCH 2/6] refactor(timesheet): More UI/UX adjustments to timesheet
 approval filters, mostly work on timesheets UI/UX for mobile

---
 src/i18n/en-ca/index.ts                       |  22 +-
 src/i18n/fr-ca/index.ts                       |  22 +-
 .../components/main-layout-header-bar.vue     |   4 +-
 src/layouts/main-layout.vue                   |  11 +-
 .../components/employee/menu-employee.vue     |   2 +-
 .../shared/menu-panel-preferences.vue         |  15 +-
 .../components/shared/menu-template.vue       |   8 +-
 .../components/overview-list-filters.vue      |  37 ++-
 .../mobile/shift-list-day-row-mobile.vue      | 295 ++++++++++++++++++
 .../components/shift-list-day-row.vue         |  14 +-
 .../timesheets/components/shift-list-day.vue  |  31 +-
 .../timesheets/components/shift-list.vue      | 101 +++---
 .../components/timesheet-wrapper.vue          | 119 +++++--
 src/modules/timesheets/utils/shift.util.ts    |  12 +-
 src/pages/profile-page.vue                    |   3 +-
 src/pages/timesheet-approval-page.vue         |  58 ++--
 src/pages/timesheet-page.vue                  |   2 +-
 src/stores/ui-store.ts                        |   8 +-
 18 files changed, 576 insertions(+), 188 deletions(-)
 create mode 100644 src/modules/timesheets/components/mobile/shift-list-day-row-mobile.vue

diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index b7c97ea..c02d48e 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -176,6 +176,10 @@ export default {
 
     timesheet: {
         page_header: "Timesheet",
+        week: "week",
+        total_hours: "total hours: ",
+        current_shifts: "shifts worked",
+        apply_preset: "auto-fill",
         apply_preset_day: "Apply schedule to day",
         apply_preset_week: "Apply schedule to week",
         nav_button: {
@@ -254,15 +258,6 @@ export default {
 
     timesheet_approvals: {
         page_title: "Validation cartes de temps",
-        table: {
-            full_name: "full name",
-            email: "email address",
-            is_approved: "approval",
-            expenses: "expenses",
-            mileage: "mileage",
-            verified: "approved",
-            unverified: "pending",
-        },
         chart: {
             hours_worked_title: "hours worked",
             expenses_title: "expenses accrued",
@@ -275,6 +270,15 @@ export default {
             expenses: "expenses",
             options: "options",
         },
+        table: {
+            full_name: "full name",
+            email: "email address",
+            is_approved: "approval",
+            expenses: "expenses",
+            mileage: "mileage",
+            verified: "approved",
+            unverified: "pending",
+        },
         tooltip: {
             button_detailed_view: "detailed view",
         },
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index ed464e9..e402331 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -177,6 +177,10 @@ export default {
 
     timesheet: {
         page_header: "Carte de temps",
+        week: "semaine",
+        total_hours: "heures totales: ",
+        current_shifts: "quarts entrées",
+        apply_preset: "auto-remplir",
         apply_preset_day: "Appliquer horaire pour la journée",
         apply_preset_week: "Appliquer horaire pour la semaine",
         nav_button: {
@@ -255,15 +259,6 @@ export default {
 
     timesheet_approvals: {
         page_title: "Validation cartes de temps",
-        table: {
-            full_name: "nom complet",
-            email: "courriel",
-            is_approved: "approuvé",
-            expenses: "dépenses",
-            mileage: "kilométrage",
-            verified: "approuvé",
-            unverified: "à vérifier",
-        },
         chart: {
             hours_worked_title: "heures travaillées",
             expenses_title: "dépenses encourues"
@@ -276,6 +271,15 @@ export default {
             expenses: "dépenses",
             options: "options",
         },
+        table: {
+            full_name: "nom complet",
+            email: "courriel",
+            is_approved: "approuvé",
+            expenses: "dépenses",
+            mileage: "kilométrage",
+            verified: "approuvé",
+            unverified: "à vérifier",
+        },
         tooltip: {
             button_detailed_view: "vue détaillée",
         },
diff --git a/src/layouts/components/main-layout-header-bar.vue b/src/layouts/components/main-layout-header-bar.vue
index 0d4beb8..31d67da 100644
--- a/src/layouts/components/main-layout-header-bar.vue
+++ b/src/layouts/components/main-layout-header-bar.vue
@@ -3,7 +3,7 @@
     setup
 >
     import { useUiStore } from 'src/stores/ui-store';
-    import HeaderBarNotification from './main-layout-header-bar-notification.vue';
+    // import HeaderBarNotification from './main-layout-header-bar-notification.vue';
 
     const uiStore = useUiStore();
 </script>
@@ -29,7 +29,7 @@
                 </q-btn>
             </q-toolbar-title>
             <q-item class="q-pa-none">
-                <HeaderBarNotification />
+                <!-- <HeaderBarNotification /> -->
             </q-item>
         </q-toolbar>
     </q-header>
diff --git a/src/layouts/main-layout.vue b/src/layouts/main-layout.vue
index 97163be..6c730c9 100644
--- a/src/layouts/main-layout.vue
+++ b/src/layouts/main-layout.vue
@@ -2,16 +2,15 @@
     lang="ts"
     setup
 >
-    import { RouterView } from 'vue-router';
     import HeaderBar from 'src/layouts/components/main-layout-header-bar.vue';
     import FooterBar from 'src/layouts/components/main-layout-footer-bar.vue';
     import LeftDrawer from 'src/layouts/components/main-layout-left-drawer.vue';
-    import { useUiStore } from 'src/stores/ui-store';
+    
     import { onMounted, watch, ref } from 'vue';
-    import { useI18n } from 'vue-i18n';
-
-    const { t } = useI18n();
+    import { RouterView } from 'vue-router';
+    import { useUiStore } from 'src/stores/ui-store';
 
+    
     const ui_store = useUiStore();
     const user_preferences = ref(ui_store.user_preferences);
     
@@ -23,7 +22,7 @@
 
     watch(user_preferences, async () => {
         if (ui_store.user_preferences.id !== -1) {
-            await ui_store.updateUserPreferences(t);
+            await ui_store.updateUserPreferences();
             return
         }
         await ui_store.getUserPreferences();
diff --git a/src/modules/profile/components/employee/menu-employee.vue b/src/modules/profile/components/employee/menu-employee.vue
index 1637ee1..7d666ba 100644
--- a/src/modules/profile/components/employee/menu-employee.vue
+++ b/src/modules/profile/components/employee/menu-employee.vue
@@ -25,7 +25,7 @@
     <div>
         <q-card
             flat
-            class="rounded-5 bg-transparent q-pa-none"
+            class="rounded-5 bg-transparent q-pa-none fit"
         >
             <MenuTemplate
                 :first-name="employee_profile.first_name === '' ? auth_store.user?.first_name ?? '' : employee_profile.first_name"
diff --git a/src/modules/profile/components/shared/menu-panel-preferences.vue b/src/modules/profile/components/shared/menu-panel-preferences.vue
index 7087a15..2bb437b 100644
--- a/src/modules/profile/components/shared/menu-panel-preferences.vue
+++ b/src/modules/profile/components/shared/menu-panel-preferences.vue
@@ -11,18 +11,15 @@
 </script>
 
 <template>
-    <div class="q-pa-md column fit">
-        <div
-            class="col-auto"
-            style="transform: translate(10px, 12px);"
-        >
+    <div class="q-px-md column no-wrap">
+        <div style="transform: translate(10px, 12px);">
             <span class="text-uppercase text-weight-bold text-accent bg-dark q-px-sm">
                 {{ $t('profile.preferences.display_options') }}
             </span>
         </div>
 
         <div
-            class="col-auto justify-center content-center q-mb-sm q-pa-sm rounded-5"
+            class="col-auto justify-center content-center q-mb-sm q-pa-md rounded-5"
             :class="ui_store.is_mobile_mode ? 'column' : 'row'"
             style="border: 1px solid var(--q-accent);"
         >
@@ -32,12 +29,12 @@
                 clickable
                 dense
                 v-ripple
-                class="col rounded-5 q-ma-sm shadow-4"
-                :class="mode.quasar_value === $q.dark.mode ? 'bg-accent text-white text-weight-bolder' : ''"
+                class="col row rounded-5 q-ma-sm shadow-4"
+                :class="(mode.quasar_value === $q.dark.mode ? 'bg-accent text-white text-weight-bolder' : '') + ($q.platform.is.mobile ? ' full-width q-py-xs' : '')"
                 @click="ui_store.user_preferences.is_dark_mode = mode.value"
             >
                 <q-item-section avatar>
-                    <q-icon 
+                    <q-icon
                         :name="mode.icon"
                         size="md"
                         :color="mode.quasar_value === $q.dark.mode ? 'white' : ''"
diff --git a/src/modules/profile/components/shared/menu-template.vue b/src/modules/profile/components/shared/menu-template.vue
index aa93200..6f3a1ad 100644
--- a/src/modules/profile/components/shared/menu-template.vue
+++ b/src/modules/profile/components/shared/menu-template.vue
@@ -16,7 +16,7 @@
 
 <template>
     <div
-        class="column flex-center"
+        class="column flex-center fit"
     >
         <MenuHeader
             :user-first-name="firstName"
@@ -41,7 +41,7 @@
     
             <q-card
                 class="col"
-                :class="$q.screen.lt.sm ? 'full-width' : 'q-ml-sm'"
+                :class="$q.platform.is.mobile ? 'fit' : 'q-ml-sm'"
             >
                 <q-tab-panels
                     v-model="current_menu"
@@ -49,8 +49,8 @@
                     vertical
                     transition-prev="jump-up"
                     transition-next="jump-up"
-                    class="rounded-5"
-                    style="height: 50vh;"
+                    class="rounded-5 q-py-sm"
+                    :style="$q.platform.is.mobile ? '' : 'height: 50vh;'"
                 >
                     <slot name="panels"></slot>
                 </q-tab-panels>
diff --git a/src/modules/timesheet-approval/components/overview-list-filters.vue b/src/modules/timesheet-approval/components/overview-list-filters.vue
index 46728a4..41ebeee 100644
--- a/src/modules/timesheet-approval/components/overview-list-filters.vue
+++ b/src/modules/timesheet-approval/components/overview-list-filters.vue
@@ -1,12 +1,37 @@
-<script setup lang="ts">
+<script
+    setup
+    lang="ts"
+>
+import { ref } from 'vue';
 
+    const boolean_filters = ref([])
 </script>
 
 <template>
-    <div class="column bg-accent q-pa-sm">
-        <span class="col">test</span>
-        <span class="col">test</span>
-        <span class="col">test</span>
-        <span class="col">test</span>
+    <div class="column text-weight-medium">
+        <q-separator
+            color="accent"
+            size="5px"
+            class="col-auto"
+        />
+
+        <div class="col row">
+            <q-checkbox
+                v-model="boolean_filters"
+                size="lg"
+                val="inactive"
+                color="accent"
+                label="show inactive"
+                class="col"
+            />
+            <q-checkbox
+                v-model="boolean_filters"
+                size="lg"
+                val="team"
+                color="accent"
+                label="show team only"
+                class="col"
+            />
+        </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/mobile/shift-list-day-row-mobile.vue b/src/modules/timesheets/components/mobile/shift-list-day-row-mobile.vue
new file mode 100644
index 0000000..50039d6
--- /dev/null
+++ b/src/modules/timesheets/components/mobile/shift-list-day-row-mobile.vue
@@ -0,0 +1,295 @@
+<script
+    setup
+    lang="ts"
+>
+    import { computed, onMounted, ref } from 'vue';
+    import { QSelect, QInput } from 'quasar';
+    import { useUiStore } from 'src/stores/ui-store';
+    import { SHIFT_OPTIONS } from 'src/modules/timesheets/utils/shift.util';
+    import type { Shift } from 'src/modules/timesheets/models/shift.models';
+
+    const ui_store = useUiStore();
+
+    const COMMENT_LENGTH_MAX = 280;
+
+    const shift = defineModel<Shift>('shift', { required: true });
+    const shift_type_selected = ref(SHIFT_OPTIONS.find(option => option.value == shift.value.type));
+    const select_ref = ref<QSelect | null>(null);
+    const is_showing_comment_popup = ref(false);
+    const comment_length = computed(() => shift.value.comment?.length ?? 0);
+
+    const { dense = false, hasShiftAfter = false, isTimesheetApproved = false } = defineProps<{
+        dense?: boolean;
+        hasShiftAfter?: boolean;
+        isTimesheetApproved?: boolean;
+    }>();
+
+    const emit = defineEmits<{
+        'requestDelete': [void];
+        'onTimeFieldBlur': [void];
+    }>();
+
+    const onBlurShiftTypeSelect = () => {
+        if (shift_type_selected.value === undefined) {
+            shift.value.type = 'REGULAR';
+            shift.value.id = 0;
+            emit('requestDelete');
+        }
+    };
+
+    const getCommentCounterColor = (comment_length: number) => {
+        if (comment_length < 200) return 'primary';
+        if (comment_length < 250) return 'warning';
+        return 'negative';
+    };
+
+    onMounted(() => {
+        if (ui_store.focus_next_component) {
+            select_ref.value?.focus();
+            select_ref.value?.showPopup();
+            shift_type_selected.value = undefined;
+            ui_store.focus_next_component = false;
+        }
+    });
+</script>
+
+<template>
+    <div class="row q-px-xs">
+        <div class="col column">
+            <div class="col row items-center text-uppercase q-px-xs rounded-5">
+                <!-- comment button -->
+                <q-btn
+                    v-if="ui_store.is_mobile_mode && !dense"
+                    :icon="shift.comment ? 'chat' : 'chat_bubble_outline'"
+                    :text-color="shift.comment ? ((shift.is_approved && isTimesheetApproved) ? 'white' : 'accent') : 'grey-5'"
+                    class="col-auto full-height q-mx-xs rounded-5 shadow-1"
+                    @click="is_showing_comment_popup = true"
+                >
+                    <q-dialog v-model="is_showing_comment_popup">
+                        <q-input
+                            color="white"
+                            v-model="shift.comment"
+                            dense
+                            :readonly="(shift.is_approved || isTimesheetApproved)"
+                            autofocus
+                            counter
+                            bottom-slots
+                            stack-label
+                            :label="$t('timesheet.shift.fields.header_comment')"
+                            :maxlength="COMMENT_LENGTH_MAX"
+                            :class="(shift.is_approved || isTimesheetApproved) ? 'cursor-not-allowed' : ''"
+                        >
+                            <template #append>
+                                <q-icon name="edit" />
+                            </template>
+
+                            <template #counter>
+                                <div class="row flex-center">
+                                    <q-space />
+                                    <q-knob
+                                        v-model="comment_length"
+                                        readonly
+                                        :max="COMMENT_LENGTH_MAX"
+                                        size="1.6em"
+                                        :thickness="0.4"
+                                        :color="getCommentCounterColor(comment_length)"
+                                        track-color="grey-4"
+                                        class="col-auto q-mr-xs"
+                                    />
+                                    <span
+                                        :class="'col-auto text-weight-bolder text-' + getCommentCounterColor(comment_length)"
+                                    >{{ 280 - comment_length }}</span>
+                                </div>
+                            </template>
+                        </q-input>
+                    </q-dialog>
+                </q-btn>
+
+                <!-- shift type -->
+                <q-select
+                    ref="select"
+                    v-model="shift_type_selected"
+                    :standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
+                    dense
+                    :borderless="(shift.is_approved && isTimesheetApproved)"
+                    :readonly="(shift.is_approved && isTimesheetApproved)"
+                    options-dense
+                    hide-dropdown-icon
+                    :menu-offset="[0, 10]"
+                    menu-anchor="bottom middle"
+                    menu-self="top middle"
+                    :options="SHIFT_OPTIONS"
+                    class="col rounded-5 bg-dark"
+                    :class="!shift.is_approved && !isTimesheetApproved ? '' : 'inset-shadow'"
+                    popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
+                    :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
+                    popup-content-style="border: 2px solid var(--q-accent)"
+                    @blur="onBlurShiftTypeSelect"
+                    @update:model-value="option => shift.type = option.value"
+                >
+                    <template #selected-item="scope">
+                        <div
+                            class="row items-center text-weight-bold q-ma-none q-pa-none no-wrap ellipsis full-width"
+                            :class="ui_store.is_mobile_mode ? 'full-height' : ''"
+                            :tabindex="scope.tabindex"
+                        >
+                            <q-icon
+                                :name="scope.opt.icon"
+                                :color="scope.opt.icon_color"
+                                size="sm"
+                                class="col-auto"
+                                :class="shift.is_approved ? 'q-mx-xs' : 'q-mr-xs'"
+                            />
+                            <span
+                                style="line-height: 1.2em;"
+                                class="col-auto ellipsis"
+                                :class="!shift.is_approved ? '' : 'text-white'"
+                            >
+                                {{ $t(scope.opt.label) }}
+                            </span>
+                        </div>
+                    </template>
+
+                    <template #after>
+                        <q-icon
+                            v-if="shift.is_approved"
+                            :name="shift.is_remote ? 'las la-laptop' : 'las la-building'"
+                            size="1.2em"
+                            color="white"
+                            class="q-mr-sm"
+                        >
+                            <q-tooltip
+                                anchor="top middle"
+                                self="bottom middle"
+                                :offset="[0, 10]"
+                                class="text-uppercase text-weight-bold text-white bg-primary"
+                            >
+                                {{ shift.is_remote ? $t('timesheet.shift.types.REMOTE') :
+                                    $t('timesheet.shift.types.OFFICE') }}
+                            </q-tooltip>
+                        </q-icon>
+
+                        <q-toggle
+                            v-else
+                            v-model="shift.is_remote"
+                            :disable="shift.is_approved"
+                            dense
+                            keep-color
+                            size="3em"
+                            color="accent"
+                            icon="las la-building"
+                            checked-icon="las la-laptop"
+                        >
+                            <q-tooltip
+                                anchor="top middle"
+                                self="bottom middle"
+                                :offset="[0, 10]"
+                                class="text-uppercase text-weight-medium text-white bg-accent"
+                            >
+                                {{ shift.is_remote ? $t('timesheet.shift.types.REMOTE') :
+                                    $t('timesheet.shift.types.OFFICE') }}
+                            </q-tooltip>
+                        </q-toggle>
+                    </template>
+                </q-select>
+            </div>
+
+            <div class="col row items-start text-uppercase rounded-5 q-pa-xs">
+                <!-- punch in field -->
+                <div class="col q-pr-xs">
+                    <q-input
+                        v-model="shift.start_time"
+                        dense
+                        :borderless="(shift.is_approved && isTimesheetApproved)"
+                        :readonly="(shift.is_approved && isTimesheetApproved)"
+                        type="time"
+                        :standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
+                        label-slot
+                        lazy-rules
+                        no-error-icon
+                        hide-bottom-space
+                        :label-color="!shift.is_approved ? 'accent' : 'white'"
+                        class="rounded-5 bg-dark"
+                        :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (!shift.is_approved && !isTimesheetApproved ? '' : 'cursor-not-allowed inset-shadow')"
+                        :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
+                        input-style="font-size: 1.2em;"
+                        :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
+                        @blur="emit('onTimeFieldBlur')"
+                    >
+                        <template #label>
+                            <span
+                                class="text-weight-bolder"
+                                :class="shift.is_approved ? ' q-ml-md' : ''"
+                                style="font-size: 0.95em;"
+                            >{{ $t('shared.misc.in') }}</span>
+                        </template>
+                    </q-input>
+
+                </div>
+
+                <!-- punch out field -->
+                <div class="col">
+                    <q-input
+                        v-model="shift.end_time"
+                        standout
+                        dense
+                        :borderless="(shift.is_approved && isTimesheetApproved)"
+                        :readonly="(shift.is_approved && isTimesheetApproved)"
+                        type="time"
+                        label-slot
+                        no-error-icon
+                        hide-bottom-space
+                        :label-color="!shift.is_approved ? 'accent' : 'white'"
+                        :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
+                        input-style="font-size: 1.2em;"
+                        class="rounded-5 bg-dark"
+                        :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (shift.is_approved ? 'cursor-not-allowed q-px-xs transparent inset-shadow' : (isTimesheetApproved ? 'inset-shadow' : ''))"
+                        :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
+                        @blur="emit('onTimeFieldBlur')"
+                    >
+                        <template #label>
+                            <span
+                                class="text-weight-bolder"
+                                :class="shift.is_approved ? ' q-ml-md' : ''"
+                                style="font-size: 0.95em;"
+                            >{{ $t('shared.misc.out') }}</span>
+                        </template>
+                    </q-input>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-auto">
+            <q-btn
+                v-if="!shift.is_approved"
+                flat
+                dense
+                color="negative"
+                icon="las la-trash"
+                size="lg"
+                class="full-height"
+                @click="$emit('requestDelete')"
+            />
+        </div>
+
+        <q-separator
+            v-if="hasShiftAfter"
+            spaced
+            class="q-mx-md col-12"
+        />
+    </div>
+</template>
+
+<style scoped>
+:deep(.q-field--error) {
+    background-color: var(--q-negative) !important;
+}
+
+:deep(.q-field--error .q-field__bottom) {
+    color: white;
+    font-weight: 900;
+    border-radius: 0 0 5px 5px;
+    padding-top: 0;
+    align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/shift-list-day-row.vue b/src/modules/timesheets/components/shift-list-day-row.vue
index 3ad6c58..d304130 100644
--- a/src/modules/timesheets/components/shift-list-day-row.vue
+++ b/src/modules/timesheets/components/shift-list-day-row.vue
@@ -3,12 +3,12 @@
     lang="ts"
 >
     /* eslint-disable*/
-    import { onBeforeUnmount, onMounted, ref, useTemplateRef, watch, nextTick } from 'vue';
+    import { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
     import { useI18n } from 'vue-i18n';
     import { QSelect, QInput } from 'quasar';
-    import { Shift, type ShiftOption } from 'src/modules/timesheets/models/shift.models';
+    import { Shift } from 'src/modules/timesheets/models/shift.models';
     import { useUiStore } from 'src/stores/ui-store';
-    import { useShiftRules, SHIFT_OPTIONS } from 'src/modules/timesheets/utils/shift.util';
+    import { SHIFT_OPTIONS } from 'src/modules/timesheets/utils/shift.util';
 
     let timer: NodeJS.Timeout;
     const { t } = useI18n();
@@ -22,15 +22,12 @@
     const start_time_ref = useTemplateRef<QInput>('start_time');
     const end_time_ref = useTemplateRef<QInput>('end_time');
 
-    const { dayShifts = [], dense = false, hasShiftAfter = false, isTimesheetApproved = false } = defineProps<{
-        dayShifts: Shift[];
+    const { dense = false, hasShiftAfter = false, isTimesheetApproved = false } = defineProps<{
         dense?: boolean;
         hasShiftAfter?: boolean;
         isTimesheetApproved?: boolean;
     }>();
 
-    const shift_rules = useShiftRules(t('timesheet.errors.SHIFT_TIME_REQUIRED'), t('timesheet.errors.SHIFT_OVERLAP_SHORT'), dayShifts);
-
     const emit = defineEmits<{
         'saveComment': [comment: string, shift_id: number];
         'requestDelete': [void];
@@ -251,7 +248,6 @@
                     lazy-rules
                     no-error-icon
                     hide-bottom-space
-                    :rules="[shift_rules.isTimeRequiredRule, shift_rules.isShiftOverlapRule]"
                     :label-color="!shift.is_approved ? 'accent' : 'white'"
                     class="col rounded-5 bg-dark"
                     :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + (!shift.is_approved && !isTimesheetApproved ? '' : 'cursor-not-allowed inset-shadow')"
@@ -279,10 +275,8 @@
                     :readonly="(shift.is_approved && isTimesheetApproved)"
                     type="time"
                     label-slot
-                    lazy-rules
                     no-error-icon
                     hide-bottom-space
-                    :rules="[shift_rules.isTimeRequiredRule, shift_rules.isShiftOverlapRule]"
                     :label-color="!shift.is_approved ? 'accent' : 'white'"
                     :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
                     input-style="font-size: 1.2em;"
diff --git a/src/modules/timesheets/components/shift-list-day.vue b/src/modules/timesheets/components/shift-list-day.vue
index a4c8509..ea3b9ae 100644
--- a/src/modules/timesheets/components/shift-list-day.vue
+++ b/src/modules/timesheets/components/shift-list-day.vue
@@ -3,6 +3,7 @@
     lang="ts"
 >
     import ShiftListDayRow from 'src/modules/timesheets/components/shift-list-day-row.vue';
+    import ShiftListDayRowMobile from 'src/modules/timesheets/components/mobile/shift-list-day-row-mobile.vue';
 
     import { ref } from 'vue';
     import { useShiftApi } from 'src/modules/timesheets/composables/use-shift-api';
@@ -69,15 +70,29 @@
             </q-btn>
         </transition>
 
-        <ShiftListDayRow
+        <div
             v-for="shift, shift_index in day.shifts"
             :key="shift_index"
-            v-model:shift="day.shifts[shift_index]!"
-            :day-shifts="day.shifts"
-            :is-timesheet-approved="approved"
-            :dense="dense"
-            :has-shift-after="shift_index < day.shifts.length - 1"
-            @request-delete="deleteCurrentShift(shift)"
-        />
+            class="col"
+        >
+            <ShiftListDayRowMobile 
+                v-if="$q.platform.is.mobile"
+                v-model:shift="day.shifts[shift_index]!"
+                :is-timesheet-approved="approved"
+                :dense="dense"
+                :has-shift-after="shift_index < day.shifts.length - 1"
+                @request-delete="deleteCurrentShift(shift)"
+            />
+
+            <ShiftListDayRow
+                v-else
+                v-model:shift="day.shifts[shift_index]!"
+                :is-timesheet-approved="approved"
+                :dense="dense"
+                :has-shift-after="shift_index < day.shifts.length - 1"
+                @request-delete="deleteCurrentShift(shift)"
+            />
+
+        </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/shift-list.vue b/src/modules/timesheets/components/shift-list.vue
index 329ebca..cf06e4b 100644
--- a/src/modules/timesheets/components/shift-list.vue
+++ b/src/modules/timesheets/components/shift-list.vue
@@ -47,20 +47,24 @@
         return day.shifts.every(shift => shift.is_approved === true);
     }
 
-    const handleSwipe = async (direction: 'left' | 'up' | 'down' | 'right' | undefined, distance: {x?: number, y?: number}) => {
+    const handleSwipe = async (direction: 'left' | 'up' | 'down' | 'right' | undefined, distance: { x?: number, y?: number }) => {
         mobile_animation_direction.value = direction === 'left' ? 'fadeInRight' : 'fadeInLeft';
-        if (distance.x && Math.abs(distance.x) > 10 ) {
-            await timesheet_api.getTimesheetsBySwiping( direction === 'left' ? 1 : -1 )
+        if (distance.x && Math.abs(distance.x) > 10) {
+            await timesheet_api.getTimesheetsBySwiping(direction === 'left' ? 1 : -1)
         }
     }   
 </script>
 
 <template>
-    <div class="col column fit relative-position" v-touch-swipe="value => handleSwipe(value.direction, value.distance ?? {x: 0, y: 0})">
+    <div
+        class="col column fit relative-position"
+        :style="$q.platform.is.mobile ? 'margin-bottom: 40px' : ''"
+        v-touch-swipe="value => handleSwipe(value.direction, value.distance ?? { x: 0, y: 0 })"
+    >
         <q-scroll-area
             ref="timesheet_page"
             :horizontal-offset="[0, 3]"
-            class="absolute-full hide-scrollbar q-mt-sm"
+            class="absolute-full hide-scrollbar"
             :thumb-style="{ opacity: '0' }"
             :bar-style="{ opacity: '0' }"
             style="min-height: 50vh;"
@@ -123,21 +127,20 @@
                         <div
                             v-for="day, day_index in timesheet.days"
                             :key="day.date"
-                            class="col-auto row rounded-10 q-ma-sm shadow-10"
+                            class="col-auto row q-ma-sm"
                             :style="`animation-delay: ${day_index / 15}s;`"
                         >
                             <div
                                 v-if="$q.platform.is.mobile && ($q.screen.width < $q.screen.height)"
-                                class="col column full-width"
+                                class="col column full-width q-px-md q-py-sm"
                             >
                                 <q-card
-                                    class="rounded-10"
+                                    class="rounded-5 shadow-12"
                                     :class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-accent' : 'bg-dark'"
-                                    :style="ui_store.is_mobile_mode ? ((getDayApproval(day) || timesheet.is_approved) ? 'border: 6px inset var(--q-accent)' : 'border: 1px solid var(--q-accent);') : ''"
                                 >
 
                                     <q-card-section
-                                        class="text-weight-bolder text-uppercase text-h6 q-py-xs"
+                                        class="text-weight-bolder text-uppercase text-h6 q-py-sm text-center relative-position"
                                         :class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-accent text-white' : 'bg-primary text-white'"
                                         style="line-height: 1em;"
                                     >
@@ -145,6 +148,15 @@
                                             weekday: 'long', day: 'numeric', month:
                                                 'long'
                                         }) }}</span>
+
+                                        <q-icon
+                                            v-if="(getDayApproval(day) || timesheet.is_approved)"
+                                            name="verified"
+                                            size="3em"
+                                            color="white"
+                                            class="absolute-top-left z-top"
+                                            style="top: -0.2em; left: 0px;"
+                                        />
                                     </q-card-section>
 
                                     <q-card-section
@@ -166,26 +178,14 @@
                                         <q-btn
                                             v-if="!(getDayApproval(day) || timesheet.is_approved)"
                                             square
+                                            dense
+                                            size="xl"
                                             color="accent"
                                             icon="more_time"
                                             class="full-width"
-                                            style="border-radius: 0 0 5px 5px;"
                                             @click="addNewShift(day.shifts, day.date, timesheet.timesheet_id)"
                                         />
                                     </q-card-actions>
-
-                                    <q-badge
-                                        v-if="(getDayApproval(day) || timesheet.is_approved)"
-                                        floating
-                                        class="transparent q-pa-none rounded-50"
-                                        style="transform: translate(15px, -5px);"
-                                    >
-                                        <q-icon
-                                            name="verified"
-                                            size="5em"
-                                            color="white"
-                                        />
-                                    </q-badge>
                                 </q-card>
                             </div>
 
@@ -194,13 +194,6 @@
                                 class="col row full-width"
                                 :class="(getDayApproval(day) || timesheet.is_approved) ? 'rounded-10 bg-accent' : ''"
                             >
-                                <transition
-                                    appear
-                                    enter-active-class="animated fadeInDown"
-                                    leave-active-class="animated fadeOutUp"
-                                >
-                                </transition>
-                                <!-- List of shifts -->
                                 <div
                                     class="col row bg-dark"
                                     :class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-transparent' : ''"
@@ -234,7 +227,7 @@
                                     />
                                     <q-btn
                                         v-else
-                                        :dense="!ui_store.is_mobile_mode"
+                                        :dense="!$q.platform.is.mobile"
                                         icon="more_time"
                                         size="lg"
                                         color="accent"
@@ -250,29 +243,29 @@
                     </transition-group>
                 </div>
             </div>
-
-            <q-page-sticky
-                position="bottom-right"
-                :offset="[0, -35]"
-                class="z-top"
-            >
-                <transition
-                    appear
-                    enter-active-class="animated zoomIn"
-                    leave-active-class="animated zoomOut"
-                >
-                    <q-btn
-                        v-if="scroll_y > 400"
-                        fab
-                        icon="las la-chevron-up"
-                        color="white"
-                        text-color="accent"
-                        class="shadow-12"
-                        @click="timesheet_page!.setScrollPosition('vertical', 0, 300)"
-                    />
-                </transition>
-            </q-page-sticky>
         </q-scroll-area>
+
+        <q-page-sticky
+            position="bottom-right"
+            :offset="$q.screen.width > $q.screen.height ? [15, 15] : [15, 65]"
+            class="z-top"
+        >
+            <transition
+                appear
+                enter-active-class="animated zoomIn"
+                leave-active-class="animated zoomOut"
+            >
+                <q-btn
+                    v-if="scroll_y > 400"
+                    fab
+                    icon="las la-chevron-up"
+                    color="white"
+                    text-color="accent"
+                    class="shadow-12"
+                    @click="timesheet_page!.setScrollPosition('vertical', 0, 300)"
+                />
+            </transition>
+        </q-page-sticky>
     </div>
 
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/timesheet-wrapper.vue b/src/modules/timesheets/components/timesheet-wrapper.vue
index ad8cdee..0d0a5bc 100644
--- a/src/modules/timesheets/components/timesheet-wrapper.vue
+++ b/src/modules/timesheets/components/timesheet-wrapper.vue
@@ -39,7 +39,7 @@
         <LoadingOverlay v-model="timesheet_store.is_loading" />
 
         <div
-            class="col-auto row items-center full-width"
+            class="col-auto row items-center full-width q-px-lg"
             :class="$q.platform.is.mobile && ($q.screen.width < $q.screen.height) ? 'justify-between' : 'q-mt-md q-px-md'"
         >
             <!-- navigation btn -->
@@ -63,20 +63,7 @@
                 @click="expenses_store.open"
             />
 
-            <q-space v-if="!$q.platform.is.mobile" />
-
-            <!-- desktop save timesheet changes button -->
-            <q-btn
-                v-if="mode === 'normal' && !is_timesheets_approved && !$q.platform.is.mobile"
-                push
-                rounded
-                :disable="timesheet_store.is_loading || has_shift_errors"
-                :color="timesheet_store.is_loading || has_shift_errors ? 'grey-5' : 'accent'"
-                icon="upload"
-                :label="$t('shared.label.save')"
-                :class="$q.platform.is.mobile && ($q.screen.width < $q.screen.height) ? 'full-width' : 'q-mr-md'"
-                @click="shift_api.saveShiftChanges"
-            />
+            <q-space v-if="$q.screen.width > $q.screen.height" />
 
             <!-- desktop expenses button -->
             <q-btn
@@ -88,22 +75,108 @@
                 :label="$t('timesheet.expense.open_btn')"
                 @click="expenses_store.open"
             />
+
+            <!-- desktop save timesheet changes button -->
+            <q-btn
+                v-if="mode === 'normal' && !is_timesheets_approved && $q.screen.width > $q.screen.height"
+                push
+                rounded
+                :disable="timesheet_store.is_loading || has_shift_errors"
+                :color="timesheet_store.is_loading || has_shift_errors ? 'grey-5' : 'accent'"
+                icon="upload"
+                :label="$t('shared.label.save')"
+                :class="$q.platform.is.mobile && ($q.screen.width < $q.screen.height) ? 'full-width' : 'q-ml-md'"
+                @click="shift_api.saveShiftChanges"
+            />
+        </div>
+
+        <TimesheetErrorWidget class="col-auto" />
+
+        <!-- mobile weekly overview widget -->
+        <div
+            v-if="$q.platform.is.mobile && $q.screen.width < $q.screen.height"
+            class="col-auto row items-start q-px-sm q-pt-sm full-width"
+        >
+            <!-- per timesheet -->
+            <div
+                v-for="timesheet, timesheet_index in timesheet_store.timesheets"
+                :key="timesheet_index"
+                class="col column flex-center q-pa-sm"
+            >
+                <!-- container -->
+                <div
+                    class="rounded-5 relative-position q-px-sm q-pt-sm q-pb-xs full-width shadow-4"
+                    style="border: 1px solid var(--q-accent);"
+                >
+                    <!-- label for week number -->
+                    <div
+                        class="self-start text-uppercase text-weight-bolder text-accent bg-secondary absolute-top-left q-px-xs"
+                        style="font-size: 0.8em; top: -7px; left: 10px; line-height: 1em;"
+                    >{{ $t('timesheet.week') + ` ${timesheet_index + 1}` }}</div>
+
+                    <!-- hours worked in the week -->
+                    <div class="col-auto row">
+                        <span class="text-weight-bolder text-uppercase text-accent text-caption q-mr-sm">{{
+                            $t('timesheet.total_hours') }}</span>
+                        <span>{{
+                            (timesheet.weekly_hours.regular +
+                            timesheet.weekly_hours.evening +
+                            timesheet.weekly_hours.emergency +
+                            timesheet.weekly_hours.overtime).toFixed(2)
+                        }}</span>
+                    </div>
+
+                    <!-- label for current shifts preview -->
+                    <div
+                        class="col-auto full-width text-center text-weight-medium text-caption text-uppercase q-mt-xs"
+                        style="font-size: 0.65em; line-height: 1.2em;"
+                    > {{ $t('timesheet.current_shifts') }}</div>
+
+                    <!-- preview of current number of shifts -->
+                    <div
+                        class="col row flex-center"
+                        style="height: 20px;"
+                    >
+                        <div
+                            v-for="day, day_index in timesheet.days"
+                            :key="day_index"
+                            class="col row flex-center"
+                        >
+                            <q-badge :color="day.shifts.length > 0 ? 'accent' : 'blue-grey-4'">
+                                <span class="text-weight-bolder">{{ day.shifts.length > 0 ? day.shifts.length : ''
+                                }}</span>
+                            </q-badge>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- button to apply weekly schedule preset -->
+                <div class="col-auto flex-center row q-pt-xs full-width">
+                    <q-btn
+                        v-if="timesheet.days.every(day => day.shifts.length < 1)"
+                        push
+                        dense
+                        color="accent"
+                        :label="$t('timesheet.apply_preset')"
+                        class="full-width"
+                        @click="timesheet_api.applyPreset(timesheet.timesheet_id)"
+                    />
+                </div>
+            </div>
         </div>
 
-        <TimesheetErrorWidget class="col-auto"/>
-            
         <ShiftList />
-    
+
         <q-btn
-            v-if="mode === 'approval' || $q.platform.is.mobile && $q.screen.width < $q.screen.height"
-            push
-            rounded
+            v-if="$q.platform.is.mobile && $q.screen.width < $q.screen.height"
+            square
             :disable="timesheet_store.is_loading"
+            size="lg"
             color="accent"
             icon="upload"
             :label="$t('shared.label.save')"
-            class="col-auto"
-            :class="$q.platform.is.mobile && $q.screen.width < $q.screen.height ? 'full-width q-mt-sm' : 'q-mr-md'"
+            class="col-auto absolute-bottom shadow-up-10 z-top"
+            style="height: 50px;"
             @click="shift_api.saveShiftChanges"
         />
 
diff --git a/src/modules/timesheets/utils/shift.util.ts b/src/modules/timesheets/utils/shift.util.ts
index 00fb6ef..0dc2c5e 100644
--- a/src/modules/timesheets/utils/shift.util.ts
+++ b/src/modules/timesheets/utils/shift.util.ts
@@ -1,4 +1,4 @@
-import { date, patterns, type ValidationRule } from "quasar";
+import { date } from "quasar";
 import type { SchedulePresetShift } from "src/modules/employee-list/models/schedule-presets.models";
 import type { Shift, ShiftOption } from "src/modules/timesheets/models/shift.models";
 
@@ -26,16 +26,6 @@ export const isShiftOverlap = (shifts: Shift[] | SchedulePresetShift[]): boolean
   return false;
 };
 
-export const useShiftRules = (time_required_error: string, overlap_error_string: string, day_shifts: Shift[]) =>  {
-    const isTimeRequiredRule: ValidationRule<string> = (time_string: string) => (!!time_string && patterns.testPattern.time(time_string)) || time_required_error;
-    const isShiftOverlapRule: ValidationRule<string> = (_time_string: string) => !isShiftOverlap(day_shifts) || overlap_error_string;
-    
-    return {
-        isTimeRequiredRule,
-        isShiftOverlapRule
-    };
-};
-
 export const SHIFT_OPTIONS: ShiftOption[] = [
         { label: 'timesheet.shift.types.REGULAR', value: 'REGULAR', icon: 'wb_sunny', icon_color: 'accent' },
         { label: 'timesheet.shift.types.EVENING', value: 'EVENING', icon: 'bedtime', icon_color: 'orange-5' },
diff --git a/src/pages/profile-page.vue b/src/pages/profile-page.vue
index e010de1..cfb2309 100644
--- a/src/pages/profile-page.vue
+++ b/src/pages/profile-page.vue
@@ -21,10 +21,11 @@ import { onMounted } from 'vue';
 </script>
 
 <template>
-    <q-page class="bg-secondary row items-center justify-center">
+    <q-page class="bg-secondary row items-center justify-center fit">
         <MenuEmployee
             v-if="employee_roles.includes(auth_store.user?.role.toUpperCase() ?? 'GUEST')"
             class="col-xs-12 col-md-10 col-lg-7 col-xl-5"
+            :class="$q.platform.is.mobile ? 'self-stretch' : ''"
         />
     </q-page>
 </template>
\ No newline at end of file
diff --git a/src/pages/timesheet-approval-page.vue b/src/pages/timesheet-approval-page.vue
index a13fe15..d2aea1f 100644
--- a/src/pages/timesheet-approval-page.vue
+++ b/src/pages/timesheet-approval-page.vue
@@ -16,8 +16,8 @@
     import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
 
-const timesheet_approval_api = useTimesheetApprovalApi();
-const timesheet_store = useTimesheetStore();
+    const timesheet_approval_api = useTimesheetApprovalApi();
+    const timesheet_store = useTimesheetStore();
 
     const is_showing_filters = ref(false);
 
@@ -58,34 +58,24 @@ const timesheet_store = useTimesheetStore();
 
             <q-space />
 
-            <q-btn-toggle
-                v-model="timesheet_store.is_approval_grid_mode"
-                push
-                rounded
-                color="white"
-                text-color="accent"
-                toggle-color="accent"
-                class="col-auto"
-                :class="$q.platform.is.mobile ? 'q-mb-sm' : 'q-mr-md'"
-                :options="[
-                    { icon: 'grid_view', value: true },
-                    { icon: 'view_list', value: false },
-                ]"
-                style="height: 40px;"
-            />
-
             <div
                 class="col-auto row no-wrap items-start"
                 :class="$q.platform.is.mobile ? 'q-mb-md' : ''"
             >
-                <q-btn
-                    flat
-                    icon="filter_alt"
+                <q-btn-toggle
+                    v-model="timesheet_store.is_approval_grid_mode"
+                    push
+                    rounded
                     color="white"
-                    :label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
-                    class="col q-mr-sm self-stretch bg-accent"
-                    style="border-radius: 10px 10px 0 0;"
-                    @click="is_showing_filters = !is_showing_filters"
+                    text-color="accent"
+                    toggle-color="accent"
+                    class="col-auto"
+                    :class="$q.platform.is.mobile ? 'q-mb-sm' : 'q-mr-sm'"
+                    :options="[
+                        { icon: 'grid_view', value: true },
+                        { icon: 'view_list', value: false },
+                    ]"
+                    style="height: 40px;"
                 />
 
                 <q-btn
@@ -95,6 +85,7 @@ const timesheet_store = useTimesheetStore();
                     color="accent"
                     :label="$q.screen.lt.md ? '' : $t('shared.label.download')"
                     class="col-auto q-mr-sm"
+                    style="height: 40px;"
                     @click="timesheet_store.is_report_dialog_open = true"
                 />
 
@@ -102,22 +93,31 @@ const timesheet_store = useTimesheetStore();
                     v-model:search="timesheet_store.search_filter"
                     class="col-auto q-mb-xs"
                 />
+
+                <q-btn
+                    flat
+                    icon="filter_alt"
+                    color="white"
+                    :label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
+                    class="col q-ml-sm self-stretch bg-accent"
+                    style="border-radius: 5px 5px 0 0;"
+                    @click="is_showing_filters = !is_showing_filters"
+                />
             </div>
         </div>
 
-        <q-slide-transition>
+        <q-slide-transition class="col-auto">
             <OverviewListFilters
                 v-if="is_showing_filters"
-                class="q-mx-lg"
+                class="q-mx-lg col-auto"
             />
         </q-slide-transition>
 
         <q-separator
             color="accent"
-            size="4px"
+            size="5px"
             class="q-mx-lg"
         />
-
         <OverviewReport />
 
         <OverviewList class="col" />
diff --git a/src/pages/timesheet-page.vue b/src/pages/timesheet-page.vue
index fd440f9..f632dab 100644
--- a/src/pages/timesheet-page.vue
+++ b/src/pages/timesheet-page.vue
@@ -16,7 +16,7 @@
 <template>
     <q-page
         padding
-        class="column q-pa-md bg-secondary items-center"
+        class="column bg-secondary items-center"
     >
         <PageHeaderTemplate
             :title="'timesheet.page_header'"
diff --git a/src/stores/ui-store.ts b/src/stores/ui-store.ts
index 791067e..e4adde1 100644
--- a/src/stores/ui-store.ts
+++ b/src/stores/ui-store.ts
@@ -1,9 +1,9 @@
+import { useI18n } from 'vue-i18n';
 import { defineStore } from 'pinia';
-import { Notify, LocalStorage, useQuasar, Dark } from 'quasar';
 import { computed, ref } from 'vue';
+import { LocalStorage, useQuasar, Dark } from 'quasar';
 import { Preferences } from 'src/modules/profile/models/preferences.models';
 import { ProfileService } from 'src/modules/profile/services/profile-service';
-import { useI18n, type ComposerTranslation } from 'vue-i18n';
 
 
 export const useUiStore = defineStore('ui', () => {
@@ -44,7 +44,7 @@ export const useUiStore = defineStore('ui', () => {
         }
     };
 
-    const updateUserPreferences = async (t: ComposerTranslation) => {
+    const updateUserPreferences = async () => {
         try {
             if (user_preferences.value.id === -1) return;
 
@@ -53,13 +53,11 @@ export const useUiStore = defineStore('ui', () => {
                 Object.assign(user_preferences.value, response.data);
                 LocalStorage.setItem('user_preferences', response.data);
                 setPreferences();
-                Notify.create({ message: t('profile.preferences.update_successful'), color: 'accent' });
                 return;
             }
         } catch (error) {
             console.error('Could not update user preferences: ', error);
         }
-        Notify.create({ message: t('profile.preferences.update_failed'), color: 'negative' })
     };
 
     const setPreferences = () => {

From c7ba02d74b6e7d2ab09d0e3300e7aa84e1f0c405 Mon Sep 17 00:00:00 2001
From: Matthieu Haineault <matthieuh@targointernet.com>
Date: Fri, 19 Dec 2025 12:45:03 -0500
Subject: [PATCH 3/6] fix(schedule): removed is_default from schedule_preset
 modules and its refs

---
 src/modules/employee-list/composables/use-employee-api.ts   | 1 -
 src/modules/employee-list/models/schedule-presets.models.ts | 6 +-----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/modules/employee-list/composables/use-employee-api.ts b/src/modules/employee-list/composables/use-employee-api.ts
index b613fd0..a1d9d11 100644
--- a/src/modules/employee-list/composables/use-employee-api.ts
+++ b/src/modules/employee-list/composables/use-employee-api.ts
@@ -49,7 +49,6 @@ export const useEmployeeListApi = () => {
         const backend_preset = new SchedulePreset(
             preset.id, 
             preset.name, 
-            preset.is_default, 
             preset_shifts
         );
 
diff --git a/src/modules/employee-list/models/schedule-presets.models.ts b/src/modules/employee-list/models/schedule-presets.models.ts
index 20c6185..d88bc95 100644
--- a/src/modules/employee-list/models/schedule-presets.models.ts
+++ b/src/modules/employee-list/models/schedule-presets.models.ts
@@ -9,13 +9,11 @@ export type PresetManagerMode = 'create' | 'update' | 'copy' | 'delete';
 export class SchedulePreset {
     id: number;
     name: string;
-    is_default: boolean;
     shifts: SchedulePresetShift[];
 
-    constructor(id?: number, name?: string, is_default?: boolean, shifts?: SchedulePresetShift[]) {
+    constructor(id?: number, name?: string, shifts?: SchedulePresetShift[]) {
         this.id = id ?? -1;
         this.name = name ?? 'default';
-        this.is_default = is_default ?? false;
         this.shifts = shifts ?? [];
     }
 }
@@ -41,13 +39,11 @@ export class SchedulePresetShift {
 export class SchedulePresetFrontend {
     id: number;
     name: string;
-    is_default: boolean;
     weekdays: WeekdayPresetShifts[];
 
     constructor(schedule_preset?: SchedulePreset) {
         this.id = schedule_preset?.id ?? -1;
         this.name = schedule_preset?.name ?? '';
-        this.is_default = schedule_preset?.is_default ?? false;
         this.weekdays = WEEKDAYS.map(day => ({
             day,
             is_error: false,

From b28f8768d22f6db15958b26849ab22b47128575b Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Fri, 19 Dec 2025 15:36:15 -0500
Subject: [PATCH 4/6] fix(timesheet): more refactors and fixes to timesheet,
 mostly error handling, mobile UI/UX adjustments

---
 src/css/app.scss                              |   8 +
 src/i18n/en-ca/index.ts                       |   8 +-
 src/i18n/fr-ca/index.ts                       |   8 +-
 .../components/main-layout-left-drawer.vue    | 230 ++++----
 .../components/add-modify-dialog-access.vue   |  17 +-
 .../models/employee-profile.models.ts         |  10 +-
 src/modules/shared/models/user.models.ts      |  19 +-
 .../components/expense-dialog-form.vue        |   1 +
 .../timesheets/components/expense-dialog.vue  |  11 +-
 .../mobile/expense-dialog-form-mobile.vue     |  16 +-
 .../mobile/shift-list-day-row-mobile.vue      |  28 +-
 .../mobile/shift-list-weekly-overview.vue     |  91 ++++
 .../components/shift-list-day-row.vue         | 502 ++++++++----------
 .../timesheets/components/shift-list-day.vue  |  19 +-
 .../timesheets/components/shift-list.vue      |  15 +-
 .../components/timesheet-wrapper.vue          |  79 +--
 src/pages/error-page.vue                      |  48 +-
 src/router/index.ts                           |  16 +-
 src/router/router-constants.ts                |   5 +-
 src/router/routes.ts                          |  17 +-
 src/stores/auth-store.ts                      |  16 +-
 21 files changed, 587 insertions(+), 577 deletions(-)
 create mode 100644 src/modules/timesheets/components/mobile/shift-list-weekly-overview.vue

diff --git a/src/css/app.scss b/src/css/app.scss
index 2e7ae8b..d16f13e 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -2,6 +2,14 @@
 @each $size in (1, 2, 3, 4, 5, 10, 15, 20, 25, 50, 75, 100, 200) {
   .rounded-#{$size} {
     border-radius: #{$size}px !important;
+  } 
+
+  .rounded-#{$size} > div:first-child {
+    border-radius: #{$size}px #{$size}px 0 0 !important;
+  }
+
+  .rounded-#{$size} > div:last-child {
+    border-radius: 0 0 #{$size}px #{$size}px !important;
   }
 }
 
diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index c02d48e..3a60600 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -53,6 +53,12 @@ export default {
         },
     },
 
+    error :{
+        not_found_header: "page not found",
+        not_found_description: "You may have entered the wrong URL, or you may not have access to this page",
+        go_back: "go back",
+    },
+
     login: {
         page_header: "account login",
         email: "e-mail",
@@ -244,7 +250,7 @@ export default {
             SHIFT_OVERLAP: "An overlaps occured between 2 or more shifts",
             SHIFT_OVERLAP_SHORT: "Overlap",
             INVALID_SHIFT: "A shift contains missing or corrupted data",
-            SHIFT_TIME_REQUIRED: "Time required",
+            SHIFT_TIME_REQUIRED: "Time missing",
             SHIFT_TYPE_REQUIRED: "Shift type required",
             SHIFT_NOT_FOUND: "Shift missing or deleted",
             PAY_PERIOD_NOT_FOUND: "No pay period matching given dates",
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index e402331..54c3b61 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -53,6 +53,12 @@ export default {
         },
     },
 
+    error :{
+        not_found_header: "page introuvable",
+        not_found_description: "Vous avez possiblement entré une mauvaise addresse URL, ou vous n'avez pas accès à cette section du site",
+        go_back: "retour en arrière",
+    },
+
     login: {
         page_header: "connexion au compte",
         email: "courriel",
@@ -245,7 +251,7 @@ export default {
             SHIFT_OVERLAP: "Il y a un chevauchement entre deux ou plusieurs quarts",
             SHIFT_OVERLAP_SHORT: "Chevauchement",
             INVALID_SHIFT: "Un quart de travail contient des données manquantes ou corrompues",
-            SHIFT_TIME_REQUIRED: "Heure requise",
+            SHIFT_TIME_REQUIRED: "Heures manquantes",
             SHIFT_TYPE_REQUIRED: "Type requis",
             SHIFT_NOT_FOUND: "Quart de travail manquant ou supprimé",
             PAY_PERIOD_NOT_FOUND: "Aucune période de paie ne correspond aux dates fournies",
diff --git a/src/layouts/components/main-layout-left-drawer.vue b/src/layouts/components/main-layout-left-drawer.vue
index 5d5de81..01472c3 100644
--- a/src/layouts/components/main-layout-left-drawer.vue
+++ b/src/layouts/components/main-layout-left-drawer.vue
@@ -7,7 +7,7 @@
     import { useUiStore } from 'src/stores/ui-store';
     import { ref } from 'vue';
     import { RouteNames } from 'src/router/router-constants';
-    import { CAN_APPROVE_PAY_PERIODS } from 'src/modules/shared/models/user.models';
+    import { ModuleNames } from 'src/modules/shared/models/user.models';
 
     const auth_store = useAuthStore();
     const ui_store = useUiStore();
@@ -32,155 +32,109 @@
 <template>
     <q-drawer
         v-model="ui_store.is_left_drawer_open"
-        :persistent="!ui_store.is_mobile_mode"
+        :persistent="!$q.platform.is.mobile"
         mini-to-overlay
         elevated
         side="left"
         :mini="is_mini"
         @mouseenter="is_mini = false"
         @mouseleave="is_mini = true"
-        class="bg-dark z-max"
+        class="bg-dark z-max column no-wrap"
+        :class="!$q.platform.is.mobile && is_mini ? 'items-center' : 'items-start'"
     >
-        <q-scroll-area class="fit">
-            <q-list>
-                <!-- Home  -->
-                <q-item
-                    v-ripple
-                    clickable
-                    side
-                    @click="goToPageName(RouteNames.DASHBOARD)"
-                >
-                    <q-item-section avatar>
-                        <q-icon
-                            name="home"
-                            color="accent"
-                            size="lg"
-                        />
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.home') }}</q-item-label>
-                    </q-item-section>
-                </q-item>
+        <!-- Home  -->
+        <q-btn
+            flat
+            dense
+            no-wrap
+            size="lg"
+            icon="home"
+            :label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.home')"
+            class="col-auto text-uppercase text-weight-bold q-my-xs"
+            :class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
+            @click="goToPageName(RouteNames.DASHBOARD)"
+        />
 
-                <!-- Timesheet Validation -- Supervisor and Accounting only -->
-                <q-item
-                    v-ripple
-                    clickable
-                    side
-                    @click="goToPageName(RouteNames.TIMESHEET_APPROVALS)"
-                    v-if="CAN_APPROVE_PAY_PERIODS.includes(auth_store.user?.role ?? 'GUEST')"
-                >
-                    <q-item-section avatar>
-                        <q-icon
-                            name="event_available"
-                            color="accent"
-                            size="lg"
-                        />
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.timesheet_approvals')
-                            }}</q-item-label>
-                    </q-item-section>
-                </q-item>
+        <!-- Timesheet Validation -->
+        <q-btn
+            v-if="auth_store.user?.user_module_access.includes(ModuleNames.TIMESHEETS_APPROVAL)"
+            flat
+            dense
+            no-wrap
+            size="lg"
+            icon="event_available"
+            :label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.timesheet_approvals')"
+            class="col-auto text-uppercase text-weight-bold q-my-xs"
+            :class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
+            @click="goToPageName(RouteNames.TIMESHEET_APPROVALS)"
+        />
 
-                <!-- Employee List -- Supervisor, Accounting and HR only -->
-                <q-item
-                    v-ripple
-                    clickable
-                    side
-                    @click="goToPageName(RouteNames.EMPLOYEE_LIST)"
-                    v-if="CAN_APPROVE_PAY_PERIODS.includes(auth_store.user?.role ?? 'GUEST')"
-                >
-                    <q-item-section avatar>
-                        <q-icon
-                            name="groups"
-                            color="accent"
-                            size="lg"
-                        />
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.employee_list')
-                            }}</q-item-label>
-                    </q-item-section>
-                </q-item>
+        <!-- Employee List -->
+        <q-btn
+            v-if="auth_store.user?.user_module_access.includes(ModuleNames.EMPLOYEE_LIST)"
+            flat
+            dense
+            no-wrap
+            size="lg"
+            icon="groups"
+            :label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.employee_list')"
+            class="col-auto text-uppercase text-weight-bold q-my-xs"
+            :class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
+            @click="goToPageName(RouteNames.EMPLOYEE_LIST)"
+        />
 
-                <!-- Employee Timesheet temp -- Employee, Supervisor, Accounting only -->
-                <q-item
-                    v-ripple
-                    clickable
-                    side
-                    @click="goToPageName(RouteNames.TIMESHEET)"
-                    v-if="CAN_APPROVE_PAY_PERIODS.includes(auth_store.user?.role ?? 'GUEST')"
-                >
-                    <q-item-section avatar>
-                        <q-icon
-                            name="punch_clock"
-                            color="accent"
-                            size="lg"
-                        />
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.timesheet')
-                            }}</q-item-label>
-                    </q-item-section>
-                </q-item>
+        <!-- Employee Timesheet -->
+        <q-btn
+            v-if="auth_store.user?.user_module_access.includes(ModuleNames.TIMESHEETS)"
+            flat
+            dense
+            no-wrap
+            size="lg"
+            icon="punch_clock"
+            :label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.timesheet')"
+            class="col-auto text-uppercase text-weight-bold q-my-xs"
+            :class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
+            @click="goToPageName(RouteNames.TIMESHEET)"
+        />
 
-                <!-- Profile -->
-                <q-item
-                    v-ripple
-                    clickable
-                    side
-                    @click="goToPageName(RouteNames.PROFILE)"
-                >
-                    <q-item-section avatar>
-                        <q-icon
-                            name="account_box"
-                            color="accent"
-                            size="lg"
-                        />
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.profile') }}</q-item-label>
-                    </q-item-section>
-                </q-item>
+        <!-- Profile -->
+        <q-btn
+            v-if="auth_store.user?.user_module_access.includes(ModuleNames.PERSONAL_PROFILE)"
+            flat
+            dense
+            no-wrap
+            size="lg"
+            icon="account_box"
+            :label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.profile')"
+            class="col-auto text-uppercase text-weight-bold q-my-xs"
+            :class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
+            @click="goToPageName(RouteNames.PROFILE)"
+        />
 
-                <!-- Help -->
-                <q-item
-                    v-ripple
-                    clickable
-                    @click="goToPageName('help')"
-                >
-                    <q-item-section avatar>
-                        <q-icon
-                            name="contact_support"
-                            color="accent"
-                            size="lg"
-                        />
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.help') }}</q-item-label>
-                    </q-item-section>
-                </q-item>
-            </q-list>
+        <!-- Help -->
+        <q-btn
+            flat
+            dense
+            no-wrap
+            size="lg"
+            icon="contact_support"
+            :label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.help')"
+            class="col-auto text-uppercase text-weight-bold q-my-xs"
+            :class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
+            @click="goToPageName(RouteNames.HELP)"
+        />
 
-            <!-- Logout -->
-            <q-item
-                v-ripple
-                clickable
-                @click="handleLogout"
-                class="absolute-bottom"
-            >
-                <q-item-section avatar>
-                    <q-icon
-                        name="exit_to_app"
-                        color="accent"
-                        size="lg"
-                    />
-                </q-item-section>
-                <q-item-section>
-                    <q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.logout') }}</q-item-label>
-                </q-item-section>
-            </q-item>
-        </q-scroll-area>
+        <!-- Logout -->
+        <q-btn
+            flat
+            dense
+            no-wrap
+            size="lg"
+            icon="exit_to_app"
+            :label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.logout')"
+            class="col-auto text-uppercase text-weight-bold q-my-xs"
+            :class="!$q.platform.is.mobile && is_mini ? 'absolute-bottom': 'absolute-bottom-left'"
+            @click="handleLogout"
+        />
     </q-drawer>
 </template>
\ No newline at end of file
diff --git a/src/modules/employee-list/components/add-modify-dialog-access.vue b/src/modules/employee-list/components/add-modify-dialog-access.vue
index 1dbb15c..516e5b1 100644
--- a/src/modules/employee-list/components/add-modify-dialog-access.vue
+++ b/src/modules/employee-list/components/add-modify-dialog-access.vue
@@ -5,12 +5,13 @@
     import { ref } from 'vue';
     import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
     import { useEmployeeStore } from 'src/stores/employee-store';
-    import { employee_access_options, type ModuleAccessPreset, type ModuleAccessName, employee_access_presets, getEmployeeAccessOptionIcon } from 'src/modules/employee-list/models/employee-profile.models';
+    import { employee_access_options, type ModuleAccessPreset, employee_access_presets, getEmployeeAccessOptionIcon } from 'src/modules/employee-list/models/employee-profile.models';
+    import type { UserModuleAccess } from 'src/modules/shared/models/user.models';
 
     const employee_store = useEmployeeStore();
     const preset_preview = ref<ModuleAccessPreset>();
 
-    const toggleInSelected = (value: ModuleAccessName) => {
+    const toggleInSelected = (value: UserModuleAccess) => {
         const i = employee_store.employee.user_module_access.indexOf(value);
         if (i === -1) employee_store.employee.user_module_access.push(value);
         else employee_store.employee.user_module_access.splice(i, 1);
@@ -21,7 +22,7 @@
     }
 
 
-    const getPreviewBackgroundColor = (name: ModuleAccessName) => {
+    const getPreviewBackgroundColor = (name: UserModuleAccess) => {
         if (employee_access_presets[preset_preview.value!].includes(name)) {
             if (!employee_store.employee.user_module_access.includes(name)) return 'bg-info text-white';
 
@@ -33,7 +34,7 @@
         return 'bg-dark';
     };
 
-    const getBackgroundColor = (name: ModuleAccessName) => {
+    const getBackgroundColor = (name: UserModuleAccess) => {
         if (employee_store.employee.user_module_access.includes(name)) return 'bg-accent text-white';
 
         return 'bg-dark';
@@ -142,8 +143,12 @@
                     class="row full-width cursor-pointer flex-center q-pa-sm rounded-5 no-wrap shadow-5"
                     :class="preset_preview !== undefined ? getPreviewBackgroundColor(option.value) : getBackgroundColor(option.value)"
                     @click="toggleInSelected(option.value)"
-                >  
-                    <q-icon :name="getEmployeeAccessOptionIcon(option.value)" size="sm" class="q-mr-sm"/>
+                >
+                    <q-icon
+                        :name="getEmployeeAccessOptionIcon(option.value)"
+                        size="sm"
+                        class="q-mr-sm"
+                    />
                     <span class="text-uppercase text-weight-bold non-selectable">
                         {{ $t('employee_management.module_access.' + option.value) }}
                     </span>
diff --git a/src/modules/employee-list/models/employee-profile.models.ts b/src/modules/employee-list/models/employee-profile.models.ts
index b53dc9a..ff92bc9 100644
--- a/src/modules/employee-list/models/employee-profile.models.ts
+++ b/src/modules/employee-list/models/employee-profile.models.ts
@@ -1,6 +1,6 @@
 import type { QSelectOption, QTableColumn } from "quasar";
+import type { UserModuleAccess } from "src/modules/shared/models/user.models";
 
-export type ModuleAccessName = 'dashboard' | 'employee_list' | 'employee_management' | 'personal_profile' | 'timesheets' | 'timesheets_approval';
 export type ModuleAccessPreset = 'admin' | 'supervisor' | 'employee' | 'none';
 export type CompanyNames = 'Targo' | 'Solucom';
 
@@ -18,7 +18,7 @@ export class EmployeeProfile {
     residence: string;
     birth_date: string;
     is_supervisor: boolean;
-    user_module_access: ModuleAccessName[];
+    user_module_access: UserModuleAccess[];
     preset_id?: number | null;
 
     constructor() {
@@ -100,7 +100,7 @@ export const employee_list_columns: QTableColumn<EmployeeProfile>[] = [
     },
 ];
 
-export const employee_access_options: QSelectOption<ModuleAccessName>[] = [
+export const employee_access_options: QSelectOption<UserModuleAccess>[] = [
     { label: 'dashboard', value: 'dashboard' },
     { label: 'employee_list', value: 'employee_list' },
     { label: 'personal_profile', value: 'personal_profile' },
@@ -109,14 +109,14 @@ export const employee_access_options: QSelectOption<ModuleAccessName>[] = [
     { label: 'timesheets_approval', value: 'timesheets_approval' },
 ]
 
-export const employee_access_presets: Record<ModuleAccessPreset, ModuleAccessName[]> = {
+export const employee_access_presets: Record<ModuleAccessPreset, UserModuleAccess[]> = {
     'admin' : ['dashboard', 'employee_list', 'employee_management', 'personal_profile', 'timesheets', 'timesheets_approval'],
     'supervisor' : ['dashboard', 'employee_list', 'personal_profile', 'timesheets', 'timesheets_approval'],
     'employee' : ['dashboard', 'timesheets', 'personal_profile', 'employee_list'],
     'none' : [],
 }
 
-export const getEmployeeAccessOptionIcon = (module: ModuleAccessName): string => {
+export const getEmployeeAccessOptionIcon = (module: UserModuleAccess): string => {
     switch (module) {
         case 'dashboard': return 'home';
         case 'employee_list' : return 'groups';
diff --git a/src/modules/shared/models/user.models.ts b/src/modules/shared/models/user.models.ts
index 743108e..d97ae27 100644
--- a/src/modules/shared/models/user.models.ts
+++ b/src/modules/shared/models/user.models.ts
@@ -3,13 +3,18 @@ export interface User {
     last_name: string;
     email: string;
     role: UserRole;
+    user_module_access: UserModuleAccess;
 }
 
-export type UserRole = 'ADMIN' |'SUPERVISOR' | 'HR' | 'ACCOUNTING' | 'EMPLOYEE' | 'DEALER' | 'CUSTOMER' | 'GUEST';
+export type UserRole = 'ADMIN' | 'SUPERVISOR' | 'HR' | 'ACCOUNTING' | 'EMPLOYEE' | 'DEALER' | 'CUSTOMER' | 'GUEST';
 
-export const CAN_APPROVE_PAY_PERIODS: UserRole[] = [
-    'ADMIN',
-    'SUPERVISOR',
-    'HR',
-    'ACCOUNTING',
-]
\ No newline at end of file
+export const ModuleNames = {
+    DASHBOARD: 'dashboard',
+    EMPLOYEE_LIST: 'employee_list',
+    EMPLOYEE_MANAGEMENT: 'employee_management',
+    PERSONAL_PROFILE: 'personal_profile',
+    TIMESHEETS: 'timesheets',
+    TIMESHEETS_APPROVAL: 'timesheets_approval',
+} as const;
+
+export type UserModuleAccess = typeof ModuleNames[keyof typeof ModuleNames];
\ No newline at end of file
diff --git a/src/modules/timesheets/components/expense-dialog-form.vue b/src/modules/timesheets/components/expense-dialog-form.vue
index ffec64f..03b2e39 100644
--- a/src/modules/timesheets/components/expense-dialog-form.vue
+++ b/src/modules/timesheets/components/expense-dialog-form.vue
@@ -101,6 +101,7 @@
                             v-model="is_navigator_open"
                             transition-show="jump-right"
                             transition-hide="jump-right"
+                            class="z-top"
                         >
                             <q-date
                                 v-model="expenses_store.current_expense.date"
diff --git a/src/modules/timesheets/components/expense-dialog.vue b/src/modules/timesheets/components/expense-dialog.vue
index 4060fc6..21ba93e 100644
--- a/src/modules/timesheets/components/expense-dialog.vue
+++ b/src/modules/timesheets/components/expense-dialog.vue
@@ -56,15 +56,16 @@
                 >
                     <template #header>
                         <div class="row items-center">
-                            <span class="col-auto text-uppercase text-weight-bold text-h6 q-ml-lg q-mr-sm">
-                                {{ $t('timesheet.expense.add_expense') }}
-                            </span>
                             <q-icon
-                                v-if="expense_store.mode !== 'create'"
-                                name="las la-plus-square"
+                                name="add_circle_outline"
                                 size="md"
                                 class="col-auto"
+                                :class="expense_store.is_showing_create_form ? 'invisible' : ''"
                             />
+                        
+                            <span class="col-auto text-uppercase text-weight-bold text-h6 q-ml-xs q-mr-sm">
+                                {{ $t('timesheet.expense.add_expense') }}
+                            </span>
                         </div>
                     </template>
 
diff --git a/src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue b/src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue
index 1a7ee66..2c1fdc7 100644
--- a/src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue
+++ b/src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue
@@ -94,6 +94,7 @@
                             v-model="is_navigator_open"
                             transition-show="jump-right"
                             transition-hide="jump-right"
+                            class="z-top"
                         >
                             <q-date
                                 v-model="expenses_store.current_expense.date"
@@ -217,12 +218,12 @@
                     class="col-auto"
                 />
 
-                <q-dialog v-model="is_showing_comment_dialog_mobile">
-                    <q-card class="full-width bg-secondary rounded-10">
+                <q-dialog v-model="is_showing_comment_dialog_mobile" class="z-top">
+                    <q-card class="full-width bg-primary rounded-10">
                         <q-card-section class="q-pa-none">
                             <span
-                                class="text-weight-bold text-accent text-uppercase text-caption"
-                                style="font-size: 1.5em;"
+                                class="text-weight-bold text-accent text-uppercase text-caption q-mx-md"
+                                style="font-size: 1.2em;"
                             >
                                 {{ $t('timesheet.expense.employee_comment') }}
                             </span>
@@ -231,14 +232,13 @@
                         <q-card-section class="q-pa-none bg-primary rounded-10">
                             <q-input
                                 v-model="expenses_store.current_expense.comment"
-                                standout="bg-blue-grey-9"
+                                filled
                                 dense
                                 hide-bottom-space
-                                color="primary"
+                                color="accent"
                                 type="textarea"
                                 :maxlength="COMMENT_MAX_LENGTH"
-                                lazy-rules="ondemand"
-                                :rules="[rules.commentRequired]"
+                                class="bg-white no-border"
                             >
                             </q-input>
                         </q-card-section>
diff --git a/src/modules/timesheets/components/mobile/shift-list-day-row-mobile.vue b/src/modules/timesheets/components/mobile/shift-list-day-row-mobile.vue
index 50039d6..cc1101e 100644
--- a/src/modules/timesheets/components/mobile/shift-list-day-row-mobile.vue
+++ b/src/modules/timesheets/components/mobile/shift-list-day-row-mobile.vue
@@ -17,11 +17,13 @@
     const select_ref = ref<QSelect | null>(null);
     const is_showing_comment_popup = ref(false);
     const comment_length = computed(() => shift.value.comment?.length ?? 0);
+    const error_message = ref('');
 
-    const { dense = false, hasShiftAfter = false, isTimesheetApproved = false } = defineProps<{
+    const { errorMessage = undefined, dense = false, hasShiftAfter = false, isTimesheetApproved = false } = defineProps<{
         dense?: boolean;
         hasShiftAfter?: boolean;
         isTimesheetApproved?: boolean;
+        errorMessage?: string | undefined;
     }>();
 
     const emit = defineEmits<{
@@ -37,6 +39,17 @@
         }
     };
 
+    const onTimeFieldBlur = (time_string: string) => {
+        if (time_string.length < 1 || !time_string) {
+            shift.value.has_error = true;
+            error_message.value = 'timesheet.errors.SHIFT_TIME_REQUIRED';
+        } else {
+            shift.value.has_error = false;
+            error_message.value = '';
+            emit('onTimeFieldBlur');
+        }
+    }
+
     const getCommentCounterColor = (comment_length: number) => {
         if (comment_length < 200) return 'primary';
         if (comment_length < 250) return 'warning';
@@ -50,6 +63,9 @@
             shift_type_selected.value = undefined;
             ui_store.focus_next_component = false;
         }
+
+        if (errorMessage)
+            error_message.value = errorMessage;
     });
 </script>
 
@@ -162,6 +178,7 @@
                                 anchor="top middle"
                                 self="bottom middle"
                                 :offset="[0, 10]"
+                                :hide-delay="1000"
                                 class="text-uppercase text-weight-bold text-white bg-primary"
                             >
                                 {{ shift.is_remote ? $t('timesheet.shift.types.REMOTE') :
@@ -184,6 +201,7 @@
                                 anchor="top middle"
                                 self="bottom middle"
                                 :offset="[0, 10]"
+                                :hide-delay="1000"
                                 class="text-uppercase text-weight-medium text-white bg-accent"
                             >
                                 {{ shift.is_remote ? $t('timesheet.shift.types.REMOTE') :
@@ -208,13 +226,15 @@
                         lazy-rules
                         no-error-icon
                         hide-bottom-space
+                        :error="shift.has_error"
+                        :error-message="errorMessage || error_message !== '' ? $t(errorMessage ?? error_message) : ''"
                         :label-color="!shift.is_approved ? 'accent' : 'white'"
                         class="rounded-5 bg-dark"
                         :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (!shift.is_approved && !isTimesheetApproved ? '' : 'cursor-not-allowed inset-shadow')"
                         :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
                         input-style="font-size: 1.2em;"
                         :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
-                        @blur="emit('onTimeFieldBlur')"
+                        @blur="onTimeFieldBlur(shift.start_time)"
                     >
                         <template #label>
                             <span
@@ -239,13 +259,15 @@
                         label-slot
                         no-error-icon
                         hide-bottom-space
+                        :error="shift.has_error"
+                        :error-message="errorMessage || error_message !== '' ? $t(errorMessage ?? error_message) : ''"
                         :label-color="!shift.is_approved ? 'accent' : 'white'"
                         :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
                         input-style="font-size: 1.2em;"
                         class="rounded-5 bg-dark"
                         :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (shift.is_approved ? 'cursor-not-allowed q-px-xs transparent inset-shadow' : (isTimesheetApproved ? 'inset-shadow' : ''))"
                         :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
-                        @blur="emit('onTimeFieldBlur')"
+                        @blur="onTimeFieldBlur(shift.end_time)"
                     >
                         <template #label>
                             <span
diff --git a/src/modules/timesheets/components/mobile/shift-list-weekly-overview.vue b/src/modules/timesheets/components/mobile/shift-list-weekly-overview.vue
new file mode 100644
index 0000000..1b4b183
--- /dev/null
+++ b/src/modules/timesheets/components/mobile/shift-list-weekly-overview.vue
@@ -0,0 +1,91 @@
+<script
+    setup
+    lang="ts"
+>
+    import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+
+    const timesheet_store = useTimesheetStore();
+    const timesheet_api = useTimesheetApi();
+</script>
+
+<template>
+    <div
+        v-if="$q.platform.is.mobile && $q.screen.width < $q.screen.height"
+        class="col-auto row items-start q-px-sm q-pt-sm full-width"
+    >
+        <!-- per timesheet -->
+        <div
+            v-for="timesheet, timesheet_index in timesheet_store.timesheets"
+            :key="timesheet_index"
+            class="col column flex-center q-pa-sm"
+        >
+            <!-- container -->
+            <div
+                class="rounded-5 relative-position q-px-sm q-pt-sm q-pb-xs full-width shadow-4"
+                style="border: 1px solid var(--q-accent);"
+            >
+                <!-- label for week number -->
+                <div
+                    class="self-start text-uppercase text-weight-bolder text-accent bg-secondary absolute-top-left q-px-xs"
+                    style="font-size: 0.8em; top: -7px; left: 10px; line-height: 1em;"
+                >{{ $t('timesheet.week') + ` ${timesheet_index + 1}` }}</div>
+
+                <!-- hours worked in the week -->
+                <div class="col-auto row">
+                    <span class="text-weight-bolder text-uppercase text-accent text-caption q-mr-sm">{{
+                        $t('timesheet.total_hours') }}</span>
+                    <span>{{
+                        (timesheet.weekly_hours.regular +
+                            timesheet.weekly_hours.evening +
+                            timesheet.weekly_hours.emergency +
+                            timesheet.weekly_hours.overtime).toFixed(2)
+                    }}</span>
+                </div>
+
+                <!-- label for current shifts preview -->
+                <div
+                    class="col-auto full-width text-center text-weight-medium text-caption text-uppercase q-mt-xs"
+                    style="font-size: 0.65em; line-height: 1.2em;"
+                > {{ $t('timesheet.current_shifts') }}</div>
+
+                <!-- preview of current number of shifts -->
+                <div
+                    class="col row flex-center"
+                    style="height: 20px;"
+                >
+                    <div
+                        v-for="day, day_index in timesheet.days"
+                        :key="day_index"
+                        class="col row flex-center"
+                    >
+                        <q-badge
+                            :color="day.shifts.length > 0 ? (day.shifts.every(shift => shift.is_approved) ? 'accent shadow-2' : 'dark shadow-2') : 'blue-grey-5'"
+                            :class="day.shifts.length > 0 ? (day.shifts.every(shift => shift.is_approved) ? 'q-px-xs' : 'q-pa-sm') : ''"
+                            :style="day.shifts.length > 0 ? '' : 'opacity: 0.5'"
+                        >
+                            <q-icon
+                                v-if="day.shifts.every(shift => shift.is_approved) && day.shifts.length > 0"
+                                name="check"
+                                class="q-pa-none"
+                            />
+                        </q-badge>
+                    </div>
+                </div>
+            </div>
+
+            <!-- button to apply weekly schedule preset -->
+            <div class="col-auto flex-center row q-pt-xs full-width">
+                <q-btn
+                    v-if="timesheet.days.every(day => day.shifts.length < 1)"
+                    push
+                    dense
+                    color="accent"
+                    :label="$t('timesheet.apply_preset')"
+                    class="full-width"
+                    @click="timesheet_api.applyPreset(timesheet.timesheet_id)"
+                />
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/shift-list-day-row.vue b/src/modules/timesheets/components/shift-list-day-row.vue
index d304130..6654f23 100644
--- a/src/modules/timesheets/components/shift-list-day-row.vue
+++ b/src/modules/timesheets/components/shift-list-day-row.vue
@@ -2,52 +2,42 @@
     setup
     lang="ts"
 >
-    /* eslint-disable*/
-    import { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
-    import { useI18n } from 'vue-i18n';
+    import { onMounted, ref } from 'vue';
     import { QSelect, QInput } from 'quasar';
-    import { Shift } from 'src/modules/timesheets/models/shift.models';
     import { useUiStore } from 'src/stores/ui-store';
     import { SHIFT_OPTIONS } from 'src/modules/timesheets/utils/shift.util';
+    import type { Shift } from 'src/modules/timesheets/models/shift.models';
 
-    let timer: NodeJS.Timeout;
-    const { t } = useI18n();
     const ui_store = useUiStore();
-    
+
     const COMMENT_LENGTH_MAX = 280;
-    
+
     const shift = defineModel<Shift>('shift', { required: true });
     const shift_type_selected = ref(SHIFT_OPTIONS.find(option => option.value == shift.value.type));
-    const select_ref = useTemplateRef<QSelect>('select');
-    const start_time_ref = useTemplateRef<QInput>('start_time');
-    const end_time_ref = useTemplateRef<QInput>('end_time');
+    const select_ref = ref<QSelect | null>(null);
+    const error_message = ref('');
 
-    const { dense = false, hasShiftAfter = false, isTimesheetApproved = false } = defineProps<{
+    const { errorMessage = undefined, isTimesheetApproved = false } = defineProps<{
         dense?: boolean;
-        hasShiftAfter?: boolean;
         isTimesheetApproved?: boolean;
+        errorMessage?: string | undefined;
     }>();
 
     const emit = defineEmits<{
-        'saveComment': [comment: string, shift_id: number];
         'requestDelete': [void];
         'onTimeFieldBlur': [void];
     }>();
 
-    const onBlurShiftTypeSelect = () => {
-        if (shift_type_selected.value === undefined) {
-            shift.value.type = 'REGULAR';
-            shift.value.id = 0;
-            emit('requestDelete');
-        }
-    };
-
-    const slideDeleteShift = async (reset: () => void) => {
-        timer = setTimeout(() => {
-            reset();
-            emit('requestDelete');
-        }, 200);
-    };
+    const onTimeFieldBlur = (time_string: string) => {
+        if (time_string.length < 1 || !time_string) {
+            shift.value.has_error = true;
+            error_message.value = 'timesheet.errors.SHIFT_TIME_REQUIRED'
+        } else {
+            shift.value.has_error = false;
+            error_message.value = '';
+            emit('onTimeFieldBlur');
+        } 
+    }
 
     const getCommentCounterColor = (comment_length: number) => {
         if (comment_length < 200) return 'primary';
@@ -62,43 +52,193 @@
             shift_type_selected.value = undefined;
             ui_store.focus_next_component = false;
         }
-    });
 
-    onBeforeUnmount(() => {
-        clearTimeout(timer);
+        if (errorMessage) 
+            error_message.value = errorMessage;
     });
-
-    watch(() => [start_time_ref.value?.hasError, end_time_ref.value?.hasError], ([start_error, end_error]) => {
-        shift.value.has_error = (start_error || end_error) ?? false;
-    })
 </script>
 
 <template>
-    <q-slide-item
-        right-color="negative"
-        class="rounded-5 transparent"
-        :class="ui_store.is_mobile_mode ? 'q-my-md' : 'q-mr-xs'"
-        @right="details => slideDeleteShift(details.reset)"
-    >
-        <template
-            #right
-            v-if="ui_store.is_mobile_mode"
+    <div :class="ui_store.is_mobile_mode ? 'column' : 'row'">
+        <div
+            class="row items-center text-uppercase rounded-5"
+            :class="ui_store.is_mobile_mode ? 'col q-mb-xs q-px-xs' : 'col-4'"
         >
-            <q-icon name="delete" />
-        </template>
-
-        <div :class="ui_store.is_mobile_mode ? 'column' : 'row'">
-            <div
-                class="row items-center text-uppercase rounded-5"
-                :class="ui_store.is_mobile_mode ? 'col q-mb-xs q-px-xs' : 'col-4'"
+            <!-- shift type -->
+            <q-select
+                ref="select"
+                v-model="shift_type_selected"
+                :standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
+                dense
+                :borderless="(shift.is_approved && isTimesheetApproved)"
+                :readonly="(shift.is_approved && isTimesheetApproved)"
+                :options-dense="!ui_store.is_mobile_mode"
+                hide-dropdown-icon
+                :menu-offset="[0, 10]"
+                menu-anchor="bottom middle"
+                menu-self="top middle"
+                :options="SHIFT_OPTIONS"
+                class="col rounded-5 q-mx-xs bg-dark"
+                :class="!shift.is_approved && !isTimesheetApproved ? '' : 'inset-shadow'"
+                popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
+                :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
+                popup-content-style="border: 2px solid var(--q-accent)"
+                @update:model-value="option => shift.type = option.value"
             >
-                <!-- mobile comment button -->
+                <template #selected-item="scope">
+                    <div
+                        class="row items-center text-weight-bold q-ma-none q-pa-none no-wrap ellipsis full-width"
+                        :class="ui_store.is_mobile_mode ? 'full-height' : ''"
+                        :tabindex="scope.tabindex"
+                    >
+                        <q-icon
+                            :name="scope.opt.icon"
+                            :color="scope.opt.icon_color"
+                            size="sm"
+                            class="col-auto"
+                            :class="shift.is_approved ? 'q-mx-xs' : 'q-mr-xs'"
+                        />
+                        <span
+                            style="line-height: 1.2em;"
+                            class="col-auto ellipsis"
+                            :class="!shift.is_approved ? '' : 'text-white'"
+                        >
+                            {{ $t(scope.opt.label) }}
+                        </span>
+                    </div>
+                </template>
+
+                <template #after>
+                    <q-icon
+                        v-if="shift.is_approved"
+                        :name="shift.is_remote ? 'las la-laptop' : 'las la-building'"
+                        size="1.2em"
+                        color="white"
+                        class="q-mr-sm"
+                    >
+                        <q-tooltip
+                            anchor="top middle"
+                            self="bottom middle"
+                            :offset="[0, 10]"
+                            class="text-uppercase text-weight-bold text-white bg-primary"
+                        >
+                            {{ shift.is_remote ? $t('timesheet.shift.types.REMOTE') :
+                                $t('timesheet.shift.types.OFFICE') }}
+                        </q-tooltip>
+                    </q-icon>
+
+                    <q-toggle
+                        v-else
+                        v-model="shift.is_remote"
+                        :disable="shift.is_approved"
+                        dense
+                        keep-color
+                        size="3em"
+                        color="accent"
+                        icon="las la-building"
+                        checked-icon="las la-laptop"
+                    >
+                        <q-tooltip
+                            anchor="top middle"
+                            self="bottom middle"
+                            :offset="[0, 10]"
+                            class="text-uppercase text-weight-medium text-white bg-accent"
+                        >
+                            {{ shift.is_remote ? $t('timesheet.shift.types.REMOTE') :
+                                $t('timesheet.shift.types.OFFICE') }}
+                        </q-tooltip>
+                    </q-toggle>
+                </template>
+            </q-select>
+        </div>
+
+        <div class="col row items-start text-uppercase rounded-5 q-pa-xs">
+            <!-- punch in field -->
+            <q-input
+                ref="start_time"
+                v-model="shift.start_time"
+                dense
+                :borderless="(shift.is_approved && isTimesheetApproved)"
+                :readonly="(shift.is_approved && isTimesheetApproved)"
+                type="time"
+                :standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
+                label-slot
+                lazy-rules
+                no-error-icon
+                hide-bottom-space
+                :error="shift.has_error"
+                :error-message="errorMessage || error_message !== '' ? $t(errorMessage ?? error_message) : ''"
+                :label-color="!shift.is_approved ? 'accent' : 'white'"
+                class="col rounded-5 bg-dark q-mx-xs"
+                :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (!shift.is_approved && !isTimesheetApproved ? '' : 'cursor-not-allowed inset-shadow')"
+                :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
+                input-style="font-size: 1.2em;"
+                :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
+                @blur="onTimeFieldBlur(shift.start_time)"
+            >
+                <template #label>
+                    <span
+                        class="text-weight-bolder"
+                        :class="shift.is_approved ? ' q-ml-md' : ''"
+                        style="font-size: 0.95em;"
+                    >{{ $t('shared.misc.in') }}</span>
+                </template>
+            </q-input>
+
+            <!-- punch out field -->
+            <q-input
+                ref="end_time"
+                v-model="shift.end_time"
+                :standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
+                dense
+                :borderless="(shift.is_approved && isTimesheetApproved)"
+                :readonly="(shift.is_approved && isTimesheetApproved)"
+                type="time"
+                label-slot
+                no-error-icon
+                hide-bottom-space
+                :error="shift.has_error"
+                :error-message="errorMessage || error_message !== '' ? $t(errorMessage ?? error_message) : ''"
+                :label-color="!shift.is_approved ? 'accent' : 'white'"
+                :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
+                input-style="font-size: 1.2em;"
+                class="col rounded-5 bg-dark q-mx-xs"
+                :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (shift.is_approved ? 'cursor-not-allowed q-px-xs transparent inset-shadow' : (isTimesheetApproved ? 'inset-shadow' : ''))"
+                :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
+                @blur="onTimeFieldBlur(shift.end_time)"
+            >
+                <template #label>
+                    <span
+                        class="text-weight-bolder"
+                        :class="shift.is_approved ? ' q-ml-md' : ''"
+                        style="font-size: 0.95em;"
+                    >{{ $t('shared.misc.out') }}</span>
+                </template>
+            </q-input>
+
+            <!-- comment and delete buttons -->
+            <div
+                class="row full-height"
+                :class="ui_store.is_mobile_mode ? 'col-12' : 'col-auto flex-center'"
+            >
+                <!-- desktop comment button -->
                 <q-btn
-                    v-if="ui_store.is_mobile_mode && !dense"
+                    v-if="!ui_store.is_mobile_mode"
+                    push
+                    dense
+                    :color="shift.is_approved ? 'white' : 'accent'"
                     :icon="shift.comment ? 'chat' : 'chat_bubble_outline'"
-                    :text-color="shift.comment ? ((shift.is_approved && isTimesheetApproved) ? 'white' : 'accent') : 'grey-5'"
-                    class="col-auto full-height q-mx-xs rounded-5 shadow-1"
+                    :text-color="shift.is_approved ? 'accent' : 'white'"
+                    class="col"
+                    :class="ui_store.is_mobile_mode ? 'q-mt-xs bg-dark' : ''"
                 >
+                    <q-badge
+                        v-if="shift.comment"
+                        floating
+                        rounded
+                        color="negative"
+                    />
+
                     <q-popup-edit
                         v-model="shift.comment"
                         :title="$t('timesheet.shift.fields.header_comment')"
@@ -110,13 +250,13 @@
                             color="white"
                             v-model="scope.value"
                             dense
-                            :readonly="(shift.is_approved || isTimesheetApproved)"
+                            :readonly="shift.is_approved"
                             autofocus
                             counter
                             bottom-slots
                             :maxlength="COMMENT_LENGTH_MAX"
                             class="q-pb-lg"
-                            :class="(shift.is_approved || isTimesheetApproved) ? 'cursor-not-allowed' : ''"
+                            :class="shift.is_approved ? 'cursor-not-allowed' : ''"
                             @keyup.enter="scope.set"
                         >
                             <template #append>
@@ -145,245 +285,23 @@
                     </q-popup-edit>
                 </q-btn>
 
-                <!-- shift type -->
-                <q-select
-                    ref="select"
-                    v-model="shift_type_selected"
-                    :standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
+                <q-btn
+                    v-if="!shift.is_approved"
+                    flat
                     dense
-                    :borderless="(shift.is_approved && isTimesheetApproved)"
-                    :readonly="(shift.is_approved && isTimesheetApproved)"
-                    :options-dense="!ui_store.is_mobile_mode"
-                    hide-dropdown-icon
-                    :menu-offset="[0, 10]"
-                    menu-anchor="bottom middle"
-                    menu-self="top middle"
-                    :options="SHIFT_OPTIONS"
-                    class="col rounded-5 q-mx-xs bg-dark"
-                    :class="!shift.is_approved && !isTimesheetApproved ? '' : 'inset-shadow'"
-                    popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
-                    :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
-                    popup-content-style="border: 2px solid var(--q-accent)"
-                    @blur="onBlurShiftTypeSelect"
-                    @update:model-value="option => shift.type = option.value"
+                    :disable="shift.is_approved"
+                    tabindex="-1"
+                    icon="las la-trash"
+                    text-color="negative"
+                    class="col"
+                    size="1.2em"
+                    :class="shift.is_approved ? 'invisible' : ''"
+                    @click="$emit('requestDelete')"
                 >
-                    <template #selected-item="scope">
-                        <div
-                            class="row items-center text-weight-bold q-ma-none q-pa-none no-wrap ellipsis full-width"
-                            :class="ui_store.is_mobile_mode ? 'full-height' : ''"
-                            :tabindex="scope.tabindex"
-                        >
-                            <q-icon
-                                :name="scope.opt.icon"
-                                :color="scope.opt.icon_color"
-                                size="sm"
-                                class="col-auto"
-                                :class="shift.is_approved ? 'q-mx-xs': 'q-mr-xs'"
-                            />
-                            <span
-                                style="line-height: 1.2em;"
-                                class="col-auto ellipsis"
-                                :class="!shift.is_approved ? '' : 'text-white'"
-                            >
-                                {{ $t(scope.opt.label) }}
-                            </span>
-                        </div>
-                    </template>
-
-                    <template #after>
-                        <q-icon
-                            v-if="shift.is_approved"
-                            :name="shift.is_remote ? 'las la-laptop' : 'las la-building'"
-                            size="1.2em"
-                            color="white"
-                            class="q-mr-sm"
-                        >
-                            <q-tooltip
-                                anchor="top middle"
-                                self="bottom middle"
-                                :offset="[0, 10]"
-                                class="text-uppercase text-weight-bold text-white bg-primary"
-                            >
-                                {{ shift.is_remote ? $t('timesheet.shift.types.REMOTE') :
-                                    $t('timesheet.shift.types.OFFICE') }}
-                            </q-tooltip>
-                        </q-icon>
-
-                        <q-toggle
-                            v-else
-                            v-model="shift.is_remote"
-                            :disable="shift.is_approved"
-                            dense
-                            keep-color
-                            size="3em"
-                            color="accent"
-                            icon="las la-building"
-                            checked-icon="las la-laptop"
-                        >
-                            <q-tooltip
-                                anchor="top middle"
-                                self="bottom middle"
-                                :offset="[0, 10]"
-                                class="text-uppercase text-weight-medium text-white bg-accent"
-                            >
-                                {{ shift.is_remote ? $t('timesheet.shift.types.REMOTE') :
-                                    $t('timesheet.shift.types.OFFICE') }}
-                            </q-tooltip>
-                        </q-toggle>
-                    </template>
-                </q-select>
-            </div>
-
-            <div class="col row items-start text-uppercase rounded-5 q-pa-xs">
-                <!-- punch in field -->
-                <q-input
-                    ref="start_time"
-                    v-model="shift.start_time"
-                    dense
-                    :borderless="(shift.is_approved && isTimesheetApproved)"
-                    :readonly="(shift.is_approved && isTimesheetApproved)"
-                    type="time"
-                    :standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
-                    label-slot
-                    lazy-rules
-                    no-error-icon
-                    hide-bottom-space
-                    :label-color="!shift.is_approved ? 'accent' : 'white'"
-                    class="col rounded-5 bg-dark"
-                    :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + (!shift.is_approved && !isTimesheetApproved ? '' : 'cursor-not-allowed inset-shadow')"
-                    :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
-                    input-style="font-size: 1.2em;"
-                    :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
-                    @blur="emit('onTimeFieldBlur')"
-                >
-                    <template #label>
-                        <span
-                            class="text-weight-bolder"
-                            :class="shift.is_approved ? ' q-ml-md' : ''"
-                            style="font-size: 0.95em;"
-                        >{{ $t('shared.misc.in') }}</span>
-                    </template>
-                </q-input>
-
-                <!-- punch out field -->
-                <q-input
-                    ref="end_time"
-                    v-model="shift.end_time"
-                    :standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
-                    dense
-                    :borderless="(shift.is_approved && isTimesheetApproved)"
-                    :readonly="(shift.is_approved && isTimesheetApproved)"
-                    type="time"
-                    label-slot
-                    no-error-icon
-                    hide-bottom-space
-                    :label-color="!shift.is_approved ? 'accent' : 'white'"
-                    :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
-                    input-style="font-size: 1.2em;"
-                    class="col rounded-5 bg-dark"
-                    :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + (shift.is_approved ? 'cursor-not-allowed q-px-xs transparent inset-shadow' : (isTimesheetApproved ? 'inset-shadow' : ''))"
-                    :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
-                    @blur="emit('onTimeFieldBlur')"
-                >
-                    <template #label>
-                        <span
-                            class="text-weight-bolder"
-                            :class="shift.is_approved ? ' q-ml-md' : ''"
-                            style="font-size: 0.95em;"
-                        >{{ $t('shared.misc.out') }}</span>
-                    </template>
-                </q-input>
-
-                <!-- comment and delete buttons -->
-                <div class="row full-height" :class="ui_store.is_mobile_mode ? 'col-12' : 'col-auto flex-center'">
-                    <!-- desktop comment button -->
-                    <q-btn
-                        v-if="!ui_store.is_mobile_mode"
-                        push
-                        dense
-                        :color="shift.is_approved ? 'white' : 'accent'"
-                        :icon="shift.comment ? 'chat' : 'chat_bubble_outline'"
-                        :text-color="shift.is_approved ? 'accent' : 'white'"
-                        class="col"
-                        :class="ui_store.is_mobile_mode ? 'q-mt-xs bg-dark' : ''"
-                    >   
-                        <q-badge 
-                            v-if="shift.comment"
-                            floating
-                            rounded
-                            color="negative"
-                        />
-                        <q-popup-edit
-                            v-model="shift.comment"
-                            :title="$t('timesheet.shift.fields.header_comment')"
-                            auto-save
-                            v-slot="scope"
-                            class="bg-dark"
-                        >
-                            <q-input
-                                color="white"
-                                v-model="scope.value"
-                                dense
-                                :readonly="shift.is_approved"
-                                autofocus
-                                counter
-                                bottom-slots
-                                :maxlength="COMMENT_LENGTH_MAX"
-                                class="q-pb-lg"
-                                :class="shift.is_approved ? 'cursor-not-allowed' : ''"
-                                @keyup.enter="scope.set"
-                            >
-                                <template #append>
-                                    <q-icon name="edit" />
-                                </template>
-
-                                <template #counter>
-                                    <div class="row flex-center">
-                                        <q-space />
-                                        <q-knob
-                                            :model-value="scope.value?.length"
-                                            readonly
-                                            :max="COMMENT_LENGTH_MAX"
-                                            size="1.6em"
-                                            :thickness="0.4"
-                                            :color="getCommentCounterColor(scope.value?.length ?? 0)"
-                                            track-color="grey-4"
-                                            class="col-auto q-mr-xs"
-                                        />
-                                        <span
-                                            :class="'col-auto text-weight-bolder text-' + getCommentCounterColor(scope.value?.length ?? 0)"
-                                        >{{ 280 - (scope.value?.length ?? 0) }}</span>
-                                    </div>
-                                </template>
-                            </q-input>
-                        </q-popup-edit>
-                    </q-btn>
-
-                    <q-btn
-                        v-if="!ui_store.is_mobile_mode && !shift.is_approved"
-                        flat
-                        dense
-                        :disable="shift.is_approved"
-                        tabindex="-1"
-                        icon="las la-trash"
-                        text-color="negative"
-                        class="col"
-                        size="1.2em"
-                        :class="shift.is_approved ? 'invisible' : ''"
-                        @click="$emit('requestDelete')"
-                    >
-                    </q-btn>
-                </div>
+                </q-btn>
             </div>
         </div>
-    </q-slide-item>
-
-    <q-separator
-        v-if="hasShiftAfter && ui_store.is_mobile_mode"
-        spaced
-        color="accent"
-        class="q-mx-md"
-    />
+    </div>
 </template>
 
 <style scoped>
diff --git a/src/modules/timesheets/components/shift-list-day.vue b/src/modules/timesheets/components/shift-list-day.vue
index ea3b9ae..64bd392 100644
--- a/src/modules/timesheets/components/shift-list-day.vue
+++ b/src/modules/timesheets/components/shift-list-day.vue
@@ -10,9 +10,11 @@
     import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
     import type { Shift } from 'src/modules/timesheets/models/shift.models';
     import type { TimesheetDay } from 'src/modules/timesheets/models/timesheet.models';
+import { isShiftOverlap } from 'src/modules/timesheets/utils/shift.util';
 
     const shift_api = useShiftApi();
     const timesheet_api = useTimesheetApi();
+    const shift_error_message = ref<string | undefined>();
 
     const { day, dense = false, approved = false } = defineProps<{
         timesheetId: number;
@@ -36,6 +38,15 @@
         }
         await shift_api.deleteShiftById(shift.id);
     };
+
+    const onTimeFieldBlur = () => {
+        const is_error = isShiftOverlap(day.shifts);
+        day.shifts.map(shift => shift.has_error = is_error);
+        if (is_error)
+            shift_error_message.value = 'timesheet.errors.SHIFT_OVERLAP_SHORT';
+        else
+            shift_error_message.value = undefined;
+    }
 </script>
 
 <template>
@@ -73,24 +84,26 @@
         <div
             v-for="shift, shift_index in day.shifts"
             :key="shift_index"
-            class="col"
+            class="col-auto"
         >
             <ShiftListDayRowMobile 
                 v-if="$q.platform.is.mobile"
                 v-model:shift="day.shifts[shift_index]!"
                 :is-timesheet-approved="approved"
+                :error-message="shift_error_message"
                 :dense="dense"
                 :has-shift-after="shift_index < day.shifts.length - 1"
                 @request-delete="deleteCurrentShift(shift)"
+                @on-time-field-blur="onTimeFieldBlur()"
             />
 
             <ShiftListDayRow
                 v-else
                 v-model:shift="day.shifts[shift_index]!"
                 :is-timesheet-approved="approved"
-                :dense="dense"
-                :has-shift-after="shift_index < day.shifts.length - 1"
+                :error-message="shift_error_message"
                 @request-delete="deleteCurrentShift(shift)"
+                @on-time-field-blur="onTimeFieldBlur()"
             />
 
         </div>
diff --git a/src/modules/timesheets/components/shift-list.vue b/src/modules/timesheets/components/shift-list.vue
index cf06e4b..382f808 100644
--- a/src/modules/timesheets/components/shift-list.vue
+++ b/src/modules/timesheets/components/shift-list.vue
@@ -95,7 +95,7 @@
                 <div
                     v-for="timesheet, timesheet_index of timesheet_store.timesheets"
                     :key="timesheet.timesheet_id"
-                    class="col fit"
+                    class="col column fit flex-center"
                 >
                     <transition
                         appear
@@ -108,7 +108,7 @@
                             flat
                             dense
                             :label="$t('timesheet.apply_preset_week')"
-                            class="text-uppercase text-weight-bold text-accent q-mx-lg q-py-none rounded-5"
+                            class="col-auto text-uppercase text-weight-bold text-accent q-mx-lg q-py-none rounded-5"
                             :class="timesheet.days.every(day => day.shifts.length < 1) ? '' : 'invisible'"
                             @click="timesheet_api.applyPreset(timesheet.timesheet_id)"
                         >
@@ -127,7 +127,7 @@
                         <div
                             v-for="day, day_index in timesheet.days"
                             :key="day.date"
-                            class="col-auto row q-ma-sm"
+                            class="col-auto row q-pa-sm fit"
                             :style="`animation-delay: ${day_index / 15}s;`"
                         >
                             <div
@@ -135,7 +135,7 @@
                                 class="col column full-width q-px-md q-py-sm"
                             >
                                 <q-card
-                                    class="rounded-5 shadow-12"
+                                    class="rounded-10 shadow-12"
                                     :class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-accent' : 'bg-dark'"
                                 >
 
@@ -174,7 +174,7 @@
                                         />
                                     </q-card-section>
 
-                                    <q-card-actions class="q-pa-none">
+                                    <q-card-section class="q-pa-none">
                                         <q-btn
                                             v-if="!(getDayApproval(day) || timesheet.is_approved)"
                                             square
@@ -183,15 +183,16 @@
                                             color="accent"
                                             icon="more_time"
                                             class="full-width"
+                                            style="border-radius: 0 0 10px 10px;"
                                             @click="addNewShift(day.shifts, day.date, timesheet.timesheet_id)"
                                         />
-                                    </q-card-actions>
+                                    </q-card-section>
                                 </q-card>
                             </div>
 
                             <div
                                 v-else
-                                class="col row full-width"
+                                class="col row full-width shadow-8 rounded-10"
                                 :class="(getDayApproval(day) || timesheet.is_approved) ? 'rounded-10 bg-accent' : ''"
                             >
                                 <div
diff --git a/src/modules/timesheets/components/timesheet-wrapper.vue b/src/modules/timesheets/components/timesheet-wrapper.vue
index 0d0a5bc..afdc57d 100644
--- a/src/modules/timesheets/components/timesheet-wrapper.vue
+++ b/src/modules/timesheets/components/timesheet-wrapper.vue
@@ -8,6 +8,7 @@
     import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
     import TimesheetErrorWidget from 'src/modules/timesheets/components/timesheet-error-widget.vue';
     import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
+    import ShiftListWeeklyOverview from 'src/modules/timesheets/components/mobile/shift-list-weekly-overview.vue';
 
     import { computed, onMounted } from 'vue';
     import { useShiftApi } from 'src/modules/timesheets/composables/use-shift-api';
@@ -38,9 +39,10 @@
     <div class="column items-center full-height">
         <LoadingOverlay v-model="timesheet_store.is_loading" />
 
+        <!-- top menu -->
         <div
             class="col-auto row items-center full-width q-px-lg"
-            :class="$q.platform.is.mobile && ($q.screen.width < $q.screen.height) ? 'justify-between' : 'q-mt-md q-px-md'"
+            :class="$q.platform.is.mobile && ($q.screen.width < $q.screen.height) ? 'justify-between' : 'q-mt-md q-pb-sm q-px-md'"
         >
             <!-- navigation btn -->
             <PayPeriodNavigator
@@ -90,80 +92,11 @@
             />
         </div>
 
+        <!-- error message widget for potential backend-provided errors -->
         <TimesheetErrorWidget class="col-auto" />
 
         <!-- mobile weekly overview widget -->
-        <div
-            v-if="$q.platform.is.mobile && $q.screen.width < $q.screen.height"
-            class="col-auto row items-start q-px-sm q-pt-sm full-width"
-        >
-            <!-- per timesheet -->
-            <div
-                v-for="timesheet, timesheet_index in timesheet_store.timesheets"
-                :key="timesheet_index"
-                class="col column flex-center q-pa-sm"
-            >
-                <!-- container -->
-                <div
-                    class="rounded-5 relative-position q-px-sm q-pt-sm q-pb-xs full-width shadow-4"
-                    style="border: 1px solid var(--q-accent);"
-                >
-                    <!-- label for week number -->
-                    <div
-                        class="self-start text-uppercase text-weight-bolder text-accent bg-secondary absolute-top-left q-px-xs"
-                        style="font-size: 0.8em; top: -7px; left: 10px; line-height: 1em;"
-                    >{{ $t('timesheet.week') + ` ${timesheet_index + 1}` }}</div>
-
-                    <!-- hours worked in the week -->
-                    <div class="col-auto row">
-                        <span class="text-weight-bolder text-uppercase text-accent text-caption q-mr-sm">{{
-                            $t('timesheet.total_hours') }}</span>
-                        <span>{{
-                            (timesheet.weekly_hours.regular +
-                            timesheet.weekly_hours.evening +
-                            timesheet.weekly_hours.emergency +
-                            timesheet.weekly_hours.overtime).toFixed(2)
-                        }}</span>
-                    </div>
-
-                    <!-- label for current shifts preview -->
-                    <div
-                        class="col-auto full-width text-center text-weight-medium text-caption text-uppercase q-mt-xs"
-                        style="font-size: 0.65em; line-height: 1.2em;"
-                    > {{ $t('timesheet.current_shifts') }}</div>
-
-                    <!-- preview of current number of shifts -->
-                    <div
-                        class="col row flex-center"
-                        style="height: 20px;"
-                    >
-                        <div
-                            v-for="day, day_index in timesheet.days"
-                            :key="day_index"
-                            class="col row flex-center"
-                        >
-                            <q-badge :color="day.shifts.length > 0 ? 'accent' : 'blue-grey-4'">
-                                <span class="text-weight-bolder">{{ day.shifts.length > 0 ? day.shifts.length : ''
-                                }}</span>
-                            </q-badge>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- button to apply weekly schedule preset -->
-                <div class="col-auto flex-center row q-pt-xs full-width">
-                    <q-btn
-                        v-if="timesheet.days.every(day => day.shifts.length < 1)"
-                        push
-                        dense
-                        color="accent"
-                        :label="$t('timesheet.apply_preset')"
-                        class="full-width"
-                        @click="timesheet_api.applyPreset(timesheet.timesheet_id)"
-                    />
-                </div>
-            </div>
-        </div>
+        <ShiftListWeeklyOverview />
 
         <ShiftList />
 
@@ -180,6 +113,6 @@
             @click="shift_api.saveShiftChanges"
         />
 
-        <ExpenseDialog :is-approved="is_timesheets_approved" />
+        <ExpenseDialog :is-approved="is_timesheets_approved" class="z-top"/>
     </div>
 </template>
\ No newline at end of file
diff --git a/src/pages/error-page.vue b/src/pages/error-page.vue
index 8bf297d..dae929a 100644
--- a/src/pages/error-page.vue
+++ b/src/pages/error-page.vue
@@ -1,19 +1,43 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+
+    const router = useRouter();
+</script>
+
 <template>
     <q-layout view="hHh lpR fFf">
         <q-page-container>
-            <q-page padding class="column justify-center items-center bg-secondary">
-                <q-card class="col-shrink rounded-20">
-                    <q-img src="src/assets/line-truck-1.jpg" height="20vh">
-                        <div
-                            class="absolute-bottom text-h4 text-center text-weight-bolder justify-center items-center row">
-                            <div class="q-pr-md text-primary text-h3 text-weight-bolder">404</div>
-                            PAGE NOT FOUND
+            <q-page class="row justify-center bg-secondary">
+                <div class=" column justify-center" :class="$q.platform.is.mobile ? 'col-11' : 'col-8'">
+                    <div class="column rounded-20 q-pa-xs bg-accent" :class="$q.platform.is.mobile ? 'col-5' : 'col-4'">
+                        <div class="col">
+                            <q-img src="src/assets/line-truck-1.jpg" fit="cover" class="relative-position fit border-radius-inherit">
+                                <div class="absolute-bottom text-center column flex-center">
+                                    <div class="q-pr-md text-white text-h2 text-weight-bolder">404</div>
+                                    <div class="q-pr-md text-white text-h5 text-weight-bold">{{
+                                        $t('error.not_found_header')
+                                    }}</div>
+                                </div>
+                            </q-img>
                         </div>
-                    </q-img>
-                    <q-card-section class="text-center text-h5 text-primary">
-                        {{ $t('notFoundPage.pageText') }}
-                    </q-card-section>
-                </q-card>
+
+                        <div class="col-auto text-center text-h6 text-weight-light bg-dark q-pa-md">
+                            <div>{{ $t('error.not_found_description') }}</div>
+                        </div>
+                    </div>
+
+                    <div class="col-auto row self-center q-py-md">
+                        <q-btn 
+                            push
+                            dense
+                            color="accent"
+                            :label="$t('error.go_back')"
+                            class="col-auto q-px-md q-py-xs"
+                            @click="router.go(-2)"
+                        />
+                    </div>
+                </div>
             </q-page>
         </q-page-container>
     </q-layout>
diff --git a/src/router/index.ts b/src/router/index.ts
index 6def0a9..0ddcc7d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,6 +3,7 @@ import { createMemoryHistory, createRouter, createWebHashHistory, createWebHisto
 import routes from './routes';
 import { useAuthStore } from 'src/stores/auth-store';
 import { RouteNames } from 'src/router/router-constants';
+import type { UserModuleAccess } from 'src/modules/shared/models/user.models';
 
 /*
  * If not building with SSR mode, you can
@@ -28,14 +29,19 @@ export default defineRouter(function (/* { store, ssrContext } */) {
         history: createHistory(process.env.VUE_ROUTER_BASE),
     });
 
-    Router.beforeEach(async (destinationPage) => {
-        const authStore = useAuthStore();
-        const result = await authStore.getProfile() ?? { status: 400, message: 'unknown error occured' };
+    Router.beforeEach(async (destination_page) => {
+        const auth_store = useAuthStore();
+        const result = await auth_store.getProfile() ?? { status: 400, message: 'unknown error occured' };
 
-        if ((destinationPage.meta.requiresAuth && !authStore.isAuthorizedUser) || (result.status >= 400 && destinationPage.name !== RouteNames.LOGIN)) {
+        if (destination_page.meta.requires_auth && !auth_store.user || (result.status >= 400 && destination_page.name !== RouteNames.LOGIN)) {
             console.error('no user account found');
             return { name: 'login' };
-        }
+        } 
+        
+        if (destination_page.meta.required_module && auth_store.user) {
+            if (!auth_store.user.user_module_access.includes(destination_page.meta.required_module as UserModuleAccess)) 
+                return {name: 'error'};
+        } 
     })
 
     return Router;
diff --git a/src/router/router-constants.ts b/src/router/router-constants.ts
index eff5290..3297a47 100644
--- a/src/router/router-constants.ts
+++ b/src/router/router-constants.ts
@@ -6,5 +6,8 @@ export enum RouteNames {
     EMPLOYEE_LIST = 'employee_list',
     EMPLOYEE_MANAGEMENT = 'employee_management',
     PROFILE = 'personal_profile',
-    TIMESHEET = 'timesheets'
+    TIMESHEET = 'timesheets',
+    HELP = 'help',
+    
+    ERROR = 'error',
 }
\ No newline at end of file
diff --git a/src/router/routes.ts b/src/router/routes.ts
index faf1ecb..b217d9e 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -1,36 +1,42 @@
 import type { RouteRecordRaw } from 'vue-router';
 import { RouteNames } from './router-constants';
+import { ModuleNames } from 'src/modules/shared/models/user.models';
 
 const routes: RouteRecordRaw[] = [
   {
     path: '/', 
     component: () => import('src/layouts/main-layout.vue'),
-    meta: { requiresAuth: true },
+    meta: { requires_auth: true },
     children: [
       { 
         path: '', 
         name: RouteNames.DASHBOARD,
         component: () => import('src/pages/dashboard-page.vue'),
+        meta: { required_module: ModuleNames.DASHBOARD }
       },
       {
         path: 'timesheet-approvals',
         name: RouteNames.TIMESHEET_APPROVALS,
         component: () => import('src/pages/timesheet-approval-page.vue'),
+        meta: { required_module: ModuleNames.TIMESHEETS_APPROVAL }
       },
       {
         path: 'employees',
         name: RouteNames.EMPLOYEE_LIST,
         component: () => import('src/pages/employee-list-page.vue'),
+        meta: { required_module: ModuleNames.EMPLOYEE_LIST }
       },
       {
         path: 'timesheet',
         name: RouteNames.TIMESHEET,
-        component: () => import('src/pages/timesheet-page.vue')
+        component: () => import('src/pages/timesheet-page.vue'),
+        meta: { required_module: ModuleNames.TIMESHEETS },
       },
       {
         path: 'user/profile',
         name: RouteNames.PROFILE,
         component: () => import('src/pages/profile-page.vue'),
+        meta: { required_module: ModuleNames.PERSONAL_PROFILE },
       },
     ],
   },
@@ -39,22 +45,23 @@ const routes: RouteRecordRaw[] = [
     path: '/v1/login', 
     name: RouteNames.LOGIN,
     component: () => import('src/pages/login-page.vue'),
-    meta: { requiresAuth: false },
+    meta: { requires_auth: false },
   },
 
   {
     path: '/login-success', 
     name: RouteNames.LOGIN_SUCCESS,
     component: () => import('src/modules/auth/pages/auth-login-popup-success.vue'),
-    meta: { requiresAuth: false },
+    meta: { requires_auth: false },
   },
 
   // Always leave this as last one,
   // but you can also remove it
   {
     path: '/:catchAll(.*)*',
+    name: RouteNames.ERROR,
     component: () => import('src/pages/error-page.vue'),
-    meta: { requiresAuth: false },
+    meta: { requires_auth: false },
   },
 ];
 
diff --git a/src/stores/auth-store.ts b/src/stores/auth-store.ts
index 17b54e7..3eecc6f 100644
--- a/src/stores/auth-store.ts
+++ b/src/stores/auth-store.ts
@@ -1,14 +1,13 @@
-import { computed, ref } from "vue";
+import { ref } from "vue";
+import { Notify } from "quasar";
 import { defineStore } from "pinia";
 import { AuthService } from "../modules/auth/services/services-auth";
-import { CAN_APPROVE_PAY_PERIODS, type User } from "src/modules/shared/models/user.models";
 import { useRouter } from "vue-router";
-import { Notify } from "quasar";
+import type { User } from "src/modules/shared/models/user.models";
 
 export const useAuthStore = defineStore('auth', () => {
     const user = ref<User>();
     const authError = ref("");
-    const isAuthorizedUser = computed(() => CAN_APPROVE_PAY_PERIODS.includes(user.value?.role ?? 'GUEST'));
     const router = useRouter();
 
     const login = () => {
@@ -62,6 +61,13 @@ export const useAuthStore = defineStore('auth', () => {
         return { status: 400, message: 'unknown error occured' };
     }
 
-    return { user, authError, isAuthorizedUser, login, oidcLogin, logout, getProfile };
+    return { 
+        user, 
+        authError, 
+        login, 
+        oidcLogin, 
+        logout, 
+        getProfile 
+    };
 });
 

From 9a70875f781c4f093280d4014a9b4e65e0d89190 Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Fri, 19 Dec 2025 17:20:03 -0500
Subject: [PATCH 5/6] feat(filters): add possibility of hiding inactive users,
 filter structure set up for future filters

---
 src/i18n/en-ca/index.ts                       |   1 +
 src/i18n/fr-ca/index.ts                       |   1 +
 .../shared/components/q-table-filters.vue     |   6 +-
 .../components/overview-list-filters.vue      |   9 +-
 .../components/overview-list-item.vue         |  73 +++++---
 .../components/overview-list.vue              | 166 +++++++++++++++---
 .../models/timesheet-overview.models.ts       |  52 ++++--
 .../components/timesheet-wrapper.vue          |   3 +-
 src/pages/timesheet-approval-page.vue         |  81 +--------
 src/stores/timesheet-store.ts                 |   2 -
 10 files changed, 235 insertions(+), 159 deletions(-)

diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index 3a60600..1ba8913 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -284,6 +284,7 @@ export default {
             mileage: "mileage",
             verified: "approved",
             unverified: "pending",
+            inactive: "inactive",
         },
         tooltip: {
             button_detailed_view: "detailed view",
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 54c3b61..698baeb 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -285,6 +285,7 @@ export default {
             mileage: "kilométrage",
             verified: "approuvé",
             unverified: "à vérifier",
+            inactive: "inactif",
         },
         tooltip: {
             button_detailed_view: "vue détaillée",
diff --git a/src/modules/shared/components/q-table-filters.vue b/src/modules/shared/components/q-table-filters.vue
index 6696835..40ade84 100644
--- a/src/modules/shared/components/q-table-filters.vue
+++ b/src/modules/shared/components/q-table-filters.vue
@@ -9,11 +9,11 @@
             dense
             rounded
             debounce="300"
-            class="right-rounded"
             :label="$t('shared.label.search')" 
-            label-color="accent" 
-            bg-color="white" 
             color="accent"
+            bg-color="white" 
+            label-color="accent" 
+            class="text-primary"
     >
         <template #prepend>
             <q-icon 
diff --git a/src/modules/timesheet-approval/components/overview-list-filters.vue b/src/modules/timesheet-approval/components/overview-list-filters.vue
index 41ebeee..b4adcc4 100644
--- a/src/modules/timesheet-approval/components/overview-list-filters.vue
+++ b/src/modules/timesheet-approval/components/overview-list-filters.vue
@@ -2,9 +2,9 @@
     setup
     lang="ts"
 >
-import { ref } from 'vue';
+    import type { PayPeriodOverviewFilters } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
 
-    const boolean_filters = ref([])
+    const filters = defineModel<PayPeriodOverviewFilters>('filters', { required: true })
 </script>
 
 <template>
@@ -17,15 +17,14 @@ import { ref } from 'vue';
 
         <div class="col row">
             <q-checkbox
-                v-model="boolean_filters"
+                v-model="filters.is_showing_inactive"
                 size="lg"
-                val="inactive"
                 color="accent"
                 label="show inactive"
                 class="col"
             />
             <q-checkbox
-                v-model="boolean_filters"
+                v-model="filters.is_showing_team_only"
                 size="lg"
                 val="team"
                 color="accent"
diff --git a/src/modules/timesheet-approval/components/overview-list-item.vue b/src/modules/timesheet-approval/components/overview-list-item.vue
index 30720e6..4d7abaf 100644
--- a/src/modules/timesheet-approval/components/overview-list-item.vue
+++ b/src/modules/timesheet-approval/components/overview-list-item.vue
@@ -24,16 +24,20 @@
         >
             <q-card
                 class="rounded-10 shadow-5"
-                :style="`animation-delay: ${index / 15}s;`"
+                :style="`animation-delay: ${index / 15}s; opacity: ${row.is_active ? '1' : '0.5'}; transform: scale(${row.is_active ? '1' : '0.9'})`"
             >
                 <!-- Card header with employee name and details button-->
                 <q-card-section
                     horizontal
-                    class="q-py-none q-px-sm q-ma-none justify-between items-center bg-primary text-white"
+                    class="q-py-xs q-px-sm q-ma-none justify-between items-center bg-primary text-white"
                 >
                     <div>
-                        <span class="text-h5 text-uppercase text-weight-medium text-accent q-mr-xs">{{ row.employee_name.split(' ')[0]
-                            }}</span>
+                        <span
+                            class="text-h5 text-uppercase text-weight-medium q-mr-xs"
+                            :class="row.is_active ? 'text-accent' : 'text-negative'"
+                        >
+                            {{ row.employee_name.split(' ')[0] }}
+                        </span>
                         <span class="text-uppercase text-weight-light">{{ row.employee_name.split(' ')[1] }}</span>
                     </div>
 
@@ -45,7 +49,7 @@
                         unelevated
                         class="col-auto q-pa-none q-ma-none"
                         color="accent"
-                        icon="work_history"
+                        icon="las la-chart-pie"
                         @click="emit('clickDetails', row)"
                     >
                         <q-tooltip
@@ -55,6 +59,8 @@
                         >
                             {{ $t('timesheet_approvals.tooltip.button_detailed_view') }}
                         </q-tooltip>
+
+                        <q-icon name="las la-chart-bar" color="accent"/>
                     </q-btn>
                 </q-card-section>
 
@@ -67,12 +73,12 @@
                             <div class="col column">
                                 <span
                                     class="text-weight-bold text-uppercase q-pa-none q-my-none"
-                                    :class="row.regular_hours > 80 ? 'text-negative' : 'text-accent'"
+                                    :class="row.regular_hours > 80 || !row.is_active ? 'text-negative' : 'text-accent'"
                                 > {{
                                     $t('shared.shift_type.regular') }} </span>
                                 <span
                                     class="text-weight-bolder text-h3 q-py-none"
-                                    :class="row.regular_hours > 80 ? 'text-negative' : ''"
+                                    :class="row.regular_hours > 80 || !row.is_active ? 'text-negative' : ''"
                                 > {{ row.regular_hours }} </span>
                                 <q-separator class="q-mr-sm" />
                             </div>
@@ -133,30 +139,49 @@
                 <q-card-section
                     horizontal
                     class="justify-between items-center text-weight-bold q-pa-none"
-                    :class="row.is_approved ? 'text-white bg-accent' : 'bg-dark text-accent'"
+                    :class="row.is_active ? (row.is_approved ? 'text-white bg-accent' : 'bg-dark text-accent') : 'bg-transparent'"
                 >
-                    <div class="col-auto">
-                        <span class="text-uppercase text-h6 q-ml-sm text-weight-bolder"> {{ row.total_hours }} </span>
-                        <span class="text-uppercase text-weight-bold text-caption q-ml-xs"> total </span>
+                    <div
+                        v-if="row.is_active"
+                        class="col row full-width"
+                    >
+                        <div class="col">
+                            <span class="text-uppercase text-h6 q-ml-sm text-weight-bolder"> {{ row.total_hours }}
+                            </span>
+                            <span class="text-uppercase text-weight-bold text-caption q-ml-xs"> total </span>
+                        </div>
+
+                        <div
+                            class="col-auto q-py-xs q-px-md"
+                        >
+                            <q-checkbox
+                                v-model="modelApproval"
+                                dense
+                                left-label
+                                keep-color
+                                size="lg"
+                                checked-icon="lock"
+                                unchecked-icon="lock_open"
+                                :color="row.is_approved ? 'white' : 'accent'"
+                                :label="row.is_approved ? $t('timesheet_approvals.table.verified') : $t('timesheet_approvals.table.unverified')"
+                                class="text-uppercase"
+                                :class="row.is_approved ? '' : 'text-accent'"
+                            />
+                        </div>
                     </div>
 
                     <div
-                        class="col-auto q-py-xs q-px-md"
-                        style="border: 1px solid var(--q-accent);"
+                        v-else
+                        class="col row flex-center q-px-sm full-width"
                     >
-                        <q-checkbox
-                            v-model="modelApproval"
-                            dense
-                            left-label
-                            keep-color
+                        <q-icon
+                            name="block"
+                            color="negative"
+                            class="col-auto"
                             size="lg"
-                            checked-icon="lock"
-                            unchecked-icon="lock_open"
-                            :color="row.is_approved ? 'white' : 'accent'"
-                            :label="row.is_approved ? $t('timesheet_approvals.table.verified') : $t('timesheet_approvals.table.unverified')"
-                            class="text-uppercase"
-                            :class="row.is_approved ? '' : 'text-accent'"
                         />
+                        <span class="col q-pl-sm text-uppercase text-weight-bold text-h5">{{
+                            $t('timesheet_approvals.table.inactive') }}</span>
                     </div>
                 </q-card-section>
             </q-card>
diff --git a/src/modules/timesheet-approval/components/overview-list.vue b/src/modules/timesheet-approval/components/overview-list.vue
index 9b59618..459b8a7 100644
--- a/src/modules/timesheet-approval/components/overview-list.vue
+++ b/src/modules/timesheet-approval/components/overview-list.vue
@@ -1,33 +1,64 @@
-<script setup lang="ts">
-/* eslint-disable */
-import { computed, ref } from 'vue';
-import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
-import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
-import { useTimesheetStore } from 'src/stores/timesheet-store';
-import { overview_column_names, pay_period_overview_columns, type TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
+<script
+    setup
+    lang="ts"
+>
+    /* eslint-disable */
+    import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
+    import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
+    import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
+    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
+    import OverviewListFilters from 'src/modules/timesheet-approval/components/overview-list-filters.vue';
 
-const timesheet_store = useTimesheetStore();
+    import { computed, ref } from 'vue';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
+    import { overview_column_names, pay_period_overview_columns, PayPeriodOverviewFilters, type TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
 
-const visible_columns = ref<string[]>([
-    overview_column_names.REGULAR,
-    overview_column_names.EVENING,
-    overview_column_names.EMERGENCY,
-    overview_column_names.SICK,
-    overview_column_names.VACATION,
-    overview_column_names.HOLIDAY,
-    overview_column_names.OVERTIME,
-    overview_column_names.IS_APPROVED,
-]);
 
-const onClickedDetails = async (row: TimesheetOverview) => {
-    timesheet_store.current_pay_period_overview = row;
-    await timesheet_store.getTimesheetsByOptionalEmployeeEmail(row.email);
+    const timesheet_store = useTimesheetStore();
+    const timesheet_approval_api = useTimesheetApprovalApi();
 
-    timesheet_store.is_details_dialog_open = true;
-};
+    const visible_columns = ref<string[]>([
+        overview_column_names.REGULAR,
+        overview_column_names.EVENING,
+        overview_column_names.EMERGENCY,
+        overview_column_names.SICK,
+        overview_column_names.VACATION,
+        overview_column_names.HOLIDAY,
+        overview_column_names.OVERTIME,
+        overview_column_names.IS_APPROVED,
+    ]);
+    const is_showing_filters = ref(false);
+    const search_string = ref('');
 
-    const overview_rows = computed(() => timesheet_store.pay_period_overviews.filter(overview => overview))
+    const overview_rows = computed(() => timesheet_store.pay_period_overviews.filter(overview => overview));
+    const overview_filters = ref<PayPeriodOverviewFilters>({
+        is_showing_inactive: false,
+        is_showing_team_only: false,
+        supervisors: [],
+        name_search_string: search_string.value,
+    });
 
+    const onClickedDetails = async (row: TimesheetOverview) => {
+        timesheet_store.current_pay_period_overview = row;
+        await timesheet_store.getTimesheetsByOptionalEmployeeEmail(row.email);
+
+        timesheet_store.is_details_dialog_open = true;
+    };
+
+    const filterEmployeeRows = (rows: readonly TimesheetOverview[], terms: PayPeriodOverviewFilters): TimesheetOverview[] => {
+        let result = [...rows];
+
+        if (!terms.is_showing_inactive) {
+            result = result.filter(row => row.is_active);
+        }
+
+        // if (terms.name_search_string) {
+        //     result = result.filter(row => row.employee_name.includes(terms.name_search_string ?? ''));
+        // }
+
+        return result;
+    };
 </script>
 
 <template>
@@ -45,10 +76,12 @@ const onClickedDetails = async (row: TimesheetOverview) => {
                 :rows="overview_rows"
                 :columns="pay_period_overview_columns"
                 row-key="email"
-                :filter="timesheet_store.search_filter"
                 :grid="timesheet_store.is_approval_grid_mode"
                 :dense="timesheet_store.is_approval_grid_mode"
                 hide-pagination
+                :pagination="{ sortBy: 'is_active' }"
+                :filter="overview_filters"
+                :filter-method="filterEmployeeRows"
                 color="accent"
                 :rows-per-page-options="[0]"
                 card-container-class="justify-center"
@@ -59,6 +92,87 @@ const onClickedDetails = async (row: TimesheetOverview) => {
                 :no-results-label="$t('shared.error.no_search_results')"
                 :loading-label="$t('shared.label.loading')"
             >
+                <template #top>
+                    <div class="column full-width">
+
+                        <div
+                            class="col-auto row items-start full-width q-px-lg"
+                            :class="($q.platform.is.mobile ? 'column flex-center' : 'row q-mt-md') + (timesheet_store.is_approval_grid_mode ? '' : ' q-mb-md')"
+                        >
+                            <PayPeriodNavigator
+                                @date-selected="timesheet_approval_api.getTimesheetOverviews"
+                                @pressed-next-button="timesheet_approval_api.getTimesheetOverviews"
+                                @pressed-previous-button="timesheet_approval_api.getTimesheetOverviews"
+                                :class="$q.platform.is.mobile ? 'q-mb-sm' : ''"
+                                style="height: 40px;"
+                            />
+    
+                            <q-space />
+    
+                            <div
+                                class="col-auto row no-wrap items-start"
+                                :class="$q.platform.is.mobile ? 'q-mb-md' : ''"
+                            >
+                                <q-btn-toggle
+                                    v-model="timesheet_store.is_approval_grid_mode"
+                                    push
+                                    rounded
+                                    color="white"
+                                    text-color="accent"
+                                    toggle-color="accent"
+                                    class="col-auto"
+                                    :class="$q.platform.is.mobile ? 'q-mb-sm' : 'q-mr-sm'"
+                                    :options="[
+                                        { icon: 'grid_view', value: true },
+                                        { icon: 'view_list', value: false },
+                                    ]"
+                                    style="height: 40px;"
+                                />
+    
+                                <q-btn
+                                    push
+                                    rounded
+                                    icon="download"
+                                    color="accent"
+                                    :label="$q.screen.lt.md ? '' : $t('shared.label.download')"
+                                    class="col-auto q-mr-sm"
+                                    style="height: 40px;"
+                                    @click="timesheet_store.is_report_dialog_open = true"
+                                />
+    
+                                <QTableFilters
+                                    v-model:search="search_string"
+                                    class="col-auto q-mb-xs"
+                                />
+    
+                                <q-btn
+                                    flat
+                                    icon="filter_alt"
+                                    color="white"
+                                    :label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
+                                    class="col q-ml-sm self-stretch bg-accent"
+                                    style="border-radius: 5px 5px 0 0;"
+                                    @click="is_showing_filters = !is_showing_filters"
+                                />
+                            </div>
+                        </div>
+    
+                        <q-slide-transition>
+                            <OverviewListFilters
+                                v-if="is_showing_filters"
+                                v-model:filters="overview_filters"
+                                class="q-mx-lg col-auto"
+                            />
+                        </q-slide-transition>
+    
+                        <q-separator
+                            color="accent"
+                            size="5px"
+                            class="q-mx-lg"
+                        />
+                    </div>
+                </template>
+
                 <template #header="props">
                     <q-tr
                         :props="props"
@@ -115,7 +229,7 @@ const onClickedDetails = async (row: TimesheetOverview) => {
                                         {{ props.value.split(' ')[0] }}
                                     </span>
                                     <span class="text-uppercase text-weight-light">{{ props.value.split(' ')[1]
-                                    }}</span>
+                                        }}</span>
                                 </div>
                                 <span v-else>{{ props.value }}</span>
                             </div>
diff --git a/src/modules/timesheet-approval/models/timesheet-overview.models.ts b/src/modules/timesheet-approval/models/timesheet-overview.models.ts
index 62edb8c..6e9225d 100644
--- a/src/modules/timesheet-approval/models/timesheet-overview.models.ts
+++ b/src/modules/timesheet-approval/models/timesheet-overview.models.ts
@@ -1,8 +1,9 @@
 import type { QTableColumn } from "quasar";
 
-export interface TimesheetOverview {
+export class TimesheetOverview {
     email: string;
     employee_name: string;
+    is_active: boolean;
     regular_hours: number;
     other_hours: {
         evening_hours: number;
@@ -16,6 +17,25 @@ export interface TimesheetOverview {
     expenses: number;
     mileage: number;
     is_approved: boolean;
+
+    constructor() {
+        this.email = '';
+        this.employee_name = 'John Doe';
+        this.is_active = true;
+        this.regular_hours = 0;
+        this.other_hours = {
+            evening_hours: 0,
+            emergency_hours: 0,
+            overtime_hours: 0,
+            sick_hours: 0,
+            holiday_hours: 0,
+            vacation_hours: 0,
+        }
+        this.total_hours = 0;
+        this.expenses = 0;
+        this.mileage = 0;
+        this.is_approved = false;
+    };
 }
 
 export interface PayPeriodOverviewResponse {
@@ -28,22 +48,11 @@ export interface PayPeriodOverviewResponse {
   employees_overview: TimesheetOverview[];
 }
 
-export const default_pay_period_overview: TimesheetOverview = {
-    email: '',
-    employee_name: '',
-    regular_hours: -1,
-    other_hours: {
-        evening_hours: -1,
-        emergency_hours: -1,
-        overtime_hours: -1,
-        sick_hours: -1,
-        holiday_hours: -1,
-        vacation_hours: -1,
-    },
-    total_hours: -1,
-    expenses: -1,
-    mileage: -1,
-    is_approved: false
+export interface PayPeriodOverviewFilters {
+    is_showing_inactive: boolean;
+    is_showing_team_only: boolean;
+    supervisors: string[];
+    name_search_string: string | number | null;
 }
 
 export const overview_column_names = {
@@ -58,7 +67,8 @@ export const overview_column_names = {
     OVERTIME: 'OVERTIME',
     EXPENSES: 'expenses',
     MILEAGE: 'mileage',
-    IS_APPROVED: 'is_approved', 
+    IS_APPROVED: 'is_approved',
+    IS_ACTIVE: 'is_active', 
 }
 
 export const pay_period_overview_columns: QTableColumn[] = [
@@ -145,5 +155,11 @@ export const pay_period_overview_columns: QTableColumn[] = [
         label: 'timesheet_approvals.table.is_approved',
         field: 'is_approved',
         sortable: true,
+    },
+    {
+        name: overview_column_names.IS_ACTIVE,
+        label: 'timesheet_approvals.table.is_active',
+        field: 'is_active',
+        sortable: true,
     }
 ]
\ No newline at end of file
diff --git a/src/modules/timesheets/components/timesheet-wrapper.vue b/src/modules/timesheets/components/timesheet-wrapper.vue
index afdc57d..bf0ed13 100644
--- a/src/modules/timesheets/components/timesheet-wrapper.vue
+++ b/src/modules/timesheets/components/timesheet-wrapper.vue
@@ -31,7 +31,8 @@
     }>();
 
     onMounted(async () => {
-        await timesheet_api.getTimesheetsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
+        if (mode === 'normal')
+            await timesheet_api.getTimesheetsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
     });
 </script>
 
diff --git a/src/pages/timesheet-approval-page.vue b/src/pages/timesheet-approval-page.vue
index d2aea1f..72a6def 100644
--- a/src/pages/timesheet-approval-page.vue
+++ b/src/pages/timesheet-approval-page.vue
@@ -6,21 +6,16 @@
     import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
     import OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
     import DetailsDialog from 'src/modules/timesheet-approval/components/details-dialog.vue';
-    import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
-    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
-    import OverviewListFilters from 'src/modules/timesheet-approval/components/overview-list-filters.vue';
     import OverviewReport from 'src/modules/timesheet-approval/components/overview-report.vue';
 
     import { date } from 'quasar';
-    import { onMounted, ref } from 'vue';
+    import { onMounted } from 'vue';
     import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
 
     const timesheet_approval_api = useTimesheetApprovalApi();
     const timesheet_store = useTimesheetStore();
 
-    const is_showing_filters = ref(false);
-
     onMounted(async () => {
         await timesheet_approval_api.getTimesheetOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
     });
@@ -44,80 +39,6 @@
             :timesheets="timesheet_store.timesheets"
         />
 
-        <div
-            class="col-auto row items-start full-width q-px-lg"
-            :class="($q.platform.is.mobile ? 'column flex-center' : 'row q-mt-md') + (timesheet_store.is_approval_grid_mode ? '' : ' q-mb-md')"
-        >
-            <PayPeriodNavigator
-                @date-selected="timesheet_approval_api.getTimesheetOverviews"
-                @pressed-next-button="timesheet_approval_api.getTimesheetOverviews"
-                @pressed-previous-button="timesheet_approval_api.getTimesheetOverviews"
-                :class="$q.platform.is.mobile ? 'q-mb-sm' : ''"
-                style="height: 40px;"
-            />
-
-            <q-space />
-
-            <div
-                class="col-auto row no-wrap items-start"
-                :class="$q.platform.is.mobile ? 'q-mb-md' : ''"
-            >
-                <q-btn-toggle
-                    v-model="timesheet_store.is_approval_grid_mode"
-                    push
-                    rounded
-                    color="white"
-                    text-color="accent"
-                    toggle-color="accent"
-                    class="col-auto"
-                    :class="$q.platform.is.mobile ? 'q-mb-sm' : 'q-mr-sm'"
-                    :options="[
-                        { icon: 'grid_view', value: true },
-                        { icon: 'view_list', value: false },
-                    ]"
-                    style="height: 40px;"
-                />
-
-                <q-btn
-                    push
-                    rounded
-                    icon="download"
-                    color="accent"
-                    :label="$q.screen.lt.md ? '' : $t('shared.label.download')"
-                    class="col-auto q-mr-sm"
-                    style="height: 40px;"
-                    @click="timesheet_store.is_report_dialog_open = true"
-                />
-
-                <QTableFilters
-                    v-model:search="timesheet_store.search_filter"
-                    class="col-auto q-mb-xs"
-                />
-
-                <q-btn
-                    flat
-                    icon="filter_alt"
-                    color="white"
-                    :label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
-                    class="col q-ml-sm self-stretch bg-accent"
-                    style="border-radius: 5px 5px 0 0;"
-                    @click="is_showing_filters = !is_showing_filters"
-                />
-            </div>
-        </div>
-
-        <q-slide-transition class="col-auto">
-            <OverviewListFilters
-                v-if="is_showing_filters"
-                class="q-mx-lg col-auto"
-            />
-        </q-slide-transition>
-
-        <q-separator
-            color="accent"
-            size="5px"
-            class="q-mx-lg"
-        />
         <OverviewReport />
 
         <OverviewList class="col" />
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index 742b207..c93081e 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -23,7 +23,6 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     const is_details_dialog_open = ref(false);
     const selected_employee_name = ref<string>();
     const current_pay_period_overview = ref<TimesheetOverview>();
-    const search_filter = ref<string | number | null>('');
     const is_approval_grid_mode = ref<boolean>(true);
     const pay_period_report = ref();
 
@@ -147,7 +146,6 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         is_report_dialog_open,
         is_approval_grid_mode,
         is_details_dialog_open,
-        search_filter,
         pay_period,
         pay_period_overviews,
         current_pay_period_overview,

From ec0ea14a918e8f85cc9aab5795e37b4ca3907aa8 Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Mon, 22 Dec 2025 15:51:11 -0500
Subject: [PATCH 6/6] feat(timesheet-approval): add toggle of approval for
 timesheets through overview card

---
 src/css/app.scss                              |  8 ----
 .../details-dialog-chart-shift-types.vue      | 10 ++--
 .../components/details-dialog.vue             | 34 +++++++-------
 .../components/overview-list-item.vue         | 46 ++++++++++++++-----
 .../components/overview-list.vue              |  7 ++-
 .../composables/use-timesheet-approval-api.ts | 15 ++++++
 .../services/timesheet-approval-service.ts    |  6 +++
 .../timesheets/components/shift-list.vue      | 44 +++++++++++++-----
 .../components/timesheet-wrapper.vue          | 16 +++++--
 src/stores/timesheet-store.ts                 | 30 ++++++++++--
 10 files changed, 153 insertions(+), 63 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index d16f13e..ab0be1e 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -3,14 +3,6 @@
   .rounded-#{$size} {
     border-radius: #{$size}px !important;
   } 
-
-  .rounded-#{$size} > div:first-child {
-    border-radius: #{$size}px #{$size}px 0 0 !important;
-  }
-
-  .rounded-#{$size} > div:last-child {
-    border-radius: 0 0 #{$size}px #{$size}px !important;
-  }
 }
 
 .text-fb-blue {
diff --git a/src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue b/src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue
index 91da8cf..74d3d65 100644
--- a/src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue
+++ b/src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue
@@ -4,6 +4,7 @@
 >
     /* eslint-disable */
     import { onMounted, ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
     import { colors } from 'quasar';
     import { useQuasar } from 'quasar';
     import { Doughnut } from 'vue-chartjs';
@@ -11,6 +12,7 @@
     import { useTimesheetStore } from 'src/stores/timesheet-store';
 
     const $q = useQuasar();
+    const { t } = useI18n();
 
     ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale);
     ChartJS.defaults.font.family = '"Roboto", sans-serif';
@@ -20,10 +22,10 @@
     const timesheet_store = useTimesheetStore();
 
     const shift_type_labels = ref<string[]>([
-        timesheet_store.current_pay_period_overview!.regular_hours.toString() + 'h',
-        timesheet_store.current_pay_period_overview!.other_hours.evening_hours.toString() + 'h',
-        timesheet_store.current_pay_period_overview!.other_hours.emergency_hours.toString() + 'h',
-        timesheet_store.current_pay_period_overview!.other_hours.overtime_hours.toString() + 'h',
+        t('shared.shift_type.regular'),
+        t('shared.shift_type.evening'),
+        t('shared.shift_type.emergency'),
+        t('shared.shift_type.overtime'),
     ]);
 
     const shift_type_totals = ref<ChartDataset<'doughnut'>[]>([]);
diff --git a/src/modules/timesheet-approval/components/details-dialog.vue b/src/modules/timesheet-approval/components/details-dialog.vue
index abfb4e4..5dadf21 100644
--- a/src/modules/timesheet-approval/components/details-dialog.vue
+++ b/src/modules/timesheet-approval/components/details-dialog.vue
@@ -25,36 +25,34 @@
         @show="is_dialog_open = true"
         @hide="is_dialog_open = false"
     >
-        <q-card
-            class="shadow-12 rounded-15 bg-secondary hide-scrollbar"
+        <div
+            class="column bg-secondary hide-scrollbar shadow-12 rounded-15 q-pa-sm no-wrap"
             :style="($q.screen.lt.md ? '' : 'width:80vw !important;') + ($q.dark.isActive ? ' border: 2px solid var(--q-accent)' : '')"
         >
-
             <!-- employee name -->
-            <q-card-section class="text-h4 text-weight-bolder text-center text-uppercase q-px-none q-py-sm">
+            <div class="col-auto text-h4 text-weight-bolder text-center text-uppercase q-px-none q-py-sm">
                 <span>{{ timesheet_store.selected_employee_name }}</span>
-            </q-card-section>
+            </div>
 
             <!-- employee pay period details using chart -->
-            <q-card-section
-                v-if="is_dialog_open"
-                :horizontal="!$q.screen.lt.md"
-                class="q-px-md rounded-10 no-wrap"
+            <div
+                v-if="is_dialog_open && !$q.platform.is.mobile"
+                class="col-4 q-px-md no-wrap"
+                :class="$q.platform.is.mobile ? 'column' : 'row'"
             >
                 <DetailsDialogChartHoursWorked class="col" />
-                <DetailsDialogChartShiftTypes class="col q-ma-lg" />
+                <DetailsDialogChartShiftTypes class="col" />
                 <DetailsDialogChartExpenses class="col" />
-            </q-card-section>
+            </div>
 
-            <q-card-section>
+            <div class="col-auto">
                 <ExpenseDialogList />
-            </q-card-section>
+            </div>
 
             <!-- list of shifts -->
-            <q-card-section class="col-auto">
-                <TimesheetWrapper mode="approval" />
-            </q-card-section>
-            <q-separator />
-        </q-card>
+            <div class="col column no-wrap">
+                <TimesheetWrapper mode="approval" class="col"/>
+            </div>
+        </div>
     </q-dialog>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/overview-list-item.vue b/src/modules/timesheet-approval/components/overview-list-item.vue
index 4d7abaf..55599e5 100644
--- a/src/modules/timesheet-approval/components/overview-list-item.vue
+++ b/src/modules/timesheet-approval/components/overview-list-item.vue
@@ -13,7 +13,20 @@
 
     const emit = defineEmits<{
         'clickDetails': [overview: TimesheetOverview];
+        'clickApprovalAll' : [is_approved: boolean];
     }>();
+
+    const getMinutes = (hours: number) => {
+        const minutes_percent = hours - Math.floor(hours);
+        const minutes = Math.round(minutes_percent * 60);
+        return minutes > 1 ? minutes.toString() : '0';
+    }
+
+    const getHoursMinutesString = (hours: number): string => {
+        const flat_hours = Math.floor(hours);
+        const minutes = Math.round((hours - flat_hours) * 60);
+        return `${flat_hours}h ${minutes > 1 ? minutes : ''}`
+    }
 </script>
 
 <template>
@@ -60,7 +73,10 @@
                             {{ $t('timesheet_approvals.tooltip.button_detailed_view') }}
                         </q-tooltip>
 
-                        <q-icon name="las la-chart-bar" color="accent"/>
+                        <q-icon
+                            name="las la-chart-bar"
+                            color="accent"
+                        />
                     </q-btn>
                 </q-card-section>
 
@@ -79,7 +95,7 @@
                                 <span
                                     class="text-weight-bolder text-h3 q-py-none"
                                     :class="row.regular_hours > 80 || !row.is_active ? 'text-negative' : ''"
-                                > {{ row.regular_hours }} </span>
+                                > {{ getHoursMinutesString(row.regular_hours) }} </span>
                                 <q-separator class="q-mr-sm" />
                             </div>
 
@@ -94,11 +110,13 @@
                                     <span
                                         class="text-weight-bold text-accent text-uppercase q-pa-none q-my-none"
                                         style="font-size: 0.7em;"
-                                    > {{ $t(`shared.shift_type.${index.replace('_hours', '')}`) }} </span>
+                                    >
+                                        {{ $t(`shared.shift_type.${index.replace('_hours', '')}`) }}
+                                    </span>
                                     <span
                                         class="text-weight-bolder q-pa-none q-mb-xs"
                                         style="font-size: 1.2em; line-height: 1em;"
-                                    > {{ hour_type }} </span>
+                                    > {{ getHoursMinutesString(hour_type) }} </span>
                                 </div>
                             </div>
                         </div>
@@ -139,21 +157,24 @@
                 <q-card-section
                     horizontal
                     class="justify-between items-center text-weight-bold q-pa-none"
-                    :class="row.is_active ? (row.is_approved ? 'text-white bg-accent' : 'bg-dark text-accent') : 'bg-transparent'"
+                    :class="row.is_active ? (row.is_approved ? 'text-white bg-accent' : 'bg-dark') : 'bg-transparent'"
                 >
                     <div
                         v-if="row.is_active"
                         class="col row full-width"
                     >
-                        <div class="col">
-                            <span class="text-uppercase text-h6 q-ml-sm text-weight-bolder"> {{ row.total_hours }}
-                            </span>
-                            <span class="text-uppercase text-weight-bold text-caption q-ml-xs"> total </span>
+                        <div
+                            class="col text-uppercase"
+                            :class="row.total_hours > 80 || !row.is_active ? 'text-negative' : ''"
+                        >
+                            <span class="text-h6 q-ml-sm text-weight-bolder">{{ 'Total : ' + Math.floor(row.total_hours)
+                                }}</span>
+                            <span class="text-uppercase text-weight-medium text-caption">H</span>
+                            <span class="text-h6 q-ml-sm text-weight-bolder">{{ getMinutes(row.total_hours) }}</span>
+                            <span class="text-uppercase text-weight-medium text-caption">M</span>
                         </div>
 
-                        <div
-                            class="col-auto q-py-xs q-px-md"
-                        >
+                        <div class="col-auto q-py-xs q-px-md">
                             <q-checkbox
                                 v-model="modelApproval"
                                 dense
@@ -166,6 +187,7 @@
                                 :label="row.is_approved ? $t('timesheet_approvals.table.verified') : $t('timesheet_approvals.table.unverified')"
                                 class="text-uppercase"
                                 :class="row.is_approved ? '' : 'text-accent'"
+                                @update:model-value="value => $emit('clickApprovalAll', value)"
                             />
                         </div>
                     </div>
diff --git a/src/modules/timesheet-approval/components/overview-list.vue b/src/modules/timesheet-approval/components/overview-list.vue
index 459b8a7..08dcedf 100644
--- a/src/modules/timesheet-approval/components/overview-list.vue
+++ b/src/modules/timesheet-approval/components/overview-list.vue
@@ -46,6 +46,10 @@
         timesheet_store.is_details_dialog_open = true;
     };
 
+    const onClickApproveAll = async (email: string, is_approved: boolean) => {
+        await timesheet_approval_api.toggleTimesheetsApprovalByEmployeeEmail(email, is_approved);
+    }
+
     const filterEmployeeRows = (rows: readonly TimesheetOverview[], terms: PayPeriodOverviewFilters): TimesheetOverview[] => {
         let result = [...rows];
 
@@ -244,7 +248,8 @@
                         :key="props.row.email + timesheet_store.pay_period?.pay_period_no"
                         :index="props.rowIndex"
                         :row="props.row"
-                        @click-details="overview => onClickedDetails(overview)"
+                        @click-details="onClickedDetails"
+                        @click-approval-all="is_approved => onClickApproveAll(props.row.email, is_approved)"
                     />
                 </template>
 
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 ffb74a9..c623cc6 100644
--- a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
+++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
@@ -26,6 +26,20 @@ export const useTimesheetApprovalApi = () => {
         timesheet_store.is_loading = false;
     };
 
+    const toggleTimesheetsApprovalByEmployeeEmail = async (email: string, approval_status: boolean) => {
+        timesheet_store.is_loading = true;
+
+        const success = await timesheet_store.getTimesheetsByOptionalEmployeeEmail(email);
+        if (success) {
+            const approval_success = await timesheet_store.toggleTimesheetsApprovalByEmployeeEmail(email, approval_status);
+            const overview = timesheet_store.pay_period_overviews.find(overview => overview.email === email);
+            
+            if (overview && approval_success) overview.is_approved = approval_status;
+        }
+            
+        timesheet_store.is_loading = false;
+    };
+
     const getTimesheetApprovalCSVReport = async (report_filter_company: boolean[], report_filter_type: boolean[]) => {
         if (timesheet_store.pay_period === undefined) return;
 
@@ -40,6 +54,7 @@ export const useTimesheetApprovalApi = () => {
 
     return {
         getTimesheetOverviewsByDate,
+        toggleTimesheetsApprovalByEmployeeEmail,
         getTimesheetApprovalCSVReport,
         getTimesheetOverviews,
     }
diff --git a/src/modules/timesheet-approval/services/timesheet-approval-service.ts b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
index a72c561..383dde2 100644
--- a/src/modules/timesheet-approval/services/timesheet-approval-service.ts
+++ b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
@@ -1,4 +1,5 @@
 import { api } from "src/boot/axios";
+import type { BackendResponse } from "src/modules/shared/models/backend-response.models";
 import type { TimesheetApprovalCSVReportFilters } from "src/modules/timesheet-approval/models/timesheet-approval-csv-report.models";
 import type { PayPeriodOverviewResponse } from "src/modules/timesheet-approval/models/timesheet-overview.models";
 
@@ -12,4 +13,9 @@ export const timesheetApprovalService = {
         const response = await api.get(`exports/csv/${year}/${period_number}`, { params: filters, responseType: 'arraybuffer' });
         return response;
     },
+
+    updateTimesheetsApprovalStatus: async (email: string, timesheet_ids: number[], is_approved: boolean): Promise<BackendResponse<{shifts: number, expenses: number}>> => {
+        const response = await api.patch<BackendResponse<{shifts: number, expenses: number}>>('pay-periods/pay-period-approval', { email, timesheet_ids, is_approved});
+        return response.data;
+    },
 };
\ No newline at end of file
diff --git a/src/modules/timesheets/components/shift-list.vue b/src/modules/timesheets/components/shift-list.vue
index 382f808..ca95b19 100644
--- a/src/modules/timesheets/components/shift-list.vue
+++ b/src/modules/timesheets/components/shift-list.vue
@@ -20,6 +20,10 @@
     const timesheet_store = useTimesheetStore();
     const timesheet_api = useTimesheetApi();
 
+    const { mode = 'normal'} = defineProps<{
+        mode: 'normal' | 'approval';
+    }>();
+
     const mobile_animation_direction = ref('fadeInLeft');
     const animation_style = computed(() => ui_store.is_mobile_mode ? mobile_animation_direction.value : 'fadeInDown');
 
@@ -67,7 +71,6 @@
             class="absolute-full hide-scrollbar"
             :thumb-style="{ opacity: '0' }"
             :bar-style="{ opacity: '0' }"
-            style="min-height: 50vh;"
         >
             <!-- Show if no timesheets found (further than one month from present) -->
             <div
@@ -103,13 +106,12 @@
                         leave-active-class="animated fadeOutUp"
                     >
                         <q-btn
-                            v-if="!$q.platform.is.mobile"
+                            v-if="!$q.platform.is.mobile && timesheet.days.every(day => day.shifts.length < 1)"
                             :disable="!timesheet.days.every(day => day.shifts.length < 1)"
                             flat
                             dense
                             :label="$t('timesheet.apply_preset_week')"
                             class="col-auto text-uppercase text-weight-bold text-accent q-mx-lg q-py-none rounded-5"
-                            :class="timesheet.days.every(day => day.shifts.length < 1) ? '' : 'invisible'"
                             @click="timesheet_api.applyPreset(timesheet.timesheet_id)"
                         >
                             <q-icon
@@ -135,7 +137,7 @@
                                 class="col column full-width q-px-md q-py-sm"
                             >
                                 <q-card
-                                    class="rounded-10 shadow-12"
+                                    class="mobile-rounded-10 shadow-12"
                                     :class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-accent' : 'bg-dark'"
                                 >
 
@@ -192,13 +194,11 @@
 
                             <div
                                 v-else
-                                class="col row full-width shadow-8 rounded-10"
-                                :class="(getDayApproval(day) || timesheet.is_approved) ? 'rounded-10 bg-accent' : ''"
+                                class="col row full-width rounded-10 ellipsis shadow-10"
                             >
                                 <div
-                                    class="col row bg-dark"
-                                    :class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-transparent' : ''"
-                                    style="border-radius: 10px 0 0 10px;"
+                                    class="col row"
+                                    :class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-accent' : 'bg-dark'"
                                 >
                                     <!-- Date block -->
                                     <ShiftListDateWidget
@@ -225,17 +225,19 @@
                                         color="white"
                                         size="xl"
                                         class="full-height"
+                                        :class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-accent' : ''"
                                     />
+
                                     <q-btn
                                         v-else
                                         :dense="!$q.platform.is.mobile"
+                                        square
                                         icon="more_time"
                                         size="lg"
                                         color="accent"
                                         text-color="white"
                                         class="full-height"
-                                        :class="$q.screen.lt.md ? 'q-px-xs ' : ' '"
-                                        style="border-radius: 0 10px 10px 0;"
+                                        :class="$q.platform.is.mobile ? 'q-px-xs' : ''"
                                         @click="addNewShift(day.shifts, day.date, timesheet.timesheet_id)"
                                     />
                                 </div>
@@ -247,6 +249,7 @@
         </q-scroll-area>
 
         <q-page-sticky
+            v-if="mode === 'normal'"
             position="bottom-right"
             :offset="$q.screen.width > $q.screen.height ? [15, 15] : [15, 65]"
             class="z-top"
@@ -269,4 +272,21 @@
         </q-page-sticky>
     </div>
 
-</template>
\ No newline at end of file
+</template>
+
+<style scoped lang="scss">
+@each $size in (1, 2, 3, 4, 5, 10, 15, 20, 25, 50, 75, 100, 200) {
+  .mobile-rounded-#{$size} {
+    border-radius: #{$size}px !important;
+  } 
+
+  .mobile-rounded-#{$size} > div:first-child {
+    border-radius: #{$size}px #{$size}px 0 0 !important;
+  }
+
+  .mobile-rounded-#{$size} > div:last-child {
+    border-radius: 0 0 #{$size}px #{$size}px !important;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/timesheet-wrapper.vue b/src/modules/timesheets/components/timesheet-wrapper.vue
index bf0ed13..2bc0ec8 100644
--- a/src/modules/timesheets/components/timesheet-wrapper.vue
+++ b/src/modules/timesheets/components/timesheet-wrapper.vue
@@ -42,8 +42,8 @@
 
         <!-- top menu -->
         <div
-            class="col-auto row items-center full-width q-px-lg"
-            :class="$q.platform.is.mobile && ($q.screen.width < $q.screen.height) ? 'justify-between' : 'q-mt-md q-pb-sm q-px-md'"
+            class="col-auto row items-center full-width"
+            :class="$q.platform.is.mobile && ($q.screen.width < $q.screen.height) ? 'justify-between' : 'q-pb-sm q-px-md'"
         >
             <!-- navigation btn -->
             <PayPeriodNavigator
@@ -66,6 +66,9 @@
                 @click="expenses_store.open"
             />
 
+            <!-- label for approval mode to delimit that this is the timesheet -->
+            <span class="col-auto text-uppercase text-bold text-h5"> {{ $t('timesheet.page_header') }}</span>
+
             <q-space v-if="$q.screen.width > $q.screen.height" />
 
             <!-- desktop expenses button -->
@@ -81,7 +84,7 @@
 
             <!-- desktop save timesheet changes button -->
             <q-btn
-                v-if="mode === 'normal' && !is_timesheets_approved && $q.screen.width > $q.screen.height"
+                v-if="!is_timesheets_approved && $q.screen.width > $q.screen.height"
                 push
                 rounded
                 :disable="timesheet_store.is_loading || has_shift_errors"
@@ -99,7 +102,7 @@
         <!-- mobile weekly overview widget -->
         <ShiftListWeeklyOverview />
 
-        <ShiftList />
+        <ShiftList :mode="mode" />
 
         <q-btn
             v-if="$q.platform.is.mobile && $q.screen.width < $q.screen.height"
@@ -114,6 +117,9 @@
             @click="shift_api.saveShiftChanges"
         />
 
-        <ExpenseDialog :is-approved="is_timesheets_approved" class="z-top"/>
+        <ExpenseDialog
+            :is-approved="is_timesheets_approved"
+            class="z-top"
+        />
     </div>
 </template>
\ No newline at end of file
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index c93081e..2ac9f4e 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -85,8 +85,8 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         }
     };
 
-    const getTimesheetsByOptionalEmployeeEmail = async (employee_email?: string) => {
-        if (pay_period.value === undefined) return;
+    const getTimesheetsByOptionalEmployeeEmail = async (employee_email?: string): Promise<boolean> => {
+        if (pay_period.value === undefined) return false;
         is_loading.value = true;
         let response;
 
@@ -96,7 +96,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
             } else {
                 response = await timesheetService.getTimesheetsByPayPeriodAndOptionalEmail(pay_period.value.pay_year, pay_period.value.pay_period_no);
             }
-            
+
             if (response.success && response.data) {
                 selected_employee_name.value = response.data.employee_fullname;
                 timesheets.value = response.data.timesheets;
@@ -106,15 +106,38 @@ export const useTimesheetStore = defineStore('timesheet', () => {
                 timesheets.value = [];
                 initial_timesheets.value = [];
             }
+
             is_loading.value = false;
+            return response.success;
         } catch (error) {
             console.error('There was an error retrieving timesheet details for this employee: ', error);
             // TODO: More in-depth error-handling here
             timesheets.value = [];
             is_loading.value = false;
+            return false;
         }
     };
 
+    const toggleTimesheetsApprovalByEmployeeEmail = async (email: string, approval_status: boolean): Promise<boolean> => {
+        try {
+            const timesheet_ids = timesheets.value.map(timesheet => timesheet.timesheet_id);
+            
+            // Backend returns the amount of shifts and expenses successfully updated, could be useful for error handling???
+            // const shift_expense_count = timesheets.value.reduce((timesheets_sum, timesheet) => {
+            //     return timesheets_sum + timesheet.days.reduce((day_sum, day) => {
+            //         return day_sum + day.shifts.length + day.expenses.length
+            //     }, 0);
+            // }, 0);
+
+            const response = await timesheetApprovalService.updateTimesheetsApprovalStatus(email, timesheet_ids, approval_status);
+            return response.success;
+        } catch (error) {
+            console.error("couldn't approve timesheets for employee: ", error);
+        }
+
+        return false;
+    };
+
     const getPayPeriodReport = async (report_filters: TimesheetApprovalCSVReportFilters) => {
         try {
             if (!pay_period.value) return false;
@@ -158,6 +181,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         getPayPeriodByDateOrYearAndNumber,
         getTimesheetOverviews,
         getTimesheetsByOptionalEmployeeEmail,
+        toggleTimesheetsApprovalByEmployeeEmail,
         getPayPeriodReport,
         openReportDialog,
         closeReportDialog,