Files

T

SluijsensandClaude Haiku 4.5 3c6a06028e 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>

2026-06-22 13:39:29 +02:00

1.8 KiB

Raw Blame History

Domain Entities — Unit 4: Dashboard

Entities

AvailabilityStatus (enumeration)

A union type representing the three possible system states returned by the API.

Value	Meaning
`Available`	System is fully operational
`Maintenance`	System is in planned maintenance mode
`Unavailable`	System is not accessible

AvailabilityResponse (API response shape)

Returned by GET /api/v1/Availability/status.

Field	Type	Description
`status`	`AvailabilityStatus`	Current system status
`checkedAt`	`string` (ISO 8601)	Timestamp when status was last evaluated
`message`	`string`	Optional human-readable reason or note (may be empty string)

Entity Relationship Diagram

classDiagram
    class AvailabilityResponse {
        +status: AvailabilityStatus
        +checkedAt: string
        +message: string
    }
    class AvailabilityStatus {
        <<enumeration>>
        Available
        Maintenance
        Unavailable
    }
    AvailabilityResponse --> AvailabilityStatus : status

    style AvailabilityResponse fill:#4CAF50,stroke:#2E7D32,color:#000
    style AvailabilityStatus fill:#2196F3,stroke:#0D47A1,color:#000

AvailabilityResponse holds a status (one of three enumeration values) plus a timestamp and message.

Type Placement

Both AvailabilityStatus and AvailabilityResponse are added to frontend/src/api/types.ts — the shared domain types file, consistent with User, AuthResponse, and SetupStatus.

TanStack Query Dependency

@tanstack/react-query is added as a new production dependency. A shared QueryClient is configured in main.tsx and provided via QueryClientProvider. This enables staleTime, background refetching, and persistent cached data across error states.

1.8 KiB Raw Blame History