DemoBuy

Employees & Org Chart

Last updated on 2026-03-30

The employees module is the core of the HR dashboard. It covers the employee directory, individual profiles, an interactive org chart, team management, and a multi-step wizard for adding new employees.

Employee Directory

Route: /employees

A searchable, filterable list of all employees with two view modes.

  • Grid/List toggle -- switch between card grid and sortable table views
  • Search -- filter employees by name, role, or email
  • Filters -- department, employment status (active, on-leave, remote), and type (full-time, part-time, contract) via EmployeeFilters
  • Bulk actions -- select multiple employees for batch operations
  • Pagination -- server-ready pagination controls
import { EmployeeTable } from "@/components/employees/employee-table"
import { EmployeeFilters } from "@/components/employees/employee-filters"
import { EmployeeCard } from "@/components/employees/employee-card"

Employee Card

Each card displays the employee's avatar, name, role, department badge, status indicator (green dot for active, yellow for on-leave), and quick action buttons (view profile, edit, email).

Employee Table

Sortable columns: Name, Department, Role, Status, Type, Location, Hire Date. Click any row to navigate to the employee profile.

Employee Profile

Route: /employees/[id]

A comprehensive view of an individual employee with a hero section and tabbed content.

  • Profile hero -- avatar, name, role, department, status badge, employment type, location, and hire date
  • Quick actions -- Edit Profile, Send Email, Schedule Meeting buttons
  • Tabbed content:
    • Overview -- bio, skills tags, contact info (email, phone), emergency contact, and address
    • Leave -- leave balances by type (annual, sick, personal) with progress bars, and leave history table
    • Performance -- performance review summaries, goals list with progress, and rating history
    • Documents -- uploaded documents (contract, ID, certificates) with download links
    • Activity -- chronological activity feed for this employee

Employee Edit

Route: /employees/[id]/edit

Form to edit employee details with sections for personal info, employment details, contact information, and emergency contact. Pre-populated with current data.

Add Employee Wizard

Route: /employees/new

A multi-step form wizard for adding a new employee:

Step Fields
1. Personal Info First name, last name, email, phone, avatar upload
2. Employment Role, department, team, employment type, start date, salary
3. Contact Address, emergency contact name, phone, relationship
4. Review Summary of all entered data with edit links back to each step 
import { EmployeeWizard } from "@/components/employees/employee-wizard"

The wizard uses step indicators with completed/active/pending states and validates each step before allowing progression.

Interactive Org Chart

Route: /org-chart

A visual organizational hierarchy rendered as a tree with CSS-based connecting lines.

  • Tree layout -- recursive OrgTreeNode components rendering manager-report relationships
  • Search -- search by name to highlight and auto-scroll to a specific employee in the tree
  • Zoom controls -- zoom in/out buttons and fit-to-screen
  • Department colors -- each department branch uses its configured color for the node border
  • Expand/collapse -- click a node to expand or collapse its subtree
  • Node details -- each node shows avatar, name, role, and department
import { OrgTreeNode } from "@/components/employees/org-tree-node"

Org Chart Architecture

CEO (Sarah Chen)
├── VP Engineering (Marcus Johnson)
│   ├── Senior Engineer (...)
│   ├── Engineer (...)
│   └── Junior Engineer (...)
├── VP Product (...)
│   └── Product Manager (...)
├── VP Marketing (...)
└── VP Operations (...)

The tree is built from the managerId field on each Employee. Employees with no managerId are root nodes.

Team Management

Route: /teams

Grid of team cards with member count, team lead, department association, and description. Click a card to see team members with a comparison table (role, hire date, location).

import { TeamCard } from "@/components/employees/team-card"

Data Sources

Data Source Location
Employees employees (20 records) data/seed.ts
Departments departments (8 records) data/seed.ts
Teams teams data/seed.ts

Next Steps

Previous

Dashboard & Activity

Next

Leave & Attendance