Components
Board Components

Board Components

Components specific to board views and task management.

View Components

TableView

Spreadsheet-like interface for task management.

import { TableView } from '@/components/board/table-view'
 
<TableView 
  board={board}
  tasks={tasks}
  onTaskUpdate={handleTaskUpdate}
/>

Features:

  • Inline cell editing
  • Column resizing
  • Row reordering (drag & drop)
  • Column sorting
  • Cell value components by type

KanbanView

Drag-and-drop cards organized by status.

import { KanbanView } from '@/components/board/kanban-view'
 
<KanbanView 
  board={board}
  tasks={tasks}
/>

Features:

  • Cards organized by status column
  • Drag between status lanes
  • Card preview with key info
  • Add task inline

TimelineView

Gantt-style chart for project planning.

import { TimelineView } from '@/components/board/timeline-view'
 
<TimelineView 
  board={board}
  tasks={tasks}
/>

Features:

  • Tasks as horizontal bars
  • Drag to adjust dates
  • Zoom in/out
  • Group by assignee or group

CalendarView

Date-based task view.

import { CalendarView } from '@/components/board/calendar-view'
 
<CalendarView 
  board={board}
  tasks={tasks}
/>

Features:

  • Month/week view toggle
  • Tasks on due dates
  • Click to create tasks

DashboardView

Charts and analytics.

import { DashboardView } from '@/components/board/dashboard-view'
 
<DashboardView board={board} tasks={tasks} />

Includes:

  • Status distribution chart
  • Priority breakdown
  • Workload by person
  • Completion over time

WorkloadView

Team capacity planning.

import { WorkloadView } from '@/components/board/workload-view'
 
<WorkloadView board={board} tasks={tasks} />

Board Controls

ViewSwitcher

Switch between board views.

import { ViewSwitcher } from '@/components/board/view-switcher'
 
<ViewSwitcher
  currentView={view}
  onViewChange={setView}
/>

BoardHeader

Board title and controls.

import { BoardHeader } from '@/components/board/board-header'
 
<BoardHeader board={board} />

Includes:

  • Board name
  • View switcher
  • Filter button
  • Search
  • Invite button
  • Settings

AddBoardDialog

Create new board dialog.

import { AddBoardDialog } from '@/components/board/add-board-dialog'
 
<AddBoardDialog 
  workspaceId={workspaceId}
  onBoardCreated={handleBoardCreated}
/>

ImportBoardDialog

Import board from spreadsheet.

import { ImportBoardDialog } from '@/components/board/import-board-dialog'
 
<ImportBoardDialog 
  workspaceId={workspaceId}
  onImport={handleImport}
/>

Features:

  • File upload (Excel, CSV)
  • Column mapping UI
  • Preview data
  • Column type selection

InviteModal

Invite team members.

import { InviteModal } from '@/components/board/invite-modal'
 
<InviteModal 
  boardId={boardId}
  onInvite={handleInvite}
/>

Group Components

Group

Container for tasks within a section.

<Group
  group={group}
  tasks={groupTasks}
  columns={columns}
/>

Features:

  • Collapsible
  • Color indicator
  • Task count
  • Drag handle

Task Components

TaskRow

Single row in table view.

<TaskRow
  task={task}
  columns={columns}
  onUpdate={handleUpdate}
/>

TaskCard

Card for kanban view.

<TaskCard
  task={task}
  onClick={handleClick}
/>

TaskDetailsPanel

Side panel for task editing.

<TaskDetailsPanel
  task={task}
  onClose={handleClose}
/>

Sections:

  • Title & status
  • Assignees
  • Due date
  • Description
  • Subtasks
  • Comments
  • Time tracking
  • Files
  • Activity

Column Components

ColumnHeader

Table column header with controls.

<ColumnHeader
  column={column}
  onSort={handleSort}
  onResize={handleResize}
/>

ColumnConfigDialog

Column settings dialog.

<ColumnConfigDialog
  column={column}
  onUpdate={handleUpdate}
/>

Cell Components

Dynamic cell rendering based on column type:

// Status cell
<StatusCell value={task.status} onChange={handleChange} />
 
// Person cell
<PersonCell assignees={task.assignees} onChange={handleChange} />
 
// Date cell
<DateCell value={task.dueDate} onChange={handleChange} />
 
// Priority cell
<PriorityCell value={task.priority} onChange={handleChange} />
UI ComponentsOverview