From 3c689fbb300f327f154a032e0746885a28ed6147 Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Sun, 28 Dec 2025 14:46:04 -0500
Subject: [PATCH] Close #124 fixed checkmark visual state and added tooltip

---
 ui/src/components/tooltip/Tooltip.vue |  2 +-
 ui/src/pages/TrainingReport.vue       | 28 +++++++++++++++++----------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/tooltip/Tooltip.vue b/ui/src/components/tooltip/Tooltip.vue
index 7dca83c..1e46eec 100644
--- a/ui/src/components/tooltip/Tooltip.vue
+++ b/ui/src/components/tooltip/Tooltip.vue
@@ -6,7 +6,7 @@ defineProps<{
 </script>
 
 <template>
-    <div class="relative inline-flex items-center group">
+    <div class="relative inline-flex items-center group w-min">
         <slot></slot>
         <div v-if="open" 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
diff --git a/ui/src/pages/TrainingReport.vue b/ui/src/pages/TrainingReport.vue
index 5394b11..00978bb 100644
--- a/ui/src/pages/TrainingReport.vue
+++ b/ui/src/pages/TrainingReport.vue
@@ -32,6 +32,7 @@ import {
     PaginationNext,
     PaginationPrevious,
 } from '@/components/ui/pagination'
+import Tooltip from '@/components/tooltip/Tooltip.vue';
 
 enum sidePanelState { view, create, closed };
 
@@ -197,8 +198,8 @@ function setPage(pagenum: number) {
                     </TableBody>
                 </Table>
             </div>
-            <div class="mt-5 flex justify-between" :class="sidePanel !== sidePanelState.closed ? 'flex-col items-center' : 'items-center justify-between'"
->
+            <div class="mt-5 flex justify-between"
+                :class="sidePanel !== sidePanelState.closed ? 'flex-col items-center' : 'items-center justify-between'">
                 <div></div>
                 <Pagination v-slot="{ page }" :items-per-page="pageData?.pageSize || 10" :total="pageData?.total || 10"
                     :default-page="2" :page="pageNum" @update:page="setPage">
@@ -214,7 +215,7 @@ function setPage(pagenum: number) {
                         <PaginationNext />
                     </PaginationContent>
                 </Pagination>
-                <div class="flex items-center gap-3 text-sm" :class="sidePanel !== sidePanelState.closed ? 'mt-3' : ''" >
+                <div class="flex items-center gap-3 text-sm" :class="sidePanel !== sidePanelState.closed ? 'mt-3' : ''">
                     <p class="text-muted-foreground text-nowrap">Per page:</p>
 
                     <button v-for="size in pageSizeOptions" :key="size" @click="setPageSize(size)"
@@ -247,7 +248,7 @@ function setPage(pagenum: number) {
                                 :member-id="focusedTrainingReport.created_by" />
                         <p v-else>{{ focusedTrainingReport.created_by_name === null ? "Unknown User" :
                             focusedTrainingReport.created_by_name
-                        }}</p>
+                            }}</p>
                         </p>
                     </div>
                 </div>
@@ -293,12 +294,19 @@ function setPage(pagenum: number) {
                                     class="justify-self-start"></MemberCard>
                                 <p v-else>{{ person.attendee_name }}</p>
                             </div>
-                            <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
-                                :model-value="person.passed_bookwork" class="pointer-events-none ml-5">
-                            </Checkbox>
-                            <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
-                                :model-value="person.passed_qual" class="pointer-events-none ml-1">
-                            </Checkbox>
+                            <Tooltip :open="!focusedTrainingReport.course.hasBookwork"
+                                message="This course does not have bookwork">
+                                <Checkbox :disabled="!focusedTrainingReport.course.hasBookwork"
+                                    :model-value="person.passed_bookwork" class="pointer-events-none ml-5">
+                                </Checkbox>
+                            </Tooltip>
+                            <Tooltip :open="!focusedTrainingReport.course.hasQual"
+                                message="This course does not have a qualification">
+                                <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
+                                    :model-value="person.passed_qual" class="pointer-events-none ml-1">
+                                </Checkbox>
+                            </Tooltip>
+
                             <p class="col-span-2 text-right px-2"
                                 :class="person.remarks == '' ? 'text-muted-foreground' : ''">
                                 {{ person.remarks == "" ?