tim.stollberg/mandant-crm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
mandant-crm/frontend/CLAUDE.md
Tim Stollberg e5e0be57da feat(frontend): scaffold Nuxt 3 CSR SPA with full auth + client/history UI 
- Nuxt 3 CSR (ssr:false), @nuxtjs/tailwindcss, dev proxy to backend
- useAuth composable: CSRF cookie, XSRF token, login/logout/fetchUser
- auth middleware: redirects to /login if no session
- Login page, client list with search + create modal
- Client detail with editable name, dynamic notes (JSON), history feed
- History form with type select, inline edit/delete per entry
- Print layout at /clients/:id/print (calls window.print on mount)
- TypeScript interfaces: User, Client, HistoryEntry, PaginatedResponse
- German UI labels throughout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-23 17:33:39 +07:00

1.2 KiB
Raw Blame History

Frontend — Nuxt 3 CSR

Structure

  • pages/ — file-based routing (CSR only, all behind auth middleware)
  • composables/useAuth.ts — login/logout/user state (singleton via useState)
  • composables/useClient.ts — CRUD + list
  • composables/useHistory.ts — history entry CRUD per client
  • components/client/ — ClientCard, ClientFields
  • components/history/ — HistoryEntry, HistoryForm
  • middleware/auth.ts — redirects to /login if no session
  • types/index.ts — shared TypeScript interfaces

Auth flow

  1. GET /sanctum/csrf-cookie sets XSRF-TOKEN cookie
  2. POST /api/login with credentials — Laravel sets session cookie
  3. All subsequent requests: include both cookies via credentials: 'include'
  4. XSRF-TOKEN decoded and sent as X-XSRF-TOKEN header on mutating requests

API calls

Always use the useApiFetch composable pattern:

const data = await $fetch('/api/clients', { credentials: 'include' })

Tailwind

Desktop-first, no mobile breakpoints in MVP. Dense, data-focused UI — think DATEV/Outlook aesthetics.

Commands

npm run dev    # dev server on :3000
npm run build  # production build
npm run typecheck