added training report list to client

ui/src/pages/TrainingReport.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { getTrainingReports } from '@/api/trainingReport';
+import { trainingReportSchema, courseEventAttendeeSchema } from '@shared/schemas/trainingReportSchema'
+import { CourseEventDetails, CourseEventSummary } from '@shared/types/course';
+import { toTypedSchema } from '@vee-validate/zod';
+import { onMounted, ref } from 'vue';
+import {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableFooter,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/components/ui/table'
+
+const trainingReports = ref<CourseEventSummary[] | null>(null);
+const loaded = ref(false);
+
+const focusedTrainingReport = ref<CourseEventDetails | null>(null);
+
+onMounted(async () => {
+    trainingReports.value = await getTrainingReports();
+    loaded.value = true;
+})
+</script>
+
+<template>
+    <div class="max-w-5xl mx-auto">
+        <div>
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead class="w-[100px]">
+                            Training
+                        </TableHead>
+                        <TableHead>Date</TableHead>
+                        <TableHead class="text-right">
+                            Posted By
+                        </TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody v-if="loaded">
+                    <TableRow v-for="report in trainingReports" @click="console.log(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>
+                    </TableRow>
+                </TableBody>
+            </Table>
+
+        </div>
+        <!-- view training report section -->
+        <div>
+            DETAILS
+        </div>
+    </div>
+</template>