LinkDesk/.kiro/specs/vfx-project-management/asset-detail-panel-spec.md

# 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