LinkDesk/.kiro/specs/vfx-project-management/shot-table-view-spec.md

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)

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

@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

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

<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