DemoBuy

Cycles & Modules

Last updated on 2026-03-26

The cycles and modules system provides time-boxed (cycles/sprints) and scope-based (modules) organization for project tasks, along with a pages/wiki feature for project documentation. These features can be individually toggled on or off per project via project settings. All screens are nested under projects/[id]/ in the (dashboard) route group.

Cycles List

Route: /projects/[id]/cycles

A directory of all sprint cycles for a project, showing their status, progress, and key metrics.

  • Cycle cards -- grid of CycleCard components, each showing cycle name, date range (start to end), status badge (Active/Upcoming/Completed), task count, progress bar (completed vs total), planned points, completed points, and velocity
  • Status filter tabs -- pill tabs for All, Active, Upcoming, and Completed
  • Create cycle button -- opens a dialog form to create a new cycle with name, description, start date, and end date
  • Active cycle highlight -- the active cycle card has a highlighted border using the primary color and appears first in the list
  • Timeline bar -- each card shows a horizontal date range bar indicating where the cycle falls relative to the current date
import { CycleCard } from "@/components/pm/cycle-card"
import { DateBadge } from "@/components/pm/date-badge"
import { ProgressRing } from "@/components/pm/progress-ring"

Cycle Card Anatomy

+------------------------------------------+
| Sprint 5                        [Active] |
| Mar 10, 2026 - Mar 24, 2026             |
|                                          |
| 12 tasks    ████████░░░ 72%             |
| Planned: 48 pts  Completed: 34 pts      |
| Velocity: 34                             |
+------------------------------------------+

Data Sources

Data Source Location
Cycles cycles (filtered by projectId) data/seed.ts
Tasks tasks (filtered by cycleId) data/seed.ts

Cycle Detail

Route: /projects/[id]/cycles/[cycleId]

A comprehensive view of an individual sprint cycle with task management, burndown charts, and progress tracking.

  • Cycle header -- cycle name, date range, status badge, days remaining countdown, and progress percentage
  • Task list -- TaskRow components for all tasks in this cycle, with inline status and priority editing
  • Burndown chart -- Recharts AreaChart showing ideal burndown line vs actual remaining work over the sprint duration; uses the BurndownChart component
  • Burnup chart -- alternative view using BurnupChart showing scope (total), completed work, and ideal completion line
  • Stats row -- four StatsCard components: Total Points, Completed Points, Remaining Points, and Velocity
  • Scope changes -- callout card showing tasks added or removed after the sprint started, with timestamps
  • Add tasks -- "Add to Cycle" button that opens a dialog showing backlog tasks available to add
  • Remove tasks -- context menu on task rows with "Remove from Cycle" action
import { TaskRow } from "@/components/task/task-row"
import { BurndownChart } from "@/components/charts/burndown"
import { BurnupChart } from "@/components/charts/burnup"
import { StatsCard } from "@/components/pm/stats-card"
import { DateBadge } from "@/components/pm/date-badge"

Cycle Detail Layout

+--------------------------------------------------+
| Sprint 5                    [Active] 5 days left |
| Mar 10 - Mar 24, 2026      ████████░░░ 72%      |
+----------+----------+----------+---------+-------+
| Total    | Completed| Remaining| Velocity|       |
| 48 pts   | 34 pts   | 14 pts   | 34      |       |
+----------+----------+----------+---------+-------+
| Burndown Chart              | Burnup Chart       |
| (area chart)                | (area chart)       |
+-----------+-----------------+--------------------+
| Task                | Status  | Priority | Est.  |
+---------------------+---------+----------+-------+
| KAN-12 Setup auth   | Done    | High     | 5     |
| KAN-13 API routes   | In Prog | Medium   | 3     |
| KAN-14 Dashboard    | Todo    | High     | 8     |
+---------------------+---------+----------+-------+

Burndown Chart

The burndown chart plots two lines against the sprint timeline:

  • Ideal line -- straight diagonal from total points on day 1 to zero on the last day
  • Actual line -- step-down curve showing remaining points at the end of each day
  • Scope line -- dashed line showing total scope, which may increase if tasks are added mid-sprint
import { BurndownChart } from "@/components/charts/burndown"

<BurndownChart data={burndownData} />

The BurndownPoint type from types/index.ts:

interface BurndownPoint {
  date: string
  ideal: number
  actual: number
  scope: number
}

Data Sources

Data Source Location
Cycle cycles (by cycleId) data/seed.ts
Tasks tasks (filtered by cycleId) data/seed.ts
Burndown data burndownData data/seed.ts
Velocity data velocityData data/seed.ts

Modules List

Route: /projects/[id]/modules

A directory of feature modules that group related tasks by scope or area.

  • Module cards -- grid of ModuleCard components, each showing module name, description, status badge (Planned/Active/Completed), lead avatar, date range, task count, and completion progress bar
  • Status filter tabs -- pill tabs for All, Planned, Active, and Completed
  • Create module button -- opens a dialog form to create a new module with name, description, lead, start date, and end date
  • Progress summary -- each card shows completed tasks vs total tasks with a percentage indicator
import { ModuleCard } from "@/components/pm/module-card"
import { MemberAvatar } from "@/components/pm/member-avatar"
import { ProgressRing } from "@/components/pm/progress-ring"

Module Card Anatomy

+------------------------------------------+
| Auth & Authorization           [Active]  |
| User authentication, roles, permissions  |
|                                          |
| Lead: [Avatar] Sarah Chen                |
| Mar 1 - Mar 31, 2026                    |
| 8 tasks    ██████░░░░ 62%               |
+------------------------------------------+

Data Sources

Data Source Location
Modules modules (filtered by projectId) data/seed.ts
Tasks tasks (filtered by moduleId) data/seed.ts
Team members teamMembers data/seed.ts

Module Detail

Route: /projects/[id]/modules/[moduleId]

A detailed view of an individual module with task management and progress tracking.

  • Module header -- module name, description, status badge, lead avatar, and date range
  • Task list -- TaskRow components for all tasks in this module, with inline status and priority editing
  • Progress section -- completion percentage, tasks by status breakdown bar, and estimated vs completed points
  • Add tasks -- "Add to Module" button to assign existing project tasks to this module
  • Remove tasks -- context menu on task rows with "Remove from Module" action
import { TaskRow } from "@/components/task/task-row"
import { StatsCard } from "@/components/pm/stats-card"
import { MemberAvatar } from "@/components/pm/member-avatar"

Data Sources

Data Source Location
Module modules (by moduleId) data/seed.ts
Tasks tasks (filtered by moduleId) data/seed.ts
Team members teamMembers data/seed.ts

Pages / Wiki

Route: /projects/[id]/pages

A project wiki for documentation, meeting notes, specs, and reference material.

  • Pages list -- list of Page entries showing title, author avatar, last updated timestamp, and a tree structure for nested pages (pages with parentId)
  • Create page -- "New Page" button opens a page editor with title input and rich-text content area
  • Page hierarchy -- pages can be nested under parent pages, displayed as a collapsible tree in the sidebar
  • Search -- text input to filter pages by title or content

Page Detail

Route: /projects/[id]/pages/[pageId]

  • Page header -- title, author avatar, created date, and last updated date
  • Content area -- rendered markdown/text content
  • Edit mode -- "Edit" button switches to an editable textarea with save/cancel actions
  • Breadcrumbs -- if the page is nested, breadcrumbs show the parent page hierarchy
import { Page } from "@/types"

The Page type from types/index.ts:

interface Page {
  id: string
  projectId: string
  title: string
  content: string
  authorId: string
  parentId: string | null
  createdAt: string
  updatedAt: string
}

Data Sources

Data Source Location
Pages pages (filtered by projectId) data/seed.ts
Team members teamMembers data/seed.ts

Next Steps

  • Tasks -- task detail, comments, and subtasks
  • Board & Views -- Kanban board, list, backlog, calendar, timeline
  • Goals & Roadmap -- goals, OKRs, and strategic roadmap

Previous

Board & Views

Next

Tasks