Skip to main content

Employee UI

Summary​

This section documents the source-confirmed Employee Management experience in the Client HRMS React/Vite application. It does not claim screens or workflows absent from the reviewed components.

Audience​

  • HR administrators and product owners
  • Frontend/backend developers and QA engineers
  • Support engineers, architects, and new joiners

Overview​

The application exposes one composite Employee Management page at the protected /employees route, with /labor retained as a compatible route. The page combines a filterable employee card list, selected-employee profile panel, add/edit modal, organization assignments, access setup, attendance and compensation fields, document viewing, and activate/disable actions.

UI scope and navigation​

Evidence-backed areaPage
Architecture and maturityUI overview
Route/menu protectionNavigation and access
Directory cards and actionsEmployee list
Local search and filtersSearch and filters
Add workflowCreate employee
Edit workflowEdit employee
Profile panelEmployee details
Department/designation/manager fieldsOrganization assignment UI
Visible validation/error behaviorValidation and error messages
Implementation evidenceResponsive and accessibility
Test guidanceUI testing guide

Confirmed access expectations​

The menu entry is in the People group and is filtered by the workforce module feature, the existing labor permission token, and configured HR-oriented role/audience metadata. The route guard independently requires an authenticated tenant session and matching feature evidence. These are frontend controls; the active monolith API also enforces authentication and access scope.

API dependencies and transition​

The page calls relative compatibility APIs through the shared Axios client. Current request shapes and numeric identifiers align with the monolith Employee/Labor surface. Employee Service compatibility endpoints use GUID identifiers, so gateway cutover is Transitional and requires identifier/parity work before this UI can be assumed compatible.

Screenshot placeholder guidance​

Screenshot placeholder: capture the Employee Management page only with synthetic data, redact browser/session details, and refresh the image after UI governance review. No screenshot is stored in this epic.

Known UI gaps​

  • No Employee timeline display exists in Labor.tsx; a timeline UI page is Not implemented.
  • Create, edit, and details are states within one page rather than dedicated deep-linkable routes.
  • Automated frontend test files and a configured test script were not found.
  • Full keyboard, screen-reader, responsive, and WCAG conformance audits Require confirmation.
  • UI-to-extracted-service parity remains Transitional.

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

See Also​

Keywords​

  • Employee Management
  • React Vite
  • Employee frontend

Revision Information​

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