Skip to main content

Create Employee UI

Summary​

Add Employee is a seven-step modal embedded in Employee Management and submits one compatibility request.

Audience​

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

Purpose, navigation, and preconditions​

From People → Employees, choose Add Employee. The user needs route access, tenant-wide mutation access at the API, and available licensing according to the loaded license status.

Main components and fields​

  • Basic: full name, email, phone, date of birth, address.
  • Job: optional employee code, department, designation, joining date, employment type, reporting manager.
  • Access: login email, role, temporary-password choice, login/employee active state.
  • Attendance: mode, shift, daily hours and threshold/rate fields.
  • Compensation: direct annual amount or hourly rate with calculated summary.
  • Bank & KYC: bank and statutory-identity fields.
  • Review: a non-editing summary before save.

No sensitive examples are provided here.

Validation and form flow​

Required client checks cover name, employee and login email shape, an optional manually entered temporary password, and the appropriate compensation value. Department/designation/manager integrity and duplicate checks depend on the API.

Success, failure, and empty states​

Success closes the modal, resets the form, reloads employees, and shows a success toast. Failure keeps the form open and shows an extracted API message or a generic failure. “Not assigned” is supported for organization selectors.

Permission and API dependency​

The frontend does not separately guard the Add button by a mutation permission; the API enforces tenant-wide access. Current request fields target the monolith compatibility DTO. Extracted-service create parity is Transitional.

Screenshot placeholder​

Screenshot placeholder: each step of Add Employee using synthetic, non-sensitive values.

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
  • microservices/src/employee-service/Application/Validators/EmployeeCommandValidators.cs

See Also​

Keywords​

  • Add Employee
  • employee form
  • client validation

Revision Information​

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