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>
67 lines
3.7 KiB
Markdown
67 lines
3.7 KiB
Markdown
# Personality Frontend Integration
|
|
|
|
## Purpose
|
|
|
|
EI/personality result loading, saving, and aggregate distribution follow the frontend three-layer architecture.
|
|
|
|
```text
|
|
View -> Business Logic -> API/Data Access -> Backend
|
|
```
|
|
|
|
## Files
|
|
|
|
View layer:
|
|
|
|
- `frontend/src/components/frameworks/EmotionalIntelligence.tsx`
|
|
- `frontend/src/components/emotional-intelligence/AssessmentTab.tsx`
|
|
- `frontend/src/components/emotional-intelligence/EmotionalIntelligenceHeader.tsx`
|
|
- `frontend/src/components/emotional-intelligence/EmotionalIntelligenceTabs.tsx`
|
|
- `frontend/src/components/emotional-intelligence/PersonalityDistributionPanel.tsx`
|
|
- `frontend/src/components/emotional-intelligence/PersonalityQuizTab.tsx`
|
|
- `frontend/src/components/emotional-intelligence/SavedPersonalityBanner.tsx`
|
|
- `frontend/src/components/emotional-intelligence/WeeklyFocusBanner.tsx`
|
|
- `frontend/src/components/emotional-intelligence/groupStyles.ts`
|
|
- `frontend/src/components/emotional-intelligence/types.ts`
|
|
- `frontend/src/components/frameworks/PersonalityQuiz.tsx`
|
|
- `frontend/src/components/personality-quiz/`
|
|
- `frontend/src/components/frameworks/PersonalityDirectory.tsx`
|
|
- `frontend/src/components/personality-directory/`
|
|
|
|
Business logic layer:
|
|
|
|
- `frontend/src/business/personality/queryHooks.ts`
|
|
- `frontend/src/business/personality/directoryHooks.ts`
|
|
- `frontend/src/business/personality/emotionalIntelligenceHooks.ts`
|
|
- `frontend/src/business/personality/quizWorkflowHooks.ts`
|
|
- `frontend/src/business/personality/mappers.ts`
|
|
- `frontend/src/business/personality/selectors.ts`
|
|
- `frontend/src/business/personality/types.ts`
|
|
- `frontend/src/shared/constants/emotionalIntelligence.ts`
|
|
- `frontend/src/shared/types/emotionalIntelligence.ts`
|
|
|
|
API/data access layer:
|
|
|
|
- `frontend/src/shared/api/personality.ts`
|
|
- `frontend/src/shared/types/personality.ts`
|
|
|
|
## Behavior
|
|
|
|
- The current user's saved personality result loads from `GET /api/personality_quiz_results/me`.
|
|
- Quiz completion saves through `PUT /api/personality_quiz_results/me`.
|
|
- Director and superintendent aggregate distribution loads from `GET /api/personality_quiz_results/distribution`.
|
|
- Backend errors are surfaced as UI error states instead of being swallowed.
|
|
- `EmotionalIntelligence.tsx` is a thin composition wrapper.
|
|
- `PersonalityQuiz.tsx` is a thin composition wrapper.
|
|
- `PersonalityDirectory.tsx` is a thin composition wrapper.
|
|
- EI self-assessment state, score calculation, level selection, personality distribution grouping, and personality save coordination live in `frontend/src/business/personality/`.
|
|
- Personality quiz flow state, saved-result hydration, result tab state, progress calculation, relationship tips, workplace language strengths, and result formatting live in `frontend/src/business/personality/`.
|
|
- Personality directory search, group filtering, expanded type state, and active detail section state live in `frontend/src/business/personality/`.
|
|
- Personality business hooks are split by workflow: backend query/mutation hooks, directory workflow, EI page workflow, and quiz workflow. Imports use the workflow-specific files directly; there is no legacy re-export surface.
|
|
- EI questions, topics, growth tips, MBTI dimensions, and workplace tips live in shared constants.
|
|
- Personality type directory records load from the backend content catalog.
|
|
- The frontend does not write personality type to staff profile records.
|
|
|
|
## Verification
|
|
|
|
Focused personality selector tests cover distribution totals/grouping, EI level thresholds, saved-date formatting, quiz progress, dimension progress, type breakdowns, relationship tips, communication strengths, communication growth guidance, and personality directory filtering. These tests also guard the S/J and S/P grouping behavior.
|