The HR Dashboard Kit uses Next.js App Router with route groups to separate the main HR dashboard from the authentication flow.
Directory Overview
hr-dashboard-kit/
├── app/
│ ├── (dashboard)/ # Main HR pages
│ │ ├── layout.tsx # AppSidebar + Header
│ │ ├── page.tsx # HR dashboard
│ │ ├── search/page.tsx # Global search
│ │ ├── calendar/page.tsx # Calendar view
│ │ ├── notifications/page.tsx # Notifications center
│ │ ├── announcements/page.tsx # Company announcements
│ │ ├── documents/page.tsx # Document library
│ │ ├── help/page.tsx # Help center
│ │ ├── employees/
│ │ │ ├── page.tsx # Employee directory
│ │ │ ├── new/page.tsx # Multi-step add wizard
│ │ │ └── [id]/
│ │ │ ├── page.tsx # Employee profile
│ │ │ └── edit/page.tsx # Edit employee
│ │ ├── org-chart/page.tsx # Interactive org chart
│ │ ├── teams/page.tsx # Team management
│ │ ├── leave/
│ │ │ ├── page.tsx # Leave overview
│ │ │ ├── requests/page.tsx # Leave request admin
│ │ │ ├── apply/page.tsx # Apply for leave
│ │ │ └── policies/page.tsx # Leave policies
│ │ ├── attendance/
│ │ │ ├── page.tsx # Attendance dashboard
│ │ │ ├── reports/page.tsx # Attendance reports
│ │ │ └── settings/page.tsx # Attendance settings
│ │ ├── performance/
│ │ │ ├── page.tsx # Performance overview
│ │ │ ├── goals/page.tsx # Goals & OKRs
│ │ │ ├── cycles/page.tsx # Review cycles
│ │ │ └── reviews/[id]/page.tsx # Individual review form
│ │ ├── onboarding/
│ │ │ ├── page.tsx # Onboarding dashboard
│ │ │ ├── templates/page.tsx # Onboarding templates
│ │ │ └── [id]/page.tsx # Checklist detail
│ │ ├── recruitment/
│ │ │ ├── page.tsx # Job postings
│ │ │ ├── [jobId]/applicants/page.tsx # Applicant kanban
│ │ │ └── applicants/[id]/page.tsx # Applicant profile
│ │ └── settings/
│ │ ├── page.tsx # General settings
│ │ ├── departments/page.tsx # Department management
│ │ ├── roles/page.tsx # Role management
│ │ └── integrations/page.tsx # Third-party integrations
│ ├── (auth)/ # Authentication
│ │ ├── layout.tsx # Centered card layout
│ │ ├── login/page.tsx
│ │ ├── register/page.tsx
│ │ └── forgot-password/page.tsx
│ ├── globals.css # Design tokens
│ └── layout.tsx # Root layout
├── components/
│ ├── ui/ # shadcn/ui primitives (~34 components)
│ ├── a11y/ # Accessibility (live-region, visually-hidden)
│ ├── layout/ # App chrome (sidebar, header, skip-link, theme-toggle)
│ ├── dashboard/ # Dashboard composites (8 components)
│ ├── employees/ # Employee composites (6 components)
│ ├── leave/ # Leave composites (4 components)
│ ├── attendance/ # Attendance composites (4 components)
│ ├── performance/ # Performance composites (7 components)
│ ├── onboarding/ # Onboarding composites (4 components)
│ ├── recruitment/ # Recruitment composites (6 components)
│ └── settings/ # Settings composites (4 components)
├── data/
│ └── seed.ts # Mock data for all pages
├── types/
│ └── index.ts # TypeScript interfaces
├── hooks/
│ ├── use-mobile.ts # Mobile viewport detection
│ ├── use-announce.ts # Screen reader announcements
│ ├── use-focus-trap.ts # Focus trap for modals
│ ├── use-keyboard-navigation.ts # Keyboard nav support
│ └── use-reduced-motion.ts # Reduced motion preference
├── lib/
│ └── utils.ts # cn() utility
└── public/
└── images/ # Static images
Route Groups
| Group |
Layout |
Purpose |
(dashboard) |
AppSidebar + Header |
Main HR pages (dashboard, employees, leave, attendance, performance, onboarding, recruitment, settings) |
(auth) |
Centered card |
Login, register, forgot password |
Component Organization
Primitives (components/ui/)
34 shadcn/ui components: Accordion, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Chart, Checkbox, Collapsible, Command, Dialog, DropdownMenu, Input, InputGroup, Label, Popover, Progress, RadioGroup, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Sonner, Switch, Table, Tabs, Textarea, Toggle, ToggleGroup, and Tooltip.
Dashboard Composites (components/dashboard/)
| Component |
Used In |
stat-card |
Dashboard (total employees, new hires, open positions, attendance rate, leaves, reviews) |
headcount-chart |
Dashboard (monthly headcount trend via Recharts AreaChart) |
department-chart |
Dashboard (department distribution donut chart) |
activity-feed |
Dashboard (recent HR activity items) |
upcoming-events |
Dashboard (upcoming meetings, interviews, anniversaries) |
team-availability |
Dashboard (who's out today widget) |
notification-list |
Notifications page |
calendar-view |
Calendar page |
Employee Composites (components/employees/)
| Component |
Used In |
employee-table |
Employee directory (sortable, filterable table) |
employee-filters |
Employee directory (department, status, type filters) |
employee-card |
Employee directory grid view |
employee-wizard |
Multi-step add employee form |
team-card |
Teams page |
org-tree-node |
Org chart (recursive tree node) |
Layout Components (components/layout/)
| Component |
Purpose |
app-sidebar |
Collapsible sidebar with HR navigation sections (Main, People, Time & Leave, Talent, More) |
header |
Top bar with breadcrumbs, search, notifications, theme toggle, user menu |
skip-link |
Accessibility skip navigation link |
theme-toggle |
Light/dark mode switch |
Key Files
| File |
Purpose |
data/seed.ts |
All mock data (20 employees, 8 departments, leave requests, attendance records, reviews, goals, job postings, applicants, etc.) |
types/index.ts |
TypeScript interfaces for all domain objects (Employee, Department, LeaveRequest, AttendanceRecord, PerformanceReview, Goal, JobPosting, Applicant, etc.) |
lib/utils.ts |
cn() class name utility |
app/globals.css |
Design tokens (oklch colors with green hue 175, spacing, typography) |