70 lines
3.3 KiB
Markdown
70 lines
3.3 KiB
Markdown
# 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
|