Merge department task types into the Task Type management page

Project Settings > Tasks previously only showed the flat custom task
type lists, with department-owned task types manageable only from the
separate Departments tab. The Asset/Shot Task Type sections now show a
merged view (flat + department-owned, tagged with their department),
and the Add/Edit/Delete dialog can create a task type directly under a
custom department instead of just as a general-purpose flat type.

frontend/src/components/asset/AssetDetailPanel.vue

@@ -293,6 +293,7 @@ import { assetService, AssetStatus, type Asset, type TaskStatusInfo } from '@/se
 import { taskService, type ProductionNote, type Submission } from '@/services/task'
 import { useAuthStore } from '@/stores/auth'
 import { useUserStore } from '@/stores/user'
+import { useDepartmentsStore } from '@/stores/departments'
 
 interface Task {
   id: number
@@ -321,6 +322,7 @@ const emit = defineEmits<Emits>()
 
 const authStore = useAuthStore()
 const userStore = useUserStore()
+const departmentsStore = useDepartmentsStore()
 
 // Reactive state
 const asset = ref<Asset | null>(null)
@@ -363,9 +365,15 @@ const progressPercentage = computed(() => {
   return Math.round((completedTasksCount.value / tasks.value.length) * 100)
 })
 
+// Task types offered in "Add Task" include the flat asset task type list
+// plus every task type owned by an asset department (e.g. Modeling's own
+// task types), deduped against types the asset already has a task for.
 const availableTaskTypes = computed(() => {
   const existingTypes = new Set(tasks.value.map(task => task.task_type))
-  return props.allTaskTypes.filter(type => !existingTypes.has(type))
+  const departmentTaskTypes = departmentsStore.getDepartmentsByType(props.projectId, 'asset')
+    .flatMap(d => d.task_types)
+  const merged = Array.from(new Set([...props.allTaskTypes, ...departmentTaskTypes]))
+  return merged.filter(type => !existingTypes.has(type))
 })
 
 const taskStatusCounts = computed(() => {
@@ -394,6 +402,7 @@ const loadAssetDetails = async () => {
     isLoading.value = true
     error.value = null
     asset.value = await assetService.getAsset(props.assetId)
+    departmentsStore.fetchProjectDepartments(props.projectId)
 
     // Load users if not already loaded (for user name resolution)
     if (userStore.users.length === 0) {

frontend/src/components/settings/CustomTaskTypeManager.vue

@@ -2,9 +2,9 @@
   <div class="space-y-6">
     <!-- Header -->
     <div>
-      <h3 class="text-lg font-semibold">Custom Task Types</h3>
+      <h3 class="text-lg font-semibold">Task Types</h3>
       <p class="text-sm text-muted-foreground mt-1">
-        Add custom task types beyond the standard types to adapt the pipeline to your project needs
+        Add task types beyond the standard types, either general-purpose or owned by a specific department, to adapt the pipeline to your project needs
       </p>
     </div>
 
@@ -30,33 +30,30 @@
 
         <!-- Asset Task Types List -->
         <div class="border rounded-lg divide-y">
-          <template v-if="assetTaskTypes.length > 0">
+          <template v-if="assetTaskTypeRows.length > 0">
             <div
-              v-for="taskType in assetTaskTypes"
+              v-for="row in assetTaskTypeRows"
-              :key="taskType"
+              :key="row.name"
               class="flex items-center justify-between p-3 hover:bg-muted/50 transition-colors"
             >
               <div class="flex items-center gap-3">
-                <span class="font-medium capitalize">{{ formatTaskTypeName(taskType) }}</span>
+                <span class="font-medium capitalize">{{ formatTaskTypeName(row.name) }}</span>
-                <Badge v-if="isStandardAssetType(taskType)" variant="secondary">
+                <Badge v-if="row.isStandard" variant="secondary">Standard</Badge>
-                  Standard
+                <Badge v-else variant="outline">Custom</Badge>
-                </Badge>
+                <Badge v-if="row.department" variant="outline" class="capitalize">{{ formatTaskTypeName(row.department) }}</Badge>
-                <Badge v-else variant="outline">
-                  Custom
-                </Badge>
               </div>
-              <div v-if="!isStandardAssetType(taskType)" class="flex items-center gap-2">
+              <div v-if="!row.isStandard" class="flex items-center gap-2">
                 <Button
                   size="sm"
                   variant="ghost"
-                  @click="openEditDialog('asset', taskType)"
+                  @click="openEditDialog('asset', row.name, row.department)"
                 >
                   <Pencil class="h-4 w-4" />
                 </Button>
                 <Button
                   size="sm"
                   variant="ghost"
-                  @click="handleDelete('asset', taskType)"
+                  @click="handleDelete('asset', row.name, row.department)"
                 >
                   <Trash2 class="h-4 w-4 text-destructive" />
                 </Button>
@@ -86,33 +83,30 @@
 
         <!-- Shot Task Types List -->
         <div class="border rounded-lg divide-y">
-          <template v-if="shotTaskTypes.length > 0">
+          <template v-if="shotTaskTypeRows.length > 0">
             <div
-              v-for="taskType in shotTaskTypes"
+              v-for="row in shotTaskTypeRows"
-              :key="taskType"
+              :key="row.name"
               class="flex items-center justify-between p-3 hover:bg-muted/50 transition-colors"
             >
               <div class="flex items-center gap-3">
-                <span class="font-medium capitalize">{{ formatTaskTypeName(taskType) }}</span>
+                <span class="font-medium capitalize">{{ formatTaskTypeName(row.name) }}</span>
-                <Badge v-if="isStandardShotType(taskType)" variant="secondary">
+                <Badge v-if="row.isStandard" variant="secondary">Standard</Badge>
-                  Standard
+                <Badge v-else variant="outline">Custom</Badge>
-                </Badge>
+                <Badge v-if="row.department" variant="outline" class="capitalize">{{ formatTaskTypeName(row.department) }}</Badge>
-                <Badge v-else variant="outline">
-                  Custom
-                </Badge>
               </div>
-              <div v-if="!isStandardShotType(taskType)" class="flex items-center gap-2">
+              <div v-if="!row.isStandard" class="flex items-center gap-2">
                 <Button
                   size="sm"
                   variant="ghost"
-                  @click="openEditDialog('shot', taskType)"
+                  @click="openEditDialog('shot', row.name, row.department)"
                 >
                   <Pencil class="h-4 w-4" />
                 </Button>
                 <Button
                   size="sm"
                   variant="ghost"
-                  @click="handleDelete('shot', taskType)"
+                  @click="handleDelete('shot', row.name, row.department)"
                 >
                   <Trash2 class="h-4 w-4 text-destructive" />
                 </Button>
@@ -155,7 +149,25 @@
               {{ validationError }}
             </p>
             <p v-else class="text-sm text-muted-foreground">
-              3-50 characters, lowercase alphanumeric with underscores only
+              {{ dialogDepartment ? '2-50' : '3-50' }} characters, lowercase alphanumeric with underscores only
+            </p>
+          </div>
+
+          <div v-if="dialogMode === 'add'" class="space-y-2">
+            <Label>Department (optional)</Label>
+            <Select :model-value="dialogDepartment || 'none'" @update:model-value="(value) => { dialogDepartment = value === 'none' ? '' : (value as string); validateTaskTypeName() }">
+              <SelectTrigger>
+                <SelectValue placeholder="None (general purpose)" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="none">None (general purpose)</SelectItem>
+                <SelectItem v-for="department in dialogCustomDepartments" :key="department.name" :value="department.name">
+                  {{ formatTaskTypeName(department.name) }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <p class="text-sm text-muted-foreground">
+              Assign this task type to a custom department so it's owned by that department, or leave it general-purpose.
             </p>
           </div>
         </div>
@@ -181,6 +193,7 @@
           // Only clear values when dialog closes and we're not in the middle of deleting
           taskTypeToDelete = ''
           categoryToDelete = ''
+          departmentToDelete = ''
           deleteError = ''
         }
       }"
@@ -218,6 +231,7 @@ import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Separator } from '@/components/ui/separator'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import {
   Dialog,
   DialogContent,
@@ -237,6 +251,8 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
 import { customTaskTypeService, type AllTaskTypesResponse } from '@/services/customTaskType'
+import { departmentService, type DepartmentInfo } from '@/services/department'
+import { useDepartmentsStore } from '@/stores/departments'
 import { useToast } from '@/components/ui/toast/use-toast'
 
 interface Props {
@@ -250,6 +266,13 @@ const emit = defineEmits<{
 }>()
 
 const { toast } = useToast()
+const departmentsStore = useDepartmentsStore()
+
+interface TaskTypeRow {
+  name: string
+  isStandard: boolean
+  department?: string
+}
 
 // State
 const isLoading = ref(true)
@@ -259,6 +282,8 @@ const taskTypes = ref<AllTaskTypesResponse | null>(null)
 const isDialogOpen = ref(false)
 const dialogMode = ref<'add' | 'edit'>('add')
 const dialogCategory = ref<'asset' | 'shot'>('asset')
+const dialogDepartment = ref('')
+const editingDepartment = ref('')
 const taskTypeName = ref('')
 const originalTaskTypeName = ref('')
 const validationError = ref('')
@@ -268,6 +293,7 @@ const isSaving = ref(false)
 const isDeleteDialogOpen = ref(false)
 const taskTypeToDelete = ref('')
 const categoryToDelete = ref<'asset' | 'shot'>('asset')
+const departmentToDelete = ref('')
 const deleteError = ref('')
 const isDeleting = ref(false)
 
@@ -277,15 +303,52 @@ const shotTaskTypes = computed(() => taskTypes.value?.shot_task_types || [])
 const standardAssetTypes = computed(() => taskTypes.value?.standard_asset_types || [])
 const standardShotTypes = computed(() => taskTypes.value?.standard_shot_types || [])
 
+const allDepartments = computed(() => departmentsStore.getProjectDepartments(props.projectId)?.departments || [])
+const standardDepartmentNames = computed(() => (departmentsStore.getProjectDepartments(props.projectId)?.standard_departments || []).map(d => d.name))
+const assetDepartments = computed(() => allDepartments.value.filter(d => d.type === 'asset'))
+const shotDepartments = computed(() => allDepartments.value.filter(d => d.type === 'shot'))
+const dialogCustomDepartments = computed(() => {
+  const departments = dialogCategory.value === 'asset' ? assetDepartments.value : shotDepartments.value
+  return departments.filter(d => !standardDepartmentNames.value.includes(d.name))
+})
+
+function buildRows(flatAll: string[], flatStandard: string[], departments: DepartmentInfo[]): TaskTypeRow[] {
+  const rows = new Map<string, TaskTypeRow>()
+  for (const t of flatAll) {
+    rows.set(t, { name: t, isStandard: flatStandard.includes(t) })
+  }
+  for (const department of departments) {
+    const isDeptStandard = standardDepartmentNames.value.includes(department.name)
+    for (const t of department.task_types) {
+      const existing = rows.get(t)
+      if (existing) {
+        existing.department = department.name
+        existing.isStandard = existing.isStandard || isDeptStandard
+      } else {
+        rows.set(t, { name: t, isStandard: isDeptStandard, department: department.name })
+      }
+    }
+  }
+  return Array.from(rows.values())
+}
+
+const assetTaskTypeRows = computed(() => buildRows(assetTaskTypes.value, standardAssetTypes.value, assetDepartments.value))
+const shotTaskTypeRows = computed(() => buildRows(shotTaskTypes.value, standardShotTypes.value, shotDepartments.value))
+
 const isTaskTypeNameValid = computed(() => {
-  return taskTypeName.value.length >= 3 && !validationError.value
+  const minLength = dialogDepartment.value ? 2 : 3
+  return taskTypeName.value.length >= minLength && !validationError.value
 })
 
 // Methods
 const loadTaskTypes = async () => {
   try {
     isLoading.value = true
-    taskTypes.value = await customTaskTypeService.getAllTaskTypes(props.projectId)
+    const [types] = await Promise.all([
+      customTaskTypeService.getAllTaskTypes(props.projectId),
+      departmentsStore.fetchProjectDepartments(props.projectId, true)
+    ])
+    taskTypes.value = types
   } catch (error: any) {
     console.error('Failed to load task types:', error)
     toast({
@@ -298,28 +361,21 @@ const loadTaskTypes = async () => {
   }
 }
 
-const isStandardAssetType = (taskType: string): boolean => {
-  return standardAssetTypes.value.includes(taskType)
-}
-
-const isStandardShotType = (taskType: string): boolean => {
-  return standardShotTypes.value.includes(taskType)
-}
-
 const formatTaskTypeName = (taskType: string): string => {
   return taskType.replace(/_/g, ' ')
 }
 
 const validateTaskTypeName = () => {
   const name = taskTypeName.value.trim()
+  const minLength = dialogDepartment.value ? 2 : 3
 
   if (name.length === 0) {
     validationError.value = ''
     return
   }
 
-  if (name.length < 3) {
+  if (name.length < minLength) {
-    validationError.value = 'Task type name must be at least 3 characters'
+    validationError.value = `Task type name must be at least ${minLength} characters`
     return
   }
 
@@ -333,10 +389,10 @@ const validateTaskTypeName = () => {
     return
   }
 
-  // Check for duplicates (only if adding or changing name)
+  // Check for duplicates against the merged (flat + department) rows for this category
   if (dialogMode.value === 'add' || name !== originalTaskTypeName.value) {
-    const existingTypes = dialogCategory.value === 'asset' ? assetTaskTypes.value : shotTaskTypes.value
+    const existingRows = dialogCategory.value === 'asset' ? assetTaskTypeRows.value : shotTaskTypeRows.value
-    if (existingTypes.includes(name)) {
+    if (existingRows.some(row => row.name === name)) {
       validationError.value = 'A task type with this name already exists'
       return
     }
@@ -348,15 +404,17 @@ const validateTaskTypeName = () => {
 const openAddDialog = (category: 'asset' | 'shot') => {
   dialogMode.value = 'add'
   dialogCategory.value = category
+  dialogDepartment.value = ''
   taskTypeName.value = ''
   originalTaskTypeName.value = ''
   validationError.value = ''
   isDialogOpen.value = true
 }
 
-const openEditDialog = (category: 'asset' | 'shot', taskType: string) => {
+const openEditDialog = (category: 'asset' | 'shot', taskType: string, department?: string) => {
   dialogMode.value = 'edit'
   dialogCategory.value = category
+  editingDepartment.value = department || ''
   taskTypeName.value = taskType
   originalTaskTypeName.value = taskType
   validationError.value = ''
@@ -365,6 +423,8 @@ const openEditDialog = (category: 'asset' | 'shot', taskType: string) => {
 
 const closeDialog = () => {
   isDialogOpen.value = false
+  dialogDepartment.value = ''
+  editingDepartment.value = ''
   taskTypeName.value = ''
   originalTaskTypeName.value = ''
   validationError.value = ''
@@ -381,17 +441,30 @@ const handleDialogSave = async () => {
     isSaving.value = true
 
     if (dialogMode.value === 'add') {
+      if (dialogDepartment.value) {
+        const response = await departmentService.addDepartmentTaskType(props.projectId, dialogDepartment.value, taskTypeName.value.trim())
+        departmentsStore.updateProjectDepartments(props.projectId, response)
+      } else {
         const response = await customTaskTypeService.addCustomTaskType(props.projectId, {
           task_type: taskTypeName.value.trim(),
           category: dialogCategory.value
         })
-      console.log('Add task type response:', response)
         taskTypes.value = response
+      }
 
       toast({
         title: 'Success',
         description: `Task type "${taskTypeName.value}" added successfully`
       })
+    } else {
+      if (editingDepartment.value) {
+        const response = await departmentService.renameDepartmentTaskType(
+          props.projectId,
+          editingDepartment.value,
+          originalTaskTypeName.value,
+          taskTypeName.value.trim()
+        )
+        departmentsStore.updateProjectDepartments(props.projectId, response)
       } else {
         const response = await customTaskTypeService.updateCustomTaskType(
           props.projectId,
@@ -402,8 +475,8 @@ const handleDialogSave = async () => {
             category: dialogCategory.value
           }
         )
-      console.log('Update task type response:', response)
         taskTypes.value = response
+      }
 
       toast({
         title: 'Success',
@@ -427,9 +500,10 @@ const handleDialogSave = async () => {
   }
 }
 
-const handleDelete = (category: 'asset' | 'shot', taskType: string) => {
+const handleDelete = (category: 'asset' | 'shot', taskType: string, department?: string) => {
   taskTypeToDelete.value = taskType
   categoryToDelete.value = category
+  departmentToDelete.value = department || ''
   deleteError.value = ''
   isDeleteDialogOpen.value = true
 }
@@ -443,6 +517,7 @@ const confirmDelete = async () => {
   // Capture values immediately before any async operations
   const taskTypeToDeleteLocal = taskTypeToDelete.value
   const categoryToDeleteLocal = categoryToDelete.value
+  const departmentToDeleteLocal = departmentToDelete.value
 
   try {
     isDeleting.value = true
@@ -454,12 +529,17 @@ const confirmDelete = async () => {
       return
     }
 
+    if (departmentToDeleteLocal) {
+      const response = await departmentService.removeDepartmentTaskType(props.projectId, departmentToDeleteLocal, taskTypeToDeleteLocal)
+      departmentsStore.updateProjectDepartments(props.projectId, response)
+    } else {
       const response = await customTaskTypeService.deleteCustomTaskType(
         props.projectId,
         taskTypeToDeleteLocal,
         categoryToDeleteLocal
       )
       taskTypes.value = response
+    }
 
     toast({
       title: 'Success',
@@ -471,16 +551,20 @@ const confirmDelete = async () => {
     // Close dialog and clear values
     isDeleteDialogOpen.value = false
     taskTypeToDelete.value = ''
-    categoryToDelete.value = ''
+    categoryToDelete.value = 'asset'
+    departmentToDelete.value = ''
     deleteError.value = ''
   } catch (error: any) {
     console.error('Failed to delete task type:', error)
     const errorData = error.response?.data
+    const detail = errorData?.detail
 
-    if (errorData?.task_count) {
+    if (detail?.task_count) {
-      deleteError.value = `Cannot delete: ${errorData.task_count} task(s) are using this type`
+      deleteError.value = `Cannot delete: ${detail.task_count} task(s) are using this type`
+    } else if (typeof detail === 'string') {
+      deleteError.value = detail
     } else {
-      deleteError.value = errorData?.detail || 'Failed to delete task type'
+      deleteError.value = 'Failed to delete task type'
     }
 
     toast({

frontend/src/components/shot/ShotDetailPanel.vue

@@ -341,6 +341,7 @@ import { shotService, type Shot, type TaskStatusInfo } from '@/services/shot'
 import { taskService, type ProductionNote, type Submission } from '@/services/task'
 import { projectService, type ProjectMember } from '@/services/project'
 import { useTaskStatusesStore } from '@/stores/taskStatuses'
+import { useDepartmentsStore } from '@/stores/departments'
 import { useAvatarUrl } from '@/composables/useAvatarUrl'
 import { usePermission } from '@/composables/usePermission'
 
@@ -375,6 +376,7 @@ const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
 const taskStatusesStore = useTaskStatusesStore()
+const departmentsStore = useDepartmentsStore()
 const { getAvatarUrl } = useAvatarUrl()
 const { isAdmin, isCoordinatorOrAdmin } = usePermission()
 
@@ -435,9 +437,15 @@ const canUploadReferences = computed(() => {
 
 const canEditDesign = computed(() => isCoordinatorOrAdmin.value)
 
+// Task types offered in "Add Task" include the flat shot task type list
+// plus every task type owned by a shot department (e.g. Animation's own
+// task types), deduped against types the shot already has a task for.
 const availableTaskTypes = computed(() => {
   const existingTypes = new Set(tasks.value.map(task => task.task_type))
-  return props.allTaskTypes.filter(type => !existingTypes.has(type))
+  const departmentTaskTypes = departmentsStore.getDepartmentsByType(props.projectId, 'shot')
+    .flatMap(d => d.task_types)
+  const merged = Array.from(new Set([...props.allTaskTypes, ...departmentTaskTypes]))
+  return merged.filter(type => !existingTypes.has(type))
 })
 
 // Methods
@@ -446,6 +454,7 @@ const loadShotDetails = async () => {
     isLoading.value = true
     error.value = null
     shot.value = props.initialShot ?? await shotService.getShot(props.shotId)
+    departmentsStore.fetchProjectDepartments(props.projectId)
     await Promise.all([
       taskStatusesStore.fetchProjectStatuses(props.projectId),
       loadProjectMembers()