# Task Detail Panel Implementation

## Overview

The Task Detail Panel is a right-side panel component that displays comprehensive task information and provides quick actions for task management. It follows the ftrack-style interface pattern with a focus on usability and efficiency.

## Component Location

`frontend/src/components/task/TaskDetailPanel.vue`

## Features Implemented

### 1. Quick Action Buttons

The panel displays context-aware quick action buttons based on the current user's role and the task status:

- **Start Task**: Visible when task status is "Not Started" and user is assigned to the task
  - Changes task status to "In Progress"
  - Only available to assigned artists

- **Submit Work**: Visible when task status is "In Progress" or "Retake" and user is assigned
  - Directs user to the Submissions tab
  - Only available to assigned artists

- **Reassign**: Visible to coordinators and admins
  - Opens assignment dialog to reassign task to another project member
  - Shows all project members with their department roles

### 2. Status Update Control

- Dropdown selector for changing task status
- Available statuses: Not Started, In Progress, Submitted, Approved, Retake
- Artists can update their own tasks
- Coordinators and admins can update any task
- Real-time status updates with toast notifications

### 3. Task Assignment Dialog

- Command-style searchable dialog for selecting project members
- Displays member name and department role
- Pre-selects current assignee when dialog opens
- Filters members by name as you type
- Only accessible to coordinators and admins

### 4. Enhanced Metadata Display

- **Task Type**: Badge showing the task type (modeling, animation, etc.)
- **Status**: Color-coded status badge
- **Deadline**: Date with color coding based on urgency
  - Red: Overdue
  - Orange: Due within 3 days
  - Yellow: Due within 7 days
  - Default: Normal
- **Assigned To**: User name with icon
- **Context Information**: Project, Episode, Shot, or Asset details

### 5. Tabbed Interface

Three tabs for organizing task-related content:

- **Notes**: Threaded production notes with rich text
- **Attachments**: File attachments with categorization
- **Submissions**: Work submissions with version history

Each tab displays a badge count showing the number of items.

## Component Props

```typescript
interface Props {
  taskId: number  // ID of the task to display
}
```

## Component Events

```typescript
interface Emits {
  close: []         // Emitted when user closes the panel
  taskUpdated: []   // Emitted when task is updated (status, assignment, etc.)
}
```

## API Integration

### Endpoints Used

1. **GET /tasks/{task_id}**
   - Fetches complete task details
   - Includes related entity names (project, episode, shot, asset, assigned user)

2. **PUT /tasks/{task_id}/status**
   - Updates task status
   - Validates user permissions

3. **PUT /tasks/{task_id}/assign**
   - Assigns task to a user
   - Validates project membership and department roles
   - Sends notification to assigned user

4. **GET /projects/{project_id}/members**
   - Fetches all project members for assignment dialog
   - Includes user details and department roles

5. **GET /tasks/{task_id}/notes**
   - Fetches threaded production notes

6. **GET /tasks/{task_id}/attachments**
   - Fetches task attachments

7. **GET /tasks/{task_id}/submissions**
   - Fetches work submissions with version history

## Permission Logic

### Quick Actions

```typescript
// Start Task button
canStartTask = task.assigned_user_id === currentUser.id 
               && task.status === 'not_started'

// Submit Work button
canSubmitWork = task.assigned_user_id === currentUser.id 
                && (task.status === 'in_progress' || task.status === 'retake')

// Reassign button
canReassign = currentUser.is_admin || currentUser.role === 'coordinator'
```

### Status Updates

- Artists: Can update status of their own tasks only
- Coordinators: Can update any task status
- Admins: Can update any task status
- Directors: Cannot update task status (review-only role)

### Task Assignment

- Only coordinators and admins can reassign tasks
- Assignment validates:
  - User exists
  - User is a project member
  - User has appropriate department role (warning, not blocking)

## UI/UX Design

### Layout

```
┌─────────────────────────────────────┐
│ Task Details                    [X] │
├─────────────────────────────────────┤
│ Task Name                           │
│ Description                         │
│                                     │
│ [Start Task] [Submit] [Reassign]   │
│ Status: [Dropdown ▼]               │
│                                     │
│ Type: [Badge]    Status: [Badge]   │
│ 📅 Deadline      👤 Assigned To    │
│                                     │
│ ─────────────────────────────────  │
│                                     │
│ Context:                            │
│ Project: Project Name               │
│ Episode: Episode Name               │
│ Shot: Shot Name                     │
│                                     │
│ ─────────────────────────────────  │
│                                     │
│ [Notes (3)] [Attachments (2)] [Sub]│
│                                     │
│ Tab Content Area                    │
│                                     │
└─────────────────────────────────────┘
```

### Color Coding

- **Deadline Colors**:
  - Overdue: `text-destructive` (red)
  - Due in 3 days: `text-orange-600`
  - Due in 7 days: `text-yellow-600`
  - Normal: `text-foreground`

- **Status Badges**: Defined in TaskStatusBadge component
  - Not Started: Gray
  - In Progress: Blue
  - Submitted: Purple
  - Approved: Green
  - Retake: Red

### Icons

- Close: `X` (lucide-vue-next)
- Start Task: `Play`
- Submit Work: `Upload`
- Reassign: `UserPlus`
- Calendar: `Calendar`
- User: `User`

## Integration with TasksView

The TaskDetailPanel is integrated into the TasksView as a conditional right panel:

```vue
<template>
  <div class="h-full flex">
    <!-- Main Content -->
    <div :class="selectedTask ? 'flex-1' : 'w-full'">
      <!-- Task list and filters -->
    </div>

    <!-- Task Detail Panel -->
    <TaskDetailPanel
      v-if="selectedTask"
      :task-id="selectedTask.id"
      @close="handleClosePanel"
      @task-updated="handleTaskUpdated"
    />
  </div>
</template>
```

## Child Components

The TaskDetailPanel uses several child components:

1. **TaskStatusBadge**: Displays color-coded status badge
2. **TaskNotes**: Threaded notes interface with add/edit/delete
3. **TaskAttachments**: File attachment gallery with upload
4. **TaskSubmissions**: Work submission list with version history

## State Management

### Local State

- `task`: Current task details
- `loading`: Loading state for initial fetch
- `localStatus`: Local copy of status for dropdown
- `notes`: Array of production notes
- `attachments`: Array of task attachments
- `submissions`: Array of work submissions
- `showAssignmentDialog`: Boolean for assignment dialog visibility
- `projectMembers`: Array of project members for assignment
- `selectedUserId`: Selected user ID for assignment
- `assignmentLoading`: Loading state for assignment operation

### Computed Properties

- `canStartTask`: Whether user can start the task
- `canSubmitWork`: Whether user can submit work
- `canReassign`: Whether user can reassign the task

## Error Handling

- Toast notifications for all operations (success and error)
- Graceful error handling with user-friendly messages
- Status revert on failed updates
- Loading states during async operations

## Testing

### Manual Testing

Use the test file: `frontend/test-task-detail-panel.html`

### Test Scenarios

1. **Quick Actions**:
   - Verify "Start Task" appears for not started tasks
   - Verify "Submit Work" appears for in progress tasks
   - Verify "Reassign" appears for coordinators/admins

2. **Status Updates**:
   - Test status changes as artist (own tasks only)
   - Test status changes as coordinator (any task)
   - Verify toast notifications

3. **Task Assignment**:
   - Open assignment dialog
   - Search for members
   - Assign task to different user
   - Verify assignment success

4. **Metadata Display**:
   - Verify all metadata fields display correctly
   - Check deadline color coding
   - Verify context information

5. **Tabs**:
   - Switch between tabs
   - Verify badge counts
   - Test child component functionality

## Future Enhancements

1. **Inline Editing**: Edit task name and description directly in panel
2. **Deadline Picker**: Quick deadline update control
3. **Activity Timeline**: Chronological activity feed
4. **Keyboard Shortcuts**: Quick actions via keyboard
5. **Drag and Drop**: File upload via drag and drop
6. **Real-time Updates**: WebSocket integration for live updates
7. **Task Dependencies**: Display and manage task dependencies
8. **Time Tracking**: Log time spent on tasks
9. **Custom Fields**: Display project-specific custom fields
10. **Quick Notes**: Add notes without switching to Notes tab

## Requirements Satisfied

This implementation satisfies the following requirements from the spec:

- **Requirement 3.1**: Task status display and updates
- **Requirement 3.3**: Task information display with assignment details
- **Requirement 3.4**: Task assignment and status update controls

## Related Documentation

- [Task List Implementation](./task-list-implementation.md)
- [Task Management API](../../backend/docs/task_management.md)
- [ftrack-style UI Patterns](./ftrack-ui-patterns.md)