Analytics & Planning

Last updated on 2026-09-07

The kit includes comprehensive analytics and planning tools across four top-level routes: the workspace analytics dashboard, the project-level analytics page, the roadmap timeline, and the team workload view. All data comes from Supabase via the analytics.ts Server Actions.

Workspace Analytics

Route: /analytics

The workspace-level analytics page provides a birds-eye view of all tasks across all projects. Charts are powered by Recharts and styled with the kit's CSS variable tokens.

Date Range Filter

A button group in the page header lets you switch between 7-day, 30-day, and 90-day windows. The selected range controls which data is displayed.

Charts

Chart	Type	Data Source	Description
Tasks Created vs Completed	Area chart	`daily_metrics` table	Two stacked areas showing daily created and completed task counts over time
Issues by Status	Donut chart	`tasks.status` aggregation	Pie chart with inner ring showing task distribution across Backlog, Todo, In Progress, In Review, Done, Cancelled
Issues by Priority	Horizontal bar	`tasks.priority` aggregation	Bar chart showing task counts per priority level (Urgent, High, Medium, Low, None) with color-coded bars
Velocity per Sprint	Grouped bar	`velocity_points` table	Side-by-side bars showing planned vs completed story points per sprint
Average Cycle Time	Line chart	Derived from daily metrics	Line chart tracking average days to complete tasks over time
Cumulative Flow	Stacked area	`cumulative_flow_points` table	Five stacked areas (Done, In Review, In Progress, Todo, Backlog) showing how tasks flow through statuses over time

Status Colors

The analytics page uses consistent status colors across all charts:

Status	Color
Backlog	`#94a3b8`
Todo	`#8b5cf6`
In Progress	`#f59e0b`
In Review	`#3b82f6`
Done	`#22c55e`
Cancelled	`#ef4444`

Priority Colors

Priority	Color
Urgent	`#ef4444`
High	`#f97316`
Medium	`#eab308`
Low	`#3b82f6`
None	`#6b7280`

Team Contribution Table

Below the charts, a data table shows each team member's contribution:

Member avatar, name, and title
Tasks completed count
Average cycle time in days
Sorted by completed tasks (descending)

Analytics Data Sources

Data	Server Action	Table
Daily metrics	`getDailyMetrics(projectId?, days)`	`daily_metrics`
Velocity data	`getVelocityData(projectId)`	`velocity_points`
Cumulative flow	`getCumulativeFlowData(projectId, days)`	`cumulative_flow_points`
Status distribution	`getStatusDistribution(projectId?)`	`tasks` (grouped by status)
Priority distribution	`getPriorityDistribution(projectId?)`	`tasks` (grouped by priority)
Contribution data	`getContributionData(projectId?)`	`contribution_data`

Project Analytics

Route: /projects/[id]/analytics

A project-specific analytics page showing the same charts filtered to a single project. The Server Actions accept an optional projectId parameter to scope the data.

Dashboard

Route: / (root dashboard)

The main dashboard provides a high-level overview:

KPI stat cards -- total tasks, completed tasks, in-progress tasks, overdue tasks, projects count, active members count (all from getDashboardStats())
Recent activity feed -- latest activities from the activities table with user avatars and timestamps
Status distribution -- quick view of task status breakdown

Dashboard Stats

The getDashboardStats Server Action runs six aggregate queries against Supabase:

// getDashboardStats in lib/actions/analytics.ts
{
  totalTasks,       // count(*) from tasks
  completedTasks,   // count(*) from tasks where status = 'Done'
  inProgressTasks,  // count(*) from tasks where status = 'In Progress'
  overdueTasks,     // count(*) from tasks where due_date < now() and status not in (Done, Cancelled)
  projectsCount,    // count(*) from projects
  membersCount,     // count(*) from profiles where status = 'Active'
}

Burndown Chart

Data source: burndown_points table, fetched via getBurndownData(cycleId)

The burndown chart tracks work remaining in a sprint cycle:

Ideal line -- straight line from total scope to zero across the sprint duration
Actual line -- actual remaining work based on completed task estimates
Scope line -- total scope, which may increase if tasks are added mid-sprint
Data points -- one row per day of the sprint

Roadmap

Route: /roadmap

A portfolio-level Gantt timeline showing all projects as horizontal bars with milestones.

Time Scale

A toggle group lets you switch between week, month, and quarter views. The timeline spans from 1 month in the past to 5 months in the future.

Project Bars

Each project row shows:

Project label -- emoji, name, completion count (e.g., "12/48 done"), and status badge (Active/Paused/Archived)
Gantt bar -- horizontal bar spanning from the earliest task date to the latest, color-coded with the project's color and showing a progress fill based on completion percentage
Project prefix -- displayed inside the bar
Milestones -- diamond markers on the timeline at milestone dates, filled green when completed

Today Marker

A vertical red line marks the current date across all project rows.

Milestone Data

Milestones are fetched from the milestones table and positioned on the timeline:

Property	Description
Name	Milestone name
Date	Target date
Completed	Boolean, shown as filled green diamond when true

Roadmap Computation

Project bar positions are calculated from actual task dates:

// roadmap/page-client.tsx
const projectBars = projects.map(project => {
  const projectTasks = tasks.filter(t => t.projectId === project.id && t.status !== "Cancelled")
  const taskDates = projectTasks.flatMap(t => {
    const dates = []
    if (t.startDate) dates.push(new Date(t.startDate))
    if (t.dueDate) dates.push(new Date(t.dueDate))
    if (dates.length === 0) dates.push(new Date(t.createdAt))
    return dates
  })
  const earliest = new Date(Math.min(...taskDates.map(d => d.getTime())))
  const latest = new Date(Math.max(...taskDates.map(d => d.getTime())))
  // ...
})

Team Workload

Route: /workload

A workload heatmap showing how tasks are distributed across team members, with capacity alerts.

Summary Stats

Three KPI cards at the top:

Stat	Description
Active Members	Count of team members with status `Active`
Avg Tasks / Member	Average open tasks per active member
Over Capacity	Number of members with 5+ open tasks

Workload Bar Chart

A stacked horizontal bar chart (WorkloadBar component) showing each team member's task count broken down by priority.

Team Capacity Detail

Each team member gets a row showing:

Avatar and info -- name and job title
Stacked bar -- colored segments for Urgent (red), High (orange), Medium (yellow), Low (blue) tasks
Task count -- total number of open tasks
Capacity badge -- one of three statuses:
- Over capacity (red) -- 5 or more open tasks
- Balanced (green) -- 2-4 open tasks
- Under capacity (blue) -- 0-1 open tasks

Workload Calculation

// workload-client.tsx
const memberTasks = tasks.filter(t =>
  t.assigneeId === member.id &&
  t.status !== "Done" &&
  t.status !== "Cancelled"
)

function getCapacityStatus(taskCount: number): CapacityStatus {
  if (taskCount >= 5) return "over"
  if (taskCount <= 1) return "under"
  return "balanced"
}

Priority Bar Colors

Priority	Tailwind Class
Urgent	`bg-destructive`
High	`bg-chart-2`
Medium	`bg-warning`
Low	`bg-info`
None	`bg-muted-foreground`

Next Steps

Boards & Tasks -- Kanban board, task views, and task detail
Sprints & Modules -- sprint cycles, modules, goals, and wiki pages
Server Actions -- complete Server Action reference

Sprints & Modules

Server Actions