Skip to main content

Payslips and Employee Payroll UI

Summary​

This page records confirmed payslips and employee payroll ui behavior and marks incomplete boundaries explicitly.

Audience​

Payroll users, developers, QA and support engineers, architects, and implementation reviewers.

Reference Content​

This screen inventory reflects the reviewed React route and component implementation.

Purpose​

Allow authorized administrators to preview/generate employee payslips and employees to view Payroll summaries and previous payslips.

Administrative payslips use /salary/slips; employee self-service uses /payroll.

Users​

Administrative route visibility accepts Payroll.ViewSelf, salary-slips, or salary features; the page derives broader viewing from role/features. Employee navigation uses Payroll.ViewSelf or legacy salary features.

Permissions​

The role, module, and feature conditions summarized above govern UI visibility. They do not prove API or gateway authorization; those enforcement boundaries are Requires confirmation unless separately confirmed in source.

Components​

SalarySlipPage, employee/month selectors, payslip preview, history cards, PDF action, and EssPayrollPage list view.

Fields and filters​

Employee selection where permitted, month, payslip status, compensation/attendance/reimbursement summaries, breakdown, and prior-period list fields.

Actions​

Select employee/month, load preview, generate or download PDF where available, inspect recent saved slips, and open employee Payroll list.

Validation​

The administrative page limits broad selection based on role/features and requires an employee/month. Backend generation requires saved/frozen data depending on the selected contract.

Business rules​

The administrative page limits cross-employee selection according to its page-level role/feature evaluation. Native generation requires a frozen run and frozen employee detail; compatibility preview and PDF routes can follow different saved-data rules. A structured payslip and its PDF response are separate outputs, and generating either is not payment execution.

Success and failure states​

Confirmed states include preview loaded, saved history available, PDF response received, empty history, missing payslip, and generation/download failure. The UI must retain the selected employee/period context on a recoverable failure and must not imply that a failed download reversed a generated record.

API usage​

The pages use compatibility slip, payslip, and PDF routes plus employee-self-service Payroll/payslip routes. Native output behavior is documented separately in the API section. No confirmed external document repository is presented.

Known limitations​

Employee identity and tenant propagation gaps remain Transitional. No dedicated document-history screen exists.

Screenshot placeholder​

Capture an administrative preview and employee list using synthetic identities and redacted outcomes.

Source References​

  • UI/salary-ui/apps/client-hrms-portal/src/App.tsx
  • UI/salary-ui/apps/client-hrms-portal/src/components/AppLayout.tsx
  • UI/salary-ui/apps/client-hrms-portal/src/utils/ProtectedRoute.tsx
  • UI/salary-ui/apps/client-hrms-portal/src/pages/hr/PayrollFeaturePages.tsx
  • UI/salary-ui/apps/client-hrms-portal/src/ess/EssPages.tsx
  • microservices/src/payroll-service/Application/PayrollOutputsService.cs

See Also​

Keywords​

  • Payroll ui
  • Payslips and Employee Payroll UI

Revision Information​

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