Merge branch 'develop' into feat/mail-integration

frontend/components/admin/AdminStatusTab.vue

@@ -1,140 +0,0 @@
-<template>
-    <div>
-        <div class="flex items-center justify-between">
-            <h2 class="text-lg font-bold text-neutral-900">Statuts</h2>
-            <MalioButton
-                icon-name="mdi:plus"
-                icon-position="left"
-                button-class="w-auto px-4"
-                label="Ajouter un statut"
-                @click="openCreate"
-            />
-        </div>
-
-        <DataTable
-            :columns="columns"
-            :items="items"
-            :loading="isLoading"
-            empty-message="Aucun statut trouvé."
-            deletable
-            @row-click="openEdit"
-            @delete="requestDelete"
-        >
-            <template #cell-color="{ item }">
-                <span
-                    class="inline-block h-6 w-6 rounded-full"
-                    :style="{ backgroundColor: item.color }"
-                />
-            </template>
-        </DataTable>
-
-        <TaskStatusDrawer
-            v-model="drawerOpen"
-            :item="selectedItem"
-            @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'
-
-import type { DataTableColumn } from '~/components/ui/DataTable.vue'
-
-const columns: DataTableColumn[] = [
-    { key: 'label', label: 'Libellé', primary: true },
-    { key: 'color', label: 'Couleur' },
-    { key: 'position', label: 'Position', class: 'text-neutral-700' },
-]
-
-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, allTasks] = await Promise.all([
-            statusService.getAll(),
-            taskService.getAll(),
-        ])
-        items.value = statuses
-        tasks.value = allTasks
-    } 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/admin/AdminWorkflowTab.vue

@@ -0,0 +1,100 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">{{ $t('workflows.title') }}</h2>
+            <MalioButton
+                icon-name="mdi:plus"
+                icon-position="left"
+                button-class="w-auto px-4"
+                :label="$t('workflows.addWorkflow')"
+                @click="openCreate"
+            />
+        </div>
+
+        <DataTable
+            :columns="columns"
+            :items="items"
+            :loading="isLoading"
+            empty-message="Aucun workflow trouvé."
+            deletable
+            @row-click="openEdit"
+            @delete="requestDelete"
+        >
+            <template #cell-isDefault="{ item }">
+                <span
+                    v-if="item.isDefault"
+                    class="rounded bg-primary-100 px-2 py-0.5 text-xs font-medium text-primary-700"
+                >
+                    {{ $t('workflows.isDefault') }}
+                </span>
+            </template>
+            <template #cell-statusCount="{ item }">
+                {{ item.statuses.length }}
+            </template>
+        </DataTable>
+
+        <WorkflowDrawer
+            v-model="drawerOpen"
+            :item="selectedItem"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Workflow } from '~/services/dto/workflow'
+import { useWorkflowService } from '~/services/workflows'
+import type { DataTableColumn } from '~/components/ui/DataTable.vue'
+
+const { t } = useI18n()
+
+const columns: DataTableColumn[] = [
+    { key: 'name',        label: t('workflows.name'),     primary: true },
+    { key: 'isDefault',   label: t('workflows.isDefault') },
+    { key: 'statusCount', label: t('workflows.statuses') },
+    { key: 'position',    label: 'Position' },
+]
+
+const workflowService = useWorkflowService()
+
+const items = ref<Workflow[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedItem = ref<Workflow | null>(null)
+
+async function loadItems() {
+    isLoading.value = true
+    try {
+        items.value = await workflowService.getAll()
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function openCreate() {
+    selectedItem.value = null
+    drawerOpen.value = true
+}
+
+function openEdit(item: Workflow) {
+    selectedItem.value = item
+    drawerOpen.value = true
+}
+
+async function requestDelete(item: Workflow) {
+    try {
+        await workflowService.remove(item.id)
+        await loadItems()
+    } catch {
+        // Toast d'erreur déjà émis par useApi
+    }
+}
+
+async function onSaved() {
+    await loadItems()
+}
+
+onMounted(() => {
+    loadItems()
+})
+</script>

frontend/components/admin/WorkflowDrawer.vue

@@ -0,0 +1,261 @@
+<template>
+    <MalioDrawer v-model="isOpen" :title="isEditing ? $t('workflows.editWorkflow') : $t('workflows.addWorkflow')">
+        <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+            <MalioInputText
+                v-model="form.name"
+                :label="$t('workflows.name')"
+                input-class="w-full"
+                :error="touched.name && !form.name.trim() ? $t('workflows.name') + ' requis' : ''"
+                @blur="touched.name = true"
+            />
+
+            <div class="flex items-center gap-2">
+                <input
+                    id="isDefault"
+                    v-model="form.isDefault"
+                    type="checkbox"
+                    class="h-4 w-4 rounded border-neutral-300 text-primary-500 focus:ring-primary-500"
+                />
+                <label for="isDefault" class="text-sm font-medium text-neutral-700">
+                    {{ $t('workflows.isDefault') }}
+                </label>
+            </div>
+
+            <div class="mt-2">
+                <div class="flex items-center justify-between">
+                    <h3 class="text-sm font-bold text-neutral-900">{{ $t('workflows.statuses') }}</h3>
+                    <MalioButton
+                        type="button"
+                        icon-name="mdi:plus"
+                        icon-position="left"
+                        button-class="w-auto px-3 py-1 text-xs"
+                        :label="$t('workflows.addStatus')"
+                        @click="addStatus"
+                    />
+                </div>
+
+                <div class="mt-3 flex flex-col gap-3">
+                    <div
+                        v-for="(s, idx) in form.statuses"
+                        :key="idx"
+                        class="rounded border border-neutral-200 p-3"
+                    >
+                        <div class="flex items-end gap-2">
+                            <MalioInputText
+                                v-model="s.label"
+                                label="Libellé"
+                                input-class="w-full"
+                            />
+                            <select
+                                v-model="s.category"
+                                class="h-10 rounded border border-neutral-300 px-2 text-sm"
+                                aria-label="Catégorie"
+                            >
+                                <option v-for="c in categoryOptions" :key="c.value" :value="c.value">
+                                    {{ c.label }}
+                                </option>
+                            </select>
+                            <button
+                                type="button"
+                                class="h-10 px-2 text-red-600 hover:text-red-800"
+                                aria-label="Supprimer"
+                                @click="removeStatus(idx)"
+                            >
+                                <Icon name="mdi:delete" size="20" />
+                            </button>
+                        </div>
+                        <div class="mt-2 flex items-center gap-3">
+                            <ColorPicker v-model="s.color" />
+                            <label class="ml-auto flex items-center gap-1 text-xs text-neutral-700">
+                                <input v-model="s.isFinal" type="checkbox" class="h-3 w-3" />
+                                {{ $t('archive.statusFinal') }}
+                            </label>
+                            <label class="flex flex-col text-xs text-neutral-700">
+                                Position
+                                <input
+                                    v-model.number="s.position"
+                                    type="number"
+                                    class="mt-1 h-9 w-16 rounded border border-neutral-300 px-2 text-sm"
+                                />
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="mt-4 flex justify-end">
+                <MalioButton
+                    label="Enregistrer"
+                    button-class="w-auto px-6"
+                    :disabled="isSubmitting"
+                    @click="handleSubmit"
+                />
+            </div>
+        </form>
+    </MalioDrawer>
+</template>
+
+<script setup lang="ts">
+import type { Workflow, StatusCategory } from '~/services/dto/workflow'
+import type { TaskStatusWrite } from '~/services/dto/task-status'
+import { useWorkflowService } from '~/services/workflows'
+import { useTaskStatusService } from '~/services/task-statuses'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+    modelValue: boolean
+    item: Workflow | null
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'saved'): void
+}>()
+
+const isOpen = computed({
+    get: () => props.modelValue,
+    set: v => emit('update:modelValue', v),
+})
+
+const isEditing = computed(() => !!props.item)
+const isSubmitting = ref(false)
+
+type StatusForm = {
+    id?: number
+    label: string
+    color: string
+    position: number
+    isFinal: boolean
+    category: StatusCategory
+}
+
+const form = reactive<{
+    name: string
+    isDefault: boolean
+    statuses: StatusForm[]
+}>({
+    name: '',
+    isDefault: false,
+    statuses: [],
+})
+
+const touched = reactive({ name: false })
+
+const categoryOptions: { value: StatusCategory, label: string }[] = [
+    { value: 'todo',        label: t('workflows.categories.todo') },
+    { value: 'in_progress', label: t('workflows.categories.in_progress') },
+    { value: 'blocked',     label: t('workflows.categories.blocked') },
+    { value: 'review',      label: t('workflows.categories.review') },
+    { value: 'done',        label: t('workflows.categories.done') },
+]
+
+watch(() => props.modelValue, (open) => {
+    if (!open) return
+    if (props.item) {
+        form.name = props.item.name
+        form.isDefault = props.item.isDefault
+        form.statuses = props.item.statuses.map(s => ({
+            id: s.id,
+            label: s.label,
+            color: s.color,
+            position: s.position,
+            isFinal: s.isFinal,
+            category: s.category,
+        }))
+    } else {
+        form.name = ''
+        form.isDefault = false
+        form.statuses = []
+    }
+    touched.name = false
+})
+
+function addStatus() {
+    form.statuses.push({
+        label: '',
+        color: '#222783',
+        position: form.statuses.length,
+        isFinal: false,
+        category: 'todo',
+    })
+}
+
+function removeStatus(idx: number) {
+    form.statuses.splice(idx, 1)
+}
+
+const workflowService = useWorkflowService()
+const statusService = useTaskStatusService()
+
+async function handleSubmit() {
+    touched.name = true
+    if (!form.name.trim()) return
+
+    isSubmitting.value = true
+    try {
+        if (isEditing.value && props.item) {
+            await workflowService.update(props.item.id, {
+                name: form.name.trim(),
+                isDefault: form.isDefault,
+                position: props.item.position,
+            })
+            await syncStatuses(props.item)
+        } else {
+            const created = await workflowService.create({
+                name: form.name.trim(),
+                isDefault: form.isDefault,
+                position: 0,
+            })
+            for (const s of form.statuses) {
+                const payload: TaskStatusWrite = {
+                    label: s.label,
+                    color: s.color,
+                    position: s.position,
+                    isFinal: s.isFinal,
+                    category: s.category,
+                    workflow: `/api/workflows/${created.id}`,
+                }
+                await statusService.create(payload)
+            }
+        }
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+
+async function syncStatuses(workflow: Workflow) {
+    const existingIds = new Set(workflow.statuses.map(s => s.id))
+    const keptIds = new Set<number>()
+
+    for (const s of form.statuses) {
+        if (s.id) {
+            keptIds.add(s.id)
+            await statusService.update(s.id, {
+                label: s.label,
+                color: s.color,
+                position: s.position,
+                isFinal: s.isFinal,
+                category: s.category,
+            })
+        } else {
+            await statusService.create({
+                label: s.label,
+                color: s.color,
+                position: s.position,
+                isFinal: s.isFinal,
+                category: s.category,
+                workflow: `/api/workflows/${workflow.id}`,
+            })
+        }
+    }
+
+    for (const id of existingIds) {
+        if (id && !keptIds.has(id)) {
+            await statusService.remove(id)
+        }
+    }
+}
+</script>

frontend/components/project/ProjectDrawer.vue

@@ -87,10 +87,35 @@
             </MalioButton>
         </div>
 
+        <div v-if="props.project" class="mt-4 rounded border border-neutral-200 p-3">
+            <div class="flex items-center justify-between">
+                <div>
+                    <p class="text-xs uppercase text-neutral-500">{{ $t('workflows.title') }}</p>
+                    <p class="text-sm font-semibold text-neutral-900">{{ props.project.workflow?.name }}</p>
+                </div>
+                <MalioButton
+                    v-if="canManageWorkflows"
+                    type="button"
+                    icon-name="mdi:swap-horizontal"
+                    icon-position="left"
+                    button-class="w-auto px-3 py-1 text-xs"
+                    :label="$t('workflows.switchTitle')"
+                    @click="switchModalOpen = true"
+                />
+            </div>
+        </div>
+
         <ConfirmDeleteProjectModal
             v-model="confirmDeleteOpen"
             @confirm="handleDelete"
         />
+
+        <ProjectWorkflowSwitchModal
+            v-if="props.project"
+            v-model="switchModalOpen"
+            :project="props.project"
+            @switched="onWorkflowSwitched"
+        />
     </MalioDrawer>
 </template>
 
@@ -122,6 +147,15 @@ const isOpen = computed({
 const isEditing = computed(() => !!props.project)
 const isSubmitting = ref(false)
 const confirmDeleteOpen = ref(false)
+const switchModalOpen = ref(false)
+
+const auth = useAuthStore()
+const canManageWorkflows = computed(() => auth.user?.roles?.includes('ROLE_ADMIN') ?? false)
+
+function onWorkflowSwitched() {
+    emit('saved')
+    isOpen.value = false
+}
 
 const { listRepositories } = useGiteaService()
 const giteaRepos = ref<GiteaRepository[]>([])

frontend/components/project/ProjectWorkflowSwitchModal.vue

@@ -0,0 +1,209 @@
+<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="close" />
+                <div class="relative z-10 w-full max-w-2xl rounded-lg bg-white p-6 shadow-xl">
+                    <h3 class="text-lg font-bold text-neutral-900">{{ $t('workflows.switchTitle') }}</h3>
+
+                    <div class="mt-5 flex flex-col gap-5">
+                        <MalioSelect
+                            v-model="targetWorkflowId"
+                            :options="targetOptions"
+                            :label="$t('workflows.switchTargetLabel')"
+                            empty-option-label="—"
+                            min-width="!w-full"
+                        />
+
+                        <div v-if="targetWorkflow" class="flex flex-col gap-2">
+                            <h4 class="text-sm font-bold text-neutral-900">{{ $t('workflows.switchMappingTitle') }}</h4>
+
+                            <table class="w-full text-sm">
+                                <thead>
+                                    <tr class="border-b text-left text-xs text-neutral-500">
+                                        <th class="py-2 pr-3">{{ $t('workflows.switchSourceCol') }}</th>
+                                        <th class="py-2 pr-3">{{ $t('workflows.switchTargetCol') }}</th>
+                                        <th class="py-2 text-right">{{ $t('workflows.switchTaskCountCol') }}</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="row in mappingRows" :key="row.sourceId ?? 'backlog'" class="border-b last:border-0">
+                                        <td class="py-2 pr-3">
+                                            <span
+                                                v-if="row.source"
+                                                class="mr-2 inline-block h-3 w-3 rounded-full align-middle"
+                                                :style="{ backgroundColor: row.source.color }"
+                                            />
+                                            {{ row.source?.label ?? $t('myTasks.backlog') }}
+                                            <span class="ml-1 text-xs text-neutral-400">
+                                                ({{ row.source?.category ? $t(`workflows.categories.${row.source.category}`) : '—' }})
+                                            </span>
+                                        </td>
+                                        <td class="py-2 pr-3">
+                                            <select
+                                                v-model="row.targetId"
+                                                class="h-9 w-full rounded border border-neutral-300 px-2 text-sm"
+                                            >
+                                                <option :value="null">{{ $t('workflows.switchToBacklog') }}</option>
+                                                <option
+                                                    v-for="s in targetWorkflow.statuses"
+                                                    :key="s.id"
+                                                    :value="s.id"
+                                                >
+                                                    {{ s.label }}
+                                                </option>
+                                            </select>
+                                        </td>
+                                        <td class="py-2 text-right text-neutral-700">{{ row.count }}</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+
+                        <div class="flex justify-end gap-3">
+                            <MalioButton
+                                variant="tertiary"
+                                label="Annuler"
+                                button-class="w-auto px-4"
+                                @click="close"
+                            />
+                            <MalioButton
+                                :label="$t('workflows.switchConfirm')"
+                                button-class="w-auto px-6"
+                                :disabled="!canConfirm || isSubmitting"
+                                @click="confirm"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { Project } from '~/services/dto/project'
+import type { Task } from '~/services/dto/task'
+import type { Workflow } from '~/services/dto/workflow'
+import type { TaskStatus } from '~/services/dto/task-status'
+import { useWorkflowService } from '~/services/workflows'
+import { useTaskService } from '~/services/tasks'
+
+const props = defineProps<{
+    modelValue: boolean
+    project: Project
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'switched'): void
+}>()
+
+const workflows = ref<Workflow[]>([])
+const projectTasks = ref<Task[]>([])
+const targetWorkflowId = ref<number | null>(null)
+const isSubmitting = ref(false)
+
+const workflowService = useWorkflowService()
+const taskService = useTaskService()
+
+const targetOptions = computed(() =>
+    workflows.value
+        .filter(w => w.id !== props.project.workflow.id)
+        .map(w => ({ label: w.name, value: w.id })),
+)
+
+const targetWorkflow = computed<Workflow | null>(() =>
+    workflows.value.find(w => w.id === targetWorkflowId.value) ?? null,
+)
+
+type Row = {
+    sourceId: number | null
+    source: TaskStatus | null
+    targetId: number | null
+    count: number
+}
+
+const mappingRows = ref<Row[]>([])
+
+function smartPrefill(source: TaskStatus | null, target: Workflow): number | null {
+    if (!source) return null
+    const sameCat = target.statuses
+        .filter(s => s.category === source.category)
+        .sort((a, b) => a.position - b.position)
+    return sameCat[0]?.id ?? null
+}
+
+watch(targetWorkflow, (tw) => {
+    if (!tw) {
+        mappingRows.value = []
+        return
+    }
+    const usedStatusIds = new Map<number | null, number>()
+    for (const t of projectTasks.value) {
+        const key = t.status?.id ?? null
+        usedStatusIds.set(key, (usedStatusIds.get(key) ?? 0) + 1)
+    }
+    mappingRows.value = [...usedStatusIds.entries()].map(([sourceId, count]) => {
+        const source = props.project.workflow.statuses.find(s => s.id === sourceId) ?? null
+        return {
+            sourceId,
+            source,
+            targetId: smartPrefill(source, tw),
+            count,
+        }
+    })
+})
+
+const canConfirm = computed(() => {
+    if (!targetWorkflow.value) return false
+    return mappingRows.value.every(r => r.sourceId === null || r.targetId !== undefined)
+})
+
+watch(() => props.modelValue, async (open) => {
+    if (!open) return
+    targetWorkflowId.value = null
+    const [allWorkflows, tasks] = await Promise.all([
+        workflowService.getAll(),
+        taskService.getFiltered({ project: `/api/projects/${props.project.id}`, archived: false }),
+    ])
+    workflows.value = allWorkflows
+    projectTasks.value = tasks
+})
+
+function close() {
+    emit('update:modelValue', false)
+}
+
+async function confirm() {
+    if (!targetWorkflow.value) return
+    isSubmitting.value = true
+    try {
+        const mapping: Record<string, number | null> = {}
+        for (const r of mappingRows.value) {
+            if (r.sourceId !== null) {
+                mapping[String(r.sourceId)] = r.targetId
+            }
+        }
+        await workflowService.switchOnProject(props.project.id, {
+            workflowId: targetWorkflow.value.id,
+            mapping,
+        })
+        emit('switched')
+        close()
+    } finally {
+        isSubmitting.value = false
+    }
+}
+</script>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active {
+    transition: opacity 0.15s ease;
+}
+.modal-enter-from,
+.modal-leave-to {
+    opacity: 0;
+}
+</style>

frontend/components/task/TaskBulkActions.vue

@@ -14,8 +14,9 @@
         </span>
 
         <div v-if="selectedCount > 0" class="ml-2 flex items-center gap-1">
-            <!-- Bulk status -->
+            <!-- Bulk status (scoped to single project's workflow) -->
             <MalioSelect
+                v-if="!isMultiProject"
                 :model-value="null"
                 :options="statusOptions"
                 label="Status"
@@ -25,6 +26,13 @@
                 text-value="text-xs"
                 @update:model-value="(v: number | null) => v && emit('bulk-update', 'status', v)"
             />
+            <span
+                v-else
+                class="rounded border border-neutral-200 px-2 py-1 text-xs text-neutral-400"
+                title="Sélection multi-projets — le statut dépend du workflow de chaque projet"
+            >
+                Status —
+            </span>
             <!-- Bulk user -->
             <MalioSelect
                 :model-value="null"
@@ -85,13 +93,15 @@
 </template>
 
 <script setup lang="ts">
+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 { TaskGroup } from '~/services/dto/task-group'
 import type { UserData } from '~/services/dto/user-data'
+import type { Project } from '~/services/dto/project'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
     selectedCount: number
     totalCount: number
     allSelected: boolean
@@ -101,7 +111,12 @@ const props = defineProps<{
     priorities: TaskPriority[]
     efforts: TaskEffort[]
     groups: TaskGroup[]
-}>()
+    selectedTasks?: Task[]
+    projects?: Project[]
+}>(), {
+    selectedTasks: () => [],
+    projects: () => [],
+})
 
 const emit = defineEmits<{
     (e: 'toggle-all'): void
@@ -110,23 +125,42 @@ const emit = defineEmits<{
     (e: 'bulk-delete'): void
 }>()
 
-const statusOptions = computed(() =>
-    props.statuses.map(s => ({ label: s.label, value: s.id }))
-)
+const distinctProjectIds = computed(() => {
+    const ids = new Set<number>()
+    for (const t of props.selectedTasks) {
+        if (t.project) ids.add(t.project.id)
+    }
+    return ids
+})
+
+const isMultiProject = computed(() => distinctProjectIds.value.size > 1)
+
+const statusOptions = computed<{ label: string, value: number }[]>(() => {
+    // Si on connait les projets et qu'on est sur un seul, on scope au workflow de ce projet
+    if (distinctProjectIds.value.size === 1 && props.projects.length > 0) {
+        const projectId = [...distinctProjectIds.value][0]
+        const project = props.projects.find(p => p.id === projectId)
+        if (project?.workflow?.statuses) {
+            return project.workflow.statuses.map(s => ({ label: s.label, value: s.id }))
+        }
+    }
+    // Fallback : statuts globaux fournis en props (ex. depuis projects/[id])
+    return props.statuses.map(s => ({ label: s.label, value: s.id }))
+})
 
 const userOptions = computed(() =>
-    props.users.map(u => ({ label: u.username, value: u.id }))
+    props.users.map(u => ({ label: u.username, value: u.id })),
 )
 
 const priorityOptions = computed(() =>
-    props.priorities.map(p => ({ label: p.label, value: p.id }))
+    props.priorities.map(p => ({ label: p.label, value: p.id })),
 )
 
 const effortOptions = computed(() =>
-    props.efforts.map(e => ({ label: e.label, value: e.id }))
+    props.efforts.map(e => ({ label: e.label, value: e.id })),
 )
 
 const groupOptions = computed(() =>
-    props.groups.filter(g => !g.archived).map(g => ({ label: g.title, value: g.id }))
+    props.groups.filter(g => !g.archived).map(g => ({ label: g.title, value: g.id })),
 )
 </script>

frontend/components/task/TaskCard.vue

@@ -40,6 +40,13 @@
         </div>
 
         <div class="mt-2 flex items-center gap-1.5">
+            <span
+                v-if="showStatusBadge && task.status"
+                class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                :style="{ backgroundColor: task.status.color }"
+            >
+                {{ task.status.label }}
+            </span>
             <span
                 v-if="task.priority"
                 class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
@@ -106,8 +113,10 @@ import type { Task } from '~/services/dto/task'
 const props = withDefaults(defineProps<{
     task: Task
     showProjectColor?: boolean
+    showStatusBadge?: boolean
 }>(), {
     showProjectColor: false,
+    showStatusBadge: false,
 })
 
 const emit = defineEmits<{

frontend/components/task/TaskStatusDrawer.vue

@@ -1,122 +0,0 @@
-<template>
-    <MalioDrawer v-model="isOpen" :title="isEditing ? $t('taskStatuses.editStatus') : $t('taskStatuses.addStatus')">
-        <form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
-            <MalioInputText
-                v-model="form.label"
-                label="Libellé"
-                input-class="w-full"
-                :error="touched.label && !form.label.trim() ? 'Le libellé est requis' : ''"
-                @blur="touched.label = true"
-            />
-            <MalioInputText
-                v-model="form.position"
-                label="Position"
-                input-class="w-full"
-                type="number"
-            />
-            <div class="mt-4">
-                <ColorPicker v-model="form.color" />
-            </div>
-
-            <div class="mt-4 flex items-center gap-2">
-                <input
-                    id="isFinal"
-                    v-model="form.isFinal"
-                    type="checkbox"
-                    class="h-4 w-4 rounded border-neutral-300 text-primary-500 focus:ring-primary-500"
-                />
-                <label for="isFinal" class="text-sm font-medium text-neutral-700">
-                    {{ $t('archive.statusFinal') }}
-                </label>
-            </div>
-
-            <div class="mt-6 flex justify-end">
-                <MalioButton
-                    label="Enregistrer"
-                    button-class="w-auto px-6"
-                    :disabled="isSubmitting"
-                    @click="handleSubmit"
-                />
-            </div>
-        </form>
-    </MalioDrawer>
-</template>
-
-<script setup lang="ts">
-import type { TaskStatus, TaskStatusWrite } from '~/services/dto/task-status'
-import { useTaskStatusService } from '~/services/task-statuses'
-
-const props = defineProps<{
-    modelValue: boolean
-    item: TaskStatus | null
-}>()
-
-const emit = defineEmits<{
-    (e: 'update:modelValue', value: boolean): void
-    (e: 'saved'): void
-}>()
-
-const isOpen = computed({
-    get: () => props.modelValue,
-    set: (v) => emit('update:modelValue', v),
-})
-
-const isEditing = computed(() => !!props.item)
-const isSubmitting = ref(false)
-
-const form = reactive({
-    label: '',
-    position: '0',
-    color: '#222783',
-    isFinal: false,
-})
-
-const touched = reactive({
-    label: false,
-})
-
-watch(() => props.modelValue, (open) => {
-    if (open) {
-        if (props.item) {
-            form.label = props.item.label ?? ''
-            form.position = String(props.item.position ?? 0)
-            form.color = props.item.color ?? '#222783'
-            form.isFinal = props.item.isFinal ?? false
-        } else {
-            form.label = ''
-            form.position = '0'
-            form.color = '#222783'
-            form.isFinal = false
-        }
-        touched.label = false
-    }
-})
-
-const { create, update } = useTaskStatusService()
-
-async function handleSubmit() {
-    touched.label = true
-    if (!form.label.trim()) return
-
-    isSubmitting.value = true
-    try {
-        const payload: TaskStatusWrite = {
-            label: form.label.trim(),
-            position: Number(form.position),
-            color: form.color,
-            isFinal: form.isFinal,
-        }
-
-        if (isEditing.value && props.item) {
-            await update(props.item.id, payload)
-        } else {
-            await create(payload)
-        }
-
-        emit('saved')
-        isOpen.value = false
-    } finally {
-        isSubmitting.value = false
-    }
-}
-</script>

frontend/components/ui/AppTopNav.vue

@@ -13,6 +13,14 @@
         <h1 class="text-lg font-bold tracking-tight">Lesstime</h1>
       </div>
       <div class="ml-auto flex items-center gap-4 text-xl text-white sm:gap-8">
+        <MalioButtonIcon
+          icon="mdi:help-circle-outline"
+          aria-label="Centre d'aide"
+          variant="ghost"
+          icon-size="22"
+          button-class="text-white/70 hover:bg-primary-600 hover:text-white"
+          @click="navigateTo('/help')"
+        />
         <MalioButtonIcon
           :icon="ui.darkMode ? 'mdi:weather-sunny' : 'mdi:weather-night'"
           :aria-label="ui.darkMode ? 'Mode clair' : 'Mode sombre'"

frontend/components/ui/ConfirmDeleteStatusModal.vue

@@ -1,93 +0,0 @@
-<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">{{ $t('taskStatuses.deleteStatus', { label: statusLabel }) }}</h3>
-
-                    <p class="mt-3 text-sm text-neutral-600">
-                        {{ taskCount > 1 ? $t('taskStatuses.linkedTasksPlural', { count: taskCount }) : $t('taskStatuses.linkedTasks', { count: taskCount }) }}
-                    </p>
-
-                    <div class="mt-4">
-                        <MalioSelect
-                            v-model="targetStatusId"
-                            :options="targetOptions"
-                            :label="$t('taskStatuses.moveTo')"
-                            :empty-option-label="$t('taskStatuses.backlog')"
-                            min-width="w-full"
-                        />
-                    </div>
-
-                    <div class="mt-6 flex justify-end gap-3">
-                        <MalioButton
-                            variant="tertiary"
-                            :label="$t('common.cancel')"
-                            button-class="w-auto px-4"
-                            @click="cancel"
-                        />
-                        <MalioButton
-                            variant="danger"
-                            :label="$t('common.delete')"
-                            button-class="w-auto px-4"
-                            :disabled="isProcessing"
-                            @click="confirm"
-                        />
-                    </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/content/help/01-getting-started.md

@@ -0,0 +1,27 @@
+# Bienvenue dans Lesstime
+
+Lesstime est un outil de **gestion de projets** qui combine 4 grandes capacités :
+
+- 🗂️ **Gestion de projets** avec kanban personnalisable (workflows)
+- ✅ **Suivi de tâches** avec assignations, priorités, efforts, deadlines, tags
+- ⏱️ **Time tracking** intégré, lié aux projets et aux tâches
+- 🎫 **Portail client** pour que tes clients déposent leurs tickets
+
+## Comprendre les rôles
+
+| Rôle | Accès |
+|---|---|
+| **Admin** | Tout : projets, utilisateurs, intégrations, workflows |
+| **User** | Ses tâches, time tracking, projets auxquels il a accès |
+| **Client** | Portal dédié — tickets sur ses projets uniquement |
+
+## Vues principales
+
+- **Dashboard** : vue d'ensemble personnelle (KPIs, tâches du jour)
+- **Mes tâches** : kanban perso groupé par catégorie, toutes projets confondus
+- **Projets** : un kanban par projet, statuts du workflow associé
+- **Time tracking** : timer, time entries, vue mois
+- **Admin** : gestion globale (visible uniquement par les admins)
+- **Portal** : interface dédiée aux utilisateurs ROLE_CLIENT
+
+> 💡 **Astuce** : utilise l'avatar en haut à droite pour accéder à ton profil et y générer un **token MCP** (cf. section *Token MCP & API*) pour piloter Lesstime depuis Claude / Cursor.

frontend/content/help/02-projects-workflows.md

@@ -0,0 +1,58 @@
+# Projets & Workflows
+
+## Qu'est-ce qu'un projet ?
+
+Un projet regroupe un ensemble de **tâches**, **time entries** et éventuellement **tickets client**. Il est défini par :
+
+- Un **code court** (2-10 lettres majuscules, ex: `SIRH`, `CRM`) qui préfixe les numéros de tâches
+- Un **client** optionnel (ou interne si null)
+- Une **couleur** d'identification
+- Un **workflow** (obligatoire) qui définit ses colonnes kanban
+
+## Qu'est-ce qu'un workflow ?
+
+Un **workflow** est un *jeu de statuts kanban* réutilisable. Au lieu d'avoir une liste globale de statuts comme dans la plupart des outils, chaque projet a son propre kanban adapté à sa façon de travailler.
+
+### Exemple
+
+| Workflow | Statuts |
+|---|---|
+| **Standard** (par défaut) | À faire → En cours → Bloqué → En attente de validation → Terminé |
+| **DevKanban** | Backlog → Spec → In Dev → Review PR → QA → Done |
+| **Support** | Nouveau → Diagnostic → Résolu |
+
+Tu peux créer autant de workflows que tu veux depuis **Admin → Workflows**.
+
+## Les 5 catégories canoniques
+
+Chaque statut, peu importe son workflow, appartient à **une catégorie canonique** parmi :
+
+| Catégorie | Description |
+|---|---|
+| `todo` | À faire — pas encore commencé |
+| `in_progress` | En cours — quelqu'un bosse dessus |
+| `blocked` | Bloqué — attente d'une dépendance |
+| `review` | En validation — relecture, PR, QA |
+| `done` | Terminé — close |
+
+> 🎯 **Pourquoi des catégories ?** Pour que la vue *Mes tâches* puisse regrouper des tâches venant de projets avec des workflows différents (ex: une tâche "In Dev" de DevKanban et "En cours" de Standard apparaissent dans la même colonne `in_progress`).
+
+## Changer le workflow d'un projet
+
+1. Ouvrir le projet → **Modifier le projet** (drawer)
+2. Section **Workflow** → cliquer sur **Changer de workflow**
+3. Sélectionner le workflow cible
+4. **Mapper chaque statut source vers un statut cible** (le mapping est pré-rempli automatiquement par catégorie)
+5. **Confirmer** — toutes les tâches migrent dans une seule transaction
+
+### Règles du mapping
+
+- ✅ Chaque statut actuellement utilisé par une tâche **doit** être mappé (sinon erreur 422)
+- ✅ Un statut peut être mappé vers `null` → la tâche passe en backlog (sans statut)
+- ❌ Tu ne peux pas mapper vers un statut qui n'appartient pas au workflow cible
+
+## Supprimer un workflow
+
+Tu peux supprimer un workflow uniquement s'il n'est **lié à aucun projet** (HTTP 409 sinon). Réassigne d'abord les projets vers un autre workflow.
+
+> ⚠️ Le workflow **Standard** ne peut pas être supprimé tant qu'il reste le défaut (un seul workflow peut avoir `isDefault=true` à la fois, garanti par un listener Doctrine).

frontend/content/help/03-my-tasks.md

@@ -0,0 +1,60 @@
+# Mes tâches & Dashboard
+
+## Vue *Mes tâches*
+
+Accessible via la sidebar, c'est ta vue **transverse** : toutes les tâches dont tu es l'**assigné** ou un **collaborateur**, peu importe le projet.
+
+### Deux modes d'affichage
+
+#### 1. Kanban (par défaut)
+
+Regroupé par les **5 catégories canoniques** :
+
+```
+À faire   →   En cours   →   Bloqué   →   En validation   →   Terminé
+```
+
+Chaque card affiche :
+- Le **code projet + numéro** (ex: `SIRH-12`) coloré selon le projet
+- Un **badge statut** (utile quand des tâches de projets différents cohabitent)
+- Priorité, tags, deadline, icônes (sync calendrier, récurrence, collaborateurs)
+- L'**avatar de l'assigné** + bouton timer (▶ / ⏹)
+
+> 💡 Le **drag-to-status** est intentionnellement désactivé dans *Mes tâches* — pour changer un statut, ouvre la tâche (la valeur dépend du workflow du projet, pas de la catégorie).
+
+#### 2. Liste
+
+Vue tableau triable, avec **bulk actions** :
+- Cocher plusieurs tâches → barre d'actions en haut
+- Changer statut (désactivé si tâches de **projets différents**), assigné, priorité, effort, groupe
+- Supprimer en lot
+
+### Filtres disponibles
+
+| Filtre | Notes |
+|---|---|
+| **Projet** | Restreint à un projet précis |
+| **Groupe** | Disponible uniquement si un projet est sélectionné |
+| **Tag** | Tags globaux |
+| **Priorité / Effort** | |
+| **Assigné** | Par défaut : toi-même |
+
+### Tri (vue liste uniquement)
+
+- Par **deadline** (les plus proches en premier)
+- Par **scheduled start** (planification calendrier)
+
+## Vue *Backlog*
+
+Sous le kanban, les tâches **sans statut** apparaissent dans la section *Backlog*. Pratique pour les idées non encore qualifiées.
+
+## Dashboard
+
+Le **dashboard** (page d'accueil après login) affiche :
+
+- 📊 **KPIs personnels** : tâches en cours / à faire / en retard
+- 📈 **Charts** : répartition par statut, par priorité, time tracking cette semaine
+- 🔔 **Notifications** : assignations, commentaires (cf. cloche en topbar)
+- ⏱ **Timer actif** s'il y en a un
+
+> 💡 Tu peux changer le filtre user du dashboard via le sélecteur en haut pour voir les KPIs d'un collègue (utile pour les leads).

frontend/content/help/04-time-tracking.md

@@ -0,0 +1,59 @@
+# Time tracking
+
+## Le timer
+
+Le timer **flottant** est accessible depuis la sidebar ou directement depuis une tâche.
+
+### Démarrer un timer
+
+Trois façons :
+
+1. **Depuis une TaskCard** : clique sur l'icône ▶ à droite de la card
+2. **Depuis le détail d'une tâche** : bouton *Démarrer le timer*
+3. **Manuellement** : depuis */time-tracking*, créer une time entry sans tâche
+
+### Arrêter
+
+- Clique sur ⏹ sur la card de la tâche en cours
+- Ou depuis la sidebar (icône timer pulsante en orange `#F18619`)
+
+> 💡 Un seul timer actif à la fois. Démarrer un nouveau timer arrête automatiquement le précédent.
+
+## Time entries
+
+Chaque entrée a :
+
+| Champ | Description |
+|---|---|
+| **Titre** | Description courte (ex: "Réunion daily") |
+| **Projet** | Obligatoire |
+| **Tâche** | Optionnel — lie l'entrée à une tâche précise |
+| **Tags** | Pour catégoriser (ex: "Backend", "Réunion") |
+| **Début / Fin** | Datetimes — la durée est calculée |
+| **User** | Qui a fait le travail |
+
+### Vue *Time tracking*
+
+Disponible en deux modes :
+
+- **Vue semaine** : ligne par ligne, par jour
+- **Vue mois** : agrégation mensuelle, totaux par projet et par tag
+
+### Filtres
+
+- **Projet** (server-side)
+- **Tag** (server-side)
+- **User** (admin uniquement)
+- **Période** (date début / date fin)
+
+## Édition
+
+- Clique sur une time entry → drawer d'édition
+- Tu peux modifier projet, tâche, tags, dates a posteriori
+- La suppression est libre — pense à exporter avant si nécessaire
+
+## Tags
+
+Les tags sont **globaux** (partagés entre tous les projets, comme les statuts l'étaient avant les workflows). Définis depuis **Admin → Tags**.
+
+> 📊 **Cas d'usage typique** : créer un tag par typologie d'activité (Dev, Réunion, Support, Veille) pour pouvoir agréger ton temps en fin de mois.

frontend/content/help/05-tasks-detail.md

@@ -0,0 +1,62 @@
+# Détail d'une tâche
+
+## Champs principaux
+
+| Champ | Notes |
+|---|---|
+| **Numéro** | Auto-incrémenté **par projet** (ex: `SIRH-1`, `SIRH-2`, `CRM-1`…) |
+| **Titre** | Obligatoire |
+| **Description** | Markdown supporté (preview disponible) |
+| **Statut** | Doit appartenir au workflow du projet (sinon erreur 422) |
+| **Priorité** | Basse / Moyenne / Haute — couleurs personnalisables |
+| **Effort** | S / M / L / XL / XXL — pour estimer la charge |
+| **Assigné** | Un seul user responsable |
+| **Collaborateurs** | Multiples — visibles via icône `mdi:account-group` |
+| **Groupe** | Optionnel — regroupe des tâches au sein d'un projet |
+| **Tags** | Globaux, plusieurs par tâche |
+| **Deadline** | Date — un badge coloré apparaît sur la card |
+| **Scheduled start / end** | Planification calendrier (sync optionnelle) |
+
+## Récurrence
+
+Une tâche peut être **récurrente** (icône 🔁 sur la card) :
+
+- **Type** : quotidien, hebdomadaire, mensuel
+- **Intervalle** : tous les N jours/semaines/mois
+- **Jours de la semaine** (pour le mode hebdomadaire) : `monday`, `tuesday`, etc.
+
+Chaque occurrence est gérée séparément ; cocher une tâche récurrente comme *Terminée* peut générer l'occurrence suivante selon le pattern.
+
+## Sync calendrier
+
+Si Zimbra est configuré (cf. Intégrations), tu peux activer **Sync calendrier** sur une tâche planifiée pour qu'elle apparaisse dans ton calendrier Zimbra (CalDav).
+
+Icônes correspondantes :
+- 🟢 `mdi:calendar-check` → sync OK
+- 🔴 `mdi:alert-circle` → erreur de sync (passe sur l'icône pour le détail)
+
+## Documents
+
+Chaque tâche peut avoir des **documents attachés** (PDF, images, etc.) :
+
+- Drag & drop dans la tâche pour uploader
+- Validation du **MIME type côté serveur** (pas seulement l'extension)
+- Téléchargement via lien dédié
+
+## Liaison Gitea (si configuré)
+
+Si le projet a un repo Gitea lié, tu peux :
+
+- **Créer une branche** depuis la tâche : `feature/` `fix/` `refactor/` `hotfix/` `chore/` (5 types disponibles)
+- Convention de nommage : `<type>/<CODE>-<NUMBER>-<slug>` (ex: `feature/SIRH-12-add-login`)
+- **Voir les PRs** liées (état CI inclus)
+
+## Liaison ticket client
+
+Si la tâche découle d'un ticket client, l'icône 👤 (`heroicons:user-circle`) bleue apparaît avec le numéro du ticket (ex: `CT-001`).
+
+## Commentaires & notifications
+
+- Ajouter un commentaire notifie les watchers (assigné, collaborateurs)
+- Les @mentions notifient l'utilisateur cité
+- La cloche en topbar (`NotificationBell`) liste toutes les notifications non lues

frontend/content/help/06-client-portal.md

@@ -0,0 +1,43 @@
+# Portal client
+
+> 🎫 Section dédiée aux utilisateurs avec le rôle **ROLE_CLIENT**.
+
+## Accès
+
+Les utilisateurs *client* sont **automatiquement redirigés vers `/portal`** après login. Ils ne voient pas les vues internes (projets, time tracking, admin).
+
+## Ce que voit un client
+
+- 📋 La liste de ses **projets autorisés** (définis par l'admin dans le user)
+- 🎫 Sur chaque projet, la liste de ses **tickets** (ses créations uniquement)
+- ➕ Le bouton **Nouveau ticket** sur chaque projet
+
+## Soumettre un ticket
+
+Depuis `/portal/projects/<id>/new-ticket` :
+
+| Champ | Description |
+|---|---|
+| **Type** | `bug` / `improvement` / `other` |
+| **Titre** | Court et descriptif |
+| **Description** | Détails — markdown supporté |
+| **URL** | Optionnel — page où le problème se manifeste |
+
+Le ticket est automatiquement numéroté **par projet** (ex: `CT-001`).
+
+## Statuts d'un ticket
+
+| Statut | Visible côté client | Signification |
+|---|---|---|
+| `new` | Oui | Reçu, pas encore traité |
+| `in_progress` | Oui | Une tâche interne y est liée |
+| `done` | Oui | Résolu et clôturé |
+| `rejected` | Oui | Non retenu (avec commentaire explicatif) |
+
+Le `statusComment` est visible par le client quand fourni.
+
+## Côté équipe interne
+
+- Les tickets apparaissent dans **Admin → Tickets client**
+- On peut **transformer un ticket en tâche** (la tâche garde une référence au ticket — icône 👤 bleue sur la card)
+- Le client voit l'avancement passer en `in_progress` automatiquement quand une tâche est liée

frontend/content/help/07-admin.md

@@ -0,0 +1,66 @@
+# Administration
+
+> 🛡️ Section visible uniquement par les utilisateurs **ROLE_ADMIN**.
+
+L'admin (`/admin`) est divisé en plusieurs onglets, chacun gérant une ressource globale ou une intégration.
+
+## Onglet *Clients*
+
+- Liste des clients (entreprise / organisation)
+- Champs : nom, email, téléphone, adresse
+- Lier un client à des projets
+
+## Onglet *Workflows*
+
+⭐ **Nouveau** — remplace l'ancien onglet *Statuts*.
+
+- Lister les workflows existants
+- **Créer un workflow** : nom, isDefault (un seul à la fois), liste de statuts éditables inline
+- Chaque statut : libellé, couleur, position, **catégorie** (5 valeurs canoniques), isFinal
+- **Éditer** un workflow modifie les statuts (sync intelligent : create / update / delete par diff)
+
+> ⚠️ Supprimer un workflow lié à un projet renvoie une erreur **409**. Réassigne d'abord les projets.
+
+## Onglet *Efforts*
+
+- Tailles d'effort (S, M, L, XL, XXL)
+- Globales (partagées entre tous les projets)
+
+## Onglet *Priorités*
+
+- Niveaux de priorité (Basse, Moyenne, Haute) + couleur
+- Une priorité "Haute" affiche un drapeau rouge `mdi:flag-variant` sur la card
+
+## Onglet *Tags*
+
+- Tags globaux (tâches **et** time entries)
+- Couleur personnalisable
+- Pas de hiérarchie (flat list)
+
+## Onglet *Utilisateurs*
+
+- Créer / éditer / désactiver
+- Rôles : `ROLE_ADMIN`, `ROLE_USER`, `ROLE_CLIENT`
+- **ROLE_CLIENT** : associer un *client* et une liste de *projets autorisés*
+- Reset password depuis l'admin
+
+> 🔐 Un user *admin+client* (les deux rôles) **n'est pas bloqué** par le middleware portal — le check est sur `ROLE_CLIENT && !ROLE_ADMIN`.
+
+## Onglet *Gitea*
+
+- URL serveur + token API
+- Lier un projet à un repo : `giteaOwner` + `giteaRepo`
+- Active les fonctionnalités branches / PRs sur les tâches
+
+## Onglet *BookStack*
+
+- URL + token API
+- Lier un projet à un **shelf** BookStack (`bookstackShelfId`)
+- Les tâches peuvent être liées à des pages BookStack (cf. `TaskBookStackLink`)
+
+## Onglet *Zimbra*
+
+- URL serveur + credentials (chiffrés via libsodium)
+- Configure le calendrier CalDav par défaut
+- Test de connexion intégré
+- Active la **sync calendrier** sur les tâches planifiées

frontend/content/help/08-integrations.md

@@ -0,0 +1,66 @@
+# Intégrations
+
+Lesstime s'intègre avec **3 outils externes** pour fluidifier le workflow dev.
+
+## 🌳 Gitea
+
+Lesstime parle à un serveur Gitea pour automatiser les conventions de branches et suivre les PRs.
+
+### Configuration
+
+1. **Admin → Gitea** : URL serveur + token API
+2. Sur un projet : définir `giteaOwner` (org/user) et `giteaRepo` (nom du repo)
+
+### Utilisation
+
+Sur une tâche, le panneau Gitea propose :
+
+- **Créer une branche** : choisir un type (`feature` / `fix` / `refactor` / `hotfix` / `chore`)
+- La branche est nommée automatiquement : `<type>/<PROJECT_CODE>-<NUMBER>-<slug-du-titre>`
+- **Lister les PRs liées** : par convention, toute PR qui contient `<PROJECT_CODE>-<NUMBER>` dans son nom ou sa description est reliée
+- **État CI** : ✅ ou ❌ affiché si le repo a des Actions/Workflows configurées
+
+> 💡 La convention `<PROJECT_CODE>-<NUMBER>` permet à Gitea et Lesstime de se synchroniser **sans webhook** — juste par parsing des noms.
+
+## 📚 BookStack
+
+Lien tâche → documentation.
+
+### Configuration
+
+1. **Admin → BookStack** : URL + token (token ID + token secret, chiffrés via libsodium)
+2. Sur un projet : définir `bookstackShelfId` + `bookstackShelfName`
+
+### Utilisation
+
+- Depuis une tâche : bouton **Lier à une page BookStack**
+- Sélectionner la page dans le shelf du projet
+- Le lien est bidirectionnel (BookStack peut afficher les tâches liées)
+
+## 📅 Zimbra (CalDav)
+
+Sync calendrier pour les tâches planifiées.
+
+### Configuration
+
+1. **Admin → Zimbra** :
+   - URL serveur (ex: `https://mail.ovh.com`)
+   - Username (ex: `lesstime@ovh.fr`)
+   - Password (chiffré côté serveur)
+   - Calendar path (ex: `/dav/lesstime@ovh.fr/Calendar/`)
+   - **Test de connexion** intégré
+2. Active la config (toggle `enabled`)
+
+### Utilisation
+
+Sur une tâche avec **scheduled start + end** :
+
+1. Cocher **Sync calendrier**
+2. Au save, Lesstime crée/met à jour l'événement CalDav
+3. L'icône `mdi:calendar-check` (verte) apparaît sur la card si succès
+4. L'icône `mdi:alert-circle` (rouge) apparaît si erreur — passe dessus pour voir le détail
+
+### Limites
+
+- **Pas de retour Zimbra → Lesstime** : si tu modifies l'événement dans Zimbra, Lesstime ne le voit pas
+- **Récurrences** : les patterns RRULE basiques sont supportés (daily, weekly avec jours, monthly)

frontend/content/help/09-mcp-api.md

@@ -0,0 +1,97 @@
+# Token MCP & API
+
+Lesstime expose un serveur **MCP** (Model Context Protocol) qui permet à un assistant IA (Claude, Cursor, etc.) de piloter ton instance Lesstime — créer des tâches, lire des projets, démarrer un timer, etc.
+
+## Générer ton token
+
+1. Va sur **Profil** (avatar → Profil)
+2. Section **Token MCP** → **Générer un token**
+3. **Copie le token immédiatement** — il ne sera plus affiché ensuite
+
+> 🔐 **Sécurité** : Le token donne accès à toutes les actions de ton compte. Ne le partage jamais. Tu peux le régénérer à tout moment (l'ancien sera révoqué).
+
+## Configurer Claude Code
+
+Dans `.mcp.json` (à la racine de ton projet) :
+
+```json
+{
+    "mcpServers": {
+        "lesstime": {
+            "type": "http",
+            "url": "https://ton-instance-lesstime/_mcp",
+            "headers": {
+                "Authorization": "Bearer TON_TOKEN_ICI"
+            }
+        }
+    }
+}
+```
+
+Pour une instance locale :
+
+```json
+{
+    "mcpServers": {
+        "lesstime-local": {
+            "command": "docker",
+            "args": ["exec", "-i", "php-lesstime-fpm", "php", "bin/console", "mcp:server"]
+        }
+    }
+}
+```
+
+## Tools disponibles (27 au total)
+
+### Projets
+
+- `list-projects`, `get-project`, `create-project`, `update-project`
+
+### Tâches
+
+- `list-tasks` (avec filtres : projet, assigné, statut, archived…)
+- `get-task`, `create-task`, `update-task`, `delete-task`
+
+### Métadonnées
+
+- `list-statuses` (param **`projectId`** optionnel — sans : tous les statuts ; avec : statuts du workflow du projet)
+- `list-priorities`, `list-efforts`, `list-tags`
+
+### Workflows ⭐ Nouveau
+
+- `list-workflows` — liste tous les workflows avec leurs statuts groupés
+- `switch-project-workflow` (ROLE_ADMIN) — change le workflow d'un projet avec mapping
+
+### Time tracking
+
+- `list-time-entries`, `create-time-entry`, `update-time-entry`, `delete-time-entry`
+
+### Récurrence
+
+- `create-task-recurrence`, `update-task-recurrence`, `delete-task-recurrence`
+
+### Groupes / Users / Clients
+
+- `list-groups`, `create-group`, `update-group`
+- `list-users`, `list-clients`
+
+## Règles importantes
+
+> ⚠️ **Statut hors workflow rejeté** : si tu appelles `create-task` ou `update-task` avec un `status` qui n'appartient pas au workflow du projet, l'appel est rejeté avec **422 Validation error**. Utilise `list-statuses(projectId)` pour découvrir les statuts valides du projet.
+
+## Exemples de prompts
+
+```
+"Crée une tâche dans Lesstime sur le projet SIRH avec le titre
+'Ajouter l'export PDF' et la priorité Haute, assignée à alice"
+```
+
+```
+"Liste mes tâches en cours dans le projet CRM"
+```
+
+```
+"Démarre un timer sur la tâche SIRH-12 avec le tag Backend"
+```
+
+L'agent appelle les bons tools tout seul si la description est claire.

frontend/i18n/locales/fr.json

@@ -56,6 +56,37 @@
         "moveTo": "Déplacer vers",
         "backlog": "Backlog (sans statut)"
     },
+    "workflows": {
+        "title": "Workflows",
+        "addWorkflow": "Ajouter un workflow",
+        "editWorkflow": "Modifier le workflow",
+        "name": "Nom",
+        "isDefault": "Workflow par défaut",
+        "statuses": "Statuts",
+        "addStatus": "Ajouter un statut",
+        "category": "Catégorie",
+        "created": "Workflow créé",
+        "updated": "Workflow mis à jour",
+        "deleted": "Workflow supprimé",
+        "switched": "Workflow du projet changé",
+        "switchTitle": "Changer de workflow",
+        "switchTargetLabel": "Nouveau workflow",
+        "switchMappingTitle": "Mapping des statuts",
+        "switchSourceCol": "Statut actuel",
+        "switchTargetCol": "Statut cible",
+        "switchTaskCountCol": "Tâches",
+        "switchToBacklog": "Mapper vers le backlog",
+        "switchConfirm": "Confirmer la migration",
+        "switchSummary": "{count} tâche(s) migrée(s), projet sur workflow « {name} »",
+        "deleteUsedBy": "Workflow utilisé par {count} projet(s) — impossible de supprimer.",
+        "categories": {
+            "todo": "À faire",
+            "in_progress": "En cours",
+            "blocked": "Bloqué",
+            "review": "En validation",
+            "done": "Terminé"
+        }
+    },
     "taskEfforts": {
         "created": "Effort créé avec succès.",
         "updated": "Effort mis à jour avec succès.",

frontend/pages/admin.vue

@@ -22,7 +22,7 @@
 
         <div>
             <AdminClientTab v-if="activeTab === 'clients'" />
-            <AdminStatusTab v-if="activeTab === 'statuses'" />
+            <AdminWorkflowTab v-if="activeTab === 'workflows'" />
             <AdminEffortTab v-if="activeTab === 'efforts'" />
             <AdminPriorityTab v-if="activeTab === 'priorities'" />
             <AdminTagTab v-if="activeTab === 'tags'" />
@@ -41,7 +41,7 @@ useHead({ title: 'Administration' })
 
 const tabs = [
     { key: 'clients', label: 'Clients' },
-    { key: 'statuses', label: 'Statuts' },
+    { key: 'workflows', label: 'Workflows' },
     { key: 'efforts', label: 'Efforts' },
     { key: 'priorities', label: 'Priorités' },
     { key: 'tags', label: 'Tags' },

frontend/pages/help.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { marked } from 'marked'
+
+useHead({ title: 'Aide' })
+
+type Section = {
+    id: string
+    title: string
+    icon: string
+    accent: string
+    roles: ('admin' | 'user' | 'client')[]
+    content: string
+}
+
+const rawModules = import.meta.glob('~/content/help/*.md', { eager: true, query: '?raw', import: 'default' }) as Record<string, string>
+
+const META: Record<string, { title: string, icon: string, accent: string, roles: ('admin' | 'user' | 'client')[] }> = {
+    '01-getting-started':    { title: 'Bienvenue',           icon: 'mdi:hand-wave',                       accent: 'from-amber-400 to-rose-500',     roles: ['admin', 'user', 'client'] },
+    '02-projects-workflows': { title: 'Projets & Workflows', icon: 'mdi:view-column-outline',             accent: 'from-indigo-500 to-fuchsia-500', roles: ['admin', 'user'] },
+    '03-my-tasks':           { title: 'Mes tâches',           icon: 'mdi:checkbox-marked-circle-outline', accent: 'from-sky-500 to-cyan-500',        roles: ['admin', 'user'] },
+    '04-time-tracking':      { title: 'Time tracking',        icon: 'mdi:timer-outline',                   accent: 'from-emerald-500 to-teal-500',    roles: ['admin', 'user'] },
+    '05-tasks-detail':       { title: 'Tâches en détail',     icon: 'mdi:file-document-edit-outline',      accent: 'from-violet-500 to-purple-600',  roles: ['admin', 'user'] },
+    '06-client-portal':      { title: 'Portal client',        icon: 'mdi:account-tie-outline',             accent: 'from-orange-500 to-amber-500',   roles: ['admin', 'client'] },
+    '07-admin':              { title: 'Administration',       icon: 'mdi:shield-crown-outline',            accent: 'from-rose-500 to-pink-600',      roles: ['admin'] },
+    '08-integrations':       { title: 'Intégrations',         icon: 'mdi:puzzle-outline',                  accent: 'from-blue-500 to-indigo-500',    roles: ['admin', 'user'] },
+    '09-mcp-api':            { title: 'Token MCP & API',      icon: 'mdi:robot-outline',                   accent: 'from-slate-700 to-slate-900',    roles: ['admin', 'user'] },
+}
+
+const sections = computed<Section[]>(() => {
+    return Object.entries(rawModules).map(([path, raw]) => {
+        const id = path.split('/').pop()!.replace(/\.md$/, '')
+        const meta = META[id] ?? { title: id, icon: 'mdi:file-document-outline', accent: 'from-neutral-500 to-neutral-700', roles: ['admin', 'user', 'client'] as ('admin' | 'user' | 'client')[] }
+        return { id, ...meta, content: raw }
+    }).sort((a, b) => a.id.localeCompare(b.id))
+})
+
+const auth = useAuthStore()
+
+const userRole = computed<'admin' | 'user' | 'client'>(() => {
+    const roles = auth.user?.roles ?? []
+    if (roles.includes('ROLE_ADMIN')) return 'admin'
+    if (roles.includes('ROLE_CLIENT')) return 'client'
+    return 'user'
+})
+
+const visibleSections = computed(() =>
+    sections.value.filter(s => s.roles.includes(userRole.value)),
+)
+
+const route = useRoute()
+const router = useRouter()
+const activeId = ref(visibleSections.value[0]?.id ?? '')
+
+onMounted(() => {
+    const hash = (route.query.section as string) ?? route.hash.replace('#', '')
+    if (hash && visibleSections.value.some(s => s.id === hash)) {
+        activeId.value = hash
+    }
+})
+
+watch(activeId, (id) => {
+    router.replace({ query: { ...route.query, section: id } })
+})
+
+const activeSection = computed(() => visibleSections.value.find(s => s.id === activeId.value) ?? visibleSections.value[0])
+
+const renderedHtml = computed(() => {
+    if (!activeSection.value) return ''
+    return marked.parse(activeSection.value.content, { async: false }) as string
+})
+
+const prevSection = computed(() => {
+    const idx = visibleSections.value.findIndex(s => s.id === activeId.value)
+    return idx > 0 ? visibleSections.value[idx - 1] : null
+})
+
+const nextSection = computed(() => {
+    const idx = visibleSections.value.findIndex(s => s.id === activeId.value)
+    return idx >= 0 && idx < visibleSections.value.length - 1 ? visibleSections.value[idx + 1] : null
+})
+</script>
+
+<template>
+    <div class="flex min-h-[calc(100vh-60px)] flex-col lg:flex-row">
+        <!-- Sidebar -->
+        <aside class="shrink-0 border-b border-neutral-200 bg-gradient-to-b from-white to-neutral-50 px-3 py-4 lg:w-72 lg:border-b-0 lg:border-r lg:px-4 lg:py-6">
+            <div class="mb-4 flex items-center gap-2 lg:mb-6">
+                <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-primary-500 to-primary-700 text-white shadow-sm">
+                    <Icon name="mdi:lifebuoy" size="20" />
+                </div>
+                <div>
+                    <h1 class="text-base font-bold text-neutral-900">Centre d'aide</h1>
+                    <p class="text-xs text-neutral-500">Lesstime — Guide utilisateur</p>
+                </div>
+            </div>
+
+            <nav class="flex flex-row gap-1 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible lg:pb-0">
+                <button
+                    v-for="section in visibleSections"
+                    :key="section.id"
+                    type="button"
+                    class="group flex shrink-0 items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm font-medium transition-all lg:shrink"
+                    :class="activeId === section.id
+                        ? 'bg-white text-neutral-900 shadow-sm ring-1 ring-neutral-200'
+                        : 'text-neutral-600 hover:bg-white hover:text-neutral-900'"
+                    @click="activeId = section.id"
+                >
+                    <span
+                        class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br text-white shadow-sm"
+                        :class="section.accent"
+                    >
+                        <Icon :name="section.icon" size="16" />
+                    </span>
+                    <span class="whitespace-nowrap lg:whitespace-normal">{{ section.title }}</span>
+                </button>
+            </nav>
+        </aside>
+
+        <!-- Content -->
+        <main class="flex-1 px-4 py-6 sm:px-8 lg:px-12 lg:py-10">
+            <div v-if="activeSection" class="mx-auto max-w-3xl">
+                <!-- Hero header -->
+                <div
+                    class="mb-8 overflow-hidden rounded-2xl bg-gradient-to-br p-6 text-white shadow-lg sm:p-8"
+                    :class="activeSection.accent"
+                >
+                    <div class="flex items-center gap-4">
+                        <div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-white/20 backdrop-blur-sm">
+                            <Icon :name="activeSection.icon" size="28" />
+                        </div>
+                        <div>
+                            <p class="text-xs font-semibold uppercase tracking-wider text-white/80">Section</p>
+                            <h2 class="text-2xl font-bold tracking-tight sm:text-3xl">{{ activeSection.title }}</h2>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Markdown content -->
+                <article
+                    class="prose prose-neutral max-w-none prose-headings:font-bold prose-headings:tracking-tight prose-h1:hidden prose-h2:mt-10 prose-h2:border-b prose-h2:border-neutral-200 prose-h2:pb-2 prose-h3:text-neutral-800 prose-a:text-primary-600 prose-strong:text-neutral-900 prose-code:rounded prose-code:bg-neutral-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:font-medium prose-code:text-rose-600 prose-code:before:content-none prose-code:after:content-none prose-pre:rounded-xl prose-pre:bg-slate-900 prose-table:border prose-table:border-neutral-200 prose-th:bg-neutral-50 prose-th:px-3 prose-th:py-2 prose-td:px-3 prose-td:py-2 prose-blockquote:rounded-r-lg prose-blockquote:border-l-4 prose-blockquote:border-amber-400 prose-blockquote:bg-amber-50 prose-blockquote:px-4 prose-blockquote:py-2 prose-blockquote:not-italic prose-blockquote:text-amber-900"
+                    v-html="renderedHtml"
+                />
+
+                <!-- Footer nav -->
+                <div class="mt-12 flex items-center justify-between border-t border-neutral-200 pt-6">
+                    <button
+                        type="button"
+                        class="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-900 disabled:invisible"
+                        :disabled="!prevSection"
+                        @click="prevSection && (activeId = prevSection.id)"
+                    >
+                        <Icon name="mdi:arrow-left" size="18" />
+                        <span>{{ prevSection?.title ?? '' }}</span>
+                    </button>
+                    <button
+                        type="button"
+                        class="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-900 disabled:invisible"
+                        :disabled="!nextSection"
+                        @click="nextSection && (activeId = nextSection.id)"
+                    >
+                        <span>{{ nextSection?.title ?? '' }}</span>
+                        <Icon name="mdi:arrow-right" size="18" />
+                    </button>
+                </div>
+            </div>
+        </main>
+    </div>
+</template>

frontend/pages/my-tasks.vue

@@ -7,6 +7,8 @@ import type { TaskTag } from '~/services/dto/task-tag'
 import type { TaskGroup } from '~/services/dto/task-group'
 import type { UserData } from '~/services/dto/user-data'
 import type { Project } from '~/services/dto/project'
+import type { StatusCategory } from '~/services/dto/workflow'
+import { STATUS_CATEGORY_LABEL } from '~/services/dto/workflow'
 import { useTaskService } from '~/services/tasks'
 import { useTaskStatusService } from '~/services/task-statuses'
 import { useTaskEffortService } from '~/services/task-efforts'
@@ -60,6 +62,7 @@ const viewMode = ref<'kanban' | 'list'>('kanban')
 
 // Bulk selection
 const selectedTaskIds = reactive(new Set<number>())
+const selectedTasksArray = computed(() => tasks.value.filter(t => selectedTaskIds.has(t.id)))
 
 // Modal
 const taskModalOpen = ref(false)
@@ -112,13 +115,11 @@ const sortOptions = computed(() => [
     { label: t('myTasks.sortScheduledStart'), value: SORT_SCHEDULED },
 ])
 
-// Kanban helpers
-const sortedStatuses = computed(() =>
-    [...statuses.value].sort((a, b) => a.position - b.position)
-)
+// Kanban helpers (grouped by canonical status category)
+const CATEGORIES: StatusCategory[] = ['todo', 'in_progress', 'blocked', 'review', 'done']
 
-function tasksByStatus(statusId: number): Task[] {
-    return tasks.value.filter(t => t.status?.id === statusId)
+function tasksByCategory(category: StatusCategory): Task[] {
+    return tasks.value.filter(t => t.status?.category === category)
 }
 
 const backlogTasks = computed(() =>
@@ -205,44 +206,6 @@ watch(selectedProjectId, () => {
     selectedGroupId.value = null
 }, { flush: 'sync' })
 
-// Drag & drop
-const dragOverStatusId = ref<number | null>(null)
-const dragCounter = ref(0)
-
-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'))
-}
-
-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 })
-}
-
 // Modal
 function openTaskCreate() {
     selectedTask.value = null
@@ -428,36 +391,29 @@ onMounted(async () => {
             </div>
         </div>
 
-        <!-- Kanban View -->
+        <!-- Kanban View — grouped by canonical category -->
         <div v-if="viewMode === 'kanban'">
             <div class="mt-6 flex h-[calc(100vh-260px)] gap-3 overflow-x-auto pb-4">
                 <div
-                    v-for="status in sortedStatuses"
-                    :key="status.id"
-                    class="flex min-w-36 flex-1 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)"
+                    v-for="cat in CATEGORIES"
+                    :key="cat"
+                    class="flex min-w-40 flex-1 flex-col rounded-lg bg-neutral-50"
                 >
-                    <div
-                        class="shrink-0 rounded-t-lg px-4 py-3 text-sm font-bold text-white"
-                        :style="{ backgroundColor: status.color }"
-                    >
-                        {{ status.label }} ({{ tasksByStatus(status.id).length }})
+                    <div class="shrink-0 rounded-t-lg bg-neutral-200 px-4 py-3 text-sm font-bold text-neutral-800">
+                        {{ STATUS_CATEGORY_LABEL[cat] }} ({{ tasksByCategory(cat).length }})
                     </div>
                     <div class="min-h-0 flex-1 overflow-y-auto p-3">
                         <div class="flex flex-col gap-3">
                             <TaskCard
-                                v-for="task in tasksByStatus(status.id)"
+                                v-for="task in tasksByCategory(cat)"
                                 :key="task.id"
                                 :task="task"
                                 show-project-color
+                                show-status-badge
                                 @click="openTaskEdit(task)"
                             />
                             <p
-                                v-if="tasksByStatus(status.id).length === 0"
+                                v-if="tasksByCategory(cat).length === 0"
                                 class="py-4 text-center text-xs text-neutral-400"
                             >
                                 {{ $t('myTasks.noTasks') }}
@@ -467,15 +423,8 @@ onMounted(async () => {
                 </div>
             </div>
 
-            <!-- Backlog below kanban -->
-            <div
-                class="mt-8 rounded-lg p-4 transition-colors"
-                :class="dragOverStatusId === 0 ? 'bg-neutral-200' : 'bg-neutral-50'"
-                @dragover.prevent
-                @dragenter.prevent="onDragEnter(0)"
-                @dragleave="onDragLeave"
-                @drop.prevent="onDropBacklog($event)"
-            >
+            <!-- Backlog below kanban (no drag/drop — status change goes through TaskModal) -->
+            <div class="mt-8 rounded-lg bg-neutral-50 p-4">
                 <h2 class="text-lg font-bold text-neutral-900">{{ $t('myTasks.backlog') }} ({{ backlogTasks.length }})</h2>
                 <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                     <TaskCard
@@ -483,6 +432,7 @@ onMounted(async () => {
                         :key="task.id"
                         :task="task"
                         show-project-color
+                        show-status-badge
                         @click="openTaskEdit(task)"
                     />
                 </div>
@@ -507,6 +457,8 @@ onMounted(async () => {
                 :priorities="priorities"
                 :efforts="efforts"
                 :groups="groups"
+                :selected-tasks="selectedTasksArray"
+                :projects="projects"
                 @toggle-all="toggleSelectAll(tasks)"
                 @bulk-update="onBulkUpdate"
                 @bulk-archive="onBulkArchive"

frontend/pages/projects/[id]/archives.vue

@@ -82,7 +82,6 @@ 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 { useTaskTagService } from '~/services/task-tags'
@@ -96,7 +95,6 @@ useHead({ title: 'Archives' })
 
 const projectService = useProjectService()
 const taskService = useTaskService()
-const statusService = useTaskStatusService()
 const effortService = useTaskEffortService()
 const priorityService = useTaskPriorityService()
 const tagService = useTaskTagService()
@@ -105,8 +103,11 @@ const userService = useUserService()
 
 const project = ref<Project | null>(null)
 const archivedTasks = ref<Task[]>([])
-const statuses = ref<TaskStatus[]>([])
 const efforts = ref<TaskEffort[]>([])
+
+const statuses = computed<TaskStatus[]>(() =>
+    [...(project.value?.workflow?.statuses ?? [])].sort((a, b) => a.position - b.position),
+)
 const priorities = ref<TaskPriority[]>([])
 const tags = ref<TaskTag[]>([])
 const groups = ref<TaskGroup[]>([])
@@ -126,10 +127,9 @@ const filteredTasks = computed(() => {
 })
 
 async function loadData() {
-    const [p, t, s, e, pr, ty, g, u] = await Promise.all([
+    const [p, t, e, pr, ty, g, u] = await Promise.all([
         projectService.getById(projectId.value),
         taskService.getByProject(projectId.value, true),
-        statusService.getAll(),
         effortService.getAll(),
         priorityService.getAll(),
         tagService.getAll(),
@@ -138,7 +138,6 @@ async function loadData() {
     ])
     project.value = p
     archivedTasks.value = t
-    statuses.value = s
     efforts.value = e
     priorities.value = pr
     tags.value = ty

frontend/pages/projects/[id]/index.vue

@@ -218,7 +218,6 @@ import type { Client } from '~/services/dto/client'
 import { useProjectService } from '~/services/projects'
 import { useClientService } from '~/services/clients'
 import { useTaskService } from '~/services/tasks'
-import { useTaskStatusService } from '~/services/task-statuses'
 import { useTaskEffortService } from '~/services/task-efforts'
 import { useTaskPriorityService } from '~/services/task-priorities'
 import { useTaskTagService } from '~/services/task-tags'
@@ -234,7 +233,6 @@ useHead({ title: 'Projet' })
 const projectService = useProjectService()
 const clientService = useClientService()
 const taskService = useTaskService()
-const statusService = useTaskStatusService()
 const effortService = useTaskEffortService()
 const priorityService = useTaskPriorityService()
 const tagService = useTaskTagService()
@@ -243,7 +241,6 @@ 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 tags = ref<TaskTag[]>([])
@@ -252,6 +249,10 @@ const users = ref<UserData[]>([])
 const clients = ref<Client[]>([])
 const isLoading = ref(true)
 
+const statuses = computed<TaskStatus[]>(() =>
+    [...(project.value?.workflow?.statuses ?? [])].sort((a, b) => a.position - b.position),
+)
+
 const selectedGroupId = ref<number | null>(null)
 const selectedTagId = ref<number | null>(null)
 const selectedAssigneeId = ref<number | null>(null)
@@ -333,10 +334,9 @@ const backlogTasks = computed(() =>
 async function loadData() {
     isLoading.value = true
     try {
-        const [p, t, s, e, pr, ty, g, u, c] = await Promise.all([
+        const [p, t, e, pr, ty, g, u, c] = await Promise.all([
             projectService.getById(projectId.value),
             taskService.getByProject(projectId.value),
-            statusService.getAll(),
             effortService.getAll(),
             priorityService.getAll(),
             tagService.getAll(),
@@ -346,7 +346,6 @@ async function loadData() {
         ])
         project.value = p
         tasks.value = t
-        statuses.value = s
         efforts.value = e
         priorities.value = pr
         tags.value = ty

frontend/services/dto/project.ts

@@ -1,4 +1,5 @@
 import type { Client } from './client'
+import type { Workflow } from './workflow'
 
 export type Project = {
     id: number
@@ -8,6 +9,7 @@ export type Project = {
     description: string | null
     color: string
     client: Client | null
+    workflow: Workflow
     giteaOwner: string | null
     giteaRepo: string | null
     bookstackShelfId: number | null
@@ -22,6 +24,7 @@ export type ProjectWrite = {
     description: string | null
     color: string
     client: string | null  // IRI : "/api/clients/1" ou null
+    workflow?: string      // IRI : "/api/workflows/1"
     giteaOwner?: string | null
     giteaRepo?: string | null
     bookstackShelfId?: number | null

frontend/services/dto/task-status.ts

@@ -1,3 +1,5 @@
+import type { StatusCategory } from './workflow'
+
 export type TaskStatus = {
     id: number
     '@id'?: string
@@ -5,6 +7,8 @@ export type TaskStatus = {
     color: string
     position: number
     isFinal: boolean
+    category: StatusCategory
+    workflow?: { '@id': string, id: number } | string
 }
 
 export type TaskStatusWrite = {
@@ -12,4 +16,6 @@ export type TaskStatusWrite = {
     color: string
     position: number
     isFinal: boolean
+    category: StatusCategory
+    workflow?: string
 }

frontend/services/dto/workflow.ts

@@ -0,0 +1,27 @@
+import type { TaskStatus, TaskStatusWrite } from './task-status'
+
+export type StatusCategory = 'todo' | 'in_progress' | 'blocked' | 'review' | 'done'
+
+export const STATUS_CATEGORY_LABEL: Record<StatusCategory, string> = {
+    todo: 'À faire',
+    in_progress: 'En cours',
+    blocked: 'Bloqué',
+    review: 'En validation',
+    done: 'Terminé',
+}
+
+export type Workflow = {
+    id: number
+    '@id'?: string
+    name: string
+    isDefault: boolean
+    position: number
+    statuses: TaskStatus[]
+}
+
+export type WorkflowWrite = {
+    name: string
+    isDefault: boolean
+    position: number
+    statuses?: TaskStatusWrite[]
+}

frontend/services/workflows.ts

@@ -0,0 +1,55 @@
+import type { Workflow, WorkflowWrite } from './dto/workflow'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+type SwitchPayload = {
+    workflowId: number
+    mapping: Record<string, number | null>
+}
+
+type SwitchResult = {
+    projectId: number
+    workflowId: number
+    migratedTaskCount: number
+}
+
+export function useWorkflowService() {
+    const api = useApi()
+
+    async function getAll(): Promise<Workflow[]> {
+        const data = await api.get<HydraCollection<Workflow>>('/workflows')
+        return extractHydraMembers(data)
+    }
+
+    async function getOne(id: number): Promise<Workflow> {
+        return api.get<Workflow>(`/workflows/${id}`)
+    }
+
+    async function create(payload: WorkflowWrite): Promise<Workflow> {
+        return api.post<Workflow>('/workflows', payload as Record<string, unknown>, {
+            toastSuccessKey: 'workflows.created',
+        })
+    }
+
+    async function update(id: number, payload: Partial<WorkflowWrite>): Promise<Workflow> {
+        return api.patch<Workflow>(`/workflows/${id}`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'workflows.updated',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/workflows/${id}`, {}, {
+            toastSuccessKey: 'workflows.deleted',
+        })
+    }
+
+    async function switchOnProject(projectId: number, payload: SwitchPayload): Promise<SwitchResult> {
+        return api.post<SwitchResult>(
+            `/projects/${projectId}/switch-workflow`,
+            payload as unknown as Record<string, unknown>,
+            { toastSuccessKey: 'workflows.switched' },
+        )
+    }
+
+    return { getAll, getOne, create, update, remove, switchOnProject }
+}