# Staff Attendance Frontend Integration

## Purpose

Staff attendance snapshot and director dashboard staff counts follow the frontend three-layer architecture.

```text
View -> Business Logic -> API/Data Access -> Backend
```

## Files

View layer:

- `frontend/src/components/staff-attendance/AttendanceModule.tsx`
- `frontend/src/components/frameworks/MoreModules.tsx` as a module export hub
- `frontend/src/components/frameworks/DirectorDashboard.tsx`
- `frontend/src/components/director-dashboard/DirectorOverviewCards.tsx`
- `frontend/src/components/director-dashboard/DirectorRiskList.tsx`

Business logic layer:

- `frontend/src/business/staff-attendance/hooks.ts`
- `frontend/src/business/staff-attendance/mappers.ts`
- `frontend/src/business/staff-attendance/selectors.ts`
- `frontend/src/business/staff-attendance/types.ts`
- `frontend/src/business/director-dashboard/hooks.ts`
- `frontend/src/business/director-dashboard/selectors.ts`

API/data access layer:

- `frontend/src/shared/api/staffAttendance.ts`
- `frontend/src/shared/types/staffAttendance.ts`
- `frontend/src/shared/constants/staffAttendance.ts`

## Behavior

- Staff attendance records load from `GET /api/staff_attendance/records`.
- Staff attendance summary loads from `GET /api/staff_attendance/summary`.
- Regular staff receive their own records from the backend.
- Director dashboard receives scoped report records and active staff count from the backend.
- Attendance UI uses shared table and status panel primitives while keeping data loading in the business layer.
- Director dashboard derives attendance metrics and absence risk rows in business selectors.

## Remaining Related Work

Add staff attendance import/write UI only after the external attendance source contract is defined.