From 9eb815cde50360ff547ce44e06da2078b7272214 Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Thu, 20 Nov 2025 19:39:29 -0500
Subject: [PATCH] Major style pass to the form

---
 .../trainingReport/trainingReportForm.vue     | 109 +++++++++++-------
 ui/src/pages/TrainingReport.vue               |  20 ++--
 2 files changed, 76 insertions(+), 53 deletions(-)

diff --git a/ui/src/components/trainingReport/trainingReportForm.vue b/ui/src/components/trainingReport/trainingReportForm.vue
index 0917938..e611876 100644
--- a/ui/src/components/trainingReport/trainingReportForm.vue
+++ b/ui/src/components/trainingReport/trainingReportForm.vue
@@ -73,46 +73,54 @@ onMounted(async () => {
 })
 </script>
 <template>
-    <form id="trainingForm" @submit.prevent="submitForm" class="flex flex-col gap-5 pl-2">
+    <form id="trainingForm" @submit.prevent="submitForm" class="flex flex-col gap-5">
 
-        <FieldGroup>
-            <VeeField v-slot="{ field, errors }" name="course_id">
-                <Field :data-invalid="!!errors.length">
-                    <FieldLabel>Training Course</FieldLabel>
-
-                    <select v-bind="field"
-                        class="border rounded p-2 w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none">
-                        <option value="" disabled>Select a course</option>
-                        <option v-for="course in trainings" :key="course.id" :value="course.id">
-                            {{ course.name }}
-                        </option>
-                    </select>
-
-                    <FieldError v-if="errors.length" :errors="errors" />
-                </Field>
-            </VeeField>
-        </FieldGroup>
-        <FieldGroup>
-            <VeeField v-slot="{ field, errors }" name="event_date">
-                <Field :data-invalid="!!errors.length">
-                    <FieldLabel>Event Date</FieldLabel>
-                    <input type="date" v-bind="field"
-                        class="border rounded p-2 w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none" />
-                    <FieldError v-if="errors.length" :errors="errors" />
-                </Field>
-            </VeeField>
-        </FieldGroup>
+        <div class="flex gap-5">
+            <div class="flex-1">
+                <FieldGroup>
+                    <VeeField v-slot="{ field, errors }" name="course_id">
+                        <Field :data-invalid="!!errors.length">
+                            <FieldLabel class="scroll-m-20 text-lg tracking-tight">Training Course</FieldLabel>
+                            <select v-bind="field"
+                                class="h-9 border rounded p-2 w-auto focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none">
+                                <option value="" disabled>Select a course</option>
+                                <option v-for="course in trainings" :key="course.id" :value="course.id">
+                                    {{ course.name }}
+                                </option>
+                            </select>
+                            <div class="h-4">
+                                <FieldError v-if="errors.length" :errors="errors" />
+                            </div>
+                        </Field>
+                    </VeeField>
+                </FieldGroup>
+            </div>
+            <div class="w-[150px]">
+                <FieldGroup>
+                    <VeeField v-slot="{ field, errors }" name="event_date">
+                        <Field :data-invalid="!!errors.length">
+                            <FieldLabel class="scroll-m-20 text-lg tracking-tight">Event Date</FieldLabel>
+                            <input type="date" v-bind="field"
+                                class="h-9 border rounded p-2 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none" />
+                            <div class="h-4">
+                                <FieldError v-if="errors.length" :errors="errors" />
+                            </div>
+                        </Field>
+                    </VeeField>
+                </FieldGroup>
+            </div>
+        </div>
 
         <VeeFieldArray name="attendees" v-slot="{ fields, push, remove }">
             <FieldSet class="gap-4">
-                <FieldLegend>Attendees</FieldLegend>
+                <FieldLegend class="scroll-m-20 text-lg tracking-tight">Attendees</FieldLegend>
                 <FieldDescription>Add members who attended this session.</FieldDescription>
 
                 <FieldGroup class="gap-4">
 
                     <!-- Column Headers -->
                     <div
-                        class="grid grid-cols-[180px_160px_50px_50px_1fr_auto] gap-3 font-medium text-sm text-muted-foreground px-1">
+                        class="grid grid-cols-[180px_150px_65px_45px_1fr_auto] gap-3 font-medium text-sm text-muted-foreground px-1">
                         <div>Member</div>
                         <div>Role</div>
                         <div>Bookwork</div>
@@ -137,7 +145,9 @@ onMounted(async () => {
                                             {{ m.member_name }}
                                         </option>
                                     </select>
-                                    <FieldError v-if="e.length" :errors="e" />
+                                    <div class="h-4">
+                                        <FieldError v-if="e.length" :errors="e" />
+                                    </div>
                                 </div>
                             </VeeField>
 
@@ -151,14 +161,16 @@ onMounted(async () => {
                                             {{ r.name }}
                                         </option>
                                     </select>
-                                    <FieldError v-if="e.length" :errors="e" />
+                                    <div class="h-4">
+                                        <FieldError v-if="e.length" :errors="e" />
+                                    </div>
                                 </div>
                             </VeeField>
 
                             <!-- Passed Checkbox -->
                             <VeeField v-slot="{ field }" :name="`attendees[${index}].passed_bookwork`" type="checkbox"
                                 :value="true" :unchecked-value="false">
-                                <div class="flex justify-center">
+                                <div class="flex flex-col items-center">
                                     <div class="relative inline-flex items-center group">
 
                                         <Checkbox :disabled="!selectedCourse?.hasBookwork"
@@ -174,13 +186,15 @@ onMounted(async () => {
                                             This course does not have bookwork
                                         </div>
                                     </div>
+                                    <div class="h-4">
+                                    </div>
                                 </div>
                             </VeeField>
 
                             <!-- Passed Checkbox -->
                             <VeeField v-slot="{ field }" :name="`attendees[${index}].passed_qual`" type="checkbox"
                                 :value="true" :unchecked-value="false">
-                                <div class="flex justify-center">
+                                <div class="flex flex-col items-center">
                                     <div class="relative inline-flex items-center group">
                                         <Checkbox :disabled="!selectedCourse?.hasQual"
                                             :name="`attendees[${index}].passed_qual`" v-bind="field"></Checkbox>
@@ -194,6 +208,8 @@ onMounted(async () => {
                                             This course does not have a qualification
                                         </div>
                                     </div>
+                                    <div class="h-4">
+                                    </div>
                                 </div>
                             </VeeField>
 
@@ -203,14 +219,21 @@ onMounted(async () => {
                                     <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 class="h-4">
+                                        <FieldError v-if="e.length" :errors="e" />
+                                    </div>
                                 </div>
                             </VeeField>
 
-                            <!-- Remove button -->
-                            <Button type="button" variant="ghost" size="sm" @click="remove(index)" class="self-center">
-                                <X :size="10" />
-                            </Button>
+                            <div>
+                                <!-- Remove button -->
+                                <Button type="button" variant="ghost" size="sm" @click="remove(index)"
+                                    class="self-center">
+                                    <X :size="10" />
+                                </Button>
+                                <div class="h-4">
+                                </div>
+                            </div>
                         </div>
                     </template>
                 </FieldGroup>
@@ -224,19 +247,19 @@ onMounted(async () => {
             </FieldSet>
         </VeeFieldArray>
 
-        <FieldGroup>
+        <FieldGroup class="pt-3">
             <VeeField v-slot="{ field, errors }" name="remarks">
                 <Field :data-invalid="!!errors.length">
-                    <FieldLabel>Remarks</FieldLabel>
+                    <FieldLabel class="scroll-m-20 text-lg tracking-tight">Remarks</FieldLabel>
                     <Textarea v-bind="field" placeholder="Any remarks about this training event..."
                         autocomplete="off" />
                     <FieldError v-if="errors.length" :errors="errors" />
                 </Field>
             </VeeField>
         </FieldGroup>
-        <Field orientation="horizontal">
+        <div class="flex gap-3 justify-end">
             <Button type="button" variant="outline" @click="resetForm">Reset</Button>
             <Button type="submit" form="trainingForm">Submit</Button>
-        </Field>
+        </div>
     </form>
 </template>
diff --git a/ui/src/pages/TrainingReport.vue b/ui/src/pages/TrainingReport.vue
index eb99f44..a273e01 100644
--- a/ui/src/pages/TrainingReport.vue
+++ b/ui/src/pages/TrainingReport.vue
@@ -10,7 +10,7 @@ import {
     TableHeader,
     TableRow,
 } from '@/components/ui/table'
-import { X } from 'lucide-vue-next';
+import { Plus, X } from 'lucide-vue-next';
 import Button from '@/components/ui/button/Button.vue';
 import TrainingReportForm from '@/components/trainingReport/trainingReportForm.vue';
 import Checkbox from '@/components/ui/checkbox/Checkbox.vue';
@@ -56,12 +56,12 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div class="max-w-7xl mx-auto flex mt-5">
+    <div class="px-20 mx-auto max-w-[100rem] flex mt-5">
         <!-- training report list -->
-        <div class="px-4" :class="sidePanel == sidePanelState.closed ? 'w-full' : 'w-2/5'">
+        <div class="px-4 my-3" :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>
+                <Button @click="createTrainingReport"><Plus></Plus> New Training Report</Button>
             </div>
             <div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
                 <Table>
@@ -72,7 +72,7 @@ onMounted(async () => {
                             </TableHead>
                             <TableHead>Date</TableHead>
                             <TableHead class="text-right">
-                                Posted By
+                                Posted By   
                             </TableHead>
                         </TableRow>
                     </TableHeader>
@@ -90,7 +90,7 @@ onMounted(async () => {
             </div>
         </div>
         <!-- view training report section -->
-        <div v-if="sidePanel == sidePanelState.view" class="px-4 border-l w-3/5">
+        <div v-if="sidePanel == sidePanelState.view" class="px-4 my-3 border-l w-3/5">
             <div class="flex justify-between my-3">
                 <div class="flex gap-5">
                     <p>{{ focusedTrainingReport.course_name }}</p>
@@ -132,17 +132,17 @@ onMounted(async () => {
                 </div>
             </div>
         </div>
-        <div v-if="sidePanel == sidePanelState.create" class="px-4 border-l w-3/5">
+        <div v-if="sidePanel == sidePanelState.create" class="pl-7 border-l w-3/5 max-w-5xl">
             <div class="flex justify-between my-3">
-                <div class="flex gap-5">
-                    <p>New Training Report</p>
+                <div class="flex pl-2 gap-5">
+                    <p class="scroll-m-20 text-2xl font-semibold tracking-tight">New Training Report</p>
                 </div>
                 <button @click="closeTrainingReport" class="cursor-pointer">
                     <X></X>
                 </button>
             </div>
             <div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
-                <TrainingReportForm class="w-full"
+                <TrainingReportForm class="w-full pl-2"
                     @submit="(newID) => { viewTrainingReport(newID); loadTrainingReports() }"></TrainingReportForm>
             </div>
         </div>