Client: Frontend API mocking / contract sandbox

[FadyGergesRezk]

Set up MSW (Mock Service Worker) so every feature page can be developed and tested in isolation against a local contract-accurate mock, without requiring a running backend.

Priority: P1

Tasks

• Install msw as a dev dependency; run msw init public/ to generate the service worker
• Add src/mocks/ directory with:
  • handlers/members.ts — request handlers for GET /members, POST /members, GET /members/{member_id}, PATCH /members/{member_id}, DELETE /members/{member_id}
  • handlers/events.ts — handlers for GET /events, POST /events, GET /events/{event_id}, PATCH /events/{event_id}, DELETE /events/{event_id}
  • handlers/payments.ts — handlers for GET /finance/balances, GET /finance/balances/{member_id}, GET /finance/transactions, POST /finance/transactions, GET /finance/transactions/{transaction_id}, PATCH /finance/transactions/{transaction_id}, DELETE /finance/transactions/{transaction_id}
  • handlers/organization.ts — handlers for sports and teams CRUD endpoints
  • handlers/feedback.ts — handlers for GET /feedback, POST /feedback, GET /feedback/{feedback_id}, PATCH /feedback/{feedback_id}, DELETE /feedback/{feedback_id}
  • handlers/letters.ts — handlers for POST /letters/mail and POST /letters/pdf
  • handlers/helper.ts — handler for GET /helper/report/{member_id}
  • handlers/index.ts — re-exports all handlers as a flat array
  • browser.ts — sets up the browser MSW worker (setupWorker(...handlers))
  • server.ts — sets up the Node MSW server for Vitest (setupServer(...handlers))
• Start the MSW browser worker in src/main.tsx when import.meta.env.DEV is true and VITE_MOCK_API=true; start it after Keycloak init() resolves so the mock does not interfere with the Keycloak flow
• Configure Vitest (vitest.setup.ts) to call server.listen() before all tests and server.close() after
• Add VITE_MOCK_API=true to .env.development.local.example with a comment explaining its purpose
• Mock data must match the TypeScript types in src/api.ts — no any casts in handler files

Acceptance criteria

• pnpm dev with VITE_MOCK_API=true renders data in every feature page without a running backend
• Vitest tests that import feature API hooks receive MSW-intercepted responses without additional setup per test
• Adding a new handler file and importing it in handlers/index.ts is sufficient to activate a new mock
• Mock data matches the TypeScript types in src/api.ts