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)

frontend/src/store/authStore.ts

@@ -0,0 +1,55 @@
+import { create } from 'zustand';
+
+export interface Tenant {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface User {
+  id: string;
+  email: string;
+  first_name: string;
+  last_name: string;
+  role: string;
+  avatar_url: string | null;
+  tenants: Tenant[];
+}
+
+export interface AuthState {
+  user: User | null;
+  currentTenant: Tenant | null; isAuthenticated: boolean;
+  isLoading: boolean;
+  error: string | null;
+  setUser: (user: User | null) => void;
+  setTenant: (tenant: Tenant | null) => void;
+  setAuthenticated: (authed: boolean) => void;
+  setLoading: (loading: boolean) => void;
+  setError: (error: string | null) => void;
+  logout: () => void;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  user: null,
+  currentTenant: null,
+  isAuthenticated: false,
+  isLoading: false,
+  error: null,
+  setUser: (user) =>
+    set({
+      user,
+      isAuthenticated: !!user,
+      currentTenant: user?.tenants?.[0] ?? null,
+    }),
+  setTenant: (tenant) => set({ currentTenant: tenant }),
+  setAuthenticated: (authed) => set({ isAuthenticated: authed }),
+  setLoading: (loading) => set({ isLoading: loading }),
+  setError: (error) => set({ error }),
+  logout: () =>
+    set({
+      user: null,
+      currentTenant: null,
+      isAuthenticated: false,
+      error: null,
+    }),
+}));

frontend/src/store/uiStore.ts

@@ -0,0 +1,51 @@
+import { create } from 'zustand';
+
+export type Theme = 'light' | 'dark' | 'system';
+export type Locale = 'de' | 'en';
+
+export interface Toast {
+  id: string;
+  type: 'success' | 'error' | 'warning' | 'info';
+  message: string;
+  duration?: number;
+}
+
+export interface UIState {
+  theme: Theme;
+  locale: Locale;
+  sidebarOpen: boolean;
+  toasts: Toast[];
+  setTheme: (theme: Theme) => void;
+  setLocale: (locale: Locale) => void;
+  toggleSidebar: () => void;
+  setSidebarOpen: (open: boolean) => void;
+  addToast: (toast: Omit<Toast, 'id'>) => void;
+  removeToast: (id: string) => void;
+  clearToasts: () => void;
+}
+
+let toastIdCounter = 0;
+
+export const useUIStore = create<UIState>((set) => ({
+  theme: (localStorage.getItem('leocrm_theme') as Theme) || 'light',
+  locale: (localStorage.getItem('leocrm_lang') as Locale) || 'de',
+  sidebarOpen: true,
+  toasts: [],
+  setTheme: (theme) => {
+    localStorage.setItem('leocrm_theme', theme);
+    set({ theme });
+  },
+  setLocale: (locale) => {
+    localStorage.setItem('leocrm_lang', locale);
+    set({ locale });
+  },
+  toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
+  setSidebarOpen: (open) => set({ sidebarOpen: open }),
+  addToast: (toast) => {
+    const id = `toast-${++toastIdCounter}`;
+    set((s) => ({ toasts: [...s.toasts, { ...toast, id }] }));
+  },
+  removeToast: (id) =>
+    set((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) })),
+  clearToasts: () => set({ toasts: [] }),
+}));