From 50ae9ef5498c9005e5cc023307659e4a7d6ccfa4 Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Tue, 10 Mar 2026 21:58:35 +0100
Subject: [PATCH] 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>
---
 .../components/ConfirmDeleteStatusModal.vue   |  96 ++++++
 frontend/components/ProjectGroupTab.vue       | 118 +++++++
 frontend/components/ProjectStatusTab.vue      | 162 +++++++++
 frontend/components/TaskStatusDrawer.vue      |   2 +
 frontend/pages/admin.vue                      |   4 +-
 frontend/pages/projects/[id]/groups.vue       |  32 ++
 frontend/pages/projects/[id]/index.vue        | 308 ++++++++++++++++++
 frontend/pages/projects/[id]/statuses.vue     |  32 ++
 frontend/services/dto/task-status.ts          |   4 +
 frontend/services/task-statuses.ts            |   9 +-
 10 files changed, 763 insertions(+), 4 deletions(-)
 create mode 100644 frontend/components/ConfirmDeleteStatusModal.vue
 create mode 100644 frontend/components/ProjectGroupTab.vue
 create mode 100644 frontend/components/ProjectStatusTab.vue
 create mode 100644 frontend/pages/projects/[id]/groups.vue
 create mode 100644 frontend/pages/projects/[id]/index.vue
 create mode 100644 frontend/pages/projects/[id]/statuses.vue

diff --git a/frontend/components/ConfirmDeleteStatusModal.vue b/frontend/components/ConfirmDeleteStatusModal.vue
new file mode 100644
index 0000000..ef3afd9
--- /dev/null
+++ b/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>
diff --git a/frontend/components/ProjectGroupTab.vue b/frontend/components/ProjectGroupTab.vue
new file mode 100644
index 0000000..44e85c6
--- /dev/null
+++ b/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>
diff --git a/frontend/components/ProjectStatusTab.vue b/frontend/components/ProjectStatusTab.vue
new file mode 100644
index 0000000..40e752a
--- /dev/null
+++ b/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>
diff --git a/frontend/components/TaskStatusDrawer.vue b/frontend/components/TaskStatusDrawer.vue
index ee65dd6..3fb83da 100644
--- a/frontend/components/TaskStatusDrawer.vue
+++ b/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) {
diff --git a/frontend/pages/admin.vue b/frontend/pages/admin.vue
index ca420b1..9290f01 100644
--- a/frontend/pages/admin.vue
+++ b/frontend/pages/admin.vue
@@ -19,7 +19,6 @@
         </div>
 
         <div class="mt-6">
-            <AdminStatusTab v-if="activeTab === 'statuses'" />
             <AdminEffortTab v-if="activeTab === 'efforts'" />
             <AdminPriorityTab v-if="activeTab === 'priorities'" />
             <AdminTypeTab v-if="activeTab === 'types'" />
@@ -32,7 +31,6 @@
 useHead({ title: 'Administration' })
 
 const tabs = [
-    { key: 'statuses', label: 'Statuts' },
     { key: 'efforts', label: 'Efforts' },
     { key: 'priorities', label: 'Priorités' },
     { key: 'types', label: 'Types' },
@@ -41,5 +39,5 @@ const tabs = [
 
 type TabKey = typeof tabs[number]['key']
 
-const activeTab = ref<TabKey>('statuses')
+const activeTab = ref<TabKey>('efforts')
 </script>
diff --git a/frontend/pages/projects/[id]/groups.vue b/frontend/pages/projects/[id]/groups.vue
new file mode 100644
index 0000000..fa7e44a
--- /dev/null
+++ b/frontend/pages/projects/[id]/groups.vue
@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h1 class="text-2xl font-bold text-neutral-900">{{ project?.name ?? '' }} — Groupes</h1>
+        </div>
+
+        <div class="mt-6">
+            <ProjectGroupTab :project-id="projectId" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Project } from '~/services/dto/project'
+import { useProjectService } from '~/services/projects'
+
+const route = useRoute()
+const projectId = computed(() => Number(route.params.id))
+
+useHead({ title: 'Groupes du projet' })
+
+const projectService = useProjectService()
+const project = ref<Project | null>(null)
+
+async function loadProject() {
+    project.value = await projectService.getById(projectId.value)
+}
+
+onMounted(() => {
+    loadProject()
+})
+</script>
diff --git a/frontend/pages/projects/[id]/index.vue b/frontend/pages/projects/[id]/index.vue
new file mode 100644
index 0000000..2229f3a
--- /dev/null
+++ b/frontend/pages/projects/[id]/index.vue
@@ -0,0 +1,308 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h1 class="text-2xl font-bold text-neutral-900">{{ project?.name ?? '' }}</h1>
+            <div class="flex gap-3">
+                <button
+                    class="rounded-md bg-secondary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-600"
+                    @click="openGroupCreate"
+                >
+                    + Ajouter un groupe
+                </button>
+                <button
+                    class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
+                    @click="openTaskCreate"
+                >
+                    + Ajouter un ticket
+                </button>
+            </div>
+        </div>
+
+        <div class="mt-4">
+            <MalioSelect
+                v-model="selectedGroupId"
+                :options="groupFilterOptions"
+                label="Groupe"
+                empty-option-label="Tous les groupes"
+                min-width="w-64"
+            />
+        </div>
+
+        <!-- Kanban -->
+        <div class="mt-6 flex gap-4 overflow-x-auto pb-4">
+            <div
+                v-for="status in statuses"
+                :key="status.id"
+                class="flex w-72 shrink-0 flex-col rounded-lg transition-colors"
+                :class="dragOverStatusId === status.id ? 'bg-neutral-200' : 'bg-neutral-50'"
+                @dragover.prevent
+                @dragenter.prevent="onDragEnter(status.id)"
+                @dragleave="onDragLeave"
+                @drop.prevent="onDropStatus($event, status)"
+            >
+                <div
+                    class="rounded-t-lg px-4 py-3 text-sm font-bold text-white"
+                    :style="{ backgroundColor: status.color }"
+                >
+                    {{ status.label }} ({{ tasksByStatus(status.id).length }})
+                </div>
+                <div class="flex flex-col gap-3 p-3">
+                    <TaskCard
+                        v-for="task in tasksByStatus(status.id)"
+                        :key="task.id"
+                        :task="task"
+                        @click="openTaskEdit(task)"
+                    />
+                    <p
+                        v-if="tasksByStatus(status.id).length === 0"
+                        class="py-4 text-center text-xs text-neutral-400"
+                    >
+                        Aucun ticket
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Backlog -->
+        <div
+            class="mt-8 rounded-lg p-4 transition-colors"
+            :class="dragOverStatusId === 0 ? 'bg-tertiary-600' : 'bg-tertiary-500'"
+            @dragover.prevent
+            @dragenter.prevent="onDragEnter(0)"
+            @dragleave="onDragLeave"
+            @drop.prevent="onDropBacklog($event)"
+        >
+            <h2 class="text-lg font-bold text-neutral-900">Backlog</h2>
+            <div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
+                <div
+                    v-for="task in backlogTasks"
+                    :key="task.id"
+                    class="flex cursor-pointer items-center justify-between rounded-lg border border-neutral-200 bg-white px-4 py-3 hover:shadow-sm"
+                    draggable="true"
+                    @dragstart="onBacklogDragStart($event, task)"
+                    @dragend="onBacklogDragEnd"
+                    @click="openTaskEdit(task)"
+                >
+                    <span class="text-sm font-semibold text-neutral-900">{{ task.title }}</span>
+                    <div class="flex items-center gap-2">
+                        <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.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-if="task.effort"
+                            class="text-sm font-bold text-neutral-700"
+                        >
+                            {{ task.effort.label }}
+                        </span>
+                        <span
+                            v-if="task.assignee"
+                            class="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="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>
+            </div>
+        </div>
+
+        <TaskDrawer
+            v-model="taskDrawerOpen"
+            :task="selectedTask"
+            :project-id="projectId"
+            :statuses="statuses"
+            :efforts="efforts"
+            :priorities="priorities"
+            :types="types"
+            :groups="groups"
+            :users="users"
+            @saved="onSaved"
+        />
+
+        <TaskGroupDrawer
+            v-model="groupDrawerOpen"
+            :group="selectedGroup"
+            :project-id="projectId"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Project } from '~/services/dto/project'
+import type { Task } from '~/services/dto/task'
+import type { TaskStatus } from '~/services/dto/task-status'
+import type { TaskEffort } from '~/services/dto/task-effort'
+import type { TaskPriority } from '~/services/dto/task-priority'
+import type { TaskType } from '~/services/dto/task-type'
+import type { TaskGroup } from '~/services/dto/task-group'
+import type { UserData } from '~/services/dto/user-data'
+import { useProjectService } from '~/services/projects'
+import { useTaskService } from '~/services/tasks'
+import { useTaskStatusService } from '~/services/task-statuses'
+import { useTaskEffortService } from '~/services/task-efforts'
+import { useTaskPriorityService } from '~/services/task-priorities'
+import { useTaskTypeService } from '~/services/task-types'
+import { useTaskGroupService } from '~/services/task-groups'
+import { useUserService } from '~/services/users'
+
+const route = useRoute()
+const projectId = computed(() => Number(route.params.id))
+
+useHead({ title: 'Projet' })
+
+const projectService = useProjectService()
+const taskService = useTaskService()
+const statusService = useTaskStatusService()
+const effortService = useTaskEffortService()
+const priorityService = useTaskPriorityService()
+const typeService = useTaskTypeService()
+const groupService = useTaskGroupService()
+const userService = useUserService()
+
+const project = ref<Project | null>(null)
+const tasks = ref<Task[]>([])
+const statuses = ref<TaskStatus[]>([])
+const efforts = ref<TaskEffort[]>([])
+const priorities = ref<TaskPriority[]>([])
+const types = ref<TaskType[]>([])
+const groups = ref<TaskGroup[]>([])
+const users = ref<UserData[]>([])
+const isLoading = ref(true)
+
+const selectedGroupId = ref<number | null>(null)
+const dragOverStatusId = ref<number | null>(null)
+const dragCounter = ref(0)
+const taskDrawerOpen = ref(false)
+const selectedTask = ref<Task | null>(null)
+const groupDrawerOpen = ref(false)
+const selectedGroup = ref<TaskGroup | null>(null)
+
+const groupFilterOptions = computed(() =>
+    groups.value.map(g => ({ label: g.title, value: g.id }))
+)
+
+const filteredTasks = computed(() => {
+    if (!selectedGroupId.value) return tasks.value
+    return tasks.value.filter(t => t.group?.id === selectedGroupId.value)
+})
+
+function tasksByStatus(statusId: number): Task[] {
+    return filteredTasks.value.filter(t => t.status?.id === statusId)
+}
+
+const backlogTasks = computed(() =>
+    filteredTasks.value.filter(t => !t.status)
+)
+
+async function loadData() {
+    isLoading.value = true
+    try {
+        const [p, t, s, e, pr, ty, g, u] = await Promise.all([
+            projectService.getById(projectId.value),
+            taskService.getByProject(projectId.value),
+            statusService.getByProject(projectId.value),
+            effortService.getAll(),
+            priorityService.getAll(),
+            typeService.getAll(),
+            groupService.getByProject(projectId.value),
+            userService.getAll(),
+        ])
+        project.value = p
+        tasks.value = t
+        statuses.value = s
+        efforts.value = e
+        priorities.value = pr
+        types.value = ty
+        groups.value = g
+        users.value = u
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function openTaskCreate() {
+    selectedTask.value = null
+    taskDrawerOpen.value = true
+}
+
+function openTaskEdit(task: Task) {
+    selectedTask.value = task
+    taskDrawerOpen.value = true
+}
+
+function openGroupCreate() {
+    selectedGroup.value = null
+    groupDrawerOpen.value = true
+}
+
+function onDragEnter(id: number) {
+    dragCounter.value++
+    dragOverStatusId.value = id
+}
+
+function onDragLeave() {
+    dragCounter.value--
+    if (dragCounter.value === 0) {
+        dragOverStatusId.value = null
+    }
+}
+
+function onDrop(event: DragEvent) {
+    dragCounter.value = 0
+    dragOverStatusId.value = null
+    return Number(event.dataTransfer!.getData('text/plain'))
+}
+
+function onBacklogDragStart(event: DragEvent, task: Task) {
+    event.dataTransfer!.effectAllowed = 'move'
+    event.dataTransfer!.setData('text/plain', String(task.id))
+    ;(event.target as HTMLElement).classList.add('opacity-50')
+}
+
+function onBacklogDragEnd(event: DragEvent) {
+    ;(event.target as HTMLElement).classList.remove('opacity-50')
+}
+
+async function onDropStatus(event: DragEvent, status: TaskStatus) {
+    const taskId = onDrop(event)
+    const task = tasks.value.find(t => t.id === taskId)
+    if (!task || task.status?.id === status.id) return
+    task.status = status
+    await taskService.update(taskId, { status: `/api/task_statuses/${status.id}` })
+}
+
+async function onDropBacklog(event: DragEvent) {
+    const taskId = onDrop(event)
+    const task = tasks.value.find(t => t.id === taskId)
+    if (!task || !task.status) return
+    task.status = null
+    await taskService.update(taskId, { status: null })
+}
+
+async function onSaved() {
+    await loadData()
+}
+
+onMounted(() => {
+    loadData()
+})
+</script>
diff --git a/frontend/pages/projects/[id]/statuses.vue b/frontend/pages/projects/[id]/statuses.vue
new file mode 100644
index 0000000..a6932ee
--- /dev/null
+++ b/frontend/pages/projects/[id]/statuses.vue
@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h1 class="text-2xl font-bold text-neutral-900">{{ project?.name ?? '' }} — Statuts</h1>
+        </div>
+
+        <div class="mt-6">
+            <ProjectStatusTab :project-id="projectId" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Project } from '~/services/dto/project'
+import { useProjectService } from '~/services/projects'
+
+const route = useRoute()
+const projectId = computed(() => Number(route.params.id))
+
+useHead({ title: 'Statuts du projet' })
+
+const projectService = useProjectService()
+const project = ref<Project | null>(null)
+
+async function loadProject() {
+    project.value = await projectService.getById(projectId.value)
+}
+
+onMounted(() => {
+    loadProject()
+})
+</script>
diff --git a/frontend/services/dto/task-status.ts b/frontend/services/dto/task-status.ts
index 073c1ec..546046d 100644
--- a/frontend/services/dto/task-status.ts
+++ b/frontend/services/dto/task-status.ts
@@ -1,13 +1,17 @@
+import type { Project } from './project'
+
 export type TaskStatus = {
     id: number
     '@id'?: string
     label: string
     color: string
     position: number
+    project: Project | null
 }
 
 export type TaskStatusWrite = {
     label: string
     color: string
     position: number
+    project: string
 }
diff --git a/frontend/services/task-statuses.ts b/frontend/services/task-statuses.ts
index 28c4e06..7efcb9c 100644
--- a/frontend/services/task-statuses.ts
+++ b/frontend/services/task-statuses.ts
@@ -10,6 +10,13 @@ export function useTaskStatusService() {
         return extractHydraMembers(data)
     }
 
+    async function getByProject(projectId: number): Promise<TaskStatus[]> {
+        const data = await api.get<HydraCollection<TaskStatus>>('/task_statuses', {
+            project: `/api/projects/${projectId}`,
+        })
+        return extractHydraMembers(data)
+    }
+
     async function create(payload: TaskStatusWrite): Promise<TaskStatus> {
         return api.post<TaskStatus>('/task_statuses', payload as Record<string, unknown>, {
             toastSuccessKey: 'taskStatuses.created',
@@ -28,5 +35,5 @@ export function useTaskStatusService() {
         })
     }
 
-    return { getAll, create, update, remove }
+    return { getAll, getByProject, create, update, remove }
 }