slp-modular-cms/aidlc-docs/features/master-cms-module/construction/plans/frontend-cms-page-functional-design-plan.md

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