# 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, and safety connections belong to backend content catalog payloads. The frontend owns UI state, tab config, style-token mappings, presentation, and the static Quick Behavior Management Flow block.

## 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/content-catalog/read/regulation-zones`
- `GET /api/content-catalog/read/zones-of-regulation-page-content`

Content payloads are seeded in:

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

## 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`.
- Selecting a zone in the main overview grid expands its details and, for eligible users in their own scope, saves the daily Zone check-in through `useTodayZoneCheckIn`. The page does not render a duplicate check-in card above the content; see [`zone-checkin-integration.md`](zone-checkin-integration.md).
- `ZonesQuickFlow` renders the static Quick Behavior Management Flow. This copy and styling are not editable content catalog data.
- New organizations receive `regulation-zones` and `zones-of-regulation-page-content` presets at organization scope. School, campus, and classroom users read the organization preset instead of separate duplicated rows.

## Data Ownership Rules

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