From 4ab271e66f3ca17e12e2df908d2b5f82d5e274ed Mon Sep 17 00:00:00 2001
From: Nic D <n_drolet@hotmail.ca>
Date: Tue, 10 Mar 2026 16:42:31 -0400
Subject: [PATCH] refactor(timesheet): Implement refactor of select and input
 fields from freeswitch-ui branch

---
 src/modules/shared/components/targo-input.vue |  77 ++++++++
 .../shared/components/targo-select.vue        |  54 +++++
 .../components/expense-dialog-form.vue        | 187 +++++++-----------
 3 files changed, 206 insertions(+), 112 deletions(-)
 create mode 100644 src/modules/shared/components/targo-input.vue
 create mode 100644 src/modules/shared/components/targo-select.vue

diff --git a/src/modules/shared/components/targo-input.vue b/src/modules/shared/components/targo-input.vue
new file mode 100644
index 0000000..56fae33
--- /dev/null
+++ b/src/modules/shared/components/targo-input.vue
@@ -0,0 +1,77 @@
+<script
+    setup
+    lang="ts"
+>
+    const model = defineModel<string | number | null | undefined>({ required: true });
+    const is_date_picker_open = defineModel<boolean>('isDatePickerOpen', {default: false});
+
+    defineProps<{
+        label?: string | undefined;
+        requiresDatePicker?: boolean | undefined;
+        maxLength?: number;
+        noTopPadding?: boolean;
+        backgroundColor?: 'bg-secondary' | 'bg-dark';
+    }>();
+</script>
+
+<template>
+    <div 
+        class="col q-px-sm"
+        :class="noTopPadding ? '' : 'q-pt-md'"
+    >
+        <q-input
+            v-model="model"
+            dense
+            borderless
+            color="accent"
+            label-color="white"
+            stack-label
+            label-slot
+            no-error-icon
+            hide-bottom-space
+            :maxlength="maxLength"
+            class="q-px-md rounded-5 inset-shadow"
+            :class="$q.dark.isActive ? 'bg-primary' : (backgroundColor ?? 'bg-secondary')"
+            :style="`border: 1px solid var(${$q.dark.isActive ? '--q-secondary' : '--q-primary'});`"
+        >
+            <template #label>
+                <span
+                    class="text-weight-bold text-uppercase q-px-md"
+                    :class="$q.dark.isActive ? 'bg-secondary' : 'bg-primary'"
+                >
+                    {{ label }}
+                </span>
+            </template>
+    
+            <template #append v-if="requiresDatePicker">
+                <q-btn
+                    flat
+                    dense
+                    size="lg"
+                    icon="calendar_month"
+                    color="accent"
+                    @click="is_date_picker_open = true"
+                >
+                    <q-dialog
+                        v-model="is_date_picker_open"
+                        backdrop-filter="none"
+                    >
+                        <q-date
+                            v-model="model"
+                            mask="YYYY-MM-DD"
+                            color="accent"
+                            @update:model-value="is_date_picker_open = false"
+                        />
+                    </q-dialog>
+                </q-btn>
+            </template>
+        </q-input>
+    </div>
+</template>
+
+<style scoped>
+    :deep(.q-field--dense.q-field--float .q-field__label) {
+        transform: translate(-17px, -60%) scale(0.75);
+        border-radius: 10px 10px 10px 0px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/modules/shared/components/targo-select.vue b/src/modules/shared/components/targo-select.vue
new file mode 100644
index 0000000..8d1d88c
--- /dev/null
+++ b/src/modules/shared/components/targo-select.vue
@@ -0,0 +1,54 @@
+<script
+    setup
+    lang="ts"
+>
+    const model = defineModel<string>({ required: true });
+
+    defineProps<{
+        label?: string | undefined;
+        options: string[];
+    }>();
+</script>
+
+<template>
+    <div class="col q-px-sm q-pt-md">
+        <q-select
+            v-model="model"
+            dense
+            borderless
+            color="accent"
+            label-color="white"
+            stack-label
+            label-slot
+            :options="options"
+            lazy-rules
+            no-error-icon
+            hide-bottom-space
+            options-selected-class="text-white text-bold bg-accent"
+            class="q-px-md rounded-5 inset-shadow"
+            :class="$q.dark.isActive ? 'bg-primary' : 'bg-secondary'"
+            popup-content-class="text-uppercase text-weight-medium rounded-5 shadow-12 z-top"
+            popup-content-style="border: 1px solid var(--q-primary)"
+            menu-anchor="bottom middle"
+            menu-self="top middle"
+            :menu-offset="[0, 5]"
+            :style="`border: 1px solid var(${$q.dark.isActive ? '--q-secondary' : '--q-primary'});`"
+        >
+            <template #label>
+                <span
+                    class="text-weight-medium text-uppercase q-px-sm no-pointer-events"
+                    :class="$q.dark.isActive ? 'bg-secondary' : 'bg-primary'"
+                >
+                    {{ label }}
+                </span>
+            </template>
+        </q-select>
+    </div>
+</template>
+
+<style scoped>
+    :deep(.q-field--dense.q-field--float .q-field__label) {
+        transform: translate(-17px, -60%) scale(0.75) !important;
+        border-radius: 10px 10px 10px 0px;
+    }
+</style>
\ 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 54e01d7..a402f40 100644
--- a/src/modules/timesheets/components/expense-dialog-form.vue
+++ b/src/modules/timesheets/components/expense-dialog-form.vue
@@ -2,6 +2,8 @@
     setup
     lang="ts"
 >
+    import TargoInput from 'src/modules/shared/components/targo-input.vue';
+
     import { useI18n } from 'vue-i18n';
     import { computed, onMounted, ref } from 'vue';
     import { useUiStore } from 'src/stores/ui-store';
@@ -90,79 +92,76 @@
             @submit.prevent="requestExpenseCreationOrUpdate"
         >
             <div
-                class="row justify-between items-start rounded-5 q-pb-sm"
+                class="row justify-between rounded-5 q-pb-sm"
                 :class="expenseStore.mode === 'create' ? 'q-px-lg' : ''"
             >
                 <!-- date selection input -->
-                <div class="col q-px-xs">
-                    <q-input
-                        v-model="expenseStore.current_expense.date"
+                <div class="row col items-center">
+                    <q-btn
+                        push
                         dense
-                        standout
-                        readonly
-                        stack-label
-                        color="primary"
-                        input-class="text-weight-medium"
-                        input-style="font-size: 1em;"
-                        :label="$t('timesheet.expense.date')"
+                        icon="event"
+                        color="accent"
+                        class="col-auto"
+                        @click="openDatePicker"
+                    />
+
+                    <q-dialog
+                        v-model="isNavigatorOpen"
+                        transition-show="jump-right"
+                        transition-hide="jump-right"
+                        class="z-top"
                     >
-                        <template #prepend>
-                            <q-btn
-                                push
-                                dense
-                                icon="event"
-                                color="accent"
-                                class="q-mr-sm"
-                                @click="openDatePicker"
-                            />
+                        <q-date
+                            v-model="expenseStore.current_expense.date"
+                            mask="YYYY-MM-DD"
+                            event-color="accent"
+                            :options="date => date >= period_start_date && date <= period_end_date"
+                            @update:model-value="closeDatePicker"
+                        />
+                    </q-dialog>
 
-                            <q-dialog
-                                v-model="isNavigatorOpen"
-                                transition-show="jump-right"
-                                transition-hide="jump-right"
-                                class="z-top"
-                            >
-                                <q-date
-                                    v-model="expenseStore.current_expense.date"
-                                    mask="YYYY-MM-DD"
-                                    event-color="accent"
-                                    :options="date => date >= period_start_date && date <= period_end_date"
-                                    @update:model-value="closeDatePicker"
-                                />
-                            </q-dialog>
-                        </template>
-
-                        <template #label>
-                            <span class="text-weight-bold text-accent text-uppercase text-caption">
-                                {{ $t('timesheet.expense.date') }}
-                            </span>
-                        </template>
-                    </q-input>
+                    <TargoInput
+                        v-model="expenseStore.current_expense.date"
+                        no-top-padding
+                        :label="$t('timesheet.expense.date')"
+                        background-color="bg-dark"
+                        class="col"
+                    />
                 </div>
 
                 <!-- expenses type selection -->
-                <div class="col q-px-xs">
+                <div class="col">
                     <q-select
                         v-model="expenseSelected"
-                        standout
                         dense
-                        :options="expenseOptions"
-                        hide-dropdown-icon
+                        borderless
+                        color="accent"
+                        label-color="white"
                         stack-label
                         label-slot
-                        color="primary"
-                        :label="$t('timesheet.expense.type')"
-                        :menu-offset="[0, 10]"
+                        :options="expenseOptions"
+                        hide-dropdown-icon
+                        lazy-rules
+                        no-error-icon
+                        hide-bottom-space
+                        options-selected-class="text-white text-bold bg-accent"
+                        class="q-px-md rounded-5 inset-shadow"
+                        :class="$q.dark.isActive ? 'bg-primary' : 'bg-dark'"
+                        popup-content-class="text-uppercase text-weight-medium rounded-5 shadow-12  z-top"
+                        popup-content-style="border: 1px solid var(--q-primary);"
                         menu-anchor="bottom middle"
                         menu-self="top middle"
-                        popup-content-class="text-uppercase text-weight-bold text-center rounded-5 z-top"
-                        options-selected-class="text-weight-bolder text-white bg-accent"
-                        popup-content-style="border: 2px solid var(--q-accent)"
+                        :menu-offset="[0, 5]"
+                        :style="`border: 1px solid var(${$q.dark.isActive ? '--q-secondary' : '--q-primary'});`"
                         :rules="[rules.typeRequired]"
                         @update:model-value="option => expenseStore.current_expense.type = option.value"
                     >
                         <template #label>
-                            <span class="text-weight-bold text-accent text-uppercase text-caption">
+                            <span
+                                class="text-weight-medium text-uppercase q-px-sm no-pointer-events"
+                                :class="$q.dark.isActive ? 'bg-secondary' : 'bg-primary'"
+                            >
                                 {{ $t('timesheet.expense.type') }}
                             </span>
                         </template>
@@ -189,72 +188,32 @@
 
                 <!-- amount input -->
                 <div class="col q-px-xs">
-                    <q-input
+                    <TargoInput
                         v-if="TYPES_WITH_AMOUNT_ONLY.includes(expenseStore.current_expense?.type ?? 'EXPENSES')"
                         v-model.number="expenseStore.current_expense.amount"
-                        standout
-                        dense
-                        label-slot
-                        stack-label
-                        suffix="$"
-                        type="number"
-                        color="primary"
-                        input-class="text-right text-weight-medium"
-                        input-style="font-size: 1.3em;"
-                        lazy-rules="ondemand"
-                        :rules="[rules.amountRequired]"
-                    >
-                        <template #label>
-                            <span class="text-weight-bold text-accent text-uppercase text-caption">
-                                {{ $t('timesheet.expense.amount') }}
-                            </span>
-                        </template>
-                    </q-input>
+                        no-top-padding
+                        background-color="bg-dark"
+                        :label="$t('timesheet.expense.amount')"
+                    />
 
-                    <q-input
+                    <TargoInput
                         v-else
                         v-model="expenseStore.current_expense.mileage"
-                        standout
-                        dense
-                        label-slot
-                        stack-label
-                        suffix="km"
-                        type="number"
-                        input-class="text-right text-weight-medium"
-                        input-style="font-size: 1.3em;"
-                        color="primary"
-                        lazy-rules="ondemand"
-                        :rules="[rules.mileageRequired]"
-                    >
-                        <template #label>
-                            <span class="text-weight-bold text-accent text-uppercase text-caption">
-                                {{ $t('timesheet.expense.mileage') }}
-                            </span>
-                        </template>
-                    </q-input>
+                        no-top-padding
+                        background-color="bg-dark"
+                        :label="$t('timesheet.expense.mileage')"
+                    />
                 </div>
 
                 <!-- employee comment input -->
                 <div class="col q-px-xs">
-                    <q-input
+                    <TargoInput
                         v-model="expenseStore.current_expense.comment"
-                        standout
-                        dense
-                        stack-label
-                        label-slot
-                        color="primary"
-                        input-class="text-weight-medium"
-                        input-style="font-size: 1.3em;"
-                        :maxlength="COMMENT_MAX_LENGTH"
-                        lazy-rules="ondemand"
-                        :rules="[rules.commentRequired]"
-                    >
-                        <template #label>
-                            <span class="text-weight-bold text-accent text-uppercase text-caption">
-                                {{ $t('timesheet.expense.employee_comment') }}
-                            </span>
-                        </template>
-                    </q-input>
+                        no-top-padding
+                        background-color="bg-dark"
+                        :max-length="COMMENT_MAX_LENGTH"
+                        :label="$t('timesheet.expense.employee_comment')"
+                    />
                 </div>
 
                 <!-- import attach file section -->
@@ -303,8 +262,12 @@
     </div>
 </template>
 
-<style scoped>
-:deep(.q-field--standout.q-field--readonly .q-field__control::before) {
-    border: transparent;
+<style
+    scoped
+    lang="css"
+>
+:deep(.q-field--dense.q-field--float .q-field__label) {
+    transform: translate(-17px, -60%) scale(0.75) !important;
+    border-radius: 10px 10px 10px 0px;
 }
 </style>
\ No newline at end of file