Skip to main content

Punch Management UI

Summary​

Employees capture punch-in/out and view today, week, and recent punch/Attendance history.

Audience​

  • Employees, managers, administrators, developers, QA engineers, and support engineers as applicable

Purpose​

Employees capture punch-in/out and view today, week, and recent punch/Attendance history.

Attendance punch navigation entry.

Intended Users​

Source-defined navigation audiences and API authorization determine access; see Navigation and access.

Preconditions​

Authenticated tenant user with punch feature; employee identity must resolve.

Main Components​

Punch hero, in/out buttons, last-punch strip, weekly board, summary and manual form.

Columns or Fields​

Punch type is selected by action; current date/time and Web mode are supplied; manual form exposes status/hours.

Filters​

Week navigation; no arbitrary punch-history search.

Actions​

Punch in, punch out, manual save, bulk date submission, and reopen request.

Validation​

Punch-in/out buttons are disabled based on existing today punches and date eligibility; form schema validates exposed inputs.

Loading State​

Query loading state.

Empty State​

No-punch text is shown for last punch/history gaps.

Success State​

Success toast and cached workspace invalidation.

Error State​

API-derived toast and inline error.

Access Behavior​

Protected route checks punch capability; backend self scope remains authoritative.

API Dependencies​

Today/weekly punch, Attendance save, bulk punch, holiday, weekly-off and reopen APIs.

Weekly-off punches are allowed by backend; duplicate/missing-punch correction UI is not dedicated.

Screenshot Placeholder​

Capture later from a safe non-production environment using synthetic data. Remove identifiers and personal details before publication.

Source References​

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

See Also​

Keywords​

  • Attendance UI
  • React
  • User workflow

Revision Information​

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