# Functional Design Plan — Unit 3: frontend-cms-page

## Scope

**Modify**: `frontend/src/` (existing React SPA, extended)  
**Questions file**: `frontend-cms-page-fd-questions.md`

---

## Steps

### Part A — TypeScript Types

- [ ] **Step 1** — `src/api/types.ts` — add `CmsInstance` interface and `CmsInstanceStatus` type

### Part B — TanStack Query Hooks

- [ ] **Step 2** — `src/api/useCmsInstances.ts` — `GET /api/v1/CmsInstances`
- [ ] **Step 3** — `src/api/useAddCmsInstance.ts` — `POST /api/v1/CmsInstances`
- [ ] **Step 4** — `src/api/useUpdateCmsInstanceStatus.ts` — `PUT /api/v1/CmsInstances/{id}/status`

### Part C — Components

- [ ] **Step 5** — `src/components/cms/CmsInstanceList.tsx` — table with status badges; Inactive rows styled per Q2
- [ ] **Step 6** — `src/components/cms/AddCmsInstanceDialog.tsx` — modal form: Name, URL, ApiKey; error handling per Q4
- [ ] **Step 7** — `src/components/cms/SetStatusDialog.tsx` — status dropdown + conditional DisableMessage (mandatory when NotAvailable)

### Part D — Page

- [ ] **Step 8** — `src/pages/CmsPage.tsx` — replace placeholder; header + Add button; empty state per Q5; columns per Q1; UpdateStatusResult per Q3

### Part E — i18n

- [ ] **Step 9** — `src/i18n/locales/nl/translation.json` — add `cms.*` keys
- [ ] **Step 10** — `src/i18n/locales/en/translation.json` — add `cms.*` keys

### Part F — MSW Mocks

- [ ] **Step 11** — `src/mocks/cms/handlers.ts` — GET, POST, PUT handlers with in-memory state
- [ ] **Step 12** — `src/mocks/browser.ts` + `src/mocks/server.ts` — register cms handlers

### Part G — Tests

- [ ] **Step 13** — `src/api/useCmsInstances.test.ts` — GET hook
- [ ] **Step 14** — `src/api/useAddCmsInstance.test.ts` — POST mutation + cache invalidation
- [ ] **Step 15** — `src/api/useUpdateCmsInstanceStatus.test.ts` — PUT mutation + cache invalidation
- [ ] **Step 16** — `src/pages/CmsPage.test.tsx` — renders list, Add button, empty state, Owner-only guard

---

*Answers to design questions: see `frontend-cms-page-fd-questions.md`*  
*Artifact path*: `aidlc-docs/features/master-cms-module/construction/plans/frontend-cms-page-functional-design-plan.md`