Employees & Org Chart Module

The Employees feature (src/features/employees/) is the central entity directory in BonardaHR. It manages employee lifecycle records, hierarchical structures, custom profile sections, and bulk data synchronization.

---

Routes & Access

Route	Component	Required Permissions	Purpose
/employees	EmployeePage	Authenticated	Main employee directory with List, Grid, and Org Chart views
/employees/new	CreateEmployeeWizard	EMPLOYEE_CREATE	Multi-step employee creation wizard
/employees/import	BulkImportPage	EMPLOYEE_CREATE, EMPLOYEE_READ_ALL	CSV bulk employee import & column mapper
/hibob/sync	HibobSyncPage	Roles: ADMIN, HR_MANAGER	Third-party HiBob integration & sync
/employees/:id	EmployeeProfilePage	Authenticated	Comprehensive employee profile tabs

---

Core Subsystems

1. Multi-View Employee Directory (EmployeeDirectory.tsx)

Offers instant view toggling between:

• Table View (EmployeeTable.tsx): High-density sortable data table with avatar, title, department, manager, and status badges.
• Grid View (EmployeeGrid.tsx): Card-based grid featuring quick contact icons and direct profile links.
• Org Chart View (EmployeeOrgChart.tsx / OrgChart.tsx): Interactive tree rendering powered by D3 (d3-org-chart), supporting zoom, pan, expand/collapse nodes, and hierarchical reporting relationships.

2. Multi-Step Creation Wizard (CreateEmployeeWizard.tsx)

A guided multi-step workflow built using the shared Stepper component:

1. Basic Information: First name, last name, work email, phone, avatar.
2. Job & Department: Title, Department, Position, Reports-To manager, Site / Office location, Employment type.
3. Compensation & Start Date: Hire date, contract type, compensation details.
4. Review & Confirm: Summary check before executing useCreateEmployee mutation.

3. Dynamic Profile Sections (EmployeeProfilePage.tsx)

Displays standard and custom dynamic fields configured by HR admins in the Admin module:

• Personal Details: Contact info, emergency contacts, identity documents.
• Job Details: Hierarchy, department history, promotions, direct reports.
• Custom Section Cards (SectionCard.tsx): Dynamically rendered based on backend schema definitions.
• Field Audit History (FieldAuditHistory.tsx): Full historical audit trail tracking field updates, timestamps, and the modifying user.

---

Key Hooks & Services

// features/employees/hooks/useEmployees.ts
export function useEmployees(filters: EmployeeFilters) {
  return useQuery({
    queryKey: employeeKeys.list(filters),
    queryFn: () => employeeService.getAll(filters),
  });
}

export function useEmployeeHierarchy(employeeId: string) {
  return useQuery({
    queryKey: employeeKeys.hierarchy(employeeId),
    queryFn: () => employeeService.getHierarchy(employeeId),
  });
}