Tasks

Tasks are the individual work items within a board. They contain all the information needed to track and complete work.

Task Properties

Property	Type	Description
`id`	string	Unique identifier
`boardId`	string	Parent board
`groupId`	string	Parent group
`name`	string	Task title
`description`	string	Detailed description
`status`	enum	done, working, stuck, pending, review
`priority`	enum	critical, high, medium, low
`assignees`	string[]	Assigned user IDs
`dueDate`	Date	Due date
`startDate`	Date	Start date
`endDate`	Date	End date
`columnValues`	object	Custom column data

Creating Tasks

Via Table View

Click in an empty row within a group
Type the task name
Press Enter to create

Via API

POST /api/tasks
Content-Type: application/json
 
{
  "boardId": "board-id",
  "groupId": "group-id",
  "name": "Implement new feature",
  "status": "pending",
  "priority": "high",
  "assignees": ["user-id"],
  "dueDate": "2025-01-15"
}

Task Details Panel

Click on a task to open the details panel:

Header - Task name (editable)
Status & Priority - Quick update dropdowns
Assignees - Add/remove team members
Due Date - Date picker
Description - Rich text area
Subtasks - Nested checklist
Comments - Discussion thread
Time Tracking - Timer and entries
Files - Attachments
Activity - Change history

Subtasks

Break down tasks into smaller steps:

interface Subtask {
  id: string
  name: string
  completed: boolean
  subtasks?: Subtask[]  // Supports nesting
}

Add Subtask

Open task details
Click + Add Subtask
Enter subtask name

Nested Subtasks

Subtasks can contain their own subtasks for complex work breakdown:

Task: "Launch Feature"
├── Subtask: "Development"
│   ├── Subtask: "Backend API"
│   └── Subtask: "Frontend UI"
├── Subtask: "Testing"
│   ├── Subtask: "Unit tests"
│   └── Subtask: "E2E tests"
└── Subtask: "Documentation"

Comments

Collaborate with your team through comments:

interface Comment {
  id: string
  userId: string
  content: string
  mentions?: string[]  // Mentioned user IDs
  createdAt: Date
}

Add Comment

// Via store action
const addComment = useAppStore((s) => s.addComment)
addComment(taskId, "This looks great! @john", ["john-user-id"])

Mentions

Type @ to mention team members. They'll receive a notification.

Dependencies

Link tasks that depend on each other:

POST /api/tasks/[id]/dependencies
Content-Type: application/json
 
{
  "dependsOn": "other-task-id"
}

Dependencies are visualized in Timeline view.

File Attachments

Attach files to tasks:

interface FileAttachment {
  id: string
  name: string
  type: string        // MIME type
  size: number        // Bytes
  url: string         // Download URL
  uploadedBy: string
  createdAt: Date
}

Supported operations:

Upload - Drag & drop or click to select
Preview - View images and PDFs inline
Download - Direct download link
Delete - Remove attachment

Drag and Drop

Tasks support drag and drop using dnd-kit:

Reorder within the same group
Move between groups
Kanban - Drag between status columns

import { 
  DndContext, 
  useDraggable, 
  useDroppable 
} from '@dnd-kit/core'
 
function DraggableTask({ task }) {
  const { attributes, listeners, setNodeRef, transform } = 
    useDraggable({ id: task.id })
  
  return (
    <div ref={setNodeRef} {...attributes} {...listeners}>
      {task.name}
    </div>
  )
}

API Reference

Create Task

POST /api/tasks
Content-Type: application/json
 
{
  "boardId": "board-id",
  "groupId": "group-id",
  "name": "Task name",
  "status": "pending",
  "priority": "medium"
}

Update Task

PATCH /api/tasks/[id]
Content-Type: application/json
 
{
  "name": "Updated name",
  "status": "working",
  "assignees": ["user-1", "user-2"]
}

Delete Task

DELETE /api/tasks/[id]

Move Task

PATCH /api/tasks/[id]/move
Content-Type: application/json
 
{
  "groupId": "new-group-id"
}

Store Usage

import { useAppStore } from '@/lib/store'
 
// Get tasks for current board
const tasks = useAppStore((s) => 
  s.tasks.filter(t => t.boardId === s.selectedBoardId)
)
 
// Task actions
const addTask = useAppStore((s) => s.addTask)
const updateTask = useAppStore((s) => s.updateTask)
const deleteTask = useAppStore((s) => s.deleteTask)
const moveTask = useAppStore((s) => s.moveTask)
const duplicateTask = useAppStore((s) => s.duplicateTask)
const addComment = useAppStore((s) => s.addComment)
 
// Create task
addTask({
  boardId: 'board-id',
  groupId: 'group-id', 
  name: 'New task',
  status: 'pending',
  priority: 'medium'
})
 
// Update status
updateTask(taskId, { status: 'done' })
 
// Move to different group
moveTask(taskId, 'new-group-id')

Boards Column Types