Skip to main content

Payroll Dashboard UI

Summary​

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

Summarize Payroll period health, cost, compliance, attendance impact, activity, and quick links from dashboard data sources.

/dashboard/payroll from the Dashboard group.

Users​

Payroll and HR administration roles. Monetary values additionally require a Payroll-related feature or accepted administration role.

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​

PayrollDashboardPage, dashboard filters, KPI cards, charts, tables, unavailable states, and quick-action controls.

Fields and filters​

Date range. Dashboard cards show period/status, run counts, cost summaries, compliance signals, attendance impact, and recent activity when returned.

Actions​

Refresh, open drill-down cards, and use quick actions for calculation, freeze, reports, payslips, and advances.

Validation​

Role rejection redirects to the unauthorized route. Unavailable source data is shown as unavailable instead of inferred.

Business rules​

Dashboard metrics come from the shared dashboard bundle and link to feature routes.

Success and failure states​

Loading skeleton, populated cards/charts, restricted-value state, unavailable/retry state, and empty recent activity.

API usage​

No dedicated Payroll dashboard API contract is established here; the dashboard aggregates gateway-facing sources.

Known limitations​

Some KPIs are conditional on available report fields. Processed-run presentation is a dashboard interpretation and is not a confirmed PayrollRun status.

Screenshot placeholder​

Capture the dashboard with synthetic values and restricted monetary cards.

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

See Also​

Keywords​

  • Payroll ui
  • Payroll Dashboard UI

Revision Information​

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