# Unit of Work Dependencies — CMS Frontend

## Dependency Matrix

| Unit | Depends On | Blocks |
|------|-----------|--------|
| **Unit 0** — Backend Prerequisites | (none — standalone .NET change) | Unit 1 (CORS must work before frontend can call API) |
| **Unit 1** — Project Scaffold | Unit 0 | Units 2, 3, 4, 5, 6 |
| **Unit 2** — Auth Pages | Unit 1 (ApiClient, AuthContext) | Units 3, 4, 5, 6 (auth layer required) |
| **Unit 3** — Layout & Navigation | Unit 2 (ProtectedRoute, RoleGuard) | Units 4, 5, 6 (authenticated shell) |
| **Unit 4** — Dashboard | Unit 3 (AppLayout) | Unit 5, 6 (patterns established) |
| **Unit 5** — User Management | Unit 3 (RoleGuard), Unit 4 (patterns) | Unit 6 |
| **Unit 6** — Remaining Pages & Docs | Unit 3 (AppLayout, RoleGuard) | (none — final unit) |

## Dependency Diagram

```mermaid
graph TD
    U0["Unit 0\nBackend Prerequisites"]
    U1["Unit 1\nProject Scaffold"]
    U2["Unit 2\nAuth Pages"]
    U3["Unit 3\nLayout & Navigation"]
    U4["Unit 4\nDashboard"]
    U5["Unit 5\nUser Management"]
    U6["Unit 6\nRemaining Pages"]

    U0 -->|"CORS + cookie\nenabled"| U1
    U1 -->|"ApiClient\nAuthContext"| U2
    U2 -->|"ProtectedRoute\nRoleGuard\nInitGuard"| U3
    U3 -->|"AppLayout\nSidebar"| U4
    U3 -->|"AppLayout\nRoleGuard"| U5
    U3 -->|"AppLayout\nRoleGuard"| U6
    U4 -->|"patterns\nestablished"| U5

    style U0 fill:#4CAF50,stroke:#2E7D32,color:#fff
    style U1 fill:#FFC107,stroke:#F57F17,color:#000
    style U2 fill:#FF5722,stroke:#BF360C,color:#fff
    style U3 fill:#9C27B0,stroke:#4A148C,color:#fff
    style U4 fill:#2196F3,stroke:#0D47A1,color:#fff
    style U5 fill:#009688,stroke:#004D40,color:#fff
    style U6 fill:#607D8B,stroke:#263238,color:#fff
```

## Shared Components Across Units

| Component | Created In | Used By |
|-----------|-----------|---------|
| `ApiClient` | Unit 1 | Units 2, 4, 5, 6 |
| `AuthContext` / `useAuth` | Unit 1 | Units 2, 3, 4, 5, 6 |
| `types.ts` (TS interfaces) | Unit 1 | All units |
| `ProtectedRoute` | Unit 2 | Units 3, 4, 5, 6 (via layout route) |
| `RoleGuard` | Unit 2 | Units 3, 5, 6 |
| `InitGuard` | Unit 2 | All authenticated routes (via `__root.tsx`) |
| `AppLayout` | Unit 3 | Units 4, 5, 6 |
| `Sidebar` | Unit 3 | Units 4, 5, 6 |
| `useAvailabilityStatus` | Unit 4 | Unit 6 (`SettingsPage`) |
| `AvailabilityStatusBadge` | Unit 4 | Unit 6 (`SettingsPage`) |
| `useValidateInvitation` | Unit 5 | Unit 2 (`InviteCompletePage`) — note: hook defined in Unit 5, used in Unit 2 route |

> **Note on cross-unit hook usage**: `useValidateInvitation` and `useCompleteSetup` are logically invitation hooks (Unit 5) but are used in `InviteCompletePage` (Unit 2). In practice, these hooks can be created in Unit 2 and moved/refactored in Unit 5, or created directly in Unit 5 and `InviteCompletePage` completed then. Implementation order to follow: create stubs in Unit 2, full implementation in Unit 5.