DemoBuy

Dashboard & Activity

Last updated on 2026-03-26

The dashboard group provides the primary landing experience for the project management platform. It includes a workspace overview with KPIs and charts, a chronological activity feed, workspace analytics, a personal task view, and a team workload manager. All five screens share the (dashboard) route group layout with AppSidebar and AppHeader.

Dashboard Home

Route: /

The main dashboard is the default landing page. It provides a high-level snapshot of workspace activity with project stats, recent tasks, and quick actions.

  • KPI stat cards -- Active Projects, Open Tasks, Completed This Week, and Overdue Tasks using the StatsCard component with trend indicators
  • Project progress -- horizontal progress bars showing completion percentage for each active project, color-coded by project color
  • Recent activity timeline -- vertical timeline of the 10 most recent activities across all projects (task created, status changed, assigned, commented, completed)
  • My upcoming tasks -- card list of the user's tasks due within the next 7 days, showing task ID badge, title, project name, priority icon, and due date
  • Quick actions -- prominent buttons for "New Project", "Create Task", and "Start Cycle"
import { StatsCard } from "@/components/pm/stats-card"
import { ActivityItem } from "@/components/pm/activity-item"
import { TaskCard } from "@/components/task/task-card"
import { ProgressRing } from "@/components/pm/progress-ring"

Dashboard Layout

+----------+----------+----------+----------+
| Active   | Open     | Completed| Overdue  |
| Projects | Tasks    | This Week| Tasks    |
+----------+----------+-----+----+----------+
| Project Progress          | My Upcoming Tasks    |
| (progress bars)           | (task cards)         |
+---------------------------+----------------------+
| Recent Activity                                  |
| (timeline)                                       |
+--------------------------------------------------+
| Quick Actions                                    |
+--------------------------------------------------+

Data Sources

Data Source Location
KPI metrics Computed from projects, tasks data/seed.ts
Project progress projects (completedCount / issueCount) data/seed.ts
Recent activity activities (sorted by createdAt) data/seed.ts
Upcoming tasks tasks (filtered by assignee + dueDate) data/seed.ts

Activity Feed

Route: /activity

A chronological timeline of all workspace activities across projects and team members. Each activity entry displays a type-specific icon, description, related entity links, and timestamp.

  • Activity timeline -- vertical timeline with type-specific icons (plus for created, arrow-right for status change, user for assigned, message-circle for commented, check for completed, layers for moved to cycle, alert-triangle for priority change, tag for label added)
  • Filter tabs -- pill-style tabs for All, Created, Status Changes, Assigned, Comments, and Completed to narrow the feed by activity type
  • Search bar -- text input to filter activities by description, task title, or project name
  • Date grouping -- activities are grouped under sticky date headers: Today, Yesterday, This Week, and Earlier
  • Project filter -- dropdown to scope activities to a specific project
  • Empty states -- contextual message when no activities match the selected filter or search query
import { ActivityItem } from "@/components/pm/activity-item"

Activity Types

Type Icon Color Example
created Plus green "Created task KAN-42: Implement search"
status_change ArrowRight blue "Moved KAN-42 from Todo to In Progress"
assigned User purple "Assigned KAN-42 to Sarah Chen"
commented MessageCircle amber "Commented on KAN-42"
completed Check green "Completed KAN-42"
moved_to_cycle Layers indigo "Added KAN-42 to Sprint 5"
priority_change AlertTriangle orange "Changed KAN-42 priority to Urgent"
label_added Tag teal "Added 'Bug' label to KAN-42"
deleted Trash red "Deleted KAN-42"

Data Sources

Data Source Location
Activities activities data/seed.ts
Activity types ActivityType types/index.ts

Workspace Analytics

Route: /analytics

A workspace-level analytics dashboard with velocity tracking, cumulative flow, and task distribution charts.

  • Date range selector -- pill-style buttons for 7d, 30d, 90d, and All time periods; selecting a range filters all charts and metrics
  • Velocity chart -- Recharts BarChart comparing planned vs completed story points across recent sprints
  • Cumulative flow diagram -- stacked AreaChart showing the count of tasks in each status (Backlog, Todo, In Progress, In Review, Done) over time, revealing bottlenecks
  • Task distribution donut -- PieChart (donut variant) breaking down tasks by status with percentage labels and legend
  • Priority breakdown -- horizontal BarChart showing task count per priority level (Urgent, High, Medium, Low, None) with priority-specific colors
  • Daily created vs completed -- line chart comparing tasks created per day against tasks completed per day, showing throughput trends
  • Contributor table -- data table of team members showing tasks created, tasks completed, and average cycle time
import { VelocityChart } from "@/components/charts/velocity"
import { CumulativeFlowChart } from "@/components/charts/cumulative-flow"
import { DistributionDonut } from "@/components/charts/distribution-donut"
import { StatsCard } from "@/components/pm/stats-card"

Analytics Layout

+----------+----------+----------+----------+
| Total    | Avg      | Avg Cycle| Active   |
| Tasks    | Velocity | Time     | Members  |
+----------+----------+----------+----------+
| Velocity Chart         | Cumulative Flow       |
| (bar chart)            | (stacked area)        |
+------------------------+-----------------------+
| Task Distribution      | Priority Breakdown    |
| (donut chart)          | (bar chart)           |
+------------------------+-----------------------+
| Created vs Completed   | Contributors          |
| (line chart)           | (table)               |
+------------------------+-----------------------+

Data Sources

Data Source Location
Velocity points velocityData data/seed.ts
Cumulative flow cumulativeFlowData data/seed.ts
Task distribution Computed from tasks data/seed.ts
Contributor data contributionData data/seed.ts
Daily metrics dailyMetrics data/seed.ts

My Work

Route: /my-work

A personal task dashboard showing all tasks assigned to the current user across all projects.

  • Task list -- grouped task rows showing task ID badge, title, project name, status badge, priority icon, due date, and labels
  • Group by selector -- toggle between grouping by Status, Priority, Project, or Due Date
  • Sort controls -- sort by created date, updated date, priority, due date, or title
  • Filter bar -- multi-select filters for status, priority, labels, and project
  • Quick status toggle -- click the status badge on any task row to cycle through statuses without opening the task detail
  • Empty state -- encouraging message when no tasks are assigned
import { TaskRow } from "@/components/task/task-row"
import { FilterBar } from "@/components/project/filter-bar"
import { GroupHeader } from "@/components/project/group-header"
import { TaskStatus } from "@/components/task/task-status"
import { TaskPriority } from "@/components/task/task-priority"

Data Sources

Data Source Location
User tasks tasks (filtered by assigneeId) data/seed.ts
Projects projects data/seed.ts
Labels taskLabels data/seed.ts

Workload

Route: /workload

A team workload visualization showing task distribution across team members for capacity planning.

  • Workload bar chart -- horizontal stacked BarChart per team member showing task count broken down by status (In Progress, In Review, Todo), revealing who is overloaded or underutilized
  • Capacity indicators -- color-coded capacity labels: green (under capacity), amber (at capacity), red (overloaded) based on configurable task limits
  • Member cards -- avatar, name, role, active task count, and progress ring showing percentage of tasks completed
  • Date range selector -- filter workload to current sprint, this week, or this month
  • Rebalance suggestions -- flagged members who are overloaded with a suggested reassignment action
import { WorkloadBar } from "@/components/charts/workload-bar"
import { MemberAvatar } from "@/components/pm/member-avatar"
import { ProgressRing } from "@/components/pm/progress-ring"

Workload Layout

+--------------------------------------------------+
| Date Range: [Sprint] [Week] [Month]              |
+--------------------------------------------------+
| Member           | Workload                       |
+------------------+--------------------------------+
| [Avatar] Sarah   | ████████ In Progress           |
|                  | ████ In Review                 |
|                  | ██ Todo           [At Capacity]|
+------------------+--------------------------------+
| [Avatar] Mike    | ██████████████ In Progress     |
|                  | ████████ In Review             |
|                  | ██████ Todo       [Overloaded] |
+------------------+--------------------------------+
| [Avatar] Lisa    | ████ In Progress               |
|                  | ██ In Review                   |
|                  | ██ Todo      [Under Capacity]  |
+------------------+--------------------------------+

Data Sources

Data Source Location
Team members teamMembers data/seed.ts
Tasks tasks (grouped by assigneeId) data/seed.ts
Contribution data contributionData data/seed.ts

Next Steps

Previous

Project Structure

Next

Projects