# 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