T07b: frontend feature pages — companies + contacts + settings + audit + dashboard + search

- 11 new feature pages (CompaniesList/Detail/Form, ContactsList/Detail/Form,
  SettingsProfile/Roles/Users, AuditLog, GlobalSearchResults)
- 3 page updates (Dashboard with StatCard+ActivityFeed, Settings with tree nav+Outlet,
  TopBar with SearchDropdown)
- 13 new routes in routes/index.tsx
- i18n updates (de.json + en.json) with companies/contacts/settings/audit/search keys
- 12 new test files + 2 existing test fixes (TopBar, AppShell)
- 7 shared components (DataGrid, Tabs, SearchDropdown, CsvImportDialog, StatCard,
  ActivityFeed, UnsavedChangesGuard)
- 16 new API hooks in hooks.ts
- Verification: 141 tests pass, build succeeds, tsc --noEmit clean

frontend/src/pages/Dashboard.tsx

@@ -1,55 +1,79 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Card } from '@/components/ui/Card';
-import { Badge } from '@/components/ui/Badge';
+import { StatCard } from '@/components/shared/StatCard';
+import { ActivityFeed, ActivityItem } from '@/components/shared/ActivityFeed';
+import { useCompanies, useContacts, useAuditLog } from '@/api/hooks';
 
 export function DashboardPage() {
   const { t } = useTranslation();
+  const { data: companiesData } = useCompanies(1, 1);
+  const { data: contactsData } = useContacts(1, 1);
+  const { data: auditData, isError: auditError } = useAuditLog(1, 5);
 
-  const stats = [
-    { label: 'Firmen', value: '24', change: '+3', variant: 'success' as const },
-    { label: 'Kontakte', value: '156', change: '+12', variant: 'success' as const },
-    { label: 'Offene Aufgaben', value: '8', change: '-2', variant: 'warning' as const },
-    { label: 'E-Mails heute', value: '34', change: '+5', variant: 'info' as const },
-  ];
+  const totalCompanies = companiesData?.total ?? 0;
+  const totalContacts = contactsData?.total ?? 0;
 
-  const activities = [
-    { user: 'Anna Schmidt', action: 'hat Firma TechCorp GmbH erstellt', time: 'vor 5 Minuten' },
-    { user: 'Max Müller', action: 'hat Kontakt Lisa Weber aktualisiert', time: 'vor 12 Minuten' },
-    { user: 'Anna Schmidt', action: 'hat 3 Kontakte importiert', time: 'vor 1 Stunde' },
-    { user: 'System', action: 'Backup erfolgreich erstellt', time: 'vor 2 Stunden' },
-  ];
+  const auditEntries = auditData?.items ?? [];
+  const activeThisWeek = auditEntries.filter((e) => {
+    if (!e.timestamp) return false;
+    const d = new Date(e.timestamp);
+    const weekAgo = new Date();
+    weekAgo.setDate(weekAgo.getDate() - 7);
+    return d >= weekAgo;
+  }).length;
+
+  const newThisMonth = auditEntries.filter((e) => {
+    if (!e.timestamp) return false;
+    const d = new Date(e.timestamp);
+    const monthAgo = new Date();
+    monthAgo.setMonth(monthAgo.getMonth() - 1);
+    return d >= monthAgo;
+  }).length;
+
+  const activities: ActivityItem[] = auditError
+    ? []
+    : auditEntries.map((entry) => ({
+        id: `${entry.timestamp}-${entry.user}-${entry.action}`,
+        user: entry.user || 'System',
+        action: entry.action || '',
+        time: entry.timestamp ? new Date(entry.timestamp).toLocaleString('de-DE') : '',
+        avatarUrl: null,
+      }));
 
   return (
     <div className="p-6 max-w-7xl mx-auto" data-testid="dashboard-page">
-      <h1 className="text-2xl font-bold text-secondary-900 mb-6">{t('nav.dashboard')}</h1>
+      <h1 className="text-2xl font-bold text-secondary-900 mb-6">{t('dashboard.title')}</h1>
+
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
-        {stats.map((stat) => (
-          <Card key={stat.label}>
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-secondary-500">{stat.label}</p>
-                <p className="text-2xl font-bold text-secondary-900 mt-1">{stat.value}</p>
-              </div>
-              <Badge variant={stat.variant} dot>{stat.change}</Badge>
-            </div>
-          </Card>
-        ))}
+        <StatCard
+          label={t('dashboard.totalCompanies')}
+          value={totalCompanies}
+          testId="stat-companies"
+        />
+        <StatCard
+          label={t('dashboard.totalContacts')}
+          value={totalContacts}
+          testId="stat-contacts"
+        />
+        <StatCard
+          label={t('dashboard.activeThisWeek')}
+          value={activeThisWeek}
+          testId="stat-active-week"
+        />
+        <StatCard
+          label={t('dashboard.newThisMonth')}
+          value={newThisMonth}
+          testId="stat-new-month"
+        />
       </div>
-      <Card title="Letzte Aktivitäten">
-        <ul className="space-y-3" role="list">
-          {activities.map((activity, idx) => (
-            <li key={idx} className="flex items-start gap-3 text-sm">
-              <span className="w-2 h-2 rounded-full bg-primary-500 mt-1.5 flex-shrink-0" aria-hidden="true" />
-              <div>
-                <span className="font-medium text-secondary-900">{activity.user}</span>
-                <span className="text-secondary-600"> {activity.action}</span>
-                <span className="text-secondary-400 block mt-0.5">{activity.time}</span>
-              </div>
-            </li>
-          ))}
-        </ul>
-      </Card>
+
+      {auditError ? (
+        <p className="text-sm text-secondary-500" data-testid="activity-unavailable">
+          {t('dashboard.activityUnavailable')}
+        </p>
+      ) : (
+        <ActivityFeed activities={activities} title={t('dashboard.recentActivity')} />
+      )}
     </div>
   );
 }