Skip to main content

Payroll Advances UI

Summary​

This page records confirmed payroll advances 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​

List advance and recovery transactions and create a new transaction.

/salary/advance from the Payroll navigation and dashboard.

Users​

Users with the Payroll module and salary-advance or salary UI feature; navigation targets Payroll/HR administration roles.

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​

AdvanceTransactionPage, metric cards, searchable/filterable table, pagination, and transaction modal.

Fields and filters​

Employee, amount, conditional monthly deduction, transaction type, and date. Table filtering uses employee/type.

Actions​

Open modal, create advance or recovery, search, filter by type, paginate, and return to dashboard.

Validation​

Employee and positive amount are required. Monthly deduction is sent only for advance type. Backend rules additionally reject recovery above remaining balance.

Business rules​

An advance increases the recoverable balance; a recovery decreases it and cannot exceed the remaining balance. Monthly deduction is applicable only to an advance transaction. Creating a transaction is not payment, approval, or reconciliation.

Success and failure states​

Confirmed states include loading, populated and empty tables, local validation failure, successful save followed by refresh, and load/save failure. A rejected recovery must leave the displayed ledger unchanged after refresh.

API usage​

The screen uses employee listing and compatibility advance transaction routes. It derives summary totals from loaded transactions; it is not an accounting ledger or payment execution screen.

Known limitations​

No edit/delete transaction action, approval workflow, or reconciliation screen is confirmed.

Screenshot placeholder​

Capture the transaction list and create dialog with synthetic data.

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

See Also​

Keywords​

  • Payroll ui
  • Payroll Advances UI

Revision Information​

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