# Policies Integration ## Purpose The handbook and policies workflow reads and mutates policy documents through the backend `documents` API. ## Frontend Structure - Framework wrapper: `frontend/src/components/frameworks/HandbookPolicy.tsx` - Focused view components: `frontend/src/components/policies/` - Business hooks: `frontend/src/business/policies/hooks.ts` - Business page workflow hook: `frontend/src/business/policies/pageHooks.ts` - Business mappers: `frontend/src/business/policies/mappers.ts` - Business selectors: `frontend/src/business/policies/selectors.ts` - API layer: `frontend/src/shared/api/documents.ts` - DTO types: `frontend/src/shared/types/documents.ts` - Policy types/constants: `frontend/src/shared/types/policies.ts`, `frontend/src/shared/constants/policies.ts` ## Backend Contract The slice uses the existing backend route: - `GET /api/documents?category=policy` - `POST /api/documents` - `PUT /api/documents/:id` - `DELETE /api/documents/:id` Policy records are represented as `documents` rows: - `category`: fixed to `policy` - `entity_type`: fixed to `organization` - `entity_reference`: policy category displayed in the handbook - `name`: policy title - `notes`: policy content - `uploaded_at`: recorded mutation timestamp ## Behavior - `HandbookPolicy` is a thin wrapper that calls `usePoliciesPage` and renders `PoliciesView`. - Policy UI is split into focused components for the hero, create form, filters, status panels, list, cards, and empty state. - Policy forms and filters use shared UI primitives: `Button`, `Input`, `Textarea`, `NativeSelect`, and `StatePanel`. - Policy list/create/update/delete flows use React Query hooks and backend error states. - Director and superintendent roles can manage policies in the frontend. - Acknowledgement state remains session-local because the backend does not yet expose a policy acknowledgement contract. ## Verification - `npm run build` passes. - `npm run lint` passes for the current frontend baseline. - `npm run typecheck` passes. - `npm run test` passes.