Employee UI Overview
Summary
The Employee experience is implemented in the Client HRMS portal as a single composite LaborPage component.
Audience
- Frontend/backend developers, QA engineers, architects, HR administrators, and support engineers
Overview
The Client HRMS portal is a React/Vite application. App.tsx maps both /employees and /labor to LaborPage through ProtectedRoute. AppLayout supplies the Employees menu item. The page uses the shared Axios client for relative API requests.
Major components and flows
- Directory metrics, import/export toolbar, local search, organization/employment filters, active/disabled segmentation, eight-record pagination, and employee cards.
- A selected-employee side panel with Overview and Documents tabs.
- A seven-step add/edit modal: Basic Details, Job Details, Access & Roles, Attendance Rules, Compensation, Bank & KYC, and Review & Save.
- Department, designation, user/manager, role, shift, settings, licensing, and document lookups.
- Explicit loading and empty list states, page-level errors, save success toasts, save failures, and document-loading state.
UI-to-API request flow
Maturity and dependency boundary
The screen is implemented against compatibility route names and a wider monolith DTO than the extracted Employee aggregate. The extracted service has compatibility endpoints but rejects numeric Legacy identifiers. Current frontend-to-service cutover is therefore Transitional, not complete.
Source References
UI/salary-ui/apps/client-hrms-portal/src/App.tsxUI/salary-ui/apps/client-hrms-portal/src/pages/Labor.tsxUI/salary-ui/apps/client-hrms-portal/src/utils/ProtectedRoute.tsxUI/salary-ui/packages/api-client/src/axiosConfig.tsControllers/LaborController.csmicroservices/src/employee-service/Api/EmployeeCompatibilityEndpoints.cs
Related Articles
See Also
Keywords
- UI architecture
- LaborPage
- compatibility UI
Revision Information
- Status: Draft
- Last reviewed: 2026-07-15
- Review cycle: Quarterly