68 lines
3.1 KiB
Markdown
68 lines
3.1 KiB
Markdown
# 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/`.
|