A modern, interactive organizational chart application built with Next.js 15, featuring hierarchical visualization and comprehensive employee data analysis.
- Hierarchical Visualization: Displays company structure with automatic Dagre-based layout
- Department Hierarchy: Board of Directors → Engineering, HR, Marketing, Sales, IT Support
- Real-time Data: Fetches organizational structure from database via API
- Interactive Controls: Pan, zoom, and navigate through the organizational tree
- Mini-map Navigation: Quick overview and navigation of large hierarchies
- Comprehensive Employee Table: View all employee data with advanced filtering
- Profile Pictures: UI Avatars integration for consistent visual identity
- Status Badges: Color-coded active/inactive employee status
- Sortable Columns: Sort by name, salary, start date, and more
- Advanced Filtering: Filter by first name, last name, gender, and department
- Column Visibility: Show/hide columns based on your needs
- Pagination: Navigate through large datasets efficiently
- Framework: Next.js 15 (App Router)
- UI Components: shadcn/ui
- Styling: Tailwind CSS
- Chart Library: @xyflow/react
- Table: @tanstack/react-table
- Database: MySQL with Drizzle ORM
- Layout Algorithm: Dagre
- Avatars: UI Avatars API
- Node.js 18+ and pnpm
- MySQL database
- Clone the repository:
git clone https://github.com/martin-iliew/organizational-chart.git
cd organizational-chart- Install dependencies:
pnpm install- Set up environment variables:
cp .env.example .envEdit .env and add your database connection string:
DATABASE_URL="mysql://user:password@localhost:3306/orgchart"- Push the database schema:
pnpm db:push- Seed the database with sample data:
pnpm db:seed- Run the development server:
pnpm dev- Open http://localhost:3000 in your browser.
organizational-chart/
├── src/
│ ├── app/ # Next.js app router pages
│ │ ├── api/ # API routes
│ │ │ ├── employees/ # Employee data endpoint
│ │ │ └── hierarchy/ # Organizational hierarchy endpoint
│ │ ├── dashboard/ # Dashboard pages
│ │ └── layout.tsx
│ ├── components/ # React components
│ │ ├── nodes/ # Custom React Flow nodes
│ │ ├── edges/ # Custom React Flow edges
│ │ ├── ui/ # shadcn/ui components
│ │ ├── OrgChartComponent.tsx
│ │ ├── DataTable.tsx
│ │ └── Columns.tsx
│ ├── db/ # Database configuration
│ │ ├── schema.ts # Drizzle schema
│ │ ├── queries/ # Database queries
│ │ └── seed.ts # Database seeding script
│ ├── lib/ # Utility functions
│ │ ├── layoutUtils.ts # Dagre layout logic
│ │ └── placeholder-data.ts
│ └── types/ # TypeScript type definitions
├── public/ # Static assets
└── package.json
The application uses the following main entities:
- Regions: Geographic regions
- Settlements: Cities within regions
- Citizens: Personal information
- Positions: Job positions/titles
- Departments: Organizational departments with hierarchical relationships
- Employees: Links citizens to departments and positions
- Automatically layouts departments in a hierarchical tree structure
- Each node displays the department name and head's profile picture
- Supports nested departments (e.g., Engineering → Atlassian, QA)
- Interactive controls for zoom, pan, and fit-to-view
- Professional styling with hover effects and smooth transitions
- Displays comprehensive employee information
- Real-time filtering and sorting
- Responsive design with zebra-striped rows
- Professional UI with status badges and formatted data
- Export-ready for reports and analysis
pnpm dev # Start development server
pnpm build # Build for production
pnpm start # Start production server
pnpm lint # Run ESLint
pnpm db:push # Push schema to database
pnpm db:seed # Seed database with sample data