Attendance UI

Summary

The React/Vite client provides an administrator weekly Attendance board, employee punch workspace, employee self-service view, Shift and policy settings, weekly-off settings, and an Attendance report.

Audience

Employees, managers, HR/Attendance administrators, Payroll administrators, developers, QA, and support

Overview

UI scope and entry points

Confirmed protected routes include the Attendance workspace, punch workspace, Shift/Policy settings, weekly-off settings, and Attendance report. Employee-only users are switched to the self-service Attendance component on the shared Attendance route. Navigation visibility and protected-route checks use tenant session context, module features, and source-defined permission/role hints.

The UI calls gateway-facing Attendance, employee, Leave, holiday, weekly-off, session, and report APIs. Gateway ownership remains Transitional between monolith compatibility and extracted-service routing.

Known gaps

No employee Shift-assignment UI, device/biometric import screen, dedicated missing-punch correction screen, or dedicated Attendance accessibility test suite was found. Screenshots must be captured later from a safe non-production environment with synthetic data and redacted browser chrome.

Documentation map

Source References

UI/salary-ui/apps/client-hrms-portal/src/App.tsx
UI/salary-ui/apps/client-hrms-portal/src/pages/AttendanceStatus.tsx
UI/salary-ui/apps/client-hrms-portal/src/pages/hr/PayrollFeaturePages.tsx
UI/salary-ui/apps/client-hrms-portal/src/ess/EssPages.tsx

Keywords

Attendance UI
React
User workflow

Revision Information

Status: Draft
Last reviewed: 2026-07-15
Review cycle: Quarterly

Summary​

Audience​

Overview​

UI scope and entry points​

Known gaps​

Documentation map​

Source References​

Related Articles​

See Also​

Keywords​

Revision Information​