3.7 KiB
3.7 KiB
Personality Frontend Integration
Purpose
EI/personality result loading, saving, and aggregate distribution follow the frontend three-layer architecture.
View -> Business Logic -> API/Data Access -> Backend
Files
View layer:
frontend/src/components/frameworks/EmotionalIntelligence.tsxfrontend/src/components/emotional-intelligence/AssessmentTab.tsxfrontend/src/components/emotional-intelligence/EmotionalIntelligenceHeader.tsxfrontend/src/components/emotional-intelligence/EmotionalIntelligenceTabs.tsxfrontend/src/components/emotional-intelligence/PersonalityDistributionPanel.tsxfrontend/src/components/emotional-intelligence/PersonalityQuizTab.tsxfrontend/src/components/emotional-intelligence/SavedPersonalityBanner.tsxfrontend/src/components/emotional-intelligence/WeeklyFocusBanner.tsxfrontend/src/components/emotional-intelligence/groupStyles.tsfrontend/src/components/emotional-intelligence/types.tsfrontend/src/components/frameworks/PersonalityQuiz.tsxfrontend/src/components/personality-quiz/frontend/src/components/frameworks/PersonalityDirectory.tsxfrontend/src/components/personality-directory/
Business logic layer:
frontend/src/business/personality/queryHooks.tsfrontend/src/business/personality/directoryHooks.tsfrontend/src/business/personality/emotionalIntelligenceHooks.tsfrontend/src/business/personality/quizWorkflowHooks.tsfrontend/src/business/personality/mappers.tsfrontend/src/business/personality/selectors.tsfrontend/src/business/personality/types.tsfrontend/src/shared/types/emotionalIntelligence.ts(EI content itself is backend-owned via the content catalog)
API/data access layer:
frontend/src/shared/api/personality.tsfrontend/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.tsxis a thin composition wrapper.PersonalityQuiz.tsxis a thin composition wrapper.PersonalityDirectory.tsxis 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.