ui/src/components/trainingReport/trainingReportForm.vue

@@ -65,6 +65,7 @@ onMounted(async () => {
 </script>
 <template>
     <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">
@@ -141,12 +142,15 @@ onMounted(async () => {
                             </VeeField>
 
                             <!-- Passed Checkbox -->
-                            <VeeField :name="`attendees[${index}].passed`" v-slot="{ field: f, errors: e }">
-                                <div class="flex items-center h-[38px]">
-                                    <input type="checkbox" :checked="f.value" @change="f.onChange($event)" />
-                                </div>
+                            <VeeField v-slot="{ field }" :name="`attendees[${index}].passed`" type="checkbox"
+                                :value="true" :unchecked-value="false">
+                                <label>
+                                    <input type="checkbox" :name="`attendees[${index}].passed`" v-bind="field"
+                                        :value="true" />
+                                </label>
                             </VeeField>
 
+
                             <!-- Remarks -->
                             <VeeField :name="`attendees[${index}].remarks`" v-slot="{ field: f, errors: e }">
                                 <div>