Leopoldadmin/leocrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
leocrm/.a0/briefings/T07a_briefing.md
T
leocrm-bot 851e7999ba 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 08:02:15 +02:00

6.6 KiB
Raw Permalink Blame History

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
Reference in New Issue View Git Blame Copy Permalink