indigo/LinkDesk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Init Repo

Browse Source
This commit is contained in:
indigo
2026-02-28 03:22:04 +08:00
commit de59b57ee7
883 changed files with 156857 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.kiro/specs/vfx-project-management/asset-detail-panel-spec.md
+253
View File
@@ -0,0 +1,253 @@
# Asset Detail Panel Specification
## Overview
This document describes the addition of an Asset Detail Panel feature to the VFX Project Management System. The feature provides a comprehensive view of asset information organized into tabs, similar to the existing Shot Detail Panel.
## Requirement Added
### Requirement 26: Asset Detail Panel
**User Story:** As a user, I want to view detailed asset information with organized tabs when I select an asset in the asset browser, so that I can access all asset-related data including tasks, notes, and references in one place.
**Location in Requirements:** Added after Requirement 25 in `requirements.md`
**Acceptance Criteria:**
1. Asset detail panel displays when clicking asset card
2. Header shows asset metadata (name, category, status, description)
3. Tasks tab displays all asset tasks
4. Notes tab displays production notes
5. References tab for reference files
6. Versions tab for version history
7. Progress overview shows task completion statistics
8. Panel can be closed to return to asset browser
9. Tasks load automatically when Tasks tab is selected
10. Role-based permissions for actions
11. Slide-in panel from right side
12. Asset browser state maintained when panel opens/closes
## Design Added
### Asset Detail Panel Design
**Location in Design:** Added after Shot Detail Panel Design in `design.md`
**Layout Structure:**
1. **Header Section**: Asset name, category badge, status badge, action menu
2. **Asset Information**: Description, creation date, last updated date
3. **Progress Overview**: Visual progress bar and task status summary
4. **Tabbed Content Area**: Four tabs (Tasks, Notes, References, Versions)
**Tab Specifications:**
1. **Tasks Tab (Default)**
- Lists all asset tasks
- Task cards with status, assignment, deadlines
- "Add Task" button (coordinators/admins)
- Opens task detail panel on click
- Icon: ListTodo
2. **Notes Tab**
- Production notes and comments
- Threaded notes with timestamps
- "Add Note" button (coordinators/admins)
- Icon: MessageSquare
3. **References Tab**
- Reference files gallery
- "Upload Reference" button (all users)
- File preview, download, delete
- Icon: Image
4. **Versions Tab**
- Asset version history
- "Publish Version" button (artists/coordinators/admins)
- Version comparison and download
- Icon: History
**Permission Model:**
- Add Task: Coordinators & Admins
- Add Note: Coordinators & Admins
- Upload Reference: All Users
- Publish Version: Artists, Coordinators & Admins
- Edit Asset: Coordinators & Admins
- Delete Asset: Coordinators & Admins
**User Experience:**
- Default tab is "Tasks"
- Progress overview always visible
- Smooth tab transitions
- Empty states with guidance
- Role-based action buttons
- Slides in from right
- Maintains asset browser state
## Tasks Added
### Task 26: Implement Asset Detail Panel
**Location in Tasks:** Added after Task 22 (Project Thumbnail) in `tasks.md`
**Main Task:**
- Task 26: Implement asset detail panel with tabbed interface
**Subtasks:**
1. **26.1 Create AssetDetailPanel component structure**
- Create component file
- Implement header with badges
- Add asset information section
- Add progress overview
- Implement tabbed interface
- Add close functionality
- Implement slide-in animation
2. **26.2 Implement Tasks tab**
- Set as default tab
- Integrate TaskList component
- Load tasks with asset_id filter
- Add "Add Task" button
- Handle task selection
- Add loading/error states
- Display empty state
3. **26.3 Implement Notes tab**
- Create notes display
- Add "Add Note" button
- Display threaded notes
- Implement note creation
- Add loading/empty states
4. **26.4 Implement References tab**
- Create reference gallery
- Add "Upload Reference" button
- Implement file upload
- Display with thumbnails
- Add preview/download/delete
- Add loading/empty states
5. **26.5 Implement Versions tab**
- Create version history display
- Add "Publish Version" button
- Display version list
- Implement version comparison
- Add download feature
- Add loading/empty states
6. **26.6 Integrate with AssetBrowser**
- Handle asset card clicks
- Manage panel state
- Update URL with asset ID
- Maintain browser state
- Handle back button
- Ensure proper layering
7. **26.7 Add role-based permissions**
- Check permissions for all action buttons
- Hide/disable based on user role
8. **26.8 Add tests** (Optional)
- Component tests
- Tab switching tests
- Task loading tests
- Permission tests
- Panel behavior tests
## Implementation Notes
### Similarities to Shot Detail Panel
The Asset Detail Panel is designed to be consistent with the existing Shot Detail Panel:
- Same layout structure (header, info, progress, tabs)
- Same slide-in behavior from right
- Same permission model approach
- Same empty state patterns
- Same integration pattern with parent component
### Key Differences
1. **Tab Count**: 4 tabs instead of 5 (no Design tab for assets)
2. **Versions Tab**: Assets have version tracking, shots don't
3. **Category Badge**: Assets display category (characters, props, etc.)
4. **Default Tasks**: Asset tasks vary by category
5. **Context**: Assets are reusable across shots
### Component Reuse
The implementation should reuse existing components:
- TaskList component for Tasks tab
- TaskDetailPanel for task details
- Existing note components for Notes tab
- File upload components for References tab
- Status badges and progress bars
### Backend Requirements
The backend already supports most required functionality:
- GET /assets/{asset_id} - Get asset details
- GET /tasks?asset_id={id} - Filter tasks by asset
- Asset reference endpoints exist
- Task management endpoints exist
**New endpoints needed:**
- Asset version management endpoints (if not already implemented)
- Asset notes endpoints (if not already implemented)
## Benefits
1. **Consistency**: Matches Shot Detail Panel UX
2. **Efficiency**: All asset info in one place
3. **Context**: Better understanding of asset status
4. **Collaboration**: Centralized notes and references
5. **Version Control**: Track asset evolution
6. **Task Management**: Direct access to asset tasks
## User Workflows
### View Asset Details
1. User browses assets in AssetBrowser
2. User clicks on asset card
3. AssetDetailPanel slides in from right
4. Default Tasks tab shows asset tasks
5. User can switch between tabs
6. User clicks close or outside to return to browser
### Add Task to Asset
1. User opens asset detail panel
2. User is on Tasks tab (default)
3. User clicks "Add Task" button (if coordinator/admin)
4. Task creation dialog opens
5. User creates task
6. Task appears in list
### Upload Reference
1. User opens asset detail panel
2. User switches to References tab
3. User clicks "Upload Reference" button
4. File upload dialog opens
5. User selects and uploads file
6. Reference appears in gallery
### Track Asset Versions
1. User opens asset detail panel
2. User switches to Versions tab
3. User sees version history
4. User can publish new version (if artist/coordinator/admin)
5. User can compare or download previous versions
## Next Steps
1. Review and approve this specification
2. Begin implementation with Task 26.1
3. Create AssetDetailPanel component
4. Implement each tab incrementally
5. Test integration with AssetBrowser
6. Verify permissions work correctly
7. Add comprehensive tests
## Related Documents
- Requirements: `.kiro/specs/vfx-project-management/requirements.md` (Requirement 26)
- Design: `.kiro/specs/vfx-project-management/design.md` (Asset Detail Panel Design)
- Tasks: `.kiro/specs/vfx-project-management/tasks.md` (Task 26)
- Shot Detail Panel: Reference implementation for similar functionality
.kiro/specs/vfx-project-management/custom-task-status-design.md
+606
View File
@@ -0,0 +1,606 @@
# Design Document: Custom Task Status Management
## Overview
This design document outlines the implementation of a custom task status management system that allows project managers, coordinators, and administrators to define project-specific task statuses with custom names, colors, and ordering. The system will maintain backward compatibility with existing hardcoded statuses while providing flexibility for different production workflows.
The implementation follows the existing pattern established by the custom task type management system, adapting it for status management with additional features for color customization, ordering, and default status designation.
## Architecture
### High-Level Architecture
```
┌─────────────────────────────────────────────────────────────┐
│ Frontend (Vue 3) │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ ProjectSettingsView (Tasks Tab) │ │
│ │ └── CustomTaskStatusManager Component │ │
│ │ ├── Status List Display │ │
│ │ ├── Add/Edit Status Dialog │ │
│ │ ├── Delete Confirmation Dialog │ │
│ │ └── Drag-and-Drop Reordering │ │
│ └──────────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Status Display Components (Throughout App) │ │
│ │ ├── TaskStatusBadge (with custom colors) │ │
│ │ ├── EditableTaskStatus (dropdowns) │ │
│ │ └── TaskStatusFilter (filter controls) │ │
│ └──────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
│ HTTP/REST API
▼
┌─────────────────────────────────────────────────────────────┐
│ Backend (FastAPI) │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ /api/projects/{id}/custom-task-statuses │ │
│ │ ├── GET - List all statuses │ │
│ │ ├── POST - Create new status │ │
│ │ ├── PUT - Update status │ │
│ │ ├── DELETE - Delete status (with validation) │ │
│ │ └── PATCH - Reorder statuses │ │
│ └──────────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Database Models │ │
│ │ ├── Project (custom_task_statuses JSON field) │ │
│ │ └── Task (status field - string reference) │ │
│ └──────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
▼
┌───────────────┐
│ SQLite DB │
└───────────────┘
```
### Data Flow
1. **Status Creation**: User creates status → Frontend validates → API creates status → Database updated → UI refreshed
2. **Status Display**: Task loaded → Status resolved (system or custom) → Color applied → Badge rendered
3. **Status Update**: User changes task status → API validates → Task updated → Activity logged → UI updated
4. **Status Deletion**: User deletes status → API checks usage → If in use, require reassignment → Delete → Update tasks
## Components and Interfaces
### Backend Components
#### 1. Database Schema Changes
**Project Model Extension** (`backend/models/project.py`):
```python
class Project(Base):
__tablename__ = "projects"
# ... existing fields ...
# New field for custom task statuses
custom_task_statuses = Column(JSON, nullable=True)
# Structure: [
# {
# "id": "custom_status_1",
# "name": "In Review",
# "color": "#FFA500",
# "order": 0,
# "is_default": false
# },
# ...
# ]
```
**Task Model** (`backend/models/task.py`):
```python
class Task(Base):
__tablename__ = "tasks"
# ... existing fields ...
# Change status from Enum to String to support custom statuses
status = Column(String, nullable=False, default="not_started")
# Will store either system status keys or custom status IDs
```
#### 2. Pydantic Schemas
**Custom Task Status Schemas** (`backend/schemas/custom_task_status.py`):
```python
from pydantic import BaseModel, Field, validator
from typing import List, Optional
import re
class CustomTaskStatus(BaseModel):
"""Schema for a custom task status"""
id: str = Field(..., description="Unique identifier for the status")
name: str = Field(..., min_length=1, max_length=50, description="Display name")
color: str = Field(..., pattern=r'^#[0-9A-Fa-f]{6}$', description="Hex color code")
order: int = Field(..., ge=0, description="Display order")
is_default: bool = Field(default=False, description="Whether this is the default status")
class CustomTaskStatusCreate(BaseModel):
"""Schema for creating a new custom task status"""
name: str = Field(..., min_length=1, max_length=50)
color: Optional[str] = Field(None, pattern=r'^#[0-9A-Fa-f]{6}$')
@validator('name')
def validate_name(cls, v):
# Trim whitespace
v = v.strip()
if not v:
raise ValueError('Status name cannot be empty')
return v
class CustomTaskStatusUpdate(BaseModel):
"""Schema for updating a custom task status"""
name: Optional[str] = Field(None, min_length=1, max_length=50)
color: Optional[str] = Field(None, pattern=r'^#[0-9A-Fa-f]{6}$')
is_default: Optional[bool] = None
class CustomTaskStatusReorder(BaseModel):
"""Schema for reordering statuses"""
status_ids: List[str] = Field(..., description="Ordered list of status IDs")
class CustomTaskStatusDelete(BaseModel):
"""Schema for deleting a status with reassignment"""
reassign_to_status_id: Optional[str] = Field(None, description="Status ID to reassign tasks to")
class AllTaskStatusesResponse(BaseModel):
"""Schema for response containing all task statuses"""
statuses: List[CustomTaskStatus]
system_statuses: List[dict] # [{id: "not_started", name: "Not Started", color: "#gray"}]
default_status_id: str
class TaskStatusInUseError(BaseModel):
"""Schema for error when trying to delete a status in use"""
error: str
status_id: str
task_count: int
task_ids: List[int]
```
#### 3. API Endpoints
**Router** (`backend/routers/projects.py`):
```python
# System statuses (read-only, for backward compatibility)
SYSTEM_TASK_STATUSES = [
{"id": "not_started", "name": "Not Started", "color": "#6B7280"},
{"id": "in_progress", "name": "In Progress", "color": "#3B82F6"},
{"id": "submitted", "name": "Submitted", "color": "#F59E0B"},
{"id": "approved", "name": "Approved", "color": "#10B981"},
{"id": "retake", "name": "Retake", "color": "#EF4444"}
]
DEFAULT_STATUS_COLORS = [
"#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6",
"#EC4899", "#14B8A6", "#F97316", "#06B6D4", "#84CC16"
]
@router.get("/{project_id}/custom-task-statuses")
async def get_all_task_statuses(
project_id: int,
db: Session = Depends(get_db),
current_user: User = Depends(get_current_user_with_db)
):
"""Get all task statuses (system + custom) for a project"""
# Implementation details...
@router.post("/{project_id}/custom-task-statuses", status_code=201)
async def create_custom_task_status(
project_id: int,
status_data: CustomTaskStatusCreate,
db: Session = Depends(get_db),
current_user: User = Depends(require_coordinator_or_admin)
):
"""Create a new custom task status"""
# Implementation details...
@router.put("/{project_id}/custom-task-statuses/{status_id}")
async def update_custom_task_status(
project_id: int,
status_id: str,
status_data: CustomTaskStatusUpdate,
db: Session = Depends(get_db),
current_user: User = Depends(require_coordinator_or_admin)
):
"""Update a custom task status"""
# Implementation details...
@router.delete("/{project_id}/custom-task-statuses/{status_id}")
async def delete_custom_task_status(
project_id: int,
status_id: str,
delete_data: CustomTaskStatusDelete,
db: Session = Depends(get_db),
current_user: User = Depends(require_coordinator_or_admin)
):
"""Delete a custom task status"""
# Implementation details...
@router.patch("/{project_id}/custom-task-statuses/reorder")
async def reorder_custom_task_statuses(
project_id: int,
reorder_data: CustomTaskStatusReorder,
db: Session = Depends(get_db),
current_user: User = Depends(require_coordinator_or_admin)
):
"""Reorder custom task statuses"""
# Implementation details...
```
### Frontend Components
#### 1. Custom Task Status Manager Component
**Component** (`frontend/src/components/settings/CustomTaskStatusManager.vue`):
```vue
<template>
<div class="space-y-6">
<div>
<h3 class="text-lg font-semibold">Task Statuses</h3>
<p class="text-sm text-muted-foreground mt-1">
Customize task statuses to match your production workflow
</p>
</div>
<!-- Status List with Drag-and-Drop -->
<div class="space-y-2">
<draggable
v-model="statusList"
@end="handleReorder"
handle=".drag-handle"
item-key="id"
>
<template #item="{ element: status }">
<div class="status-item">
<!-- Drag handle, status badge, edit/delete buttons -->
</div>
</template>
</draggable>
</div>
<!-- Add Status Button -->
<Button @click="openAddDialog">
<Plus class="h-4 w-4 mr-2" />
Add Status
</Button>
<!-- Add/Edit Dialog -->
<Dialog v-model:open="isDialogOpen">
<!-- Status name input, color picker -->
</Dialog>
<!-- Delete Confirmation Dialog -->
<AlertDialog v-model:open="isDeleteDialogOpen">
<!-- Confirmation with task count and reassignment option -->
</AlertDialog>
</div>
</template>
```
#### 2. Status Display Components
**TaskStatusBadge Enhancement** (`frontend/src/components/task/TaskStatusBadge.vue`):
```vue
<template>
<Badge
:style="{
backgroundColor: statusColor,
color: getContrastColor(statusColor)
}"
>
{{ statusName }}
</Badge>
</template>
<script setup lang="ts">
// Resolve status from system or custom statuses
// Apply custom color
// Calculate contrast color for text
</script>
```
#### 3. Services
**Custom Task Status Service** (`frontend/src/services/customTaskStatus.ts`):
```typescript
export interface CustomTaskStatus {
id: string
name: string
color: string
order: number
is_default: boolean
}
export interface AllTaskStatusesResponse {
statuses: CustomTaskStatus[]
system_statuses: Array<{id: string, name: string, color: string}>
default_status_id: string
}
export const customTaskStatusService = {
async getAllStatuses(projectId: number): Promise<AllTaskStatusesResponse> {
// GET /api/projects/{projectId}/custom-task-statuses
},
async createStatus(projectId: number, data: {name: string, color?: string}): Promise<AllTaskStatusesResponse> {
// POST /api/projects/{projectId}/custom-task-statuses
},
async updateStatus(projectId: number, statusId: string, data: Partial<CustomTaskStatus>): Promise<AllTaskStatusesResponse> {
// PUT /api/projects/{projectId}/custom-task-statuses/{statusId}
},
async deleteStatus(projectId: number, statusId: string, reassignTo?: string): Promise<AllTaskStatusesResponse> {
// DELETE /api/projects/{projectId}/custom-task-statuses/{statusId}
},
async reorderStatuses(projectId: number, statusIds: string[]): Promise<AllTaskStatusesResponse> {
// PATCH /api/projects/{projectId}/custom-task-statuses/reorder
}
}
```
## Data Models
### Custom Task Status Data Structure
```typescript
interface CustomTaskStatus {
id: string // Unique identifier (e.g., "custom_status_1")
name: string // Display name (e.g., "In Review")
color: string // Hex color code (e.g., "#FFA500")
order: number // Display order (0-based)
is_default: boolean // Whether this is the default status for new tasks
}
```
### Project Custom Statuses Storage
Stored in `Project.custom_task_statuses` as JSON:
```json
[
{
"id": "custom_status_1",
"name": "In Review",
"color": "#FFA500",
"order": 0,
"is_default": false
},
{
"id": "custom_status_2",
"name": "Client Feedback",
"color": "#9333EA",
"order": 1,
"is_default": false
}
]
```
### Task Status Reference
Tasks will store status as a string that can be either:
- System status key: `"not_started"`, `"in_progress"`, `"submitted"`, `"approved"`, `"retake"`
- Custom status ID: `"custom_status_1"`, `"custom_status_2"`, etc.
## Correctness Properties
*A property is a characteristic or behavior that should hold true across all valid executions of a system-essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
### Property 1: Status name uniqueness within project
*For any* project and any two statuses within that project, the status names must be unique (case-insensitive comparison)
**Validates: Requirements 1.3, 2.4**
### Property 2: Status color format validity
*For any* custom status, if a color is specified, it must be a valid 6-digit hexadecimal color code starting with #
**Validates: Requirements 1.4**
### Property 3: Default status uniqueness
*For any* project, at most one status can be marked as the default status
**Validates: Requirements 5.2**
### Property 4: Status deletion with task reassignment
*For any* status deletion where tasks exist, all tasks using the deleted status must be reassigned to another valid status before deletion completes
**Validates: Requirements 3.4, 3.5**
### Property 5: Status order consistency
*For any* project's status list, the order values must form a continuous sequence from 0 to n-1 where n is the number of statuses
**Validates: Requirements 4.1, 4.3**
### Property 6: Task status reference validity
*For any* task, the status field must reference either a valid system status or a valid custom status from the task's project
**Validates: Requirements 6.4, 6.5**
### Property 7: Status update propagation
*For any* status name or color update, all UI components displaying that status must reflect the new values without requiring a page refresh
**Validates: Requirements 2.3, 7.5**
### Property 8: Project isolation
*For any* two different projects, custom statuses defined in one project must not be accessible or visible in the other project
**Validates: Requirements 9.1, 9.2, 9.3**
### Property 9: Backward compatibility
*For any* existing task with a system status, the task must continue to display and function correctly after the custom status feature is deployed
**Validates: Requirements 6.1, 6.2**
### Property 10: Bulk status update validity
*For any* bulk status update operation, all selected tasks must belong to the same project and the target status must be valid for that project
**Validates: Requirements 10.1, 10.2**
## Error Handling
### Validation Errors
1. **Duplicate Status Name**
- HTTP 409 Conflict
- Message: "A status with the name '{name}' already exists in this project"
- Frontend: Display inline error in dialog
2. **Invalid Color Format**
- HTTP 422 Unprocessable Entity
- Message: "Color must be a valid hex code (e.g., #FF5733)"
- Frontend: Validate on input, show error message
3. **Status In Use**
- HTTP 422 Unprocessable Entity
- Response includes: task_count, task_ids
- Frontend: Show reassignment dialog with task count
4. **Invalid Status Reference**
- HTTP 404 Not Found
- Message: "Status '{status_id}' not found"
- Frontend: Refresh status list, show error toast
### Business Logic Errors
1. **Cannot Delete Default Status**
- Automatically reassign default to first remaining status
- Notify user of the change
2. **Cannot Delete Last Status**
- HTTP 400 Bad Request
- Message: "Cannot delete the last status. At least one status must exist."
3. **Reorder with Missing Status IDs**
- HTTP 400 Bad Request
- Message: "Reorder operation must include all existing status IDs"
### Database Errors
1. **Concurrent Modification**
- Use optimistic locking or retry logic
- HTTP 409 Conflict
- Message: "Status was modified by another user. Please refresh and try again."
2. **JSON Field Corruption**
- Validate JSON structure on read
- Fall back to empty array if corrupted
- Log error for investigation
## Testing Strategy
### Unit Tests
1. **Backend Unit Tests** (`backend/test_custom_task_status.py`):
- Test status CRUD operations
- Test validation logic (name uniqueness, color format)
- Test status deletion with task reassignment
- Test reordering logic
- Test default status management
- Test project isolation
2. **Frontend Unit Tests** (`frontend/src/components/settings/CustomTaskStatusManager.test.ts`):
- Test component rendering
- Test dialog interactions
- Test drag-and-drop reordering
- Test color picker functionality
- Test validation error display
### Integration Tests
1. **API Integration Tests**:
- Test complete status lifecycle (create → update → delete)
- Test status usage in task creation and updates
- Test bulk status updates with custom statuses
- Test status display across different views
2. **E2E Tests** (`frontend/test-custom-task-status.html`):
- Test creating a custom status and using it on a task
- Test editing a status and verifying UI updates
- Test deleting a status with reassignment
- Test reordering statuses via drag-and-drop
- Test setting default status
### Property-Based Tests
Property-based tests will use Python's `hypothesis` library for backend testing and `fast-check` for frontend testing where applicable.
1. **Property Test: Status name uniqueness** (Property 1)
- Generate random status names
- Attempt to create statuses with duplicate names
- Verify all rejections are correct
2. **Property Test: Color format validity** (Property 2)
- Generate random color strings (valid and invalid)
- Verify only valid hex codes are accepted
3. **Property Test: Status order consistency** (Property 5)
- Generate random reorder operations
- Verify order values remain continuous
4. **Property Test: Task status reference validity** (Property 6)
- Generate random task status assignments
- Verify all references resolve correctly
### Manual Testing Checklist
- [ ] Create custom status with auto-assigned color
- [ ] Create custom status with specific color
- [ ] Edit status name and verify UI updates everywhere
- [ ] Edit status color and verify badge updates
- [ ] Set a status as default and create new task
- [ ] Reorder statuses via drag-and-drop
- [ ] Delete unused status
- [ ] Attempt to delete status in use (verify error)
- [ ] Delete status with reassignment
- [ ] Use custom status in bulk update
- [ ] Verify status isolation between projects
- [ ] Verify backward compatibility with existing tasks
## Implementation Notes
### Migration Strategy
1. **Phase 1: Database Schema**
- Add `custom_task_statuses` JSON column to Project model
- Create migration script to add column with default empty array
- No changes to existing task statuses
2. **Phase 2: Backend API**
- Implement custom status CRUD endpoints
- Update task endpoints to support custom status references
- Maintain backward compatibility with system statuses
3. **Phase 3: Frontend Components**
- Create CustomTaskStatusManager component
- Update TaskStatusBadge to support custom colors
- Update status dropdowns to include custom statuses
- Update filters to include custom statuses
4. **Phase 4: Testing & Rollout**
- Run comprehensive test suite
- Deploy to staging environment
- Conduct user acceptance testing
- Deploy to production
### Backward Compatibility
- Existing tasks with system statuses will continue to work
- System statuses will always be available alongside custom statuses
- Status resolution logic: Check if status is system status first, then check custom statuses
- If a task has an invalid status reference, fall back to "not_started"
### Performance Considerations
- Custom statuses stored as JSON in Project table (minimal overhead)
- Status resolution happens in-memory (no additional queries)
- Consider caching project statuses in frontend store
- Bulk operations should batch database updates
### Security Considerations
- Only coordinators, project managers, and admins can manage statuses
- Validate all status references before updating tasks
- Sanitize status names to prevent XSS
- Rate limit status management endpoints
### UI/UX Considerations
- Use color picker with predefined palette for consistency
- Show visual preview of status badge while editing
- Provide clear feedback when status is in use
- Use drag handles for intuitive reordering
- Display task count prominently when deleting
- Auto-select reassignment status when deleting
- Show loading states during async operations
.kiro/specs/vfx-project-management/custom-task-status-requirements.md
+138
View File
@@ -0,0 +1,138 @@
# Requirements Document: Custom Task Status Management
## Introduction
This feature enables project managers, coordinators, and administrators to define and manage custom task statuses at the project level. Currently, the system uses a fixed set of task statuses (not_started, in_progress, submitted, approved, retake) defined as an enum. This enhancement will allow each project to define its own set of statuses with custom names and colors, providing flexibility to match different production workflows while maintaining backward compatibility with existing tasks.
## Glossary
- **Task Status**: A state indicator for a task representing its current progress in the production workflow
- **Custom Status**: A user-defined task status with a custom name, color, and order within a project
- **Status Color**: A hexadecimal color code used to visually distinguish different task statuses in the UI
- **Status Order**: The sequence position of a status in the workflow, determining its display order
- **Default Status**: The initial status assigned to newly created tasks
- **System Status**: The original hardcoded statuses (not_started, in_progress, submitted, approved, retake)
- **Project Settings**: Configuration interface where project-level customizations are managed
- **Status Migration**: The process of converting existing tasks from system statuses to custom statuses
## Requirements
### Requirement 1
**User Story:** As a project manager, I want to create custom task statuses for my project, so that I can match the status workflow to my team's specific production pipeline.
#### Acceptance Criteria
1. WHEN a user with coordinator, project manager, or admin role accesses the project settings tasks tab THEN the system SHALL display a task status management section
2. WHEN a user clicks the "Add Status" button THEN the system SHALL display a form to create a new custom status
3. WHEN a user submits a new status with a name and color THEN the system SHALL validate the name is unique within the project and create the status
4. WHEN a user creates a status without specifying a color THEN the system SHALL assign a default color from a predefined palette
5. WHEN a user attempts to create a status with a duplicate name THEN the system SHALL prevent creation and display an error message
### Requirement 2
**User Story:** As a project manager, I want to edit existing task statuses, so that I can refine status names and colors as the project evolves.
#### Acceptance Criteria
1. WHEN a user clicks the edit button on a status THEN the system SHALL display a form pre-filled with the current status name and color
2. WHEN a user updates a status name THEN the system SHALL validate uniqueness and update all tasks using that status
3. WHEN a user updates a status color THEN the system SHALL immediately reflect the new color across all UI components displaying that status
4. WHEN a user attempts to rename a status to a duplicate name THEN the system SHALL prevent the update and display an error message
5. WHEN a status is updated THEN the system SHALL maintain all task associations with that status
### Requirement 3
**User Story:** As a project manager, I want to delete custom task statuses, so that I can remove statuses that are no longer needed in my workflow.
#### Acceptance Criteria
1. WHEN a user clicks the delete button on a status THEN the system SHALL check if any tasks are currently using that status
2. WHEN a status has no associated tasks THEN the system SHALL allow deletion and remove the status from the project
3. WHEN a status has associated tasks THEN the system SHALL prevent deletion and display the count of affected tasks
4. WHEN a status has associated tasks THEN the system SHALL offer to reassign those tasks to a different status before deletion
5. WHEN a user confirms reassignment and deletion THEN the system SHALL update all affected tasks and remove the status
### Requirement 4
**User Story:** As a project manager, I want to reorder task statuses, so that they appear in a logical workflow sequence in the UI.
#### Acceptance Criteria
1. WHEN a user views the status management section THEN the system SHALL display statuses in their defined order
2. WHEN a user drags a status to a new position THEN the system SHALL update the order and persist the change
3. WHEN statuses are reordered THEN the system SHALL update the display order in all dropdowns and filters
4. WHEN a new status is created THEN the system SHALL add it to the end of the current order
5. WHEN the order is changed THEN the system SHALL maintain the order across all project views
### Requirement 5
**User Story:** As a project manager, I want to designate a default status for new tasks, so that tasks are automatically assigned an appropriate initial state.
#### Acceptance Criteria
1. WHEN a user views the status list THEN the system SHALL indicate which status is the default
2. WHEN a user clicks "Set as Default" on a status THEN the system SHALL mark that status as the default and remove the default flag from other statuses
3. WHEN a new task is created without an explicit status THEN the system SHALL assign the project's default status
4. WHEN no custom statuses exist THEN the system SHALL use "not_started" as the default status
5. WHEN a default status is deleted THEN the system SHALL automatically assign the first status in the list as the new default
### Requirement 6
**User Story:** As a developer, I want the system to maintain backward compatibility with existing tasks, so that current production data remains intact during the migration to custom statuses.
#### Acceptance Criteria
1. WHEN the custom status feature is deployed THEN the system SHALL continue to support existing tasks with system statuses
2. WHEN a project has no custom statuses defined THEN the system SHALL use the original system status enum values
3. WHEN a project defines custom statuses THEN the system SHALL migrate existing tasks to use custom status references
4. WHEN displaying a task status THEN the system SHALL resolve both system statuses and custom statuses correctly
5. WHEN querying tasks by status THEN the system SHALL support filtering by both system and custom status identifiers
### Requirement 7
**User Story:** As an artist, I want to see task statuses with their custom colors throughout the application, so that I can quickly identify task states visually.
#### Acceptance Criteria
1. WHEN a task is displayed in any view THEN the system SHALL show the status with its configured color
2. WHEN a status badge is rendered THEN the system SHALL apply the custom color as the background or border color
3. WHEN a status dropdown is displayed THEN the system SHALL show each status option with its color indicator
4. WHEN filtering by status THEN the system SHALL display status options with their colors
5. WHEN a status color is updated THEN the system SHALL reflect the change immediately without requiring a page refresh
### Requirement 8
**User Story:** As a project manager, I want to see which statuses are actively in use, so that I can make informed decisions about status management.
#### Acceptance Criteria
1. WHEN viewing the status management section THEN the system SHALL display the count of tasks using each status
2. WHEN a status has zero tasks THEN the system SHALL indicate it is safe to delete
3. WHEN a status has tasks THEN the system SHALL display the task count prominently
4. WHEN hovering over a task count THEN the system SHALL optionally show a preview of affected tasks
5. WHEN attempting to delete a status with tasks THEN the system SHALL require explicit confirmation with task count displayed
### Requirement 9
**User Story:** As a system administrator, I want custom statuses to be project-specific, so that different projects can have different workflows without interfering with each other.
#### Acceptance Criteria
1. WHEN custom statuses are created THEN the system SHALL associate them with a specific project ID
2. WHEN displaying statuses for a task THEN the system SHALL only show statuses from the task's project
3. WHEN a user switches between projects THEN the system SHALL display the appropriate status set for each project
4. WHEN querying tasks across projects THEN the system SHALL correctly resolve statuses from their respective projects
5. WHEN a project is deleted THEN the system SHALL cascade delete all associated custom statuses
### Requirement 10
**User Story:** As a coordinator, I want to bulk update task statuses, so that I can efficiently manage status changes across multiple tasks.
#### Acceptance Criteria
1. WHEN a user selects multiple tasks THEN the system SHALL display available custom statuses for the project
2. WHEN a user applies a bulk status update THEN the system SHALL update all selected tasks to the chosen status
3. WHEN tasks from different projects are selected THEN the system SHALL only show statuses common to all projects or handle per-project
4. WHEN a bulk update is performed THEN the system SHALL create activity log entries for each task
5. WHEN a bulk update fails for some tasks THEN the system SHALL report which tasks succeeded and which failed
.kiro/specs/vfx-project-management/custom-task-status-tasks.md
+341
View File
@@ -0,0 +1,341 @@
# Implementation Plan: Custom Task Status Management
- [x] 1. Database schema and migration
- Add `custom_task_statuses` JSON column to Project model
- Create migration script to add the column with default empty array
- Update Task model to change status from Enum to String type
- Test migration on development database
- _Requirements: 6.1, 6.2, 6.3, 9.1_
- [x] 2. Backend: Create Pydantic schemas for custom task statuses
- Create `backend/schemas/custom_task_status.py` with all schema classes
- Implement `CustomTaskStatus`, `CustomTaskStatusCreate`, `CustomTaskStatusUpdate` schemas
- Implement `CustomTaskStatusReorder`, `CustomTaskStatusDelete` schemas
- Implement `AllTaskStatusesResponse`, `TaskStatusInUseError` schemas
- Add validation for status name uniqueness and color format
- _Requirements: 1.3, 1.4, 2.4_
- [x] 3. Backend: Implement GET endpoint for retrieving all task statuses
- Add `get_all_task_statuses` endpoint to `backend/routers/projects.py`
- Return both system statuses and custom statuses
- Include default status identification
- Ensure project access validation
- _Requirements: 1.1, 9.2_
- [x] 4. Backend: Implement POST endpoint for creating custom status
- Add `create_custom_task_status` endpoint to `backend/routers/projects.py`
- Validate status name uniqueness within project
- Auto-assign color from palette if not provided
- Generate unique status ID
- Add status to project's custom_task_statuses JSON array
- Use `flag_modified` for JSON column updates
- _Requirements: 1.2, 1.3, 1.4_
- [x] 5. Backend: Implement PUT endpoint for updating custom status
- Add `update_custom_task_status` endpoint to `backend/routers/projects.py`
- Support updating name, color, and is_default flag
- Validate name uniqueness if name is changed
- If setting as default, unset other default statuses
- Use `flag_modified` for JSON column updates
- _Requirements: 2.1, 2.2, 2.3, 5.2_
- [x] 6. Backend: Implement DELETE endpoint for deleting custom status
- Add `delete_custom_task_status` endpoint to `backend/routers/projects.py`
- Check if status is in use by any tasks
- If in use, return error with task count and IDs
- Support optional reassignment of tasks to another status
- If deleting default status, auto-assign new default
- Prevent deletion of last status
- _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5_
- [x] 7. Backend: Implement PATCH endpoint for reordering statuses
- Add `reorder_custom_task_statuses` endpoint to `backend/routers/projects.py`
- Accept ordered list of status IDs
- Validate all status IDs are present
- Update order field for each status
- Use `flag_modified` for JSON column updates
- _Requirements: 4.1, 4.2, 4.3, 4.4_
- [x] 8. Backend: Update task endpoints to support custom statuses
- Modify task creation to use default status if not specified
- Update task status validation to check both system and custom statuses
- Ensure status resolution works across project boundaries
- Update bulk status update endpoint to validate custom statuses
- _Requirements: 5.3, 6.4, 6.5, 10.1, 10.2_
- [ ]* 8.1 Write unit tests for custom status CRUD operations
- Test creating status with and without color
- Test updating status name and color
- Test deleting unused status
- Test deleting status with task reassignment
- Test reordering statuses
- Test default status management
- Test validation errors (duplicate names, invalid colors)
- _Requirements: 1.1-1.5, 2.1-2.5, 3.1-3.5, 4.1-4.5, 5.1-5.5_
- [ ]* 8.2 Write property test for status name uniqueness
- **Property 1: Status name uniqueness within project**
- **Validates: Requirements 1.3, 2.4**
- [ ]* 8.3 Write property test for color format validity
- **Property 2: Status color format validity**
- **Validates: Requirements 1.4**
- [ ]* 8.4 Write property test for default status uniqueness
- **Property 3: Default status uniqueness**
- **Validates: Requirements 5.2**
- [ ]* 8.5 Write property test for status order consistency
- **Property 5: Status order consistency**
- **Validates: Requirements 4.1, 4.3**
- [x] 9. Checkpoint - Ensure all backend tests pass
- Ensure all tests pass, ask the user if questions arise.
- [x] 10. Frontend: Create custom task status service
- Create `frontend/src/services/customTaskStatus.ts`
- Implement `getAllStatuses` method
- Implement `createStatus` method
- Implement `updateStatus` method
- Implement `deleteStatus` method
- Implement `reorderStatuses` method
- Add TypeScript interfaces for all request/response types
- _Requirements: 1.1, 1.2, 2.1, 3.1, 4.1_
- [x] 11. Frontend: Create CustomTaskStatusManager component
- Create `frontend/src/components/settings/CustomTaskStatusManager.vue`
- Implement status list display with system and custom statuses
- Add visual indicators for default status
- Display task count for each status
- Add "Add Status" button
- Implement loading and error states
- _Requirements: 1.1, 8.1, 8.2, 8.3_
- [x] 12. Frontend: Implement Add/Edit status dialog
- Add dialog for creating new status
- Add dialog for editing existing status
- Implement status name input with validation
- Implement color picker with predefined palette
- Show live preview of status badge
- Display validation errors inline
- Handle save and cancel actions
- _Requirements: 1.2, 1.3, 1.4, 2.1, 2.2, 2.3_
- [x] 13. Frontend: Implement status deletion with confirmation
- Add delete button for each custom status
- Show confirmation dialog with task count
- If status in use, show reassignment dropdown
- Implement reassignment logic
- Handle deletion success and errors
- Update UI after deletion
- _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5_
- [x] 14. Frontend: Implement drag-and-drop reordering
- Install and configure vue-draggable-next library
- Add drag handles to status items
- Implement drag-and-drop functionality
- Call reorder API on drop
- Update UI optimistically
- Handle reorder errors
- _Requirements: 4.1, 4.2, 4.3, 4.4, 4.5_
- [x] 15. Frontend: Implement default status management
- Add "Set as Default" button/toggle for each status
- Show visual indicator for default status
- Update default status via API
- Ensure only one default at a time
- _Requirements: 5.1, 5.2, 5.3, 5.4, 5.5_
- [x] 16. Frontend: Integrate CustomTaskStatusManager into ProjectSettingsView
- Add CustomTaskStatusManager to Tasks tab in ProjectSettingsView
- Position it above or below existing task type manager
- Add separator between sections
- Ensure proper layout and spacing
- _Requirements: 1.1_
- [x] 17. Frontend: Update TaskStatusBadge component for custom colors
- Modify `frontend/src/components/task/TaskStatusBadge.vue`
- Accept status object with color property
- Apply custom background color from status
- Calculate contrast color for text (black or white)
- Maintain existing styling for system statuses
- _Requirements: 7.1, 7.2, 7.3_
- [x] 18. Frontend: Update EditableTaskStatus component for custom statuses
- Modify `frontend/src/components/task/EditableTaskStatus.vue`
- Fetch custom statuses for current project
- Display both system and custom statuses in dropdown
- Show color indicator next to each status option
- Update task status via API
- _Requirements: 7.1, 7.2, 7.3, 7.4_
- [x] 19. Frontend: Update TaskStatusFilter component for custom statuses
- Modify `frontend/src/components/asset/TaskStatusFilter.vue`
- Modify `frontend/src/components/shot/ShotTaskStatusFilter.vue`
- Include custom statuses in filter options
- Show color indicators in filter dropdown
- Apply filters correctly with custom statuses
- _Requirements: 7.4_
- [x] 20. Frontend: Update bulk status update to support custom statuses
- Modify `frontend/src/components/task/TaskBulkActionsMenu.vue`
- Fetch custom statuses for current project
- Include custom statuses in bulk update dropdown
- Validate all selected tasks are from same project
- Show color indicators in dropdown
- _Requirements: 10.1, 10.2, 10.3, 10.4, 10.5_
- [ ] 21. Frontend: Ensure status updates reflect immediately across UI
- Implement reactive status updates in Pinia store
- Update all components displaying statuses when status changes
- Test status color changes reflect without page refresh
- Test status name changes reflect without page refresh
- _Requirements: 2.3, 7.5_
- [ ]* 21.1 Write E2E test for creating and using custom status
- Create custom status via UI
- Assign custom status to a task
- Verify status displays with correct color
- _Requirements: 1.1-1.5, 7.1-7.5_
- [ ]* 21.2 Write E2E test for editing status and verifying UI updates
- Edit status name and color
- Verify all instances update without refresh
- _Requirements: 2.1-2.5, 7.5_
- [ ]* 21.3 Write E2E test for deleting status with reassignment
- Create status and assign to tasks
- Delete status with reassignment
- Verify tasks updated correctly
- _Requirements: 3.1-3.5_
- [ ]* 21.4 Write E2E test for drag-and-drop reordering
- Reorder statuses via drag-and-drop
- Verify order persists after refresh
- _Requirements: 4.1-4.5_
- [ ] 22. Checkpoint - Ensure all tests pass
- Ensure all tests pass, ask the user if questions arise.
- [ ] 23. Testing: Verify backward compatibility with existing tasks
- Test that existing tasks with system statuses still work
- Test that system statuses are always available
- Test status resolution for both system and custom statuses
- Test project isolation (custom statuses don't leak between projects)
- _Requirements: 6.1, 6.2, 6.3, 6.4, 6.5, 9.1, 9.2, 9.3, 9.4, 9.5_
- [ ] 24. Documentation: Update API documentation
- Document all new custom status endpoints in Swagger/OpenAPI
- Add examples for request/response payloads
- Document error responses
- Update README with feature description
- [ ] 25. Final integration testing and bug fixes
- Test complete workflow: create project → add statuses → create tasks → use statuses
- Test edge cases: deleting last status, concurrent modifications, etc.
- Test across different user roles (admin, coordinator, artist)
- Fix any bugs discovered during testing
- Verify all acceptance criteria are met
.kiro/specs/vfx-project-management/design.md
+1820
View File
File diff suppressed because it is too large Load Diff
.kiro/specs/vfx-project-management/notification-system-implementation.md
+238
View File
@@ -0,0 +1,238 @@
# Notification and Activity System Implementation Summary
## Overview
Successfully implemented a comprehensive notification and activity tracking system for the VFX Project Management application. The system provides real-time notifications for task updates, submission reviews, and project activities, along with a detailed activity timeline for tracking all user actions.
## Task 16.1: Notification System
### Backend Implementation
#### Database Models
- **Notification Model** (`backend/models/notification.py`)
- Stores in-app notifications with type, priority, title, and message
- Links to related entities (project, task, submission)
- Tracks read status and email delivery
- Supports multiple notification types: task_assigned, task_status_changed, submission_reviewed, work_submitted, deadline_approaching, project_update, comment_added
- **UserNotificationPreference Model** (`backend/models/notification.py`)
- Granular control over email and in-app notifications
- Per-notification-type preferences
- Email digest settings (daily/weekly)
- Default preferences created automatically for new users
#### API Endpoints (`backend/routers/notifications.py`)
- `GET /notifications` - Get user notifications with filtering
- `GET /notifications/stats` - Get notification statistics (total, unread, by type)
- `POST /notifications/mark-read` - Mark specific notifications as read
- `POST /notifications/mark-all-read` - Mark all notifications as read
- `DELETE /notifications/{id}` - Delete a notification
- `GET /notifications/preferences` - Get user notification preferences
- `PUT /notifications/preferences` - Update notification preferences
#### Notification Service (`backend/utils/notifications.py`)
- Enhanced notification service with database integration
- Respects user preferences before creating notifications
- Methods for common notification scenarios:
- `notify_submission_reviewed()` - Notify artist of review decision
- `notify_task_assigned()` - Notify user of task assignment
- `notify_work_submitted()` - Notify directors/coordinators of new submissions
- `notify_task_status_changed()` - Notify on status changes
- `notify_comment_added()` - Notify on new comments
- Placeholder for email notification integration
### Frontend Implementation
#### Notification Store (`frontend/src/stores/notifications.ts`)
- Pinia store for managing notification state
- Methods for fetching, marking read, and deleting notifications
- Real-time polling support (30-second intervals)
- Computed properties for unread count and filtering
#### UI Components
**NotificationCenter** (`frontend/src/components/layout/NotificationCenter.vue`)
- Bell icon with unread badge in app header
- Popover dropdown showing recent notifications
- Color-coded icons based on notification type and priority
- Click to navigate to related task/project
- Mark all as read functionality
- Individual notification deletion
- Real-time updates via polling
**NotificationPreferences** (`frontend/src/components/settings/NotificationPreferences.vue`)
- Comprehensive settings panel for notification preferences
- Separate controls for email and in-app notifications
- Per-notification-type toggles
- Email digest configuration
- Immediate preference updates with optimistic UI
#### Types and Services
- `frontend/src/types/notification.ts` - TypeScript interfaces
- `frontend/src/services/notification.ts` - API service layer
### Database Migration
- `backend/migrate_notifications.py` - Creates notifications and user_notification_preferences tables
- Includes proper indexes for performance
- Foreign key constraints for data integrity
## Task 16.2: Activity Feed and Timeline
### Backend Implementation
#### Database Models
- **Activity Model** (`backend/models/activity.py`)
- Comprehensive activity logging for all user actions
- Links to user, project, task, asset, shot, and submission
- Stores activity description and metadata
- Indexed for efficient querying
- Supports 14 activity types covering all major actions
#### API Endpoints (`backend/routers/activities.py`)
- `GET /activities/project/{id}` - Get project activity feed with filtering
- `GET /activities/task/{id}` - Get task activity timeline
- `GET /activities/user/{id}` - Get user activity history
- `GET /activities/recent` - Get recent activities across all accessible projects
- Supports filtering by type, date range, and pagination
#### Activity Service (`backend/utils/activity.py`)
- Centralized activity logging service
- Helper methods for common activities:
- `log_task_created()`, `log_task_assigned()`, `log_task_status_changed()`
- `log_submission_created()`, `log_submission_reviewed()`
- `log_comment_added()`
- `log_asset_created()`, `log_shot_created()`, `log_project_created()`
- `log_user_joined_project()`
- Stores metadata for rich activity context
### Frontend Implementation
#### UI Components
**ActivityFeed** (`frontend/src/components/activity/ActivityFeed.vue`)
- Flexible activity feed component
- Supports project, task, user, or global activity views
- Time-based filtering (24h, 7 days, 30 days, all time)
- Color-coded icons for different activity types
- User avatars and timestamps
- Navigation to related tasks/projects
- Load more pagination
- Refresh functionality
**TaskActivityTimeline** (`frontend/src/components/activity/TaskActivityTimeline.vue`)
- Vertical timeline view for task activities
- Visual timeline with colored dots
- Shows activity type, description, and metadata
- Displays status changes, version numbers, review decisions
- User attribution with avatars
- Chronological ordering with relative timestamps
#### Types and Services
- `frontend/src/types/activity.ts` - TypeScript interfaces
- `frontend/src/services/activity.ts` - API service layer
### Database Migration
- `backend/migrate_activities.py` - Creates activities table
- Includes indexes on type, user_id, project_id, and created_at
- Foreign key constraints for referential integrity
## Integration Points
### Existing Code Integration
- NotificationCenter added to AppHeader for global access
- Activity logging can be integrated into existing routers (tasks, assets, shots, etc.)
- Notification service already integrated with review workflow
### Future Integration Opportunities
1. **Email Notifications**: Implement actual email sending using SMTP or email service
2. **WebSocket Support**: Replace polling with real-time WebSocket updates
3. **Push Notifications**: Add browser push notification support
4. **Activity Logging**: Add activity logging calls throughout existing endpoints
5. **Notification Triggers**: Add more notification triggers for deadline warnings, etc.
## Testing
### Backend Testing
- `backend/test_notifications.py` - Test script for notification endpoints
- Tests login, notification retrieval, stats, preferences, and activities
### Manual Testing Checklist
- [ ] Create notification when task is assigned
- [ ] Create notification when submission is reviewed
- [ ] Mark notifications as read
- [ ] Update notification preferences
- [ ] View project activity feed
- [ ] View task activity timeline
- [ ] Filter activities by date range
- [ ] Navigate from notification to task
## UI Components Installed
- `scroll-area` - For scrollable notification and activity lists
- `popover` - For notification center dropdown
- `switch` - For notification preference toggles
## Files Created
### Backend
- `backend/models/notification.py`
- `backend/models/activity.py`
- `backend/schemas/notification.py`
- `backend/schemas/activity.py`
- `backend/routers/notifications.py`
- `backend/routers/activities.py`
- `backend/utils/activity.py`
- `backend/migrate_notifications.py`
- `backend/migrate_activities.py`
- `backend/test_notifications.py`
### Frontend
- `frontend/src/types/notification.ts`
- `frontend/src/types/activity.ts`
- `frontend/src/services/notification.ts`
- `frontend/src/services/activity.ts`
- `frontend/src/stores/notifications.ts`
- `frontend/src/components/layout/NotificationCenter.vue`
- `frontend/src/components/settings/NotificationPreferences.vue`
- `frontend/src/components/activity/ActivityFeed.vue`
- `frontend/src/components/activity/TaskActivityTimeline.vue`
### Files Modified
- `backend/models/user.py` - Added notification relationships
- `backend/main.py` - Registered notification and activity routers
- `frontend/src/components/layout/AppHeader.vue` - Added NotificationCenter
## Requirements Satisfied
### Requirement 4.4 (Notifications)
✅ Real-time notifications for task updates using toast components
✅ Email notification configuration in user settings
✅ Notification preferences for users with granular controls
✅ Notification center with unread indicators
### Requirement 5.4 (Review Notifications)
✅ Notify artists when review decisions are made
✅ Notify directors when new submissions are available
### Requirement 6.4 (Activity Tracking)
✅ Project activity stream with real-time updates
✅ Task activity timeline with chronological events
✅ User activity tracking with action history
✅ Activity filtering and search functionality
## Next Steps
1. **Integrate Activity Logging**: Add activity logging calls to existing endpoints (task creation, asset creation, etc.)
2. **Email Implementation**: Implement actual email sending for email notifications
3. **WebSocket Support**: Replace polling with WebSocket for real-time updates
4. **Notification Rules**: Add more sophisticated notification rules (e.g., deadline warnings)
5. **Activity Aggregation**: Implement activity aggregation for digest emails
6. **Performance Optimization**: Add caching for frequently accessed activities
7. **User Testing**: Conduct user testing to refine notification preferences and activity display
## Notes
- The notification system is fully functional but email sending is not yet implemented (placeholder exists)
- Activity logging needs to be integrated into existing endpoints to populate the activity feed
- The system uses polling for real-time updates; WebSocket implementation would improve performance
- All database migrations have been successfully applied
- UI components follow the existing shadcn-vue design system
.kiro/specs/vfx-project-management/requirements.md
+506
View File
@@ -0,0 +1,506 @@
# Requirements Document
## Introduction
A comprehensive project management system designed specifically for the animation and VFX industry, similar to ftrack or ShotGrid. The system enables project coordinators to track production status, directors to review and approve shots, and artists to manage their tasks and submissions. The system includes role-based access control, task management across different production stages, and comprehensive review workflows.
## Glossary
- **VFX_System**: The project management system for animation and VFX production
- **Shot**: A single sequence or scene in an animation/VFX project that requires work
- **Asset**: A reusable element used across multiple shots, categorized by type
- **Asset_Category**: The classification of assets (characters, props, sets, vehicles)
- **Task**: A specific work item assigned to an artist for a shot or asset
- **Production_Note**: Comments and feedback from coordinators or directors about work progress
- **Review_Status**: The approval state of submitted work (pending, approved, retake)
- **User_Role**: The functional role and responsibilities of a user (artist, coordinator, director, developer)
- **Admin_Permission**: An independent permission flag that grants administrative access regardless of user role
- **Department_Role**: The specialized skill area of an artist (layout, animation, lighting, composite, modeling, rigging, surfacing)
- **Submission**: Work files and media uploaded by artists for review
- **Project**: A collection of shots and assets that make up a complete production
- **API_Key**: A secure token that allows external applications to authenticate with the system
- **External_Application**: Third-party software or scripts that integrate with the VFX_System
- **Frame_Rate**: The number of frames per second (fps) used for the project's video output
- **Data_Drive_Path**: The physical file system location where project work files are stored
- **Publish_Storage_Path**: The designated location where approved and finalized work is delivered
- **Delivery_Image_Resolution**: The required pixel dimensions for final rendered images and sequences
- **Delivery_Movie_Specs**: The required resolution and format specifications for movie deliveries per shot department
- **Technical_Specifications**: The collection of technical requirements and standards defined for a project
- **Global_Upload_Limit**: Site-wide upload size limit for movie files that can be configured by administrators
## Requirements
### Requirement 1
**User Story:** As a user with admin permission, I want to manage user accounts and assign roles, so that I can control access and permissions across the system.
#### Acceptance Criteria
1. THE VFX_System SHALL provide user registration functionality with email and password
2. THE VFX_System SHALL require approval from a user with admin permission before new users can access the system
3. WHEN a user with admin permission assigns a role, THE VFX_System SHALL update the user's permissions immediately
4. THE VFX_System SHALL support four distinct functional roles: director, coordinator, artist, and developer
5. THE VFX_System SHALL support an independent admin permission that can be granted to users of any role
6. THE VFX_System SHALL prevent users without admin permission from modifying user roles or permissions
### Requirement 1.1
**User Story:** As an administrator, I want to create new user accounts directly and edit all user information including passwords, so that I can manage the user base without requiring self-registration.
#### Acceptance Criteria
1. WHEN an administrator accesses the user management page, THE VFX_System SHALL display a comprehensive list of all users with their roles and status
2. THE VFX_System SHALL provide an "Add User" button that opens a user creation form for administrators
3. WHEN an administrator creates a new user, THE VFX_System SHALL require first name, last name, email, password, and role
4. THE VFX_System SHALL allow administrators to set the initial approval status when creating a new user
5. THE VFX_System SHALL allow administrators to grant or revoke admin permission when creating or editing users
6. WHEN an administrator edits an existing user, THE VFX_System SHALL allow modification of first name, last name, email, role, approval status, and admin permission
7. THE VFX_System SHALL provide a password reset functionality that allows administrators to set a new password for any user
8. THE VFX_System SHALL validate that email addresses are unique across all users
9. THE VFX_System SHALL prevent administrators from removing their own admin permission
10. THE VFX_System SHALL allow administrators to delete user accounts that have no associated project memberships or task assignments
11. THE VFX_System SHALL display a warning message when attempting to delete users with existing project associations
12. THE VFX_System SHALL provide search and filter functionality to locate users by name, email, role, or approval status
### Requirement 1.2
**User Story:** As a registered user, I want to manage my profile including uploading an avatar and changing my password, so that I can personalize my account and maintain security.
#### Acceptance Criteria
1. THE VFX_System SHALL provide a profile page accessible to all registered users
2. THE VFX_System SHALL allow users to upload a profile avatar image
3. THE VFX_System SHALL accept common image formats for avatars (jpg, jpeg, png, gif, webp)
4. THE VFX_System SHALL resize and crop uploaded avatars to a standard size (e.g., 200x200 pixels)
5. THE VFX_System SHALL limit avatar file size to a maximum of 5MB
6. THE VFX_System SHALL display the user's avatar in the application header and profile page
7. THE VFX_System SHALL provide a password change form requiring current password verification
8. WHEN a user changes their password, THE VFX_System SHALL require the current password for authentication
9. THE VFX_System SHALL require the new password to be entered twice for confirmation
10. THE VFX_System SHALL validate that the new password meets minimum security requirements
11. THE VFX_System SHALL display password strength indicators during password entry
12. WHEN a password is successfully changed, THE VFX_System SHALL display a confirmation message
13. THE VFX_System SHALL allow users to remove their avatar and revert to a default placeholder
### Requirement 2
**User Story:** As a coordinator, I want to create and manage projects with shots and assets, so that I can organize production work effectively.
#### Acceptance Criteria
1. WHEN a coordinator creates a project, THE VFX_System SHALL generate a unique project identifier
2. THE VFX_System SHALL allow coordinators to add shots and assets to projects
3. THE VFX_System SHALL require coordinators to specify asset category when creating assets
4. THE VFX_System SHALL support the following asset categories: characters, props, sets, vehicles
5. THE VFX_System SHALL enable coordinators to assign tasks to both shots and assets with specific task types
6. THE VFX_System SHALL support the following task types for shots: layout, animation, simulation, lighting, compositing
7. THE VFX_System SHALL support the following task types for assets: modeling, surfacing, rigging
8. WHEN a coordinator assigns a task, THE VFX_System SHALL set a deadline and assign it to an artist
9. THE VFX_System SHALL organize episodes within projects and provide episode-based navigation for shot management
10. THE VFX_System SHALL provide a tabbed interface for project pages with tabs for Overview, Shots, and Assets
11. WHEN a user navigates to the Shots tab within a project, THE VFX_System SHALL display an episode dropdown menu for episode selection
12. THE VFX_System SHALL allow users to switch between episodes within the Shots tab without full page navigation
13. THE VFX_System SHALL filter shots by selected episode when an episode is chosen from the dropdown
### Requirement 2.7
**User Story:** As a user, I want to view comprehensive shot information in an organized tabbed interface, so that I can access notes, tasks, assets, references, and design information efficiently.
#### Acceptance Criteria
1. WHEN a user selects a shot, THE VFX_System SHALL display a shot detail panel with comprehensive shot information
2. THE VFX_System SHALL organize shot information into five tabs: Notes, Tasks, Assets, References, and Design
3. THE VFX_System SHALL display a progress overview section above the tabs showing task completion status
4. WHEN a user clicks the Notes tab, THE VFX_System SHALL display production notes and comments related to the shot
5. WHEN a user clicks the Tasks tab, THE VFX_System SHALL display all tasks associated with the shot with status badges and assignment information
6. WHEN a user clicks the Assets tab, THE VFX_System SHALL display all assets linked to the shot
7. WHEN a user clicks the References tab, THE VFX_System SHALL display reference files (images, videos, documents) uploaded for the shot
8. WHEN a user clicks the Design tab, THE VFX_System SHALL display design information including camera notes, lighting notes, and animation notes
9. THE VFX_System SHALL allow coordinators and administrators to add notes, link assets, and edit design information
10. THE VFX_System SHALL allow all users to upload reference files for shots
11. THE VFX_System SHALL display appropriate empty states with helpful messages when tabs have no content
12. THE VFX_System SHALL provide action buttons in each tab based on user role permissions
### Requirement 3
**User Story:** As a coordinator, I want to create and manage episodes within the project settings, so that I can organize shots into logical production units before creating shots.
#### Acceptance Criteria
1. THE VFX_System SHALL provide episode management functionality within the project settings page
2. WHEN a coordinator accesses project settings, THE VFX_System SHALL display an episodes management section
3. THE VFX_System SHALL allow coordinators to create new episodes with name, episode number, and status
4. THE VFX_System SHALL allow coordinators to edit existing episode details including name, episode number, description, and status
5. THE VFX_System SHALL allow coordinators to delete episodes that have no associated shots
6. THE VFX_System SHALL prevent deletion of episodes that contain shots and display an appropriate error message
7. THE VFX_System SHALL display a list of all episodes for the project with their current status and shot count
8. THE VFX_System SHALL support the following episode statuses: planning, in_progress, on_hold, completed, cancelled
9. THE VFX_System SHALL sort episodes by episode number in ascending order by default
### Requirement 4
**User Story:** As an artist, I want to view my assigned tasks and deadlines, so that I can prioritize my work effectively.
#### Acceptance Criteria
1. WHEN an artist logs in, THE VFX_System SHALL display all tasks assigned to that artist
2. THE VFX_System SHALL show task deadlines with visual indicators for urgency
3. THE VFX_System SHALL display production notes associated with each task
4. THE VFX_System SHALL show the current status of each task (not started, in progress, submitted, approved, retake)
5. THE VFX_System SHALL allow artists to update task status to "in progress" when they begin work
### Requirement 5
**User Story:** As an artist, I want to submit my completed work for review, so that directors can evaluate and approve my shots.
#### Acceptance Criteria
1. WHEN an artist completes a task, THE VFX_System SHALL allow file upload for submission
2. THE VFX_System SHALL accept common media formats for VFX work (mov, mp4, exr, jpg, png)
3. WHEN a submission is uploaded, THE VFX_System SHALL automatically set the task status to "submitted"
4. THE VFX_System SHALL notify the assigned director when new submissions are available
5. THE VFX_System SHALL maintain version history for all submissions
### Requirement 6
**User Story:** As a director, I want to review submitted work and provide feedback, so that I can ensure quality standards are met.
#### Acceptance Criteria
1. WHEN a director accesses a submission, THE VFX_System SHALL display the media with playback controls
2. THE VFX_System SHALL allow directors to approve submissions or request retakes
3. WHEN a director requests a retake, THE VFX_System SHALL require written feedback explaining the changes needed
4. THE VFX_System SHALL notify the artist immediately when review decisions are made
5. WHEN a director approves work, THE VFX_System SHALL mark the task as completed
### Requirement 7
**User Story:** As a coordinator, I want to track production progress across all projects, so that I can identify bottlenecks and manage schedules.
#### Acceptance Criteria
1. THE VFX_System SHALL provide a dashboard showing overall project completion percentages
2. THE VFX_System SHALL display tasks that are overdue with clear visual indicators
3. THE VFX_System SHALL show workload distribution across all artists
4. THE VFX_System SHALL allow coordinators to add production notes to any task or shot
5. THE VFX_System SHALL generate reports on task completion rates by artist and task type
### Requirement 8
**User Story:** As a user, I want to access the system through a modern web interface, so that I can work efficiently from any device.
#### Acceptance Criteria
1. THE VFX_System SHALL provide a responsive web interface using Vue.js framework
2. THE VFX_System SHALL implement the Sidebar07 layout from shadcn-vue component library
3. THE VFX_System SHALL use shadcn-vue components for consistent UI design
4. THE VFX_System SHALL provide secure authentication with session management
5. THE VFX_System SHALL display different interface elements based on user role permissions
6. THE VFX_System SHALL provide a dark theme toggle that persists user preference across sessions
7. THE VFX_System SHALL support both light and dark themes with appropriate color schemes for extended work sessions
8. WHEN a user logs in, THE VFX_System SHALL load and display all available projects in the sidebar project switcher dropdown
9. THE VFX_System SHALL automatically fetch projects on application initialization and after successful authentication
### Requirement 9
**User Story:** As a coordinator, I want to assign department roles to artists within projects, so that I can match artists with appropriate tasks based on their specializations.
#### Acceptance Criteria
1. THE VFX_System SHALL allow coordinators to assign department roles to artists when adding them to projects
2. THE VFX_System SHALL support the following department roles: layout, animation, lighting, composite, modeling, rigging, surfacing
3. WHEN a coordinator assigns tasks, THE VFX_System SHALL filter available artists by matching department roles
4. THE VFX_System SHALL allow coordinators to modify artist department roles within projects
5. THE VFX_System SHALL display artist department roles in task assignment interfaces
### Requirement 10
**User Story:** As a system administrator, I want reliable data storage and API performance, so that the system can handle production workloads.
#### Acceptance Criteria
1. THE VFX_System SHALL use FastAPI framework for backend API development
2. THE VFX_System SHALL store all data in SQLite database with proper indexing
3. THE VFX_System SHALL implement proper database relationships between projects, shots, assets, and tasks
4. THE VFX_System SHALL provide RESTful API endpoints for all system operations
5. THE VFX_System SHALL handle file uploads with appropriate size limits and validation
### Requirement 11
**User Story:** As a developer, I want to have a specialized role that allows me to create integrations and automation tools, so that I can build custom solutions for the production pipeline.
#### Acceptance Criteria
1. THE VFX_System SHALL support a developer role with permissions to access all project data for integration purposes
2. THE VFX_System SHALL allow users with developer role to view all projects, tasks, and submissions for automation purposes
3. THE VFX_System SHALL prevent users with developer role from modifying production data unless explicitly granted additional permissions
4. THE VFX_System SHALL allow developers to create and manage their own API integrations
5. THE VFX_System SHALL display developer-specific interface elements for API management and integration tools
### Requirement 12
**User Story:** As a developer, I want to integrate external applications with the VFX system using API keys, so that I can automate workflows and connect third-party tools.
#### Acceptance Criteria
1. THE VFX_System SHALL allow users with developer role to generate API keys for their own applications
2. THE VFX_System SHALL allow users with admin permission to generate API keys for any external applications
3. THE VFX_System SHALL support API key authentication as an alternative to JWT tokens
4. WHEN an API key is used, THE VFX_System SHALL validate the key and associate it with the permissions of the user who created it
5. THE VFX_System SHALL allow users with developer role to revoke their own API keys
6. THE VFX_System SHALL allow users with admin permission to revoke any API keys when they are no longer needed
7. THE VFX_System SHALL log API key usage for security auditing purposes
8. THE VFX_System SHALL support scoped API keys with limited permissions for specific operations
9. THE VFX_System SHALL provide API key management interface for developers and users with admin permission to create, view, and delete keys
### Requirement 13
**User Story:** As a user with admin permission, I want to grant or revoke admin permission to other users, so that I can delegate administrative responsibilities while maintaining security.
#### Acceptance Criteria
1. THE VFX_System SHALL allow users with admin permission to grant admin permission to users of any functional role
2. THE VFX_System SHALL allow users with admin permission to revoke admin permission from other users
3. THE VFX_System SHALL display admin permission status separately from functional role in user management interfaces
4. THE VFX_System SHALL prevent users from revoking their own admin permission if they are the only admin user
5. THE VFX_System SHALL log all admin permission changes for security auditing purposes
### Requirement 14
**User Story:** As a coordinator, I want to define technical specifications for each project, so that all team members work with consistent production standards and delivery requirements.
#### Acceptance Criteria
1. WHEN a coordinator creates a project, THE VFX_System SHALL allow specification of frame rate in frames per second
2. THE VFX_System SHALL allow coordinators to define physical data drive paths for project file storage
3. THE VFX_System SHALL enable coordinators to specify publish storage paths for approved work
4. THE VFX_System SHALL allow coordinators to set delivery image resolution requirements
5. THE VFX_System SHALL enable coordinators to configure delivery movie resolution and format specifications for each shot department
6. THE VFX_System SHALL store all technical specifications as part of the project configuration
7. THE VFX_System SHALL display technical specifications to all project members for reference
### Requirement 14
**User Story:** As an artist, I want to access project technical specifications, so that I can ensure my work meets the required standards and delivery formats.
#### Acceptance Criteria
1. WHEN an artist views a project, THE VFX_System SHALL display the project frame rate specification
2. THE VFX_System SHALL show artists the appropriate data drive paths for their department
3. THE VFX_System SHALL display publish storage paths where approved work should be delivered
4. THE VFX_System SHALL show delivery image resolution requirements for final outputs
5. THE VFX_System SHALL display delivery movie resolution and format requirements specific to the artist's department
6. THE VFX_System SHALL display the global upload size limit during file submissions
7. THE VFX_System SHALL make technical specifications easily accessible from task and submission interfaces
### Requirement 15
**User Story:** As a coordinator, I want to modify project technical specifications during production, so that I can adapt to changing client requirements or technical constraints.
#### Acceptance Criteria
1. THE VFX_System SHALL allow coordinators to update frame rate specifications for existing projects
2. THE VFX_System SHALL enable coordinators to modify data drive paths when storage locations change
3. THE VFX_System SHALL allow coordinators to update publish storage paths as needed
4. THE VFX_System SHALL enable coordinators to adjust delivery image resolution requirements
5. THE VFX_System SHALL allow coordinators to modify delivery movie resolution and format specifications for each department
6. WHEN technical specifications are updated, THE VFX_System SHALL notify all project members of the changes
### Requirement 16
**User Story:** As a user with admin permission, I want to configure a global upload size limit for movie files, so that I can set consistent file size restrictions across all projects.
#### Acceptance Criteria
1. THE VFX_System SHALL allow users with admin permission to set a global upload size limit for movie files
2. THE VFX_System SHALL apply the global upload limit to all movie file submissions across all projects
3. THE VFX_System SHALL display the current upload size limit to artists during file submission
4. THE VFX_System SHALL validate file sizes against the global limit before allowing uploads
5. THE VFX_System SHALL provide a default upload size limit that can be customized by administrators
6. THE VFX_System SHALL reject file uploads that exceed the global size limit with clear error messages
### Requirement 17
**User Story:** As a coordinator, I want default tasks to be automatically created when I create assets, so that I can ensure consistent workflow setup and reduce manual task creation overhead.
#### Acceptance Criteria
1. WHEN a coordinator creates an asset, THE VFX_System SHALL automatically generate default tasks based on the asset category
2. THE VFX_System SHALL create modeling tasks for all asset categories (characters, props, sets, vehicles)
3. THE VFX_System SHALL create surfacing tasks for all asset categories (characters, props, sets, vehicles)
4. THE VFX_System SHALL create rigging tasks specifically for character and vehicle assets
5. THE VFX_System SHALL allow coordinators to customize which default tasks are created during asset creation
6. THE VFX_System SHALL set default task names following standard naming conventions (e.g., "Modeling", "Surfacing", "Rigging")
7. THE VFX_System SHALL leave default tasks unassigned until coordinators manually assign them to artists
### Requirement 18
**User Story:** As a coordinator, I want to attach reference images and documents to assets, shots, and tasks, so that artists have visual and technical references for their production work.
#### Acceptance Criteria
1. THE VFX_System SHALL allow coordinators to attach reference files to assets during creation and after creation
2. THE VFX_System SHALL allow coordinators to attach reference files to shots during creation and after creation
3. THE VFX_System SHALL allow coordinators to attach reference files to individual tasks
4. THE VFX_System SHALL support common reference file formats (jpg, png, tiff, exr, pdf, mov, mp4)
5. THE VFX_System SHALL display attached reference files in asset, shot, and task detail views for artist access
6. THE VFX_System SHALL allow coordinators to add descriptions and captions to reference files
7. THE VFX_System SHALL enable coordinators to update, replace, or remove reference files
8. THE VFX_System SHALL make reference files accessible to all artists assigned to related tasks
9. THE VFX_System SHALL organize reference files by type (images, documents, videos) for easy browsing
### Requirement 19
**User Story:** As a coordinator, I want to configure project-specific settings for upload locations and default task templates, so that I can customize workflows and file organization for each project's unique requirements.
#### Acceptance Criteria
1. THE VFX_System SHALL allow coordinators to configure upload data storage locations per project
2. THE VFX_System SHALL enable coordinators to define custom default task templates for asset creation per project
3. THE VFX_System SHALL allow coordinators to define custom default task templates for shot creation per project
4. THE VFX_System SHALL support different task templates for different asset categories within the same project
5. THE VFX_System SHALL support different task templates for different shot types within the same project
6. THE VFX_System SHALL allow coordinators to enable or disable specific default tasks per project
7. THE VFX_System SHALL apply project-specific upload locations to all file uploads within that project
8. THE VFX_System SHALL use project-specific default task templates when creating new assets and shots
9. THE VFX_System SHALL provide a project settings interface for coordinators to manage these configurations
### Requirement 20
**User Story:** As a coordinator, I want to view asset task status details and thumbnails in the asset list table, so that I can quickly assess production progress and visually identify assets.
#### Acceptance Criteria
1. THE VFX_System SHALL display individual task status for each asset in the asset list table view
2. THE VFX_System SHALL show task status using visual indicators (color-coded badges) with consistent width for proper alignment
3. THE VFX_System SHALL provide a comprehensive column visibility control dropdown menu to show or hide individual columns
4. THE VFX_System SHALL include a thumbnail column that displays visual previews of assets
5. THE VFX_System SHALL provide a separate thumbnail toggle switch to show or hide the thumbnail column
6. THE VFX_System SHALL allow sorting of assets by individual task status (not started, in progress, submitted, approved, retake)
7. THE VFX_System SHALL display task status for all standard task types (modeling, surfacing, rigging) when applicable to the asset category
8. THE VFX_System SHALL show "N/A" or hide task columns for task types that don't apply to specific asset categories
9. THE VFX_System SHALL update task status display in real-time when task status changes
10. THE VFX_System SHALL provide filtering options to show only assets with specific task status combinations
11. THE VFX_System SHALL maintain column visibility and thumbnail display preferences per user session
12. THE VFX_System SHALL remove the task count column from the asset table to focus on individual task status
### Requirement 21
**User Story:** As a coordinator, I want to add, remove, and edit custom task types for assets and shots, so that I can adapt the production pipeline to project-specific workflows and departments beyond the standard task types.
#### Acceptance Criteria
1. THE VFX_System SHALL allow coordinators to create custom task types with unique names for asset workflows
2. THE VFX_System SHALL allow coordinators to create custom task types with unique names for shot workflows
3. THE VFX_System SHALL enable coordinators to edit existing task type names for both assets and shots
4. THE VFX_System SHALL allow coordinators to remove custom task types that are not currently in use
5. THE VFX_System SHALL prevent deletion of task types that have active tasks assigned to them
6. THE VFX_System SHALL display all available task types (standard and custom) in the task template editor
7. THE VFX_System SHALL persist custom task types per project for use in asset and shot creation
8. THE VFX_System SHALL validate task type names to ensure uniqueness within asset or shot task lists
9. THE VFX_System SHALL apply custom task types to the task template configuration interface
10. THE VFX_System SHALL include custom task types in the asset and shot creation workflows when enabled in templates
### Requirement 22
**User Story:** As a user, I want to see avatars for all team members and users throughout the application, so that I can quickly identify people visually
#### Acceptance Criteria
1. WHEN the System displays a user in any list or card, THE System SHALL display the user's avatar image
2. WHERE a user has uploaded a custom avatar, THE System SHALL display the uploaded avatar image
3. WHERE a user has not uploaded an avatar, THE System SHALL display a generated avatar based on the user's initials
4. THE System SHALL display avatars consistently across all user-related components including user management tables, team member lists, task assignments, activity feeds, notes, submissions, and attachments
5. THE System SHALL provide fallback avatar display using initials when avatar images fail to load
### Requirement 23
**User Story:** As a user, I want to view detailed shot information with organized tabs, so that I can access all shot-related data in one place
#### Acceptance Criteria
1. WHEN a user selects a shot, THE System SHALL display a shot detail panel with tabbed navigation
2. THE System SHALL display shot metadata including name, frame range, status, and description in the detail panel header
3. THE System SHALL provide a Tasks tab that displays all tasks associated with the selected shot
4. THE System SHALL provide a Notes tab that displays task updates and allows users to add department-specific notes
5. THE System SHALL provide References and Design tabs for additional shot information
6. THE System SHALL display progress overview showing task completion statistics for the shot
### Requirement 24
**User Story:** As a developer, I want the system to filter tasks by shot or asset, so that I can retrieve relevant tasks efficiently
#### Acceptance Criteria
1. THE System SHALL accept shot_id as a query parameter in the GET /tasks endpoint
2. THE System SHALL accept asset_id as a query parameter in the GET /tasks endpoint
3. WHEN shot_id is provided, THE System SHALL return only tasks associated with that shot
4. WHEN asset_id is provided, THE System SHALL return only tasks associated with that asset
5. THE System SHALL support combining shot_id or asset_id filters with other existing filters
### Requirement 25
**User Story:** As a coordinator or director, I want to view all project tasks in a unified data table with comprehensive filtering options, so that I can track and manage all shot and asset tasks across the entire project from a single view.
#### Acceptance Criteria
1. THE VFX_System SHALL provide a Tasks tab in the project navigation tabs alongside Overview, Shots, and Assets tabs
2. WHEN a user navigates to the Tasks tab, THE VFX_System SHALL display all tasks for the current project in a data table format
3. THE VFX_System SHALL include tasks from both shots and assets in the unified task table
4. THE VFX_System SHALL display the following columns in the task table: Task Name, Type, Status, Shot/Asset, Episode, Assignee, Deadline, and Created Date
5. THE VFX_System SHALL provide filtering options for task status (not started, in progress, submitted, approved, retake)
6. THE VFX_System SHALL provide filtering options for task type (layout, animation, lighting, compositing, modeling, surfacing, rigging, and custom types)
7. THE VFX_System SHALL provide filtering options for episode to show tasks from specific episodes
8. THE VFX_System SHALL provide filtering options for assignee to show tasks assigned to specific artists
9. THE VFX_System SHALL provide a search field to filter tasks by name or description
10. THE VFX_System SHALL allow sorting by any column in the task table
11. THE VFX_System SHALL display task status with color-coded badges for visual clarity
12. WHEN a user clicks on a task row, THE VFX_System SHALL open the task detail panel
13. THE VFX_System SHALL indicate whether each task belongs to a shot or asset in the table
14. THE VFX_System SHALL display the shot name or asset name associated with each task
15. THE VFX_System SHALL show episode information for shot-related tasks
16. THE VFX_System SHALL provide column visibility controls to show or hide specific columns
17. THE VFX_System SHALL persist filter and column visibility preferences per user session
18. THE VFX_System SHALL display task count and filtered task count in the table header
19. THE VFX_System SHALL support bulk operations on selected tasks (status update, reassignment) for coordinators
20. THE VFX_System SHALL provide export functionality to download the filtered task list as CSV or Excel format
### Requirement 26
**User Story:** As a user, I want to view detailed asset information with organized tabs when I select an asset in the asset browser, so that I can access all asset-related data including tasks, notes, and references in one place.
#### Acceptance Criteria
1. WHEN a user clicks on an asset card in the asset browser, THE VFX_System SHALL display an asset detail panel
2. THE VFX_System SHALL display asset metadata including name, category, status, and description in the detail panel header
3. THE VFX_System SHALL provide a Tasks tab that displays all tasks associated with the selected asset
4. THE VFX_System SHALL provide a Notes tab that displays task updates and allows users to add production notes
5. THE VFX_System SHALL provide a References tab for uploading and viewing reference images and files
6. THE VFX_System SHALL provide a Versions tab for tracking asset version history
7. THE VFX_System SHALL display progress overview showing task completion statistics for the asset
8. THE VFX_System SHALL allow users to close the detail panel and return to the asset browser
9. THE VFX_System SHALL load asset tasks automatically when the Tasks tab is selected
10. THE VFX_System SHALL support role-based permissions for adding notes and uploading references
11. THE VFX_System SHALL display the asset detail panel as a slide-in panel from the right side
12. THE VFX_System SHALL maintain the asset browser state when the detail panel is opened or closed
### Requirement 2.1
**User Story:** As a coordinator, I want to upload a thumbnail image for each project in the project settings, so that projects can be visually identified on the projects page with custom imagery.
#### Acceptance Criteria
1. THE VFX_System SHALL provide a thumbnail upload section in the project settings page
2. THE VFX_System SHALL allow coordinators and administrators to upload project thumbnail images
3. THE VFX_System SHALL accept common image formats for thumbnails (jpg, jpeg, png, gif, webp)
4. THE VFX_System SHALL resize uploaded thumbnails to maintain aspect ratio while fitting within maximum dimensions
5. THE VFX_System SHALL limit thumbnail file size to a maximum of 10MB
6. WHEN a project thumbnail is uploaded, THE VFX_System SHALL store both the original and a resized version
7. THE VFX_System SHALL display the project thumbnail on project cards in the projects list page
8. WHEN no thumbnail is uploaded, THE VFX_System SHALL display a default placeholder image or project initials
9. THE VFX_System SHALL allow coordinators to replace existing thumbnails with new images
10. THE VFX_System SHALL allow coordinators to remove thumbnails and revert to the default placeholder
11. THE VFX_System SHALL display a preview of the current thumbnail in the project settings
12. THE VFX_System SHALL provide visual feedback during thumbnail upload and processing
.kiro/specs/vfx-project-management/shot-data-table-implementation.md
+157
View File
@@ -0,0 +1,157 @@
# Shot Data Table Implementation with TanStack Table
## Overview
Successfully refactored the shot table view to use shadcn-vue Data Table pattern with TanStack Table (@tanstack/vue-table). This provides a more robust, performant, and feature-rich table implementation following industry best practices.
## What Changed
### New Dependencies
- **@tanstack/vue-table**: Headless table library for Vue 3 with powerful sorting, filtering, and column management
### New Files Created
1. **frontend/src/components/shot/columns.ts**
- Column definitions using TanStack Table's ColumnDef type
- Dynamic column generation for task types
- Integrated action menus and badges
- Type-safe column configuration
2. **frontend/src/components/shot/ShotsDataTable.vue**
- Data table component using TanStack Table
- Handles sorting state
- Manages column visibility
- Emits row click events
- Fully typed with TypeScript
### Updated Files
1. **frontend/src/components/shot/ShotBrowser.vue**
- Replaced custom table with TanStack Table implementation
- Updated state management to use SortingState and VisibilityState
- Simplified sorting logic (handled by TanStack Table)
- Added shotColumns computed property
- Integrated with new data table component
2. **frontend/src/components/shot/ShotColumnVisibilityControl.vue**
- Updated to work with TanStack Table's VisibilityState
- Added isColumnVisible helper function
- Maintains same UI/UX as asset page
## Key Features
### TanStack Table Benefits
1. **Type Safety**: Full TypeScript support with proper typing
2. **Performance**: Optimized rendering and state management
3. **Flexibility**: Headless UI allows custom styling
4. **Sorting**: Built-in sorting with multi-column support
5. **Column Management**: Easy show/hide columns
6. **Row Selection**: Built-in row selection state
7. **Extensibility**: Easy to add pagination, filtering, etc.
### Column Definitions
The `columns.ts` file defines all columns:
- **Select**: Checkbox column for row selection
- **Shot Name**: With camera icon
- **Episode**: Badge showing episode name
- **Frame Range**: Shows start-end with frame count
- **Status**: Color-coded status badge
- **Task Status Columns**: Dynamically generated from allTaskTypes
- **Description**: Truncated text
- **Actions**: Dropdown menu with edit/delete/view tasks
### State Management
Uses TanStack Table state types:
- **SortingState**: Array of sort configurations
- **VisibilityState**: Object mapping column IDs to visibility boolean
- Session storage persistence for column visibility
### Integration Pattern
```typescript
// Column definitions with metadata
const shotColumns = computed(() => {
const meta: ShotColumnMeta = {
episodes: episodes.value,
onEdit: editShot,
onDelete: deleteShot,
onViewTasks: selectShot,
}
return createShotColumns(allTaskTypes.value, meta)
})
// Data table usage
<ShotsDataTable
:columns="shotColumns"
:data="filteredShots"
:sorting="sorting"
:column-visibility="columnVisibility"
:all-task-types="allTaskTypes"
@update:sorting="sorting = $event"
@update:column-visibility="handleColumnVisibilityChange"
@row-click="handleRowClick"
/>
```
## Advantages Over Previous Implementation
### Before (Custom Table)
- Manual sorting implementation
- Custom column visibility logic
- More code to maintain
- Less type safety
- Manual state management
### After (TanStack Table)
- Built-in sorting with proper state management
- Standard column visibility pattern
- Less custom code
- Full TypeScript support
- Industry-standard patterns
- Better performance
- Easier to extend (pagination, filtering, etc.)
## Consistency with Asset Page
The shot table now follows the same patterns as the asset table:
- Same column visibility control UI
- Same sorting behavior
- Same row selection patterns
- Consistent badge styling
- Matching action menus
## Future Enhancements
With TanStack Table, these features are now easy to add:
1. **Pagination**: Built-in pagination support
2. **Global Filtering**: Search across all columns
3. **Column Resizing**: Drag to resize columns
4. **Column Reordering**: Drag and drop columns
5. **Row Expansion**: Expandable rows for details
6. **Virtual Scrolling**: For thousands of rows
7. **Export**: Easy data export functionality
## Testing
The implementation maintains all existing functionality:
- ✅ Column sorting works
- ✅ Column visibility control works
- ✅ Row selection works
- ✅ Task status badges display correctly
- ✅ Action menus work
- ✅ Episode names display correctly
- ✅ Session storage persistence works
- ✅ Integration with ShotBrowser works
## Migration Notes
No breaking changes for users:
- Same UI/UX
- Same features
- Better performance
- More maintainable code
The refactoring is complete and production-ready!
.kiro/specs/vfx-project-management/shot-detail-panel-spec-update.md
+178
View File
@@ -0,0 +1,178 @@
# Shot Detail Panel Specification Update
## Date
November 17, 2025
## Overview
Updated the VFX Project Management System specification documents to include the new Shot Detail Panel with tabbed interface feature.
## Documents Updated
### 1. Requirements Document
**File**: `.kiro/specs/vfx-project-management/requirements.md`
**Added**: Requirement 2.7 - Shot Detail Panel with Tabbed Interface
**User Story**: As a user, I want to view comprehensive shot information in an organized tabbed interface, so that I can access notes, tasks, assets, references, and design information efficiently.
**Acceptance Criteria** (12 total):
1. Display shot detail panel when shot is selected
2. Organize information into five tabs: Notes, Tasks, Assets, References, Design
3. Display progress overview above tabs
4. Notes tab displays production notes and comments
5. Tasks tab displays all shot tasks with status and assignment
6. Assets tab displays linked assets
7. References tab displays reference files
8. Design tab displays camera, lighting, and animation notes
9. Coordinators/admins can add notes, link assets, edit design
10. All users can upload reference files
11. Display empty states with helpful messages
12. Provide role-based action buttons
### 2. Design Document
**File**: `.kiro/specs/vfx-project-management/design.md`
**Added**:
1. **ShotDetailPanel** to Feature Components list
2. Detailed "Shot Detail Panel Design" section with:
- Layout structure (header, info, progress, tabs)
- Tab specifications for all 5 tabs
- Permission model
- User experience guidelines
**Design Specifications Include**:
- Header with shot name, frame range, status, actions
- Shot information section
- Progress overview (always visible)
- Five tabs with specific purposes and content
- Role-based permissions for each action
- Empty states for all tabs
- Icons for visual identification
### 3. Tasks Document
**File**: `.kiro/specs/vfx-project-management/tasks.md`
**Updated**: Task 23 - Shot Detail Panel Enhancement
**Marked as Complete** with detailed implementation notes:
- Five tabs implemented (Notes, Tasks, Assets, References, Design)
- Progress overview above tabs
- Role-based permission checks
- New event emitters for tab actions
- Bug fix for shotService.getShot() method
- References all 12 acceptance criteria from Requirement 2.7
## Feature Summary
### Tabs Implemented
| Tab | Purpose | Actions | Permissions |
|-----|---------|---------|-------------|
| Notes | Production notes | Add Note | Coordinators/Admins |
| Tasks | Task management | Add Task | Coordinators/Admins |
| Assets | Linked assets | Link Asset | Coordinators/Admins |
| References | Reference files | Upload Reference | All Users |
| Design | Design specs | Edit Design | Coordinators/Admins |
### Technical Implementation
**Component**: `frontend/src/components/shot/ShotDetailPanel.vue`
**Key Features**:
- shadcn-vue Tabs component
- Progress bar with task status summary
- Role-based action buttons
- Empty states for all tabs
- Event emitters for parent component integration
- Loading states for async operations
**New Event Emitters**:
- `create-note` - Triggered when "Add Note" is clicked
- `link-asset` - Triggered when "Link Asset" is clicked
- `upload-reference` - Triggered when "Upload Reference" is clicked
- `edit-design` - Triggered when "Edit Design" is clicked
**Permission Computed Properties**:
- `canCreateNote` - Coordinators & Admins
- `canCreateTask` - Coordinators & Admins
- `canLinkAssets` - Coordinators & Admins
- `canUploadReferences` - All Users
- `canEditDesign` - Coordinators & Admins
### User Experience
**Default Behavior**:
- Default tab: Tasks (most frequently accessed)
- Progress overview always visible
- Smooth tab transitions
- Helpful empty states
**Visual Design**:
- Consistent with shadcn-vue design system
- Icons for each tab (MessageSquare, ListTodo, Package, Image, Edit)
- Status badges for tasks
- Progress bar with color-coded status counts
## Next Steps for Full Implementation
### Backend Requirements
1. **Notes Functionality**:
- API endpoints for notes CRUD
- Notes model (if not exists)
- Notes display and creation
2. **Asset Linking**:
- Shot-asset relationship model
- API endpoints for linking/unlinking
- Asset display in shot context
3. **Reference Files**:
- ReferenceFile model
- File upload endpoints
- File gallery display
- File type validation
4. **Design Notes**:
- Design fields in Shot model
- API endpoints for design updates
- Design editing form
### Frontend Enhancements
1. Real-time updates for notes
2. Drag-and-drop for reference uploads
3. Image preview/lightbox for references
4. Rich text editor for design notes
5. Asset search/filter for linking
## Related Documentation
- Implementation: `frontend/docs/shot-detail-tabs-implementation.md`
- Test File: `frontend/test-shot-detail-tabs.html`
- Component: `frontend/src/components/shot/ShotDetailPanel.vue`
## Compliance
### Requirements Coverage
✅ All 12 acceptance criteria from Requirement 2.7 are addressed in the implementation
### Design Alignment
✅ Implementation follows the design specifications exactly
✅ Uses shadcn-vue components as specified
✅ Implements role-based permissions as designed
### Task Completion
✅ Task 23.1 marked as complete
✅ All sub-tasks documented
✅ Bug fixes noted
## Version History
- **v1.0** (November 17, 2025): Initial specification update with tabbed interface
- Added Requirement 2.7
- Added design specifications
- Updated task completion status
## Notes
- The UI is complete and functional
- Tasks tab is fully operational with existing backend
- Other tabs have UI ready but need backend integration
- Empty states guide users on next actions
- Permission model prevents unauthorized operations
.kiro/specs/vfx-project-management/shot-table-enhanced-spec.md
+335
View File
@@ -0,0 +1,335 @@
# Shot Table Enhanced Specification - 2024 Update
## Overview
This specification documents the comprehensive shot table implementation with all recent enhancements and improvements. The shot table provides a powerful, feature-rich interface for managing shots with task status tracking, advanced filtering, sorting, and bulk operations.
## Current Implementation Status
### ✅ Completed Features
1. **TanStack Table Integration** - Modern, performant table implementation
2. **Directional Sort Icons** - Visual feedback for sort direction (up/down arrows)
3. **Column Visibility Control** - Unified popover pattern matching task page
4. **Task Status Filtering** - Advanced multi-select popover with search
5. **Toolbar Restructuring** - Consistent layout matching task page structure
6. **Full Width Layout** - Optimized screen space utilization
7. **Cascade Deletion** - Safe shot deletion with task confirmation
8. **Custom Status Support** - Integration with project-specific task statuses
9. **Enhanced UI Components** - Consistent heights and icon-only buttons
10. **Independent Frames Column** - Separate frame count display
## User Stories
### User Story 1: Enhanced Shot Table Display
**As a** coordinator
**I want** to view shots in a comprehensive table with advanced features
**So that** I can efficiently manage shot production with full visibility
**Acceptance Criteria:**
1. ✅ WHEN viewing shots, THE system SHALL display a table with sortable columns showing directional sort icons
2. ✅ WHEN sorting columns, THE system SHALL show up arrow for ascending, down arrow for descending, and up-down arrow for no sort
3. ✅ WHEN displaying frame information, THE system SHALL show both frame range (1001-1120) and frame count (120) in separate columns
4. ✅ WHEN viewing task statuses, THE system SHALL display custom project statuses with correct names and colors
5. ✅ WHEN the table loads, THE system SHALL use full screen width for optimal space utilization
### User Story 2: Advanced Filtering and Search
**As a** user
**I want** sophisticated filtering options with visual feedback
**So that** I can quickly find relevant shots
**Acceptance Criteria:**
1. ✅ WHEN using task status filter, THE system SHALL provide a popover with multi-select checkboxes
2. ✅ WHEN filtering by status, THE system SHALL show search functionality within the filter
3. ✅ WHEN filters are active, THE system SHALL display a badge counter showing number of active filters
4. ✅ WHEN using search, THE system SHALL position the search field on the right side of the toolbar
5. ✅ WHEN episode filtering, THE system SHALL provide a popover dropdown in the toolbar
### User Story 3: Consistent UI and Layout
**As a** user
**I want** consistent interface elements across all pages
**So that** I have a familiar and predictable experience
**Acceptance Criteria:**
1. ✅ WHEN viewing the toolbar, THE system SHALL ensure all components have consistent 32px height
2. ✅ WHEN using action buttons, THE system SHALL display icons only without text labels
3. ✅ WHEN accessing filters, THE system SHALL use the same popover + command pattern as task page
4. ✅ WHEN viewing the toolbar structure, THE system SHALL match the task page layout exactly
5. ✅ WHEN using column visibility, THE system SHALL provide the same interface as other data tables
### User Story 4: Safe Deletion with Cascade Confirmation
**As a** coordinator
**I want** comprehensive deletion confirmation with task details
**So that** I can safely delete shots while understanding the impact
**Acceptance Criteria:**
1. ✅ WHEN deleting a shot, THE system SHALL show a confirmation dialog with all associated tasks
2. ✅ WHEN viewing task details in deletion dialog, THE system SHALL display task status using TaskStatusBadge component
3. ✅ WHEN confirming deletion, THE system SHALL require typing the shot name for confirmation
4. ✅ WHEN deletion is confirmed, THE system SHALL cascade delete all associated tasks
5. ✅ WHEN deletion completes, THE system SHALL show success message with count of deleted tasks
### User Story 5: Custom Status Integration
**As a** project manager
**I want** custom task statuses to display correctly throughout the interface
**So that** project-specific workflows are properly supported
**Acceptance Criteria:**
1. ✅ WHEN viewing task statuses, THE system SHALL fetch and display custom project statuses
2. ✅ WHEN showing status badges, THE system SHALL use correct custom status names and colors
3. ✅ WHEN filtering by status, THE system SHALL include both system and custom statuses
4. ✅ WHEN displaying status in dialogs, THE system SHALL use the enhanced TaskStatusBadge component
5. ✅ WHEN status data is unavailable, THE system SHALL gracefully fall back to string display
## Technical Implementation
### Component Architecture
```
ShotBrowser.vue (Main Container)
├── ShotTableToolbar.vue (Sticky Toolbar)
│ ├── Episode Filter (Popover)
│ ├── Task Status Filter (Popover + Command)
│ ├── Column Visibility (Popover + Command)
│ ├── Search Input (Right-aligned)
│ └── Action Buttons (Icon-only)
├── ShotsDataTable.vue (TanStack Table)
│ └── columns.ts (Column Definitions)
└── ShotDeleteConfirmDialog.vue (Enhanced Deletion)
└── TaskStatusBadge.vue (Status Display)
```
### Key Technical Features
#### 1. TanStack Table Integration
- **Type Safety**: Full TypeScript support with proper column definitions
- **Performance**: Optimized rendering for large datasets
- **Sorting**: Built-in sorting with directional icons
- **Column Management**: Robust show/hide functionality
- **State Management**: Proper sorting and visibility state handling
#### 2. Enhanced Column Definitions
```typescript
// Directional sort icons
const getSortIcon = (sortDirection: false | 'asc' | 'desc') => {
if (sortDirection === 'asc') return h(ArrowUp, { class: 'ml-2 h-4 w-4' })
if (sortDirection === 'desc') return h(ArrowDown, { class: 'ml-2 h-4 w-4' })
return h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })
}
// Independent frames column
{
accessorKey: 'frame_end',
id: 'frames',
header: ({ column }) => h(Button, {
variant: 'ghost',
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
}, () => ['Frames', getSortIcon(column.getIsSorted())]),
cell: ({ row }) => {
const frameCount = row.original.frame_end - row.original.frame_start + 1
return h('span', { class: 'text-sm font-medium' }, frameCount.toString())
},
}
```
#### 3. Advanced Filtering System
```vue
<!-- Task Status Filter with Multi-select -->
<Popover v-model:open="isOpen">
<PopoverTrigger asChild>
<Button variant="outline" size="sm" class="h-8">
<Filter class="h-4 w-4 mr-2" />
Task Status
<Badge v-if="selectedCount > 0" class="ml-2">{{ selectedCount }}</Badge>
</Button>
</PopoverTrigger>
<PopoverContent class="w-64 p-0">
<Command>
<CommandInput placeholder="Search statuses..." />
<CommandList>
<!-- Status options with checkboxes -->
</CommandList>
</Command>
</PopoverContent>
</Popover>
```
#### 4. Custom Status Integration
```typescript
// Status mapping for proper display
const statusMap = computed(() => {
if (!allTaskStatuses.value) return new Map()
const map = new Map()
// Add system statuses
allTaskStatuses.value.system_statuses.forEach(status => {
map.set(status.id, {
id: status.id,
name: status.name,
color: status.color,
is_system: status.is_system
})
})
// Add custom statuses
allTaskStatuses.value.statuses.forEach(status => {
map.set(status.id, {
id: status.id,
name: status.name,
color: status.color,
is_system: false
})
})
return map
})
```
#### 5. Enhanced Deletion Dialog
```vue
<!-- Task information with status badges -->
<div v-for="task in tasks" :key="task.id" class="flex items-center justify-between p-3">
<div class="flex-1">
<div class="font-medium">{{ task.name }}</div>
<div class="flex items-center gap-2 mt-1">
<span class="text-sm text-muted-foreground">{{ task.task_type }}</span>
<TaskStatusBadge :status="getStatusForTask(task.status)" compact />
</div>
</div>
<div v-if="task.assigned_user" class="text-sm text-muted-foreground">
Assigned to: {{ task.assigned_user.name || task.assigned_user.email }}
</div>
</div>
```
## Design Patterns
### 1. Consistent Component Heights
All toolbar components use `h-8` class (32px height) for visual consistency:
- Filter buttons: `h-8`
- Search input: `h-8`
- Action buttons: `h-8 w-8` (square)
- Dropdown triggers: `h-8`
### 2. Icon-Only Action Buttons
Action buttons display only icons for clean, compact design:
```vue
<Button variant="outline" size="sm" class="h-8 w-8 p-0">
<Plus class="h-4 w-4" />
</Button>
```
### 3. Unified Filter Pattern
All filters use the same Popover + Command pattern:
- Consistent trigger button styling
- Same popover content structure
- Unified search functionality
- Badge counters for active filters
### 4. Full Width Layout
Optimized screen space utilization:
- Removed container padding restrictions
- Full width toolbar and table
- Proper spacing only where needed
- Responsive design maintained
## Backend Integration
### Enhanced Shot Deletion
```python
@router.get("/{shot_id}/deletion-info")
async def get_shot_deletion_info(shot_id: int, db: Session = Depends(get_db)):
"""Get information about what will be deleted with the shot"""
# Returns task count, task details, and user assignments
@router.delete("/{shot_id}")
async def delete_shot(shot_id: int, force: bool = False, db: Session = Depends(get_db)):
"""Delete shot with optional cascade deletion of tasks"""
# When force=true, deletes all associated tasks
```
### Custom Status Support
Integration with custom task status service:
- Fetches project-specific statuses
- Maps status IDs to display objects
- Handles both system and custom statuses
- Graceful fallback for missing statuses
## Performance Optimizations
### 1. Efficient State Management
- Session storage for column visibility
- Optimized re-renders with computed properties
- Proper Vue reactivity patterns
### 2. TanStack Table Benefits
- Virtual scrolling capability
- Optimized sorting algorithms
- Efficient column management
- Minimal re-renders
### 3. Smart Data Loading
- Fetch custom statuses only when needed
- Cache status mappings
- Efficient task status queries
## Testing Strategy
### Completed Testing
1. ✅ Sort direction icons display correctly
2. ✅ Column visibility persists across sessions
3. ✅ Task status filtering works with custom statuses
4. ✅ Deletion dialog shows correct task information
5. ✅ Toolbar layout matches task page structure
6. ✅ Full width layout works on all screen sizes
7. ✅ Custom status colors display properly
8. ✅ Cascade deletion removes all associated tasks
### Integration Points
- Shot table integrates with project shots view
- Detail panel opens correctly from table rows
- Episode filtering works across all view modes
- Search functionality works with all filters
- Bulk operations maintain selection state
## Future Enhancements
### Planned Improvements
1. **Bulk Shot Operations** - Multi-select with bulk actions
2. **Advanced Search** - Search across multiple fields
3. **Export Functionality** - CSV/Excel export
4. **Column Reordering** - Drag and drop columns
5. **Saved Views** - Save custom table configurations
6. **Real-time Updates** - WebSocket integration
7. **Performance Monitoring** - Track table performance metrics
### Technical Debt
1. Consider extracting common filter patterns into reusable composables
2. Optimize custom status fetching with caching
3. Add comprehensive error handling for edge cases
4. Implement loading states for better UX
## Success Metrics
### Achieved Goals
1. ✅ **Usability**: Consistent 32px component heights improve visual harmony
2. ✅ **Functionality**: Directional sort icons provide clear user feedback
3. ✅ **Safety**: Enhanced deletion dialog prevents accidental data loss
4. ✅ **Flexibility**: Column visibility and filtering support diverse workflows
5. ✅ **Performance**: TanStack Table handles large datasets efficiently
6. ✅ **Consistency**: UI patterns match across all data tables
7. ✅ **Customization**: Custom status support enables project-specific workflows
### User Feedback Integration
- Toolbar restructuring based on task page consistency request
- Search field positioning based on user preference
- Icon-only buttons for cleaner interface
- Full width layout for better space utilization
- Enhanced deletion confirmation for safety
## Conclusion
The shot table implementation represents a comprehensive, production-ready solution that addresses all user requirements while maintaining high code quality and performance standards. The implementation follows modern Vue.js and TypeScript best practices, integrates seamlessly with the existing application architecture, and provides a solid foundation for future enhancements.
The specification captures the current state of implementation and serves as a reference for maintenance, testing, and future development efforts.
.kiro/specs/vfx-project-management/shot-table-summary.md
+145
View File
@@ -0,0 +1,145 @@
# Shot Table View Feature - Summary
## Overview
Created comprehensive specification for implementing a shot table view with task status display, similar to the existing asset table functionality.
## Documents Created/Updated
### 1. New Spec Document
**File**: `.kiro/specs/vfx-project-management/shot-table-view-spec.md`
Complete specification including:
- 5 detailed user stories with acceptance criteria
- Data model definitions
- Backend API changes
- Frontend component designs
- UI/UX specifications
- Implementation plan (5 phases)
- Testing strategy
- Success criteria
- Future enhancements
### 2. Updated Design Document
**File**: `.kiro/specs/vfx-project-management/design.md`
Added new section: **Shot Table with Task Status Display**
- Task status columns for shot task types
- Column visibility controls
- Status filtering and sorting
- Episode and frame range display
- Custom task type support
- Matches asset table design patterns
### 3. Updated Tasks Document
**File**: `.kiro/specs/vfx-project-management/tasks.md`
Added **Task 20: Shot table view with task status display**
5 subtasks:
- 20.1: Enhance backend shot list endpoint with task status
- 20.2: Create shot table view component
- 20.3: Implement column visibility control for shots
- 20.4: Add task status filtering and sorting
- 20.5: Integrate shot table with project shots view
## Key Features
### Backend Enhancements
- Enhanced `ShotListResponse` with `task_status` dict and `task_details` list
- Task status filtering parameter
- Efficient query to include all task information
### Frontend Components
- **ShotsTableView.vue**: Main table component
- **ColumnVisibilityControl**: Reusable column toggle (adapt from assets)
- **TaskStatusFilter**: Reusable status filter (adapt from assets)
- **TaskStatusBadge**: Consistent status display
### User Capabilities
1. View shots in table format with task status columns
2. Show/hide specific columns
3. Filter shots by task status
4. Sort by any column
5. Click shot to view details
6. Session persistence for preferences
## Design Principles
### Consistency
- Matches asset table design and behavior
- Reuses existing components where possible
- Consistent 130px badge width
- Same color coding for status
### Usability
- Quick visual assessment of shot progress
- Customizable view for different workflows
- Efficient filtering and sorting
- Seamless integration with existing UI
### Performance
- Efficient backend queries
- Session storage for preferences
- Optimized rendering for 100+ shots
- Horizontal scroll for many columns
## Implementation Approach
### Phase 1: Backend (Task 20.1)
Enhance the shots endpoint to return task status information
### Phase 2: Table Component (Task 20.2)
Build the core table view with all columns
### Phase 3: Column Controls (Task 20.3)
Add column visibility management
### Phase 4: Filtering & Sorting (Task 20.4)
Implement status filtering and column sorting
### Phase 5: Integration (Task 20.5)
Wire everything together in the shots view
## Next Steps
1. Review the spec document for completeness
2. Prioritize task 20 in the implementation backlog
3. Begin with task 20.1 (backend enhancement)
4. Iterate through subtasks sequentially
5. Test each phase before moving to the next
## Benefits
### For Coordinators
- Quick overview of shot production status
- Easy identification of bottlenecks
- Efficient progress tracking
### For Directors
- Clear view of shots ready for review
- Filter by status to prioritize reviews
- Track overall production progress
### For Artists
- See which shots need attention
- Understand production priorities
- Track their assigned shots
## Technical Notes
- Reuses patterns from asset table implementation
- Leverages existing task status infrastructure
- Compatible with custom task types
- Maintains backward compatibility
- No breaking changes to existing functionality
## Estimated Effort
- Backend: 4-6 hours
- Frontend Table: 6-8 hours
- Column Controls: 2-3 hours
- Filtering/Sorting: 3-4 hours
- Integration: 2-3 hours
- Testing: 3-4 hours
**Total**: ~20-28 hours of development time
.kiro/specs/vfx-project-management/shot-table-view-spec.md
+282
View File
@@ -0,0 +1,282 @@
# Shot Table View with Task Status Display
## Overview
Implement a table view for shots similar to the asset browser, displaying shot information with individual task status columns, column visibility controls, and task status filtering. This provides coordinators and directors with a comprehensive overview of shot production progress.
## Requirements
### User Story 1: Shot Table Display
**As a** coordinator
**I want** to view shots in a table format with task status columns
**So that** I can quickly assess production progress across all shots
**Acceptance Criteria:**
1. WHEN viewing the shots tab, THE System SHALL display shots in a table format with columns for shot name, episode, frame range, status, and individual task status
2. WHEN a shot has tasks, THE System SHALL display the status of each task type in separate columns
3. WHEN a shot task is not started, THE System SHALL display "Not Started" badge in the corresponding task column
4. WHEN displaying task status, THE System SHALL use consistent color-coded badges matching the asset table design
5. WHEN the table loads, THE System SHALL display all standard shot task types (layout, animation, simulation, lighting, compositing) plus any custom task types
### User Story 2: Column Visibility Control
**As a** user
**I want** to show/hide specific columns in the shot table
**So that** I can focus on relevant information for my workflow
**Acceptance Criteria:**
1. WHEN viewing the shot table, THE System SHALL provide a column visibility dropdown control
2. WHEN the user toggles a column visibility, THE System SHALL immediately show or hide that column
3. WHEN the user changes column visibility, THE System SHALL persist the preference for the current session
4. THE System SHALL provide toggles for: Shot Name, Episode, Frame Range, Status, Task Status columns, and Description
5. WHEN all task status columns are hidden, THE System SHALL still display the shot information columns
### User Story 3: Task Status Filtering
**As a** coordinator
**I want** to filter shots by task status
**So that** I can identify shots that need attention or are ready for review
**Acceptance Criteria:**
1. WHEN viewing the shot table, THE System SHALL provide a task status filter dropdown
2. WHEN a user selects a task status filter, THE System SHALL display only shots matching that status
3. THE System SHALL support filtering by: All Shots, Not Started, In Progress, Submitted, Approved, Retake
4. WHEN filtering by task status, THE System SHALL show shots where ANY task matches the selected status
5. WHEN the filter is cleared, THE System SHALL display all shots
### User Story 4: Sortable Columns
**As a** user
**I want** to sort the shot table by different columns
**So that** I can organize shots by priority or progress
**Acceptance Criteria:**
1. WHEN clicking a column header, THE System SHALL sort the table by that column
2. WHEN clicking the same header again, THE System SHALL reverse the sort order
3. THE System SHALL support sorting by: Shot Name, Episode, Frame Range, Status, and Task Status columns
4. WHEN sorting by task status, THE System SHALL order by status priority (Not Started, In Progress, Submitted, Retake, Approved)
5. WHEN the table is sorted, THE System SHALL display a sort indicator on the active column
### User Story 5: Shot Selection and Detail View
**As a** user
**I want** to click on a shot row to view details
**So that** I can access detailed shot information and tasks
**Acceptance Criteria:**
1. WHEN clicking a shot row, THE System SHALL open the shot detail panel
2. WHEN the detail panel is open, THE System SHALL highlight the selected shot row
3. WHEN viewing shot details, THE System SHALL display all shot information, tasks, and submissions
4. WHEN closing the detail panel, THE System SHALL return to the table view
5. THE System SHALL maintain the table scroll position when opening/closing the detail panel
## Design
### Data Model
#### Shot List Response (Enhanced)
```typescript
interface ShotListResponse {
id: number
name: string
description?: string
episode_id: number
episode_name: string
frame_start: number
frame_end: number
status: ShotStatus
created_at: string
updated_at: string
task_count: number
// Task status information for table display
task_status: Record<string, TaskStatus | null> // e.g., { "layout": "in_progress", "animation": "not_started" }
task_details: TaskStatusInfo[] // Detailed task information
}
interface TaskStatusInfo {
task_type: string
status: TaskStatus
task_id?: number
assigned_user_id?: number
}
```
### Backend Changes
#### Update Shot List Endpoint
```python
@router.get("/", response_model=List[ShotListResponse])
async def list_shots(
episode_id: int = None,
task_status_filter: str = None, # New parameter
skip: int = 0,
limit: int = 100,
db: Session = Depends(get_db),
current_user: User = Depends(get_current_user_with_db)
):
"""List shots with task status information"""
# Query shots with task information
# Build task_status dict and task_details list
# Apply task status filtering if specified
# Return enhanced shot list
```
#### Shot Schema Updates
```python
class ShotListResponse(BaseModel):
# ... existing fields ...
task_status: Dict[str, Optional[TaskStatus]] = Field(default_factory=dict)
task_details: List[TaskStatusInfo] = Field(default_factory=list)
```
### Frontend Components
#### ShotsTableView Component
```vue
<template>
<div class="shots-table-container">
<!-- Toolbar -->
<div class="table-toolbar">
<ColumnVisibilityControl v-model="visibleColumns" :columns="availableColumns" />
<TaskStatusFilter v-model="statusFilter" />
</div>
<!-- Table -->
<table class="shots-table">
<thead>
<tr>
<th v-if="visibleColumns.name" @click="sort('name')">Shot Name</th>
<th v-if="visibleColumns.episode" @click="sort('episode')">Episode</th>
<th v-if="visibleColumns.frameRange">Frame Range</th>
<th v-if="visibleColumns.status" @click="sort('status')">Status</th>
<th v-for="taskType in visibleTaskTypes" :key="taskType" @click="sort(taskType)">
{{ formatTaskType(taskType) }}
</th>
<th v-if="visibleColumns.description">Description</th>
</tr>
</thead>
<tbody>
<tr v-for="shot in filteredShots" :key="shot.id" @click="selectShot(shot)">
<td v-if="visibleColumns.name">{{ shot.name }}</td>
<td v-if="visibleColumns.episode">{{ shot.episode_name }}</td>
<td v-if="visibleColumns.frameRange">{{ shot.frame_start }}-{{ shot.frame_end }}</td>
<td v-if="visibleColumns.status">
<StatusBadge :status="shot.status" />
</td>
<td v-for="taskType in visibleTaskTypes" :key="taskType">
<TaskStatusBadge :status="shot.task_status[taskType]" />
</td>
<td v-if="visibleColumns.description">{{ shot.description }}</td>
</tr>
</tbody>
</table>
</div>
</template>
```
#### Column Visibility Control (Reusable)
- Dropdown menu with checkboxes for each column
- Separate section for task status columns
- "Show All" / "Hide All" quick actions
- Session storage for persistence
#### Task Status Filter (Reusable)
- Dropdown with status options
- "All Shots" option to clear filter
- Visual indicator when filter is active
- Count of filtered results
### UI/UX Design
#### Table Layout
- Fixed header with sticky positioning
- Alternating row colors for readability
- Hover state on rows
- Selected row highlight
- Responsive column widths
- Horizontal scroll for many task columns
#### Task Status Badges
- Consistent 130px width for alignment
- Color-coded by status:
- Not Started: Gray
- In Progress: Blue
- Submitted: Yellow
- Approved: Green
- Retake: Red
- Icon + text for clarity
#### Column Visibility Dropdown
- Positioned in toolbar (top-right)
- Grouped sections: Info Columns, Task Columns
- Checkboxes with column names
- Visual separator between groups
## Implementation Plan
### Phase 1: Backend Enhancement
1. Update `ShotListResponse` schema with task status fields
2. Modify `list_shots` endpoint to include task information
3. Add task status filtering logic
4. Test endpoint with various filters
### Phase 2: Frontend Table Component
1. Create `ShotsTableView.vue` component
2. Implement table rendering with all columns
3. Add row click handler for shot selection
4. Integrate with existing shot detail panel
### Phase 3: Column Controls
1. Create reusable `ColumnVisibilityControl.vue` (or adapt from assets)
2. Implement column show/hide logic
3. Add session storage for preferences
4. Wire up to shots table
### Phase 4: Filtering and Sorting
1. Implement task status filtering
2. Add column sorting functionality
3. Add sort indicators to headers
4. Test filter and sort combinations
### Phase 5: Integration
1. Update `ProjectShotsView.vue` to use table view
2. Add view toggle (grid/table) if needed
3. Ensure episode filtering works with table
4. Test complete workflow
## Testing Strategy
### Unit Tests
- Shot list endpoint returns correct task status data
- Task status filtering works correctly
- Column visibility state management
- Sort logic for different column types
### Integration Tests
- Table displays shots with task status correctly
- Column visibility persists across page refreshes
- Task status filter updates table correctly
- Shot selection opens detail panel
### User Acceptance Testing
- Coordinators can quickly identify shots needing attention
- Column customization improves workflow efficiency
- Task status filtering helps prioritize work
- Table performance is acceptable with 100+ shots
## Success Criteria
1. Shot table displays all shots with task status columns
2. Users can show/hide columns to customize view
3. Task status filtering works accurately
4. Table sorting works for all columns
5. Shot selection integrates with existing detail panel
6. Performance is acceptable (< 1s load time for 100 shots)
7. UI matches asset table design consistency
## Future Enhancements
1. **Bulk Actions**: Select multiple shots for batch operations
2. **Export**: Export table data to CSV/Excel
3. **Advanced Filters**: Combine multiple filter criteria
4. **Custom Columns**: User-defined calculated columns
5. **Column Reordering**: Drag-and-drop column arrangement
6. **Saved Views**: Save and load custom table configurations
7. **Real-time Updates**: WebSocket updates for collaborative work
.kiro/specs/vfx-project-management/task-20-implementation-summary.md
+226
View File
@@ -0,0 +1,226 @@
# Task 20: Shot Table View with Task Status Display - Implementation Summary
## Overview
Successfully implemented a comprehensive shot table view with task status display, filtering, sorting, and column visibility controls. This feature mirrors the asset table functionality and provides coordinators with a powerful tool to track shot production progress.
## Completed Sub-tasks
### 20.1 Enhanced Backend Shot List Endpoint with Task Status ✅
**Backend Changes:**
1. **Updated Shot Schema** (`backend/schemas/shot.py`):
- Added `TaskStatusInfo` class for detailed task information
- Extended `ShotListResponse` with:
- `task_status`: Dictionary mapping task types to their status
- `task_details`: List of detailed task information including task_id and assigned_user_id
2. **Enhanced Shots Router** (`backend/routers/shots.py`):
- Added query parameters to `list_shots` endpoint:
- `task_status_filter`: Filter shots by specific task type and status (format: "task_type:status")
- `sort_by`: Sort by any field including task status columns
- `sort_direction`: Sort direction (asc/desc)
- Implemented task status aggregation:
- Queries all tasks for each shot
- Builds task_status dictionary with all task types (standard + custom)
- Initializes missing task types as NOT_STARTED
- Populates task_details with complete task information
- Added task status filtering logic
- Implemented task status sorting with proper status order
3. **Testing**:
- Created `backend/test_shot_task_status.py` to verify endpoint functionality
- Tested task status retrieval, filtering, and sorting
- Confirmed custom task types are included in response
### 20.2 Created Shot Table View Component ✅
**Frontend Changes:**
1. **New Component** (`frontend/src/components/shot/ShotsTableView.vue`):
- Comprehensive table layout with sortable columns
- Columns include:
- Checkbox for multi-select
- Shot Name (with camera icon)
- Episode (with badge)
- Frame Range (with frame count)
- Status (with color-coded badge)
- Task Status columns (dynamic based on project task types)
- Description
- Actions dropdown menu
- Features:
- Row click handling for selection (single, multi-select with Ctrl, range select with Shift)
- Sortable columns with visual indicators
- Task status badges with consistent 140px width
- Responsive design with horizontal scroll for many columns
- Hover states and selected row highlighting
- Context menu with edit, view tasks, and delete options
2. **Updated Shot Service** (`frontend/src/services/shot.ts`):
- Added `TaskStatusInfo` interface
- Extended `Shot` interface with task_status and task_details
- Added `TaskStatus` enum
- Created `ShotListOptions` interface for query parameters
- Updated `getShots` method to support filtering and sorting options
### 20.3 Implemented Column Visibility Control for Shots ✅
**Frontend Changes:**
1. **New Component** (`frontend/src/components/shot/ShotColumnVisibilityControl.vue`):
- Dropdown menu with checkboxes for each column
- Separate sections for:
- Basic columns (Shot Name, Episode, Frame Range, Status, Description)
- Task status columns (dynamically generated from project task types)
- Quick actions:
- "Show All" - Makes all columns visible
- "Hide All" - Hides all columns except Shot Name (required)
- Session storage persistence for user preferences
- Dynamic task type support (works with custom task types)
### 20.4 Added Task Status Filtering and Sorting ✅
**Frontend Changes:**
1. **New Component** (`frontend/src/components/shot/ShotTaskStatusFilter.vue`):
- Dropdown filter with task type and status combinations
- Dynamically generates filter options based on project task types
- Status options: Not Started, In Progress, Submitted, Approved, Retake
- Visual task status badges in dropdown
- Clear filter button when filter is active
- Emits filter changes to parent component
2. **Sorting Implementation**:
- Column headers are clickable to toggle sort
- Sort indicators show current sort field and direction
- Supports sorting by:
- Basic fields (name, status, frame_start, frame_end, etc.)
- Task status columns (with proper status order)
- Backend handles sorting for optimal performance
### 20.5 Integrated Shot Table with Project Shots View ✅
**Frontend Changes:**
1. **Updated ShotBrowser** (`frontend/src/components/shot/ShotBrowser.vue`):
- Added table view mode toggle (Grid | List | Table)
- Integrated ShotsTableView component
- Added ShotTaskStatusFilter for table view
- Added ShotColumnVisibilityControl for table view
- Implemented episode loading for episode name display
- Implemented task type loading (standard + custom)
- Added state management for:
- Column visibility with session storage
- Task status filtering
- Sort field and direction
- Added handlers for:
- Task status filter changes
- Sort changes
- Watchers for:
- Project changes to reload episodes and task types
- Column visibility changes to persist preferences
- Default view mode set to 'table' for immediate access
2. **Integration Features**:
- Seamless switching between grid, list, and table views
- Episode filtering works with table view
- Shot selection opens detail panel (desktop) or sheet (mobile)
- All CRUD operations work from table view
- Maintains scroll position when opening/closing detail panel
- Responsive design adapts to screen size
## Technical Implementation Details
### Backend Architecture
- **Query Optimization**: Single query per shot with task aggregation
- **Custom Task Type Support**: Dynamically includes custom task types in response
- **Filtering**: Server-side filtering for better performance with large datasets
- **Sorting**: Server-side sorting with proper status order handling
### Frontend Architecture
- **Component Reusability**: Created shot-specific components following asset table patterns
- **State Management**: Session storage for user preferences
- **Performance**: Efficient rendering with computed properties and watchers
- **Type Safety**: TypeScript interfaces for all data structures
### Data Flow
1. User selects episode in ProjectShotsView
2. ShotBrowser loads shots with task status from backend
3. ShotBrowser loads episodes and task types for display
4. User can filter by task status (triggers backend reload)
5. User can sort by any column (triggers backend reload)
6. User can toggle column visibility (stored in session)
7. User can select shots to view details or perform actions
## Key Features
### For Coordinators
- **Quick Progress Overview**: See all shot task statuses at a glance
- **Efficient Filtering**: Find shots by specific task status
- **Flexible Sorting**: Sort by any column including task status
- **Customizable View**: Show/hide columns based on needs
- **Bulk Operations**: Multi-select shots for batch actions
- **Episode Context**: See which episode each shot belongs to
### For Production Tracking
- **Task Status Visibility**: Color-coded badges for each task type
- **Frame Information**: Quick view of frame ranges and counts
- **Custom Task Types**: Automatically includes project-specific task types
- **Real-time Updates**: Task status changes reflect immediately
- **Session Persistence**: Column preferences saved per session
## Testing Performed
### Backend Testing
- ✅ Shot list endpoint returns task status information
- ✅ Task status filtering works correctly
- ✅ Sorting by task status works correctly
- ✅ Custom task types are included in response
- ✅ Episode filtering works with task status
### Frontend Testing
- ✅ Table view renders correctly with all columns
- ✅ Column visibility control works
- ✅ Task status filter works
- ✅ Sorting works for all columns
- ✅ Shot selection opens detail panel
- ✅ CRUD operations work from table view
- ✅ Session storage persists preferences
- ✅ Responsive design works on different screen sizes
## Files Created/Modified
### Backend Files
- ✅ `backend/schemas/shot.py` - Added TaskStatusInfo and updated ShotListResponse
- ✅ `backend/routers/shots.py` - Enhanced list_shots endpoint
- ✅ `backend/test_shot_task_status.py` - Test script for verification
### Frontend Files
- ✅ `frontend/src/components/shot/ShotsTableView.vue` - New table view component
- ✅ `frontend/src/components/shot/ShotColumnVisibilityControl.vue` - New column control component
- ✅ `frontend/src/components/shot/ShotTaskStatusFilter.vue` - New filter component
- ✅ `frontend/src/components/shot/ShotBrowser.vue` - Updated to integrate table view
- ✅ `frontend/src/services/shot.ts` - Updated with task status types and options
## Future Enhancements
### Potential Improvements
1. **Editable Task Status**: Click to edit task status directly in table (like assets)
2. **Bulk Task Assignment**: Assign tasks to artists from table view
3. **Export Functionality**: Export table data to CSV/Excel
4. **Advanced Filters**: Combine multiple filters (status + episode + date range)
5. **Saved Views**: Save and load custom column configurations
6. **Task Progress Indicators**: Visual progress bars for shot completion
7. **Thumbnail Column**: Add shot thumbnails like asset table
### Performance Optimizations
1. **Virtual Scrolling**: For projects with 1000+ shots
2. **Lazy Loading**: Load task details on demand
3. **Caching**: Cache task status data with smart invalidation
4. **WebSocket Updates**: Real-time task status updates
## Conclusion
Task 20 has been successfully completed with all sub-tasks implemented and tested. The shot table view provides a powerful tool for production tracking, matching the functionality of the asset table while being tailored to shot-specific needs. The implementation follows best practices for code organization, performance, and user experience.
The feature is production-ready and provides coordinators with the tools they need to efficiently track shot production progress across episodes and projects.
.kiro/specs/vfx-project-management/tasks.md
+1449
View File
File diff suppressed because it is too large Load Diff