feat(#17): Implement Kanban board view #113

Closed
jason.woltje wants to merge 0 commits from feature/17-kanban into develop
Owner

Summary

Implements a Kanban board component with drag-and-drop task management.

Components

  • KanbanBoard.tsx - Main board with dnd-kit integration
  • KanbanColumn.tsx - Droppable status columns
  • TaskCard.tsx - Draggable task cards

Features

  • 4 status columns: To Do, In Progress, Review, Done
  • Drag-and-drop between columns (calls PATCH /api/tasks/:id)
  • Task cards show: title, priority badge, assignee avatar, due date
  • Visual feedback during drag
  • Responsive grid (1→2→4 columns)
  • Empty state messaging

Dependencies Added

  • @dnd-kit/core
  • @dnd-kit/sortable
  • @dnd-kit/utilities

Tests

  • 15/16 tests passing
  • Covers rendering, drag-drop, accessibility

QA Checklist

  • Drag between columns works
  • Status updates via API
  • Priority badges colored correctly
  • Responsive on mobile

Closes #17

## Summary Implements a Kanban board component with drag-and-drop task management. ## Components - `KanbanBoard.tsx` - Main board with dnd-kit integration - `KanbanColumn.tsx` - Droppable status columns - `TaskCard.tsx` - Draggable task cards ## Features - 4 status columns: To Do, In Progress, Review, Done - Drag-and-drop between columns (calls PATCH /api/tasks/:id) - Task cards show: title, priority badge, assignee avatar, due date - Visual feedback during drag - Responsive grid (1→2→4 columns) - Empty state messaging ## Dependencies Added - @dnd-kit/core - @dnd-kit/sortable - @dnd-kit/utilities ## Tests - 15/16 tests passing - Covers rendering, drag-drop, accessibility ## QA Checklist - [ ] Drag between columns works - [ ] Status updates via API - [ ] Priority badges colored correctly - [ ] Responsive on mobile Closes #17
jason.woltje added 2 commits 2026-01-30 02:36:50 +00:00
jason.woltje added 1 commit 2026-01-30 02:50:57 +00:00
- Add explicit JSX.Element return types to all Kanban components
- Add explicit void return type to handleDragStart
- Add explicit Promise<void> return type to handleDragEnd (async)
- Import React for JSX namespace access
- Complies with typescript.md: explicit return types REQUIRED

Components updated:
- KanbanBoard.tsx
- KanbanColumn.tsx
- TaskCard.tsx

Per code review checklist (code-review.md section 4a):
✓ NO any types
✓ Explicit return types on all exported functions
✓ Explicit parameter types
✓ Interfaces for props
✓ Proper event handler types
jason.woltje closed this pull request 2026-01-30 03:04:04 +00:00

Pull request closed

Sign in to join this conversation.