# Director Dashboard Frontend Integration ## Purpose Director dashboard follows the frontend three-layer architecture and aggregates backend-backed FRAME, quiz completion, daily zone check-ins, staff attendance, and policy acknowledgment data. ```text View -> Business Logic -> API/Data Access -> Backend ``` ## Files View layer: - `frontend/src/components/frameworks/DirectorDashboard.tsx` - `frontend/src/components/director-dashboard/` Business logic layer: - `frontend/src/business/director-dashboard/hooks.ts` - `frontend/src/business/director-dashboard/selectors.ts` - `frontend/src/business/director-dashboard/types.ts` API/data access layer: - `frontend/src/shared/api/frame.ts` - `frontend/src/shared/api/safetyQuizResults.ts` - `frontend/src/shared/api/personality.ts` - `frontend/src/shared/api/zoneCheckins.ts` - `frontend/src/shared/api/staffAttendance.ts` - `frontend/src/shared/api/policyAcknowledgments.ts` Constants: - `frontend/src/shared/constants/directorDashboard.ts` ## Behavior - The framework component calls `useDirectorDashboardPage` and renders `DirectorDashboardView`. - FRAME entries load through `useFrameEntries`. - QBS safety quiz completion loads through `useSafetyQuizResults`. - Emotional Intelligence and Personality Type completion loads through `usePersonalityCompletion`. - Daily Zone Check-In completion loads through `useZoneCheckInCompletion`. - Staff attendance records and summary load through staff attendance business hooks. - Policy acknowledgment report loads through `usePolicyAcknowledgmentReport`. - Overview metrics, risk areas, unified quiz result rows, and FRAME previews are derived in business selectors. - Document acknowledgment tracking opens in a modal from the Acknowledgments overview card or the acknowledgment risk card. It renders current-version Safety Protocol and Handbook & Policies documents grouped by category. Collapsed rows show title, version, and acknowledged/total staff counts for the leader's scope; expanded rows list staff who have not acknowledged that version. - The dashboard quiz results table combines Behavior Management, EI Self-Assessment, Personality Type Quiz, and Daily Zone Check-In rows. EI self-assessment rows reflect the current Sunday-start week; personality type rows reflect each user's latest saved type; zone check-in rows reflect today's backend-computed date for each staff member. - Risk areas include high/medium/low QBS safety quiz completion, low-risk EI self-assessment pending counts, low-risk Personality Type pending counts, medium-risk non-green Daily Zone Check-In counts, missing current-version document acknowledgments, and attendance risk. - View components use shared `Button`, `Table`, `StatePanel`, and `ModuleHeader` primitives. - Loading, empty, and error states are explicit. ## Remaining Related Work Time range tabs currently control UI state only. Add backend-supported date filtering before wiring these tabs to query filters.