Refactor DashboardWidget to use dynamic widget components: Replace static slot content with a dynamic component rendering based on the endpoint prop. This change simplifies the widget structure and enhances flexibility by allowing different widget types to be displayed. Additionally, update error handling to provide more specific error messages.

frontend/src/components/widgets/ListWidget.vue

@@ -0,0 +1,92 @@
+<template>
+  <ul v-if="items.length" class="dashboard-widget__list">
+    <li
+      v-for="(item, i) in items"
+      :key="i"
+      class="dashboard-widget__list-item"
+    >
+      <span v-if="item.datum" class="dashboard-widget__date">{{ formatDatum(item.datum) }}</span>
+      <span v-if="item.titel" class="dashboard-widget__title-text">{{ item.titel }}</span>
+      <span v-else-if="item.label" class="dashboard-widget__title-text">{{ item.label }}</span>
+      <p v-if="item.beschreibung" class="dashboard-widget__desc">{{ item.beschreibung }}</p>
+    </li>
+  </ul>
+  <span v-else>{{ fallbackText }}</span>
+</template>
+
+<script>
+export default {
+  name: 'ListWidget',
+  props: {
+    data: { type: [Array, Object], default: null }
+  },
+  computed: {
+    items() {
+      if (!Array.isArray(this.data) || this.data.length === 0) return [];
+      const first = this.data[0];
+      if (first !== null && typeof first === 'object') return this.data;
+      return [];
+    },
+    fallbackText() {
+      if (this.data == null) return '';
+      if (Array.isArray(this.data)) {
+        return this.data.length === 0 ? 'Keine Einträge' : `(${this.data.length} Einträge)`;
+      }
+      if (typeof this.data === 'object') {
+        const keys = Object.keys(this.data);
+        return keys.length === 0 ? '—' : `(${keys.length} Felder)`;
+      }
+      return String(this.data);
+    }
+  },
+  methods: {
+    formatDatum(dateStr) {
+      if (!dateStr) return '';
+      const d = new Date(dateStr);
+      if (Number.isNaN(d.getTime())) return String(dateStr);
+      return d.toLocaleDateString('de-DE', {
+        weekday: 'short',
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric'
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.dashboard-widget__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.dashboard-widget__list-item {
+  padding: 8px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.dashboard-widget__list-item:last-child {
+  border-bottom: none;
+}
+
+.dashboard-widget__date {
+  display: block;
+  font-size: 0.8rem;
+  color: #666;
+  margin-bottom: 2px;
+}
+
+.dashboard-widget__title-text {
+  font-weight: 600;
+  color: #333;
+}
+
+.dashboard-widget__desc {
+  margin: 4px 0 0 0;
+  font-size: 0.85rem;
+  color: #555;
+  line-height: 1.4;
+}
+</style>