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)
This commit is contained in:
leocrm-bot
2026-06-29 07:55:47 +02:00
parent f8193a6ab5
commit 22976abe92
66 changed files with 8598 additions and 0 deletions
+51
View File
@@ -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: [] }),
}));