DemoBuy

Tasks

Last updated on 2026-03-26

Tasks are the fundamental work unit in the Kanban PM Kit. Each task belongs to a project and can optionally be assigned to a cycle and/or module. The task system includes a comprehensive detail view, a Zod-validated creation/editing form, threaded comments, and hierarchical subtasks. Task screens are nested under projects/[id]/tasks/ in the (dashboard) route group.

Task Detail

Route: /projects/[id]/tasks/[taskId]

A full-page view of an individual task with all metadata, a comment thread, and a subtask list.

  • Task header -- task ID badge (e.g. KAN-42), title, status badge with color indicator, and priority icon
  • Description -- markdown-rendered task description
  • Subtask list -- hierarchical SubtaskList component showing child tasks with checkbox toggles, titles, assignee avatars, and due dates; progress bar showing completed vs total subtasks
  • Comment thread -- chronological CommentThread of TaskComment entries with author avatar, name, timestamp, and content; add comment form at the bottom with textarea and submit button
  • Task detail sidebar -- right-side TaskDetailSidebar panel with editable metadata fields:
    • Status -- StatusSelect dropdown (Backlog, Todo, In Progress, In Review, Done, Cancelled)
    • Priority -- PrioritySelect dropdown (Urgent, High, Medium, Low, None)
    • Assignee -- MemberSelect dropdown to assign or reassign the task
    • Labels -- multi-select label picker showing LabelBadge components
    • Due date -- date picker for the task deadline
    • Start date -- date picker for when work begins
    • Cycle -- displays the assigned cycle name (if any) with link to cycle detail
    • Module -- displays the assigned module name (if any) with link to module detail
    • Estimate -- numeric input for story points or time estimate
    • Created -- read-only timestamp
    • Updated -- read-only timestamp
import { TaskDetailSidebar } from "@/components/task/task-detail-sidebar"
import { CommentThread } from "@/components/task/comment-thread"
import { SubtaskList } from "@/components/task/subtask-list"
import { TaskIdBadge } from "@/components/task/task-id-badge"
import { TaskStatus } from "@/components/task/task-status"
import { TaskPriority } from "@/components/task/task-priority"
import { TaskLabels } from "@/components/task/task-labels"
import { StatusSelect } from "@/components/pm/status-select"
import { PrioritySelect } from "@/components/pm/priority-select"
import { MemberSelect } from "@/components/pm/member-select"

Task Detail Layout

+-----------------------------------+------------------+
| [KAN-42] Implement search feature | Status           |
| [In Progress]  [!! High]         | [In Progress v]  |
+-----------------------------------+ Priority         |
| Description                       | [High v]         |
| Implement full-text search across | Assignee         |
| all tasks with filters for status,| [Sarah Chen v]   |
| priority, and labels. Support     | Labels           |
| keyboard shortcuts...             | [Bug] [Frontend] |
+-----------------------------------+ Due Date         |
| Subtasks (2/4 completed)          | [Mar 25, 2026]   |
| [x] Design search UI             | Start Date       |
| [x] Build search index            | [Mar 18, 2026]   |
| [ ] Add keyboard shortcuts        | Cycle            |
| [ ] Write tests                   | Sprint 5         |
| ████████░░░░ 50%                  | Module           |
+-----------------------------------+ Auth & Authz     |
| Comments                          | Estimate         |
| [Avatar] Sarah Chen  2h ago      | [5] pts          |
| "Added the search index, working  | Created          |
| on keyboard shortcuts next."      | Mar 15, 2026     |
|                                   | Updated          |
| [Avatar] Mike Lee  1h ago        | 2 hours ago      |
| "Should we support regex?"        |                  |
|                                   |                  |
| [Add a comment...]                |                  |
+-----------------------------------+------------------+

Task Types

The Task interface from types/index.ts:

interface Task {
  id: string
  projectId: string
  number: number
  title: string
  description: string
  status: TaskStatusType
  priority: TaskPriorityLevel
  assigneeId: string | null
  labels: string[]
  dueDate: string | null
  startDate: string | null
  createdAt: string
  updatedAt: string
  cycleId: string | null
  moduleId: string | null
  estimate: number | null
  parentId: string | null
  subtasks: Subtask[]
  commentIds: string[]
}

Task Status Values

Status Category Color Description
Backlog backlog gray Not yet prioritized
Todo unstarted blue Prioritized, ready to start
In Progress started amber Actively being worked on
In Review started purple Under review or QA
Done completed green Completed
Cancelled cancelled red Will not be done

Task Priority Levels

Priority Color Icon Description
Urgent red AlertTriangle Critical, needs immediate attention
High orange ArrowUp Important, should be done soon
Medium yellow Minus Normal priority
Low blue ArrowDown Can be done when time allows
None gray Minus (muted) No priority set

Data Sources

Data Source Location
Task tasks (by taskId) data/seed.ts
Comments taskComments (filtered by taskId) data/seed.ts
Team members teamMembers data/seed.ts
Labels taskLabels data/seed.ts
Cycles cycles data/seed.ts
Modules modules data/seed.ts

Task Form

The task creation and editing form is used both in the task detail page (edit mode) and via a dialog from the Kanban board or list view. It uses Zod validation.

  • Title -- required text input
  • Description -- textarea with markdown support
  • Status -- StatusSelect dropdown
  • Priority -- PrioritySelect dropdown
  • Assignee -- MemberSelect dropdown
  • Labels -- multi-select label picker
  • Due date -- date picker
  • Start date -- date picker
  • Estimate -- numeric input for story points
  • Subtasks -- repeatable row group with title, assignee, and due date; add/remove buttons
import { TaskForm } from "@/components/task/task-form"

Validation Schema

const taskSchema = z.object({
  title: z.string().min(1, "Task title is required"),
  description: z.string().optional(),
  status: z.enum(["Backlog", "Todo", "In Progress", "In Review", "Done", "Cancelled"]),
  priority: z.enum(["Urgent", "High", "Medium", "Low", "None"]),
  assigneeId: z.string().nullable(),
  labels: z.array(z.string()),
  dueDate: z.string().nullable(),
  startDate: z.string().nullable(),
  estimate: z.number().nullable(),
  subtasks: z.array(z.object({
    title: z.string().min(1),
    assigneeId: z.string().nullable(),
    dueDate: z.string().nullable(),
  })),
})

Comment Thread

The CommentThread component renders a chronological list of comments on a task.

  • Comment entries -- each comment shows author avatar (via MemberAvatar), author name, relative timestamp (via date-fns formatDistanceToNow), and content text
  • Add comment form -- textarea at the bottom with a "Comment" submit button
  • Empty state -- message when no comments exist yet
import { CommentThread } from "@/components/task/comment-thread"

The TaskComment type from types/index.ts:

interface TaskComment {
  id: string
  taskId: string
  authorId: string
  content: string
  createdAt: string
  updatedAt: string
}

Subtask List

The SubtaskList component renders a checklist of child tasks within a parent task.

  • Checkbox toggle -- clicking the checkbox marks the subtask as completed or incomplete
  • Subtask rows -- each row shows a checkbox, title, assignee avatar (if assigned), and due date badge
  • Progress bar -- horizontal bar at the top showing completed vs total subtasks
  • Add subtask -- "Add subtask" button appends a new inline input row
  • Reorder -- drag handle on each row for reordering subtasks within the list
import { SubtaskList } from "@/components/task/subtask-list"

The Subtask type from types/index.ts:

interface Subtask {
  id: string
  title: string
  completed: boolean
  assigneeId: string | null
  dueDate: string | null
}

Next Steps

Previous

Cycles & Modules

Next

Goals & Roadmap