Task 5.25: Dashboard-System — GET /api/v1/dashboard/widgets, DashboardWidgetLoader, DashboardGrid with drag-and-drop, 3 example widgets (RecentContacts, TasksSummary, CalendarUpcoming), updated Dashboard.tsx, i18n, 6 tests

2026-07-24 00:09:26 +02:00
parent 96e183bab2
commit 036e87a9ed
15 changed files with 544 additions and 6 deletions
@@ -0,0 +1,40 @@
+/**
+ * RecentContactsWidget — shows last 5 contacts (Task 5.25).
+ */
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useUnifiedContacts } from '@/api/hooks';
+import { formatDateTime } from '@/utils/date';
+import { Users } from 'lucide-react';
+
+export function RecentContactsWidget() {
+  const { t } = useTranslation();
+  const { data, isLoading, isError } = useUnifiedContacts(1, 5, undefined, undefined);
+
+  if (isLoading) {
+    return <div className="animate-pulse space-y-2" data-testid="recent-contacts-loading">{[...Array(3)].map((_, i) => <div key={i} className="h-4 bg-secondary-100 rounded" />)}</div>;
+  }
+
+  if (isError) {
+    return <p className="text-sm text-secondary-500" data-testid="recent-contacts-error">{t('dashboard.widgetError')}</p>;
+  }
+
+  const contacts = data?.items ?? [];
+
+  if (contacts.length === 0) {
+    return <p className="text-sm text-secondary-500" data-testid="recent-contacts-empty">{t('dashboard.noContacts')}</p>;
+  }
+
+  return (
+    <div className="space-y-2" data-testid="recent-contacts-widget">
+      {contacts.map((contact) => (
+        <div key={contact.id} className="flex items-center gap-2 text-sm">
+          <Users className="w-3.5 h-3.5 text-secondary-400" />
+          <span className="font-medium text-secondary-800">{contact.displayname}</span>
+          {contact.email_1 && <span className="text-secondary-500 truncate">{contact.email_1}</span>}
+        </div>
+      ))}
+    </div>
+  );
+}