Skip to main content

Salary Calculation and Review UI

Summary​

This page records confirmed salary calculation and review 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​

Load employee-period inputs, review calculated draft rows, save employee rows, and freeze or unfreeze the selected month.

/salary/calculate from Salary Calculation or Payroll dashboard quick actions.

Users​

Users with the Payroll module and salary-calculate or salary UI feature. Unfreeze additionally checks Payroll.Unfreeze, Payroll.Manage, salary, or an accepted administration role in the page.

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​

CalculateSalaryPage, setup selectors, summary cards, searchable/paginated employee cards, expandable input panels, freeze control, and unfreeze confirmation dialog.

Fields and filters​

Payroll month, employee search, salary type and amount, attendance/leave/time summaries, adjustments, advances, expenses, component values, calculated outcomes, and status.

Actions​

Select month, review/reload inputs, edit allowed inputs, save a row, freeze, confirm unfreeze, search, expand details, and paginate.

Validation​

Future periods are rejected by the UI. Past or frozen periods become read-only. Save requires a usable row; freeze requires freeze eligibility and rows.

Business rules​

The screen presents current/past/future and frozen/edit/freeze rules returned by compatibility status behavior. Native and compatibility lifecycle semantics remain Transitional.

Success and failure states​

Loaded draft, row saved, frozen/read-only, unfreeze success toast, partial advance warning, validation message, and load/save/freeze failure message.

API usage​

The screen calls compatibility salary, workforce, attendance, calendar, component, expense, advance, and session-facing routes. See the API section for contract details.

Known limitations​

This is the combined calculation/review/detail/freeze workspace; no separate run-management or review screen exists. Browser calculations and compatibility persistence coexist with native Payroll Service calculation.

Screenshot placeholder​

Capture calculation setup, an expanded synthetic employee row, and the unfreeze confirmation dialog.

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/salary/CalculateSalaryPage.tsx
  • microservices/src/payroll-service/Application/PayrollCalculationService.cs
  • microservices/src/payroll-service/Application/PayrollCompatService.cs

See Also​

Keywords​

  • Payroll ui
  • Salary Calculation and Review UI

Revision Information​

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