DemoBuy

Dashboard & Activity

Last updated on 2026-03-30

The dashboard is the landing page of the HR app. It gives HR managers a real-time overview of headcount, hiring, attendance, and upcoming events -- all in a single scrollable view.

Dashboard Home

Route: /

The dashboard combines six stat cards, two charts, an activity feed, an events panel, and a team availability widget.

Stat Cards

Six StatCard components across the top row, each showing a metric with a trend indicator:

Stat Example Value Trend
Total Employees 20 +11.1%
New Hires 2 +50%
Open Positions 3 +25%
Attendance Rate 94.5% +2.3%
Pending Leaves 5 -15%
Upcoming Reviews 13 +8% 
import { StatCard } from "@/components/dashboard/stat-card"

<StatCard
  title="Total Employees"
  value={stats.totalEmployees}
  change={stats.employeeChange}
  icon={Users}
/>

Headcount Trend Chart

A Recharts AreaChart showing monthly headcount over the past 12 months. Uses the --chart-1 token (green) for the area fill and stroke.

import { HeadcountChart } from "@/components/dashboard/headcount-chart"

<HeadcountChart data={headcountData} />

Department Distribution

A Recharts PieChart (donut style) showing the employee count breakdown by department. Each department slice uses its configured color from the seed data.

import { DepartmentChart } from "@/components/dashboard/department-chart"

<DepartmentChart data={departmentDistribution} />

Activity Feed

A chronological list of recent HR activities -- performance reviews completed, announcements posted, leave requests, review cycles launched, and more.

import { ActivityFeed } from "@/components/dashboard/activity-feed"

<ActivityFeed items={recentActivity} />

Upcoming Events

A panel listing upcoming meetings, interviews, work anniversaries, and company events with date badges and category tags (Meeting, Anniversary, etc.).

import { UpcomingEvents } from "@/components/dashboard/upcoming-events"

<UpcomingEvents events={calendarEvents} />

Team Availability (Who's Out Today)

Shows employees currently on leave, remote, or out of office with their status badge and return date.

import { TeamAvailability } from "@/components/dashboard/team-availability"

<TeamAvailability employees={employees} />

Dashboard Layout

┌─────────────────────────────────────────────────────┐
│ Stat Card × 6 (Total Employees, New Hires, ...)    │
├────────────────────────────┬────────────────────────┤
│ Headcount Trend (AreaChart)│ Dept Distribution      │
│                            │ (Donut Chart)          │
├────────────────────────────┼────────────────────────┤
│ Recent Activity            │ Upcoming Events        │
│ (activity feed list)       │ (event cards)          │
├────────────────────────────┴────────────────────────┤
│ Who's Out Today                                      │
└─────────────────────────────────────────────────────┘

Notifications

Route: /notifications

Notification center listing system notifications with unread badges, category icons, and timestamps. Includes mark-all-as-read and filter by type (leave, performance, system).

Route: /search

Global search page for employees, departments, documents, and announcements. Results are grouped by category with highlighting.

Calendar

Route: /calendar

Monthly calendar view showing leave periods, meetings, anniversaries, and company events. Uses react-day-picker for the calendar grid.

Data Sources

Data Source Location
Dashboard stats dashboardStats data/seed.ts
Headcount trend headcountData data/seed.ts
Department distribution departmentDistribution data/seed.ts
Recent activity activityItems data/seed.ts
Calendar events calendarEvents data/seed.ts
Employees (for availability) employees data/seed.ts

Next Steps

Previous

Project Structure

Next

Employees & Org Chart