admin/40227-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
40227-vm/frontend/docs/personality-integration.md
Dmitri d4a5378adf Refactor: migrate frontend to Vite/React, add product backend modules 
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>
2026-06-09 15:18:23 +02:00

3.7 KiB
Raw Blame History

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.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.