From a5461359b7dfa806e6aa1f43703f5c572a746f9e Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Thu, 20 Nov 2025 17:39:46 -0500
Subject: [PATCH] Implemented tooltips for disabled inputs

---
 .../trainingReport/trainingReportForm.vue     | 59 ++++++++++++-------
 1 file changed, 37 insertions(+), 22 deletions(-)

diff --git a/ui/src/components/trainingReport/trainingReportForm.vue b/ui/src/components/trainingReport/trainingReportForm.vue
index 5b88a5c..0917938 100644
--- a/ui/src/components/trainingReport/trainingReportForm.vue
+++ b/ui/src/components/trainingReport/trainingReportForm.vue
@@ -32,11 +32,6 @@ const { handleSubmit, resetForm, errors, values } = useForm({
     }
 })
 
-watch(errors, (e) => {
-    console.warn("Validation errors:", e);
-}, { deep: true });
-
-
 const submitForm = handleSubmit(onSubmit);
 
 function toMySQLDateTime(date: Date): string {
@@ -130,7 +125,7 @@ onMounted(async () => {
                     <!-- Attendee Rows -->
                     <template v-for="(field, index) in fields" :key="field.key">
 
-                        <div class="grid grid-cols-[180px_160px_50px_50px_1fr_auto] gap-3 items-start">
+                        <div class="grid grid-cols-[180px_160px_50px_50px_1fr_auto] gap-3 items-center">
 
                             <!-- Member Select -->
                             <VeeField :name="`attendees[${index}].attendee_id`" v-slot="{ field: f, errors: e }">
@@ -163,37 +158,57 @@ onMounted(async () => {
                             <!-- Passed Checkbox -->
                             <VeeField v-slot="{ field }" :name="`attendees[${index}].passed_bookwork`" type="checkbox"
                                 :value="true" :unchecked-value="false">
-                                <label>
-                                    <!-- <input type="checkbox" :name="`attendees[${index}].passed_bookwork`" v-bind="field"
-                                        :value="true" /> -->
-                                    <Checkbox :disabled="!selectedCourse?.hasBookwork"
-                                        :name="`attendees[${index}].passed_bookwork`" v-bind="field" :value="true">
-                                    </Checkbox>
-                                </label>
+                                <div class="flex justify-center">
+                                    <div class="relative inline-flex items-center group">
+
+                                        <Checkbox :disabled="!selectedCourse?.hasBookwork"
+                                            :name="`attendees[${index}].passed_bookwork`" v-bind="field" :value="true">
+                                        </Checkbox>
+                                        <!-- Tooltip bubble -->
+                                        <div v-if="!selectedCourse?.hasBookwork" class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2
+                                                whitespace-nowrap rounded-md bg-popover px-2 py-1 text-xs
+                                                text-popover-foreground shadow-md border border-border
+                                                opacity-0 translate-y-1
+                                                group-hover:opacity-100 group-hover:translate-y-0
+                                                transition-opacity transition-transform duration-150">
+                                            This course does not have bookwork
+                                        </div>
+                                    </div>
+                                </div>
                             </VeeField>
 
                             <!-- Passed Checkbox -->
                             <VeeField v-slot="{ field }" :name="`attendees[${index}].passed_qual`" type="checkbox"
                                 :value="true" :unchecked-value="false">
-                                <label>
-                                    <!-- <input type="checkbox" :name="`attendees[${index}].passed_qual`" v-bind="field"
-                                        :value="true" /> -->
-                                    <Checkbox :disabled="!selectedCourse?.hasQual"
-                                        :name="`attendees[${index}].passed_qual`" v-bind="field"></Checkbox>
-                                </label>
+                                <div class="flex justify-center">
+                                    <div class="relative inline-flex items-center group">
+                                        <Checkbox :disabled="!selectedCourse?.hasQual"
+                                            :name="`attendees[${index}].passed_qual`" v-bind="field"></Checkbox>
+                                        <!-- Tooltip bubble -->
+                                        <div v-if="!selectedCourse?.hasQual" class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2
+                                                whitespace-nowrap rounded-md bg-popover px-2 py-1 text-xs
+                                                text-popover-foreground shadow-md border border-border
+                                                opacity-0 translate-y-1
+                                                group-hover:opacity-100 group-hover:translate-y-0
+                                                transition-opacity transition-transform duration-150">
+                                            This course does not have a qualification
+                                        </div>
+                                    </div>
+                                </div>
                             </VeeField>
 
                             <!-- Remarks -->
                             <VeeField :name="`attendees[${index}].remarks`" v-slot="{ field: f, errors: e }">
-                                <div>
-                                    <textarea v-bind="f" class="h-[38px] resize-none border rounded p-2 w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none"
+                                <div class="flex flex-col">
+                                    <textarea v-bind="f"
+                                        class="h-[38px] resize-none border rounded p-2 w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none"
                                         placeholder="Optional remarks"></textarea>
                                     <FieldError v-if="e.length" :errors="e" />
                                 </div>
                             </VeeField>
 
                             <!-- Remove button -->
-                            <Button type="button" variant="ghost" @click="remove(index)" class="self-center">
+                            <Button type="button" variant="ghost" size="sm" @click="remove(index)" class="self-center">
                                 <X :size="10" />
                             </Button>
                         </div>