Made all created by human readable

ui/src/pages/TrainingReport.vue

@@ -60,7 +60,7 @@ onMounted(async () => {
             </div>
             <div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
                 <Table>
-                    <TableHeader>
+                    <TableHeader class="">
                         <TableRow>
                             <TableHead class="w-[100px]">
                                 Training
@@ -76,7 +76,8 @@ onMounted(async () => {
                             @click="viewTrainingReport(report.event_id);">
                             <TableCell class="font-medium">{{ report.course_name }}</TableCell>
                             <TableCell>{{ report.date }}</TableCell>
-                            <TableCell class="text-right">{{ report.created_by === null ? "Unknown User" : report.created_by
+                            <TableCell class="text-right">{{ report.created_by_name === null ? "Unknown User" :
+                                report.created_by_name
                             }}</TableCell>
                         </TableRow>
                     </TableBody>
@@ -89,6 +90,9 @@ onMounted(async () => {
                 <div class="flex gap-5">
                     <p>{{ focusedTrainingReport.course_name }}</p>
                     <p class="text-muted-foreground">{{ focusedTrainingReport.event_date }}</p>
+                    <p class="">Created by {{ focusedTrainingReport.created_by_name === null ? "Unknown User" :
+                        focusedTrainingReport.created_by_name
+                    }}</p>
                 </div>
                 <button @click="closeTrainingReport" class="cursor-pointer">
                     <X></X>
@@ -144,12 +148,14 @@ onMounted(async () => {
 
 /* Chrome, Edge, Safari */
 .scrollbar-themed::-webkit-scrollbar {
-    width: 10px; /* slightly wider to allow padding look */
+    width: 10px;
+    /* slightly wider to allow padding look */
 }
 
 .scrollbar-themed::-webkit-scrollbar-track {
     background: #1f1f1f;
-    margin-left: 6px; /* ❗ adds space between content + scrollbar */
+    margin-left: 6px;
+    /* ❗ adds space between content + scrollbar */
 }
 
 .scrollbar-themed::-webkit-scrollbar-thumb {
@@ -160,5 +166,4 @@ onMounted(async () => {
 .scrollbar-themed::-webkit-scrollbar-thumb:hover {
     background: #777;
 }
-
 </style>