LinkDesk/frontend/docs/shot-detail-tabs-implementation.md

# Shot Detail Panel - Tabbed Interface Implementation

## Overview
Enhanced the Shot Detail Panel with a tabbed interface to better organize shot information across five distinct categories: Notes, Tasks, Assets, References, and Design.

## Implementation Date
November 16, 2025

## Changes Made

### 1. Component Structure
**File**: `frontend/src/components/shot/ShotDetailPanel.vue`

Added shadcn-vue Tabs component to organize content into five tabs:
- **Notes**: Production notes and comments
- **Tasks**: Task list and management (existing functionality)
- **Assets**: Linked assets used in the shot
- **References**: Reference files (images, videos, documents)
- **Design**: Design information (camera, lighting, animation notes)

### 2. New Imports
```typescript
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { MessageSquare, Package, Image } from 'lucide-vue-next'
```

### 3. New Event Emitters
Added four new event emitters for tab-specific actions:
```typescript
interface Emits {
  (e: 'create-note'): void
  (e: 'link-asset'): void
  (e: 'upload-reference'): void
  (e: 'edit-design'): void
}
```

### 4. Permission Computed Properties
Added role-based permission checks for each tab action:
```typescript
const canCreateNote = computed(() => {
  return authStore.user?.role === 'coordinator' || authStore.user?.is_admin
})

const canLinkAssets = computed(() => {
  return authStore.user?.role === 'coordinator' || authStore.user?.is_admin
})

const canUploadReferences = computed(() => {
  return true // All users can upload references
})

const canEditDesign = computed(() => {
  return authStore.user?.role === 'coordinator' || authStore.user?.is_admin
})
```

### 5. Bug Fix
Fixed incorrect method call:
- **Before**: `shotService.getShot(props.projectId, props.shotId)`
- **After**: `shotService.getShot(props.shotId)`

## Tab Details

### Notes Tab
- **Purpose**: Production notes and comments about the shot
- **Actions**: "Add Note" button (coordinators/admins only)
- **Empty State**: Helpful message encouraging users to add notes
- **Icon**: MessageSquare
- **Status**: UI complete, backend integration pending

### Tasks Tab
- **Purpose**: List and manage tasks for the shot
- **Actions**: "Add Task" button (coordinators/admins only)
- **Features**: 
  - Task status badges
  - Assignment information
  - Click to open task detail
  - Loading and empty states
- **Status**: Fully functional

### Assets Tab
- **Purpose**: Link and display assets used in the shot
- **Actions**: "Link Asset" button (coordinators/admins only)
- **Empty State**: Helpful message about linking assets
- **Icon**: Package
- **Status**: UI complete, backend integration pending

### References Tab
- **Purpose**: Upload and display reference files
- **Actions**: "Upload Reference" button (all users)
- **Empty State**: Helpful message about uploading references
- **Icon**: Image
- **Status**: UI complete, backend integration pending

### Design Tab
- **Purpose**: Design information and notes
- **Sections**:
  - Camera notes
  - Lighting notes
  - Animation notes
- **Actions**: "Edit Design" button (coordinators/admins only)
- **Status**: UI complete, backend integration pending

## User Experience

### Layout
1. Shot header with name, frame range, and actions
2. Status badge
3. Shot information (description, dates)
4. Progress overview (above tabs)
5. Tabbed content area

### Navigation
- Tabs are horizontally arranged below the progress overview
- Default tab: "Tasks"
- Smooth tab switching
- Each tab maintains its own state

### Permissions
| Action | Coordinators | Admins | Artists |
|--------|-------------|--------|---------|
| Add Note | ✓ | ✓ | ✗ |
| Add Task | ✓ | ✓ | ✗ |
| Link Asset | ✓ | ✓ | ✗ |
| Upload Reference | ✓ | ✓ | ✓ |
| Edit Design | ✓ | ✓ | ✗ |

## Testing

### Manual Testing Steps
1. Start frontend: `npm run dev`
2. Navigate to a project's shots view
3. Click on any shot to open the detail panel
4. Verify all 5 tabs are visible
5. Click each tab to verify content displays
6. Check that action buttons appear based on user role
7. Verify the Tasks tab shows existing tasks
8. Test tab switching performance

### Test File
Created `frontend/test-shot-detail-tabs.html` for visual documentation and testing reference.

## Next Steps

### Backend Integration Required
1. **Notes Tab**:
   - Create ProductionNote model (if not exists)
   - Add API endpoints for notes CRUD
   - Implement notes display and creation

2. **Assets Tab**:
   - Create shot-asset relationship model
   - Add API endpoints for linking/unlinking assets
   - Implement asset display and linking UI

3. **References Tab**:
   - Create ReferenceFile model
   - Add file upload endpoints
   - Implement file gallery display
   - Add file type validation

4. **Design Tab**:
   - Add design fields to Shot model
   - Create API endpoints for design updates
   - Implement design editing form

### Frontend Enhancements
1. Add real-time updates for notes
2. Implement drag-and-drop for reference uploads
3. Add image preview/lightbox for references
4. Add rich text editor for design notes
5. Implement asset search/filter for linking

## Related Files
- Component: `frontend/src/components/shot/ShotDetailPanel.vue`
- Service: `frontend/src/services/shot.ts`
- Test: `frontend/test-shot-detail-tabs.html`
- Documentation: `frontend/docs/shot-detail-tabs-implementation.md`

## Dependencies
- shadcn-vue Tabs component
- lucide-vue-next icons (MessageSquare, Package, Image)
- Existing auth and shot services

## Breaking Changes
None. This is a backward-compatible enhancement.

## Performance Considerations
- Tabs use lazy loading (content only renders when tab is active)
- Task loading is optimized with existing caching
- Empty states prevent unnecessary API calls

## Accessibility
- Keyboard navigation supported via Tabs component
- ARIA labels provided by shadcn-vue
- Focus management handled automatically
- Screen reader friendly

## Browser Compatibility
Tested and compatible with:
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)

## Notes
- The Tasks tab retains all existing functionality
- Progress overview remains visible above all tabs
- Empty states encourage user engagement
- Permission checks prevent unauthorized actions