Org Chart & Headcount Planning

Visualize reporting hierarchy, track headcount by department, and plan future roles in one browser page.

Overview

Org Chart & Headcount Planning is a single-page app for HR and people operations teams who need a lightweight org structure tool without a full HRIS. Browse a visual hierarchy tree, manage employees in AG Grid, filter by department, toggle planning mode for future hires, export headcount workbooks, and resume work with automatic browser save.

Key features

Summary dashboard

• Total headcount — employees visible under current filters and planning mode.
• Current employees — filled roles in the organization.
• Planned hires — future headcount positions marked Planned.
• Departments — count of distinct departments represented.

Visual org chart

• CSS tree layout showing reporting lines from CEO through managers to individual contributors.
• Planned roles use dashed indigo borders to distinguish future hires.
• Chart rebuilds when employees are added, edited, filtered, or when planning mode toggles.

Headcount by department

• Horizontal bar chart showing relative headcount per department.
• Updates live from visible employee rows.

Add and edit employees

• Alpine.js form with name, title, department, manager (reports-to), and status (Current or Planned).
• Edit loads a row into the form; Update saves changes; Cancel clears edit mode.
• Delete removes an employee and clears dangling manager references.

Filters and planning mode

• Planning mode checkbox includes or excludes Planned future hires across chart, grid, and KPIs.
• Department dropdown filters all views to one department.
• Planned roles only narrows to future headcount entries.

Employee grid

• AG Grid with Employee, Title, Department, Reports To, and Status columns.
• Planned rows highlighted with blue background styling.
• Sortable, resizable columns with Edit and Delete actions.

Excel export

• Export Excel downloads `org-chart-headcount.xlsx` with Employees, Future Headcount, and By Department sheets.

Theme and persistence

• Dark mode toggle with Tailwind class switching and theme-aware AG Grid and org chart colors.
• Employees, next ID, and planning mode preference auto-save to browser localStorage.

Data & persistence

Sample data includes nine roles across five departments — seven current employees and two planned future hires. Edits auto-save to localStorage; sample data loads when no saved state exists. Excel export uses SheetJS.

Charts & reporting

Department headcount bars and four KPI summary cards support workforce planning. The Future Headcount export sheet lists all Planned roles for budgeting conversations.

Built with

Tailwind CSS, Alpine.js, AG Grid Community, HTML/CSS org tree layout, and SheetJS (xlsx).

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.