Overview of upcoming events

app/Domains/Dashboard/Controllers/DashboardController.php

@@ -41,7 +41,10 @@ class DashboardController extends CommonController {
     }
 
     public function getMyParticipations() : JsonResponse {
-        //dd($this->eventParticipants->getMyParticipations());
         return response()->json(['myParticipations' => $this->eventParticipants->getMyParticipations()]);
     }
+
+    public function getUpcomingEvents() : JsonResponse {
+        return response()->json(['upcomingEvents' => $this->events->getUpcoming()]);
+    }
 }

app/Domains/Dashboard/Routes/api.php

@@ -9,6 +9,7 @@ Route::middleware(IdentifyTenant::class)->group(function () {
         Route::prefix('api/v1/dashboard')->group(function () {
             Route::get('/my-invoices', [DashboardController::class, 'getMyInvoices']);
             Route::get('/open-cost-units', [DashboardController::class, 'getOpenCostUnits']);
+            Route::get('/upcoming-events', [DashboardController::class, 'getUpcomingEvents']);
             Route::get('/my-participations', [DashboardController::class, 'getMyParticipations']);
         });
 

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>