Skip to main content

Employee List UI

Summary​

The Employee Management page renders employees as selectable cards with status-aware filtering and page controls.

Audience​

  • HR administrators, frontend developers, QA engineers, and support engineers

Purpose​

Support browsing, selecting, editing, and activating or disabling source-confirmed employee records.

People → Employees → /employees. The /labor route is a compatibility alias.

Intended users and preconditions​

An authenticated tenant user must pass the workforce/labor frontend route rule. Mutation actions also depend on API access scope.

Main components, fields, and actions​

Cards show name, employee code fallback, department, designation, salary type, email, reporting manager, salary amount, and active/disabled state. Selecting a card populates the profile panel. Row-level actions are Edit and Disable/Activate. Add Employee opens the form. There is no separate details route and no column sorting implementation; sorting is Not implemented.

Filters and pagination​

Search, department, designation, employment type, and active/disabled state are applied locally to the loaded array. Pagination uses Previous/Next controls with eight records per page.

UI states​

  • Loading: “Loading employee records…”
  • Empty: “No employee records found.”
  • Profile empty: asks the user to select an employee.
  • Load failure: a page-level employee-record error.
  • Status change: confirmation modal, refresh on success, page-level error on failure.

Validation and permission behavior​

The list itself does not perform field validation. The route guard and API access scope determine visibility. Per-action frontend permission checks for edit/status are not present in Labor.tsx; backend enforcement remains authoritative.

API dependencies and business rules​

The page loads all accessible records including inactive records and then applies local filters. Tenant and employee access scoping are enforced by the active API.

Screenshot placeholder​

Screenshot placeholder: Employee cards, filter bar, pagination, and profile empty state using synthetic data only.

Source References​

  • UI/salary-ui/apps/client-hrms-portal/src/App.tsx
  • UI/salary-ui/apps/client-hrms-portal/src/pages/Labor.tsx
  • UI/salary-ui/apps/client-hrms-portal/src/utils/ProtectedRoute.tsx
  • Controllers/LaborController.cs

See Also​

Keywords​

  • Employee directory
  • employee cards
  • pagination

Revision Information​

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