jordan/foundary-test-1770773605
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
fd7949cb18
foundary-test-1770773605/.sdlc/features/task-management-ui/spec.md
rdev-worker fd7949cb18
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details
build: /design-feature task-management-ui
2026-02-11 02:25:45 +00:00

3.3 KiB
Raw Blame History

Feature: Task Management UI

Problem Statement

The studio application has a static placeholder dashboard with no real functionality. The data-models feature provides backend REST APIs for Projects, Tasks, Labels, and Assignments, but there is no frontend to interact with them. Users need a task management interface in studio-ui to create and manage projects, organize tasks with statuses and priorities, and assign work — all through an intuitive board/list UI built on the shared design system.

User Stories

  • As a user, I want to see a list of my projects so I can navigate between them.
  • As a user, I want to create, edit, and delete projects so I can organize my work.
  • As a user, I want to see tasks within a project organized by status (todo, in_progress, done) so I can track progress.
  • As a user, I want to create, edit, and delete tasks within a project so I can manage work items.
  • As a user, I want to set task priority (low, medium, high) so I can focus on what matters.
  • As a user, I want to assign and unassign people to tasks so I can distribute work.
  • As a user, I want to create and manage labels within a project so I can categorize work.
  • As a user, I want the UI to use the shared design system (dark theme, CSS variables) so it looks consistent.

Acceptance Criteria

Navigation & Routing

  • React Router routes: /projects, /projects/:id, /projects/:id/settings
  • Sidebar navigation includes "Projects" item with icon
  • Breadcrumb navigation within project views

Project List Page (/projects)

  • Displays all projects as cards in a grid layout
  • Each card shows name, description, status badge, task count
  • "New Project" button opens a create dialog
  • Project cards link to project detail view

Project Detail Page (/projects/:id)

  • Header with project name, status, and action buttons (edit, delete)
  • Task board view with columns: Todo, In Progress, Done
  • Each task card shows title, priority badge, assignees
  • "Add Task" button opens create task dialog
  • Labels section showing project labels

CRUD Dialogs

  • Create/Edit Project dialog: name (required), description (optional)
  • Create/Edit Task dialog: title (required), description, priority selector, status selector
  • Create Label dialog: name (required), color picker
  • Delete confirmation dialogs for destructive actions

API Integration

  • Uses @foundary-test-1770773605/api-client for all API calls
  • Proper loading states during API calls
  • Error handling with user-friendly messages
  • Optimistic UI updates where appropriate

Responsive Design

  • Works on desktop (1024px+) and tablet (768px+)
  • Task board scrolls horizontally on smaller screens

Dependencies

  • data-models feature (backend APIs for Projects, Tasks, Labels, Assignments)
  • @foundary-test-1770773605/ui (shared component library)
  • @foundary-test-1770773605/layout (dashboard shell)
  • @foundary-test-1770773605/api-client (typed HTTP client)
  • react-router-dom (client-side routing)

Out of Scope

  • Drag-and-drop task reordering (future feature)
  • Real-time updates via WebSockets
  • Pagination or infinite scroll
  • Advanced filtering/search within tasks
  • Task-label association UI (backend not implemented yet)
  • Authentication/login UI