From 8998918002a0b7ae11a41e671cde45ad25212d90 Mon Sep 17 00:00:00 2001
From: Nic D <n_drolet@hotmail.ca>
Date: Fri, 30 Jan 2026 14:38:32 -0500
Subject: [PATCH] fix(timesheet): resolve issue with mobile expenses and
 timesheet presets.

fix issue with mobile version of expense dialog where select menu for expense type was refusing to show on screen due to z-index behavior. switch q-select options dialog to menu behavior instead of dialog

fix issue with timesheet presets not applying correctly due to user email being sent as query param on timesheet inadvertedly, which is a route reserved for timesheet approval module
---
 .../components/expense-dialog-form.vue        |  2 +-
 .../mobile/expense-dialog-form-mobile.vue     | 37 ++++++++++++-------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/modules/timesheets/components/expense-dialog-form.vue b/src/modules/timesheets/components/expense-dialog-form.vue
index f630b99..8324b65 100644
--- a/src/modules/timesheets/components/expense-dialog-form.vue
+++ b/src/modules/timesheets/components/expense-dialog-form.vue
@@ -11,7 +11,7 @@
     import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api';
     import { getExpenseIcon, useExpenseRules } from 'src/modules/timesheets/utils/expense.util';
     import { Expense, type ExpenseOption, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
-import { useAuthStore } from 'src/stores/auth-store';
+    import { useAuthStore } from 'src/stores/auth-store';
 
     // ================= state ======================
 
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 675b34f..8b7c0bc 100644
--- a/src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue
+++ b/src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue
@@ -2,19 +2,20 @@
     setup
     lang="ts"
 >
-    import { computed, ref } from 'vue';
+    import { computed, ref, onMounted } from 'vue';
     import { useI18n } from 'vue-i18n';
     import { useUiStore } from 'src/stores/ui-store';
     import { useExpensesStore } from 'src/stores/expense-store';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api';
     import { getExpenseIcon, useExpenseRules } from 'src/modules/timesheets/utils/expense.util';
-    import { type ExpenseOption, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
-import { useAuthStore } from 'src/stores/auth-store';
+    import { Expense, type ExpenseOption, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
+    import { useAuthStore } from 'src/stores/auth-store';
 
     const COMMENT_MAX_LENGTH = 280;
 
-    const file = defineModel<File | undefined>();
+    const expense = defineModel<Expense>({ default: new Expense(new Date().toISOString().slice(0, 10)) })
+    const file = defineModel<File | undefined>('file');
 
     const { employeeEmail } = defineProps<{
         employeeEmail?: string;
@@ -53,6 +54,13 @@ import { useAuthStore } from 'src/stores/auth-store';
         if (file.value)
             await expenses_api.upsertExpense(expenses_store.current_expense, file.value, employeeEmail ?? auth_store.user?.email ?? 'MISSING_EMAIL');
     };
+
+    onMounted(() => {
+        if (expense.value)
+            expense_selected.value = expense_options.find(expense_option => expense_option.value === expense.value.type);
+        else
+            expense_selected.value = expense_options[1];
+    })
 </script>
 
 <template>
@@ -66,9 +74,8 @@ import { useAuthStore } from 'src/stores/auth-store';
             class="col column items-start rounded-5 q-pb-sm"
             :class="expenses_store.is_showing_create_form ? 'q-px-md' : 'q-px-sm'"
         >
-            <!-- date and type row -->
-            <div class="col row q-my-xs full-width">
-                <!-- date selection input -->
+            <!-- date selection input -->
+            <div class="col-auto row q-my-xs full-width">
                 <q-input
                     v-model="expenses_store.current_expense.date"
                     dense
@@ -77,7 +84,7 @@ import { useAuthStore } from 'src/stores/auth-store';
                     stack-label
                     hide-bottom-space
                     color="primary"
-                    class="col-auto q-mr-sm"
+                    class="col-auto full-width"
                     input-class="text-weight-medium"
                     input-style="font-size: 1em;"
                     :label="$t('timesheet.expense.date')"
@@ -114,8 +121,10 @@ import { useAuthStore } from 'src/stores/auth-store';
                         </span>
                     </template>
                 </q-input>
+            </div>
 
-                <!-- expenses type selection -->
+            <!-- expenses type selection -->
+            <div class="col-auto row q-my-xs full-width">
                 <q-select
                     v-model="expense_selected"
                     standout="bg-blue-grey-9 text-white"
@@ -127,12 +136,12 @@ import { useAuthStore } from 'src/stores/auth-store';
                     hide-bottom-space
                     class="col"
                     color="primary"
+                    behavior="menu"
+                    :menu-offset="[0, 5]"
                     :label="$t('timesheet.expense.type')"
-                    :menu-offset="[0, 10]"
-                    menu-anchor="bottom middle"
-                    menu-self="top middle"
-                    popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
-                    popup-content-style="border: 2px solid var(--q-accent)"
+                    popup-content-class="text-uppercase text-weight-bold text-center rounded-5 z-top"
+                    popup-content-style="border: 3px solid var(--q-accent)"
+                    options-selected-class="text-weight-bolder text-white bg-accent"
                     :rules="[rules.typeRequired]"
                     @update:model-value="option => expenses_store.current_expense.type = option.value"
                 >