feat(unit-4): Dashboard — availability widget with TanStack Query

- Add @tanstack/react-query 5.101.0; wrap app with QueryClientProvider
- Add AvailabilityStatus type and AvailabilityResponse to api/types.ts
- Implement useAvailabilityStatus (staleTime 30s, stale-on-error preserved)
- Add AvailabilityStatusBadge with green/amber/red states and stale indicator
- Replace DashboardPage placeholder card with live availability widget
- Add MSW availability handler; update test/utils with QueryClientProvider
- 55/55 tests pass (FR-05)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-06-22 13:39:29 +02:00
co-authored by Claude Haiku 4.5
parent f476e06691
commit 3c6a06028e
23 changed files with 1219 additions and 22 deletions
@@ -0,0 +1,39 @@
# Code Generation Summary — Unit 4: Dashboard
**Status**: ✅ Complete
**Stories**: FR-05 (Dashboard with system availability widget)
## Files Created
| File | Purpose |
|---|---|
| `frontend/src/api/useAvailability.ts` | `useAvailabilityStatus` hook (TanStack Query, staleTime 30s) |
| `frontend/src/components/shared/AvailabilityStatusBadge.tsx` | Colored status badge with stale indicator |
| `frontend/src/mocks/availability/handlers.ts` | MSW handler for `GET /Availability/status` |
| `frontend/src/api/useAvailability.test.ts` | 4 hook tests (loading, success, error, refetch) |
| `frontend/src/components/shared/AvailabilityStatusBadge.test.tsx` | 8 badge tests (all statuses, message, stale indicator) |
| `aidlc-docs/features/cms-frontend/construction/unit-4/code/code-generation-summary.md` | This file |
## Files Modified
| File | Change |
|---|---|
| `frontend/package.json` | Added `@tanstack/react-query` 5.101.0 |
| `frontend/src/main.tsx` | Wrapped app with `QueryClientProvider` |
| `frontend/src/api/types.ts` | Added `AvailabilityStatus`, `AvailabilityResponse` |
| `frontend/src/pages/DashboardPage.tsx` | Replaced placeholder card with availability widget |
| `frontend/src/i18n/locales/en/translation.json` | Added `availability.*` keys |
| `frontend/src/i18n/locales/nl/translation.json` | Added `availability.*` keys |
| `frontend/src/mocks/index.ts` | Registered `availabilityHandlers` |
| `frontend/src/test/utils.tsx` | Added `QueryClientProvider` to `renderWithProviders` and `renderApp` |
## Test Results
- **Total tests**: 55 / 55 passed
- **Build**: ✅ clean (no TS errors)
- **Lint**: ✅ clean
## Key Decisions Made During Generation
- `test/utils.tsx` updated to include `QueryClientProvider` — required by the 3 existing integration tests that render `DashboardPage` (RouteGuard.test.tsx, LoginPage.test.tsx)
- `error` destructured field removed from `DashboardPage` (unused variable TS6133) — `isError` is sufficient