Overview of upcoming events

app/Domains/Dashboard/Views/Partials/Widgets/UpcomingEvents.vue

@@ -0,0 +1,40 @@
+<script setup>
+import {onMounted, reactive} from "vue";
+
+const events = reactive({
+    'upcomingEvents': '',
+
+})
+
+onMounted(async () => {
+    const response = await fetch('/api/v1/dashboard/upcoming-events');
+    const data = await response.json();
+    Object.assign(events, data);
+});
+
+</script>
+
+<template>
+    <table class="widget-content-item" v-if="events.upcomingEvents.length > 0">
+        <tr>
+            <td style="font-weight: bold">Veranstaltung</td>
+            <td style="font-weight: bold">Teilis</td>
+            <td style="font-weight: bold">Team</td>
+            <td style="font-weight: bold">GruFüs</td>
+        </tr>
+
+        <tr v-for="event in events.upcomingEvents">
+            <td><a :href="'/event/details/' + event.identifier" class="link">{{event.nameShort}}</a></td>
+            <td style="text-align: center;">{{event.countParticipant}}</td>
+            <td style="text-align: center;">{{event.countTeam}}</td>
+            <td style="text-align: center;">{{event.countVolunteer}}</td>
+        </tr>
+    </table>
+
+    <p v-else style="padding: 10px; font-weight: bold">Es existieren im Moment keine Veranstaltungen, für die du verantwortlich bist.</p>
+
+</template>
+
+<style scoped>
+
+</style>