From 9322affce59be0ac2dd3a49bfbd12e187bf577d4 Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Thu, 20 Nov 2025 15:11:14 -0500
Subject: [PATCH] adjusted grid styling

---
 .../trainingReport/trainingReportForm.vue     | 41 +++++++++----------
 ui/src/pages/TrainingReport.vue               |  6 +--
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/ui/src/components/trainingReport/trainingReportForm.vue b/ui/src/components/trainingReport/trainingReportForm.vue
index d8ea8b0..5b88a5c 100644
--- a/ui/src/components/trainingReport/trainingReportForm.vue
+++ b/ui/src/components/trainingReport/trainingReportForm.vue
@@ -117,11 +117,11 @@ onMounted(async () => {
 
                     <!-- Column Headers -->
                     <div
-                        class="grid grid-cols-[180px_140px_50px_1fr_auto] gap-3 font-medium text-sm text-muted-foreground px-1">
+                        class="grid grid-cols-[180px_160px_50px_50px_1fr_auto] gap-3 font-medium text-sm text-muted-foreground px-1">
                         <div>Member</div>
                         <div>Role</div>
-                        <div v-if="selectedCourse?.hasBookwork">Bookwork</div>
-                        <div v-if="selectedCourse?.hasQual">Qual</div>
+                        <div>Bookwork</div>
+                        <div>Qual</div>
                         <div>Remarks</div>
                         <div></div> <!-- empty for remove button -->
                     </div>
@@ -130,7 +130,7 @@ onMounted(async () => {
                     <!-- Attendee Rows -->
                     <template v-for="(field, index) in fields" :key="field.key">
 
-                        <div class="grid grid-cols-[180px_140px_50px_1fr_auto] gap-3 items-start">
+                        <div class="grid grid-cols-[180px_160px_50px_50px_1fr_auto] gap-3 items-start">
 
                             <!-- Member Select -->
                             <VeeField :name="`attendees[${index}].attendee_id`" v-slot="{ field: f, errors: e }">
@@ -161,41 +161,40 @@ onMounted(async () => {
                             </VeeField>
 
                             <!-- Passed Checkbox -->
-                            <VeeField v-if="selectedCourse?.hasBookwork" v-slot="{ field }"
-                                :name="`attendees[${index}].passed_bookwork`" type="checkbox" :value="true"
-                                :unchecked-value="false">
+                            <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 :name="`attendees[${index}].passed_bookwork`" v-bind="field" :value="true">
-                                    </Checkbox> -->
-
+                                    <!-- <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>
                             </VeeField>
 
                             <!-- Passed Checkbox -->
-                            <VeeField v-if="selectedCourse?.hasQual" v-slot="{ field }"
-                                :name="`attendees[${index}].passed_qual`" type="checkbox" :value="true"
-                                :unchecked-value="false">
+                            <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 :name="`attendees[${index}].passed_qual`" v-bind="field"></Checkbox> -->
+                                    <!-- <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>
                             </VeeField>
 
                             <!-- Remarks -->
                             <VeeField :name="`attendees[${index}].remarks`" v-slot="{ field: f, errors: e }">
                                 <div>
-                                    <textarea v-bind="f" class="w-full border p-2 rounded-md h-[38px] resize-none"
+                                    <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" size="xs" @click="remove(index)" class="self-center">
-                                <X class="h-4 w-4" />
+                            <Button type="button" variant="ghost" @click="remove(index)" class="self-center">
+                                <X :size="10" />
                             </Button>
                         </div>
                     </template>
diff --git a/ui/src/pages/TrainingReport.vue b/ui/src/pages/TrainingReport.vue
index 69f42c6..eb99f44 100644
--- a/ui/src/pages/TrainingReport.vue
+++ b/ui/src/pages/TrainingReport.vue
@@ -58,7 +58,7 @@ onMounted(async () => {
 <template>
     <div class="max-w-7xl mx-auto flex mt-5">
         <!-- training report list -->
-        <div class="px-4" :class="sidePanel == sidePanelState.closed ? 'w-full' : 'w-1/2'">
+        <div class="px-4" :class="sidePanel == sidePanelState.closed ? 'w-full' : 'w-2/5'">
             <div class="flex justify-between">
                 <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p>
                 <Button @click="createTrainingReport">New Training Report</Button>
@@ -90,7 +90,7 @@ onMounted(async () => {
             </div>
         </div>
         <!-- view training report section -->
-        <div v-if="sidePanel == sidePanelState.view" class="px-4 border-l w-1/2">
+        <div v-if="sidePanel == sidePanelState.view" class="px-4 border-l w-3/5">
             <div class="flex justify-between my-3">
                 <div class="flex gap-5">
                     <p>{{ focusedTrainingReport.course_name }}</p>
@@ -132,7 +132,7 @@ onMounted(async () => {
                 </div>
             </div>
         </div>
-        <div v-if="sidePanel == sidePanelState.create" class="px-4 border-l w-1/2">
+        <div v-if="sidePanel == sidePanelState.create" class="px-4 border-l w-3/5">
             <div class="flex justify-between my-3">
                 <div class="flex gap-5">
                     <p>New Training Report</p>