40227-vm/frontend/docs/director-dashboard-integration.md
2026-06-19 16:43:41 +02:00

4.0 KiB

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.

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.
  • The Week / Month / Quarter switcher is persisted in local storage and drives period-bounded API queries for dashboard overview statistics and the F.R.A.M.E. Tracker. The selected period is translated into startDate and endDate query parameters, anchored to the current week, current month, or current quarter.
  • FRAME entries load through useFrameEntries with the selected period range.
  • 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 with the selected period range.
  • 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 renders as a collapsible section in the main dashboard flow. The Acknowledgments overview card and acknowledgment risk card scroll to that section. When expanded, it renders current-version Safety Protocol and Handbook & Policies documents grouped by category. Collapsed document rows show title, version, and acknowledged/total staff counts for the leader's scope; expanded document rows list staff who have not acknowledged that version.
  • The dashboard quiz results table groups Behavior Management, EI Self-Assessment, Personality Type Quiz, and Daily Zone Check-In by staff member in a collapsible section. When expanded, collapsed staff rows show staff name, current tenant scope, role, and completed/total quiz count; expanded staff rows list each quiz title, completion date, and result. EI self-assessment details reflect the current Sunday-start week; personality type details reflect each user's latest saved type; zone check-in details 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.
  • The Behavior Management Quiz Completion overview card and incomplete quiz risk cards do not navigate to individual quiz pages. They scroll to the top of the unified Quiz Results list so leaders can review the affected staff and expand each row in place.
  • View components use shared Table, StatePanel, and ModuleHeader primitives, plus the dashboard-local DirectorScaleButton for scale-only interactive cards and action controls.
  • Loading, empty, and error states are explicit.
  • Risk areas, unified quiz results, zone completion, and current-version acknowledgment tracking intentionally remain current-state views. They are not filtered by the time range tabs.