DemoBuy

Goals & Roadmap

Last updated on 2026-03-26

The goals and roadmap module provides strategic planning tools for tracking objectives and key results (OKRs) and visualizing the product roadmap. Both screens are in the (dashboard) route group.

Goals & OKRs

Route: /goals

A goals tracking page for defining objectives and measuring progress through key results.

  • Goal cards -- grid of GoalCard components, each showing goal title, description, owner avatar, status badge (On Track/At Risk/Off Track/Completed), progress percentage with ProgressRing, due date, and key results list
  • Status filter tabs -- pill tabs for All, On Track, At Risk, Off Track, and Completed
  • Create goal button -- opens a dialog form to define a new goal with title, description, owner, due date, and key results
  • Key results -- each goal card expands to show its key results with title, target value, current value, unit label, and a progress bar (current / target)
  • Progress calculation -- goal progress is automatically computed as the average progress of all key results
  • Status indicators -- status is conveyed with color plus icon plus text: green check (On Track), amber alert (At Risk), red x-circle (Off Track), blue check-circle (Completed)
import { GoalCard } from "@/components/pm/goal-card"
import { ProgressRing } from "@/components/pm/progress-ring"
import { MemberAvatar } from "@/components/pm/member-avatar"

Goal Card Anatomy

+----------------------------------------------+
| Increase user engagement         [On Track]  |
| Drive daily active users to 10K by Q2        |
|                                              |
| Owner: [Avatar] Sarah Chen   Due: Jun 30     |
| ██████████████░░░░░░ 68%                     |
|                                              |
| Key Results:                                 |
| - DAU target: 10,000  Current: 6,800  68%   |
|   ████████████████░░░░░░░                    |
| - Session duration: 8min  Current: 6.2min 78%|
|   ██████████████████░░░░░                    |
| - Feature adoption: 60%  Current: 42%  70%   |
|   ████████████████░░░░░░                     |
+----------------------------------------------+

Goal and Key Result Types

The Goal and KeyResult types from types/index.ts:

interface Goal {
  id: string
  title: string
  description: string
  ownerId: string
  status: "On Track" | "At Risk" | "Off Track" | "Completed"
  progress: number
  dueDate: string
  keyResults: KeyResult[]
  createdAt: string
}

interface KeyResult {
  id: string
  title: string
  target: number
  current: number
  unit: string
}

Data Sources

Data Source Location
Goals goals data/seed.ts
Key results Nested in goals[].keyResults data/seed.ts
Team members teamMembers data/seed.ts

Roadmap

Route: /roadmap

A strategic roadmap timeline showing projects and milestones plotted on a quarterly timeline.

  • Quarterly timeline -- horizontal axis divided into quarters (Q1, Q2, Q3, Q4) with month subdivisions
  • Project swimlanes -- each active project gets a horizontal lane showing its tasks and milestones as bars and markers
  • Project bars -- colored horizontal bars representing the project's active date range, using the project's accent color
  • Milestone diamonds -- diamond-shaped markers positioned at milestone dates within each project lane
  • Goal markers -- circular markers indicating goal due dates, color-coded by goal status
  • Zoom controls -- toggle between Quarter and Year view granularity
  • Today line -- red vertical line indicating the current date
  • Filters -- filter by project status (Active, Paused, Archived) and goal status (On Track, At Risk, Off Track, Completed)
  • Legend -- color key explaining bar colors, milestone markers, and goal status indicators
import { GanttChart } from "@/components/timeline/gantt-chart"
import { GanttBar } from "@/components/timeline/gantt-bar"
import { MilestoneMarker } from "@/components/timeline/milestone-marker"
import { TodayMarker } from "@/components/timeline/today-marker"

Roadmap Layout

+--------------------------------------------------+
|              Q1 2026         |    Q2 2026         |
| Jan    Feb    Mar    | Apr    May    Jun          |
+----------+-----------+-----------+----------------+
| Project A                                        |
| ██████████████████████████████                   |
|            [*] v1.0           [*] v1.1           |
+--------------------------------------------------+
| Project B                                        |
|       ██████████████████████████████████████     |
|                [*] Beta      [O] Goal Due        |
+--------------------------------------------------+
| Project C                                        |
|                      ████████████████████        |
|                            [*] Launch            |
+--------------------------------------------------+

Data Sources

Data Source Location
Projects projects data/seed.ts
Milestones milestones data/seed.ts
Goals goals data/seed.ts

Next Steps

Previous

Tasks

Next

Design Tokens