40227-vm/frontend/docs/director-dashboard-integration.md

Director Dashboard Frontend Integration

Purpose

Director dashboard follows the frontend three-layer architecture and aggregates backend-backed FRAME, QBS safety quiz, 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/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.
• Safety quiz results load through useSafetyQuizResults.
• Staff attendance records and summary load through staff attendance business hooks.
• Policy acknowledgment summary loads through usePolicyAcknowledgmentReport.
• Overview metrics, risk areas, and FRAME previews are derived in business selectors.
• 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.