T07a: frontend core SPA — shell + auth + routing + i18n + UI library + a11y

- React 18 + Vite + TypeScript + Tailwind CSS setup - AppShell with Sidebar (plugin menu) + TopBar (tenant switcher, search, notifications, user menu) - Auth pages: Login, PasswordResetRequest, PasswordResetConfirm - Protected routes with auth guard - API client (axios with interceptors: session cookie, 401 redirect, 422 validation) - TanStack Query hooks for auth, users, companies, contacts, notifications - Zustand stores: authStore, uiStore - i18n setup (de/en locales) with react-i18next - UI component library: Button, Input, Select, Modal, Toast, Table, Card, Badge, Avatar, Pagination, EmptyState, Skeleton, ConfirmDialog - Accessibility: ARIA labels, 44px touch targets, keyboard nav, reduced-motion, sr-only - Design tokens from prototype as CSS custom properties - 111 tests passing across 20 test files - tsc --noEmit: 0 errors - npm run build: success (471KB JS, 24KB CSS)
2026-06-29 07:55:47 +02:00
parent f8193a6ab5
commit 22976abe92
66 changed files with 8598 additions and 0 deletions
@@ -0,0 +1,55 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+
+export function DashboardPage() {
+  const { t } = useTranslation();
+
+  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 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' },
+  ];
+
+  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>
+      <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>
+        ))}
+      </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>
+    </div>
+  );
+}