feat : add task management with kanban and backlog

Add kanban board with drag-and-drop, backlog section, task/group
drawers, DTOs, services, and i18n translations.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/components/TaskCard.vue

@@ -0,0 +1,72 @@
+<template>
+    <div
+        class="cursor-pointer rounded-lg border border-neutral-200 bg-white p-3 shadow-sm transition hover:shadow-md"
+        draggable="true"
+        @dragstart="onDragStart"
+        @dragend="onDragEnd"
+        @click="emit('click')"
+    >
+        <div class="flex items-start justify-between gap-2">
+            <h4 class="text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
+            <button
+                class="shrink-0 text-neutral-400 hover:text-primary-500"
+                @click.stop
+            >
+                <Icon name="mdi:play-circle-outline" size="20" />
+            </button>
+        </div>
+
+        <div class="mt-2 flex items-center gap-1.5">
+            <span
+                v-if="task.priority"
+                class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                :style="{ backgroundColor: task.priority.color }"
+            >
+                {{ task.priority.label }}
+            </span>
+            <span
+                v-for="type in task.types"
+                :key="type.id"
+                class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                :style="{ backgroundColor: type.color }"
+            >
+                {{ type.label }}
+            </span>
+            <span
+                v-if="task.assignee"
+                class="ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-primary-500 text-[10px] font-bold text-white"
+                :title="task.assignee.username"
+            >
+                {{ task.assignee.username.substring(0, 2).toUpperCase() }}
+            </span>
+            <span
+                v-else
+                class="ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 text-neutral-400"
+            >
+                <Icon name="mdi:account-outline" size="14" />
+            </span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Task } from '~/services/dto/task'
+
+const props = defineProps<{
+    task: Task
+}>()
+
+const emit = defineEmits<{
+    (e: 'click'): void
+}>()
+
+function onDragStart(event: DragEvent) {
+    event.dataTransfer!.effectAllowed = 'move'
+    event.dataTransfer!.setData('text/plain', String(props.task.id))
+    ;(event.target as HTMLElement).classList.add('opacity-50')
+}
+
+function onDragEnd(event: DragEvent) {
+    ;(event.target as HTMLElement).classList.remove('opacity-50')
+}
+</script>