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/NewsWidget.vue

@@ -0,0 +1,85 @@
+<template>
+  <article v-if="article" class="dashboard-widget__news-single">
+    <a
+      v-if="article.link"
+      :href="article.link"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="dashboard-widget__news-title"
+    >
+      {{ article.title || '—' }}
+    </a>
+    <span v-else class="dashboard-widget__title-text">{{ article.title || '—' }}</span>
+    <span v-if="article.pubDate" class="dashboard-widget__date">{{ formatNewsDate(article.pubDate) }}</span>
+    <p v-if="article.description" class="dashboard-widget__desc">{{ article.description }}</p>
+  </article>
+  <span v-else>—</span>
+</template>
+
+<script>
+export default {
+  name: 'NewsWidget',
+  props: {
+    data: { type: Object, default: null }
+  },
+  computed: {
+    article() {
+      const d = this.data;
+      if (d && typeof d === 'object' && Array.isArray(d.results) && d.results.length > 0) {
+        return d.results[0];
+      }
+      return null;
+    }
+  },
+  methods: {
+    formatNewsDate(dateStr) {
+      if (!dateStr) return '';
+      const d = new Date(dateStr);
+      if (Number.isNaN(d.getTime())) return String(dateStr);
+      return d.toLocaleDateString('de-DE', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.dashboard-widget__news-single {
+  margin: 0;
+}
+
+.dashboard-widget__news-title {
+  font-weight: 600;
+  color: var(--color-primary-orange);
+  text-decoration: none;
+}
+
+.dashboard-widget__news-title:hover {
+  text-decoration: underline;
+  color: var(--color-text-secondary);
+}
+
+.dashboard-widget__title-text {
+  font-weight: 600;
+  color: #333;
+}
+
+.dashboard-widget__date {
+  display: block;
+  font-size: 0.8rem;
+  color: #666;
+  margin-bottom: 2px;
+}
+
+.dashboard-widget__desc {
+  margin: 4px 0 0 0;
+  font-size: 0.85rem;
+  color: #555;
+  line-height: 1.4;
+}
+</style>