# T07a — Frontend Core SPA — Shell, Auth, Routing, i18n, UI Library, Accessibility

## Project Root
/a0/usr/workdir/dev-projects/leocrm

## Frontend Directory
/a0/usr/workdir/dev-projects/leocrm/frontend/

## Tech Stack (CONFIRMED from architecture.md)
- React 18 + Vite + TypeScript
- React Router v6
- TanStack Query (React Query v5) for server state
- Zustand for client state
- react-i18next for i18n (de/en)
- React Hook Form + Zod for forms
- Tailwind CSS with design tokens from prototype
- Vitest for testing

## Backend API (already running, T01-T03 complete)
- Base URL: http://localhost:8000
- Auth: session cookie (leocrm_session), SameSite=strict
- CORS: http://localhost:5173 (Vite dev) allowed
- Endpoints available: /api/v1/auth/login, /api/v1/auth/logout, /api/v1/auth/me, /api/v1/auth/password-reset/request, /api/v1/auth/password-reset/confirm, /api/v1/users, /api/v1/companies, /api/v1/contacts, /api/v1/notifications, /api/v1/plugins, /health

## Requirements (23)
F-AUTH-01, F-AUTH-02, F-AUTH-03, F-AUTH-05, F-AUTH-07, F-CORE-06, F-CORE-07, F-CORE-08, F-CORE-09, F-CORE-13, F-A11Y-01, F-A11Y-02, F-A11Y-03, F-INT-01, F-NAV-01, F-UI-01 through F-UI-06, F-UI-08, F-TEST-01

## Acceptance Criteria (27)
1. Login page renders with email+password form
2. Login with valid credentials → redirect to Dashboard
3. Login with invalid credentials → error toast shown
4. Password reset request page renders and submits
5. Password reset confirm page renders with token validation
6. App shell renders with sidebar (plugin menu), topbar (tenant switcher, search, notifications, user menu), content area
7. Router navigates between routes without page reload (SPA)
8. Protected routes redirect to /login when not authenticated
9. Tenant switcher shows current tenant and allows switching
10. API client sends session cookie automatically via axios interceptor
11. API client handles 401 → redirect to login
12. API client handles 422 → display validation errors
13. i18n: German locale loads by default
14. i18n: English locale switchable via settings
15. UI Library: Button renders with variants (primary, secondary, danger, ghost)
16. UI Library: Input renders with label, error, helper text
17. UI Library: Modal opens/closes with backdrop click and ESC
18. UI Library: Toast notifications appear and auto-dismiss
19. UI Library: Table renders with sortable headers
20. UI Library: Card, Badge, Avatar, Pagination, EmptyState, Skeleton, ConfirmDialog render correctly
21. Accessibility: All interactive elements have ARIA labels
22. Accessibility: Keyboard navigation works (Tab, Enter, Escape, Arrow keys)
23. Accessibility: 44px minimum touch targets on mobile
24. Accessibility: prefers-reduced-motion respected
25. Vite dev server starts without errors
26. Production build (npm run build) succeeds with 0 errors
27. TypeScript: tsc --noEmit passes with 0 errors

## Files to Create
- frontend/package.json (React 18, Vite, TanStack Query, Zustand, react-i18next, React Hook Form, Zod, Tailwind CSS, Vitest, axios)
- frontend/vite.config.ts
- frontend/tsconfig.json, tsconfig.node.json
- frontend/tailwind.config.js, postcss.config.js
- frontend/index.html
- frontend/src/main.tsx — React entry point with providers
- frontend/src/App.tsx — Router + providers setup
- frontend/src/api/client.ts — axios instance with interceptors (cookie, 401, 422)
- frontend/src/api/hooks.ts — TanStack Query hooks for auth, users, companies, contacts, notifications
- frontend/src/store/authStore.ts — Zustand auth store
- frontend/src/store/uiStore.ts — Zustand UI store (theme, sidebar, locale)
- frontend/src/i18n/index.ts — react-i18next setup
- frontend/src/i18n/locales/de.json, en.json
- frontend/src/components/ui/Button.tsx
- frontend/src/components/ui/Input.tsx
- frontend/src/components/ui/Select.tsx
- frontend/src/components/ui/Modal.tsx
- frontend/src/components/ui/Toast.tsx (ToastContainer + useToast)
- frontend/src/components/ui/Table.tsx
- frontend/src/components/ui/Card.tsx
- frontend/src/components/ui/Badge.tsx
- frontend/src/components/ui/Avatar.tsx
- frontend/src/components/ui/Pagination.tsx
- frontend/src/components/ui/EmptyState.tsx
- frontend/src/components/ui/Skeleton.tsx
- frontend/src/components/ui/ConfirmDialog.tsx
- frontend/src/components/layout/AppShell.tsx — Sidebar + TopBar + ContentArea
- frontend/src/components/layout/Sidebar.tsx — Plugin menu, navigation
- frontend/src/components/layout/TopBar.tsx — Tenant switcher, search, notifications, user menu
- frontend/src/pages/Login.tsx
- frontend/src/pages/PasswordResetRequest.tsx
- frontend/src/pages/PasswordResetConfirm.tsx
- frontend/src/pages/Dashboard.tsx (placeholder)
- frontend/src/pages/Settings.tsx (locale switch, theme)
- frontend/src/routes/index.tsx — Route definitions with guards
- frontend/src/routes/ProtectedRoute.tsx — Auth guard
- frontend/src/hooks/useAuth.ts
- frontend/src/hooks/useTenant.ts
- frontend/src/index.css — Tailwind directives + design tokens
- frontend/src/__tests__/shell/ (AppShell, Router, Sidebar, TopBar tests)
- frontend/src/__tests__/auth/ (Login, PasswordReset tests)
- frontend/src/__tests__/ui/ (Button, Input, Modal, Toast, Table, etc. tests)
- frontend/vitest.config.ts (or merge into vite.config.ts)
- frontend/src/test/setup.ts — Vitest setup (jsdom, i18n, mocks)

## Design Tokens (from prototype)
- Reference: https://webspace.media-on.de/leocrm-prototype-x7k2p9/
- Primary color, secondary, accent, danger, warning, success
- Spacing scale, border radius, shadows
- Typography: font families, sizes, weights
- Define as CSS custom properties in index.css + Tailwind config

## Critical Rules
- Use TypeScript strict mode
- All components must have ARIA labels for interactive elements
- 44px minimum touch targets on mobile (Tailwind min-h-[44px] min-w-[44px])
- prefers-reduced-motion: use Tailwind motion-safe/motion-reduce variants
- Session cookie: axios with withCredentials: true
- 401 handler: redirect to /login, clear auth store
- 422 handler: extract validation errors, display in form
- i18n: German default, English switchable
- No Lorem Ipsum — use real German/English content
- Test with Vitest + jsdom + @testing-library/react
- Coverage target: 80%

## Test Commands
cd /a0/usr/workdir/dev-projects/leocrm/frontend && npx vitest run src/__tests__/ --reporter=verbose
cd /a0/usr/workdir/dev-projects/leocrm/frontend && npm run build
cd /a0/usr/workdir/dev-projects/leocrm/frontend && npx tsc --noEmit

## Deliverables
1. Complete frontend/ directory with all files listed above
2. All 27 ACs covered by tests
3. npm run build succeeds with 0 errors
4. tsc --noEmit passes with 0 errors
5. Report: test results, AC coverage, files, bugs