# Zones Of Regulation Integration

## Purpose

`ZonesOfRegulation` renders backend-owned regulation zone content through the three-layer frontend architecture.

```text
View -> Business Logic -> API/Data Access -> Backend
```

Runtime zone records, behaviors, strategies, matching signs, safety connections, and quick de-escalation flow content belong to backend content catalog payloads. The frontend owns only UI state, tab config, style-token mappings, and presentation.

## Frontend Layers

View:

- `frontend/src/components/frameworks/ZonesOfRegulation.tsx`
- `frontend/src/components/zones-of-regulation/ZonesOfRegulationView.tsx`
- `frontend/src/components/zones-of-regulation/ZonesHeader.tsx`
- `frontend/src/components/zones-of-regulation/ZonesTabs.tsx`
- `frontend/src/components/zones-of-regulation/ZonesOverviewGrid.tsx`
- `frontend/src/components/zones-of-regulation/ZoneOverviewCard.tsx`
- `frontend/src/components/zones-of-regulation/ZoneDetailPanel.tsx`
- `frontend/src/components/zones-of-regulation/ZoneDetailListPanel.tsx`
- `frontend/src/components/zones-of-regulation/ZoneSignsPanel.tsx`
- `frontend/src/components/zones-of-regulation/ZoneSafetyConnectionPanel.tsx`
- `frontend/src/components/zones-of-regulation/ZonesQuickFlow.tsx`

Business logic:

- `frontend/src/business/zones/hooks.ts`
- `frontend/src/business/zones/selectors.ts`
- `frontend/src/business/zones/types.ts`

Shared contracts and UI config:

- `frontend/src/shared/types/app.ts`
- `frontend/src/shared/constants/zonesOfRegulation.ts`
- `frontend/src/shared/constants/contentCatalog.ts`

## Backend Contracts

The page reads:

- `GET /api/public/content-catalog/regulation-zones`
- `GET /api/public/content-catalog/zones-of-regulation-page-content`

Content payloads are seeded in:

- `backend/src/db/seeders/content-catalog-data/content-catalog-seed-payloads.js`

## Behavior

- `useZonesOfRegulationPage` loads zone records and page-level content.
- Selectors handle expanded-zone toggling, selected-zone lookup, safety connection lookup, and active-tab wording.
- View components receive a prepared page model and do not call API/data access modules.
- Loading and error states are explicit through `StatePanel`.
- The module preserves the current behavior: selecting a zone expands details; zone check-in persistence remains owned by the dashboard check-in flow until a dedicated UX task adds it here.

## Data Ownership Rules

- Do not add zone records, QBS safety connection copy, or de-escalation flow content to frontend constants.
- Do not add frontend fallback zone payloads.
- Keep frontend constants limited to tab labels, default UI state, gradients, and ring classes.
- Test-only fixtures may live in selector tests or `frontend/src/test-seeds/`.