From ffe671376f7b75911d4da84f413a5b52cc55e461 Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Fri, 9 Jan 2026 13:01:55 -0500
Subject: [PATCH 1/2] fix(employee-list): make last_updated change for pto when
 sick hours are changed

---
 src/css/app.scss                                         | 9 +++++++++
 .../employee-list/components/add-modify-dialog-form.vue  | 1 +
 .../employee-list/models/employee-profile.models.ts      | 2 +-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index ab0be1e..f5b3f6e 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -64,4 +64,13 @@ input::-webkit-inner-spin-button {
 /* Firefox */
 input[type=number] {
   -moz-appearance: textfield;
+}
+
+.q-field--dark .q-field__control::before {
+    border-color: #fff3;
+}
+
+.q-field--dark .q-field__control:hover::before, .q-field--outlined .q-field__control:hover::before {
+    border-color: var(--q-accent);
+    border-width: 2px;
 }
\ No newline at end of file
diff --git a/src/modules/employee-list/components/add-modify-dialog-form.vue b/src/modules/employee-list/components/add-modify-dialog-form.vue
index e8bc481..dc5ea61 100644
--- a/src/modules/employee-list/components/add-modify-dialog-form.vue
+++ b/src/modules/employee-list/components/add-modify-dialog-form.vue
@@ -145,6 +145,7 @@
                     v-model="employee_store.employee.paid_time_off.sick_hours"
                     :label="$t('employee_management.sick_hours')"
                     type="number"
+                    @update:model-value="employee_store.employee.paid_time_off.last_updated = new Date().toISOString().slice(0, 10)"
                 />
 
                 <AddModifyDialogFormInput
diff --git a/src/modules/employee-list/models/employee-profile.models.ts b/src/modules/employee-list/models/employee-profile.models.ts
index ec414ff..72660fc 100644
--- a/src/modules/employee-list/models/employee-profile.models.ts
+++ b/src/modules/employee-list/models/employee-profile.models.ts
@@ -8,7 +8,7 @@ export interface PaidTimeOff {
     sick_hours: number;
     vacation_hours: number;
     banked_hours: number;
-    last_updated: string;
+    last_updated?: string | null;
 }
 
 export class EmployeeProfile {

From d7b4e150acb9f2e679dd61046b199d5338c4133e Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Fri, 9 Jan 2026 16:01:00 -0500
Subject: [PATCH 2/2] feat(employee-list): add error messages to form when
 modifying employee details, minor UI changes.

---
 src/i18n/en-ca/index.ts                       |   9 +
 src/i18n/fr-ca/index.ts                       |   9 +
 .../components/add-modify-dialog-access.vue   | 210 ++++++++++--------
 .../add-modify-dialog-form-input.vue          |   4 +-
 .../add-modify-dialog-form-select.vue         |   5 +-
 .../components/add-modify-dialog-form.vue     |  40 +++-
 .../employee-list/employee-constants.ts       |   0
 .../employee-list/employee-list-utils.ts      |  17 ++
 8 files changed, 196 insertions(+), 98 deletions(-)
 delete mode 100644 src/modules/employee-list/employee-constants.ts
 create mode 100644 src/modules/employee-list/employee-list-utils.ts

diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index 4a15e21..2f0e307 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -74,6 +74,15 @@ export default {
             active: "active",
             inactive: "inactive",
         },
+        errors: {
+            first_name_required: "Employee's first name is required",
+            last_name_required: "Employee's last name is required",
+            company_required: "Employee must be assigned to a company",
+            phone_number_required: "Employee's phone number required",
+            hire_date_required: "Employee's first work day must be entered",
+            daily_hours_required: "Provide employee's expected daily hours worked",
+            no_modules_warning: "All modules disabled. This will lock the user out.",
+        }
     },
 
     employee_management: {
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 889de99..504c688 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -74,6 +74,15 @@ export default {
             active: "actif",
             inactive: "inactif",
         },
+        errors: {
+            first_name_required: "Vous devez spécifier le prénom",
+            last_name_required: "Vous devez spécifier le nom de famille",
+            company_required: "Vous devez assignerl'employé à une compagnie",
+            phone_number_required: "Vous devez entrer un numéro de téléphone",
+            hire_date_required: "Vous devez entrer une date d'embauche",
+            daily_hours_required: "Spécifiez le nombre d'heures quotidiennes travaillé",
+            no_modules_warning: "Tout les modules sont désactivés. L'utilisateur sera verrouillé hors de l'application.",
+        }
     },
 
     employee_management: {
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 516e5b1..02d7017 100644
--- a/src/modules/employee-list/components/add-modify-dialog-access.vue
+++ b/src/modules/employee-list/components/add-modify-dialog-access.vue
@@ -42,8 +42,34 @@
 </script>
 
 <template>
-    <div class="row full-width items-start content-start overflow-hidden-y">
-        <div class="col-12 row flex-center q-px-sm q-py-xs no-wrap">
+    <div class="column full-width items-start content-start overflow-hidden-y">
+        <!-- warning when all modules are disabled -->
+        <div class="col-auto row flex-center q-px-lg q-py-xs full-width">
+            <q-slide-transition>
+                <div
+                    v-if="employee_store.employee.user_module_access.length === 0"
+                    class="row flex-center q-px-md q-py-xs bg-dark"
+                    style="border: 2px solid var(--q-warning);"
+                >
+                    <q-icon 
+                        name="las la-exclamation-triangle"
+                        color="warning"
+                        size="sm"
+                    />
+
+                    <span class="text-warning text-weight-medium q-px-sm">{{ $t('employee_list.errors.no_modules_warning') }}</span>
+
+                    <q-icon 
+                        name="las la-exclamation-triangle"
+                        color="warning"
+                        size="sm"
+                    />
+                </div>
+            </q-slide-transition>
+        </div>
+
+        <!-- info line explaining how to customize access -->
+        <div class="col-auto row flex-center q-px-sm q-py-xs no-wrap">
             <q-icon
                 name="info_outline"
                 size="sm"
@@ -57,74 +83,14 @@
             >{{ $t('employee_management.module_access.usage_description') }}</q-item-label>
         </div>
 
-        <div class="column col-3 overflow-hidden-y">
-            <span class="text-uppercase text-weight-medium q-mx-sm">
-                {{ $t('employee_management.module_access.by_role') }}
-            </span>
-
-            <q-separator
-                size="2px"
-                color="accent"
-                class="q-mx-sm"
-                style="transform: translateY(-4px);"
-            />
-
-            <q-item
-                clickable
-                class="shadow-2 rounded-5 q-ma-sm bg-dark"
-                @click="applyAccessPreset('admin')"
-                @mouseover="preset_preview = 'admin'"
-                @mouseleave="preset_preview = undefined"
-            >
-                <q-item-section>
-                    <q-item-label class="text-uppercase text-weight-bold">
-                        {{ $t('employee_management.module_access.preset_admin') }}
-                    </q-item-label>
-
-                    <q-item-label caption>
-                        {{ $t('employee_management.module_access.admin_description') }}
-                    </q-item-label>
-                </q-item-section>
-            </q-item>
-
-            <q-item
-                clickable
-                class="shadow-2 rounded-5 q-ma-sm bg-dark"
-                @click="applyAccessPreset('employee')"
-                @mouseover="preset_preview = 'employee'"
-                @mouseleave="preset_preview = undefined"
-            >
-                <q-item-section>
-                    <q-item-label class="text-uppercase text-weight-bold">
-                        {{ $t('employee_management.module_access.preset_employee') }}
-                    </q-item-label>
-
-                    <q-item-label caption>
-                        {{ $t('employee_management.module_access.employee_description') }}
-                    </q-item-label>
-                </q-item-section>
-            </q-item>
-
-            <q-btn
-                flat
-                color="negative"
-                icon="clear"
-                size="md"
-                align="left"
-                :label="$t('employee_management.module_access.uncheck_all')"
-                class="q-ma-sm q-px-xs rounded-5"
-                @click="applyAccessPreset('none')"
-                @mouseover="preset_preview = 'none'"
-                @mouseleave="preset_preview = undefined"
-            />
-        </div>
-
-        <div class="col-xs-0 col-sm-1"></div>
-
-        <div class="row col items-start content-start">
-            <div class="col-12 q-mb-xs">
+        <div
+            class="col"
+            :class="$q.platform.is.mobile ? 'column' : 'row'"
+        >
+            <!-- column to attribute access by roles -->
+            <div class="column col-4 overflow-hidden-y q-pr-sm">
                 <span class="text-uppercase text-weight-medium q-mx-sm">
-                    {{ $t('employee_management.module_access.by_module') }}
+                    {{ $t('employee_management.module_access.by_role') }}
                 </span>
 
                 <q-separator
@@ -133,31 +99,95 @@
                     class="q-mx-sm"
                     style="transform: translateY(-4px);"
                 />
-            </div>
-            <div
-                v-for="option in employee_access_options"
-                :key="option.label"
-                class="col-lg-6 col-sm-12 col-xs-12 q-pa-xs"
-            >
-                <div
-                    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-item
+                    clickable
+                    class="shadow-2 rounded-5 q-ma-sm bg-dark"
+                    @click="applyAccessPreset('admin')"
+                    @mouseover="preset_preview = 'admin'"
+                    @mouseleave="preset_preview = undefined"
                 >
-                    <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) }}
+                    <q-item-section>
+                        <q-item-label class="text-uppercase text-weight-bold">
+                            {{ $t('employee_management.module_access.preset_admin') }}
+                        </q-item-label>
+
+                        <q-item-label caption>
+                            {{ $t('employee_management.module_access.admin_description') }}
+                        </q-item-label>
+                    </q-item-section>
+                </q-item>
+
+                <q-item
+                    clickable
+                    class="shadow-2 rounded-5 q-ma-sm bg-dark"
+                    @click="applyAccessPreset('employee')"
+                    @mouseover="preset_preview = 'employee'"
+                    @mouseleave="preset_preview = undefined"
+                >
+                    <q-item-section>
+                        <q-item-label class="text-uppercase text-weight-bold">
+                            {{ $t('employee_management.module_access.preset_employee') }}
+                        </q-item-label>
+
+                        <q-item-label caption>
+                            {{ $t('employee_management.module_access.employee_description') }}
+                        </q-item-label>
+                    </q-item-section>
+                </q-item>
+
+                <q-btn
+                    flat
+                    color="negative"
+                    icon="clear"
+                    size="md"
+                    align="left"
+                    :label="$t('employee_management.module_access.uncheck_all')"
+                    class="q-ma-sm q-px-xs rounded-5"
+                    @click="applyAccessPreset('none')"
+                    @mouseover="preset_preview = 'none'"
+                    @mouseleave="preset_preview = undefined"
+                />
+            </div>
+
+            <div class="row col items-start content-start q-pl-sm">
+                <div class="col-12 q-mb-xs">
+                    <span class="text-uppercase text-weight-medium q-mx-sm">
+                        {{ $t('employee_management.module_access.by_module') }}
                     </span>
-                    <q-space />
-                    <q-icon
-                        :name="employee_store.employee.user_module_access.includes(option.value) ? 'check' : ''"
-                        size="sm"
+
+                    <q-separator
+                        size="2px"
+                        color="accent"
+                        class="q-mx-sm"
+                        style="transform: translateY(-4px);"
                     />
                 </div>
+                <div
+                    v-for="option in employee_access_options"
+                    :key="option.label"
+                    class="col-lg-6 col-sm-12 col-xs-12 q-pa-xs"
+                >
+                    <div
+                        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"
+                        />
+                        <span class="text-uppercase text-weight-bold non-selectable">
+                            {{ $t('employee_management.module_access.' + option.value) }}
+                        </span>
+                        <q-space />
+                        <q-icon
+                            :name="employee_store.employee.user_module_access.includes(option.value) ? 'check' : ''"
+                            size="sm"
+                        />
+                    </div>
+                </div>
             </div>
         </div>
     </div>
diff --git a/src/modules/employee-list/components/add-modify-dialog-form-input.vue b/src/modules/employee-list/components/add-modify-dialog-form-input.vue
index 6c77b95..6b04ae3 100644
--- a/src/modules/employee-list/components/add-modify-dialog-form-input.vue
+++ b/src/modules/employee-list/components/add-modify-dialog-form-input.vue
@@ -19,7 +19,9 @@
         color="accent"
         stack-label
         label-slot
-        class="col q-px-sm q-py-xs"
+        no-error-icon
+        hide-bottom-space
+        class="col q-mx-sm q-my-xs rounded-5 shadow-12"
     >
         <template #label>
             <span
diff --git a/src/modules/employee-list/components/add-modify-dialog-form-select.vue b/src/modules/employee-list/components/add-modify-dialog-form-select.vue
index d9357c1..9f2b9f8 100644
--- a/src/modules/employee-list/components/add-modify-dialog-form-select.vue
+++ b/src/modules/employee-list/components/add-modify-dialog-form-select.vue
@@ -17,8 +17,11 @@
         color="accent"
         stack-label
         label-slot
+        lazy-rules
+        no-error-icon
+        hide-bottom-space
         options-selected-class="text-white text-bold bg-accent"
-        class="col q-px-sm q-py-xs"
+        class="col q-mx-sm q-my-xs bg-dark rounded-5 shadow-12"
         popup-content-class="text-uppercase text-weight-medium rounded-5"
         popup-content-style="border: 2px solid var(--q-accent)"
         menu-anchor="bottom middle"
diff --git a/src/modules/employee-list/components/add-modify-dialog-form.vue b/src/modules/employee-list/components/add-modify-dialog-form.vue
index dc5ea61..b992dff 100644
--- a/src/modules/employee-list/components/add-modify-dialog-form.vue
+++ b/src/modules/employee-list/components/add-modify-dialog-form.vue
@@ -7,16 +7,14 @@
 
     import { ref, computed } from 'vue';
     import { useEmployeeStore } from 'src/stores/employee-store';
+    import { type QuasarRules, useEmployeeProfileRules, company_options } from 'src/modules/employee-list/employee-list-utils';
 
     const employee_store = useEmployeeStore();
     const last_work_day = computed(() => employee_store.employee.last_work_day ?? '---');
     const is_first_day_picker_open = ref(false);
     const is_last_day_picker_open = ref(false);
 
-    const company_options = [
-        { label: 'Targo', value: 'Targo' },
-        { label: 'Solucom', value: 'Solucom' },
-    ]
+    const form_rules = useEmployeeProfileRules();
 
     const supervisor_options = computed(() => {
         const supervisors = employee_store.employee_list.filter(employee => employee.is_supervisor === true && employee.last_work_day === null);
@@ -60,11 +58,13 @@
                 <AddModifyDialogFormInput
                     v-model="employee_store.employee.first_name"
                     :label="$t('profile.personal.first_name')"
+                    :rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.first_name_required'))]"
                 />
 
                 <AddModifyDialogFormInput
                     v-model="employee_store.employee.last_name"
                     :label="$t('profile.personal.last_name')"
+                    :rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.last_name_required'))]"
                 />
             </div>
 
@@ -80,6 +80,8 @@
                 <AddModifyDialogFormInput
                     v-model="employee_store.employee.phone_number"
                     :label="$t('profile.personal.phone_number')"
+                    mask="(###) ### - ####"
+                    :rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.phone_number_required'))]"
                 />
             </div>
 
@@ -96,6 +98,7 @@
                     v-model="employee_store.employee.company_name"
                     :options="company_options"
                     :label="$t('profile.employee.company')"
+                    :rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.company_required'))]"
                 />
             </div>
 
@@ -123,6 +126,7 @@
                 <AddModifyDialogFormInput
                     v-model="employee_store.employee.daily_expected_hours"
                     :label="$t('employee_list.table.expected_daily_hours')"
+                    :rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.daily_hours_required'))]"
                     type="number"
                 />
 
@@ -133,7 +137,10 @@
                     type="number"
                 />
 
-                <div v-else class="col q-px-sm"></div>
+                <div
+                    v-else
+                    class="col q-px-sm"
+                ></div>
             </div>
 
             <div
@@ -165,6 +172,7 @@
                     v-model:is-date-picker-open="is_first_day_picker_open"
                     reqires-date-picker
                     :label="$t('profile.employee.hired_date')"
+                    :rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.hire_date_required'))]"
                     mask="####-##-##"
                 />
 
@@ -179,4 +187,24 @@
             </div>
         </q-form>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+:deep(.q-field--error .q-field__bottom) {
+    color: white;
+    font-weight: 500;
+    text-transform: uppercase;
+    border-radius: 0 0 5px 5px;
+    padding-top: 0;
+    align-items: center;
+    background-color: var(--q-negative);
+}
+
+:deep(.row > .col) {
+    height: fit-content;
+}
+
+:deep(.q-field--outlined.q-field--highlighted .q-field__control::after) {
+    border-radius: 5px 5px 0 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/employee-list/employee-constants.ts b/src/modules/employee-list/employee-constants.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/modules/employee-list/employee-list-utils.ts b/src/modules/employee-list/employee-list-utils.ts
new file mode 100644
index 0000000..5b5b6ba
--- /dev/null
+++ b/src/modules/employee-list/employee-list-utils.ts
@@ -0,0 +1,17 @@
+import type { EmbeddedValidationRule, EmbeddedValidationRuleFn } from "quasar";
+
+export type QuasarRules = Record<EmbeddedValidationRule, EmbeddedValidationRuleFn>;
+type EmployeeProfileValidationRule<T> = EmbeddedValidationRule | ((value: T, rules: QuasarRules, error_message: string) => boolean | string | Promise<boolean | string>);
+
+export const useEmployeeProfileRules = () => {
+    const isNotEmpty: EmployeeProfileValidationRule<unknown> = (value, _rules, error_message) => (value !== undefined && value !== null && value !== '') || error_message;
+
+    return {
+        isNotEmpty,
+    }
+}
+
+export const company_options = [
+    { label: 'Targo', value: 'Targo' },
+    { label: 'Solucom', value: 'Solucom' },
+]
\ No newline at end of file