Add multi-role permission system with a Role Management admin page

Users can now hold multiple roles, each with its own editable set of
create/edit/delete-style permissions across assets, shots, tasks, task
assignment, review approve/retake, submissions, uploads, and notes
(including internal vs. client note visibility). The 4 existing roles
(coordinator/director/artist/developer) are migrated into the new system
as system roles, seeded to reproduce today's actual behavior exactly;
admins can create custom roles (e.g. "Reviewer", "Outsourcing") via the
new Role Management page and assign multiple roles to a user via a new
"Manage Roles" action on the Team page.

Backend:
- New Role/Permission models and role_permissions/user_roles tables,
  plus a one-off, idempotent seed/backfill migration script.
- New require_permission()/user_has_permission() dependency, wired into
  the actual mutation endpoints across shots/assets/tasks/reviews,
  always preserving existing ownership- and self-service-based access
  (e.g. artists editing their own task status, own notes, own uploads,
  own submissions) as an unconditional fallback alongside the new
  permission checks - nothing that worked before now requires a role.
- New endpoints: PUT/DELETE on task submissions (wires up soft-deletion
  columns that existed on the model but were never exposed), plus full
  role CRUD and per-user role assignment.
- Along the way: fixed newly-created users not being linked to their
  matching system role (silently leaving them with zero permissions),
  and unified an inconsistency between the single vs. bulk task status
  endpoints that allowed different roles to bulk-update status.

Frontend:
- Role Management page with a grouped, human-readable permission editor
  (icons, plain-language action labels, per-resource select-all, live
  selected count) replacing an earlier dense matrix prototype.
- hasPermission() added to the existing usePermission() composable
  without touching its current isAdmin/isCoordinatorOrAdmin consumers.
- Note composer gets an Internal/Client toggle; submissions gain inline
  edit/delete actions gated the same ownership-or-permission way as notes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/components/task/SubmissionCard.vue

@@ -56,11 +56,19 @@
           </div>
         </div>
 
-        <div v-if="submission.notes" class="text-sm bg-muted p-2 rounded">
+        <div v-if="!editing && submission.notes" class="text-sm bg-muted p-2 rounded">
           <p class="font-semibold text-xs mb-1">Notes:</p>
           <p class="line-clamp-2">{{ submission.notes }}</p>
         </div>
 
+        <div v-if="editing" class="space-y-2">
+          <Textarea v-model="editNotes" rows="2" class="resize-none text-sm" placeholder="Notes about this submission..." />
+          <div class="flex gap-2">
+            <Button size="sm" @click="handleSaveNotes">Save</Button>
+            <Button size="sm" variant="outline" @click="editing = false">Cancel</Button>
+          </div>
+        </div>
+
         <div v-if="submission.latest_review?.feedback" class="text-sm border-l-2 pl-2" :class="getReviewBorderClass(submission.latest_review.decision)">
           <p class="font-semibold text-xs mb-1">Review Feedback:</p>
           <p class="line-clamp-2">{{ submission.latest_review.feedback }}</p>
@@ -69,37 +77,122 @@
           </p>
         </div>
 
-        <Button
-          variant="outline"
-          size="sm"
-          @click="emit('view', submission)"
-        >
-          <Eye class="h-4 w-4 mr-2" />
-          View Details
-        </Button>
+        <div v-if="!editing" class="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            @click="emit('view', submission)"
+          >
+            <Eye class="h-4 w-4 mr-2" />
+            View Details
+          </Button>
+          <Button v-if="canEdit" variant="ghost" size="sm" @click="startEdit">
+            <Pencil class="h-4 w-4 mr-2" />
+            Edit
+          </Button>
+          <Button v-if="canDelete" variant="ghost" size="sm" @click="showDeleteDialog = true">
+            <Trash2 class="h-4 w-4 mr-2" />
+            Delete
+          </Button>
+        </div>
       </div>
     </div>
+
+    <AlertDialog :open="showDeleteDialog" @update:open="(val: boolean) => { showDeleteDialog = val }">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete Submission</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to delete this submission? This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction @click="handleDelete" class="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   </Card>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
-import { FileIcon, Download, Eye, Play } from 'lucide-vue-next'
+import { ref, computed, onMounted, watch } from 'vue'
+import { FileIcon, Download, Eye, Play, Pencil, Trash2 } from 'lucide-vue-next'
 import { Card } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
+import { Textarea } from '@/components/ui/textarea'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import type { Submission } from '@/services/task'
+import {
+  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { taskService, type Submission } from '@/services/task'
 import { apiClient } from '@/services/api'
+import { useAuthStore } from '@/stores/auth'
+import { usePermission } from '@/composables/usePermission'
+import { useToast } from '@/components/ui/toast/use-toast'
 
 const props = defineProps<{
+  taskId: number
   submission: Submission
 }>()
 
 const emit = defineEmits<{
   view: [submission: Submission]
+  submissionUpdated: []
 }>()
 
+const { toast } = useToast()
+const authStore = useAuthStore()
+const { hasPermission } = usePermission()
+
+const isOwnSubmission = computed(() => authStore.user?.id === props.submission.user_id)
+const canEdit = computed(() => isOwnSubmission.value || authStore.user?.is_admin || hasPermission('submission', 'edit'))
+const canDelete = computed(() => isOwnSubmission.value || authStore.user?.is_admin || hasPermission('submission', 'delete'))
+
+const editing = ref(false)
+const editNotes = ref('')
+const showDeleteDialog = ref(false)
+
+function startEdit() {
+  editing.value = true
+  editNotes.value = props.submission.notes || ''
+}
+
+async function handleSaveNotes() {
+  try {
+    await taskService.updateSubmission(props.taskId, props.submission.id, editNotes.value)
+    editing.value = false
+    emit('submissionUpdated')
+    toast({ title: 'Success', description: 'Submission updated successfully' })
+  } catch (error: any) {
+    toast({
+      title: 'Error',
+      description: error.response?.data?.detail || 'Failed to update submission',
+      variant: 'destructive'
+    })
+  }
+}
+
+async function handleDelete() {
+  try {
+    await taskService.deleteSubmission(props.taskId, props.submission.id)
+    emit('submissionUpdated')
+    toast({ title: 'Success', description: 'Submission deleted successfully' })
+  } catch (error: any) {
+    toast({
+      title: 'Error',
+      description: error.response?.data?.detail || 'Failed to delete submission',
+      variant: 'destructive'
+    })
+  } finally {
+    showDeleteDialog.value = false
+  }
+}
+
 const thumbnailBlobUrl = ref<string | null>(null)
 
 function getFileExtension(filename: string): string {