d4a5378adf
Frontend: - Replace Next.js with Vite + React + TypeScript - Add new component architecture (app-shell, sidebar, dashboard modules) - Implement product modules: FRAME, safety protocols, walkthrough checkin, campus/staff attendance, personality quiz, sign language, classroom timer - Add shadcn/ui component library with Tailwind CSS - Remove legacy generated components, stores, and pages Backend: - Add product migrations: frame_entries, user_progress, safety_quiz_results, walkthrough_checkins, communication_events, personality_quiz_results, campus_attendance_config/summaries, staff_attendance_records, content_catalog - Add corresponding models, services, and routes - Implement cookie-based auth with refresh token rotation - Add content catalog seeder with product content - Migrate to ESLint flat config - Switch from yarn to npm Infrastructure: - Update .gitignore for new tooling - Add project documentation (CLAUDE.md, docs/) - Remove deprecated config files and yarn.lock Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
69 lines
2.4 KiB
Markdown
69 lines
2.4 KiB
Markdown
# 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/public/content-catalog/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.
|
|
- Selectors handle search, category, age, zone, favorites-only filtering, favorite toggling, 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/`.
|