feat(projects) : add per-project task statuses and split project detail into sub-pages

Move project detail from [id].vue to [id]/ directory with Kanban, Groups
and Statuses sub-pages. Add project filter on task statuses service and
drawer. Remove global statuses tab from admin.

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

frontend/components/ConfirmDeleteStatusModal.vue

@@ -0,0 +1,96 @@
+<template>
+    <Teleport v-if="modelValue" to="body">
+        <Transition name="modal" appear>
+            <div class="fixed inset-0 z-50 flex items-center justify-center">
+                <div class="absolute inset-0 bg-black/30" @click="cancel" />
+                <div class="relative z-10 w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
+                    <h3 class="text-lg font-bold text-neutral-900">Supprimer le statut « {{ statusLabel }} »</h3>
+
+                    <p class="mt-3 text-sm text-neutral-600">
+                        {{ taskCount }} tâche{{ taskCount > 1 ? 's sont liées' : ' est liée' }} à ce statut.
+                        Choisissez où les déplacer :
+                    </p>
+
+                    <div class="mt-4">
+                        <MalioSelect
+                            v-model="targetStatusId"
+                            :options="targetOptions"
+                            label="Déplacer vers"
+                            empty-option-label="Backlog (sans statut)"
+                            min-width="w-full"
+                        />
+                    </div>
+
+                    <div class="mt-6 flex justify-end gap-3">
+                        <button
+                            type="button"
+                            class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50"
+                            @click="cancel"
+                        >
+                            Annuler
+                        </button>
+                        <button
+                            type="button"
+                            class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700 disabled:opacity-50"
+                            :disabled="isProcessing"
+                            @click="confirm"
+                        >
+                            Supprimer
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { TaskStatus } from '~/services/dto/task-status'
+
+const props = defineProps<{
+    modelValue: boolean
+    statusLabel: string
+    taskCount: number
+    availableStatuses: TaskStatus[]
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'confirm', targetStatusId: number | null): void
+}>()
+
+const targetStatusId = ref<number | null>(null)
+const isProcessing = ref(false)
+
+const targetOptions = computed(() =>
+    props.availableStatuses.map(s => ({ label: s.label, value: s.id }))
+)
+
+watch(() => props.modelValue, (open) => {
+    if (open) {
+        targetStatusId.value = null
+        isProcessing.value = false
+    }
+})
+
+function cancel() {
+    emit('update:modelValue', false)
+}
+
+function confirm() {
+    isProcessing.value = true
+    emit('confirm', targetStatusId.value)
+}
+</script>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active {
+    transition: opacity 0.2s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+    opacity: 0;
+}
+</style>

frontend/components/ProjectGroupTab.vue

@@ -0,0 +1,118 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">Groupes</h2>
+            <button
+                class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
+                @click="openCreate"
+            >
+                + Ajouter un groupe
+            </button>
+        </div>
+
+        <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
+            <table class="w-full text-left text-sm">
+                <thead class="border-b border-neutral-200 bg-neutral-50">
+                    <tr>
+                        <th class="px-4 py-3 font-semibold text-neutral-700">Titre</th>
+                        <th class="px-4 py-3 font-semibold text-neutral-700">Couleur</th>
+                        <th class="px-4 py-3 font-semibold text-neutral-700">Description</th>
+                        <th class="px-4 py-3 font-semibold text-neutral-700">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr
+                        v-for="item in items"
+                        :key="item.id"
+                        class="cursor-pointer border-b border-neutral-100 hover:bg-neutral-50"
+                        @click="openEdit(item)"
+                    >
+                        <td class="px-4 py-3 font-semibold text-primary-500">{{ item.title }}</td>
+                        <td class="px-4 py-3">
+                            <span
+                                class="inline-block h-6 w-6 rounded-full"
+                                :style="{ backgroundColor: item.color }"
+                            />
+                        </td>
+                        <td class="max-w-xs truncate px-4 py-3 text-neutral-700">
+                            {{ item.description ?? '—' }}
+                        </td>
+                        <td class="px-4 py-3">
+                            <button
+                                class="text-red-500 hover:text-red-700"
+                                @click.stop="handleDelete(item.id)"
+                            >
+                                <Icon name="mdi:delete-outline" size="20" />
+                            </button>
+                        </td>
+                    </tr>
+                    <tr v-if="items.length === 0 && !isLoading">
+                        <td colspan="4" class="px-4 py-8 text-center text-neutral-400">
+                            Aucun groupe trouvé.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <TaskGroupDrawer
+            v-model="drawerOpen"
+            :group="selectedItem"
+            :project-id="projectId"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TaskGroup } from '~/services/dto/task-group'
+import { useTaskGroupService } from '~/services/task-groups'
+
+const props = defineProps<{
+    projectId: number
+}>()
+
+const emit = defineEmits<{
+    (e: 'updated'): void
+}>()
+
+const { getByProject, remove } = useTaskGroupService()
+const items = ref<TaskGroup[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedItem = ref<TaskGroup | null>(null)
+
+async function loadItems() {
+    isLoading.value = true
+    try {
+        items.value = await getByProject(props.projectId)
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function openCreate() {
+    selectedItem.value = null
+    drawerOpen.value = true
+}
+
+function openEdit(item: TaskGroup) {
+    selectedItem.value = item
+    drawerOpen.value = true
+}
+
+async function handleDelete(id: number) {
+    await remove(id)
+    await loadItems()
+    emit('updated')
+}
+
+async function onSaved() {
+    await loadItems()
+    emit('updated')
+}
+
+onMounted(() => {
+    loadItems()
+})
+</script>

frontend/components/ProjectStatusTab.vue

@@ -0,0 +1,162 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">Statuts</h2>
+            <button
+                class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
+                @click="openCreate"
+            >
+                + Ajouter un statut
+            </button>
+        </div>
+
+        <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
+            <table class="w-full text-left text-sm">
+                <thead class="border-b border-neutral-200 bg-neutral-50">
+                    <tr>
+                        <th class="px-4 py-3 font-semibold text-neutral-700">Libellé</th>
+                        <th class="px-4 py-3 font-semibold text-neutral-700">Couleur</th>
+                        <th class="px-4 py-3 font-semibold text-neutral-700">Position</th>
+                        <th class="px-4 py-3 font-semibold text-neutral-700">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr
+                        v-for="item in items"
+                        :key="item.id"
+                        class="cursor-pointer border-b border-neutral-100 hover:bg-neutral-50"
+                        @click="openEdit(item)"
+                    >
+                        <td class="px-4 py-3 font-semibold text-primary-500">{{ item.label }}</td>
+                        <td class="px-4 py-3">
+                            <span
+                                class="inline-block h-6 w-6 rounded-full"
+                                :style="{ backgroundColor: item.color }"
+                            />
+                        </td>
+                        <td class="px-4 py-3 text-neutral-700">{{ item.position }}</td>
+                        <td class="px-4 py-3">
+                            <button
+                                class="text-red-500 hover:text-red-700"
+                                @click.stop="requestDelete(item)"
+                            >
+                                <Icon name="mdi:delete-outline" size="20" />
+                            </button>
+                        </td>
+                    </tr>
+                    <tr v-if="items.length === 0 && !isLoading">
+                        <td colspan="4" class="px-4 py-8 text-center text-neutral-400">
+                            Aucun statut trouvé.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <TaskStatusDrawer
+            v-model="drawerOpen"
+            :item="selectedItem"
+            :project-id="projectId"
+            @saved="onSaved"
+        />
+
+        <ConfirmDeleteStatusModal
+            v-model="confirmModalOpen"
+            :status-label="statusToDelete?.label ?? ''"
+            :task-count="affectedTaskCount"
+            :available-statuses="reassignTargets"
+            @confirm="onConfirmDelete"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TaskStatus } from '~/services/dto/task-status'
+import type { Task } from '~/services/dto/task'
+import { useTaskStatusService } from '~/services/task-statuses'
+import { useTaskService } from '~/services/tasks'
+
+const props = defineProps<{
+    projectId: number
+}>()
+
+const statusService = useTaskStatusService()
+const taskService = useTaskService()
+
+const items = ref<TaskStatus[]>([])
+const tasks = ref<Task[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedItem = ref<TaskStatus | null>(null)
+const confirmModalOpen = ref(false)
+const statusToDelete = ref<TaskStatus | null>(null)
+
+const affectedTaskCount = computed(() => {
+    if (!statusToDelete.value) return 0
+    return tasks.value.filter(t => t.status?.id === statusToDelete.value!.id).length
+})
+
+const reassignTargets = computed(() => {
+    if (!statusToDelete.value) return items.value
+    return items.value.filter(s => s.id !== statusToDelete.value!.id)
+})
+
+async function loadItems() {
+    isLoading.value = true
+    try {
+        const [statuses, projectTasks] = await Promise.all([
+            statusService.getByProject(props.projectId),
+            taskService.getByProject(props.projectId),
+        ])
+        items.value = statuses
+        tasks.value = projectTasks
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function openCreate() {
+    selectedItem.value = null
+    drawerOpen.value = true
+}
+
+function openEdit(item: TaskStatus) {
+    selectedItem.value = item
+    drawerOpen.value = true
+}
+
+async function requestDelete(item: TaskStatus) {
+    statusToDelete.value = item
+    const count = tasks.value.filter(t => t.status?.id === item.id).length
+    if (count === 0) {
+        await statusService.remove(item.id)
+        await loadItems()
+    } else {
+        confirmModalOpen.value = true
+    }
+}
+
+async function onConfirmDelete(targetStatusId: number | null) {
+    if (!statusToDelete.value) return
+
+    const affectedTasks = tasks.value.filter(t => t.status?.id === statusToDelete.value!.id)
+    const statusIri = targetStatusId ? `/api/task_statuses/${targetStatusId}` : null
+
+    await Promise.all(
+        affectedTasks.map(t => taskService.update(t.id, { status: statusIri }))
+    )
+
+    await statusService.remove(statusToDelete.value.id)
+    confirmModalOpen.value = false
+    statusToDelete.value = null
+    await loadItems()
+}
+
+async function onSaved() {
+    await loadItems()
+}
+
+onMounted(() => {
+    loadItems()
+})
+</script>

frontend/components/TaskStatusDrawer.vue

@@ -38,6 +38,7 @@ import { useTaskStatusService } from '~/services/task-statuses'
 const props = defineProps<{
     modelValue: boolean
     item: TaskStatus | null
+    projectId: number
 }>()
 
 const emit = defineEmits<{
@@ -90,6 +91,7 @@ async function handleSubmit() {
             label: form.label.trim(),
             position: Number(form.position),
             color: form.color,
+            project: `/api/projects/${props.projectId}`,
         }
 
         if (isEditing.value && props.item) {