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 { Select } from '@/components/ui/Select';
+import { useUIStore } from '@/store/uiStore';
+
+export function SettingsPage() {
+  const { t, i18n } = useTranslation();
+  const { theme, setTheme, locale, setLocale } = useUIStore();
+
+  const handleLocaleChange = (newLocale: string) => {
+    setLocale(newLocale as 'de' | 'en');
+    i18n.changeLanguage(newLocale);
+  };
+
+  const handleThemeChange = (newTheme: string) => {
+    setTheme(newTheme as 'light' | 'dark' | 'system');
+    if (newTheme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  };
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto" data-testid="settings-page">
+      <h1 className="text-2xl font-bold text-secondary-900 mb-6">{t('settings.title')}</h1>
+      <div className="space-y-6">
+        <Card title={t('settings.language')} description="Wählen Sie Ihre bevorzugte Sprache">
+          <Select
+            options={[
+              { value: 'de', label: 'Deutsch' },
+              { value: 'en', label: 'English' },
+            ]}
+            value={locale}
+            onChange={(e) => handleLocaleChange(e.target.value)}
+            aria-label={t('settings.language')}
+          />
+        </Card>
+        <Card title={t('settings.theme')} description="Wählen Sie Ihr bevorzugtes Design">
+          <Select
+            options={[
+              { value: 'light', label: t('settings.light') },
+              { value: 'dark', label: t('settings.dark') },
+              { value: 'system', label: t('settings.system') },
+            ]}
+            value={theme}
+            onChange={(e) => handleThemeChange(e.target.value)}
+            aria-label={t('settings.theme')}
+          />
+        </Card>
+      </div>
+    </div>
+  );
+}