# Classroom Support Integration

## Purpose

`ClassroomSupport` renders editable classroom strategy content from the backend content catalog. The frontend owns only UI state, filtering rules, style tokens, and presentation.

Runtime strategy records, images, descriptions, and implementation tips belong to the backend seed payload and can be managed through content catalog APIs.

## Frontend Layers

View:

- `frontend/src/components/frameworks/ClassroomSupport.tsx`
- `frontend/src/components/classroom-support/ClassroomSupportView.tsx`
- `frontend/src/components/classroom-support/ClassroomSupportHeader.tsx`
- `frontend/src/components/classroom-support/ClassroomSupportTryToday.tsx`
- `frontend/src/components/classroom-support/ClassroomSupportFilters.tsx`
- `frontend/src/components/classroom-support/ClassroomStrategyGrid.tsx`
- `frontend/src/components/classroom-support/ClassroomStrategyCard.tsx`
- `frontend/src/components/classroom-support/ClassroomStrategyDetailModal.tsx`

Business logic:

- `frontend/src/business/classroom-support/hooks.ts`
- `frontend/src/business/classroom-support/selectors.ts`
- `frontend/src/business/classroom-support/types.ts`

Shared contracts and UI config:

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

## Backend Contract

The page reads:

- `GET /api/content-catalog/read/classroom-strategies`

The content payload is seeded in:

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

Each strategy payload supports:

- `id`
- `title`
- `description`
- `category`
- `ageGroup`
- `zone`
- `image`
- `implementationTip`

## Behavior

- `useClassroomSupportPage` loads strategies through the shared content catalog hook.
- The app-shell scope selector exposes this module at organization, school, campus, and class effective tiers when the user has `READ_CLASSROOM`. Organization-level users can maintain classroom strategy content for descendant schools and campuses through the same backend-owned content catalog.
- Favorite strategy IDs load and persist through `GET/POST/DELETE /api/user_progress` with `progress_type = classroom_strategy_favorite`. Favorite controls are enabled only when the user is viewing their own scope; parent users drilled into a child tenant do not load or write child-scope favorites.
- Selectors handle search, category, age, zone, favorites-only filtering, and the daily strategy selection.
- View components receive a prepared page model and do not call API/data access modules.
- Loading, empty, and error states are explicit through `StatePanel`.
- The detail modal displays `implementationTip` only when the backend payload provides it.

## Data Ownership Rules

- Do not add classroom strategy records to frontend constants.
- Do not add frontend fallback strategy payloads.
- Keep frontend constants limited to filter options, style classes, query-independent timing values, and UI labels.
- Test-only fixtures may live in selector tests or `frontend/src/test-seeds/`.