T09: KI-Copilot API + Hybrid Workflow Engine + LLM client + event-triggered workflows

- KI-Copilot: NL query → proposed actions, execute with RBAC, history, audit logging - LLM client: mock mode (no API key) + OpenAI-compatible mode (AI_MODEL/AI_API_KEY) - Action mapper: NL intent → API calls (create/update/delete/search company/contact) - Workflow engine: step types (action/approval/notification/condition), JSONB steps - Workflow lifecycle: pending → in_progress → completed/rejected/cancelled - Event-triggered workflows: event bus → auto-start instances - Code-engine workflows: onboarding on user.created event - Approval timeout: auto-reject after configured hours - 5 new tenant-scoped tables with RLS: ai_conversations, ai_messages, workflows, workflow_instances, workflow_step_history - Migration 0004: all tables + RLS policies + tenant_id + indexes - 238 tests pass (30 AC + 105 coverage + 103 existing), 84.12% T09 module coverage - MissingGreenlet fix: safe accessor helpers for async ORM attribute access
2026-06-29 02:44:13 +02:00
parent 7a5a48fb4c
commit 14bd4e33fb
31 changed files with 5884 additions and 3 deletions
@@ -0,0 +1,133 @@
+# 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