Payroll UI Documentation

Summary

Complete source-backed ui documentation for Payroll, including confirmed implementation, Transitional boundaries, unsupported capabilities, and safe operating guidance.

Audience

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

Overview

Scope and evidence

This section is the landing point for every Payroll surface confirmed in the reviewed client portal. It covers route access, the dashboard, the combined calculation/review/freeze workspace, payslips, employee self-service, advances, components, statutory settings, reports, validation, responsive behavior, accessibility observations, and testing. An API capability is not described as a screen unless a route and rendered page were also confirmed.

The implementation is Transitional: native Payroll Service behavior and compatibility routes coexist. In this section:

• Foundation means a confirmed base capability that is not evidence of a complete production workflow.
• Transitional means current behavior spans native and compatibility implementations.
• Requires confirmation means the reviewed source does not establish the behavior.
• Not implemented means the reviewed client source has no dedicated surface for the capability.

Confirmed screen inventory

Surface	Route	Confirmed purpose	Implementation note
Payroll dashboard	/dashboard/payroll	Period, cost, compliance, attendance-impact, activity, and quick-action summary	Shared dashboard bundle; not a run system of record
Salary calculation and review	/salary/calculate	Select a period, review employee rows, save, freeze, and unfreeze	Combined workspace; no separate run-management or approval page
Payslips	/salary/slips	Administrative preview, generation/history, and PDF action	Compatibility and output contracts coexist
Employee Payroll	/payroll	Employee-facing Payroll and payslip list	Self-service view; identity propagation remains Transitional
Advances	/salary/advance	List and create advance/recovery transactions	No edit, delete, approval, or reconciliation screen confirmed
Salary components	/salary/components	Maintain compatibility salary components	Import/export toolbar does not prove a bulk Payroll API
Statutory settings	/salary/statutory-settings	Maintain settings exposed by HR Operations	UI ownership is not the same as Payroll Service ownership
Payroll reports	/reports/payroll	Summary and advance-ledger reporting/export	No Payroll import or bank-export screen
Compliance reports	Confirmed route in portal routing	Expose compliance report navigation	Owned with reporting; not evidence of statutory submission

Access boundary

The client shell and ProtectedRoute enforce authentication, tenant association, module access, and configured route features. Navigation also uses role and audience rules, and selected screens add page-level checks. These controls establish UI visibility only. They do not prove API or gateway authorization; use the permission reference for the confirmed boundary.

Unsupported surfaces

No dedicated client screen was confirmed for standalone run management, separate Payroll review/approval, bank export, payment execution, accounting posting, irreversible finalization, workflow approval, outbox monitoring, projection administration, migration/cutover, or durable document history. These are Not implemented as UI surfaces, not hidden screens.

Documentation map

• Payroll UI Navigation and Access
• Payroll Dashboard UI
• Salary Calculation and Review UI
• Payslips and Employee Payroll UI
• Payroll Advances UI
• Salary Components and Statutory Settings UI
• Payroll Reports UI
• Payroll UI Validation and States
• Payroll UI Responsive and Accessibility Observations
• Payroll UI Testing Guide
• Unsupported Payroll UI Surfaces

Reading path

Start with navigation and access, then use the screen-specific pages for user behavior. Testers should pair validation and states, responsive and accessibility observations, and the UI testing guide. Unsupported requests should be checked against unsupported UI surfaces before escalation.

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/dashboard/DashboardPages.tsx
• UI/salary-ui/apps/client-hrms-portal/src/pages/salary/CalculateSalaryPage.tsx
• microservices/src/payroll-service/Application/PayrollCalculationService.cs
• microservices/src/payroll-service/Application/PayrollCompatService.cs
• 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
• UI/salary-ui/apps/client-hrms-portal/src/pages/salary/AdvanceSalaryPage.tsx

Related Articles

• Payroll technical documentation
• Payroll API documentation

See Also

• Payroll database documentation
• Payroll events documentation

Keywords

• Payroll ui
• Payroll module

Revision Information

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