diff --git a/CLAUDE.md b/CLAUDE.md
index 91bbed8..753e081 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -5,28 +5,29 @@ Application de gestion de projet. Monorepo Symfony 8 (API Platform 4) + Nuxt 4.
 ## Stack
 
 - **Backend** : PHP 8.4, Symfony 8.0, API Platform 4, Doctrine ORM, PostgreSQL 16
-- **Frontend** : Nuxt 4 (SSR off / SPA), Vue 3, Pinia, Tailwind CSS, nuxt-toast, @nuxtjs/i18n, @nuxt/icon
+- **Frontend** : Nuxt 4 (SSR off / SPA), Vue 3, Pinia, Tailwind CSS, @malio/layer-ui, nuxt-toast, @nuxtjs/i18n, @nuxt/icon
 - **Auth** : JWT HTTP-only cookie (lexik/jwt-authentication-bundle), login à `/login_check`, cookie `BEARER`
 - **Docker** : PHP-FPM + Node 24, Nginx (port 8082), PostgreSQL (port 5435)
 
 ## Structure
 
 ```
-src/Entity/          # Entités Doctrine
+src/Entity/          # Entités Doctrine (User, Client, Project, Task, TaskStatus, TaskEffort, TaskPriority, TaskType, TaskGroup)
 src/ApiResource/     # Ressources API Platform (si découplées des entités)
-src/State/           # Providers et Processors API Platform
+src/State/           # Providers et Processors API Platform (MeProvider, AppVersionProvider, UserPasswordHasherProcessor)
 src/Repository/      # Repositories Doctrine
 src/DataFixtures/    # Fixtures
 config/              # Config Symfony (security, api_platform, lexik_jwt, nelmio_cors, doctrine)
 config/jwt/          # Clés JWT (private.pem, public.pem)
 migrations/          # Migrations Doctrine
+docs/plans/          # Plans d'implémentation
 frontend/            # App Nuxt 4
-frontend/pages/      # Pages
+frontend/pages/      # Pages (index, login, clients, projects, projects/[id], admin)
 frontend/layouts/    # Layouts (pas "layout")
-frontend/components/ # Composants Vue
+frontend/components/ # Composants Vue (AppDrawer, ColorPicker, *Drawer, TaskCard, Admin*Tab, UserDrawer)
 frontend/composables/# Composables (useApi, etc.)
 frontend/stores/     # Stores Pinia
-frontend/services/   # Services API (auth, etc.)
+frontend/services/   # Services API (auth, clients, projects, tasks, task-statuses, etc.)
 frontend/services/dto/ # Types TypeScript
 frontend/i18n/locales/ # Fichiers de traduction (langDir résolu depuis i18n/)
 ```
diff --git a/docs/plans/2026-03-09-clients-projects-crud.md b/docs/plans/2026-03-09-clients-projects-crud.md
new file mode 100644
index 0000000..edb8897
--- /dev/null
+++ b/docs/plans/2026-03-09-clients-projects-crud.md
@@ -0,0 +1,1354 @@
+# CRUD Clients & Projets - Plan d'implémentation
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Implémenter le CRUD complet Client et Projet (backend API Platform + frontend Nuxt) avec pages dédiées, drawers latéraux pour ajout/modification, et fixtures de données.
+
+**Architecture:** Deux entités Doctrine (Client, Project) avec relation ManyToOne optionnelle Project→Client. API Platform gère le CRUD via les attributs sur les entités (pas de controllers). Frontend avec pages dédiées : tableau pour les clients, cartes colorées pour les projets, drawers droits pour les formulaires.
+
+**Tech Stack:** PHP 8.4 / Symfony 8 / API Platform 4 / Doctrine ORM / PostgreSQL (backend) — Nuxt 4 / Vue 3 / Pinia / Tailwind CSS / Malio UI Layer (frontend)
+
+---
+
+## Task 1 : Entité Client (Backend)
+
+**Files:**
+- Create: `src/Entity/Client.php`
+- Create: `src/Repository/ClientRepository.php`
+
+**Step 1: Créer le repository Client**
+
+```php
+<?php
+
+declare(strict_types=1);
+
+namespace App\Repository;
+
+use App\Entity\Client;
+use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
+use Doctrine\Persistence\ManagerRegistry;
+
+class ClientRepository extends ServiceEntityRepository
+{
+    public function __construct(ManagerRegistry $registry)
+    {
+        parent::__construct($registry, Client::class);
+    }
+}
+```
+
+**Step 2: Créer l'entité Client**
+
+```php
+<?php
+
+declare(strict_types=1);
+
+namespace App\Entity;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\Delete;
+use ApiPlatform\Metadata\Get;
+use ApiPlatform\Metadata\GetCollection;
+use ApiPlatform\Metadata\Patch;
+use ApiPlatform\Metadata\Post;
+use App\Repository\ClientRepository;
+use Doctrine\Common\Collections\ArrayCollection;
+use Doctrine\Common\Collections\Collection;
+use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Attribute\Groups;
+
+#[ApiResource(
+    operations: [
+        new GetCollection(),
+        new Get(),
+        new Post(security: "is_granted('ROLE_ADMIN')"),
+        new Patch(security: "is_granted('ROLE_ADMIN')"),
+        new Delete(security: "is_granted('ROLE_ADMIN')"),
+    ],
+    normalizationContext: ['groups' => ['client:read']],
+    denormalizationContext: ['groups' => ['client:write']],
+    order: ['name' => 'ASC'],
+)]
+#[ORM\Entity(repositoryClass: ClientRepository::class)]
+class Client
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column]
+    #[Groups(['client:read', 'project:read'])]
+    private ?int $id = null;
+
+    #[ORM\Column(length: 255)]
+    #[Groups(['client:read', 'client:write', 'project:read'])]
+    private ?string $name = null;
+
+    #[ORM\Column(length: 255, nullable: true)]
+    #[Groups(['client:read', 'client:write'])]
+    private ?string $email = null;
+
+    #[ORM\Column(length: 50, nullable: true)]
+    #[Groups(['client:read', 'client:write'])]
+    private ?string $phone = null;
+
+    #[ORM\Column(length: 255, nullable: true)]
+    #[Groups(['client:read', 'client:write'])]
+    private ?string $street = null;
+
+    #[ORM\Column(length: 255, nullable: true)]
+    #[Groups(['client:read', 'client:write'])]
+    private ?string $city = null;
+
+    #[ORM\Column(length: 20, nullable: true)]
+    #[Groups(['client:read', 'client:write'])]
+    private ?string $postalCode = null;
+
+    /** @var Collection<int, Project> */
+    #[ORM\OneToMany(targetEntity: Project::class, mappedBy: 'client')]
+    private Collection $projects;
+
+    public function __construct()
+    {
+        $this->projects = new ArrayCollection();
+    }
+
+    // Getters et setters pour chaque propriété (getId, getName/setName, getEmail/setEmail,
+    // getPhone/setPhone, getStreet/setStreet, getCity/setCity, getPostalCode/setPostalCode,
+    // getProjects)
+    // Suivre le même pattern fluent (return $this) que User.php
+}
+```
+
+**Step 3: Générer et exécuter la migration**
+
+Run (dans le container PHP) :
+```bash
+php bin/console doctrine:migrations:diff
+php bin/console doctrine:migrations:migrate --no-interaction
+```
+Expected: Migration créée et exécutée, table `client` créée en base.
+
+**Step 4: Vérifier l'API**
+
+Run: `curl -s http://localhost:8082/api/clients | head -20` (après login)
+Expected: Réponse Hydra vide `{"hydra:member":[],"hydra:totalItems":0}`
+
+**Step 5: Commit**
+
+```bash
+git add src/Entity/Client.php src/Repository/ClientRepository.php migrations/
+git commit -m "feat : add Client entity with CRUD API"
+```
+
+---
+
+## Task 2 : Entité Project (Backend)
+
+**Files:**
+- Create: `src/Entity/Project.php`
+- Create: `src/Repository/ProjectRepository.php`
+
+**Step 1: Créer le repository Project**
+
+```php
+<?php
+
+declare(strict_types=1);
+
+namespace App\Repository;
+
+use App\Entity\Project;
+use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
+use Doctrine\Persistence\ManagerRegistry;
+
+class ProjectRepository extends ServiceEntityRepository
+{
+    public function __construct(ManagerRegistry $registry)
+    {
+        parent::__construct($registry, Project::class);
+    }
+}
+```
+
+**Step 2: Créer l'entité Project**
+
+```php
+<?php
+
+declare(strict_types=1);
+
+namespace App\Entity;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\Delete;
+use ApiPlatform\Metadata\Get;
+use ApiPlatform\Metadata\GetCollection;
+use ApiPlatform\Metadata\Patch;
+use ApiPlatform\Metadata\Post;
+use App\Repository\ProjectRepository;
+use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Attribute\Groups;
+
+#[ApiResource(
+    operations: [
+        new GetCollection(),
+        new Get(),
+        new Post(security: "is_granted('ROLE_ADMIN')"),
+        new Patch(security: "is_granted('ROLE_ADMIN')"),
+        new Delete(security: "is_granted('ROLE_ADMIN')"),
+    ],
+    normalizationContext: ['groups' => ['project:read']],
+    denormalizationContext: ['groups' => ['project:write']],
+    order: ['name' => 'ASC'],
+)]
+#[ORM\Entity(repositoryClass: ProjectRepository::class)]
+class Project
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column]
+    #[Groups(['project:read'])]
+    private ?int $id = null;
+
+    #[ORM\Column(length: 255)]
+    #[Groups(['project:read', 'project:write'])]
+    private ?string $name = null;
+
+    #[ORM\Column(type: 'text', nullable: true)]
+    #[Groups(['project:read', 'project:write'])]
+    private ?string $description = null;
+
+    #[ORM\Column(length: 7)]
+    #[Groups(['project:read', 'project:write'])]
+    private ?string $color = '#222783';
+
+    #[ORM\ManyToOne(targetEntity: Client::class, inversedBy: 'projects')]
+    #[ORM\JoinColumn(nullable: true, onDelete: 'SET NULL')]
+    #[Groups(['project:read', 'project:write'])]
+    private ?Client $client = null;
+
+    // Getters et setters pour chaque propriété (getId, getName/setName, getDescription/setDescription,
+    // getColor/setColor, getClient/setClient)
+    // Suivre le même pattern fluent (return $this) que User.php
+}
+```
+
+**Note importante pour API Platform :** Le champ `client` en écriture accepte un IRI (ex: `"/api/clients/1"`) ou `null`.
+
+**Step 3: Générer et exécuter la migration**
+
+Run (dans le container PHP) :
+```bash
+php bin/console doctrine:migrations:diff
+php bin/console doctrine:migrations:migrate --no-interaction
+```
+Expected: Migration créée, table `project` avec foreign key vers `client`.
+
+**Step 4: Commit**
+
+```bash
+git add src/Entity/Project.php src/Repository/ProjectRepository.php migrations/
+git commit -m "feat : add Project entity with CRUD API and Client relation"
+```
+
+---
+
+## Task 3 : Fixtures Clients & Projets
+
+**Files:**
+- Modify: `src/DataFixtures/AppFixtures.php`
+
+**Step 1: Ajouter les fixtures**
+
+Modifier `AppFixtures.php` pour ajouter des clients et projets après la création du user admin :
+
+```php
+<?php
+
+declare(strict_types=1);
+
+namespace App\DataFixtures;
+
+use App\Entity\Client;
+use App\Entity\Project;
+use App\Entity\User;
+use Doctrine\Bundle\FixturesBundle\Fixture;
+use Doctrine\Persistence\ObjectManager;
+use Symfony\Component\PasswordHasher\Hasher\UserPasswordHasherInterface;
+
+class AppFixtures extends Fixture
+{
+    public function __construct(
+        private readonly UserPasswordHasherInterface $passwordHasher,
+    ) {}
+
+    public function load(ObjectManager $manager): void
+    {
+        // User admin
+        $admin = new User();
+        $admin->setUsername('admin');
+        $admin->setRoles(['ROLE_ADMIN']);
+        $admin->setPassword($this->passwordHasher->hashPassword($admin, 'admin'));
+        $manager->persist($admin);
+
+        // Clients
+        $clientLiot = new Client();
+        $clientLiot->setName('LIOT');
+        $clientLiot->setEmail('contact@liot.fr');
+        $clientLiot->setPhone('05 50 50 50 50');
+        $clientLiot->setStreet('14 allée d\'argenson');
+        $clientLiot->setCity('Poitiers');
+        $clientLiot->setPostalCode('86100');
+        $manager->persist($clientLiot);
+
+        $clientAcme = new Client();
+        $clientAcme->setName('ACME Corp');
+        $clientAcme->setEmail('contact@acme.com');
+        $clientAcme->setPhone('01 23 45 67 89');
+        $clientAcme->setStreet('10 rue de la Paix');
+        $clientAcme->setCity('Paris');
+        $clientAcme->setPostalCode('75002');
+        $manager->persist($clientAcme);
+
+        $clientNova = new Client();
+        $clientNova->setName('Nova Tech');
+        $clientNova->setEmail('info@novatech.io');
+        $clientNova->setPhone('04 56 78 90 12');
+        $clientNova->setStreet('5 avenue Jean Jaurès');
+        $clientNova->setCity('Lyon');
+        $clientNova->setPostalCode('69007');
+        $manager->persist($clientNova);
+
+        // Projets
+        $colors = ['#222783', '#E91E63', '#4A90D9', '#7E57C2', '#26A69A', '#FDD835', '#8BC34A', '#FF7043'];
+
+        $projectSirh = new Project();
+        $projectSirh->setName('SIRH');
+        $projectSirh->setDescription('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac blandit turpis.');
+        $projectSirh->setColor($colors[0]);
+        $projectSirh->setClient($clientLiot);
+        $manager->persist($projectSirh);
+
+        $projectCrm = new Project();
+        $projectCrm->setName('CRM');
+        $projectCrm->setDescription('Gestion de la relation client et suivi commercial.');
+        $projectCrm->setColor($colors[1]);
+        $projectCrm->setClient($clientAcme);
+        $manager->persist($projectCrm);
+
+        $projectErp = new Project();
+        $projectErp->setName('ERP');
+        $projectErp->setDescription('Planification des ressources et gestion des stocks.');
+        $projectErp->setColor($colors[2]);
+        $projectErp->setClient($clientNova);
+        $manager->persist($projectErp);
+
+        $projectInterne = new Project();
+        $projectInterne->setName('Site vitrine');
+        $projectInterne->setDescription('Refonte du site web corporate.');
+        $projectInterne->setColor($colors[4]);
+        $projectInterne->setClient(null);
+        $manager->persist($projectInterne);
+
+        $manager->flush();
+    }
+}
+```
+
+**Step 2: Recharger les fixtures**
+
+Run: `make fixtures` ou dans le container : `php bin/console doctrine:fixtures:load --no-interaction`
+Expected: 1 user, 3 clients, 4 projets créés.
+
+**Step 3: Commit**
+
+```bash
+git add src/DataFixtures/AppFixtures.php
+git commit -m "feat : add Client and Project fixtures"
+```
+
+---
+
+## Task 4 : DTOs & Service Client (Frontend)
+
+**Files:**
+- Create: `frontend/services/dto/client.ts`
+- Create: `frontend/services/clients.ts`
+- Modify: `frontend/utils/api.ts` (créer si inexistant — utilitaire Hydra)
+
+**Step 1: Créer l'utilitaire Hydra**
+
+Créer `frontend/utils/api.ts` :
+
+```typescript
+export type HydraCollection<T> = {
+    'hydra:member': T[]
+    'hydra:totalItems': number
+}
+
+export function extractHydraMembers<T>(response: HydraCollection<T>): T[] {
+    return response['hydra:member'] ?? []
+}
+```
+
+**Step 2: Créer le DTO Client**
+
+Créer `frontend/services/dto/client.ts` :
+
+```typescript
+export type Client = {
+    id: number
+    '@id'?: string
+    name: string
+    email: string | null
+    phone: string | null
+    street: string | null
+    city: string | null
+    postalCode: string | null
+}
+
+export type ClientWrite = {
+    name: string
+    email: string | null
+    phone: string | null
+    street: string | null
+    city: string | null
+    postalCode: string | null
+}
+```
+
+**Step 3: Créer le service Client**
+
+Créer `frontend/services/clients.ts` :
+
+```typescript
+import type { Client, ClientWrite } from './dto/client'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+export function useClientService() {
+    const api = useApi()
+
+    async function getAll(): Promise<Client[]> {
+        const data = await api.get<HydraCollection<Client>>('/clients')
+        return extractHydraMembers(data)
+    }
+
+    async function create(payload: ClientWrite): Promise<Client> {
+        return api.post<Client>('/clients', payload as Record<string, unknown>, {
+            toastSuccessKey: 'clients.created',
+        })
+    }
+
+    async function update(id: number, payload: Partial<ClientWrite>): Promise<Client> {
+        return api.patch<Client>(`/clients/${id}`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'clients.updated',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/clients/${id}`, {}, {
+            toastSuccessKey: 'clients.deleted',
+        })
+    }
+
+    return { getAll, create, update, remove }
+}
+```
+
+**Step 4: Commit**
+
+```bash
+git add frontend/utils/api.ts frontend/services/dto/client.ts frontend/services/clients.ts
+git commit -m "feat : add Client DTO, service and Hydra utils (frontend)"
+```
+
+---
+
+## Task 5 : DTOs & Service Project (Frontend)
+
+**Files:**
+- Create: `frontend/services/dto/project.ts`
+- Create: `frontend/services/projects.ts`
+
+**Step 1: Créer le DTO Project**
+
+Créer `frontend/services/dto/project.ts` :
+
+```typescript
+import type { Client } from './client'
+
+export type Project = {
+    id: number
+    '@id'?: string
+    name: string
+    description: string | null
+    color: string
+    client: Client | null
+}
+
+export type ProjectWrite = {
+    name: string
+    description: string | null
+    color: string
+    client: string | null  // IRI : "/api/clients/1" ou null
+}
+```
+
+**Step 2: Créer le service Project**
+
+Créer `frontend/services/projects.ts` :
+
+```typescript
+import type { Project, ProjectWrite } from './dto/project'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+export function useProjectService() {
+    const api = useApi()
+
+    async function getAll(): Promise<Project[]> {
+        const data = await api.get<HydraCollection<Project>>('/projects')
+        return extractHydraMembers(data)
+    }
+
+    async function create(payload: ProjectWrite): Promise<Project> {
+        return api.post<Project>('/projects', payload as Record<string, unknown>, {
+            toastSuccessKey: 'projects.created',
+        })
+    }
+
+    async function update(id: number, payload: Partial<ProjectWrite>): Promise<Project> {
+        return api.patch<Project>(`/projects/${id}`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'projects.updated',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/projects/${id}`, {}, {
+            toastSuccessKey: 'projects.deleted',
+        })
+    }
+
+    return { getAll, create, update, remove }
+}
+```
+
+**Step 3: Commit**
+
+```bash
+git add frontend/services/dto/project.ts frontend/services/projects.ts
+git commit -m "feat : add Project DTO and service (frontend)"
+```
+
+---
+
+## Task 6 : Composant Drawer réutilisable
+
+**Files:**
+- Create: `frontend/components/AppDrawer.vue`
+
+**Step 1: Créer le composant Drawer**
+
+Créer `frontend/components/AppDrawer.vue` :
+
+```vue
+<template>
+    <Teleport to="body">
+        <Transition name="drawer">
+            <div
+                v-if="modelValue"
+                class="fixed inset-0 z-40 flex justify-end"
+            >
+                <div
+                    class="absolute inset-0 bg-black/30"
+                    @click="close"
+                />
+                <div
+                    class="relative z-50 flex h-full w-full max-w-md flex-col bg-white shadow-xl"
+                >
+                    <div class="flex items-center justify-between border-b border-neutral-200 px-6 py-4">
+                        <h2 class="text-lg font-bold text-neutral-900">{{ title }}</h2>
+                        <button
+                            type="button"
+                            class="rounded p-1 text-neutral-400 hover:text-neutral-600"
+                            @click="close"
+                        >
+                            <Icon name="mdi:close" size="24" />
+                        </button>
+                    </div>
+                    <div class="flex-1 overflow-y-auto px-6 py-4">
+                        <slot />
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    modelValue: boolean
+    title: string
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+}>()
+
+function close() {
+    emit('update:modelValue', false)
+}
+</script>
+
+<style scoped>
+.drawer-enter-active,
+.drawer-leave-active {
+    transition: opacity 0.2s ease;
+}
+
+.drawer-enter-active > div:last-child,
+.drawer-leave-active > div:last-child {
+    transition: transform 0.3s ease;
+}
+
+.drawer-enter-from,
+.drawer-leave-to {
+    opacity: 0;
+}
+
+.drawer-enter-from > div:last-child,
+.drawer-leave-to > div:last-child {
+    transform: translateX(100%);
+}
+</style>
+```
+
+**Step 2: Vérifier le rendu**
+
+Tester en important temporairement dans une page existante (optionnel).
+
+**Step 3: Commit**
+
+```bash
+git add frontend/components/AppDrawer.vue
+git commit -m "feat : add reusable AppDrawer component"
+```
+
+---
+
+## Task 7 : Page Clients (Frontend)
+
+**Files:**
+- Create: `frontend/pages/clients.vue`
+- Create: `frontend/components/ClientDrawer.vue`
+
+**Step 1: Créer le formulaire drawer Client**
+
+Créer `frontend/components/ClientDrawer.vue` :
+
+```vue
+<template>
+    <AppDrawer v-model="isOpen" :title="isEditing ? 'Modifier un client' : 'Ajouter un client'">
+        <form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
+            <MalioInputText
+                v-model="form.name"
+                label="Nom"
+                input-class="w-full"
+                :error="touched.name && !form.name.trim() ? 'Le nom est requis' : ''"
+                @blur="touched.name = true"
+            />
+            <MalioInputText
+                v-model="form.email"
+                label="Email"
+                input-class="w-full"
+                @blur="touched.email = true"
+            />
+            <MalioInputText
+                v-model="form.phone"
+                label="Téléphone"
+                input-class="w-full"
+            />
+            <MalioInputText
+                v-model="form.street"
+                label="Rue"
+                input-class="w-full"
+            />
+            <MalioInputText
+                v-model="form.city"
+                label="Ville"
+                input-class="w-full"
+            />
+            <MalioInputText
+                v-model="form.postalCode"
+                label="Code Postal"
+                input-class="w-full"
+            />
+
+            <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 { Client, ClientWrite } from '~/services/dto/client'
+
+const props = defineProps<{
+    modelValue: boolean
+    client: Client | 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.client)
+const isSubmitting = ref(false)
+
+const form = reactive({
+    name: '',
+    email: '',
+    phone: '',
+    street: '',
+    city: '',
+    postalCode: '',
+})
+
+const touched = reactive({
+    name: false,
+    email: false,
+})
+
+watch(() => props.modelValue, (open) => {
+    if (open) {
+        if (props.client) {
+            form.name = props.client.name ?? ''
+            form.email = props.client.email ?? ''
+            form.phone = props.client.phone ?? ''
+            form.street = props.client.street ?? ''
+            form.city = props.client.city ?? ''
+            form.postalCode = props.client.postalCode ?? ''
+        } else {
+            form.name = ''
+            form.email = ''
+            form.phone = ''
+            form.street = ''
+            form.city = ''
+            form.postalCode = ''
+        }
+        touched.name = false
+        touched.email = false
+    }
+})
+
+const { create, update } = useClientService()
+
+async function handleSubmit() {
+    touched.name = true
+    if (!form.name.trim()) return
+
+    isSubmitting.value = true
+    try {
+        const payload: ClientWrite = {
+            name: form.name.trim(),
+            email: form.email.trim() || null,
+            phone: form.phone.trim() || null,
+            street: form.street.trim() || null,
+            city: form.city.trim() || null,
+            postalCode: form.postalCode.trim() || null,
+        }
+
+        if (isEditing.value && props.client) {
+            await update(props.client.id, payload)
+        } else {
+            await create(payload)
+        }
+
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+</script>
+```
+
+**Step 2: Créer la page Clients**
+
+Créer `frontend/pages/clients.vue` :
+
+```vue
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h1 class="text-2xl font-bold text-neutral-900">Clients</h1>
+            <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 client
+            </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">Nom</th>
+                        <th class="px-4 py-3 font-semibold text-neutral-700">Email</th>
+                        <th class="px-4 py-3 font-semibold text-neutral-700">Adresse</th>
+                        <th class="px-4 py-3 font-semibold text-neutral-700">Téléphone</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr
+                        v-for="client in clients"
+                        :key="client.id"
+                        class="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
+                        @click="openEdit(client)"
+                    >
+                        <td class="px-4 py-3 font-semibold text-primary-500">{{ client.name }}</td>
+                        <td class="px-4 py-3 text-primary-500">{{ client.email ?? '-' }}</td>
+                        <td class="px-4 py-3 text-neutral-700">{{ formatAddress(client) }}</td>
+                        <td class="px-4 py-3 text-primary-500">{{ client.phone ?? '-' }}</td>
+                    </tr>
+                    <tr v-if="clients.length === 0 && !isLoading">
+                        <td colspan="4" class="px-4 py-8 text-center text-neutral-400">
+                            Aucun client trouvé.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <ClientDrawer
+            v-model="drawerOpen"
+            :client="selectedClient"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Client } from '~/services/dto/client'
+
+useHead({ title: 'Clients' })
+
+const { getAll } = useClientService()
+const clients = ref<Client[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedClient = ref<Client | null>(null)
+
+async function loadClients() {
+    isLoading.value = true
+    try {
+        clients.value = await getAll()
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function openCreate() {
+    selectedClient.value = null
+    drawerOpen.value = true
+}
+
+function openEdit(client: Client) {
+    selectedClient.value = client
+    drawerOpen.value = true
+}
+
+function formatAddress(client: Client): string {
+    return [client.street, client.postalCode, client.city]
+        .filter(Boolean)
+        .join(', ') || '-'
+}
+
+async function onSaved() {
+    await loadClients()
+}
+
+onMounted(() => {
+    loadClients()
+})
+</script>
+```
+
+**Step 3: Vérifier le rendu**
+
+Run: `make dev-nuxt` puis naviguer vers `/clients`
+Expected: Tableau vide (ou avec données si fixtures chargées), bouton "+ Ajouter un client", drawer s'ouvre au clic.
+
+**Step 4: Commit**
+
+```bash
+git add frontend/pages/clients.vue frontend/components/ClientDrawer.vue
+git commit -m "feat : add Clients page with table and drawer form"
+```
+
+---
+
+## Task 8 : Page Projets (Frontend)
+
+**Files:**
+- Create: `frontend/pages/projects.vue`
+- Create: `frontend/components/ProjectDrawer.vue`
+- Create: `frontend/components/ColorPicker.vue`
+
+**Step 1: Créer le composant ColorPicker**
+
+Créer `frontend/components/ColorPicker.vue` :
+
+```vue
+<template>
+    <div>
+        <p class="mb-2 text-sm font-medium text-neutral-700">Couleur</p>
+        <div class="flex flex-wrap gap-3">
+            <button
+                v-for="color in colors"
+                :key="color"
+                type="button"
+                class="h-10 w-10 rounded-full border-2 transition-transform hover:scale-110"
+                :class="modelValue === color ? 'border-neutral-900 scale-110' : 'border-transparent'"
+                :style="{ backgroundColor: color }"
+                @click="emit('update:modelValue', color)"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    modelValue: string
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void
+}>()
+
+const colors = [
+    '#26A69A', '#E91E63', '#4A90D9', '#7E57C2',
+    '#8BC34A', '#FDD835', '#80DEEA', '#FF7043',
+]
+</script>
+```
+
+**Step 2: Créer le formulaire drawer Project**
+
+Créer `frontend/components/ProjectDrawer.vue` :
+
+```vue
+<template>
+    <AppDrawer v-model="isOpen" :title="isEditing ? 'Modifier un projet' : 'Ajouter un projet'">
+        <form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
+            <MalioInputText
+                v-model="form.name"
+                label="Titre"
+                input-class="w-full"
+                :error="touched.name && !form.name.trim() ? 'Le titre est requis' : ''"
+                @blur="touched.name = true"
+            />
+            <MalioInputTextArea
+                v-model="form.description"
+                label="Description"
+                :size="3"
+            />
+            <MalioSelect
+                v-model="form.clientId"
+                :options="clientOptions"
+                label="Client"
+                empty-option-label="Aucun client"
+                min-width="w-full"
+            />
+            <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 { Project, ProjectWrite } from '~/services/dto/project'
+import type { Client } from '~/services/dto/client'
+
+const props = defineProps<{
+    modelValue: boolean
+    project: Project | null
+    clients: Client[]
+}>()
+
+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.project)
+const isSubmitting = ref(false)
+
+const form = reactive({
+    name: '',
+    description: '',
+    color: '#222783',
+    clientId: null as number | null,
+})
+
+const touched = reactive({
+    name: false,
+})
+
+const clientOptions = computed(() =>
+    props.clients.map(c => ({ label: c.name, value: c.id }))
+)
+
+watch(() => props.modelValue, (open) => {
+    if (open) {
+        if (props.project) {
+            form.name = props.project.name ?? ''
+            form.description = props.project.description ?? ''
+            form.color = props.project.color ?? '#222783'
+            form.clientId = props.project.client?.id ?? null
+        } else {
+            form.name = ''
+            form.description = ''
+            form.color = '#222783'
+            form.clientId = null
+        }
+        touched.name = false
+    }
+})
+
+const { create, update } = useProjectService()
+
+async function handleSubmit() {
+    touched.name = true
+    if (!form.name.trim()) return
+
+    isSubmitting.value = true
+    try {
+        const payload: ProjectWrite = {
+            name: form.name.trim(),
+            description: form.description.trim() || null,
+            color: form.color,
+            client: form.clientId ? `/api/clients/${form.clientId}` : null,
+        }
+
+        if (isEditing.value && props.project) {
+            await update(props.project.id, payload)
+        } else {
+            await create(payload)
+        }
+
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+</script>
+```
+
+**Step 3: Créer la page Projets**
+
+Créer `frontend/pages/projects.vue` :
+
+```vue
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h1 class="text-2xl font-bold text-neutral-900">Projets</h1>
+            <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 projet
+            </button>
+        </div>
+
+        <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <div
+                v-for="project in projects"
+                :key="project.id"
+                class="cursor-pointer rounded-lg border border-neutral-200 bg-white shadow-sm transition hover:shadow-md"
+                @click="openEdit(project)"
+            >
+                <div class="h-2 rounded-t-lg" :style="{ backgroundColor: project.color }" />
+                <div class="p-4">
+                    <h3 class="text-md font-bold text-primary-500">{{ project.name }}</h3>
+                    <p class="mt-2 text-sm text-neutral-600 line-clamp-4">
+                        {{ project.description ?? '' }}
+                    </p>
+                </div>
+            </div>
+
+            <div
+                v-if="projects.length === 0 && !isLoading"
+                class="col-span-full py-12 text-center text-neutral-400"
+            >
+                Aucun projet trouvé.
+            </div>
+        </div>
+
+        <ProjectDrawer
+            v-model="drawerOpen"
+            :project="selectedProject"
+            :clients="clients"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Project } from '~/services/dto/project'
+import type { Client } from '~/services/dto/client'
+
+useHead({ title: 'Projets' })
+
+const projectService = useProjectService()
+const clientService = useClientService()
+
+const projects = ref<Project[]>([])
+const clients = ref<Client[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedProject = ref<Project | null>(null)
+
+async function loadData() {
+    isLoading.value = true
+    try {
+        const [p, c] = await Promise.all([
+            projectService.getAll(),
+            clientService.getAll(),
+        ])
+        projects.value = p
+        clients.value = c
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function openCreate() {
+    selectedProject.value = null
+    drawerOpen.value = true
+}
+
+function openEdit(project: Project) {
+    selectedProject.value = project
+    drawerOpen.value = true
+}
+
+async function onSaved() {
+    await loadData()
+}
+
+onMounted(() => {
+    loadData()
+})
+</script>
+```
+
+**Step 4: Supprimer l'ancienne page project-list si elle existe**
+
+Vérifier si `frontend/pages/project-list.vue` existe. Si oui, la supprimer (c'était un placeholder).
+
+**Step 5: Commit**
+
+```bash
+git add frontend/components/ColorPicker.vue frontend/components/ProjectDrawer.vue frontend/pages/projects.vue
+git rm frontend/pages/project-list.vue 2>/dev/null || true
+git commit -m "feat : add Projects page with cards and drawer form"
+```
+
+---
+
+## Task 9 : Navigation Sidebar + Traductions i18n
+
+**Files:**
+- Modify: `frontend/layouts/default.vue`
+- Modify: `frontend/i18n/locales/fr.json`
+
+**Step 1: Mettre à jour la sidebar**
+
+Dans `frontend/layouts/default.vue`, ajouter le lien "Clients" sous "Projets" dans la nav :
+
+```html
+<!-- Ajouter après le NuxtLink Projets existant -->
+<NuxtLink
+    to="/clients"
+    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:account-group-outline" size="24"/>
+    <span class="self-baseline text-md">Clients</span>
+</NuxtLink>
+```
+
+Aussi, mettre à jour le lien Projets pour pointer vers `/projects` (au lieu de `/project-list`) :
+
+Changer `to="/project-list"` → `to="/projects"`
+
+**Step 2: Ajouter les traductions**
+
+Modifier `frontend/i18n/locales/fr.json` pour ajouter les clés de toast :
+
+```json
+{
+    "errors": {
+        "http": {
+            "get": "Impossible de récupérer les données.",
+            "post": "Impossible de créer la ressource.",
+            "put": "Impossible de mettre à jour la ressource.",
+            "patch": "Impossible de mettre à jour la ressource.",
+            "delete": "Impossible de supprimer la ressource."
+        },
+        "auth": {
+            "login": "Identifiants invalides.",
+            "logout": "Impossible de se déconnecter.",
+            "session": "Session expirée"
+        }
+    },
+    "success": {
+        "auth": {
+            "login": "Connexion réussie.",
+            "logout": "Déconnexion réussie."
+        }
+    },
+    "clients": {
+        "created": "Client créé avec succès.",
+        "updated": "Client mis à jour avec succès.",
+        "deleted": "Client supprimé avec succès."
+    },
+    "projects": {
+        "created": "Projet créé avec succès.",
+        "updated": "Projet mis à jour avec succès.",
+        "deleted": "Projet supprimé avec succès."
+    }
+}
+```
+
+**Step 3: Commit**
+
+```bash
+git add frontend/layouts/default.vue frontend/i18n/locales/fr.json
+git commit -m "feat : add Clients nav link and i18n translations"
+```
+
+---
+
+## Task 10 : Mise à jour CLAUDE.md
+
+**Files:**
+- Modify: `CLAUDE.md`
+
+**Step 1: Mettre à jour CLAUDE.md**
+
+Ajouter dans la section structure les nouveaux fichiers et patterns. Points à ajouter/mettre à jour :
+
+- Ajouter `Client` et `Project` dans les entités documentées
+- Ajouter les fixtures complètes (3 clients, 4 projets)
+- Documenter le pattern Drawer (AppDrawer + formulaires spécifiques)
+- Documenter les services frontend (useClientService, useProjectService)
+- Documenter les DTOs (Client, ClientWrite, Project, ProjectWrite)
+- Documenter l'utilitaire Hydra (`utils/api.ts`)
+- Documenter le composant ColorPicker
+- Mettre à jour la structure des dossiers
+
+**Step 2: Commit**
+
+```bash
+git add CLAUDE.md
+git commit -m "docs : update CLAUDE.md with Client and Project architecture"
+```
+
+---
+
+## Task 11 : Tests manuels de bout en bout
+
+**Step 1: Recharger les fixtures**
+
+Run: `make db-reset` ou `make fixtures`
+Expected: BDD reset avec admin + 3 clients + 4 projets
+
+**Step 2: Tester l'API Client via curl**
+
+```bash
+# Login
+curl -c cookies.txt -X POST http://localhost:8082/login_check \
+  -H 'Content-Type: application/json' \
+  -d '{"username":"admin","password":"admin"}'
+
+# GET clients
+curl -b cookies.txt http://localhost:8082/api/clients
+```
+Expected: Liste de 3 clients au format Hydra
+
+**Step 3: Tester l'API Project via curl**
+
+```bash
+curl -b cookies.txt http://localhost:8082/api/projects
+```
+Expected: Liste de 4 projets au format Hydra, chaque projet avec `client` imbriqué ou null
+
+**Step 4: Tester le frontend**
+
+1. Naviguer vers `http://localhost:8082/`
+2. Se connecter avec `admin` / `admin`
+3. Cliquer "Projets" dans la sidebar → page avec 4 cartes colorées
+4. Cliquer "+ Ajouter un projet" → drawer s'ouvre, remplir et enregistrer
+5. Cliquer "Clients" dans la sidebar → page avec tableau de 3 clients
+6. Cliquer sur une ligne → drawer s'ouvre avec les données pré-remplies
+7. Cliquer "+ Ajouter un client" → drawer vide s'ouvre
+
+**Step 5: Commit final si ajustements**
+
+```bash
+git add -A
+git commit -m "fix : adjustments after manual testing"
+```
+
+---
+
+## Résumé des commits prévus
+
+| # | Message | Scope |
+|---|---------|-------|
+| 1 | `feat : add Client entity with CRUD API` | Backend |
+| 2 | `feat : add Project entity with CRUD API and Client relation` | Backend |
+| 3 | `feat : add Client and Project fixtures` | Backend |
+| 4 | `feat : add Client DTO, service and Hydra utils (frontend)` | Frontend |
+| 5 | `feat : add Project DTO and service (frontend)` | Frontend |
+| 6 | `feat : add reusable AppDrawer component` | Frontend |
+| 7 | `feat : add Clients page with table and drawer form` | Frontend |
+| 8 | `feat : add Projects page with cards and drawer form` | Frontend |
+| 9 | `feat : add Clients nav link and i18n translations` | Frontend |
+| 10 | `docs : update CLAUDE.md with Client and Project architecture` | Docs |
diff --git a/docs/plans/2026-03-09-task-management.md b/docs/plans/2026-03-09-task-management.md
new file mode 100644
index 0000000..548e22f
--- /dev/null
+++ b/docs/plans/2026-03-09-task-management.md
@@ -0,0 +1,2421 @@
+# Task Management (Tickets + Kanban) Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Ajouter un système de gestion de tâches (tickets) avec vue Kanban et Backlog par projet, incluant des entités configurables (Status, Effort, Priorité, Type, Groupe) administrables via un onglet admin.
+
+**Architecture:** 6 nouvelles entités Doctrine exposées via API Platform. Le frontend ajoute une page admin avec CRUD pour les entités de configuration, et une page projet avec Kanban + Backlog. Les patterns existants (Entity → Repository → ApiResource, Service → DTO → Drawer) sont réutilisés à l'identique.
+
+**Tech Stack:** Symfony 8 / API Platform 4 / Doctrine ORM (backend), Nuxt 4 / Vue 3 / Pinia / Tailwind CSS (frontend)
+
+---
+
+## Modèle de données
+
+```
+TaskStatus    { id, label, color, position }           — ex: "A faire", "En cours", "Bloqué"…
+TaskEffort    { id, label }                             — ex: "S", "M", "L", "XL", "XXL"
+TaskPriority  { id, label, color }                      — ex: "Basse" (bleu), "Moyen" (orange), "Haute" (rouge)
+TaskType      { id, label, color }                      — ex: "Gestion mdp", "Connexion", "Calendrier"
+TaskGroup     { id, title, description, color, project } — lié à un projet, ex: groupe filtrable
+Task          { id, title, description, status, effort, priority, assignee(User), group, project, types(M2M) }
+```
+
+---
+
+## Phase 1 : Backend — Entités de configuration
+
+### Task 1.1 : Entité TaskStatus
+
+**Files:**
+- Create: `src/Entity/TaskStatus.php`
+- Create: `src/Repository/TaskStatusRepository.php`
+
+**Step 1: Create TaskStatusRepository**
+
+```php
+<?php
+
+declare(strict_types=1);
+
+namespace App\Repository;
+
+use App\Entity\TaskStatus;
+use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
+use Doctrine\Persistence\ManagerRegistry;
+
+/**
+ * @extends ServiceEntityRepository<TaskStatus>
+ */
+class TaskStatusRepository extends ServiceEntityRepository
+{
+    public function __construct(ManagerRegistry $registry)
+    {
+        parent::__construct($registry, TaskStatus::class);
+    }
+}
+```
+
+**Step 2: Create TaskStatus entity**
+
+```php
+<?php
+
+declare(strict_types=1);
+
+namespace App\Entity;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\Delete;
+use ApiPlatform\Metadata\Get;
+use ApiPlatform\Metadata\GetCollection;
+use ApiPlatform\Metadata\Patch;
+use ApiPlatform\Metadata\Post;
+use App\Repository\TaskStatusRepository;
+use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Attribute\Groups;
+
+#[ApiResource(
+    operations: [
+        new GetCollection(),
+        new Get(),
+        new Post(security: "is_granted('ROLE_ADMIN')"),
+        new Patch(security: "is_granted('ROLE_ADMIN')"),
+        new Delete(security: "is_granted('ROLE_ADMIN')"),
+    ],
+    normalizationContext: ['groups' => ['task_status:read']],
+    denormalizationContext: ['groups' => ['task_status:write']],
+    order: ['position' => 'ASC'],
+)]
+#[ORM\Entity(repositoryClass: TaskStatusRepository::class)]
+class TaskStatus
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column]
+    #[Groups(['task_status:read', 'task:read'])]
+    private ?int $id = null;
+
+    #[ORM\Column(length: 255)]
+    #[Groups(['task_status:read', 'task_status:write', 'task:read'])]
+    private ?string $label = null;
+
+    #[ORM\Column(length: 7)]
+    #[Groups(['task_status:read', 'task_status:write', 'task:read'])]
+    private ?string $color = '#222783';
+
+    #[ORM\Column(type: 'integer')]
+    #[Groups(['task_status:read', 'task_status:write', 'task:read'])]
+    private int $position = 0;
+
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
+
+    public function getLabel(): ?string
+    {
+        return $this->label;
+    }
+
+    public function setLabel(string $label): static
+    {
+        $this->label = $label;
+
+        return $this;
+    }
+
+    public function getColor(): ?string
+    {
+        return $this->color;
+    }
+
+    public function setColor(string $color): static
+    {
+        $this->color = $color;
+
+        return $this;
+    }
+
+    public function getPosition(): int
+    {
+        return $this->position;
+    }
+
+    public function setPosition(int $position): static
+    {
+        $this->position = $position;
+
+        return $this;
+    }
+}
+```
+
+**Step 3: Commit**
+
+```bash
+git add src/Entity/TaskStatus.php src/Repository/TaskStatusRepository.php
+git commit -m "feat : add TaskStatus entity"
+```
+
+---
+
+### Task 1.2 : Entité TaskEffort
+
+**Files:**
+- Create: `src/Entity/TaskEffort.php`
+- Create: `src/Repository/TaskEffortRepository.php`
+
+**Step 1: Create TaskEffortRepository** (même pattern que TaskStatusRepository)
+
+**Step 2: Create TaskEffort entity**
+
+```php
+<?php
+
+declare(strict_types=1);
+
+namespace App\Entity;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\Delete;
+use ApiPlatform\Metadata\Get;
+use ApiPlatform\Metadata\GetCollection;
+use ApiPlatform\Metadata\Patch;
+use ApiPlatform\Metadata\Post;
+use App\Repository\TaskEffortRepository;
+use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Attribute\Groups;
+
+#[ApiResource(
+    operations: [
+        new GetCollection(),
+        new Get(),
+        new Post(security: "is_granted('ROLE_ADMIN')"),
+        new Patch(security: "is_granted('ROLE_ADMIN')"),
+        new Delete(security: "is_granted('ROLE_ADMIN')"),
+    ],
+    normalizationContext: ['groups' => ['task_effort:read']],
+    denormalizationContext: ['groups' => ['task_effort:write']],
+    order: ['label' => 'ASC'],
+)]
+#[ORM\Entity(repositoryClass: TaskEffortRepository::class)]
+class TaskEffort
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column]
+    #[Groups(['task_effort:read', 'task:read'])]
+    private ?int $id = null;
+
+    #[ORM\Column(length: 50)]
+    #[Groups(['task_effort:read', 'task_effort:write', 'task:read'])]
+    private ?string $label = null;
+
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
+
+    public function getLabel(): ?string
+    {
+        return $this->label;
+    }
+
+    public function setLabel(string $label): static
+    {
+        $this->label = $label;
+
+        return $this;
+    }
+}
+```
+
+**Step 3: Commit**
+
+```bash
+git add src/Entity/TaskEffort.php src/Repository/TaskEffortRepository.php
+git commit -m "feat : add TaskEffort entity"
+```
+
+---
+
+### Task 1.3 : Entité TaskPriority
+
+**Files:**
+- Create: `src/Entity/TaskPriority.php`
+- Create: `src/Repository/TaskPriorityRepository.php`
+
+**Step 1: Create TaskPriorityRepository** (même pattern)
+
+**Step 2: Create TaskPriority entity**
+
+```php
+<?php
+
+declare(strict_types=1);
+
+namespace App\Entity;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\Delete;
+use ApiPlatform\Metadata\Get;
+use ApiPlatform\Metadata\GetCollection;
+use ApiPlatform\Metadata\Patch;
+use ApiPlatform\Metadata\Post;
+use App\Repository\TaskPriorityRepository;
+use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Attribute\Groups;
+
+#[ApiResource(
+    operations: [
+        new GetCollection(),
+        new Get(),
+        new Post(security: "is_granted('ROLE_ADMIN')"),
+        new Patch(security: "is_granted('ROLE_ADMIN')"),
+        new Delete(security: "is_granted('ROLE_ADMIN')"),
+    ],
+    normalizationContext: ['groups' => ['task_priority:read']],
+    denormalizationContext: ['groups' => ['task_priority:write']],
+    order: ['label' => 'ASC'],
+)]
+#[ORM\Entity(repositoryClass: TaskPriorityRepository::class)]
+class TaskPriority
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column]
+    #[Groups(['task_priority:read', 'task:read'])]
+    private ?int $id = null;
+
+    #[ORM\Column(length: 255)]
+    #[Groups(['task_priority:read', 'task_priority:write', 'task:read'])]
+    private ?string $label = null;
+
+    #[ORM\Column(length: 7)]
+    #[Groups(['task_priority:read', 'task_priority:write', 'task:read'])]
+    private ?string $color = '#222783';
+
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
+
+    public function getLabel(): ?string
+    {
+        return $this->label;
+    }
+
+    public function setLabel(string $label): static
+    {
+        $this->label = $label;
+
+        return $this;
+    }
+
+    public function getColor(): ?string
+    {
+        return $this->color;
+    }
+
+    public function setColor(string $color): static
+    {
+        $this->color = $color;
+
+        return $this;
+    }
+}
+```
+
+**Step 3: Commit**
+
+```bash
+git add src/Entity/TaskPriority.php src/Repository/TaskPriorityRepository.php
+git commit -m "feat : add TaskPriority entity"
+```
+
+---
+
+### Task 1.4 : Entité TaskType
+
+**Files:**
+- Create: `src/Entity/TaskType.php`
+- Create: `src/Repository/TaskTypeRepository.php`
+
+**Step 1: Create TaskTypeRepository** (même pattern)
+
+**Step 2: Create TaskType entity**
+
+Structure identique à TaskPriority : `id`, `label` (255), `color` (7, default `#222783`).
+
+```php
+<?php
+
+declare(strict_types=1);
+
+namespace App\Entity;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\Delete;
+use ApiPlatform\Metadata\Get;
+use ApiPlatform\Metadata\GetCollection;
+use ApiPlatform\Metadata\Patch;
+use ApiPlatform\Metadata\Post;
+use App\Repository\TaskTypeRepository;
+use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Attribute\Groups;
+
+#[ApiResource(
+    operations: [
+        new GetCollection(),
+        new Get(),
+        new Post(security: "is_granted('ROLE_ADMIN')"),
+        new Patch(security: "is_granted('ROLE_ADMIN')"),
+        new Delete(security: "is_granted('ROLE_ADMIN')"),
+    ],
+    normalizationContext: ['groups' => ['task_type:read']],
+    denormalizationContext: ['groups' => ['task_type:write']],
+    order: ['label' => 'ASC'],
+)]
+#[ORM\Entity(repositoryClass: TaskTypeRepository::class)]
+class TaskType
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column]
+    #[Groups(['task_type:read', 'task:read'])]
+    private ?int $id = null;
+
+    #[ORM\Column(length: 255)]
+    #[Groups(['task_type:read', 'task_type:write', 'task:read'])]
+    private ?string $label = null;
+
+    #[ORM\Column(length: 7)]
+    #[Groups(['task_type:read', 'task_type:write', 'task:read'])]
+    private ?string $color = '#222783';
+
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
+
+    public function getLabel(): ?string
+    {
+        return $this->label;
+    }
+
+    public function setLabel(string $label): static
+    {
+        $this->label = $label;
+
+        return $this;
+    }
+
+    public function getColor(): ?string
+    {
+        return $this->color;
+    }
+
+    public function setColor(string $color): static
+    {
+        $this->color = $color;
+
+        return $this;
+    }
+}
+```
+
+**Step 3: Commit**
+
+```bash
+git add src/Entity/TaskType.php src/Repository/TaskTypeRepository.php
+git commit -m "feat : add TaskType entity"
+```
+
+---
+
+### Task 1.5 : Entité TaskGroup
+
+**Files:**
+- Create: `src/Entity/TaskGroup.php`
+- Create: `src/Repository/TaskGroupRepository.php`
+
+**Step 1: Create TaskGroupRepository** (même pattern)
+
+**Step 2: Create TaskGroup entity**
+
+```php
+<?php
+
+declare(strict_types=1);
+
+namespace App\Entity;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\ApiFilter;
+use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
+use ApiPlatform\Metadata\Delete;
+use ApiPlatform\Metadata\Get;
+use ApiPlatform\Metadata\GetCollection;
+use ApiPlatform\Metadata\Patch;
+use ApiPlatform\Metadata\Post;
+use App\Repository\TaskGroupRepository;
+use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Attribute\Groups;
+
+#[ApiResource(
+    operations: [
+        new GetCollection(),
+        new Get(),
+        new Post(security: "is_granted('ROLE_ADMIN')"),
+        new Patch(security: "is_granted('ROLE_ADMIN')"),
+        new Delete(security: "is_granted('ROLE_ADMIN')"),
+    ],
+    normalizationContext: ['groups' => ['task_group:read']],
+    denormalizationContext: ['groups' => ['task_group:write']],
+    order: ['title' => 'ASC'],
+)]
+#[ApiFilter(SearchFilter::class, properties: ['project' => 'exact'])]
+#[ORM\Entity(repositoryClass: TaskGroupRepository::class)]
+class TaskGroup
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column]
+    #[Groups(['task_group:read', 'task:read'])]
+    private ?int $id = null;
+
+    #[ORM\Column(length: 255)]
+    #[Groups(['task_group:read', 'task_group:write', 'task:read'])]
+    private ?string $title = null;
+
+    #[ORM\Column(type: 'text', nullable: true)]
+    #[Groups(['task_group:read', 'task_group:write'])]
+    private ?string $description = null;
+
+    #[ORM\Column(length: 7)]
+    #[Groups(['task_group:read', 'task_group:write', 'task:read'])]
+    private ?string $color = '#222783';
+
+    #[ORM\ManyToOne(targetEntity: Project::class)]
+    #[ORM\JoinColumn(nullable: false, onDelete: 'CASCADE')]
+    #[Groups(['task_group:read', 'task_group:write'])]
+    private ?Project $project = null;
+
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
+
+    public function getTitle(): ?string
+    {
+        return $this->title;
+    }
+
+    public function setTitle(string $title): static
+    {
+        $this->title = $title;
+
+        return $this;
+    }
+
+    public function getDescription(): ?string
+    {
+        return $this->description;
+    }
+
+    public function setDescription(?string $description): static
+    {
+        $this->description = $description;
+
+        return $this;
+    }
+
+    public function getColor(): ?string
+    {
+        return $this->color;
+    }
+
+    public function setColor(string $color): static
+    {
+        $this->color = $color;
+
+        return $this;
+    }
+
+    public function getProject(): ?Project
+    {
+        return $this->project;
+    }
+
+    public function setProject(?Project $project): static
+    {
+        $this->project = $project;
+
+        return $this;
+    }
+}
+```
+
+**Step 3: Commit**
+
+```bash
+git add src/Entity/TaskGroup.php src/Repository/TaskGroupRepository.php
+git commit -m "feat : add TaskGroup entity"
+```
+
+---
+
+### Task 1.6 : Entité Task
+
+**Files:**
+- Create: `src/Entity/Task.php`
+- Create: `src/Repository/TaskRepository.php`
+
+**Step 1: Create TaskRepository** (même pattern)
+
+**Step 2: Create Task entity**
+
+```php
+<?php
+
+declare(strict_types=1);
+
+namespace App\Entity;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\ApiFilter;
+use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
+use ApiPlatform\Metadata\Delete;
+use ApiPlatform\Metadata\Get;
+use ApiPlatform\Metadata\GetCollection;
+use ApiPlatform\Metadata\Patch;
+use ApiPlatform\Metadata\Post;
+use App\Repository\TaskRepository;
+use Doctrine\Common\Collections\ArrayCollection;
+use Doctrine\Common\Collections\Collection;
+use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Attribute\Groups;
+
+#[ApiResource(
+    operations: [
+        new GetCollection(),
+        new Get(),
+        new Post(security: "is_granted('ROLE_ADMIN')"),
+        new Patch(security: "is_granted('ROLE_ADMIN')"),
+        new Delete(security: "is_granted('ROLE_ADMIN')"),
+    ],
+    normalizationContext: ['groups' => ['task:read']],
+    denormalizationContext: ['groups' => ['task:write']],
+    order: ['id' => 'DESC'],
+)]
+#[ApiFilter(SearchFilter::class, properties: ['project' => 'exact', 'group' => 'exact'])]
+#[ORM\Entity(repositoryClass: TaskRepository::class)]
+class Task
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column]
+    #[Groups(['task:read'])]
+    private ?int $id = null;
+
+    #[ORM\Column(length: 255)]
+    #[Groups(['task:read', 'task:write'])]
+    private ?string $title = null;
+
+    #[ORM\Column(type: 'text', nullable: true)]
+    #[Groups(['task:read', 'task:write'])]
+    private ?string $description = null;
+
+    #[ORM\ManyToOne(targetEntity: TaskStatus::class)]
+    #[ORM\JoinColumn(nullable: true, onDelete: 'SET NULL')]
+    #[Groups(['task:read', 'task:write'])]
+    private ?TaskStatus $status = null;
+
+    #[ORM\ManyToOne(targetEntity: TaskEffort::class)]
+    #[ORM\JoinColumn(nullable: true, onDelete: 'SET NULL')]
+    #[Groups(['task:read', 'task:write'])]
+    private ?TaskEffort $effort = null;
+
+    #[ORM\ManyToOne(targetEntity: TaskPriority::class)]
+    #[ORM\JoinColumn(nullable: true, onDelete: 'SET NULL')]
+    #[Groups(['task:read', 'task:write'])]
+    private ?TaskPriority $priority = null;
+
+    #[ORM\ManyToOne(targetEntity: User::class)]
+    #[ORM\JoinColumn(nullable: true, onDelete: 'SET NULL')]
+    #[Groups(['task:read', 'task:write'])]
+    private ?User $assignee = null;
+
+    #[ORM\ManyToOne(targetEntity: TaskGroup::class)]
+    #[ORM\JoinColumn(nullable: true, onDelete: 'SET NULL')]
+    #[Groups(['task:read', 'task:write'])]
+    private ?TaskGroup $group = null;
+
+    #[ORM\ManyToOne(targetEntity: Project::class)]
+    #[ORM\JoinColumn(nullable: false, onDelete: 'CASCADE')]
+    #[Groups(['task:read', 'task:write'])]
+    private ?Project $project = null;
+
+    /** @var Collection<int, TaskType> */
+    #[ORM\ManyToMany(targetEntity: TaskType::class)]
+    #[ORM\JoinTable(name: 'task_task_type')]
+    #[Groups(['task:read', 'task:write'])]
+    private Collection $types;
+
+    public function __construct()
+    {
+        $this->types = new ArrayCollection();
+    }
+
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
+
+    public function getTitle(): ?string
+    {
+        return $this->title;
+    }
+
+    public function setTitle(string $title): static
+    {
+        $this->title = $title;
+
+        return $this;
+    }
+
+    public function getDescription(): ?string
+    {
+        return $this->description;
+    }
+
+    public function setDescription(?string $description): static
+    {
+        $this->description = $description;
+
+        return $this;
+    }
+
+    public function getStatus(): ?TaskStatus
+    {
+        return $this->status;
+    }
+
+    public function setStatus(?TaskStatus $status): static
+    {
+        $this->status = $status;
+
+        return $this;
+    }
+
+    public function getEffort(): ?TaskEffort
+    {
+        return $this->effort;
+    }
+
+    public function setEffort(?TaskEffort $effort): static
+    {
+        $this->effort = $effort;
+
+        return $this;
+    }
+
+    public function getPriority(): ?TaskPriority
+    {
+        return $this->priority;
+    }
+
+    public function setPriority(?TaskPriority $priority): static
+    {
+        $this->priority = $priority;
+
+        return $this;
+    }
+
+    public function getAssignee(): ?User
+    {
+        return $this->assignee;
+    }
+
+    public function setAssignee(?User $assignee): static
+    {
+        $this->assignee = $assignee;
+
+        return $this;
+    }
+
+    public function getGroup(): ?TaskGroup
+    {
+        return $this->group;
+    }
+
+    public function setGroup(?TaskGroup $group): static
+    {
+        $this->group = $group;
+
+        return $this;
+    }
+
+    public function getProject(): ?Project
+    {
+        return $this->project;
+    }
+
+    public function setProject(?Project $project): static
+    {
+        $this->project = $project;
+
+        return $this;
+    }
+
+    /** @return Collection<int, TaskType> */
+    public function getTypes(): Collection
+    {
+        return $this->types;
+    }
+
+    public function addType(TaskType $type): static
+    {
+        if (!$this->types->contains($type)) {
+            $this->types->add($type);
+        }
+
+        return $this;
+    }
+
+    public function removeType(TaskType $type): static
+    {
+        $this->types->removeElement($type);
+
+        return $this;
+    }
+}
+```
+
+Note : ajouter aussi `'task:read'` aux groups de `User.id` et `User.username` dans `src/Entity/User.php` pour que l'assignee soit sérialisé correctement :
+
+```php
+// Dans User.php, ajouter 'task:read' aux groups de id et username
+#[Groups(['me:read', 'task:read'])]
+private ?int $id = null;
+
+#[Groups(['me:read', 'task:read'])]
+private ?string $username = null;
+```
+
+**Step 3: Commit**
+
+```bash
+git add src/Entity/Task.php src/Repository/TaskRepository.php src/Entity/User.php
+git commit -m "feat : add Task entity with relations"
+```
+
+---
+
+### Task 1.7 : Migration + Fixtures
+
+**Step 1: Générer et exécuter la migration**
+
+```bash
+make shell
+# Dans le container :
+php bin/console doctrine:migrations:diff
+php bin/console doctrine:migrations:migrate --no-interaction
+exit
+```
+
+**Step 2: Mettre à jour les fixtures** dans `src/DataFixtures/AppFixtures.php`
+
+Ajouter après les projets existants :
+
+```php
+// --- TaskStatus (ordonnés par position) ---
+$statusTodo = new TaskStatus();
+$statusTodo->setLabel('A faire');
+$statusTodo->setColor('#1565C0');
+$statusTodo->setPosition(0);
+$manager->persist($statusTodo);
+
+$statusInProgress = new TaskStatus();
+$statusInProgress->setLabel('En cours');
+$statusInProgress->setColor('#6A6A6A');
+$statusInProgress->setPosition(1);
+$manager->persist($statusInProgress);
+
+$statusBlocked = new TaskStatus();
+$statusBlocked->setLabel('Bloqué');
+$statusBlocked->setColor('#1565C0');
+$statusBlocked->setPosition(2);
+$manager->persist($statusBlocked);
+
+$statusReview = new TaskStatus();
+$statusReview->setLabel('En attente de validation');
+$statusReview->setColor('#1565C0');
+$statusReview->setPosition(3);
+$manager->persist($statusReview);
+
+$statusDone = new TaskStatus();
+$statusDone->setLabel('Terminé');
+$statusDone->setColor('#1565C0');
+$statusDone->setPosition(4);
+$manager->persist($statusDone);
+
+// --- TaskEffort ---
+$effortS = new TaskEffort();
+$effortS->setLabel('S');
+$manager->persist($effortS);
+
+$effortM = new TaskEffort();
+$effortM->setLabel('M');
+$manager->persist($effortM);
+
+$effortL = new TaskEffort();
+$effortL->setLabel('L');
+$manager->persist($effortL);
+
+$effortXL = new TaskEffort();
+$effortXL->setLabel('XL');
+$manager->persist($effortXL);
+
+$effortXXL = new TaskEffort();
+$effortXXL->setLabel('XXL');
+$manager->persist($effortXXL);
+
+// --- TaskPriority ---
+$priorityLow = new TaskPriority();
+$priorityLow->setLabel('Basse');
+$priorityLow->setColor('#1565C0');
+$manager->persist($priorityLow);
+
+$priorityMedium = new TaskPriority();
+$priorityMedium->setLabel('Moyen');
+$priorityMedium->setColor('#FF8F00');
+$manager->persist($priorityMedium);
+
+$priorityHigh = new TaskPriority();
+$priorityHigh->setLabel('Haute');
+$priorityHigh->setColor('#C62828');
+$manager->persist($priorityHigh);
+
+// --- TaskType ---
+$typePassword = new TaskType();
+$typePassword->setLabel('Gestion mdp');
+$typePassword->setColor('#C62828');
+$manager->persist($typePassword);
+
+$typeAuth = new TaskType();
+$typeAuth->setLabel('Connexion');
+$typeAuth->setColor('#FF8F00');
+$manager->persist($typeAuth);
+
+$typeCalendar = new TaskType();
+$typeCalendar->setLabel('Calendrier');
+$typeCalendar->setColor('#1565C0');
+$manager->persist($typeCalendar);
+
+// --- TaskGroup (liés au projet SIRH) ---
+$groupFrontend = new TaskGroup();
+$groupFrontend->setTitle('Frontend');
+$groupFrontend->setColor('#4A90D9');
+$groupFrontend->setProject($projectSirh);
+$manager->persist($groupFrontend);
+
+$groupBackend = new TaskGroup();
+$groupBackend->setTitle('Backend');
+$groupBackend->setColor('#26A69A');
+$groupBackend->setProject($projectSirh);
+$manager->persist($groupBackend);
+
+// --- Tasks (projet SIRH) ---
+$task1 = new Task();
+$task1->setTitle('Création d\'une page de login');
+$task1->setDescription('Implémenter la page de connexion avec formulaire.');
+$task1->setStatus($statusTodo);
+$task1->setEffort($effortXXL);
+$task1->setPriority($priorityLow);
+$task1->setAssignee($admin);
+$task1->setGroup($groupFrontend);
+$task1->setProject($projectSirh);
+$task1->addType($typePassword);
+$manager->persist($task1);
+
+$task2 = new Task();
+$task2->setTitle('Création d\'une page de login');
+$task2->setDescription('Gérer la connexion OAuth.');
+$task2->setStatus($statusTodo);
+$task2->setEffort($effortL);
+$task2->setPriority($priorityHigh);
+$task2->setAssignee($admin);
+$task2->setGroup($groupFrontend);
+$task2->setProject($projectSirh);
+$task2->addType($typeAuth);
+$manager->persist($task2);
+
+$task3 = new Task();
+$task3->setTitle('Création d\'une page de login');
+$task3->setStatus($statusInProgress);
+$task3->setEffort($effortXXL);
+$task3->setPriority($priorityLow);
+$task3->setAssignee($admin);
+$task3->setGroup($groupBackend);
+$task3->setProject($projectSirh);
+$task3->addType($typePassword);
+$manager->persist($task3);
+
+$task4 = new Task();
+$task4->setTitle('Création d\'une page de login');
+$task4->setStatus($statusBlocked);
+$task4->setEffort($effortXXL);
+$task4->setPriority($priorityLow);
+$task4->setAssignee($admin);
+$task4->setProject($projectSirh);
+$task4->addType($typePassword);
+$manager->persist($task4);
+
+$task5 = new Task();
+$task5->setTitle('Création d\'une page de login');
+$task5->setStatus($statusReview);
+$task5->setEffort($effortXXL);
+$task5->setPriority($priorityMedium);
+$task5->setAssignee($admin);
+$task5->setProject($projectSirh);
+$task5->addType($typeCalendar);
+$manager->persist($task5);
+
+$task6 = new Task();
+$task6->setTitle('Création d\'une page de login');
+$task6->setStatus($statusDone);
+$task6->setEffort($effortXXL);
+$task6->setPriority($priorityHigh);
+$task6->setAssignee($admin);
+$task6->setProject($projectSirh);
+$task6->addType($typeAuth);
+$manager->persist($task6);
+```
+
+**Step 3: Recharger les fixtures**
+
+```bash
+make db-reset
+```
+
+**Step 4: Commit**
+
+```bash
+git add src/DataFixtures/AppFixtures.php migrations/
+git commit -m "feat : add task fixtures and migration"
+```
+
+---
+
+## Phase 2 : Frontend — Services & DTOs pour les entités de configuration
+
+### Task 2.1 : DTOs TypeScript
+
+**Files:**
+- Create: `frontend/services/dto/task-status.ts`
+- Create: `frontend/services/dto/task-effort.ts`
+- Create: `frontend/services/dto/task-priority.ts`
+- Create: `frontend/services/dto/task-type.ts`
+- Create: `frontend/services/dto/task-group.ts`
+- Create: `frontend/services/dto/task.ts`
+
+**Step 1: Créer tous les DTOs**
+
+```typescript
+// frontend/services/dto/task-status.ts
+export type TaskStatus = {
+    id: number
+    '@id'?: string
+    label: string
+    color: string
+    position: number
+}
+
+export type TaskStatusWrite = {
+    label: string
+    color: string
+    position: number
+}
+```
+
+```typescript
+// frontend/services/dto/task-effort.ts
+export type TaskEffort = {
+    id: number
+    '@id'?: string
+    label: string
+}
+
+export type TaskEffortWrite = {
+    label: string
+}
+```
+
+```typescript
+// frontend/services/dto/task-priority.ts
+export type TaskPriority = {
+    id: number
+    '@id'?: string
+    label: string
+    color: string
+}
+
+export type TaskPriorityWrite = {
+    label: string
+    color: string
+}
+```
+
+```typescript
+// frontend/services/dto/task-type.ts
+export type TaskType = {
+    id: number
+    '@id'?: string
+    label: string
+    color: string
+}
+
+export type TaskTypeWrite = {
+    label: string
+    color: string
+}
+```
+
+```typescript
+// frontend/services/dto/task-group.ts
+import type { Project } from './project'
+
+export type TaskGroup = {
+    id: number
+    '@id'?: string
+    title: string
+    description: string | null
+    color: string
+    project: Project | null
+}
+
+export type TaskGroupWrite = {
+    title: string
+    description: string | null
+    color: string
+    project: string // IRI
+}
+```
+
+```typescript
+// frontend/services/dto/task.ts
+import type { TaskStatus } from './task-status'
+import type { TaskEffort } from './task-effort'
+import type { TaskPriority } from './task-priority'
+import type { TaskType } from './task-type'
+import type { TaskGroup } from './task-group'
+import type { UserData } from './user-data'
+
+export type Task = {
+    id: number
+    '@id'?: string
+    title: string
+    description: string | null
+    status: TaskStatus | null
+    effort: TaskEffort | null
+    priority: TaskPriority | null
+    assignee: UserData | null
+    group: TaskGroup | null
+    types: TaskType[]
+}
+
+export type TaskWrite = {
+    title: string
+    description: string | null
+    status: string | null       // IRI
+    effort: string | null       // IRI
+    priority: string | null     // IRI
+    assignee: string | null     // IRI
+    group: string | null        // IRI
+    project: string             // IRI
+    types: string[]             // IRIs
+}
+```
+
+**Step 2: Commit**
+
+```bash
+git add frontend/services/dto/task-status.ts frontend/services/dto/task-effort.ts \
+  frontend/services/dto/task-priority.ts frontend/services/dto/task-type.ts \
+  frontend/services/dto/task-group.ts frontend/services/dto/task.ts
+git commit -m "feat : add task-related DTOs"
+```
+
+---
+
+### Task 2.2 : Services API
+
+**Files:**
+- Create: `frontend/services/task-statuses.ts`
+- Create: `frontend/services/task-efforts.ts`
+- Create: `frontend/services/task-priorities.ts`
+- Create: `frontend/services/task-types.ts`
+- Create: `frontend/services/task-groups.ts`
+- Create: `frontend/services/tasks.ts`
+
+Chaque service suit le pattern de `useClientService()` :
+
+```typescript
+// frontend/services/task-statuses.ts
+import type { TaskStatus, TaskStatusWrite } from './dto/task-status'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+export function useTaskStatusService() {
+    const api = useApi()
+
+    async function getAll(): Promise<TaskStatus[]> {
+        const data = await api.get<HydraCollection<TaskStatus>>('/task_statuses')
+        return extractHydraMembers(data)
+    }
+
+    async function create(payload: TaskStatusWrite): Promise<TaskStatus> {
+        return api.post<TaskStatus>('/task_statuses', payload as Record<string, unknown>, {
+            toastSuccessKey: 'taskStatuses.created',
+        })
+    }
+
+    async function update(id: number, payload: Partial<TaskStatusWrite>): Promise<TaskStatus> {
+        return api.patch<TaskStatus>(`/task_statuses/${id}`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'taskStatuses.updated',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/task_statuses/${id}`, {}, {
+            toastSuccessKey: 'taskStatuses.deleted',
+        })
+    }
+
+    return { getAll, create, update, remove }
+}
+```
+
+Reproduire ce pattern pour les 5 autres services :
+- `useTaskEffortService()` → `/task_efforts` → clé i18n `taskEfforts`
+- `useTaskPriorityService()` → `/task_priorities` → clé i18n `taskPriorities`
+- `useTaskTypeService()` → `/task_types` → clé i18n `taskTypes`
+- `useTaskGroupService()` → `/task_groups` → clé i18n `taskGroups`
+- `useTaskService()` → `/tasks` → clé i18n `tasks` (+ paramètre query `project` pour filtrer)
+
+Pour `tasks.ts` ajouter un `getByProject` :
+
+```typescript
+// frontend/services/tasks.ts
+import type { Task, TaskWrite } from './dto/task'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+export function useTaskService() {
+    const api = useApi()
+
+    async function getByProject(projectId: number): Promise<Task[]> {
+        const data = await api.get<HydraCollection<Task>>('/tasks', { project: `/api/projects/${projectId}` })
+        return extractHydraMembers(data)
+    }
+
+    async function create(payload: TaskWrite): Promise<Task> {
+        return api.post<Task>('/tasks', payload as Record<string, unknown>, {
+            toastSuccessKey: 'tasks.created',
+        })
+    }
+
+    async function update(id: number, payload: Partial<TaskWrite>): Promise<Task> {
+        return api.patch<Task>(`/tasks/${id}`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'tasks.updated',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/tasks/${id}`, {}, {
+            toastSuccessKey: 'tasks.deleted',
+        })
+    }
+
+    return { getByProject, create, update, remove }
+}
+```
+
+**Step 2: Commit**
+
+```bash
+git add frontend/services/task-statuses.ts frontend/services/task-efforts.ts \
+  frontend/services/task-priorities.ts frontend/services/task-types.ts \
+  frontend/services/task-groups.ts frontend/services/tasks.ts
+git commit -m "feat : add task-related API services"
+```
+
+---
+
+### Task 2.3 : Traductions i18n
+
+**File:** Modify `frontend/i18n/locales/fr.json`
+
+Ajouter les clés :
+
+```json
+{
+    "taskStatuses": {
+        "created": "Statut créé avec succès.",
+        "updated": "Statut mis à jour avec succès.",
+        "deleted": "Statut supprimé avec succès."
+    },
+    "taskEfforts": {
+        "created": "Effort créé avec succès.",
+        "updated": "Effort mis à jour avec succès.",
+        "deleted": "Effort supprimé avec succès."
+    },
+    "taskPriorities": {
+        "created": "Priorité créée avec succès.",
+        "updated": "Priorité mise à jour avec succès.",
+        "deleted": "Priorité supprimée avec succès."
+    },
+    "taskTypes": {
+        "created": "Type créé avec succès.",
+        "updated": "Type mis à jour avec succès.",
+        "deleted": "Type supprimé avec succès."
+    },
+    "taskGroups": {
+        "created": "Groupe créé avec succès.",
+        "updated": "Groupe mis à jour avec succès.",
+        "deleted": "Groupe supprimé avec succès."
+    },
+    "tasks": {
+        "created": "Ticket créé avec succès.",
+        "updated": "Ticket mis à jour avec succès.",
+        "deleted": "Ticket supprimé avec succès."
+    }
+}
+```
+
+**Step 2: Commit**
+
+```bash
+git add frontend/i18n/locales/fr.json
+git commit -m "feat : add i18n translations for task entities"
+```
+
+---
+
+## Phase 3 : Frontend — Page Admin (CRUD Status, Effort, Priorité, Type)
+
+### Task 3.1 : Page Admin avec onglets
+
+**Files:**
+- Create: `frontend/pages/admin.vue`
+
+La page affiche 4 onglets : **Statuts**, **Efforts**, **Priorités**, **Types**. Chaque onglet montre une liste avec bouton d'ajout et un drawer pour créer/modifier.
+
+**Step 1: Créer la page admin**
+
+```vue
+<template>
+    <div>
+        <h1 class="text-2xl font-bold text-neutral-900">Administration</h1>
+
+        <div class="mt-6 flex gap-2 border-b border-neutral-200">
+            <button
+                v-for="tab in tabs"
+                :key="tab.key"
+                class="px-4 py-2 text-sm font-semibold transition-colors"
+                :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>
+        </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'" />
+        </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' },
+]
+
+const activeTab = ref('statuses')
+</script>
+```
+
+**Step 2: Commit**
+
+```bash
+git add frontend/pages/admin.vue
+git commit -m "feat : add admin page with tabs"
+```
+
+---
+
+### Task 3.2 : Composant AdminStatusTab
+
+**Files:**
+- Create: `frontend/components/AdminStatusTab.vue`
+- Create: `frontend/components/TaskStatusDrawer.vue`
+
+**Step 1: Créer TaskStatusDrawer**
+
+```vue
+<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: '',
+    color: '#1565C0',
+    position: 0,
+})
+
+const touched = reactive({ label: false })
+
+watch(() => props.modelValue, (open) => {
+    if (open) {
+        if (props.item) {
+            form.label = props.item.label
+            form.color = props.item.color
+            form.position = props.item.position
+        } else {
+            form.label = ''
+            form.color = '#1565C0'
+            form.position = 0
+        }
+        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(),
+            color: form.color,
+            position: Number(form.position),
+        }
+
+        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>
+```
+
+**Step 2: Créer AdminStatusTab**
+
+```vue
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-semibold 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-4 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 w-20">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-5 w-5 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)"
+                            >
+                                <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(item: TaskStatus) {
+    await remove(item.id)
+    await loadItems()
+}
+
+async function onSaved() {
+    await loadItems()
+}
+
+onMounted(() => {
+    loadItems()
+})
+</script>
+```
+
+**Step 3: Commit**
+
+```bash
+git add frontend/components/AdminStatusTab.vue frontend/components/TaskStatusDrawer.vue
+git commit -m "feat : add admin status tab with drawer CRUD"
+```
+
+---
+
+### Task 3.3 : Composant AdminEffortTab
+
+**Files:**
+- Create: `frontend/components/AdminEffortTab.vue`
+- Create: `frontend/components/TaskEffortDrawer.vue`
+
+Même pattern que AdminStatusTab mais sans couleur ni position. Le drawer a juste un champ `label`. La table affiche juste `Libellé` et `Actions`.
+
+**Step 1: Commit**
+
+```bash
+git add frontend/components/AdminEffortTab.vue frontend/components/TaskEffortDrawer.vue
+git commit -m "feat : add admin effort tab with drawer CRUD"
+```
+
+---
+
+### Task 3.4 : Composant AdminPriorityTab
+
+**Files:**
+- Create: `frontend/components/AdminPriorityTab.vue`
+- Create: `frontend/components/TaskPriorityDrawer.vue`
+
+Même pattern que AdminStatusTab mais avec `label` + `color` (ColorPicker). Pas de position.
+
+**Step 1: Commit**
+
+```bash
+git add frontend/components/AdminPriorityTab.vue frontend/components/TaskPriorityDrawer.vue
+git commit -m "feat : add admin priority tab with drawer CRUD"
+```
+
+---
+
+### Task 3.5 : Composant AdminTypeTab
+
+**Files:**
+- Create: `frontend/components/AdminTypeTab.vue`
+- Create: `frontend/components/TaskTypeDrawer.vue`
+
+Identique à AdminPriorityTab : `label` + `color`.
+
+**Step 1: Commit**
+
+```bash
+git add frontend/components/AdminTypeTab.vue frontend/components/TaskTypeDrawer.vue
+git commit -m "feat : add admin type tab with drawer CRUD"
+```
+
+---
+
+### Task 3.6 : Ajouter le lien Admin dans la sidebar
+
+**File:** Modify `frontend/layouts/default.vue`
+
+Ajouter un nouveau `NuxtLink` après "Clients" dans la sidebar :
+
+```vue
+<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>
+```
+
+**Step 1: Commit**
+
+```bash
+git add frontend/layouts/default.vue
+git commit -m "feat : add Admin nav link in sidebar"
+```
+
+---
+
+## Phase 4 : Frontend — Page Projet (Kanban + Backlog)
+
+### Task 4.1 : Page projet dynamique
+
+**Files:**
+- Create: `frontend/pages/projects/[id].vue`
+
+Cette page affiche le board d'un projet. Elle charge : le projet, les tasks, les statuses, les groupes, les efforts, les priorités, les types, les users.
+
+```vue
+<template>
+    <div v-if="project">
+        <div class="flex items-center justify-between">
+            <h1 class="text-2xl font-bold text-neutral-900">{{ project.name }}</h1>
+            <div class="flex gap-3">
+                <button
+                    class="rounded-md bg-secondary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-600"
+                    @click="openGroupCreate"
+                >
+                    + Ajouter un groupe
+                </button>
+                <button
+                    class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
+                    @click="openTaskCreate"
+                >
+                    + Ajouter un ticket
+                </button>
+            </div>
+        </div>
+
+        <!-- Filtre groupe -->
+        <div class="mt-4">
+            <MalioSelect
+                v-model="selectedGroupId"
+                :options="groupOptions"
+                label=""
+                empty-option-label="Tous les groupes"
+                min-width="w-64"
+            />
+        </div>
+
+        <!-- Kanban -->
+        <div class="mt-6 flex gap-4 overflow-x-auto pb-4">
+            <div
+                v-for="status in statuses"
+                :key="status.id"
+                class="flex w-64 flex-shrink-0 flex-col rounded-lg border border-neutral-200"
+            >
+                <div
+                    class="rounded-t-lg px-4 py-3 text-sm font-bold text-white"
+                    :style="{ backgroundColor: status.color }"
+                >
+                    {{ status.label }}
+                </div>
+                <div class="flex flex-col gap-3 p-3">
+                    <TaskCard
+                        v-for="task in tasksByStatus(status.id)"
+                        :key="task.id"
+                        :task="task"
+                        @click="openTaskEdit(task)"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <!-- Backlog -->
+        <div class="mt-8">
+            <h2 class="text-lg font-bold text-neutral-900">Backlog</h2>
+            <div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
+                <div
+                    v-for="task in filteredTasks"
+                    :key="task.id"
+                    class="flex cursor-pointer items-center justify-between rounded-lg border border-neutral-200 bg-white px-4 py-3 hover:shadow-sm"
+                    @click="openTaskEdit(task)"
+                >
+                    <span class="font-semibold text-neutral-900">{{ task.title }}</span>
+                    <div class="flex items-center gap-2">
+                        <span
+                            v-for="type in task.types"
+                            :key="type.id"
+                            class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                            :style="{ backgroundColor: type.color }"
+                        >
+                            {{ type.label }}
+                        </span>
+                        <span
+                            v-if="task.priority"
+                            class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                            :style="{ backgroundColor: task.priority.color }"
+                        >
+                            {{ task.priority.label }}
+                        </span>
+                        <span v-if="task.effort" class="text-sm font-bold text-neutral-700">
+                            {{ task.effort.label }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Drawers -->
+        <TaskDrawer
+            v-model="taskDrawerOpen"
+            :task="selectedTask"
+            :project-id="project.id"
+            :statuses="statuses"
+            :efforts="efforts"
+            :priorities="priorities"
+            :types="types"
+            :groups="groups"
+            @saved="onSaved"
+        />
+        <TaskGroupDrawer
+            v-model="groupDrawerOpen"
+            :group="null"
+            :project-id="project.id"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Project } from '~/services/dto/project'
+import type { Task } from '~/services/dto/task'
+import type { TaskStatus } from '~/services/dto/task-status'
+import type { TaskEffort } from '~/services/dto/task-effort'
+import type { TaskPriority } from '~/services/dto/task-priority'
+import type { TaskType } from '~/services/dto/task-type'
+import type { TaskGroup } from '~/services/dto/task-group'
+import { useProjectService } from '~/services/projects'
+import { useTaskService } from '~/services/tasks'
+import { useTaskStatusService } from '~/services/task-statuses'
+import { useTaskEffortService } from '~/services/task-efforts'
+import { useTaskPriorityService } from '~/services/task-priorities'
+import { useTaskTypeService } from '~/services/task-types'
+import { useTaskGroupService } from '~/services/task-groups'
+
+const route = useRoute()
+const projectId = computed(() => Number(route.params.id))
+
+const project = ref<Project | null>(null)
+const tasks = ref<Task[]>([])
+const statuses = ref<TaskStatus[]>([])
+const efforts = ref<TaskEffort[]>([])
+const priorities = ref<TaskPriority[]>([])
+const types = ref<TaskType[]>([])
+const groups = ref<TaskGroup[]>([])
+
+const selectedGroupId = ref<number | null>(null)
+const taskDrawerOpen = ref(false)
+const groupDrawerOpen = ref(false)
+const selectedTask = ref<Task | null>(null)
+
+useHead({ title: computed(() => project.value?.name ?? 'Projet') })
+
+const groupOptions = computed(() =>
+    groups.value.map(g => ({ label: g.title, value: g.id }))
+)
+
+const filteredTasks = computed(() => {
+    if (!selectedGroupId.value) return tasks.value
+    return tasks.value.filter(t => t.group?.id === selectedGroupId.value)
+})
+
+function tasksByStatus(statusId: number): Task[] {
+    return filteredTasks.value.filter(t => t.status?.id === statusId)
+}
+
+function openTaskCreate() {
+    selectedTask.value = null
+    taskDrawerOpen.value = true
+}
+
+function openTaskEdit(task: Task) {
+    selectedTask.value = task
+    taskDrawerOpen.value = true
+}
+
+function openGroupCreate() {
+    groupDrawerOpen.value = true
+}
+
+async function loadData() {
+    const api = useApi()
+    const [p, t, s, e, pr, ty, g] = await Promise.all([
+        useProjectService().getById(projectId.value),
+        useTaskService().getByProject(projectId.value),
+        useTaskStatusService().getAll(),
+        useTaskEffortService().getAll(),
+        useTaskPriorityService().getAll(),
+        useTaskTypeService().getAll(),
+        useTaskGroupService().getByProject(projectId.value),
+    ])
+    project.value = p
+    tasks.value = t
+    statuses.value = s
+    efforts.value = e
+    priorities.value = pr
+    types.value = ty
+    groups.value = g
+}
+
+async function onSaved() {
+    await loadData()
+}
+
+onMounted(() => {
+    loadData()
+})
+</script>
+```
+
+Note : il faut ajouter `getById` dans `useProjectService()` :
+
+```typescript
+async function getById(id: number): Promise<Project> {
+    return api.get<Project>(`/projects/${id}`)
+}
+```
+
+Et `getByProject` dans `useTaskGroupService()` :
+
+```typescript
+async function getByProject(projectId: number): Promise<TaskGroup[]> {
+    const data = await api.get<HydraCollection<TaskGroup>>('/task_groups', { project: `/api/projects/${projectId}` })
+    return extractHydraMembers(data)
+}
+```
+
+**Step 2: Commit**
+
+```bash
+git add frontend/pages/projects/\[id\].vue frontend/services/projects.ts frontend/services/task-groups.ts
+git commit -m "feat : add project board page with kanban and backlog"
+```
+
+---
+
+### Task 4.2 : Composant TaskCard (carte Kanban)
+
+**Files:**
+- Create: `frontend/components/TaskCard.vue`
+
+```vue
+<template>
+    <div
+        class="cursor-pointer rounded-lg border border-neutral-200 bg-white p-3 shadow-sm hover:shadow-md transition"
+        @click="$emit('click')"
+    >
+        <div class="flex items-start justify-between">
+            <span class="text-sm font-semibold text-neutral-900">{{ task.title }}</span>
+            <button class="text-neutral-400 hover:text-neutral-600">
+                <Icon name="mdi:eye-outline" size="18" />
+            </button>
+        </div>
+        <div class="mt-2 flex flex-wrap items-center gap-1.5">
+            <span
+                v-if="task.priority"
+                class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                :style="{ backgroundColor: task.priority.color }"
+            >
+                {{ task.priority.label }}
+            </span>
+            <span
+                v-for="type in task.types"
+                :key="type.id"
+                class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                :style="{ backgroundColor: type.color }"
+            >
+                {{ type.label }}
+            </span>
+            <span v-if="task.effort" class="ml-auto text-xs font-bold text-neutral-600">
+                {{ task.effort.label }}
+            </span>
+            <span
+                v-if="task.assignee"
+                class="flex h-6 w-6 items-center justify-center rounded-full bg-neutral-300 text-xs font-bold text-white"
+            >
+                {{ task.assignee.username.charAt(0).toUpperCase() }}
+            </span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Task } from '~/services/dto/task'
+
+defineProps<{
+    task: Task
+}>()
+
+defineEmits<{
+    (e: 'click'): void
+}>()
+</script>
+```
+
+**Step 1: Commit**
+
+```bash
+git add frontend/components/TaskCard.vue
+git commit -m "feat : add TaskCard component for kanban"
+```
+
+---
+
+### Task 4.3 : Composant TaskDrawer (créer/modifier un ticket)
+
+**Files:**
+- Create: `frontend/components/TaskDrawer.vue`
+
+```vue
+<template>
+    <AppDrawer v-model="isOpen" :title="isEditing ? 'Modifier un ticket' : 'Ajouter un ticket'">
+        <form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
+            <MalioInputText
+                v-model="form.title"
+                label="Titre"
+                input-class="w-full"
+                :error="touched.title && !form.title.trim() ? 'Le titre est requis' : ''"
+                @blur="touched.title = true"
+            />
+            <MalioInputTextArea
+                v-model="form.description"
+                label="Description"
+                :size="3"
+            />
+            <MalioSelect
+                v-model="form.statusId"
+                :options="statusOptions"
+                label="Status"
+                empty-option-label="Aucun"
+                min-width="w-full"
+            />
+            <MalioSelect
+                v-model="form.effortId"
+                :options="effortOptions"
+                label="Effort"
+                empty-option-label="Aucun"
+                min-width="w-full"
+            />
+            <MalioSelect
+                v-model="form.priorityId"
+                :options="priorityOptions"
+                label="Priorité"
+                empty-option-label="Aucune"
+                min-width="w-full"
+            />
+            <MalioSelect
+                v-model="form.assigneeId"
+                :options="userOptions"
+                label="User"
+                empty-option-label="Aucun"
+                min-width="w-full"
+            />
+            <!-- Types : multi-select via checkboxes -->
+            <div>
+                <p class="mb-1 text-sm font-medium text-neutral-700">Type</p>
+                <div class="flex flex-wrap gap-2">
+                    <label
+                        v-for="type in types"
+                        :key="type.id"
+                        class="flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold cursor-pointer transition"
+                        :class="form.typeIds.includes(type.id)
+                            ? 'text-white border-transparent'
+                            : 'text-neutral-700 border-neutral-300 bg-white'"
+                        :style="form.typeIds.includes(type.id) ? { backgroundColor: type.color } : {}"
+                    >
+                        <input
+                            type="checkbox"
+                            :value="type.id"
+                            v-model="form.typeIds"
+                            class="hidden"
+                        />
+                        {{ type.label }}
+                    </label>
+                </div>
+            </div>
+            <MalioSelect
+                v-model="form.groupId"
+                :options="groupOptions"
+                label="Groupe"
+                empty-option-label="Aucun"
+                min-width="w-full"
+            />
+
+            <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 { Task, TaskWrite } from '~/services/dto/task'
+import type { TaskStatus } from '~/services/dto/task-status'
+import type { TaskEffort } from '~/services/dto/task-effort'
+import type { TaskPriority } from '~/services/dto/task-priority'
+import type { TaskType } from '~/services/dto/task-type'
+import type { TaskGroup } from '~/services/dto/task-group'
+import { useTaskService } from '~/services/tasks'
+
+const props = defineProps<{
+    modelValue: boolean
+    task: Task | null
+    projectId: number
+    statuses: TaskStatus[]
+    efforts: TaskEffort[]
+    priorities: TaskPriority[]
+    types: TaskType[]
+    groups: TaskGroup[]
+}>()
+
+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.task)
+const isSubmitting = ref(false)
+
+const form = reactive({
+    title: '',
+    description: '',
+    statusId: null as number | null,
+    effortId: null as number | null,
+    priorityId: null as number | null,
+    assigneeId: null as number | null,
+    groupId: null as number | null,
+    typeIds: [] as number[],
+})
+
+const touched = reactive({ title: false })
+
+// Note : pour la liste des users, on pourrait ajouter un endpoint /users
+// Pour l'instant on n'a que l'admin, on laissera le select vide ou on ajoutera plus tard
+const userOptions = computed(() => [] as { label: string; value: number }[])
+
+const statusOptions = computed(() => props.statuses.map(s => ({ label: s.label, value: s.id })))
+const effortOptions = computed(() => props.efforts.map(e => ({ label: e.label, value: e.id })))
+const priorityOptions = computed(() => props.priorities.map(p => ({ label: p.label, value: p.id })))
+const groupOptions = computed(() => props.groups.map(g => ({ label: g.title, value: g.id })))
+
+watch(() => props.modelValue, (open) => {
+    if (open) {
+        if (props.task) {
+            form.title = props.task.title ?? ''
+            form.description = props.task.description ?? ''
+            form.statusId = props.task.status?.id ?? null
+            form.effortId = props.task.effort?.id ?? null
+            form.priorityId = props.task.priority?.id ?? null
+            form.assigneeId = props.task.assignee?.id ?? null
+            form.groupId = props.task.group?.id ?? null
+            form.typeIds = props.task.types.map(t => t.id)
+        } else {
+            form.title = ''
+            form.description = ''
+            form.statusId = null
+            form.effortId = null
+            form.priorityId = null
+            form.assigneeId = null
+            form.groupId = null
+            form.typeIds = []
+        }
+        touched.title = false
+    }
+})
+
+const { create, update } = useTaskService()
+
+async function handleSubmit() {
+    touched.title = true
+    if (!form.title.trim()) return
+
+    isSubmitting.value = true
+    try {
+        const payload: TaskWrite = {
+            title: form.title.trim(),
+            description: form.description.trim() || null,
+            status: form.statusId ? `/api/task_statuses/${form.statusId}` : null,
+            effort: form.effortId ? `/api/task_efforts/${form.effortId}` : null,
+            priority: form.priorityId ? `/api/task_priorities/${form.priorityId}` : null,
+            assignee: form.assigneeId ? `/api/users/${form.assigneeId}` : null,
+            group: form.groupId ? `/api/task_groups/${form.groupId}` : null,
+            project: `/api/projects/${props.projectId}`,
+            types: form.typeIds.map(id => `/api/task_types/${id}`),
+        }
+
+        if (isEditing.value && props.task) {
+            await update(props.task.id, payload)
+        } else {
+            await create(payload)
+        }
+
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+</script>
+```
+
+**Step 1: Commit**
+
+```bash
+git add frontend/components/TaskDrawer.vue
+git commit -m "feat : add TaskDrawer component for ticket create/edit"
+```
+
+---
+
+### Task 4.4 : Composant TaskGroupDrawer
+
+**Files:**
+- Create: `frontend/components/TaskGroupDrawer.vue`
+
+```vue
+<template>
+    <AppDrawer v-model="isOpen" :title="isEditing ? 'Modifier un groupe' : 'Ajouter un groupe'">
+        <form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
+            <MalioInputText
+                v-model="form.title"
+                label="Titre"
+                input-class="w-full"
+                :error="touched.title && !form.title.trim() ? 'Le titre est requis' : ''"
+                @blur="touched.title = true"
+            />
+            <MalioInputTextArea
+                v-model="form.description"
+                label="Description"
+                :size="3"
+            />
+            <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 { TaskGroup, TaskGroupWrite } from '~/services/dto/task-group'
+import { useTaskGroupService } from '~/services/task-groups'
+
+const props = defineProps<{
+    modelValue: boolean
+    group: TaskGroup | null
+    projectId: number
+}>()
+
+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.group)
+const isSubmitting = ref(false)
+
+const form = reactive({
+    title: '',
+    description: '',
+    color: '#222783',
+})
+
+const touched = reactive({ title: false })
+
+watch(() => props.modelValue, (open) => {
+    if (open) {
+        if (props.group) {
+            form.title = props.group.title
+            form.description = props.group.description ?? ''
+            form.color = props.group.color
+        } else {
+            form.title = ''
+            form.description = ''
+            form.color = '#222783'
+        }
+        touched.title = false
+    }
+})
+
+const { create, update } = useTaskGroupService()
+
+async function handleSubmit() {
+    touched.title = true
+    if (!form.title.trim()) return
+
+    isSubmitting.value = true
+    try {
+        const payload: TaskGroupWrite = {
+            title: form.title.trim(),
+            description: form.description.trim() || null,
+            color: form.color,
+            project: `/api/projects/${props.projectId}`,
+        }
+
+        if (isEditing.value && props.group) {
+            await update(props.group.id, payload)
+        } else {
+            await create(payload)
+        }
+
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+</script>
+```
+
+**Step 1: Commit**
+
+```bash
+git add frontend/components/TaskGroupDrawer.vue
+git commit -m "feat : add TaskGroupDrawer component"
+```
+
+---
+
+### Task 4.5 : Navigation projet → board
+
+**File:** Modify `frontend/pages/projects.vue`
+
+Changer le clic sur une carte projet pour naviguer vers le board au lieu d'ouvrir le drawer d'édition. Ajouter un bouton d'édition séparé sur la carte.
+
+Remplacer le `@click="openEdit(project)"` sur la carte par `@click="navigateTo(`/projects/${project.id}`)"`.
+
+Garder le bouton edit avec un `@click.stop="openEdit(project)"` sur un petit bouton icon dans la carte.
+
+**Step 1: Commit**
+
+```bash
+git add frontend/pages/projects.vue
+git commit -m "feat : navigate to project board on card click"
+```
+
+---
+
+## Phase 5 : Vérification finale
+
+### Task 5.1 : Vérification
+
+**Step 1:** Lancer `make db-reset` pour vérifier les fixtures
+
+**Step 2:** Lancer `make dev-nuxt` et vérifier :
+- Page admin accessible, CRUD status/effort/priorité/type fonctionnels
+- Clic sur un projet → board avec kanban + backlog
+- Filtre par groupe fonctionne
+- Création de ticket via drawer
+- Création de groupe via drawer
+
+**Step 3:** Lancer `make php-cs-fixer-allow-risky` pour fixer le code style PHP
+
+**Step 4: Commit final**
+
+```bash
+git add -A
+git commit -m "fix : code style and final adjustments"
+```
+
+---
+
+## Résumé des fichiers
+
+### Backend (à créer)
+| Fichier | Description |
+|---------|-------------|
+| `src/Entity/TaskStatus.php` | Entité statut (label, color, position) |
+| `src/Entity/TaskEffort.php` | Entité effort (label) |
+| `src/Entity/TaskPriority.php` | Entité priorité (label, color) |
+| `src/Entity/TaskType.php` | Entité type (label, color) |
+| `src/Entity/TaskGroup.php` | Entité groupe (title, description, color, project) |
+| `src/Entity/Task.php` | Entité tâche (title, desc, relations) |
+| `src/Repository/TaskStatus…Repository.php` | 6 repositories |
+
+### Backend (à modifier)
+| Fichier | Modification |
+|---------|-------------|
+| `src/Entity/User.php` | Ajouter group `task:read` sur id et username |
+| `src/DataFixtures/AppFixtures.php` | Ajouter fixtures pour toutes les nouvelles entités |
+
+### Frontend (à créer)
+| Fichier | Description |
+|---------|-------------|
+| `frontend/services/dto/task-status.ts` | DTO TaskStatus |
+| `frontend/services/dto/task-effort.ts` | DTO TaskEffort |
+| `frontend/services/dto/task-priority.ts` | DTO TaskPriority |
+| `frontend/services/dto/task-type.ts` | DTO TaskType |
+| `frontend/services/dto/task-group.ts` | DTO TaskGroup |
+| `frontend/services/dto/task.ts` | DTO Task |
+| `frontend/services/task-statuses.ts` | Service API statuts |
+| `frontend/services/task-efforts.ts` | Service API efforts |
+| `frontend/services/task-priorities.ts` | Service API priorités |
+| `frontend/services/task-types.ts` | Service API types |
+| `frontend/services/task-groups.ts` | Service API groupes |
+| `frontend/services/tasks.ts` | Service API tâches |
+| `frontend/pages/admin.vue` | Page admin avec onglets |
+| `frontend/pages/projects/[id].vue` | Page board projet (kanban + backlog) |
+| `frontend/components/AdminStatusTab.vue` | Tab CRUD statuts |
+| `frontend/components/AdminEffortTab.vue` | Tab CRUD efforts |
+| `frontend/components/AdminPriorityTab.vue` | Tab CRUD priorités |
+| `frontend/components/AdminTypeTab.vue` | Tab CRUD types |
+| `frontend/components/TaskStatusDrawer.vue` | Drawer statut |
+| `frontend/components/TaskEffortDrawer.vue` | Drawer effort |
+| `frontend/components/TaskPriorityDrawer.vue` | Drawer priorité |
+| `frontend/components/TaskTypeDrawer.vue` | Drawer type |
+| `frontend/components/TaskCard.vue` | Carte kanban |
+| `frontend/components/TaskDrawer.vue` | Drawer ticket |
+| `frontend/components/TaskGroupDrawer.vue` | Drawer groupe |
+
+### Frontend (à modifier)
+| Fichier | Modification |
+|---------|-------------|
+| `frontend/i18n/locales/fr.json` | Ajouter traductions task* |
+| `frontend/layouts/default.vue` | Ajouter lien Admin sidebar |
+| `frontend/pages/projects.vue` | Naviguer vers board au clic |
+| `frontend/services/projects.ts` | Ajouter `getById()` |
diff --git a/src/State/MeProvider.php b/src/State/MeProvider.php
index 221a3e6..f2866a7 100644
--- a/src/State/MeProvider.php
+++ b/src/State/MeProvider.php
@@ -20,7 +20,7 @@ final readonly class MeProvider implements ProviderInterface
 
     public function provide(Operation $operation, array $uriVariables = [], array $context = []): User
     {
-        /** @var User $user */
+        // @var User $user
         return $this->security->getUser();
     }
 }