From c7b1e6203776bf9bd7b49e9d457266dce059caa6 Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Mon, 9 Mar 2026 23:39:15 +0100
Subject: [PATCH] feat : add admin page for task configuration

Add admin page with tabs for managing task statuses, efforts,
priorities and types, with CRUD drawers and color picker.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/components/AdminEffortTab.vue     |  96 ++++++++++++++++++
 frontend/components/AdminPriorityTab.vue   | 103 ++++++++++++++++++++
 frontend/components/AdminStatusTab.vue     | 105 ++++++++++++++++++++
 frontend/components/AdminTypeTab.vue       | 103 ++++++++++++++++++++
 frontend/components/ColorPicker.vue        |   4 +-
 frontend/components/TaskEffortDrawer.vue   |  90 +++++++++++++++++
 frontend/components/TaskPriorityDrawer.vue |  97 +++++++++++++++++++
 frontend/components/TaskStatusDrawer.vue   | 107 +++++++++++++++++++++
 frontend/components/TaskTypeDrawer.vue     |  97 +++++++++++++++++++
 frontend/layouts/default.vue               |   8 ++
 frontend/pages/admin.vue                   |  45 +++++++++
 11 files changed, 853 insertions(+), 2 deletions(-)
 create mode 100644 frontend/components/AdminEffortTab.vue
 create mode 100644 frontend/components/AdminPriorityTab.vue
 create mode 100644 frontend/components/AdminStatusTab.vue
 create mode 100644 frontend/components/AdminTypeTab.vue
 create mode 100644 frontend/components/TaskEffortDrawer.vue
 create mode 100644 frontend/components/TaskPriorityDrawer.vue
 create mode 100644 frontend/components/TaskStatusDrawer.vue
 create mode 100644 frontend/components/TaskTypeDrawer.vue
 create mode 100644 frontend/pages/admin.vue

diff --git a/frontend/components/AdminEffortTab.vue b/frontend/components/AdminEffortTab.vue
new file mode 100644
index 0000000..140c885
--- /dev/null
+++ b/frontend/components/AdminEffortTab.vue
@@ -0,0 +1,96 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">Efforts</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 effort
+            </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">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr
+                        v-for="item in items"
+                        :key="item.id"
+                        class="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
+                        @click="openEdit(item)"
+                    >
+                        <td class="px-4 py-3 font-semibold text-primary-500">{{ item.label }}</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="2" class="px-4 py-8 text-center text-neutral-400">
+                            Aucun effort trouvé.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <TaskEffortDrawer
+            v-model="drawerOpen"
+            :item="selectedItem"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TaskEffort } from '~/services/dto/task-effort'
+import { useTaskEffortService } from '~/services/task-efforts'
+
+const { getAll, remove } = useTaskEffortService()
+const items = ref<TaskEffort[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedItem = ref<TaskEffort | null>(null)
+
+async function loadItems() {
+    isLoading.value = true
+    try {
+        items.value = await getAll()
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function openCreate() {
+    selectedItem.value = null
+    drawerOpen.value = true
+}
+
+function openEdit(item: TaskEffort) {
+    selectedItem.value = item
+    drawerOpen.value = true
+}
+
+async function handleDelete(id: number) {
+    await remove(id)
+    await loadItems()
+}
+
+async function onSaved() {
+    await loadItems()
+}
+
+onMounted(() => {
+    loadItems()
+})
+</script>
diff --git a/frontend/components/AdminPriorityTab.vue b/frontend/components/AdminPriorityTab.vue
new file mode 100644
index 0000000..1e87bcb
--- /dev/null
+++ b/frontend/components/AdminPriorityTab.vue
@@ -0,0 +1,103 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">Priorités</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 une priorité
+            </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">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr
+                        v-for="item in items"
+                        :key="item.id"
+                        class="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
+                        @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">
+                            <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="3" class="px-4 py-8 text-center text-neutral-400">
+                            Aucune priorité trouvée.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <TaskPriorityDrawer
+            v-model="drawerOpen"
+            :item="selectedItem"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TaskPriority } from '~/services/dto/task-priority'
+import { useTaskPriorityService } from '~/services/task-priorities'
+
+const { getAll, remove } = useTaskPriorityService()
+const items = ref<TaskPriority[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedItem = ref<TaskPriority | null>(null)
+
+async function loadItems() {
+    isLoading.value = true
+    try {
+        items.value = await getAll()
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function openCreate() {
+    selectedItem.value = null
+    drawerOpen.value = true
+}
+
+function openEdit(item: TaskPriority) {
+    selectedItem.value = item
+    drawerOpen.value = true
+}
+
+async function handleDelete(id: number) {
+    await remove(id)
+    await loadItems()
+}
+
+async function onSaved() {
+    await loadItems()
+}
+
+onMounted(() => {
+    loadItems()
+})
+</script>
diff --git a/frontend/components/AdminStatusTab.vue b/frontend/components/AdminStatusTab.vue
new file mode 100644
index 0000000..93c106b
--- /dev/null
+++ b/frontend/components/AdminStatusTab.vue
@@ -0,0 +1,105 @@
+<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="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
+                        @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="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 statut trouvé.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <TaskStatusDrawer
+            v-model="drawerOpen"
+            :item="selectedItem"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TaskStatus } from '~/services/dto/task-status'
+import { useTaskStatusService } from '~/services/task-statuses'
+
+const { getAll, remove } = useTaskStatusService()
+const items = ref<TaskStatus[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedItem = ref<TaskStatus | null>(null)
+
+async function loadItems() {
+    isLoading.value = true
+    try {
+        items.value = await getAll()
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function openCreate() {
+    selectedItem.value = null
+    drawerOpen.value = true
+}
+
+function openEdit(item: TaskStatus) {
+    selectedItem.value = item
+    drawerOpen.value = true
+}
+
+async function handleDelete(id: number) {
+    await remove(id)
+    await loadItems()
+}
+
+async function onSaved() {
+    await loadItems()
+}
+
+onMounted(() => {
+    loadItems()
+})
+</script>
diff --git a/frontend/components/AdminTypeTab.vue b/frontend/components/AdminTypeTab.vue
new file mode 100644
index 0000000..17ae000
--- /dev/null
+++ b/frontend/components/AdminTypeTab.vue
@@ -0,0 +1,103 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">Types</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 type
+            </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">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr
+                        v-for="item in items"
+                        :key="item.id"
+                        class="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
+                        @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">
+                            <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="3" class="px-4 py-8 text-center text-neutral-400">
+                            Aucun type trouvé.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <TaskTypeDrawer
+            v-model="drawerOpen"
+            :item="selectedItem"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TaskType } from '~/services/dto/task-type'
+import { useTaskTypeService } from '~/services/task-types'
+
+const { getAll, remove } = useTaskTypeService()
+const items = ref<TaskType[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedItem = ref<TaskType | null>(null)
+
+async function loadItems() {
+    isLoading.value = true
+    try {
+        items.value = await getAll()
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function openCreate() {
+    selectedItem.value = null
+    drawerOpen.value = true
+}
+
+function openEdit(item: TaskType) {
+    selectedItem.value = item
+    drawerOpen.value = true
+}
+
+async function handleDelete(id: number) {
+    await remove(id)
+    await loadItems()
+}
+
+async function onSaved() {
+    await loadItems()
+}
+
+onMounted(() => {
+    loadItems()
+})
+</script>
diff --git a/frontend/components/ColorPicker.vue b/frontend/components/ColorPicker.vue
index 5fe1faf..b6c86fe 100644
--- a/frontend/components/ColorPicker.vue
+++ b/frontend/components/ColorPicker.vue
@@ -25,7 +25,7 @@ const emit = defineEmits<{
 }>()
 
 const colors = [
-    '#26A69A', '#E91E63', '#4A90D9', '#7E57C2',
-    '#8BC34A', '#FDD835', '#80DEEA', '#FF7043',
+    '#222783', '#26A69A', '#E91E63', '#4A90D9',
+    '#7E57C2', '#8BC34A', '#FDD835', '#80DEEA', '#FF7043',
 ]
 </script>
diff --git a/frontend/components/TaskEffortDrawer.vue b/frontend/components/TaskEffortDrawer.vue
new file mode 100644
index 0000000..e133c7e
--- /dev/null
+++ b/frontend/components/TaskEffortDrawer.vue
@@ -0,0 +1,90 @@
+<template>
+    <AppDrawer v-model="isOpen" :title="isEditing ? 'Modifier un effort' : 'Ajouter un effort'">
+        <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"
+            />
+
+            <div class="mt-6 flex justify-end">
+                <button
+                    type="submit"
+                    class="rounded-md bg-primary-500 px-6 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                    :disabled="isSubmitting"
+                >
+                    Enregistrer
+                </button>
+            </div>
+        </form>
+    </AppDrawer>
+</template>
+
+<script setup lang="ts">
+import type { TaskEffort, TaskEffortWrite } from '~/services/dto/task-effort'
+import { useTaskEffortService } from '~/services/task-efforts'
+
+const props = defineProps<{
+    modelValue: boolean
+    item: TaskEffort | 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: '',
+})
+
+const touched = reactive({
+    label: false,
+})
+
+watch(() => props.modelValue, (open) => {
+    if (open) {
+        if (props.item) {
+            form.label = props.item.label ?? ''
+        } else {
+            form.label = ''
+        }
+        touched.label = false
+    }
+})
+
+const { create, update } = useTaskEffortService()
+
+async function handleSubmit() {
+    touched.label = true
+    if (!form.label.trim()) return
+
+    isSubmitting.value = true
+    try {
+        const payload: TaskEffortWrite = {
+            label: form.label.trim(),
+        }
+
+        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>
diff --git a/frontend/components/TaskPriorityDrawer.vue b/frontend/components/TaskPriorityDrawer.vue
new file mode 100644
index 0000000..83ba776
--- /dev/null
+++ b/frontend/components/TaskPriorityDrawer.vue
@@ -0,0 +1,97 @@
+<template>
+    <AppDrawer v-model="isOpen" :title="isEditing ? 'Modifier une priorité' : 'Ajouter une priorité'">
+        <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"
+            />
+            <div class="mt-4">
+                <ColorPicker v-model="form.color" />
+            </div>
+
+            <div class="mt-6 flex justify-end">
+                <button
+                    type="submit"
+                    class="rounded-md bg-primary-500 px-6 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                    :disabled="isSubmitting"
+                >
+                    Enregistrer
+                </button>
+            </div>
+        </form>
+    </AppDrawer>
+</template>
+
+<script setup lang="ts">
+import type { TaskPriority, TaskPriorityWrite } from '~/services/dto/task-priority'
+import { useTaskPriorityService } from '~/services/task-priorities'
+
+const props = defineProps<{
+    modelValue: boolean
+    item: TaskPriority | 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: '',
+    color: '#222783',
+})
+
+const touched = reactive({
+    label: false,
+})
+
+watch(() => props.modelValue, (open) => {
+    if (open) {
+        if (props.item) {
+            form.label = props.item.label ?? ''
+            form.color = props.item.color ?? '#222783'
+        } else {
+            form.label = ''
+            form.color = '#222783'
+        }
+        touched.label = false
+    }
+})
+
+const { create, update } = useTaskPriorityService()
+
+async function handleSubmit() {
+    touched.label = true
+    if (!form.label.trim()) return
+
+    isSubmitting.value = true
+    try {
+        const payload: TaskPriorityWrite = {
+            label: form.label.trim(),
+            color: form.color,
+        }
+
+        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>
diff --git a/frontend/components/TaskStatusDrawer.vue b/frontend/components/TaskStatusDrawer.vue
new file mode 100644
index 0000000..ee65dd6
--- /dev/null
+++ b/frontend/components/TaskStatusDrawer.vue
@@ -0,0 +1,107 @@
+<template>
+    <AppDrawer v-model="isOpen" :title="isEditing ? 'Modifier un statut' : 'Ajouter un statut'">
+        <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-6 flex justify-end">
+                <button
+                    type="submit"
+                    class="rounded-md bg-primary-500 px-6 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                    :disabled="isSubmitting"
+                >
+                    Enregistrer
+                </button>
+            </div>
+        </form>
+    </AppDrawer>
+</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',
+})
+
+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'
+        } else {
+            form.label = ''
+            form.position = '0'
+            form.color = '#222783'
+        }
+        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,
+        }
+
+        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>
diff --git a/frontend/components/TaskTypeDrawer.vue b/frontend/components/TaskTypeDrawer.vue
new file mode 100644
index 0000000..8f82b6c
--- /dev/null
+++ b/frontend/components/TaskTypeDrawer.vue
@@ -0,0 +1,97 @@
+<template>
+    <AppDrawer v-model="isOpen" :title="isEditing ? 'Modifier un type' : 'Ajouter un type'">
+        <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"
+            />
+            <div class="mt-4">
+                <ColorPicker v-model="form.color" />
+            </div>
+
+            <div class="mt-6 flex justify-end">
+                <button
+                    type="submit"
+                    class="rounded-md bg-primary-500 px-6 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                    :disabled="isSubmitting"
+                >
+                    Enregistrer
+                </button>
+            </div>
+        </form>
+    </AppDrawer>
+</template>
+
+<script setup lang="ts">
+import type { TaskType, TaskTypeWrite } from '~/services/dto/task-type'
+import { useTaskTypeService } from '~/services/task-types'
+
+const props = defineProps<{
+    modelValue: boolean
+    item: TaskType | 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: '',
+    color: '#222783',
+})
+
+const touched = reactive({
+    label: false,
+})
+
+watch(() => props.modelValue, (open) => {
+    if (open) {
+        if (props.item) {
+            form.label = props.item.label ?? ''
+            form.color = props.item.color ?? '#222783'
+        } else {
+            form.label = ''
+            form.color = '#222783'
+        }
+        touched.label = false
+    }
+})
+
+const { create, update } = useTaskTypeService()
+
+async function handleSubmit() {
+    touched.label = true
+    if (!form.label.trim()) return
+
+    isSubmitting.value = true
+    try {
+        const payload: TaskTypeWrite = {
+            label: form.label.trim(),
+            color: form.color,
+        }
+
+        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>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 58b40b6..728584f 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -30,6 +30,14 @@
                         <Icon name="mdi:account-group-outline" size="24"/>
                         <span class="self-baseline text-md">Clients</span>
                     </NuxtLink>
+                    <NuxtLink
+                        to="/admin"
+                        class="flex gap-3 px-4 py-3 text-md font-semibold text-black hover:bg-tertiary-500 hover:text-primary-500"
+                        active-class="bg-tertiary-500 text-primary-500"
+                    >
+                        <Icon name="mdi:cog-outline" size="24"/>
+                        <span class="self-baseline text-md">Administration</span>
+                    </NuxtLink>
                 </nav>
 
                 <div class="flex flex-col gap-2 items-center p-4">
diff --git a/frontend/pages/admin.vue b/frontend/pages/admin.vue
new file mode 100644
index 0000000..ca420b1
--- /dev/null
+++ b/frontend/pages/admin.vue
@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <h1 class="text-2xl font-bold text-neutral-900">Administration</h1>
+
+        <div class="mt-6 border-b border-neutral-200">
+            <nav class="flex gap-6">
+                <button
+                    v-for="tab in tabs"
+                    :key="tab.key"
+                    class="px-1 pb-3 text-sm font-semibold transition"
+                    :class="activeTab === tab.key
+                        ? 'border-b-2 border-primary-500 text-primary-500'
+                        : 'text-neutral-500 hover:text-neutral-700'"
+                    @click="activeTab = tab.key"
+                >
+                    {{ tab.label }}
+                </button>
+            </nav>
+        </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'" />
+            <AdminUserTab v-if="activeTab === 'users'" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+useHead({ title: 'Administration' })
+
+const tabs = [
+    { key: 'statuses', label: 'Statuts' },
+    { key: 'efforts', label: 'Efforts' },
+    { key: 'priorities', label: 'Priorités' },
+    { key: 'types', label: 'Types' },
+    { key: 'users', label: 'Utilisateurs' },
+] as const
+
+type TabKey = typeof tabs[number]['key']
+
+const activeTab = ref<TabKey>('statuses')
+</script>