docs : add time tracking design spec

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.env

@@ -1,24 +1,23 @@
-###> symfony/framework-bundle ###
 APP_ENV=dev
-APP_SECRET=
-APP_SHARE_DIR=var/share
-###< symfony/framework-bundle ###
+APP_SECRET="a64f5614357bf56aecb1d7470e431535"
+APP_DEBUG=1
 
-###> symfony/routing ###
-# Configure how to generate URLs in non-HTTP contexts, such as CLI commands.
-# See https://symfony.com/doc/current/routing.html#generating-urls-in-commands
-DEFAULT_URI=http://localhost
-###< symfony/routing ###
+DEFAULT_URI=http://localhost/
 
 ###> nelmio/cors-bundle ###
-CORS_ALLOW_ORIGIN='^https?://(localhost|127\.0\.0\.1)(:[0-9]+)?$'
+CORS_ALLOW_ORIGIN='^https?://(localhost|127.0.0.1)(:[0-9]+)?$'
 ###< nelmio/cors-bundle ###
 
 ###> lexik/jwt-authentication-bundle ###
 JWT_SECRET_KEY=%kernel.project_dir%/config/jwt/private.pem
 JWT_PUBLIC_KEY=%kernel.project_dir%/config/jwt/public.pem
-JWT_PASSPHRASE=
+JWT_PASSPHRASE=c2dbeec8fa8255bdab24e88b9fc1e57927740c429ae3b930d03e51b92e13a85f
 JWT_COOKIE_SECURE=0
 JWT_TOKEN_TTL=86400
 JWT_COOKIE_TTL=86400
 ###< lexik/jwt-authentication-bundle ###
+
+
+DATABASE_URL="postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@db:${POSTGRES_PORT}/${POSTGRES_DB}?serverVersion=16&charset=utf8"
+
+ENCRYPTION_KEY=aaaaaaaaa

CLAUDE.md

@@ -12,22 +12,23 @@ Application de gestion de projet. Monorepo Symfony 8 (API Platform 4) + Nuxt 4.
 ## Structure
 
 ```
-src/Entity/          # Entités Doctrine (User, Client, Project, Task, TaskStatus, TaskEffort, TaskPriority, TaskType, TaskGroup)
+src/Entity/          # Entités Doctrine (User, Client, Project, Task, TaskStatus, TaskEffort, TaskPriority, TaskTag, TaskGroup, TimeEntry, GiteaConfiguration)
 src/ApiResource/     # Ressources API Platform (si découplées des entités)
-src/State/           # Providers et Processors API Platform (MeProvider, AppVersionProvider, UserPasswordHasherProcessor)
+src/State/           # Providers et Processors API Platform (MeProvider, AppVersionProvider, ActiveTimeEntryProvider, UserPasswordHasherProcessor, TaskNumberProcessor, Gitea*Provider, Gitea*Processor)
 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
+docs/superpowers/    # Plans et specs superpowers
 frontend/            # App Nuxt 4
-frontend/pages/      # Pages (index, login, clients, projects, projects/[id], admin)
+frontend/pages/      # Pages (index, login, my-tasks, projects, projects/[id], projects/[id]/groups, projects/[id]/archives, time-tracking, admin)
 frontend/layouts/    # Layouts (pas "layout")
-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, clients, projects, tasks, task-statuses, etc.)
+frontend/components/ # Composants Vue organisés en sous-dossiers (ui/, client/, project/, task/, user/, admin/, time-tracking/)
+frontend/composables/# Composables (useApi, useAppVersion)
+frontend/stores/     # Stores Pinia (auth, ui, timer)
+frontend/services/   # Services API (auth, clients, gitea, projects, tasks, task-statuses, task-efforts, task-groups, task-priorities, task-tags, users, time-entries)
 frontend/services/dto/ # Types TypeScript
 frontend/i18n/locales/ # Fichiers de traduction (langDir résolu depuis i18n/)
 ```
@@ -36,10 +37,14 @@ frontend/i18n/locales/ # Fichiers de traduction (langDir résolu depuis i18n/)
 
 ```bash
 make start           # Démarrer les containers
+make stop            # Arrêter les containers
+make restart         # Redémarrer les containers
 make install         # Install complet (composer, migrations, fixtures, build Nuxt)
 make reset           # Tout supprimer et réinstaller (supprime la BDD)
 make dev-nuxt        # Dev server Nuxt (hot reload, port 3002)
 make shell           # Shell dans le container PHP
+make shell-root      # Shell root dans le container PHP
+make cache-clear     # Vider le cache Symfony
 make migration-migrate # Lancer les migrations
 make fixtures        # Charger les fixtures
 make db-reset        # Reset BDD + migrations + fixtures
@@ -70,7 +75,7 @@ Exemples : `feat : add login page`, `fix(auth) : prevent null token crash`
 
 - TypeScript strict
 - Composable `useApi()` pour tous les appels API (gère cookies, erreurs, toasts, i18n)
-- Store Pinia pour l'auth (`useAuthStore`)
+- Stores Pinia : `useAuthStore` (auth), `useUiStore` (ui), `useTimerStore` (timer)
 - Middleware global `auth.global.ts` protège les routes
 - Traductions dans `frontend/i18n/locales/` (le module résout `langDir` depuis `i18n/`)
 - 4 espaces d'indentation

composer.json

@@ -22,6 +22,7 @@
         "symfony/expression-language": "8.0.*",
         "symfony/flex": "^2",
         "symfony/framework-bundle": "8.0.*",
+        "symfony/http-client": "8.0.*",
         "symfony/property-access": "8.0.*",
         "symfony/property-info": "8.0.*",
         "symfony/runtime": "8.0.*",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "9482fc27494f618b2bae1b7f250e8326",
+    "content-hash": "4790d8c80c0fb208e5af11fb205c0202",
     "packages": [
         {
             "name": "api-platform/doctrine-common",
@@ -4618,6 +4618,180 @@
             ],
             "time": "2026-03-06T15:40:00+00:00"
         },
+        {
+            "name": "symfony/http-client",
+            "version": "v8.0.7",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/http-client.git",
+                "reference": "ade9bd433450382f0af154661fc8e72758b4de36"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/http-client/zipball/ade9bd433450382f0af154661fc8e72758b4de36",
+                "reference": "ade9bd433450382f0af154661fc8e72758b4de36",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.4",
+                "psr/log": "^1|^2|^3",
+                "symfony/http-client-contracts": "~3.4.4|^3.5.2",
+                "symfony/service-contracts": "^2.5|^3"
+            },
+            "conflict": {
+                "amphp/amp": "<3",
+                "php-http/discovery": "<1.15"
+            },
+            "provide": {
+                "php-http/async-client-implementation": "*",
+                "php-http/client-implementation": "*",
+                "psr/http-client-implementation": "1.0",
+                "symfony/http-client-implementation": "3.0"
+            },
+            "require-dev": {
+                "amphp/http-client": "^5.3.2",
+                "amphp/http-tunnel": "^2.0",
+                "guzzlehttp/promises": "^1.4|^2.0",
+                "nyholm/psr7": "^1.0",
+                "php-http/httplug": "^1.0|^2.0",
+                "psr/http-client": "^1.0",
+                "symfony/cache": "^7.4|^8.0",
+                "symfony/dependency-injection": "^7.4|^8.0",
+                "symfony/http-kernel": "^7.4|^8.0",
+                "symfony/messenger": "^7.4|^8.0",
+                "symfony/process": "^7.4|^8.0",
+                "symfony/rate-limiter": "^7.4|^8.0",
+                "symfony/stopwatch": "^7.4|^8.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\HttpClient\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides powerful methods to fetch HTTP resources synchronously or asynchronously",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "http"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/http-client/tree/v8.0.7"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2026-03-06T13:17:40+00:00"
+        },
+        {
+            "name": "symfony/http-client-contracts",
+            "version": "v3.6.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/http-client-contracts.git",
+                "reference": "75d7043853a42837e68111812f4d964b01e5101c"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/http-client-contracts/zipball/75d7043853a42837e68111812f4d964b01e5101c",
+                "reference": "75d7043853a42837e68111812f4d964b01e5101c",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/contracts",
+                    "name": "symfony/contracts"
+                },
+                "branch-alias": {
+                    "dev-main": "3.6-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Contracts\\HttpClient\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Test/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Generic abstractions related to HTTP clients",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "abstractions",
+                "contracts",
+                "decoupling",
+                "interfaces",
+                "interoperability",
+                "standards"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/http-client-contracts/tree/v3.6.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-04-29T11:18:49+00:00"
+        },
         {
             "name": "symfony/http-foundation",
             "version": "v8.0.7",

config/reference.php

@@ -467,7 +467,7 @@ use Symfony\Component\Config\Loader\ParamConfigurator as Param;
  *     },
  *     disallow_search_engine_index?: bool|Param, // Enabled by default when debug is enabled. // Default: true
  *     http_client?: bool|array{ // HTTP Client configuration
- *         enabled?: bool|Param, // Default: false
+ *         enabled?: bool|Param, // Default: true
  *         max_host_connections?: int|Param, // The maximum number of connections to a single host.
  *         default_options?: array{
  *             headers?: array<string, mixed>,

config/services.yaml

@@ -7,6 +7,7 @@
 # Put parameters here that don't need to change on each machine where the app is deployed
 # https://symfony.com/doc/current/best_practices.html#use-parameters-for-application-configuration
 parameters:
+    task_document_upload_dir: '%kernel.project_dir%/var/uploads/documents'
 
 imports:
     - { resource: version.yaml }
@@ -24,3 +25,17 @@ services:
 
     # add more service definitions when explicit configuration is needed
     # please note that last definitions always *replace* previous ones
+
+    App\EventListener\TaskDocumentListener:
+        arguments:
+            $uploadDir: '%task_document_upload_dir%'
+        tags:
+            - { name: doctrine.orm.entity_listener }
+
+    App\State\TaskDocumentProcessor:
+        arguments:
+            $uploadDir: '%task_document_upload_dir%'
+
+    App\Controller\TaskDocumentDownloadController:
+        arguments:
+            $uploadDir: '%task_document_upload_dir%'

docker-compose.yml

@@ -24,6 +24,7 @@ services:
       - ./docker/php/config/php.ini:/usr/local/etc/php/php.ini
       - ./docker/php/config/docker-php-ext-xdebug.ini:/usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
       - ./LOG:/var/www/html/LOG
+      - uploads_data:/var/www/html/var/uploads
     extra_hosts:
       - "host.docker.internal:host-gateway"
     depends_on:
@@ -56,3 +57,4 @@ services:
     restart: unless-stopped
 volumes:
   pg_data:
+  uploads_data:

docker/nginx/conf.d/lesstime.conf

@@ -5,6 +5,8 @@ server {
     root /var/www/html/frontend/dist;
     index index.html;
 
+    client_max_body_size 55m;
+
     location ^~ /api/ {
         root /var/www/html/public;
         try_files $uri /index.php?$query_string;

docker/php/config/php.ini

@@ -1,4 +1,8 @@
 [Date]
 ; Defines the default timezone used by the date functions
 ; http://php.net/date.timezone
-date.timezone = Europe/Paris
+date.timezone = Europe/Paris
+
+[Upload]
+upload_max_filesize = 50M
+post_max_size = 55M

docs/plans/2026-03-12-admin-clients-global-statuses.md

@@ -0,0 +1,816 @@
+# Admin Clients + Global Statuses Implementation Plan
+
+> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Move clients management into the admin page as a tab, and make task statuses global (shared across all projects) instead of per-project.
+
+**Architecture:** Two independent changes: (1) Extract client CRUD from its dedicated page into an `AdminClientTab` component inside the admin page, remove the standalone `/clients` page and sidebar link. (2) Remove the `project` relationship from `TaskStatus` entity, update the frontend to use `getAll()` everywhere instead of `getByProject()`, remove per-project status management pages/links, and update `AdminStatusTab` + `TaskStatusDrawer` to work without `projectId`.
+
+**Tech Stack:** PHP 8.4 / Symfony 8 / Doctrine ORM (backend), Nuxt 4 / Vue 3 / TypeScript (frontend)
+
+---
+
+## Chunk 1: Move Clients into Admin
+
+### Task 1: Create AdminClientTab component
+
+**Files:**
+- Create: `frontend/components/admin/AdminClientTab.vue`
+
+- [ ] **Step 1: Create AdminClientTab.vue**
+
+Extract the logic from `frontend/pages/clients.vue` into a new admin tab component, following the same pattern as `AdminPriorityTab.vue` (h2 title instead of h1, no `useHead`).
+
+```vue
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">Clients</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 client
+            </button>
+        </div>
+
+        <DataTable
+            :columns="columns"
+            :items="clients"
+            :loading="isLoading"
+            empty-message="Aucun client trouvé."
+            deletable
+            @row-click="openEdit"
+            @delete="(item) => handleDelete(item.id)"
+        >
+            <template #cell-email="{ item }">
+                {{ item.email ?? '-' }}
+            </template>
+            <template #cell-address="{ item }">
+                {{ formatAddress(item) }}
+            </template>
+            <template #cell-phone="{ item }">
+                {{ item.phone ?? '-' }}
+            </template>
+        </DataTable>
+
+        <ClientDrawer
+            v-model="drawerOpen"
+            :client="selectedClient"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Client } from '~/services/dto/client'
+import { useClientService } from '~/services/clients'
+
+import type { DataTableColumn } from '~/components/ui/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'name', label: 'Nom', primary: true },
+    { key: 'email', label: 'Email', class: 'text-primary-500' },
+    { key: 'address', label: 'Adresse', class: 'text-neutral-700' },
+    { key: 'phone', label: 'Téléphone', class: 'text-primary-500' },
+]
+
+const { getAll, remove } = 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 handleDelete(id: number) {
+    await remove(id)
+    await loadClients()
+}
+
+async function onSaved() {
+    await loadClients()
+}
+
+onMounted(() => {
+    loadClients()
+})
+</script>
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add frontend/components/admin/AdminClientTab.vue
+git commit -m "feat(admin) : add AdminClientTab component"
+```
+
+### Task 2: Add Clients tab to admin page and remove standalone page
+
+**Files:**
+- Modify: `frontend/pages/admin.vue`
+- Delete: `frontend/pages/clients.vue`
+
+- [ ] **Step 3: Update admin.vue to include Clients tab**
+
+Add `AdminClientTab` to the admin page. Add the tab entry to the `tabs` array and the corresponding `v-if` block:
+
+In `frontend/pages/admin.vue`, update the `tabs` array:
+
+```typescript
+const tabs = [
+    { key: 'clients', label: 'Clients' },
+    { key: 'efforts', label: 'Efforts' },
+    { key: 'priorities', label: 'Priorités' },
+    { key: 'types', label: 'Types' },
+    { key: 'users', label: 'Utilisateurs' },
+] as const
+```
+
+Change the default active tab:
+
+```typescript
+const activeTab = ref<TabKey>('clients')
+```
+
+Add the component in the template `<div class="mt-6">` block:
+
+```html
+<AdminClientTab v-if="activeTab === 'clients'" />
+```
+
+- [ ] **Step 4: Delete standalone clients page**
+
+Delete `frontend/pages/clients.vue`.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add frontend/pages/admin.vue
+git rm frontend/pages/clients.vue
+git commit -m "feat(admin) : move clients into admin page, remove standalone page"
+```
+
+### Task 3: Remove clients sidebar link
+
+**Files:**
+- Modify: `frontend/layouts/default.vue`
+
+- [ ] **Step 6: Remove the Clients SidebarLink from default.vue**
+
+Remove the following block from `frontend/layouts/default.vue` (lines 60-65):
+
+```html
+                    <SidebarLink
+                        to="/clients"
+                        icon="mdi:account-group-outline"
+                        label="Clients"
+                        :collapsed="ui.sidebarCollapsed"
+                    />
+```
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add frontend/layouts/default.vue
+git commit -m "refactor(frontend) : remove clients sidebar link"
+```
+
+---
+
+## Chunk 2: Make Task Statuses Global
+
+### Task 4: Remove project relationship from TaskStatus entity
+
+**Files:**
+- Modify: `src/Entity/TaskStatus.php`
+
+- [ ] **Step 8: Update TaskStatus entity to remove project relationship**
+
+In `src/Entity/TaskStatus.php`:
+
+1. Remove the `SearchFilter` import and `#[ApiFilter]` attribute
+2. Remove the `$project` property, its `#[ORM]` annotations, and the `getProject()`/`setProject()` methods
+
+The entity should become:
+
+```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]
+    #[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 9: Commit**
+
+```bash
+git add src/Entity/TaskStatus.php
+git commit -m "refactor(backend) : remove project relationship from TaskStatus entity"
+```
+
+### Task 5: Generate and run Doctrine migration
+
+- [ ] **Step 10: Generate the migration**
+
+```bash
+make shell
+# Inside container:
+php bin/console doctrine:migrations:diff
+exit
+```
+
+This should generate a migration that:
+- Drops the `project_id` foreign key from `task_status` table
+- Drops the `project_id` column from `task_status` table
+
+- [ ] **Step 11: Review the migration**
+
+Read the generated migration file in `migrations/` to verify it only drops the FK and column.
+
+- [ ] **Step 12: Reset database (since structure changed significantly)**
+
+```bash
+make db-reset
+```
+
+- [ ] **Step 13: Commit**
+
+```bash
+git add migrations/
+git commit -m "feat(backend) : add migration to remove project_id from task_status"
+```
+
+### Task 6: Update fixtures for global statuses
+
+**Files:**
+- Modify: `src/DataFixtures/AppFixtures.php`
+
+- [ ] **Step 14: Update fixtures to create global statuses instead of per-project**
+
+In `src/DataFixtures/AppFixtures.php`, replace the entire per-project status block (lines 95-124, from `// Task Statuses (per project)` through `$statusDone = $sirhStatuses['Terminé'];`) with global creation:
+
+```php
+        // Task Statuses (global)
+        $defaultStatuses = [
+            ['A faire', '#222783', 0],
+            ['En cours', '#4A90D9', 1],
+            ['Bloqué', '#C62828', 2],
+            ['En attente de validation', '#FF8F00', 3],
+            ['Terminé', '#26A69A', 4],
+        ];
+
+        $statusObjects = [];
+        foreach ($defaultStatuses as [$label, $color, $position]) {
+            $status = new TaskStatus();
+            $status->setLabel($label);
+            $status->setColor($color);
+            $status->setPosition($position);
+            $manager->persist($status);
+            $statusObjects[$label] = $status;
+        }
+
+        $statusTodo       = $statusObjects['A faire'];
+        $statusInProgress = $statusObjects['En cours'];
+        $statusBlocked    = $statusObjects['Bloqué'];
+        $statusReview     = $statusObjects['En attente de validation'];
+        $statusDone       = $statusObjects['Terminé'];
+```
+
+This replaces the loop that created statuses per-project AND the `$statusesByProject` / `$sirhStatuses` extraction lines (95-124). The task variable references (`$statusTodo`, etc.) remain identical so downstream task creation is unchanged.
+
+- [ ] **Step 15: Reload fixtures to verify**
+
+```bash
+make db-reset
+```
+
+- [ ] **Step 16: Commit**
+
+```bash
+git add src/DataFixtures/AppFixtures.php
+git commit -m "fix(fixtures) : create global statuses instead of per-project"
+```
+
+### Task 7: Update frontend DTO and service for global statuses
+
+**Files:**
+- Modify: `frontend/services/dto/task-status.ts`
+- Modify: `frontend/services/task-statuses.ts`
+
+- [ ] **Step 17: Update TaskStatus DTO to remove project field**
+
+In `frontend/services/dto/task-status.ts`, remove the `project` import and field from both types:
+
+```typescript
+export type TaskStatus = {
+    id: number
+    '@id'?: string
+    label: string
+    color: string
+    position: number
+}
+
+export type TaskStatusWrite = {
+    label: string
+    color: string
+    position: number
+}
+```
+
+- [ ] **Step 18: Remove getByProject from task-statuses service**
+
+In `frontend/services/task-statuses.ts`, remove the `getByProject` function and its return:
+
+```typescript
+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 }
+}
+```
+
+- [ ] **Step 19: Commit**
+
+```bash
+git add frontend/services/dto/task-status.ts frontend/services/task-statuses.ts
+git commit -m "refactor(frontend) : remove project from TaskStatus DTO and service"
+```
+
+### Task 8: Update TaskStatusDrawer to remove projectId
+
+**Files:**
+- Modify: `frontend/components/task/TaskStatusDrawer.vue`
+
+- [ ] **Step 20: Remove projectId prop from TaskStatusDrawer**
+
+In `frontend/components/task/TaskStatusDrawer.vue`:
+
+1. Remove `projectId` from props:
+
+```typescript
+const props = defineProps<{
+    modelValue: boolean
+    item: TaskStatus | null
+}>()
+```
+
+2. Remove the `project` field from the payload in `handleSubmit`:
+
+```typescript
+        const payload: TaskStatusWrite = {
+            label: form.label.trim(),
+            position: Number(form.position),
+            color: form.color,
+        }
+```
+
+- [ ] **Step 21: Commit**
+
+```bash
+git add frontend/components/task/TaskStatusDrawer.vue
+git commit -m "refactor(frontend) : remove projectId from TaskStatusDrawer"
+```
+
+### Task 9: Add getAll to task service and update AdminStatusTab
+
+**Files:**
+- Modify: `frontend/services/tasks.ts`
+- Modify: `frontend/components/admin/AdminStatusTab.vue`
+
+- [ ] **Step 22: Add getAll() method to task service**
+
+`frontend/services/tasks.ts` currently only has `getByProject()`. Add a `getAll` function (needed by AdminStatusTab to check all tasks across projects when deleting a status).
+
+Add this function inside `useTaskService()`, before `getByProject`:
+
+```typescript
+    async function getAll(): Promise<Task[]> {
+        const data = await api.get<HydraCollection<Task>>('/tasks')
+        return extractHydraMembers(data)
+    }
+```
+
+Update the return statement to include it:
+
+```typescript
+    return { getAll, getByProject, create, update, remove }
+```
+
+- [ ] **Step 23: Update AdminStatusTab to handle task reassignment on delete**
+
+The existing `AdminStatusTab` does a simple `remove(id)` which would leave tasks orphaned. Port the reassignment logic from `ProjectStatusTab` (which is being deleted). Since statuses are now global, we need to load ALL tasks (not per-project) to check for affected tasks.
+
+Replace the full content of `frontend/components/admin/AdminStatusTab.vue` with:
+
+```vue
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">Statuts</h2>
+            <button
+                class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
+                @click="openCreate"
+            >
+                + Ajouter un statut
+            </button>
+        </div>
+
+        <DataTable
+            :columns="columns"
+            :items="items"
+            :loading="isLoading"
+            empty-message="Aucun statut trouvé."
+            deletable
+            @row-click="openEdit"
+            @delete="requestDelete"
+        >
+            <template #cell-color="{ item }">
+                <span
+                    class="inline-block h-6 w-6 rounded-full"
+                    :style="{ backgroundColor: item.color }"
+                />
+            </template>
+        </DataTable>
+
+        <TaskStatusDrawer
+            v-model="drawerOpen"
+            :item="selectedItem"
+            @saved="onSaved"
+        />
+
+        <ConfirmDeleteStatusModal
+            v-model="confirmModalOpen"
+            :status-label="statusToDelete?.label ?? ''"
+            :task-count="affectedTaskCount"
+            :available-statuses="reassignTargets"
+            @confirm="onConfirmDelete"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TaskStatus } from '~/services/dto/task-status'
+import type { Task } from '~/services/dto/task'
+import { useTaskStatusService } from '~/services/task-statuses'
+import { useTaskService } from '~/services/tasks'
+
+import type { DataTableColumn } from '~/components/ui/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'label', label: 'Libellé', primary: true },
+    { key: 'color', label: 'Couleur' },
+    { key: 'position', label: 'Position', class: 'text-neutral-700' },
+]
+
+const statusService = useTaskStatusService()
+const taskService = useTaskService()
+
+const items = ref<TaskStatus[]>([])
+const tasks = ref<Task[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedItem = ref<TaskStatus | null>(null)
+const confirmModalOpen = ref(false)
+const statusToDelete = ref<TaskStatus | null>(null)
+
+const affectedTaskCount = computed(() => {
+    if (!statusToDelete.value) return 0
+    return tasks.value.filter(t => t.status?.id === statusToDelete.value!.id).length
+})
+
+const reassignTargets = computed(() => {
+    if (!statusToDelete.value) return items.value
+    return items.value.filter(s => s.id !== statusToDelete.value!.id)
+})
+
+async function loadItems() {
+    isLoading.value = true
+    try {
+        const [statuses, allTasks] = await Promise.all([
+            statusService.getAll(),
+            taskService.getAll(),
+        ])
+        items.value = statuses
+        tasks.value = allTasks
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function openCreate() {
+    selectedItem.value = null
+    drawerOpen.value = true
+}
+
+function openEdit(item: TaskStatus) {
+    selectedItem.value = item
+    drawerOpen.value = true
+}
+
+async function requestDelete(item: TaskStatus) {
+    statusToDelete.value = item
+    const count = tasks.value.filter(t => t.status?.id === item.id).length
+    if (count === 0) {
+        await statusService.remove(item.id)
+        await loadItems()
+    } else {
+        confirmModalOpen.value = true
+    }
+}
+
+async function onConfirmDelete(targetStatusId: number | null) {
+    if (!statusToDelete.value) return
+
+    const affectedTasks = tasks.value.filter(t => t.status?.id === statusToDelete.value!.id)
+    const statusIri = targetStatusId ? `/api/task_statuses/${targetStatusId}` : null
+
+    await Promise.all(
+        affectedTasks.map(t => taskService.update(t.id, { status: statusIri }))
+    )
+
+    await statusService.remove(statusToDelete.value.id)
+    confirmModalOpen.value = false
+    statusToDelete.value = null
+    await loadItems()
+}
+
+async function onSaved() {
+    await loadItems()
+}
+
+onMounted(() => {
+    loadItems()
+})
+</script>
+```
+
+- [ ] **Step 24: Commit**
+
+```bash
+git add frontend/services/tasks.ts frontend/components/admin/AdminStatusTab.vue
+git commit -m "feat(admin) : add task reassignment logic to AdminStatusTab"
+```
+
+### Task 10: Add Statuts tab to admin page
+
+**Files:**
+- Modify: `frontend/pages/admin.vue`
+
+- [ ] **Step 24: Add Statuts tab to admin.vue**
+
+In `frontend/pages/admin.vue`, update the `tabs` array to include statuses:
+
+```typescript
+const tabs = [
+    { key: 'clients', label: 'Clients' },
+    { key: 'statuses', label: 'Statuts' },
+    { key: 'efforts', label: 'Efforts' },
+    { key: 'priorities', label: 'Priorités' },
+    { key: 'types', label: 'Types' },
+    { key: 'users', label: 'Utilisateurs' },
+] as const
+```
+
+Add the component in the template:
+
+```html
+<AdminStatusTab v-if="activeTab === 'statuses'" />
+```
+
+- [ ] **Step 25: Commit**
+
+```bash
+git add frontend/pages/admin.vue
+git commit -m "feat(admin) : add statuts tab to admin page"
+```
+
+### Task 11: Update kanban page to use global statuses
+
+**Files:**
+- Modify: `frontend/pages/projects/[id]/index.vue`
+
+- [ ] **Step 26: Change kanban to load global statuses**
+
+In `frontend/pages/projects/[id]/index.vue`, in the `loadData` function, change:
+
+```typescript
+statusService.getByProject(projectId.value),
+```
+
+to:
+
+```typescript
+statusService.getAll(),
+```
+
+- [ ] **Step 27: Commit**
+
+```bash
+git add frontend/pages/projects/[id]/index.vue
+git commit -m "refactor(frontend) : load global statuses in kanban page"
+```
+
+### Task 12: Remove per-project status pages, sidebar link, and orphaned components
+
+**Files:**
+- Delete: `frontend/pages/projects/[id]/statuses.vue`
+- Delete: `frontend/components/project/ProjectStatusTab.vue`
+- Modify: `frontend/layouts/default.vue`
+
+- [ ] **Step 28: Delete per-project statuses page and ProjectStatusTab**
+
+```bash
+git rm frontend/pages/projects/[id]/statuses.vue
+git rm frontend/components/project/ProjectStatusTab.vue
+```
+
+- [ ] **Step 29: Remove statuses SidebarLink from default.vue**
+
+In `frontend/layouts/default.vue`, remove the statuses sidebar link block (inside the `v-if="currentProjectId"` template, lines 52-58):
+
+```html
+                        <SidebarLink
+                            :to="`/projects/${currentProjectId}/statuses`"
+                            icon="mdi:list-status"
+                            label="Statuts"
+                            :collapsed="ui.sidebarCollapsed"
+                            sub
+                        />
+```
+
+- [ ] **Step 30: Commit**
+
+```bash
+git add frontend/layouts/default.vue
+git commit -m "refactor(frontend) : remove per-project statuses page and sidebar link"
+```
+
+### Task 13: Verify and clean up
+
+- [ ] **Step 31: Check for remaining references to getByProject in task-statuses**
+
+Search for any remaining `getByProject` calls on the status service and `projectId` references in status-related components:
+
+```bash
+cd /home/matthieu/dev_malio/Lesstime
+grep -rn "getByProject\|projectId" frontend/ --include="*.vue" --include="*.ts" | grep -i status
+grep -rn "ConfirmDeleteStatusModal\|ProjectStatusTab" frontend/ --include="*.vue" --include="*.ts"
+```
+
+Fix any remaining references found.
+
+- [ ] **Step 32: Run the dev server and verify**
+
+```bash
+make db-reset && make dev-nuxt
+```
+
+Verify:
+1. Admin page shows Clients tab with full CRUD (create, edit, delete)
+2. Admin page shows Statuts tab with global statuses CRUD
+3. Sidebar no longer shows "Clients" or per-project "Statuts" links
+4. Kanban board displays all global statuses as columns
+5. No errors in browser console
+
+- [ ] **Step 33: Final commit if any cleanup was needed**
+
+```bash
+git add -A
+git commit -m "chore : clean up remaining references after global statuses refactor"
+```

docs/superpowers/plans/2026-03-12-time-entry-multi-type-select.md

@@ -0,0 +1,158 @@
+# Time Entry Multi-Type Selection Implementation Plan
+
+> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Allow selecting multiple task types in the TimeEntryDrawer, matching the existing multi-select pattern used in TaskDrawer.
+
+**Architecture:** Replace the single-select `MalioSelect` dropdown for types with the checkbox-based colored badge multi-select already used in TaskDrawer. The backend (ManyToMany relation) and DTO (`types: string[]`) already support multiple types — only the frontend form state and template need updating.
+
+**Tech Stack:** Vue 3, TypeScript
+
+---
+
+## Chunk 1: Multi-Type Select in TimeEntryDrawer
+
+### Task 1: Update TimeEntryDrawer to support multiple type selection
+
+**Files:**
+- Modify: `frontend/components/time-tracking/TimeEntryDrawer.vue`
+
+- [ ] **Step 1: Change form state from single typeId to typeIds array**
+
+In the `form` reactive object (line 133-142), replace:
+
+```typescript
+typeId: null as number | null,
+```
+
+with:
+
+```typescript
+typeIds: [] as number[],
+```
+
+- [ ] **Step 2: Add toggleType function**
+
+Add this function after the `durationLabel` computed (after line 165):
+
+```typescript
+function toggleType(id: number) {
+    const idx = form.typeIds.indexOf(id)
+    if (idx >= 0) {
+        form.typeIds.splice(idx, 1)
+    } else {
+        form.typeIds.push(id)
+    }
+}
+```
+
+- [ ] **Step 3: Remove the typeOptions computed**
+
+Delete the `typeOptions` computed (lines 152-154):
+
+```typescript
+const typeOptions = computed(() =>
+    props.types.map(t => ({ label: t.label, value: t.id }))
+)
+```
+
+This is no longer needed since we won't use `MalioSelect`.
+
+- [ ] **Step 4: Replace MalioSelect template with multi-select badges**
+
+Replace the `MalioSelect` for type (lines 75-81):
+
+```vue
+<MalioSelect
+    v-model="form.typeId"
+    :options="typeOptions"
+    label="Type"
+    empty-option-label="— Aucun —"
+    min-width="w-full"
+/>
+```
+
+with:
+
+```vue
+<div>
+    <p class="mb-2 text-sm font-semibold text-neutral-700">Types</p>
+    <div class="flex flex-wrap gap-2">
+        <label
+            v-for="type in types"
+            :key="type.id"
+            class="cursor-pointer rounded-full px-3 py-1 text-xs font-semibold transition"
+            :class="form.typeIds.includes(type.id)
+                ? 'text-white'
+                : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'"
+            :style="form.typeIds.includes(type.id) ? { backgroundColor: type.color } : {}"
+        >
+            <input
+                type="checkbox"
+                class="hidden"
+                :value="type.id"
+                :checked="form.typeIds.includes(type.id)"
+                @change="toggleType(type.id)"
+            />
+            {{ type.label }}
+        </label>
+    </div>
+</div>
+```
+
+- [ ] **Step 5: Update populateForm to use typeIds**
+
+In the `populateForm` function, replace (line 194):
+
+```typescript
+form.typeId = entry.types?.[0]?.id ?? null
+```
+
+with:
+
+```typescript
+form.typeIds = entry.types?.map(t => t.id) ?? []
+```
+
+And in the else branch (line 203), replace:
+
+```typescript
+form.typeId = null
+```
+
+with:
+
+```typescript
+form.typeIds = []
+```
+
+- [ ] **Step 6: Update onSubmit payload to use typeIds**
+
+In the `onSubmit` function, replace (line 233):
+
+```typescript
+types: form.typeId ? [`/api/task_types/${form.typeId}`] : [],
+```
+
+with:
+
+```typescript
+types: form.typeIds.map(id => `/api/task_types/${id}`),
+```
+
+- [ ] **Step 7: Verify in browser**
+
+Run: `make dev-nuxt`
+
+1. Open time tracking page
+2. Open an existing time entry → verify existing types are pre-selected as colored badges
+3. Toggle types on/off → verify visual feedback (colored background when selected)
+4. Save → verify types are persisted correctly
+5. Create a new time entry with multiple types → verify they save correctly
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add frontend/components/time-tracking/TimeEntryDrawer.vue
+git commit -m "feat(frontend) : allow multiple type selection in time entry drawer"
+```

docs/superpowers/plans/2026-03-13-my-tasks-page.md

@@ -0,0 +1,584 @@
+# My Tasks Page Implementation Plan
+
+> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add a "/my-tasks" page that displays all non-archived tasks across projects with Kanban and List views, filtered by current user by default.
+
+**Architecture:** Backend: add SearchFilter annotations on Task entity for server-side filtering. Frontend: new page with filter bar + two view modes (Kanban/List), reusing existing TaskCard and TaskModal components.
+
+**Tech Stack:** PHP 8.4 / API Platform 4 (SearchFilter), Nuxt 4 / Vue 3, Tailwind CSS, MalioSelect, Pinia
+
+**Spec:** `docs/superpowers/specs/2026-03-13-my-tasks-page-design.md`
+
+---
+
+## Chunk 1: Backend — API Filters
+
+### Task 1: Add SearchFilter annotations on Task entity
+
+**Files:**
+- Modify: `src/Entity/Task.php:35` (ApiFilter line)
+
+- [ ] **Step 1: Add new SearchFilter properties**
+
+In `src/Entity/Task.php`, replace the existing `#[ApiFilter(SearchFilter::class, ...)]` line (line 35) with an expanded version that includes `assignee`, `priority`, `effort`, `tags`, and `status`:
+
+```php
+#[ApiFilter(SearchFilter::class, properties: ['project' => 'exact', 'group' => 'exact', 'assignee' => 'exact', 'priority' => 'exact', 'effort' => 'exact', 'tags' => 'exact', 'status' => 'exact'])]
+```
+
+- [ ] **Step 2: Disable pagination on GetCollection**
+
+In `src/Entity/Task.php`, modify the `GetCollection` operation (line 25) to disable pagination:
+
+```php
+new GetCollection(paginationEnabled: false),
+```
+
+- [ ] **Step 3: Verify filters work**
+
+Run in the container:
+```bash
+docker exec -t php-lesstime-fpm php bin/console debug:router | grep tasks
+```
+Then test the API call:
+```bash
+curl -s 'http://localhost:8082/api/tasks?archived=false&assignee=/api/users/1' -H 'Cookie: BEARER=...' | head -c 500
+```
+Expected: JSON response with filtered tasks.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/Entity/Task.php
+git commit -m "feat(backend) : add SearchFilter for assignee, priority, effort, tags, status on Task"
+```
+
+---
+
+## Chunk 2: Frontend — Service, i18n, Sidebar
+
+### Task 2: Add `getFiltered` method to task service
+
+**Files:**
+- Modify: `frontend/services/tasks.ts`
+
+- [ ] **Step 1: Add the `getFiltered` method**
+
+Add after the `getByProjectArchived` method (after line 27) in `frontend/services/tasks.ts`:
+
+```typescript
+async function getFiltered(params: Record<string, string | number | boolean | string[]>): Promise<Task[]> {
+    const data = await api.get<HydraCollection<Task>>('/tasks', params as Record<string, unknown>)
+    return extractHydraMembers(data)
+}
+```
+
+- [ ] **Step 2: Export the new method**
+
+Update the return statement (line 47) to include `getFiltered`:
+
+```typescript
+return { getAll, getByProject, getByProjectArchived, getFiltered, create, update, remove }
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add frontend/services/tasks.ts
+git commit -m "feat(frontend) : add getFiltered method to task service"
+```
+
+### Task 3: Add i18n translations
+
+**Files:**
+- Modify: `frontend/i18n/locales/fr.json`
+
+- [ ] **Step 1: Add myTasks and sidebar keys**
+
+Add these entries to `frontend/i18n/locales/fr.json` (before the closing `}`):
+
+```json
+"myTasks": {
+    "title": "Mes tâches",
+    "viewKanban": "Vue Kanban",
+    "viewList": "Vue Liste",
+    "allProjects": "Tous les projets",
+    "allGroups": "Tous les groupes",
+    "allTypes": "Tous les types",
+    "allPriorities": "Toutes les priorités",
+    "allEfforts": "Tous les efforts",
+    "allAssignees": "Tous",
+    "noTasks": "Aucune tâche",
+    "backlog": "Backlog"
+},
+"sidebar": {
+    "myTasks": "Mes tâches"
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add frontend/i18n/locales/fr.json
+git commit -m "feat(frontend) : add i18n translations for my-tasks page"
+```
+
+### Task 4: Add sidebar navigation link
+
+**Files:**
+- Modify: `frontend/layouts/default.vue:23-35` (nav section)
+
+- [ ] **Step 1: Add SidebarLink for "Mes tâches"**
+
+In `frontend/layouts/default.vue`, add a new `SidebarLink` between the "Tableau de bord" link (line 29) and the "Projets" link (line 30):
+
+```vue
+<SidebarLink
+    to="/my-tasks"
+    icon="mdi:clipboard-check-outline"
+    label="Mes tâches"
+    :collapsed="ui.sidebarCollapsed"
+/>
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add frontend/layouts/default.vue
+git commit -m "feat(frontend) : add Mes tâches link to sidebar navigation"
+```
+
+---
+
+## Chunk 3: Frontend — My Tasks Page (Kanban + List views)
+
+### Task 5: Create the my-tasks page
+
+**Files:**
+- Create: `frontend/pages/my-tasks.vue`
+
+- [ ] **Step 1: Create the page file with imports and data loading**
+
+Create `frontend/pages/my-tasks.vue` with the full page implementation. The page structure:
+
+**Script section** — data loading pattern (same as `projects/[id]/index.vue`):
+
+```typescript
+<script setup lang="ts">
+import type { Task } from '~/services/dto/task'
+import type { TaskStatus } from '~/services/dto/task-status'
+import type { TaskEffort } from '~/services/dto/task-effort'
+import type { TaskPriority } from '~/services/dto/task-priority'
+import type { TaskTag } from '~/services/dto/task-tag'
+import type { TaskGroup } from '~/services/dto/task-group'
+import type { UserData } from '~/services/dto/user-data'
+import type { Project } from '~/services/dto/project'
+import { useTaskService } from '~/services/tasks'
+import { useTaskStatusService } from '~/services/task-statuses'
+import { useTaskEffortService } from '~/services/task-efforts'
+import { useTaskPriorityService } from '~/services/task-priorities'
+import { useTaskTagService } from '~/services/task-tags'
+import { useTaskGroupService } from '~/services/task-groups'
+import { useUserService } from '~/services/users'
+import { useProjectService } from '~/services/projects'
+
+const { t } = useI18n()
+const auth = useAuthStore()
+
+useHead({ title: t('myTasks.title') })
+
+const taskService = useTaskService()
+const statusService = useTaskStatusService()
+const effortService = useTaskEffortService()
+const priorityService = useTaskPriorityService()
+const tagService = useTaskTagService()
+const groupService = useTaskGroupService()
+const userService = useUserService()
+const projectService = useProjectService()
+
+const tasks = ref<Task[]>([])
+const statuses = ref<TaskStatus[]>([])
+const efforts = ref<TaskEffort[]>([])
+const priorities = ref<TaskPriority[]>([])
+const tags = ref<TaskTag[]>([])
+const groups = ref<TaskGroup[]>([])
+const users = ref<UserData[]>([])
+const projects = ref<Project[]>([])
+const isLoading = ref(true)
+
+// Filters
+const selectedProjectId = ref<number | null>(null)
+const selectedGroupId = ref<number | null>(null)
+const selectedTagId = ref<number | null>(null)
+const selectedPriorityId = ref<number | null>(null)
+const selectedEffortId = ref<number | null>(null)
+const selectedAssigneeId = ref<number | null>(auth.user?.id ?? null)
+
+// View toggle
+const viewMode = ref<'kanban' | 'list'>('kanban')
+
+// Modal
+const taskModalOpen = ref(false)
+const selectedTask = ref<Task | null>(null)
+
+// Filter options
+const projectOptions = computed(() =>
+    projects.value.map(p => ({ label: p.name, value: p.id }))
+)
+
+const groupOptions = computed(() => {
+    let g = groups.value.filter(g => !g.archived)
+    if (selectedProjectId.value) {
+        g = g.filter(g => g.project?.id === selectedProjectId.value)
+    }
+    return g.map(g => ({ label: g.title, value: g.id }))
+})
+
+const tagOptions = computed(() =>
+    tags.value.map(t => ({ label: t.label, value: t.id }))
+)
+
+const priorityOptions = computed(() =>
+    priorities.value.map(p => ({ label: p.label, value: p.id }))
+)
+
+const effortOptions = computed(() =>
+    efforts.value.map(e => ({ label: e.label, value: e.id }))
+)
+
+const assigneeOptions = computed(() =>
+    users.value.map(u => ({ label: u.username, value: u.id }))
+)
+
+// Kanban helpers
+const sortedStatuses = computed(() =>
+    [...statuses.value].sort((a, b) => a.position - b.position)
+)
+
+function tasksByStatus(statusId: number): Task[] {
+    return tasks.value.filter(t => t.status?.id === statusId)
+}
+
+const backlogTasks = computed(() =>
+    tasks.value.filter(t => !t.status)
+)
+
+// Data loading
+async function loadReferenceData() {
+    const [s, e, pr, tg, g, u, p] = await Promise.all([
+        statusService.getAll(),
+        effortService.getAll(),
+        priorityService.getAll(),
+        tagService.getAll(),
+        groupService.getAll(),
+        userService.getAll(),
+        projectService.getAll(),
+    ])
+    statuses.value = s
+    efforts.value = e
+    priorities.value = pr
+    tags.value = tg
+    groups.value = g
+    users.value = u
+    projects.value = p
+}
+
+async function loadTasks() {
+    const params: Record<string, string | number | boolean | string[]> = {
+        archived: false,
+    }
+    if (selectedAssigneeId.value) {
+        params.assignee = `/api/users/${selectedAssigneeId.value}`
+    }
+    if (selectedProjectId.value) {
+        params.project = `/api/projects/${selectedProjectId.value}`
+    }
+    if (selectedGroupId.value) {
+        params.group = `/api/task_groups/${selectedGroupId.value}`
+    }
+    if (selectedPriorityId.value) {
+        params.priority = `/api/task_priorities/${selectedPriorityId.value}`
+    }
+    if (selectedEffortId.value) {
+        params.effort = `/api/task_efforts/${selectedEffortId.value}`
+    }
+    if (selectedTagId.value) {
+        params['tags[]'] = `/api/task_tags/${selectedTagId.value}`
+    }
+    tasks.value = await taskService.getFiltered(params)
+}
+
+async function loadAll() {
+    isLoading.value = true
+    try {
+        await Promise.all([loadReferenceData(), loadTasks()])
+    } finally {
+        isLoading.value = false
+    }
+}
+
+// Watch filters to reload tasks
+watch(
+    [selectedProjectId, selectedGroupId, selectedTagId, selectedPriorityId, selectedEffortId, selectedAssigneeId],
+    () => { loadTasks() },
+)
+
+// Reset group when project changes (no extra loadTasks — the above watcher handles it)
+watch(selectedProjectId, () => {
+    selectedGroupId.value = null
+}, { flush: 'sync' })
+
+// Modal
+function openTaskEdit(task: Task) {
+    selectedTask.value = task
+    taskModalOpen.value = true
+}
+
+async function onSaved() {
+    await loadTasks()
+}
+
+onMounted(() => {
+    loadAll()
+})
+</script>
+```
+
+**Template section:**
+
+```vue
+<template>
+    <div>
+        <!-- Header -->
+        <div class="flex items-center justify-between">
+            <h1 class="text-2xl font-bold text-primary-500">{{ $t('myTasks.title') }}</h1>
+            <div class="flex gap-1">
+                <button
+                    class="rounded-lg p-2 transition-colors"
+                    :class="viewMode === 'kanban' ? 'bg-primary-500 text-white' : 'text-neutral-400 hover:text-primary-500'"
+                    :title="$t('myTasks.viewKanban')"
+                    @click="viewMode = 'kanban'"
+                >
+                    <Icon name="mdi:view-column-outline" size="20" />
+                </button>
+                <button
+                    class="rounded-lg p-2 transition-colors"
+                    :class="viewMode === 'list' ? 'bg-primary-500 text-white' : 'text-neutral-400 hover:text-primary-500'"
+                    :title="$t('myTasks.viewList')"
+                    @click="viewMode = 'list'"
+                >
+                    <Icon name="mdi:view-list-outline" size="20" />
+                </button>
+            </div>
+        </div>
+
+        <!-- Filters -->
+        <div class="mt-4 flex flex-wrap gap-3">
+            <MalioSelect
+                v-model="selectedProjectId"
+                :options="projectOptions"
+                label="Projet"
+                :empty-option-label="$t('myTasks.allProjects')"
+                min-width="w-48"
+            />
+            <MalioSelect
+                v-model="selectedGroupId"
+                :options="groupOptions"
+                label="Groupe"
+                :empty-option-label="$t('myTasks.allGroups')"
+                min-width="w-48"
+            />
+            <MalioSelect
+                v-model="selectedTagId"
+                :options="tagOptions"
+                label="Type"
+                :empty-option-label="$t('myTasks.allTypes')"
+                min-width="w-48"
+            />
+            <MalioSelect
+                v-model="selectedPriorityId"
+                :options="priorityOptions"
+                label="Priorité"
+                :empty-option-label="$t('myTasks.allPriorities')"
+                min-width="w-48"
+            />
+            <MalioSelect
+                v-model="selectedEffortId"
+                :options="effortOptions"
+                label="Effort"
+                :empty-option-label="$t('myTasks.allEfforts')"
+                min-width="w-48"
+            />
+            <MalioSelect
+                v-model="selectedAssigneeId"
+                :options="assigneeOptions"
+                label="Assigné"
+                :empty-option-label="$t('myTasks.allAssignees')"
+                min-width="w-48"
+            />
+        </div>
+
+        <!-- Kanban View -->
+        <div v-if="viewMode === 'kanban'" class="mt-6 flex gap-4 overflow-x-auto pb-4">
+            <!-- Backlog column (tasks without status) -->
+            <div
+                v-if="backlogTasks.length > 0"
+                class="flex w-72 shrink-0 flex-col rounded-lg bg-neutral-50"
+            >
+                <div class="rounded-t-lg bg-neutral-500 px-4 py-3 text-sm font-bold text-white">
+                    {{ $t('myTasks.backlog') }} ({{ backlogTasks.length }})
+                </div>
+                <div class="flex flex-col gap-3 p-3">
+                    <TaskCard
+                        v-for="task in backlogTasks"
+                        :key="task.id"
+                        :task="task"
+                        @click="openTaskEdit(task)"
+                    />
+                </div>
+            </div>
+
+            <!-- Status columns -->
+            <div
+                v-for="status in sortedStatuses"
+                :key="status.id"
+                class="flex w-72 shrink-0 flex-col rounded-lg bg-neutral-50"
+            >
+                <div
+                    class="rounded-t-lg px-4 py-3 text-sm font-bold text-white"
+                    :style="{ backgroundColor: status.color }"
+                >
+                    {{ status.label }} ({{ tasksByStatus(status.id).length }})
+                </div>
+                <div class="flex flex-col gap-3 p-3">
+                    <TaskCard
+                        v-for="task in tasksByStatus(status.id)"
+                        :key="task.id"
+                        :task="task"
+                        @click="openTaskEdit(task)"
+                    />
+                    <p
+                        v-if="tasksByStatus(status.id).length === 0"
+                        class="py-4 text-center text-xs text-neutral-400"
+                    >
+                        {{ $t('myTasks.noTasks') }}
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <!-- List View -->
+        <div v-if="viewMode === 'list'" class="mt-6">
+            <div
+                v-for="task in tasks"
+                :key="task.id"
+                class="flex cursor-pointer items-center justify-between border-b border-neutral-100 px-4 py-3 transition-colors hover:bg-neutral-50"
+                @click="openTaskEdit(task)"
+            >
+                <div class="min-w-0 flex-1">
+                    <h4 class="text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
+                    <div class="mt-1 flex 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="tag in task.tags"
+                            :key="tag.id"
+                            class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                            :style="{ backgroundColor: tag.color }"
+                        >
+                            {{ tag.label }}
+                        </span>
+                    </div>
+                </div>
+                <div class="flex items-center gap-3">
+                    <button
+                        class="shrink-0 transition-colors"
+                        :class="isTimerOnTask(task) ? 'text-[#F18619] hover:text-[#d97314]' : 'text-neutral-400 hover:text-primary-500'"
+                        @click.stop="isTimerOnTask(task) ? timerStore.stop() : timerStore.startFromTask(task)"
+                    >
+                        <Icon :name="isTimerOnTask(task) ? 'mdi:stop-circle-outline' : 'mdi:play-circle-outline'" size="20" />
+                    </button>
+                    <span
+                        v-if="task.project && task.number"
+                        class="text-sm font-medium text-primary-500"
+                    >
+                        {{ task.project.code }}-{{ task.number }}
+                    </span>
+                </div>
+            </div>
+            <p
+                v-if="tasks.length === 0 && !isLoading"
+                class="py-8 text-center text-sm text-neutral-400"
+            >
+                {{ $t('myTasks.noTasks') }}
+            </p>
+        </div>
+
+        <!-- TaskModal -->
+        <TaskModal
+            v-model="taskModalOpen"
+            :task="selectedTask"
+            :project-id="selectedTask?.project?.id ?? 0"
+            :statuses="statuses"
+            :efforts="efforts"
+            :priorities="priorities"
+            :tags="tags"
+            :groups="selectedTask?.project?.id ? groups.filter(g => g.project?.id === selectedTask?.project?.id) : groups"
+            :users="users"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+```
+
+Note: add the `timerStore` and `isTimerOnTask` helper in the script section:
+
+```typescript
+const timerStore = useTimerStore()
+
+function isTimerOnTask(task: Task): boolean {
+    const entry = timerStore.activeEntry
+    if (!entry?.task) return false
+    const entryTaskId = typeof entry.task === 'string'
+        ? entry.task
+        : (entry.task['@id'] ?? entry.task.id)
+    const taskId = task['@id'] ?? task.id
+    return entryTaskId === taskId || entryTaskId === `/api/tasks/${task.id}`
+}
+```
+
+- [ ] **Step 2: Verify the page loads**
+
+Run: `make dev-nuxt`
+
+Navigate to `http://localhost:3002/my-tasks`.
+Expected: page loads with filters and shows tasks assigned to current user in Kanban view.
+
+- [ ] **Step 3: Test view toggle**
+
+Click the list icon. Expected: tasks display in list format with title, badges, project code.
+Click the kanban icon. Expected: tasks display in columns by status.
+
+- [ ] **Step 4: Test filters**
+
+Change the assignee filter to "Tous". Expected: all tasks from all users appear.
+Select a specific project. Expected: only tasks from that project appear.
+Reset all filters. Expected: all non-archived tasks appear.
+
+- [ ] **Step 5: Test TaskModal integration**
+
+Click on a task card/row. Expected: TaskModal opens with task details pre-filled.
+Edit and save. Expected: modal closes, tasks reload with updated data.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add frontend/pages/my-tasks.vue
+git commit -m "feat(frontend) : add my-tasks page with Kanban and List views"
+```

docs/superpowers/specs/2026-03-10-time-tracking-design.md

@@ -0,0 +1,197 @@
+# Time Tracking (Toggl-style Timer)
+
+## Résumé
+
+Système de suivi de temps type Toggl intégré à Lesstime. Permet de démarrer des timers depuis les tickets (TaskCard) ou à vide depuis la sidebar, visualiser les temps sur un calendrier semaine/jour, et gérer les entrées de temps (drag, resize, copier-coller).
+
+## Modèle de données
+
+### Entité `TimeEntry`
+
+| Champ | Type | Contraintes |
+|-------|------|-------------|
+| `id` | integer | PK, auto-increment |
+| `title` | string(255) | nullable |
+| `description` | text | nullable |
+| `startedAt` | datetimetz_immutable | requis (stocké en UTC) |
+| `stoppedAt` | datetimetz_immutable | nullable (null = timer actif, stocké en UTC) |
+| `user` | ManyToOne → User | requis, CASCADE on delete |
+| `project` | ManyToOne → Project | nullable, SET NULL on delete |
+| `task` | ManyToOne → Task | nullable, SET NULL on delete |
+| `types` | ManyToMany → TaskType | join table `time_entry_task_type` |
+
+### Règles métier
+
+- Un seul timer actif (`stoppedAt = null`) par user à la fois
+- `stoppedAt` > `startedAt` si renseigné
+- Les entrées de temps peuvent se chevaucher
+- Démarrage depuis un ticket : copie `title`, `project`, `task`, `types` depuis la Task. Le `user` est toujours le user connecté (pas l'assignee du ticket)
+- Démarrage à vide : seuls `startedAt` et `user` (connecté) sont renseignés, le reste peut être complété après
+- Unicité timer actif : index partiel unique sur `(user_id) WHERE stopped_at IS NULL`
+- Entrées traversant minuit : tronquées visuellement à la fin du jour, la suite s'affiche dans la colonne du jour suivant
+- Toutes les dates sont stockées et échangées en UTC. Le frontend convertit en heure locale pour l'affichage
+
+## API Endpoints
+
+Préfixe `/api`.
+
+### Sécurité / Autorisations
+
+- Tout user authentifié peut lire les entrées de tous les users (filtrage par user côté frontend)
+- Un user peut créer/modifier/supprimer ses propres entrées
+- Un ROLE_ADMIN peut créer/modifier/supprimer les entrées de n'importe qui
+- Assigner un temps à un autre user (`user` ≠ soi-même) requiert ROLE_ADMIN
+
+| Méthode | Route | Description |
+|---------|-------|-------------|
+| `GET` | `/api/time_entries` | Liste avec filtres : `user`, `project`, `startedAt[after]`, `startedAt[before]`, `types` |
+| `POST` | `/api/time_entries` | Créer une entrée ou démarrer un timer |
+| `PATCH` | `/api/time_entries/{id}` | Modifier (stopper, compléter, redimensionner, déplacer) |
+| `DELETE` | `/api/time_entries/{id}` | Supprimer |
+| `GET` | `/api/time_entries/active` | Timer actif du user connecté (custom Provider, `uriTemplate` avec priorité > item route) |
+
+## Frontend
+
+### Store Pinia `useTimerStore`
+
+```typescript
+state: {
+    activeEntry: TimeEntry | null
+}
+
+getters: {
+    isRunning: boolean        // activeEntry !== null
+    elapsed: number           // calculé via setInterval: now - activeEntry.startedAt
+}
+
+actions: {
+    fetchActive()             // GET /api/time_entries/active — appelé au chargement app
+    start()                   // POST à vide (startedAt: now, user: currentUser)
+    startFromTask(task: Task) // Stoppe le timer actif si existant, puis POST avec données du ticket (user = connecté, pas assignee)
+    stop()                    // PATCH stoppedAt: now
+}
+```
+
+Le temps est fiable même si le navigateur est fermé : `startedAt` est en base, le compteur affiche toujours `now - startedAt` au rechargement.
+
+### Timer dans la sidebar (bas à gauche)
+
+- **Inactif** : affiche `00:00:00` + bouton play (démarrage à vide)
+- **Actif** : compteur temps réel + bouton stop
+- Toujours visible, dans le layout `default.vue`
+
+### Bouton play sur TaskCard
+
+- Bouton play existant sur les cartes du kanban
+- Clic → `timerStore.startFromTask(task)`
+- Si un timer est déjà actif : stop automatique de l'ancien, puis démarrage du nouveau
+
+### Page "Suivi des temps"
+
+**Route** : `/time-tracking`
+**Lien sidebar** : "Suivi de temps" (icône horloge)
+
+#### Header
+
+- Titre "Suivi des temps"
+- Mois/année en orange
+- Toggle vue : **Semaine** / **Jour** avec flèches `< >`
+- Filtres : **User** (select, défaut = user connecté), **Type** (select TaskType)
+- Bouton **"+ Ajouter une Activité"**
+
+#### Grille calendrier
+
+- **Axe Y** : 00:00 → 23:59 (minuit à minuit)
+- **Axe X** : 7 colonnes (semaine, Lun→Dim) ou 1 colonne (jour)
+- Chaque colonne : jour + date + total heures sous la date
+
+#### Blocs de temps
+
+- **Couleur** = couleur du projet
+- **Contenu** : titre, nom du projet (petit), badge type coloré, durée
+- Les blocs peuvent se chevaucher
+
+#### Interactions
+
+| Action | Comportement |
+|--------|-------------|
+| **Clic sur un bloc** | Ouvre le drawer en mode édition |
+| **Drag & drop d'un bloc** | Déplacer vers un autre créneau ou autre jour |
+| **Resize (bord bas)** | Redimensionner la durée (modifie `stoppedAt`) |
+| **Clic sur créneau vide** | Ouvre le drawer en mode création avec heure début pré-remplie |
+| **Clic droit sur un bloc** | Menu contextuel : Copier, Supprimer |
+| **Clic droit sur créneau vide** | Menu contextuel : Coller (si un bloc copié) |
+| **Bouton "+ Ajouter une Activité"** | Ouvre le drawer en mode création |
+
+### Drawer "Ajouter/Modifier un temps"
+
+Utilise le composant `AppDrawer` existant.
+
+**Champs** :
+- Titre (input text)
+- Description (textarea)
+- Heure début (datetime picker)
+- Heure fin (datetime picker)
+- User (select, défaut = user connecté, peut assigner à un autre)
+- Projet (select)
+- Type (select TaskType)
+- Bouton Enregistrer
+
+En mode édition : champs pré-remplis avec les données du TimeEntry.
+
+## Service frontend
+
+### `useTimeEntryService()`
+
+```typescript
+getByDateRange(params: { after: string, before: string, user?: number, types?: number[] }): Promise<TimeEntry[]>
+getActive(): Promise<TimeEntry | null>
+create(payload: TimeEntryWrite): Promise<TimeEntry>
+update(id: number, payload: Partial<TimeEntryWrite>): Promise<TimeEntry>
+remove(id: number): Promise<void>
+```
+
+### DTO `TimeEntry`
+
+```typescript
+type TimeEntry = {
+    id: number
+    '@id'?: string
+    title: string | null
+    description: string | null
+    startedAt: string           // ISO datetime
+    stoppedAt: string | null    // null = timer actif
+    user: UserData
+    project: Project | null
+    task: Task | null
+    types: TaskType[]
+}
+
+type TimeEntryWrite = {
+    title?: string | null
+    description?: string | null
+    startedAt: string
+    stoppedAt?: string | null
+    user: string                // IRI
+    project?: string | null     // IRI
+    task?: string | null        // IRI
+    types?: string[]            // IRIs
+}
+```
+
+## Modifications sur l'existant
+
+- **DTO `Task`** : ajouter le champ `project: Project` (nécessaire pour `startFromTask`)
+- **`TaskCard.vue`** : connecter le bouton play existant à `timerStore.startFromTask(task)`
+- **`default.vue`** : intégrer `SidebarTimer.vue` en bas de la sidebar (au-dessus du bouton collapse). En mode collapsed : afficher uniquement le bouton play/stop sans le compteur texte
+- **Sidebar links** : ajouter le lien "Suivi de temps" vers `/time-tracking`
+
+## Composants frontend
+
+| Composant | Rôle |
+|-----------|------|
+| `TimeTrackingCalendar.vue` | Grille calendrier (semaine/jour) avec blocs |
+| `TimeEntryBlock.vue` | Bloc de temps individuel (drag, resize) |
+| `TimeEntryDrawer.vue` | Drawer ajout/modification |
+| `TimeEntryContextMenu.vue` | Menu contextuel (copier, coller, supprimer) |
+| `SidebarTimer.vue` | Widget timer dans la sidebar |

docs/superpowers/specs/2026-03-12-task-archiving-design.md

@@ -0,0 +1,145 @@
+o# Feature: Archivage de tickets et de groupes
+
+## Résumé
+
+Permettre d'archiver des tickets individuels (quand leur statut est final) et des groupes entiers (quand tous leurs tickets sont en statut final). Les éléments archivés disparaissent de la vue kanban et sont consultables via une page dédiée "Archives" dans le projet.
+
+## Modèle de données
+
+### TaskStatus — ajout `isFinal`
+
+- Nouveau champ `isFinal: bool` (default `false`)
+- Mis à `true` sur le statut "Terminé" dans les fixtures
+- Exposé en lecture et écriture via API Platform (groupes de sérialisation `task_status:read`, `task_status:write`, et `task:read`)
+- Permet d'identifier dynamiquement quels statuts autorisent l'archivage
+
+### Task — ajout `archived`
+
+- Nouveau champ `archived: bool` (default `false`)
+- Filtre API Platform `BooleanFilter` sur `archived` pour requêter `?archived=false` ou `?archived=true`
+- Le kanban charge les tickets avec `archived=false`
+- La page archives charge les tickets avec `archived=true`
+
+### TaskGroup — ajout `archived`
+
+- Nouveau champ `archived: bool` (default `false`)
+- Filtre API Platform `BooleanFilter` sur `archived`
+- Le kanban et le filtre groupe n'affichent que les groupes `archived=false`
+
+### Migration
+
+Une migration Doctrine unique pour les 3 champs (`task_status.is_final`, `task.archived`, `task_group.archived`).
+
+## Backend — logique métier
+
+### Archivage de groupe (bulk)
+
+L'archivage d'un groupe est une opération frontend multi-appels :
+
+1. PATCH chaque ticket du groupe avec `{ archived: true }`
+2. PATCH le groupe avec `{ archived: true }`
+
+Pas de endpoint custom côté backend — on réutilise les PATCH existants.
+
+### Permissions
+
+L'archivage suit le modèle de permissions existant : les opérations PATCH sur Task et TaskGroup requièrent `ROLE_ADMIN`. Pas de règle supplémentaire.
+
+### Pas de validation backend sur `isFinal`
+
+La règle "archiver seulement si statut final" est appliquée côté frontend (visibilité du bouton). Pas de State Processor dédié — cohérent avec le reste de l'app qui ne valide pas les transitions de statut côté serveur.
+
+## Frontend
+
+### TaskDrawer — archivage et modale suppression
+
+**Bouton "Archiver"** :
+
+- Visible uniquement quand le ticket a un statut avec `isFinal: true`
+- PATCH `{ archived: true }` sur le ticket
+- Si un timer est actif sur ce ticket, l'arrêter avant d'archiver
+- Ferme le drawer et rafraîchit la liste des tickets
+
+**Bouton "Désarchiver"** :
+
+- Visible quand on consulte un ticket archivé (depuis la page archives)
+- PATCH `{ archived: false }`
+- Ferme le drawer et rafraîchit la page archives
+
+**Modale de confirmation de suppression** :
+
+- Déclenchée au clic sur "Supprimer" dans le TaskDrawer
+- Message : "Êtes-vous sûr de vouloir supprimer ce ticket ? Cette action est irréversible."
+- Deux boutons : "Annuler" / "Supprimer" (style destructif, rouge)
+- Suit le pattern existant de `ConfirmDeleteStatusModal`
+
+### Page Archives — `/projects/[id]/archives`
+
+- Nouveau sous-onglet "Archives" dans la navigation projet (à côté de "Groupes")
+- Liste des tickets archivés du projet (`archived=true`)
+- Colonnes affichées : numéro, titre, statut, groupe, assigné
+- Clic sur un ticket → ouvre le TaskDrawer (avec bouton "Désarchiver")
+- Filtre par groupe possible
+
+### Page Groupes — archivage de groupes
+
+**Vue par défaut** : affiche uniquement les groupes non archivés.
+
+**Toggle "Voir les groupes archivés"** : bascule pour afficher les groupes archivés.
+
+**Bouton "Archiver" sur un groupe** :
+
+- Visible uniquement si le groupe a au moins un ticket ET que **tous** ses tickets ont un statut `isFinal: true` (un ticket sans statut bloque l'archivage)
+- Archive tous les tickets du groupe puis le groupe lui-même (appels PATCH séquentiels)
+- Rafraîchit la liste
+
+**Bouton "Désarchiver" sur un groupe archivé** :
+
+- Désarchive le groupe + tous ses tickets (écrase l'état individuel des tickets)
+- Rafraîchit la liste
+
+### Admin — toggle `isFinal` sur les statuts
+
+- Ajout d'un checkbox/toggle "Statut final" dans l'AdminStatusTab (création et édition de statuts)
+- Permet aux admins de configurer quels statuts sont considérés comme finaux
+
+### Kanban — filtrage
+
+- Le filtre groupe dans le dropdown n'affiche que les groupes `archived=false`
+- Les tickets `archived=true` sont exclus du kanban
+
+### Time tracking
+
+- Les entrées de temps liées à des tickets archivés restent visibles dans les vues time-tracking (pas de changement)
+
+## DTOs
+
+### TaskStatus
+
+Ajout du champ `isFinal: boolean` dans les types `TaskStatus` et `TaskStatusWrite`.
+
+### Task
+
+Ajout du champ `archived: boolean` dans les types `Task` et `TaskWrite`.
+
+### TaskGroup
+
+Ajout du champ `archived: boolean` dans les types `TaskGroup` et `TaskGroupWrite`.
+
+## Traductions (i18n)
+
+Clés à ajouter dans `fr.json` :
+
+- `task.archive` / `task.unarchive`
+- `task.delete_confirm_title` / `task.delete_confirm_message`
+- `group.archive` / `group.unarchive`
+- `group.show_archived` / `group.hide_archived`
+- `project.tabs.archives`
+- `status.is_final`
+
+## Hors périmètre
+
+- Historique/date d'archivage (pourra être ajouté plus tard avec un champ `archivedAt`)
+- Archivage automatique (cron/scheduler)
+- Archivage en masse depuis la page archives
+- Verrouillage des tickets archivés (modification de statut, etc.)

docs/superpowers/specs/2026-03-13-gitea-integration-design.md

@@ -0,0 +1,151 @@
+# Intégration Gitea — Design Spec
+
+## Objectif
+
+Lier les tickets Lesstime à Gitea pour :
+- Créer une branche depuis un ticket (avec choix du type : feature, fix, refactor, etc.)
+- Voir les branches, commits, PRs et statut CI liés à un ticket
+- Le tout à la demande (pas de webhook, pas de cron, pas de stockage git en base)
+
+## Décisions
+
+| Question | Décision |
+|----------|----------|
+| Interaction | Depuis Lesstime uniquement (bouton + affichage) |
+| Repos | Un projet = un repo Gitea |
+| Nommage branches | `<type>/PROJ-42-titre-en-slug` (type choisi par l'utilisateur) |
+| Détection commits | Par la branche (tous les commits d'une branche liée au ticket) |
+| Données affichées | Branches + commits + PRs + statut CI/CD |
+| Config serveur | Globale (admin) : URL + token API |
+| Config repo | Par projet : owner + repo name |
+| Synchronisation | À la demande (appel API Gitea en temps réel) |
+
+## Architecture
+
+### Backend
+
+#### Configuration globale — entité `GiteaConfiguration`
+
+Entité dédiée (singleton en base, un seul enregistrement) :
+
+```
+id: int
+url: string|null        (ex: "https://git.malio.fr")
+token: string|null       (token API personnel Gitea, chiffré via SodiumEncryptor)
+```
+
+Le token est chiffré au repos avec une clé symétrique définie en variable d'environnement (`GITEA_ENCRYPTION_KEY`). L'endpoint GET ne retourne jamais le token en clair — seulement un booléen `hasToken`.
+
+#### Entité `Project` — nouveaux champs
+
+```
+gitea_owner: string|null  (ex: "malio")
+gitea_repo: string|null   (ex: "lesstime")
+```
+
+Nullable car tous les projets ne sont pas forcément liés à un repo.
+
+#### Service `GiteaApiService`
+
+Service Symfony qui encapsule les appels HTTP vers l'API Gitea REST v1.
+
+**Configuration HTTP :**
+- Timeout : 10s par requête
+- En cas d'erreur Gitea (timeout, 5xx, réseau), le service lève une `GiteaApiException` avec un message clair. Le frontend affiche un état dégradé (message d'erreur dans la section Git, le reste de la TaskModal fonctionne normalement).
+
+**Méthodes :**
+- `testConnection(): bool` — appelle `GET /api/v1/version` pour vérifier la connexion
+- `listRepositories(): array` — liste les repos accessibles (pour sélection dans le projet)
+- `getDefaultBranch(project): string` — récupère la branche par défaut du repo via `GET /api/v1/repos/{owner}/{repo}`
+- `createBranch(project, task, type, baseBranch): string` — crée une branche `<type>/CODE-NUM-slug` à partir d'une branche de base
+- `listBranches(project, taskCode): array` — liste les branches matchant le pattern `*/CODE-NUM-*` ou `*/CODE-NUM` (délimité pour éviter de matcher PROJ-420 quand on cherche PROJ-42)
+- `listCommits(project, branch): array` — liste les commits d'une branche (paginé, max 30)
+- `listPullRequests(project, taskCode): array` — liste les PRs en filtrant par `head` branch (paramètre `?head=` supporté par Gitea)
+- `getPullRequestChecks(project, prNumber): array` — statut CI/CD d'une PR
+- `copyBranchName(task, type): string` — génère le nom de branche sans appeler Gitea (pour le bouton "copier")
+
+**Slug :** généré côté backend avec `Symfony\Component\String\Slugger\AsciiSlugger` — gère les accents français, tronqué à 50 caractères max pour le slug (le nom complet de branche reste sous 80 chars).
+
+#### Endpoints API Platform
+
+Nouveaux endpoints :
+
+- `GET /api/settings/gitea` — récupérer la config Gitea (admin only, retourne url + hasToken)
+- `PUT /api/settings/gitea` — sauvegarder la config Gitea (admin only)
+- `POST /api/settings/gitea/test` — tester la connexion Gitea (admin only)
+- `GET /api/gitea/repositories` — lister les repos disponibles (pour config projet)
+- `POST /api/tasks/{id}/gitea/branches` — créer une branche pour un ticket
+- `GET /api/tasks/{id}/gitea/branches` — lister branches liées au ticket
+- `GET /api/tasks/{id}/gitea/pull-requests` — lister PRs liées au ticket (avec statut CI inclus)
+
+Les endpoints branches et PRs sont séparés pour permettre un chargement progressif côté frontend et éviter de fan-out trop de requêtes Gitea en un seul appel.
+
+### Frontend
+
+#### Service `frontend/services/gitea.ts`
+
+Nouveau service API encapsulant les appels, cohérent avec le pattern existant (`frontend/services/`).
+
+#### Admin — Config Gitea
+
+Nouveau tab `GiteaAdminTab.vue` dans l'admin pour configurer :
+- URL du serveur Gitea
+- Token API (champ password, affiche seulement si un token est configuré)
+- Bouton "Tester la connexion"
+
+#### ProjectDrawer — Config repo
+
+Ajout de champs dans le drawer de projet :
+- Sélecteur de repo Gitea (dropdown alimenté par `GET /api/gitea/repositories`)
+- Affiche `owner/repo` une fois sélectionné
+
+#### TaskModal — Section Git
+
+Nouveau composant `TaskGitSection.vue` intégré dans la TaskModal (visible et chargé uniquement si le projet a un repo configuré).
+
+**Bouton "Créer une branche"** :
+- Sélecteur de type : `feature`, `fix`, `refactor`, `hotfix`, `chore`
+- Sélecteur de branche de base (default: branche par défaut du repo)
+- Preview du nom : `feature/PROJ-42-titre-de-la-tache`
+- Bouton de confirmation
+- Bouton "Copier le nom" (génère le nom sans appeler Gitea, pour création locale)
+
+**Affichage des infos Git** (chargement progressif) :
+- Liste des branches liées (avec statut : active / mergée / supprimée)
+- Pour chaque branche : derniers commits (hash court, message, auteur, date)
+- PRs associées (titre, statut : open/merged/closed, reviewers)
+- Statut CI/CD par PR (checks : success/failure/pending)
+- Liens directs vers Gitea pour chaque élément
+- En cas d'erreur Gitea : message d'erreur dans la section, le reste de la modal reste fonctionnel
+
+### Sécurité
+
+- Le token Gitea est chiffré en base via `SodiumEncryptor` avec clé `GITEA_ENCRYPTION_KEY`
+- L'endpoint `GET /api/settings/gitea` retourne `url` + `hasToken: bool`, jamais le token en clair
+- Seuls les `ROLE_ADMIN` peuvent configurer le serveur Gitea et les repos
+- Les utilisateurs authentifiés peuvent créer des branches et voir les infos git pour les tâches qu'ils ont le droit de voir
+
+### i18n
+
+Toutes les chaînes UI (labels, messages d'erreur, types de branche) passent par le système i18n existant (`frontend/i18n/locales/fr.json` et `en.json`).
+
+## API Gitea — Endpoints utilisés
+
+| Action | Méthode Gitea API |
+|--------|-------------------|
+| Tester connexion | `GET /api/v1/version` |
+| Info repo (branche défaut) | `GET /api/v1/repos/{owner}/{repo}` |
+| Lister repos | `GET /api/v1/repos/search` |
+| Lister branches | `GET /api/v1/repos/{owner}/{repo}/branches` |
+| Créer branche | `POST /api/v1/repos/{owner}/{repo}/branches` |
+| Lister commits | `GET /api/v1/repos/{owner}/{repo}/commits?sha={branch}&limit=30` |
+| Lister PRs par branche | `GET /api/v1/repos/{owner}/{repo}/pulls?state=all&head={branch}` |
+| Statut CI | `GET /api/v1/repos/{owner}/{repo}/commits/{sha}/statuses` |
+
+## Hors scope
+
+- Webhooks Gitea → Lesstime
+- Stockage des commits/PRs en base
+- Création de PR depuis Lesstime
+- Lien multi-repo par projet
+- Synchronisation périodique (cron/polling)

docs/superpowers/specs/2026-03-13-my-tasks-page-design.md

@@ -0,0 +1,135 @@
+# Feature: Page "Mes tâches"
+
+## Résumé
+
+Page dédiée `/my-tasks` affichant toutes les tâches non-archivées de tous les projets, avec filtrage côté serveur. Deux vues : Kanban (colonnes par statut) et Liste. Par défaut filtrée sur l'utilisateur courant, avec possibilité de changer l'assigné, voir tous les utilisateurs, et filtrer par projet/groupe/type/priorité/effort.
+
+## Backend
+
+### Filtres API Platform sur Task
+
+Ajouter des `SearchFilter` sur l'entité `Task` pour les champs suivants (en plus des filtres existants `project`, `group`, `archived`) :
+
+- `assignee` — filtre exact (par id)
+- `priority` — filtre exact
+- `effort` — filtre exact
+- `tags` — filtre exact (ManyToMany, query param format : `tags[]=/api/task_tags/1`)
+- `status` — filtre exact
+
+Désactiver la pagination sur l'opération `GetCollection` de Task (`paginationEnabled: false`) pour charger toutes les tâches filtrées en un seul appel.
+
+Aucune migration nécessaire — les filtres sont purement déclaratifs sur des relations existantes.
+
+Exemple d'appel :
+```
+GET /api/tasks?assignee=/api/users/1&archived=false&project=/api/projects/2&tags[]=/api/task_tags/3
+```
+
+## Frontend
+
+### Nouvelle page : `frontend/pages/my-tasks.vue`
+
+#### Barre de filtres
+
+Une ligne horizontale de `MalioSelect` :
+
+| Filtre | Options | Défaut |
+|--------|---------|--------|
+| Projet | Tous les projets de l'utilisateur | Tous |
+| Groupe | Groupes (filtrés par projet sélectionné si applicable) | Tous |
+| Type (tags) | Tous les tags | Tous |
+| Priorité | Toutes les priorités | Tous |
+| Effort | Tous les efforts | Tous |
+| Assigné | Tous les utilisateurs + option "Tous" | Utilisateur courant |
+
+#### Toggle de vue
+
+Deux boutons icônes en haut à droite (à côté des filtres) :
+- Icône grille/kanban → vue Kanban
+- Icône liste → vue Liste
+
+État persisté en localStorage ou simple ref (pas critique).
+
+#### Vue Kanban
+
+- Colonnes par statut (ordonnées par `position`), même layout que `projects/[id]/index.vue`
+- Chaque colonne contient les `TaskCard` filtrés ayant ce statut
+- Les tâches sans statut vont dans une section "Backlog" en première colonne
+- Les colonnes de statut sans tâches sont affichées (cohérent avec la vue projet)
+- Pas de drag-and-drop (pas pertinent en contexte cross-projet)
+
+#### Vue Liste
+
+- Lignes de tâches avec :
+  - Titre (bold)
+  - Badges : priorité (couleur) + tags (couleur)
+  - Code projet + numéro de tâche (ex: `SIRH-1`) — aligné à droite
+  - Icône timer (comme sur les TaskCard)
+- Pas d'affichage des temps (exclu du périmètre)
+- Séparation visuelle légère entre les lignes (border-bottom ou alternance de fond)
+
+#### Chargement des données
+
+Au montage, chargement parallèle :
+```typescript
+const [tasks, statuses, projects, efforts, priorities, tags, groups, users] = await Promise.all([
+    taskService.getFiltered({ assignee: currentUserId, archived: false }),
+    statusService.getAll(),
+    projectService.getAll(),
+    effortService.getAll(),
+    priorityService.getAll(),
+    tagService.getAll(),
+    groupService.getAll(),
+    userService.getAll()
+])
+```
+
+À chaque changement de filtre → nouvel appel API pour les tâches uniquement. Les données de référence (statuts, projets, etc.) ne sont chargées qu'une fois.
+
+#### Interactions
+
+- Clic sur une TaskCard ou ligne de liste → ouvre le `TaskModal` en mode édition
+- Après save/delete dans le modal → rechargement des tâches
+- Timer sur les cartes/lignes fonctionne via le `useTimerStore` existant
+
+### Service tasks — nouvelle méthode
+
+Ajout dans `frontend/services/tasks.ts` :
+
+```typescript
+getFiltered(params: Record<string, string | number | boolean | string[]>): Promise<Task[]>
+```
+
+Construit les query params à partir de l'objet et appelle `GET /api/tasks?...`. Convertit les ids en IRIs si nécessaire. Gère les paramètres tableau pour les relations ManyToMany (`tags[]`).
+
+### Navigation
+
+Nouveau `SidebarLink` dans `frontend/layouts/default.vue` :
+- Label : "Mes tâches"
+- Icône : `mdi:clipboard-check-outline` (ou similaire)
+- Position : entre "Tableau de bord" et "Projets"
+- Route : `/my-tasks`
+
+### Traductions (i18n)
+
+Clés à ajouter dans `fr.json` :
+- `myTasks.title` : "Mes tâches"
+- `myTasks.viewKanban` : "Vue Kanban"
+- `myTasks.viewList` : "Vue Liste"
+- `myTasks.allProjects` : "Tous les projets"
+- `myTasks.allGroups` : "Tous les groupes"
+- `myTasks.allTypes` : "Tous les types"
+- `myTasks.allPriorities` : "Toutes les priorités"
+- `myTasks.allEfforts` : "Tous les efforts"
+- `myTasks.allAssignees` : "Tous"
+- `myTasks.noTasks` : "Aucune tâche"
+- `myTasks.backlog` : "Backlog"
+- Sidebar : `sidebar.myTasks` : "Mes tâches"
+
+## Hors périmètre
+
+- Drag-and-drop entre colonnes (pas pertinent cross-projet)
+- Affichage des temps/durées sur les tâches
+- Pagination (à ajouter plus tard si nécessaire)
+- Création de tâche depuis cette page (utiliser la vue projet pour ça)
+- Recherche texte (pourra être ajoutée plus tard)

docs/superpowers/specs/2026-03-15-bookstack-connector-design.md

@@ -0,0 +1,316 @@
+# BookStack Connector — Design Spec
+
+**Date:** 2026-03-15
+**BookStack version:** v25.12.8
+**Pattern:** Mirror of Gitea connector
+
+## Overview
+
+Connecteur BookStack permettant de lier des documents (pages et livres) du wiki à des tâches Lesstime. Chaque projet peut être associé à une étagère (shelf) BookStack, et les utilisateurs peuvent rechercher et lier des pages/livres de cette étagère à leurs tâches.
+
+## Périmètre
+
+- Types liés : **pages** et **livres** (books)
+- Niveau projet : liaison à une **étagère** (shelf)
+- Niveau tâche : liaison à une ou plusieurs **pages/livres** de l'étagère du projet
+- Recherche : filtrée dans l'étagère du projet uniquement
+- Stockage : **référence** (titre + URL), pas d'aperçu du contenu
+- Auth BookStack : Token ID + Token Secret (header `Authorization: Token {id}:{secret}`)
+
+## Backend
+
+### Entités
+
+#### BookStackConfiguration (singleton)
+
+```php
+// src/Entity/BookStackConfiguration.php
+class BookStackConfiguration
+{
+    private ?int $id;
+    private ?string $url = null;
+    private ?string $encryptedTokenId = null;
+    private ?string $encryptedTokenSecret = null;
+
+    public function hasToken(): bool; // vérifie que les deux sont présents
+}
+```
+
+- Chiffrement via `TokenEncryptor` existant (même pattern que Gitea)
+- Repository avec `findSingleton()`
+
+#### TaskBookStackLink
+
+```php
+// src/Entity/TaskBookStackLink.php
+class TaskBookStackLink
+{
+    private ?int $id;
+    private Task $task;              // ManyToOne, CASCADE on delete
+    private int $bookstackId;        // ID dans BookStack
+    private string $bookstackType;   // 'page' | 'book'
+    private string $title;           // titre au moment du lien (cache)
+    private string $url;             // URL complète
+    private \DateTimeImmutable $createdAt;
+}
+```
+
+#### Project (extension)
+
+Ajout de deux champs :
+- `bookstackShelfId` (nullable int)
+- `bookstackShelfName` (nullable string) — cache du nom pour affichage
+
+### Service
+
+#### BookStackApiService
+
+```php
+// src/Service/BookStackApiService.php
+class BookStackApiService
+{
+    public function testConnection(): bool;
+    public function listShelves(): array;
+    public function searchInShelf(int $shelfId, string $query): array;
+    public function getPage(int $id): array;
+    public function getBook(int $id): array;
+}
+```
+
+- Utilise `HttpClientInterface` (Symfony HttpClient)
+- Auth : header `Authorization: Token {tokenId}:{tokenSecret}`
+- Timeout : 10 secondes
+- `testConnection()` : GET `/api/docs.json`
+- `listShelves()` : GET `/api/shelves` (paginé via `count`/`offset`, pas `page`/`limit` — spécificité BookStack)
+- `searchInShelf()` : algorithme en 3 étapes :
+  1. GET `/api/shelves/{shelfId}` → récupère la liste des `books` de l'étagère (IDs)
+  2. GET `/api/search?query={query} {type:page|book}` → recherche globale (espace entre query et filtre type, BookStack syntax)
+  3. Filtre côté PHP : pour les **books**, vérifie que `book.id` est dans la liste de l'étagère ; pour les **pages**, vérifie que `page.book_id` est dans la liste. Exclut les résultats `chapter` et `bookshelf`.
+  - Note : la liste des books de l'étagère peut être cachée en mémoire pour la durée de la requête.
+- `getPage()` : GET `/api/pages/{id}`
+- `getBook()` : GET `/api/books/{id}`
+
+#### BookStackApiException
+
+```php
+// src/Exception/BookStackApiException.php
+class BookStackApiException extends \RuntimeException {}
+```
+
+### API Resources & Endpoints
+
+#### Admin
+
+| Méthode | Route | Ressource API Platform | Sécurité |
+|---------|-------|----------------------|----------|
+| GET | `/api/settings/bookstack` | BookStackSettings | ROLE_ADMIN |
+| PUT | `/api/settings/bookstack` | BookStackSettings | ROLE_ADMIN |
+| POST | `/api/settings/bookstack/test` | BookStackTestConnection | ROLE_ADMIN |
+
+**BookStackSettings** (DTO) :
+- Read : `url`, `hasToken`
+- Write : `url`, `tokenId`, `tokenSecret`
+
+**BookStackTestConnection** (DTO) :
+- Read : `success`
+
+#### Projet
+
+| Méthode | Route | Ressource API Platform | Sécurité |
+|---------|-------|----------------------|----------|
+| GET | `/api/bookstack/shelves` | BookStackShelf | ROLE_ADMIN |
+
+**BookStackShelf** (DTO) :
+- Read : `id`, `name`
+
+L'étagère sélectionnée est sauvée via le PATCH existant de Project (`bookstackShelfId`, `bookstackShelfName`).
+
+#### Tâche
+
+| Méthode | Route | Ressource API Platform | Sécurité |
+|---------|-------|----------------------|----------|
+| GET | `/api/tasks/{taskId}/bookstack/links` | BookStackLink | Authenticated |
+| POST | `/api/tasks/{taskId}/bookstack/links` | BookStackLink | Authenticated |
+| DELETE | `/api/tasks/{taskId}/bookstack/links/{id}` | BookStackLink | Authenticated |
+| GET | `/api/tasks/{taskId}/bookstack/search?q=` | BookStackSearchResult | Authenticated |
+
+**BookStackLink** (DTO) :
+- Read : `id`, `bookstackId`, `bookstackType`, `title`, `url`, `createdAt`
+- Write : `bookstackId`, `bookstackType`, `title`, `url`
+
+**BookStackSearchResult** (DTO) :
+- Read : `id`, `type`, `name`, `url`
+
+### State Providers / Processors
+
+| Classe | Rôle |
+|--------|------|
+| `BookStackSettingsProvider` | Lit config singleton, retourne DTO masqué |
+| `BookStackSettingsProcessor` | Persiste config, chiffre tokens |
+| `BookStackTestConnectionProvider` | Appelle `testConnection()` |
+| `BookStackShelfProvider` | Appelle `listShelves()`, mappe en DTOs |
+| `BookStackLinkProvider` | Lit `TaskBookStackLink` par task ID |
+| `BookStackLinkProcessor` | POST : crée lien en DB / DELETE : supprime |
+| `BookStackSearchResultProvider` | Appelle `searchInShelf()`, mappe en DTOs |
+
+### Migration
+
+```sql
+CREATE TABLE bookstack_configuration (
+    id INT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
+    url VARCHAR(255) DEFAULT NULL,
+    encrypted_token_id TEXT DEFAULT NULL,
+    encrypted_token_secret TEXT DEFAULT NULL
+);
+
+CREATE TABLE task_bookstack_link (
+    id INT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
+    task_id INT NOT NULL REFERENCES task(id) ON DELETE CASCADE,
+    bookstack_id INT NOT NULL,
+    bookstack_type VARCHAR(10) NOT NULL,
+    title VARCHAR(255) NOT NULL,
+    url VARCHAR(500) NOT NULL,
+    created_at TIMESTAMP(0) WITHOUT TIME ZONE NOT NULL
+);
+
+CREATE INDEX IDX_task_bookstack_link_task_id ON task_bookstack_link (task_id);
+CREATE UNIQUE INDEX UNIQ_task_bookstack_link ON task_bookstack_link (task_id, bookstack_id, bookstack_type);
+
+ALTER TABLE project ADD bookstack_shelf_id INT DEFAULT NULL;
+ALTER TABLE project ADD bookstack_shelf_name VARCHAR(255) DEFAULT NULL;
+```
+
+### Variable d'environnement
+
+Prérequis : renommer `GITEA_ENCRYPTION_KEY` en `ENCRYPTION_KEY` (générique) dans `TokenEncryptor`, `.env`, et `docker/.env.docker`. Mettre à jour le message d'erreur dans `TokenEncryptor`. Cela permet de réutiliser le même service pour chiffrer les tokens BookStack (deux appels `encrypt()`/`decrypt()` : un pour tokenId, un pour tokenSecret).
+
+### Notes techniques
+
+- `BookStackTestConnectionProvider` implémente à la fois `ProviderInterface` et `ProcessorInterface` (même pattern que `GiteaTestConnectionProvider`)
+- Les endpoints collection du frontend utilisent `extractHydraMembers()` pour extraire les résultats des réponses Hydra
+- Les titres/URLs stockés dans `TaskBookStackLink` sont des snapshots au moment du lien — pas de rafraîchissement automatique (intentionnel)
+- Le select étagère dans `ProjectDrawer` n'est affiché que pour les admins (endpoint `ROLE_ADMIN`)
+
+## Frontend
+
+### Service
+
+```typescript
+// frontend/services/bookstack.ts
+export function useBookStackService() {
+    // Admin
+    async function getSettings(): Promise<BookStackSettings>
+    async function saveSettings(payload: BookStackSettingsWrite): Promise<BookStackSettings>
+    async function testConnection(): Promise<BookStackTestResult>
+
+    // Projet
+    async function listShelves(): Promise<BookStackShelf[]>
+
+    // Tâche
+    async function getLinks(taskId: number): Promise<BookStackLink[]>
+    async function addLink(taskId: number, payload: BookStackLinkCreate): Promise<BookStackLink>
+    async function removeLink(taskId: number, linkId: number): Promise<void>
+    async function search(taskId: number, query: string): Promise<BookStackSearchResult[]>
+}
+```
+
+### DTOs
+
+```typescript
+// frontend/services/dto/bookstack.ts
+type BookStackSettings = { url: string | null; hasToken: boolean }
+type BookStackSettingsWrite = { url: string | null; tokenId: string | null; tokenSecret: string | null }
+type BookStackTestResult = { success: boolean }
+type BookStackShelf = { id: number; name: string }
+type BookStackLink = { id: number; bookstackId: number; bookstackType: 'page' | 'book'; title: string; url: string; createdAt: string }
+type BookStackLinkCreate = { bookstackId: number; bookstackType: 'page' | 'book'; title: string; url: string }
+type BookStackSearchResult = { id: number; type: 'page' | 'book'; name: string; url: string }
+```
+
+### Composants
+
+#### AdminBookStackTab.vue
+
+Onglet admin (même pattern que `AdminGiteaTab.vue`) :
+- Champs : URL, Token ID, Token Secret
+- Bouton "Tester la connexion" avec indicateur résultat
+- Indicateur "Token configuré" (ne montre jamais le token)
+- Sauvegarde via `saveSettings()`
+
+#### ProjectDrawer.vue (extension)
+
+- Si BookStack est configuré : select pour choisir une étagère
+- Charge `listShelves()` à l'ouverture
+- Sauvegarde `bookstackShelfId` + `bookstackShelfName` sur le projet via PATCH
+
+#### TaskBookStackLinks.vue
+
+Petit composant intégré dans `TaskModal.vue`, visible directement :
+- **Input de recherche** avec debounce (~300ms) → appel `search(taskId, query)` → dropdown résultats
+- Chaque résultat : icône (page 📄 / livre 📕) + titre — clic pour ajouter
+- **Liste des liens** sous le champ recherche : icône type + titre cliquable (ouvre BookStack dans nouvel onglet) + bouton × supprimer
+- Affiché uniquement si le projet de la tâche a une shelf BookStack configurée
+- Charge les liens existants au mount via `getLinks(taskId)`
+
+#### TaskModal.vue (extension)
+
+- Ajoute `<TaskBookStackLinks>` dans le modal, conditionné par `project.bookstackShelfId`
+- Passe `taskId` et `projectId` en props
+
+## Fichiers à créer/modifier
+
+### Backend — Nouveaux fichiers
+
+```
+src/Entity/BookStackConfiguration.php
+src/Entity/TaskBookStackLink.php
+src/Repository/BookStackConfigurationRepository.php
+src/Repository/TaskBookStackLinkRepository.php
+src/Service/BookStackApiService.php
+src/Exception/BookStackApiException.php
+src/ApiResource/BookStackSettings.php
+src/ApiResource/BookStackTestConnection.php
+src/ApiResource/BookStackShelf.php
+src/ApiResource/BookStackLink.php
+src/ApiResource/BookStackSearchResult.php
+src/State/BookStackSettingsProvider.php
+src/State/BookStackSettingsProcessor.php
+src/State/BookStackTestConnectionProvider.php
+src/State/BookStackShelfProvider.php
+src/State/BookStackLinkProvider.php
+src/State/BookStackLinkProcessor.php
+src/State/BookStackSearchResultProvider.php
+migrations/VersionXXXX.php
+```
+
+### Backend — Fichiers modifiés
+
+```
+src/Entity/Project.php  (ajout bookstackShelfId, bookstackShelfName)
+src/Service/TokenEncryptor.php  (renommage GITEA_ENCRYPTION_KEY → ENCRYPTION_KEY)
+```
+
+### Config — Fichiers modifiés
+
+```
+.env  (renommage GITEA_ENCRYPTION_KEY → ENCRYPTION_KEY)
+```
+
+> Note : `docker/.env.docker` ne contient pas `GITEA_ENCRYPTION_KEY`. Les développeurs utilisant `docker/.env.docker.local` doivent le mettre à jour manuellement.
+
+### Frontend — Nouveaux fichiers
+
+```
+frontend/services/bookstack.ts
+frontend/services/dto/bookstack.ts
+frontend/components/admin/AdminBookStackTab.vue
+frontend/components/task/TaskBookStackLinks.vue
+```
+
+### Frontend — Fichiers modifiés
+
+```
+frontend/components/task/TaskModal.vue  (ajout TaskBookStackLinks)
+frontend/components/project/ProjectDrawer.vue  (ajout select étagère)
+frontend/components/admin/  (ajout onglet BookStack dans la page admin)
+```

docs/superpowers/specs/2026-03-15-client-portal-design.md

@@ -0,0 +1,523 @@
+# Portail Client — Design Spec
+
+## Résumé
+
+Ajout d'un portail client dans Lesstime permettant aux utilisateurs-clients de soumettre des tickets (bug, amélioration, autre) sur leurs projets, suivre l'évolution de leur traitement, et joindre des documents. Les utilisateurs internes (ROLE_ADMIN, ROLE_USER) gèrent les tickets côté admin et peuvent les lier manuellement à des tasks existantes. Un système de notifications in-app informe les parties prenantes des événements clés.
+
+## Décisions d'architecture
+
+- **ClientTicket est une entité séparée de Task** — cycle de vie indépendant, meilleure séparation de sécurité, maintenance simplifiée
+- **Même application, vue adaptée par rôle** — pas de portail séparé. ROLE_CLIENT voit les pages `/portal`, ROLE_ADMIN/ROLE_USER voit l'app interne
+- **Pas de commentaires/échanges** — communication unidirectionnelle : le client soumet, voit les changements de statut, c'est tout
+- **Notifications in-app uniquement** — pas d'email pour le moment
+- **Lien ticket-task manuel** — le manager crée des tasks et les lie explicitement à un ticket client
+- **TaskDocument conservée** — l'entité `TaskDocument` n'est pas renommée, elle est généralisée avec un champ `clientTicket` nullable
+- **Français uniquement** — l'interface est en français pour le moment, l'anglais pourra être ajouté plus tard
+
+## Prérequis : sécurisation des endpoints existants
+
+Avant l'introduction du rôle `ROLE_CLIENT`, il faut sécuriser l'application existante.
+
+### Modification de `User::getRoles()`
+
+Actuellement, `User::getRoles()` ajoute inconditionnellement `ROLE_USER` à tous les utilisateurs. Un utilisateur `ROLE_CLIENT` hériterait donc de `ROLE_USER` et pourrait accéder à toutes les données internes.
+
+**Correction** : `getRoles()` doit ajouter `ROLE_USER` uniquement si l'utilisateur n'a PAS le rôle `ROLE_CLIENT` :
+
+```php
+public function getRoles(): array
+{
+    $roles = $this->roles;
+    if (!in_array('ROLE_CLIENT', $roles, true)) {
+        $roles[] = 'ROLE_USER';
+    }
+
+    return array_unique($roles);
+}
+```
+
+### Ajout de `security` sur les endpoints existants
+
+Les endpoints existants suivants n'ont pas d'annotation `security` explicite et doivent recevoir `security: "is_granted('ROLE_USER')"` sur leurs opérations `GetCollection` et `Get` :
+
+| Entité | Opérations à sécuriser |
+|--------|----------------------|
+| `Task` | GetCollection, Get |
+| `Project` | GetCollection, Get |
+| `Client` | GetCollection, Get |
+| `TaskStatus` | GetCollection, Get |
+| `TaskEffort` | GetCollection, Get |
+| `TaskPriority` | GetCollection, Get |
+| `TaskTag` | GetCollection, Get |
+| `TaskGroup` | GetCollection, Get |
+| `TimeEntry` | GetCollection, Get |
+
+Cela garantit qu'un utilisateur `ROLE_CLIENT` ne peut pas accéder aux ressources internes via l'API.
+
+## Modèle de données
+
+### Entité `ClientTicket`
+
+| Champ | Type | Description |
+|-------|------|-------------|
+| `id` | int (auto) | Clé primaire |
+| `number` | int | Auto-généré, unique par projet (voir stratégie ci-dessous) |
+| `type` | string (enum) | `bug`, `improvement`, `other` |
+| `title` | string | Requis |
+| `description` | text | Requis |
+| `url` | string (nullable) | Affiché uniquement si `type = bug` |
+| `status` | string (enum) | `new`, `in_progress`, `done`, `rejected` |
+| `statusComment` | text (nullable) | Commentaire du manager lors d'un changement de statut |
+| `project` | ManyToOne → Project | Requis |
+| `submittedBy` | ManyToOne → User (nullable) | L'utilisateur-client ayant soumis le ticket. **ON DELETE SET NULL** — ne pas détruire l'historique lors de la suppression d'un utilisateur |
+| `createdAt` | DateTimeImmutable | Auto |
+| `updatedAt` | DateTimeImmutable | Auto |
+
+#### Stratégie de numérotation
+
+Numéro incrémental par projet : `SELECT MAX(number) + 1 FROM client_ticket WHERE project_id = :project`. Contrainte unique sur `(project_id, number)` avec retry en cas de conflit (concurrent insert). Le numéro affiché sera formaté `CT-001`, `CT-002`, etc. en frontend.
+
+### Statuts des tickets (enum fixe, non configurable)
+
+| Statut | Description |
+|--------|-------------|
+| `new` | Ticket venant d'être soumis |
+| `in_progress` | Pris en charge par un manager |
+| `done` | Résolu, client notifié |
+| `rejected` | Non retenu — `statusComment` obligatoire |
+
+#### Transitions de statut autorisées
+
+Toutes les transitions sont autorisées, **sauf** :
+- `done` → `new` (interdit)
+- `rejected` → `new` (interdit)
+
+Un ticket `done` peut repasser en `in_progress` si besoin. Un ticket `rejected` peut passer en `in_progress`. Le Processor valide les transitions et rejette les transitions interdites.
+
+### Entité `Notification`
+
+| Champ | Type | Description |
+|-------|------|-------------|
+| `id` | int (auto) | Clé primaire |
+| `user` | ManyToOne → User | Destinataire |
+| `type` | string | `ticket_created`, `ticket_status_changed` |
+| `title` | string | Titre court |
+| `message` | text | Contenu |
+| `relatedTicket` | ManyToOne → ClientTicket (nullable) | Lien vers le ticket concerné |
+| `isRead` | bool | `false` par défaut |
+| `createdAt` | DateTimeImmutable | Auto |
+
+### Modifications sur `User`
+
+| Champ | Type | Description |
+|-------|------|-------------|
+| `client` | ManyToOne → Client (nullable) | `null` = utilisateur interne, set = utilisateur-client |
+| `allowedProjects` | ManyToMany → Project | Projets auxquels l'utilisateur-client a accès |
+
+Nouveau rôle : `ROLE_CLIENT`
+
+#### Groupes de sérialisation
+
+| Champ | Groupes |
+|-------|---------|
+| `client` | `me:read`, `user:read`, `user:write` |
+| `allowedProjects` | `me:read`, `user:read`, `user:write` |
+
+Règles :
+- Plusieurs utilisateurs par client (1+)
+- Les utilisateurs-clients sont assignés à des projets spécifiques (pas tous les projets du client)
+- L'admin crée les comptes utilisateurs-clients (pas d'auto-inscription)
+
+### Modifications sur `Task`
+
+| Champ | Type | Description |
+|-------|------|-------------|
+| `clientTicket` | ManyToOne → ClientTicket (nullable) | Lien vers un ticket client |
+
+Le champ `clientTicket` est exposé dans le groupe `task:read` avec les informations de base du ticket (number, type, status, title). Cela permet aux utilisateurs ROLE_USER d'afficher l'icône et le tooltip dans le kanban sans avoir accès à la collection `/api/client_tickets`.
+
+### Généralisation de `TaskDocument`
+
+L'entité `TaskDocument` existante est **conservée** (pas de renommage) et généralisée avec un champ supplémentaire :
+
+| Champ | Modification |
+|-------|-------------|
+| `task` | Devient nullable |
+| `clientTicket` | ManyToOne → ClientTicket (nullable) — ajouté |
+
+**Contrainte** : au moins un des deux champs `task` / `clientTicket` doit être renseigné (CHECK constraint en base).
+
+**Processor** : généralisé pour accepter `task` OU `clientTicket` dans le FormData.
+
+**Sécurité** :
+- ROLE_ADMIN : accès complet à tous les documents
+- ROLE_USER : accès aux documents liés à une task (`task IS NOT NULL`)
+- ROLE_CLIENT : accès aux documents liés à un ticket dont l'utilisateur est le `submittedBy`
+
+## API Endpoints
+
+Préfixe `/api`.
+
+### ClientTicket
+
+| Méthode | Route | Accès | Notes |
+|---------|-------|-------|-------|
+| `GET` | `/api/client_tickets` | ROLE_CLIENT : ses propres tickets ; ROLE_ADMIN : tous | Filtres : `project`, `status`, `submittedBy` |
+| `GET` | `/api/client_tickets/{id}` | Owner ou ROLE_ADMIN | |
+| `POST` | `/api/client_tickets` | ROLE_CLIENT | `submittedBy` auto-set depuis le token JWT. Le Processor valide que `user.client` n'est pas null (empêche un admin de créer un ticket même via la hiérarchie de rôles) |
+| `PATCH` | `/api/client_tickets/{id}` | ROLE_ADMIN uniquement | Changement de statut + `statusComment` |
+| `DELETE` | `/api/client_tickets/{id}` | ROLE_ADMIN | Cascade sur les documents liés |
+
+**Note** : ROLE_USER n'a PAS accès à la collection `/api/client_tickets`. L'accès en lecture aux informations d'un ticket se fait via le champ `task.clientTicket` exposé dans le groupe `task:read`.
+
+### Notification
+
+| Méthode | Route | Accès | Notes |
+|---------|-------|-------|-------|
+| `GET` | `/api/notifications` | Authentifié | Auto-filtré par l'utilisateur courant. Paginé : 30 par page |
+| `PATCH` | `/api/notifications/{id}` | Owner | Marquer comme lu |
+| `POST` | `/api/notifications/mark-all-read` | Authentifié | **Endpoint Symfony custom** (controller dédié, pas une opération API Platform) |
+| `GET` | `/api/notifications/unread-count` | Authentifié | Retourne le count |
+
+**Nettoyage** : prévoir un cron de purge ultérieur (suppression des notifications > 90 jours). Pas implémenté dans la première version.
+
+### TaskDocument
+
+- Les endpoints existants restent, avec ajout du filtre `clientTicket`
+- Le Processor accepte `task` OU `clientTicket`
+- Sécurité : ROLE_ADMIN (tous), ROLE_USER (documents liés à une task), ROLE_CLIENT (documents liés à un ticket dont l'utilisateur est le `submittedBy`)
+
+## State Providers & Processors
+
+### `ClientTicketProvider`
+
+- ROLE_CLIENT : filtre par `submittedBy` = utilisateur courant
+- ROLE_ADMIN : retourne tous les tickets
+- Vérifie que l'utilisateur-client a accès au projet du ticket (via `allowedProjects`)
+
+### `ClientTicketNumberProcessor`
+
+- Sur `POST` : auto-génère le numéro via `SELECT MAX(number) FROM client_ticket WHERE project_id = :project` + 1, avec contrainte unique `(project_id, number)` et retry en cas de conflit
+- Valide que `user.client` n'est pas null (empêche la création par un admin même si ROLE_ADMIN hérite de ROLE_CLIENT)
+- Set `submittedBy` depuis le token JWT courant
+- Set `status` à `new`
+- Set `createdAt` et `updatedAt`
+
+### `ClientTicketStatusProcessor`
+
+- Sur `PATCH` : valide la transition de statut
+- Transitions interdites : `done` → `new`, `rejected` → `new`
+- `statusComment` obligatoire si le nouveau statut est `rejected`
+- Met à jour `updatedAt`
+
+### `ClientTicketNotificationProcessor`
+
+- Sur `POST` (ticket créé) : crée une `Notification` pour tous les utilisateurs ROLE_ADMIN
+  - Type : `ticket_created`
+  - Title : "Nouveau ticket client CT-XXX"
+  - Message : titre du ticket + nom du projet
+- Sur `PATCH` (changement de statut) : crée une `Notification` pour le `submittedBy`
+  - Type : `ticket_status_changed`
+  - Title : "Ticket CT-XXX mis à jour"
+  - Message : nouveau statut + `statusComment` si présent
+
+### `NotificationProvider`
+
+- Toujours filtré par l'utilisateur courant (`user` = token JWT)
+- Paginé : 30 résultats par page
+- Endpoint `unread-count` : `SELECT COUNT(*) WHERE user = :user AND isRead = false`
+
+### `MarkAllReadController`
+
+Endpoint custom Symfony (`POST /api/notifications/mark-all-read`) :
+- Récupère l'utilisateur depuis le token JWT
+- Exécute `UPDATE notification SET is_read = true WHERE user_id = :user AND is_read = false`
+- Retourne `204 No Content`
+
+## Frontend
+
+### Routing & Middleware
+
+Modification de `auth.global.ts` :
+- ROLE_CLIENT → redirigé vers `/portal`, accès bloqué à `/projects`, `/admin`, `/time-tracking`, etc.
+- ROLE_ADMIN / ROLE_USER → peut accéder à `/portal` pour voir la vue côté client
+
+### Pages du portail
+
+#### `/portal` — Liste des projets
+
+- Affiche les projets auxquels l'utilisateur-client a accès (`allowedProjects`)
+- Cartes simples : nom du projet, nombre de tickets ouverts
+- Clic → `/portal/projects/{id}`
+
+#### `/portal/projects/{id}` — Tickets d'un projet
+
+- Liste des tickets soumis sur ce projet
+- Pour chaque ticket : numéro (CT-XXX), type badge, titre, statut badge, date de création
+- Bouton "Nouveau ticket" → `/portal/projects/{id}/new-ticket`
+- Clic sur un ticket → modale de détail (lecture seule : titre, description, url, statut, statusComment, documents)
+
+#### `/portal/projects/{id}/new-ticket` — Formulaire de création
+
+- Select type : `bug`, `improvement`, `other`
+- Champ title (requis)
+- Champ description (requis, textarea)
+- Champ url (affiché uniquement si `type = bug`)
+- Zone d'upload de documents (réutilise les composants TaskDocument existants)
+- Bouton soumettre
+
+### Modifications des pages existantes
+
+#### Kanban (`/projects/{id}`)
+
+- Icône `heroicons:user-circle` affichée à côté du titre de la task si `task.clientTicket` est set
+- Tooltip au survol : "Lié au ticket client CT-XXX" (données disponibles via `task:read`)
+
+#### `/my-tasks`
+
+- Même icône et tooltip que le kanban
+
+#### `/admin` — Nouvel onglet "Tickets client"
+
+- Liste de tous les tickets, avec filtres par projet et statut
+- Pour chaque ticket : numéro, type, titre, statut, projet, soumis par, date
+- Actions :
+  - Changer le statut (select + champ statusComment si rejection)
+  - Voir le détail du ticket (modale avec documents)
+
+### Services API
+
+#### `frontend/services/client-tickets.ts`
+
+```typescript
+getAll(params?: { project?: number; status?: string; submittedBy?: number }): Promise<ClientTicket[]>
+getById(id: number): Promise<ClientTicket>
+create(data: { type: string; title: string; description: string; url?: string; project: string }): Promise<ClientTicket>
+updateStatus(id: number, data: { status: string; statusComment?: string }): Promise<ClientTicket>
+remove(id: number): Promise<void>
+```
+
+#### `frontend/services/notifications.ts`
+
+```typescript
+getAll(page?: number): Promise<Notification[]>
+markAsRead(id: number): Promise<void>
+markAllAsRead(): Promise<void>
+getUnreadCount(): Promise<number>
+```
+
+### DTOs TypeScript
+
+#### `frontend/services/dto/client-ticket.ts`
+
+```typescript
+type ClientTicketType = 'bug' | 'improvement' | 'other'
+type ClientTicketStatus = 'new' | 'in_progress' | 'done' | 'rejected'
+
+type ClientTicket = {
+    '@id'?: string
+    id: number
+    number: number
+    type: ClientTicketType
+    title: string
+    description: string
+    url: string | null
+    status: ClientTicketStatus
+    statusComment: string | null
+    project: string          // IRI
+    submittedBy: string | null  // IRI, nullable (ON DELETE SET NULL)
+    createdAt: string
+    updatedAt: string
+    documents?: TaskDocument[]
+}
+```
+
+#### `frontend/services/dto/notification.ts`
+
+```typescript
+type NotificationType = 'ticket_created' | 'ticket_status_changed'
+
+type Notification = {
+    '@id'?: string
+    id: number
+    user: string             // IRI
+    type: NotificationType
+    title: string
+    message: string
+    relatedTicket: string | null  // IRI
+    isRead: boolean
+    createdAt: string
+}
+```
+
+### Composants réutilisés
+
+- `TaskDocumentUpload` → généralisé avec prop `clientTicketId` comme alternative à `taskId`
+- `TaskDocumentList` + `TaskDocumentPreview` → réutilisés dans la modale de détail du ticket
+
+### Composants à créer
+
+#### `frontend/components/notification/NotificationBell.vue`
+
+- Placé dans le header de la navbar
+- Icône cloche avec badge rouge (nombre de notifications non lues)
+- Clic → dropdown avec les notifications récentes (paginé, 30 par page)
+- Chaque notification : titre, message (tronqué), date relative, indicateur lu/non-lu
+- Clic sur une notification → marque comme lue + navigation vers le ticket lié
+- Bouton "Tout marquer comme lu"
+
+### Composable `useNotifications()`
+
+```typescript
+const useNotifications = () => {
+    const unreadCount: Ref<number>
+    const notifications: Ref<Notification[]>
+
+    const fetchNotifications: (page?: number) => Promise<void>
+    const fetchUnreadCount: () => Promise<void>
+    const markAsRead: (id: number) => Promise<void>
+    const markAllAsRead: () => Promise<void>
+
+    // Polling toutes les 2 minutes
+    const startPolling: () => void
+    const stopPolling: () => void
+}
+```
+
+Le polling démarre au montage de `NotificationBell` et s'arrête au démontage.
+
+### Clés i18n
+
+Ajouter dans `frontend/i18n/locales/fr.json` (français uniquement pour le moment) :
+
+```
+# Portal
+portal.title                    → "Portail client"
+portal.projects                 → "Mes projets"
+portal.openTickets              → "tickets ouverts"
+portal.newTicket                → "Nouveau ticket"
+portal.ticketDetail             → "Détail du ticket"
+
+# Client Ticket
+clientTicket.type.bug           → "Bug"
+clientTicket.type.improvement   → "Amélioration"
+clientTicket.type.other         → "Autre"
+clientTicket.status.new         → "Nouveau"
+clientTicket.status.in_progress → "En cours"
+clientTicket.status.done        → "Terminé"
+clientTicket.status.rejected    → "Rejeté"
+clientTicket.title              → "Titre"
+clientTicket.description        → "Description"
+clientTicket.url                → "URL (page concernée)"
+clientTicket.statusComment      → "Commentaire de statut"
+clientTicket.created            → "Ticket créé"
+clientTicket.statusChanged      → "Statut mis à jour"
+clientTicket.confirmDelete      → "Supprimer ce ticket ?"
+clientTicket.linkedTooltip      → "Lié au ticket client {number}"
+clientTicket.rejectionRequired  → "Un commentaire est requis pour rejeter un ticket"
+
+# Notifications
+notification.title              → "Notifications"
+notification.markAllRead        → "Tout marquer comme lu"
+notification.empty              → "Aucune notification"
+notification.ticketCreated      → "Nouveau ticket client {number}"
+notification.ticketStatusChanged → "Ticket {number} mis à jour"
+```
+
+## Migration
+
+### Nouvelles tables
+
+**`client_ticket`** :
+- Colonnes correspondant à l'entité `ClientTicket`
+- Index sur `project_id`
+- Index sur `submitted_by_id`
+- Index composite sur `(status, project_id)` pour les filtres admin
+- Contrainte unique sur `(project_id, number)` pour la numérotation par projet
+- FK `project_id` → `project.id` ON DELETE CASCADE
+- FK `submitted_by_id` → `user.id` **ON DELETE SET NULL**
+
+**`notification`** :
+- Colonnes correspondant à l'entité `Notification`
+- Index sur `user_id`
+- Index composite sur `(user_id, is_read)` pour le count non-lu
+- FK `user_id` → `user.id` ON DELETE CASCADE
+- FK `related_ticket_id` → `client_ticket.id` ON DELETE SET NULL
+
+**`user_allowed_projects`** (table de jointure ManyToMany) :
+- `user_id` → `user.id` ON DELETE CASCADE
+- `project_id` → `project.id` ON DELETE CASCADE
+
+### Modifications de tables existantes
+
+**`user`** :
+- Ajout colonne `client_id` (nullable) — FK → `client.id` ON DELETE SET NULL
+
+**`task`** :
+- Ajout colonne `client_ticket_id` (nullable) — FK → `client_ticket.id` ON DELETE SET NULL
+
+**`task_document`** (table conservée, pas de renommage) :
+- Colonne `task_id` devient nullable
+- Ajout colonne `client_ticket_id` (nullable) — FK → `client_ticket.id` ON DELETE CASCADE
+- Contrainte CHECK : `task_id IS NOT NULL OR client_ticket_id IS NOT NULL`
+
+## Sécurité
+
+### Hiérarchie des rôles
+
+```yaml
+# config/packages/security.yaml
+security:
+    role_hierarchy:
+        ROLE_ADMIN: [ROLE_USER, ROLE_CLIENT]
+```
+
+### Contrôle d'accès
+
+| Ressource | ROLE_CLIENT | ROLE_USER | ROLE_ADMIN |
+|-----------|-------------|-----------|------------|
+| ClientTicket (ses propres) | Lecture + Création | Lecture via `task:read` (champ `task.clientTicket`) | CRUD complet |
+| ClientTicket collection `/api/client_tickets` | Ses propres tickets | — | Tous |
+| Notification (ses propres) | Lecture + Mark as read | Lecture + Mark as read | Lecture + Mark as read |
+| TaskDocument (lié à une task) | — | Lecture | CRUD complet |
+| TaskDocument (lié à un ticket) | Lecture + Upload (si `submittedBy` = soi) | — | CRUD complet |
+| Task, Project, Client, TimeEntry, TaskStatus, TaskEffort, TaskPriority, TaskTag, TaskGroup | — | Accès normal (`is_granted('ROLE_USER')`) | Accès normal |
+| Pages /portal | Accès | Accès | Accès |
+| Pages /projects, /admin | — | Accès | Accès |
+
+### Validation du Provider ClientTicket
+
+- ROLE_CLIENT : vérifie que le projet du ticket fait partie de `allowedProjects` de l'utilisateur
+- ROLE_CLIENT : ne peut voir que les tickets où `submittedBy` = lui-même
+- ROLE_ADMIN : aucune restriction
+
+### Validation du Processor ClientTicket (POST)
+
+- Vérifie que `user.client` n'est pas null — un utilisateur admin ne peut pas créer de ticket même s'il hérite de ROLE_CLIENT via la hiérarchie de rôles
+
+## Phases de livraison
+
+### Phase 1 — Fondations
+
+1. **Prérequis sécurité** : modifier `User::getRoles()` pour ne plus ajouter `ROLE_USER` aux utilisateurs `ROLE_CLIENT` ; ajouter `security: "is_granted('ROLE_USER')"` sur les opérations GetCollection/Get de Task, Project, Client, TaskStatus, TaskEffort, TaskPriority, TaskTag, TaskGroup, TimeEntry
+2. Modifier `User` : ajouter `client` (ManyToOne → Client, nullable), `allowedProjects` (ManyToMany → Project), rôle `ROLE_CLIENT`, groupes de sérialisation `me:read`, `user:read`, `user:write`
+3. Généraliser `TaskDocument` : `task` devient nullable, ajout `clientTicket` (ManyToOne → ClientTicket, nullable), contrainte CHECK, Processor généralisé
+4. Créer l'entité `ClientTicket` + migration (avec contrainte unique `(project_id, number)`)
+5. API CRUD `ClientTicket` avec sécurité (Provider, Processor, validation `user.client` sur POST, validation des transitions de statut sur PATCH)
+6. Admin : gestion des utilisateurs-clients (créer un user avec ROLE_CLIENT, lié à un client + projets autorisés)
+
+### Phase 2 — Portail client
+
+1. Pages `/portal`, `/portal/projects/{id}`, formulaire de création de ticket
+2. Upload de documents sur les tickets (réutilisation des composants TaskDocument existants, généralisés avec prop `clientTicketId`)
+3. Lien `Task.clientTicket` + icône dans le kanban et `/my-tasks` (données via `task:read`)
+4. Admin : onglet tickets client (liste, changement de statut)
+
+### Phase 3 — Notifications
+
+1. Entité `Notification` + API (paginé, 30 par page)
+2. `MarkAllReadController` — endpoint Symfony custom (`POST /api/notifications/mark-all-read`)
+3. Auto-création des notifications dans le `ClientTicketNotificationProcessor`
+4. `NotificationBell.vue` avec polling toutes les 2 minutes
+5. Composable `useNotifications()`
+6. Note : prévoir un cron de purge ultérieur (suppression des notifications > 90 jours)

docs/superpowers/specs/2026-03-15-task-documents-design.md

@@ -0,0 +1,218 @@
+# Task Documents — Design Spec
+
+## Overview
+
+Ajout d'un système de documents attachés aux tickets (tasks). Les utilisateurs peuvent uploader des fichiers via drag & drop ou sélection, les visualiser (images, PDF) dans une modale plein écran, et les télécharger.
+
+## Contraintes
+
+- **Taille max par fichier** : 50 Mo
+- **Types acceptés** : tous types de fichiers
+- **Nombre par ticket** : illimité
+- **Stockage** : filesystem local (`var/uploads/documents/`)
+- **Permissions** : ROLE_ADMIN pour créer/supprimer, ROLE_USER pour lire
+- **Contexte** : application single-tenant, tous les utilisateurs voient tous les projets — pas de scoping projet
+
+## Backend
+
+### Entité `TaskDocument`
+
+| Champ | Type | Description |
+|-------|------|-------------|
+| `id` | int (auto) | Clé primaire |
+| `task` | ManyToOne → Task | Ticket parent (CASCADE on delete) |
+| `originalName` | string (255) | Nom original du fichier uploadé |
+| `fileName` | string (255) | Nom unique sur disque (`{uuid}.{extension}`) |
+| `mimeType` | string (100) | Type MIME (ex: `image/png`, `application/pdf`) |
+| `size` | int | Taille en octets |
+| `createdAt` | DateTimeImmutable | Date d'upload |
+| `uploadedBy` | ManyToOne → User | Utilisateur ayant uploadé (SET NULL on delete) |
+
+### Relation inverse sur Task
+
+- `Task.documents` : OneToMany → TaskDocument, avec `cascade: ['remove']` côté Doctrine
+- Sérialisé dans le groupe `task:read` pour charger les documents avec le ticket
+
+### Nettoyage des fichiers à la suppression
+
+Quand un `TaskDocument` est supprimé (directement ou par cascade depuis Task), le fichier physique doit aussi être supprimé. Stratégie :
+
+- **Doctrine EntityListener** (`TaskDocumentListener`) avec événement `preRemove`
+- Récupère le `fileName` de l'entité et supprime le fichier de `var/uploads/documents/`
+- Si le fichier n'existe pas sur disque (déjà supprimé manuellement), log un warning et continue sans erreur
+
+Ceci couvre les deux cas :
+1. Suppression directe d'un document via `DELETE /api/task_documents/{id}`
+2. Suppression en cascade quand une Task est supprimée
+
+### Stockage filesystem
+
+- Répertoire : `var/uploads/documents/`
+- Nommage : `{uuid}.{extension}` — évite les collisions et les caractères spéciaux
+- Volume Docker dédié pour persister les uploads
+- Ajouter `var/uploads/` dans `.gitignore`
+
+### Téléchargement des fichiers
+
+Endpoint dédié Symfony servi via un State Provider :
+
+| Méthode | Route | Description | Accès |
+|---------|-------|-------------|-------|
+| `GET` | `/api/task_documents/{id}/download` | Télécharge le fichier (BinaryFileResponse) | ROLE_USER |
+
+- Contrôle d'accès via authentification JWT (pas d'accès anonyme)
+- Retourne le fichier avec les headers `Content-Disposition` (inline pour images/PDF, attachment pour les autres)
+- Le frontend n'expose jamais le `fileName` interne dans l'URL — utilise l'`id` du document
+
+### API Endpoints
+
+| Méthode | Route | Description | Accès |
+|---------|-------|-------------|-------|
+| `POST` | `/api/task_documents` | Upload multipart/form-data | ROLE_ADMIN |
+| `GET` | `/api/task_documents?task=/api/tasks/{id}` | Liste documents d'un ticket | ROLE_USER |
+| `GET` | `/api/task_documents/{id}` | Métadonnées d'un document | ROLE_USER |
+| `GET` | `/api/task_documents/{id}/download` | Télécharge le fichier | ROLE_USER |
+| `DELETE` | `/api/task_documents/{id}` | Supprime document + fichier | ROLE_ADMIN |
+
+### State Processor — POST (`TaskDocumentProcessor`)
+
+1. Reçoit le fichier via multipart/form-data + IRI de la task
+2. Valide : fichier non vide, taille ≤ 50 Mo
+3. Génère un UUID v4, extrait l'extension du nom original
+4. Déplace le fichier uploadé dans `var/uploads/documents/{uuid}.{ext}`
+5. Si le déplacement du fichier échoue, throw une exception — ne pas persister l'entité
+6. Crée et persiste l'entité `TaskDocument` avec toutes les métadonnées
+7. Set `uploadedBy` depuis le token JWT courant
+
+### State Processor — DELETE
+
+1. Supprime l'entité de la base de données
+2. Le nettoyage du fichier est géré automatiquement par le `TaskDocumentListener.preRemove`
+
+### Validation
+
+- Contrainte sur `originalName` : NotBlank
+- Contrainte sur `task` : NotNull
+- Validation dans le Processor : taille fichier ≤ 50 Mo, fichier présent dans la requête
+- PHP `upload_max_filesize` et `post_max_size` à configurer ≥ 50 Mo
+
+### Configuration PHP/Nginx
+
+- `php.ini` : `upload_max_filesize = 50M`, `post_max_size = 55M`
+- Nginx : `client_max_body_size 55m;`
+
+## Frontend
+
+### Placement dans l'UI
+
+La zone de documents est placée **sous la description** dans le `TaskModal`, visible en mode édition.
+
+### Composants à créer
+
+Tous dans `frontend/components/task/` :
+
+#### `TaskDocumentUpload.vue`
+
+- Zone drag & drop avec bordure pointillée
+- Texte : "Glisser des fichiers ici ou cliquer pour sélectionner" (clé i18n : `taskDocuments.dropzone`)
+- Input file caché (`multiple`, `accept="*"`)
+- Événements : `dragover`, `dragleave`, `drop` pour le feedback visuel
+- Barre de progression par fichier pendant l'upload
+- Upload **séquentiel** (un POST multipart par fichier, un à la fois) — plus simple et prévisible pour les progress bars
+- Émet un événement quand l'upload est terminé pour rafraîchir la liste
+
+#### `TaskDocumentList.vue`
+
+- Grille de cartes compactes pour chaque document
+- **Images** (`image/*`) : miniature 64x64 en `object-fit: cover`, chargée depuis l'URL de download
+  - Note : les images sont chargées en pleine résolution pour les miniatures. C'est une limitation acceptée — la génération de thumbnails côté serveur pourra être ajoutée ultérieurement si besoin.
+- **Autres fichiers** : icône selon le type MIME :
+  - PDF → icône PDF
+  - Word/Excel → icônes Office
+  - Archives → icône archive
+  - Défaut → icône fichier générique
+- Informations affichées : nom original (tronqué si > ~30 chars), taille formatée (Ko/Mo)
+- Clic sur un document → ouvre `TaskDocumentPreview`
+- Bouton supprimer (visible uniquement pour ROLE_ADMIN, avec confirmation)
+
+#### `TaskDocumentPreview.vue`
+
+- Modale plein écran (overlay sombre semi-transparent)
+- Contenu selon le type :
+  - **Images** (`image/*`) : `<img>` centré, taille adaptative
+  - **PDF** (`application/pdf`) : `<iframe>` intégré
+  - **Autres** : grande icône + nom du fichier + taille + bouton "Télécharger"
+- Navigation : flèches gauche/droite pour parcourir les documents du ticket
+- Fermeture : bouton X en haut à droite, clic sur l'overlay, touche Escape
+- Raccourcis clavier : flèches pour naviguer, Escape pour fermer
+
+### Service API
+
+`frontend/services/task-documents.ts` :
+
+```typescript
+getByTask(taskId: number): Promise<TaskDocument[]>
+upload(taskId: number, file: File): Promise<TaskDocument>
+remove(id: number): Promise<void>
+getDownloadUrl(id: number): string  // Retourne `/api/task_documents/{id}/download`
+```
+
+**Note upload :** la fonction `upload` ne peut pas utiliser `useApi().post()` directement car celui-ci set `Content-Type: application/json`. L'upload doit utiliser `$fetch` directement avec un `FormData` comme body et ne PAS setter de `Content-Type` (le navigateur le fait automatiquement avec le boundary multipart).
+
+### DTO TypeScript
+
+`frontend/services/dto/task-document.ts` :
+
+```typescript
+type TaskDocument = {
+    '@id'?: string
+    id: number
+    task: string           // IRI
+    originalName: string
+    fileName: string
+    mimeType: string
+    size: number
+    createdAt: string
+    uploadedBy: string | null  // IRI ou null si user supprimé
+}
+```
+
+### Clés i18n
+
+Ajouter dans `frontend/i18n/locales/` :
+
+```
+taskDocuments.dropzone          → "Glisser des fichiers ici ou cliquer pour sélectionner"
+taskDocuments.uploaded          → "Document uploadé"
+taskDocuments.deleted           → "Document supprimé"
+taskDocuments.uploadError       → "Erreur lors de l'upload"
+taskDocuments.confirmDelete     → "Supprimer ce document ?"
+taskDocuments.download          → "Télécharger"
+taskDocuments.documents         → "Documents"
+```
+
+### Intégration dans TaskModal
+
+- Import des 3 composants dans `TaskModal.vue`
+- Sous le champ description :
+  1. `TaskDocumentUpload` (si mode édition, ROLE_ADMIN)
+  2. `TaskDocumentList` (toujours visible, passe les documents du ticket)
+- `TaskDocumentPreview` monté conditionnellement (v-if sur document sélectionné)
+- Chargement des documents : via la relation `task.documents` déjà sérialisée, ou appel séparé au service
+
+## Migration
+
+- Nouvelle table `task_document` avec les colonnes correspondant à l'entité
+- Index sur `task_id` pour les requêtes filtrées
+- Clé étrangère `task_id` → `task.id` ON DELETE CASCADE
+- Clé étrangère `uploaded_by_id` → `user.id` ON DELETE SET NULL
+
+## Docker
+
+- Ajouter un volume nommé dans `docker-compose.yml` pour `var/uploads/` afin de persister les fichiers
+- Le volume est monté dans le service PHP uniquement (pas besoin dans Nginx car les fichiers sont servis via Symfony)
+- Vérifier la config PHP pour `upload_max_filesize` et `post_max_size`
+
+## .gitignore
+
+Ajouter `var/uploads/` dans `.gitignore` pour éviter de committer des fichiers uploadés en dev local.

frontend/components/AdminEffortTab.vue

@@ -1,96 +0,0 @@
-<template>
-    <div>
-        <div class="flex items-center justify-between">
-            <h2 class="text-lg font-bold text-neutral-900">Efforts</h2>
-            <button
-                class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
-                @click="openCreate"
-            >
-                + Ajouter un effort
-            </button>
-        </div>
-
-        <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
-            <table class="w-full text-left text-sm">
-                <thead class="border-b border-neutral-200 bg-neutral-50">
-                    <tr>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Libellé</th>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Actions</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr
-                        v-for="item in items"
-                        :key="item.id"
-                        class="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
-                        @click="openEdit(item)"
-                    >
-                        <td class="px-4 py-3 font-semibold text-primary-500">{{ item.label }}</td>
-                        <td class="px-4 py-3">
-                            <button
-                                class="text-red-500 hover:text-red-700"
-                                @click.stop="handleDelete(item.id)"
-                            >
-                                <Icon name="mdi:delete-outline" size="20" />
-                            </button>
-                        </td>
-                    </tr>
-                    <tr v-if="items.length === 0 && !isLoading">
-                        <td colspan="2" class="px-4 py-8 text-center text-neutral-400">
-                            Aucun effort trouvé.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <TaskEffortDrawer
-            v-model="drawerOpen"
-            :item="selectedItem"
-            @saved="onSaved"
-        />
-    </div>
-</template>
-
-<script setup lang="ts">
-import type { TaskEffort } from '~/services/dto/task-effort'
-import { useTaskEffortService } from '~/services/task-efforts'
-
-const { getAll, remove } = useTaskEffortService()
-const items = ref<TaskEffort[]>([])
-const isLoading = ref(true)
-const drawerOpen = ref(false)
-const selectedItem = ref<TaskEffort | null>(null)
-
-async function loadItems() {
-    isLoading.value = true
-    try {
-        items.value = await getAll()
-    } finally {
-        isLoading.value = false
-    }
-}
-
-function openCreate() {
-    selectedItem.value = null
-    drawerOpen.value = true
-}
-
-function openEdit(item: TaskEffort) {
-    selectedItem.value = item
-    drawerOpen.value = true
-}
-
-async function handleDelete(id: number) {
-    await remove(id)
-    await loadItems()
-}
-
-async function onSaved() {
-    await loadItems()
-}
-
-onMounted(() => {
-    loadItems()
-})
-</script>

frontend/components/AdminPriorityTab.vue

@@ -1,103 +0,0 @@
-<template>
-    <div>
-        <div class="flex items-center justify-between">
-            <h2 class="text-lg font-bold text-neutral-900">Priorités</h2>
-            <button
-                class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
-                @click="openCreate"
-            >
-                + Ajouter une priorité
-            </button>
-        </div>
-
-        <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
-            <table class="w-full text-left text-sm">
-                <thead class="border-b border-neutral-200 bg-neutral-50">
-                    <tr>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Libellé</th>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Couleur</th>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Actions</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr
-                        v-for="item in items"
-                        :key="item.id"
-                        class="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
-                        @click="openEdit(item)"
-                    >
-                        <td class="px-4 py-3 font-semibold text-primary-500">{{ item.label }}</td>
-                        <td class="px-4 py-3">
-                            <span
-                                class="inline-block h-6 w-6 rounded-full"
-                                :style="{ backgroundColor: item.color }"
-                            />
-                        </td>
-                        <td class="px-4 py-3">
-                            <button
-                                class="text-red-500 hover:text-red-700"
-                                @click.stop="handleDelete(item.id)"
-                            >
-                                <Icon name="mdi:delete-outline" size="20" />
-                            </button>
-                        </td>
-                    </tr>
-                    <tr v-if="items.length === 0 && !isLoading">
-                        <td colspan="3" class="px-4 py-8 text-center text-neutral-400">
-                            Aucune priorité trouvée.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <TaskPriorityDrawer
-            v-model="drawerOpen"
-            :item="selectedItem"
-            @saved="onSaved"
-        />
-    </div>
-</template>
-
-<script setup lang="ts">
-import type { TaskPriority } from '~/services/dto/task-priority'
-import { useTaskPriorityService } from '~/services/task-priorities'
-
-const { getAll, remove } = useTaskPriorityService()
-const items = ref<TaskPriority[]>([])
-const isLoading = ref(true)
-const drawerOpen = ref(false)
-const selectedItem = ref<TaskPriority | null>(null)
-
-async function loadItems() {
-    isLoading.value = true
-    try {
-        items.value = await getAll()
-    } finally {
-        isLoading.value = false
-    }
-}
-
-function openCreate() {
-    selectedItem.value = null
-    drawerOpen.value = true
-}
-
-function openEdit(item: TaskPriority) {
-    selectedItem.value = item
-    drawerOpen.value = true
-}
-
-async function handleDelete(id: number) {
-    await remove(id)
-    await loadItems()
-}
-
-async function onSaved() {
-    await loadItems()
-}
-
-onMounted(() => {
-    loadItems()
-})
-</script>

frontend/components/AdminStatusTab.vue

@@ -1,105 +0,0 @@
-<template>
-    <div>
-        <div class="flex items-center justify-between">
-            <h2 class="text-lg font-bold text-neutral-900">Statuts</h2>
-            <button
-                class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
-                @click="openCreate"
-            >
-                + Ajouter un statut
-            </button>
-        </div>
-
-        <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
-            <table class="w-full text-left text-sm">
-                <thead class="border-b border-neutral-200 bg-neutral-50">
-                    <tr>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Libellé</th>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Couleur</th>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Position</th>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Actions</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr
-                        v-for="item in items"
-                        :key="item.id"
-                        class="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
-                        @click="openEdit(item)"
-                    >
-                        <td class="px-4 py-3 font-semibold text-primary-500">{{ item.label }}</td>
-                        <td class="px-4 py-3">
-                            <span
-                                class="inline-block h-6 w-6 rounded-full"
-                                :style="{ backgroundColor: item.color }"
-                            />
-                        </td>
-                        <td class="px-4 py-3 text-neutral-700">{{ item.position }}</td>
-                        <td class="px-4 py-3">
-                            <button
-                                class="text-red-500 hover:text-red-700"
-                                @click.stop="handleDelete(item.id)"
-                            >
-                                <Icon name="mdi:delete-outline" size="20" />
-                            </button>
-                        </td>
-                    </tr>
-                    <tr v-if="items.length === 0 && !isLoading">
-                        <td colspan="4" class="px-4 py-8 text-center text-neutral-400">
-                            Aucun statut trouvé.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <TaskStatusDrawer
-            v-model="drawerOpen"
-            :item="selectedItem"
-            @saved="onSaved"
-        />
-    </div>
-</template>
-
-<script setup lang="ts">
-import type { TaskStatus } from '~/services/dto/task-status'
-import { useTaskStatusService } from '~/services/task-statuses'
-
-const { getAll, remove } = useTaskStatusService()
-const items = ref<TaskStatus[]>([])
-const isLoading = ref(true)
-const drawerOpen = ref(false)
-const selectedItem = ref<TaskStatus | null>(null)
-
-async function loadItems() {
-    isLoading.value = true
-    try {
-        items.value = await getAll()
-    } finally {
-        isLoading.value = false
-    }
-}
-
-function openCreate() {
-    selectedItem.value = null
-    drawerOpen.value = true
-}
-
-function openEdit(item: TaskStatus) {
-    selectedItem.value = item
-    drawerOpen.value = true
-}
-
-async function handleDelete(id: number) {
-    await remove(id)
-    await loadItems()
-}
-
-async function onSaved() {
-    await loadItems()
-}
-
-onMounted(() => {
-    loadItems()
-})
-</script>

frontend/components/AdminTypeTab.vue

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

frontend/components/AdminUserTab.vue

@@ -1,106 +0,0 @@
-<template>
-    <div>
-        <div class="flex items-center justify-between">
-            <h2 class="text-lg font-bold text-neutral-900">Utilisateurs</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 utilisateur
-            </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 d'utilisateur</th>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Rôles</th>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Actions</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr
-                        v-for="item in items"
-                        :key="item.id"
-                        class="cursor-pointer border-b border-neutral-100 hover:bg-neutral-50"
-                        @click="openEdit(item)"
-                    >
-                        <td class="px-4 py-3 font-semibold text-primary-500">{{ item.username }}</td>
-                        <td class="px-4 py-3">
-                            <span
-                                v-for="role in item.roles"
-                                :key="role"
-                                class="mr-1 rounded-full bg-neutral-200 px-2 py-0.5 text-xs font-semibold text-neutral-700"
-                            >
-                                {{ role }}
-                            </span>
-                        </td>
-                        <td class="px-4 py-3">
-                            <button
-                                class="text-red-500 hover:text-red-700"
-                                @click.stop="handleDelete(item.id)"
-                            >
-                                <Icon name="mdi:delete-outline" size="20" />
-                            </button>
-                        </td>
-                    </tr>
-                    <tr v-if="items.length === 0 && !isLoading">
-                        <td colspan="3" class="px-4 py-8 text-center text-neutral-400">
-                            Aucun utilisateur trouvé.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <UserDrawer
-            v-model="drawerOpen"
-            :item="selectedItem"
-            @saved="onSaved"
-        />
-    </div>
-</template>
-
-<script setup lang="ts">
-import type { UserData } from '~/services/dto/user-data'
-import { useUserService } from '~/services/users'
-
-const { getAll, remove } = useUserService()
-const items = ref<UserData[]>([])
-const isLoading = ref(true)
-const drawerOpen = ref(false)
-const selectedItem = ref<UserData | 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: UserData) {
-    selectedItem.value = item
-    drawerOpen.value = true
-}
-
-async function handleDelete(id: number) {
-    await remove(id)
-    await loadItems()
-}
-
-async function onSaved() {
-    await loadItems()
-}
-
-onMounted(() => {
-    loadItems()
-})
-</script>

frontend/components/ProjectDrawer.vue

@@ -1,123 +0,0 @@
-<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'
-import { useProjectService } from '~/services/projects'
-
-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>

frontend/components/admin/AdminBookStackTab.vue

@@ -0,0 +1,116 @@
+<template>
+    <div>
+        <h2 class="text-lg font-bold text-neutral-900">{{ $t('bookstack.settings.title') }}</h2>
+
+        <form class="mt-6 max-w-lg space-y-4" @submit.prevent="handleSave">
+            <MalioInputText
+                v-model="form.url"
+                :label="$t('bookstack.settings.url')"
+                :placeholder="$t('bookstack.settings.urlPlaceholder')"
+                input-class="w-full"
+            />
+
+            <div>
+                <MalioInputText
+                    v-model="form.tokenId"
+                    :label="$t('bookstack.settings.tokenId')"
+                    :placeholder="$t('bookstack.settings.tokenIdPlaceholder')"
+                    input-class="w-full"
+                    type="password"
+                />
+            </div>
+
+            <div>
+                <MalioInputText
+                    v-model="form.tokenSecret"
+                    :label="$t('bookstack.settings.tokenSecret')"
+                    :placeholder="$t('bookstack.settings.tokenSecretPlaceholder')"
+                    input-class="w-full"
+                    type="password"
+                />
+                <p v-if="hasToken && !form.tokenId && !form.tokenSecret" class="mt-1 text-xs text-green-600">
+                    {{ $t('bookstack.settings.tokenConfigured') }}
+                </p>
+            </div>
+
+            <div class="flex gap-3">
+                <button
+                    type="submit"
+                    class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:opacity-50"
+                    :disabled="isSaving"
+                >
+                    {{ $t('bookstack.settings.save') }}
+                </button>
+                <button
+                    type="button"
+                    class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50 disabled:opacity-50"
+                    :disabled="isTesting"
+                    @click="handleTest"
+                >
+                    {{ $t('bookstack.settings.testConnection') }}
+                </button>
+            </div>
+
+            <p v-if="testResult !== null" class="text-sm font-medium" :class="testResult ? 'text-green-600' : 'text-red-600'">
+                {{ testResult ? $t('bookstack.settings.testSuccess') : $t('bookstack.settings.testFailed') }}
+            </p>
+        </form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useBookStackService } from '~/services/bookstack'
+
+const { getSettings, saveSettings, testConnection } = useBookStackService()
+
+const form = reactive({
+    url: '',
+    tokenId: '',
+    tokenSecret: '',
+})
+
+const hasToken = ref(false)
+const isSaving = ref(false)
+const isTesting = ref(false)
+const testResult = ref<boolean | null>(null)
+
+async function loadSettings() {
+    const settings = await getSettings()
+    form.url = settings.url ?? ''
+    hasToken.value = settings.hasToken
+}
+
+async function handleSave() {
+    isSaving.value = true
+    try {
+        const result = await saveSettings({
+            url: form.url.trim() || null,
+            tokenId: form.tokenId || null,
+            tokenSecret: form.tokenSecret || null,
+        })
+        hasToken.value = result.hasToken
+        form.tokenId = ''
+        form.tokenSecret = ''
+        testResult.value = null
+    } finally {
+        isSaving.value = false
+    }
+}
+
+async function handleTest() {
+    isTesting.value = true
+    testResult.value = null
+    try {
+        const result = await testConnection()
+        testResult.value = result.success
+    } catch {
+        testResult.value = false
+    } finally {
+        isTesting.value = false
+    }
+}
+
+onMounted(() => {
+    loadSettings()
+})
+</script>

frontend/components/admin/AdminClientTab.vue

@@ -0,0 +1,97 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">Clients</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 client
+            </button>
+        </div>
+
+        <DataTable
+            :columns="columns"
+            :items="clients"
+            :loading="isLoading"
+            empty-message="Aucun client trouvé."
+            deletable
+            @row-click="openEdit"
+            @delete="(item) => handleDelete(item.id)"
+        >
+            <template #cell-email="{ item }">
+                {{ item.email ?? '-' }}
+            </template>
+            <template #cell-address="{ item }">
+                {{ formatAddress(item) }}
+            </template>
+            <template #cell-phone="{ item }">
+                {{ item.phone ?? '-' }}
+            </template>
+        </DataTable>
+
+        <ClientDrawer
+            v-model="drawerOpen"
+            :client="selectedClient"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Client } from '~/services/dto/client'
+import { useClientService } from '~/services/clients'
+
+import type { DataTableColumn } from '~/components/ui/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'name', label: 'Nom', primary: true },
+    { key: 'email', label: 'Email', class: 'text-primary-500' },
+    { key: 'address', label: 'Adresse', class: 'text-neutral-700' },
+    { key: 'phone', label: 'Téléphone', class: 'text-primary-500' },
+]
+
+const { getAll, remove } = 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 handleDelete(id: number) {
+    await remove(id)
+    await loadClients()
+}
+
+async function onSaved() {
+    await loadClients()
+}
+
+onMounted(() => {
+    loadClients()
+})
+</script>

frontend/components/admin/AdminEffortTab.vue

@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">Efforts</h2>
+            <button
+                class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
+                @click="openCreate"
+            >
+                + Ajouter un effort
+            </button>
+        </div>
+
+        <DataTable
+            :columns="columns"
+            :items="items"
+            :loading="isLoading"
+            empty-message="Aucun effort trouvé."
+            deletable
+            @row-click="openEdit"
+            @delete="(item) => handleDelete(item.id)"
+        />
+
+        <TaskEffortDrawer
+            v-model="drawerOpen"
+            :item="selectedItem"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TaskEffort } from '~/services/dto/task-effort'
+import { useTaskEffortService } from '~/services/task-efforts'
+
+import type { DataTableColumn } from '~/components/ui/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'label', label: 'Libellé', primary: true },
+]
+
+const { getAll, remove } = useTaskEffortService()
+const items = ref<TaskEffort[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedItem = ref<TaskEffort | null>(null)
+
+async function loadItems() {
+    isLoading.value = true
+    try {
+        items.value = await getAll()
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function openCreate() {
+    selectedItem.value = null
+    drawerOpen.value = true
+}
+
+function openEdit(item: TaskEffort) {
+    selectedItem.value = item
+    drawerOpen.value = true
+}
+
+async function handleDelete(id: number) {
+    await remove(id)
+    await loadItems()
+}
+
+async function onSaved() {
+    await loadItems()
+}
+
+onMounted(() => {
+    loadItems()
+})
+</script>

frontend/components/admin/AdminGiteaTab.vue

@@ -0,0 +1,103 @@
+<template>
+    <div>
+        <h2 class="text-lg font-bold text-neutral-900">{{ $t('gitea.settings.title') }}</h2>
+
+        <form class="mt-6 max-w-lg space-y-4" @submit.prevent="handleSave">
+            <MalioInputText
+                v-model="form.url"
+                :label="$t('gitea.settings.url')"
+                :placeholder="$t('gitea.settings.urlPlaceholder')"
+                input-class="w-full"
+            />
+
+            <div>
+                <MalioInputText
+                    v-model="form.token"
+                    :label="$t('gitea.settings.token')"
+                    :placeholder="$t('gitea.settings.tokenPlaceholder')"
+                    input-class="w-full"
+                    type="password"
+                />
+                <p v-if="hasToken && !form.token" class="mt-1 text-xs text-green-600">
+                    {{ $t('gitea.settings.tokenConfigured') }}
+                </p>
+            </div>
+
+            <div class="flex gap-3">
+                <button
+                    type="submit"
+                    class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:opacity-50"
+                    :disabled="isSaving"
+                >
+                    {{ $t('gitea.settings.save') }}
+                </button>
+                <button
+                    type="button"
+                    class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50 disabled:opacity-50"
+                    :disabled="isTesting"
+                    @click="handleTest"
+                >
+                    {{ $t('gitea.settings.testConnection') }}
+                </button>
+            </div>
+
+            <p v-if="testResult !== null" class="text-sm font-medium" :class="testResult ? 'text-green-600' : 'text-red-600'">
+                {{ testResult ? $t('gitea.settings.testSuccess') : $t('gitea.settings.testFailed') }}
+            </p>
+        </form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useGiteaService } from '~/services/gitea'
+
+const { getSettings, saveSettings, testConnection } = useGiteaService()
+
+const form = reactive({
+    url: '',
+    token: '',
+})
+
+const hasToken = ref(false)
+const isSaving = ref(false)
+const isTesting = ref(false)
+const testResult = ref<boolean | null>(null)
+
+async function loadSettings() {
+    const settings = await getSettings()
+    form.url = settings.url ?? ''
+    hasToken.value = settings.hasToken
+}
+
+async function handleSave() {
+    isSaving.value = true
+    try {
+        const result = await saveSettings({
+            url: form.url.trim() || null,
+            token: form.token || null,
+        })
+        hasToken.value = result.hasToken
+        form.token = ''
+        testResult.value = null
+    } finally {
+        isSaving.value = false
+    }
+}
+
+async function handleTest() {
+    isTesting.value = true
+    testResult.value = null
+    try {
+        const result = await testConnection()
+        testResult.value = result.success
+    } catch {
+        testResult.value = false
+    } finally {
+        isTesting.value = false
+    }
+}
+
+onMounted(() => {
+    loadSettings()
+})
+</script>

frontend/components/admin/AdminPriorityTab.vue

@@ -0,0 +1,86 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">Priorités</h2>
+            <button
+                class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
+                @click="openCreate"
+            >
+                + Ajouter une priorité
+            </button>
+        </div>
+
+        <DataTable
+            :columns="columns"
+            :items="items"
+            :loading="isLoading"
+            empty-message="Aucune priorité trouvée."
+            deletable
+            @row-click="openEdit"
+            @delete="(item) => handleDelete(item.id)"
+        >
+            <template #cell-color="{ item }">
+                <span
+                    class="inline-block h-6 w-6 rounded-full"
+                    :style="{ backgroundColor: item.color }"
+                />
+            </template>
+        </DataTable>
+
+        <TaskPriorityDrawer
+            v-model="drawerOpen"
+            :item="selectedItem"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TaskPriority } from '~/services/dto/task-priority'
+import { useTaskPriorityService } from '~/services/task-priorities'
+
+import type { DataTableColumn } from '~/components/ui/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'label', label: 'Libellé', primary: true },
+    { key: 'color', label: 'Couleur' },
+]
+
+const { getAll, remove } = useTaskPriorityService()
+const items = ref<TaskPriority[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedItem = ref<TaskPriority | null>(null)
+
+async function loadItems() {
+    isLoading.value = true
+    try {
+        items.value = await getAll()
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function openCreate() {
+    selectedItem.value = null
+    drawerOpen.value = true
+}
+
+function openEdit(item: TaskPriority) {
+    selectedItem.value = item
+    drawerOpen.value = true
+}
+
+async function handleDelete(id: number) {
+    await remove(id)
+    await loadItems()
+}
+
+async function onSaved() {
+    await loadItems()
+}
+
+onMounted(() => {
+    loadItems()
+})
+</script>

frontend/components/admin/AdminStatusTab.vue

@@ -0,0 +1,139 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">Statuts</h2>
+            <button
+                class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
+                @click="openCreate"
+            >
+                + Ajouter un statut
+            </button>
+        </div>
+
+        <DataTable
+            :columns="columns"
+            :items="items"
+            :loading="isLoading"
+            empty-message="Aucun statut trouvé."
+            deletable
+            @row-click="openEdit"
+            @delete="requestDelete"
+        >
+            <template #cell-color="{ item }">
+                <span
+                    class="inline-block h-6 w-6 rounded-full"
+                    :style="{ backgroundColor: item.color }"
+                />
+            </template>
+        </DataTable>
+
+        <TaskStatusDrawer
+            v-model="drawerOpen"
+            :item="selectedItem"
+            @saved="onSaved"
+        />
+
+        <ConfirmDeleteStatusModal
+            v-model="confirmModalOpen"
+            :status-label="statusToDelete?.label ?? ''"
+            :task-count="affectedTaskCount"
+            :available-statuses="reassignTargets"
+            @confirm="onConfirmDelete"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TaskStatus } from '~/services/dto/task-status'
+import type { Task } from '~/services/dto/task'
+import { useTaskStatusService } from '~/services/task-statuses'
+import { useTaskService } from '~/services/tasks'
+
+import type { DataTableColumn } from '~/components/ui/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'label', label: 'Libellé', primary: true },
+    { key: 'color', label: 'Couleur' },
+    { key: 'position', label: 'Position', class: 'text-neutral-700' },
+]
+
+const statusService = useTaskStatusService()
+const taskService = useTaskService()
+
+const items = ref<TaskStatus[]>([])
+const tasks = ref<Task[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedItem = ref<TaskStatus | null>(null)
+const confirmModalOpen = ref(false)
+const statusToDelete = ref<TaskStatus | null>(null)
+
+const affectedTaskCount = computed(() => {
+    if (!statusToDelete.value) return 0
+    return tasks.value.filter(t => t.status?.id === statusToDelete.value!.id).length
+})
+
+const reassignTargets = computed(() => {
+    if (!statusToDelete.value) return items.value
+    return items.value.filter(s => s.id !== statusToDelete.value!.id)
+})
+
+async function loadItems() {
+    isLoading.value = true
+    try {
+        const [statuses, allTasks] = await Promise.all([
+            statusService.getAll(),
+            taskService.getAll(),
+        ])
+        items.value = statuses
+        tasks.value = allTasks
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function openCreate() {
+    selectedItem.value = null
+    drawerOpen.value = true
+}
+
+function openEdit(item: TaskStatus) {
+    selectedItem.value = item
+    drawerOpen.value = true
+}
+
+async function requestDelete(item: TaskStatus) {
+    statusToDelete.value = item
+    const count = tasks.value.filter(t => t.status?.id === item.id).length
+    if (count === 0) {
+        await statusService.remove(item.id)
+        await loadItems()
+    } else {
+        confirmModalOpen.value = true
+    }
+}
+
+async function onConfirmDelete(targetStatusId: number | null) {
+    if (!statusToDelete.value) return
+
+    const affectedTasks = tasks.value.filter(t => t.status?.id === statusToDelete.value!.id)
+    const statusIri = targetStatusId ? `/api/task_statuses/${targetStatusId}` : null
+
+    await Promise.all(
+        affectedTasks.map(t => taskService.update(t.id, { status: statusIri }))
+    )
+
+    await statusService.remove(statusToDelete.value.id)
+    confirmModalOpen.value = false
+    statusToDelete.value = null
+    await loadItems()
+}
+
+async function onSaved() {
+    await loadItems()
+}
+
+onMounted(() => {
+    loadItems()
+})
+</script>

frontend/components/admin/AdminTagTab.vue

@@ -0,0 +1,86 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">Tags</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 tag
+            </button>
+        </div>
+
+        <DataTable
+            :columns="columns"
+            :items="items"
+            :loading="isLoading"
+            empty-message="Aucun tag trouvé."
+            deletable
+            @row-click="openEdit"
+            @delete="(item) => handleDelete(item.id)"
+        >
+            <template #cell-color="{ item }">
+                <span
+                    class="inline-block h-6 w-6 rounded-full"
+                    :style="{ backgroundColor: item.color }"
+                />
+            </template>
+        </DataTable>
+
+        <TaskTagDrawer
+            v-model="drawerOpen"
+            :item="selectedItem"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TaskTag } from '~/services/dto/task-tag'
+import { useTaskTagService } from '~/services/task-tags'
+
+import type { DataTableColumn } from '~/components/ui/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'label', label: 'Libellé', primary: true },
+    { key: 'color', label: 'Couleur' },
+]
+
+const { getAll, remove } = useTaskTagService()
+const items = ref<TaskTag[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedItem = ref<TaskTag | 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: TaskTag) {
+    selectedItem.value = item
+    drawerOpen.value = true
+}
+
+async function handleDelete(id: number) {
+    await remove(id)
+    await loadItems()
+}
+
+async function onSaved() {
+    await loadItems()
+}
+
+onMounted(() => {
+    loadItems()
+})
+</script>

frontend/components/admin/AdminUserTab.vue

@@ -0,0 +1,89 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">Utilisateurs</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 utilisateur
+            </button>
+        </div>
+
+        <DataTable
+            :columns="columns"
+            :items="items"
+            :loading="isLoading"
+            empty-message="Aucun utilisateur trouvé."
+            deletable
+            @row-click="openEdit"
+            @delete="(item) => handleDelete(item.id)"
+        >
+            <template #cell-roles="{ item }">
+                <span
+                    v-for="role in item.roles"
+                    :key="role"
+                    class="mr-1 rounded-full bg-neutral-200 px-2 py-0.5 text-xs font-semibold text-neutral-700"
+                >
+                    {{ role }}
+                </span>
+            </template>
+        </DataTable>
+
+        <UserDrawer
+            v-model="drawerOpen"
+            :item="selectedItem"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { UserData } from '~/services/dto/user-data'
+import { useUserService } from '~/services/users'
+
+import type { DataTableColumn } from '~/components/ui/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'username', label: "Nom d'utilisateur", primary: true },
+    { key: 'roles', label: 'Rôles' },
+]
+
+const { getAll, remove } = useUserService()
+const items = ref<UserData[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedItem = ref<UserData | 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: UserData) {
+    selectedItem.value = item
+    drawerOpen.value = true
+}
+
+async function handleDelete(id: number) {
+    await remove(id)
+    await loadItems()
+}
+
+async function onSaved() {
+    await loadItems()
+}
+
+onMounted(() => {
+    loadItems()
+})
+</script>

frontend/components/project/ProjectDrawer.vue

@@ -0,0 +1,243 @@
+<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.code"
+                label="Code"
+                input-class="w-full uppercase"
+                :disabled="isEditing"
+                :error="touched.code && !form.code.trim() ? 'Le code est requis' : touched.code && !/^[A-Z]{2,10}$/.test(form.code.trim()) ? '2 à 10 lettres majuscules' : ''"
+                @blur="touched.code = true"
+                @input="form.code = form.code.toUpperCase().replace(/[^A-Z]/g, '')"
+            />
+            <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 v-if="giteaRepos.length" class="mt-4">
+                <MalioSelect
+                    v-model="form.giteaRepoFullName"
+                    :options="giteaRepoOptions"
+                    label="Dépôt Gitea"
+                    empty-option-label="Aucun dépôt"
+                    min-width="w-full"
+                />
+            </div>
+
+            <div v-if="bookstackShelves.length" class="mt-4">
+                <MalioSelect
+                    v-model="form.bookstackShelfId"
+                    :options="bookstackShelfOptions"
+                    label="Étagère BookStack"
+                    empty-option-label="Aucune étagère"
+                    min-width="w-full"
+                />
+            </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>
+
+        <div v-if="isEditing && project" class="mt-6 border-t border-neutral-200 pt-4">
+            <button
+                class="flex items-center gap-2 text-sm text-neutral-500 hover:text-amber-600"
+                :disabled="isSubmitting"
+                @click="handleArchiveToggle"
+            >
+                <Icon :name="project.archived ? 'mdi:archive-arrow-up-outline' : 'mdi:archive-arrow-down-outline'" size="18" />
+                {{ project.archived ? 'Désarchiver' : 'Archiver' }}
+            </button>
+        </div>
+    </AppDrawer>
+</template>
+
+<script setup lang="ts">
+import type { Project, ProjectWrite } from '~/services/dto/project'
+import type { Client } from '~/services/dto/client'
+import type { GiteaRepository } from '~/services/dto/gitea'
+import type { BookStackShelf } from '~/services/dto/bookstack'
+import { useProjectService } from '~/services/projects'
+import { useGiteaService } from '~/services/gitea'
+import { useBookStackService } from '~/services/bookstack'
+
+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 { listRepositories } = useGiteaService()
+const giteaRepos = ref<GiteaRepository[]>([])
+
+const giteaRepoOptions = computed(() =>
+    giteaRepos.value.map(r => ({ label: r.fullName, value: r.fullName }))
+)
+
+const { listShelves } = useBookStackService()
+const bookstackShelves = ref<BookStackShelf[]>([])
+
+const bookstackShelfOptions = computed(() =>
+    bookstackShelves.value.map(s => ({ label: s.name, value: s.id }))
+)
+
+const form = reactive({
+    code: '',
+    name: '',
+    description: '',
+    color: '#222783',
+    clientId: null as number | null,
+    giteaRepoFullName: null as string | null,
+    bookstackShelfId: null as number | null,
+})
+
+const touched = reactive({
+    code: false,
+    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.code = props.project.code ?? ''
+            form.name = props.project.name ?? ''
+            form.description = props.project.description ?? ''
+            form.color = props.project.color ?? '#222783'
+            form.clientId = props.project.client?.id ?? null
+            form.giteaRepoFullName = props.project?.giteaOwner && props.project?.giteaRepo
+                ? `${props.project.giteaOwner}/${props.project.giteaRepo}`
+                : null
+            form.bookstackShelfId = props.project.bookstackShelfId ?? null
+        } else {
+            form.code = ''
+            form.name = ''
+            form.description = ''
+            form.color = '#222783'
+            form.clientId = null
+            form.giteaRepoFullName = null
+            form.bookstackShelfId = null
+        }
+        touched.code = false
+        touched.name = false
+    }
+})
+
+const { create, update } = useProjectService()
+
+async function handleSubmit() {
+    touched.name = true
+    touched.code = true
+    if (!form.name.trim()) return
+    if (!isEditing.value && (!form.code.trim() || !/^[A-Z]{2,10}$/.test(form.code.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 (form.giteaRepoFullName) {
+            const [owner, repo] = form.giteaRepoFullName.split('/')
+            payload.giteaOwner = owner
+            payload.giteaRepo = repo
+        } else {
+            payload.giteaOwner = null
+            payload.giteaRepo = null
+        }
+
+        if (form.bookstackShelfId) {
+            const shelf = bookstackShelves.value.find(s => s.id === form.bookstackShelfId)
+            payload.bookstackShelfId = form.bookstackShelfId
+            payload.bookstackShelfName = shelf?.name ?? null
+        } else {
+            payload.bookstackShelfId = null
+            payload.bookstackShelfName = null
+        }
+
+        if (isEditing.value && props.project) {
+            await update(props.project.id, payload)
+        } else {
+            payload.code = form.code.trim()
+            await create(payload)
+        }
+
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+
+async function handleArchiveToggle() {
+    if (!props.project) return
+    isSubmitting.value = true
+    try {
+        const newArchived = !props.project.archived
+        await update(props.project.id, { archived: newArchived }, {
+            toastSuccessKey: newArchived ? 'projects.archived' : 'projects.unarchived',
+        })
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+
+onMounted(async () => {
+    try {
+        giteaRepos.value = await listRepositories()
+    } catch {
+        // Gitea not configured, ignore
+    }
+    try {
+        bookstackShelves.value = await listShelves()
+    } catch {
+        // BookStack not configured, ignore
+    }
+})
+</script>

frontend/components/project/ProjectGroupTab.vue

@@ -0,0 +1,170 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">Groupes</h2>
+            <div class="flex items-center gap-3">
+                <button
+                    type="button"
+                    class="text-sm font-medium text-neutral-500 hover:text-neutral-700"
+                    @click="showArchived = !showArchived"
+                >
+                    {{ showArchived ? $t('archive.hideArchived') : $t('archive.showArchived') }}
+                </button>
+                <button
+                    v-if="!showArchived"
+                    class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
+                    @click="openCreate"
+                >
+                    + Ajouter un groupe
+                </button>
+            </div>
+        </div>
+
+        <DataTable
+            :columns="columns"
+            :items="items"
+            :loading="isLoading"
+            empty-message="Aucun groupe trouvé."
+            :deletable="!showArchived"
+            @row-click="openEdit"
+            @delete="(item) => handleDelete(item.id)"
+        >
+            <template #cell-color="{ item }">
+                <span
+                    class="inline-block h-6 w-6 rounded-full"
+                    :style="{ backgroundColor: item.color }"
+                />
+            </template>
+            <template #cell-description="{ item }">
+                {{ item.description ?? '—' }}
+            </template>
+            <template #actions="{ item }">
+                <button
+                    v-if="!showArchived && canArchiveGroup(item)"
+                    type="button"
+                    class="rounded-md bg-neutral-500 px-3 py-1 text-xs font-semibold text-white hover:bg-neutral-600"
+                    @click.stop="handleArchive(item)"
+                >
+                    {{ $t('archive.archiveButton') }}
+                </button>
+                <button
+                    v-if="showArchived"
+                    type="button"
+                    class="rounded-md bg-neutral-500 px-3 py-1 text-xs font-semibold text-white hover:bg-neutral-600"
+                    @click.stop="handleUnarchive(item)"
+                >
+                    {{ $t('archive.unarchiveButton') }}
+                </button>
+            </template>
+        </DataTable>
+
+        <TaskGroupDrawer
+            v-model="drawerOpen"
+            :group="selectedItem"
+            :project-id="projectId"
+            :tasks="[...activeTasks, ...archivedTasks]"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TaskGroup } from '~/services/dto/task-group'
+import type { Task } from '~/services/dto/task'
+import { useTaskGroupService } from '~/services/task-groups'
+import { useTaskService } from '~/services/tasks'
+
+const props = defineProps<{
+    projectId: number
+}>()
+
+const emit = defineEmits<{
+    (e: 'updated'): void
+}>()
+
+import type { DataTableColumn } from '~/components/ui/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'title', label: 'Titre', primary: true },
+    { key: 'color', label: 'Couleur' },
+    { key: 'description', label: 'Description', class: 'max-w-xs truncate text-neutral-700' },
+]
+
+const groupService = useTaskGroupService()
+const taskService = useTaskService()
+
+const allGroups = ref<TaskGroup[]>([])
+const activeTasks = ref<Task[]>([])
+const archivedTasks = ref<Task[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedItem = ref<TaskGroup | null>(null)
+const showArchived = ref(false)
+
+const items = computed(() =>
+    allGroups.value.filter(g => showArchived.value ? g.archived : !g.archived)
+)
+
+function canArchiveGroup(group: TaskGroup): boolean {
+    const groupTasks = activeTasks.value.filter(t => t.group?.id === group.id)
+    if (groupTasks.length === 0) return false
+    return groupTasks.every(t => t.status?.isFinal === true)
+}
+
+async function loadItems() {
+    isLoading.value = true
+    try {
+        const [g, t, at] = await Promise.all([
+            groupService.getByProject(props.projectId),
+            taskService.getByProject(props.projectId),
+            taskService.getByProjectArchived(props.projectId),
+        ])
+        allGroups.value = g
+        activeTasks.value = t
+        archivedTasks.value = at
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function openCreate() {
+    selectedItem.value = null
+    drawerOpen.value = true
+}
+
+function openEdit(item: TaskGroup) {
+    selectedItem.value = item
+    drawerOpen.value = true
+}
+
+async function handleDelete(id: number) {
+    await groupService.remove(id)
+    await loadItems()
+    emit('updated')
+}
+
+async function handleArchive(group: TaskGroup) {
+    const groupTasks = activeTasks.value.filter(t => t.group?.id === group.id)
+    await Promise.all(groupTasks.map(t => taskService.update(t.id, { archived: true })))
+    await groupService.update(group.id, { archived: true })
+    await loadItems()
+    emit('updated')
+}
+
+async function handleUnarchive(group: TaskGroup) {
+    const groupTasks = archivedTasks.value.filter(t => t.group?.id === group.id)
+    await Promise.all(groupTasks.map(t => taskService.update(t.id, { archived: false })))
+    await groupService.update(group.id, { archived: false })
+    await loadItems()
+    emit('updated')
+}
+
+async function onSaved() {
+    await loadItems()
+    emit('updated')
+}
+
+onMounted(() => {
+    loadItems()
+})
+</script>

frontend/components/task/TaskBookStackLinks.vue

@@ -0,0 +1,158 @@
+<template>
+    <div class="mt-5">
+        <p class="mb-2 text-sm font-medium text-neutral-700">{{ $t('bookstack.links.title') }}</p>
+
+        <!-- Search -->
+        <div class="relative">
+            <MalioInputText
+                v-model="searchQuery"
+                :placeholder="$t('bookstack.links.searchPlaceholder')"
+                input-class="w-full"
+            />
+
+            <!-- Dropdown results -->
+            <div
+                v-if="searchResults.length > 0"
+                class="absolute z-30 mt-1 w-full rounded-md border border-neutral-200 bg-white shadow-lg"
+            >
+                <button
+                    v-for="result in searchResults"
+                    :key="`${result.type}-${result.id}`"
+                    type="button"
+                    class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-neutral-50"
+                    @click="handleAdd(result)"
+                >
+                    <Icon
+                        :name="result.type === 'page' ? 'mdi:file-document-outline' : 'mdi:book-outline'"
+                        size="16"
+                        class="shrink-0 text-neutral-400"
+                    />
+                    <span class="truncate">{{ result.name }}</span>
+                    <span class="ml-auto shrink-0 text-xs text-neutral-400">{{ result.type }}</span>
+                </button>
+            </div>
+
+            <p v-if="searchQuery.length >= 2 && !isSearching && searchResults.length === 0 && hasSearched" class="mt-1 text-xs text-neutral-400">
+                {{ $t('bookstack.links.noResults') }}
+            </p>
+        </div>
+
+        <!-- Linked documents -->
+        <div v-if="links.length > 0" class="mt-3 space-y-1">
+            <div
+                v-for="link in links"
+                :key="link.id"
+                class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-neutral-50"
+            >
+                <Icon
+                    :name="link.bookstackType === 'page' ? 'mdi:file-document-outline' : 'mdi:book-outline'"
+                    size="16"
+                    class="shrink-0 text-neutral-400"
+                />
+                <a
+                    :href="link.url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="truncate text-primary-500 hover:underline"
+                >
+                    {{ link.title }}
+                </a>
+                <button
+                    type="button"
+                    class="ml-auto shrink-0 text-neutral-300 hover:text-red-500"
+                    @click="handleRemove(link.id)"
+                >
+                    <Icon name="mdi:close" size="16" />
+                </button>
+            </div>
+        </div>
+
+        <p v-else-if="!isLoading" class="mt-2 text-xs text-neutral-400">
+            {{ $t('bookstack.links.empty') }}
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { BookStackLink, BookStackSearchResult } from '~/services/dto/bookstack'
+import { useBookStackService } from '~/services/bookstack'
+
+const props = defineProps<{
+    taskId: number
+}>()
+
+const { getLinks, addLink, removeLink, search } = useBookStackService()
+
+const links = ref<BookStackLink[]>([])
+const searchQuery = ref('')
+const searchResults = ref<BookStackSearchResult[]>([])
+const isLoading = ref(true)
+const isSearching = ref(false)
+const hasSearched = ref(false)
+
+let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+watch(searchQuery, (query) => {
+    if (debounceTimer) clearTimeout(debounceTimer)
+    hasSearched.value = false
+    searchResults.value = []
+
+    if (query.trim().length < 2) {
+        return
+    }
+
+    debounceTimer = setTimeout(async () => {
+        isSearching.value = true
+        try {
+            searchResults.value = await search(props.taskId, query.trim())
+        } catch {
+            searchResults.value = []
+        } finally {
+            isSearching.value = false
+            hasSearched.value = true
+        }
+    }, 300)
+})
+
+async function handleAdd(result: BookStackSearchResult) {
+    searchQuery.value = ''
+    searchResults.value = []
+    hasSearched.value = false
+
+    // Check if already linked
+    if (links.value.some(l => l.bookstackId === result.id && l.bookstackType === result.type)) {
+        return
+    }
+
+    try {
+        const created = await addLink(props.taskId, {
+            bookstackId: result.id,
+            bookstackType: result.type,
+            title: result.name,
+            url: result.url,
+        })
+        links.value.unshift(created)
+    } catch {
+        // Error handled by useApi toast
+    }
+}
+
+async function handleRemove(linkId: number) {
+    try {
+        await removeLink(props.taskId, linkId)
+        links.value = links.value.filter(l => l.id !== linkId)
+    } catch {
+        // Error handled by useApi toast
+    }
+}
+
+onMounted(async () => {
+    try {
+        links.value = await getLinks(props.taskId)
+    } catch {
+        // Error handled by useApi toast
+    } finally {
+        isLoading.value = false
+    }
+})
+</script>

frontend/components/task/TaskCard.vue

@@ -7,12 +7,16 @@
         @click="emit('click')"
     >
         <div class="flex items-start justify-between gap-2">
-            <h4 class="text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
+            <div class="min-w-0">
+                <span v-if="task.project && task.number" class="text-xs font-medium text-neutral-400">{{ task.project.code }}{{ task.number }}</span>
+                <h4 class="text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
+            </div>
             <button
-                class="shrink-0 text-neutral-400 hover:text-primary-500"
-                @click.stop
+                class="shrink-0 transition-colors"
+                :class="isTimerOnTask ? 'text-[#F18619] hover:text-[#d97314]' : 'text-neutral-400 hover:text-primary-500'"
+                @click.stop="isTimerOnTask ? timerStore.stop() : onPlay()"
             >
-                <Icon name="mdi:play-circle-outline" size="20" />
+                <Icon :name="isTimerOnTask ? 'mdi:stop-circle-outline' : 'mdi:play-circle-outline'" size="20" />
             </button>
         </div>
 
@@ -25,12 +29,12 @@
                 {{ task.priority.label }}
             </span>
             <span
-                v-for="type in task.types"
-                :key="type.id"
+                v-for="tag in task.tags"
+                :key="tag.id"
                 class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
-                :style="{ backgroundColor: type.color }"
+                :style="{ backgroundColor: tag.color }"
             >
-                {{ type.label }}
+                {{ tag.label }}
             </span>
             <span
                 v-if="task.assignee"
@@ -60,6 +64,22 @@ const emit = defineEmits<{
     (e: 'click'): void
 }>()
 
+const timerStore = useTimerStore()
+
+const isTimerOnTask = computed(() => {
+    const entry = timerStore.activeEntry
+    if (!entry?.task) return false
+    const entryTaskId = typeof entry.task === 'string'
+        ? entry.task
+        : (entry.task['@id'] ?? entry.task.id)
+    const taskId = props.task['@id'] ?? props.task.id
+    return entryTaskId === taskId || entryTaskId === `/api/tasks/${props.task.id}`
+})
+
+function onPlay() {
+    timerStore.startFromTask(props.task)
+}
+
 function onDragStart(event: DragEvent) {
     event.dataTransfer!.effectAllowed = 'move'
     event.dataTransfer!.setData('text/plain', String(props.task.id))

frontend/components/task/TaskDocumentList.vue

@@ -0,0 +1,80 @@
+<template>
+    <div v-if="documents.length" class="mt-3">
+        <p class="mb-2 text-sm font-medium text-neutral-700">
+            {{ $t('taskDocuments.title') }} ({{ documents.length }})
+        </p>
+        <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
+            <div
+                v-for="doc in documents"
+                :key="doc.id"
+                class="group relative flex cursor-pointer items-center gap-2 rounded-lg border border-neutral-200 p-2 transition-colors hover:bg-neutral-50"
+                @click="$emit('preview', doc)"
+            >
+                <!-- Thumbnail or icon -->
+                <div class="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded">
+                    <img
+                        v-if="isImage(doc.mimeType)"
+                        :src="getDownloadUrl(doc.id)"
+                        :alt="doc.originalName"
+                        class="h-10 w-10 object-cover"
+                    />
+                    <Icon
+                        v-else
+                        :name="getIconForMime(doc.mimeType)"
+                        class="h-6 w-6 text-neutral-400"
+                    />
+                </div>
+
+                <!-- File info -->
+                <div class="min-w-0 flex-1">
+                    <p class="truncate text-xs font-medium text-neutral-700">{{ doc.originalName }}</p>
+                    <p class="text-xs text-neutral-400">{{ formatSize(doc.size) }}</p>
+                </div>
+
+                <!-- Delete button -->
+                <button
+                    v-if="isAdmin"
+                    class="absolute right-1 top-1 hidden rounded p-0.5 text-neutral-400 transition-colors hover:bg-red-50 hover:text-red-500 group-hover:block"
+                    @click.stop="$emit('delete', doc)"
+                >
+                    <Icon name="heroicons:x-mark" class="h-4 w-4" />
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TaskDocument } from '~/services/dto/task-document'
+import { useTaskDocumentService } from '~/services/task-documents'
+
+defineProps<{
+    documents: TaskDocument[]
+    isAdmin: boolean
+}>()
+
+defineEmits<{
+    preview: [doc: TaskDocument]
+    delete: [doc: TaskDocument]
+}>()
+
+const { getDownloadUrl } = useTaskDocumentService()
+
+function isImage(mimeType: string): boolean {
+    return mimeType.startsWith('image/')
+}
+
+function getIconForMime(mimeType: string): string {
+    if (mimeType === 'application/pdf') return 'heroicons:document-text'
+    if (mimeType.includes('spreadsheet') || mimeType.includes('excel')) return 'heroicons:table-cells'
+    if (mimeType.includes('word') || mimeType.includes('document')) return 'heroicons:document'
+    if (mimeType.includes('zip') || mimeType.includes('archive') || mimeType.includes('tar') || mimeType.includes('rar')) return 'heroicons:archive-box'
+    return 'heroicons:paper-clip'
+}
+
+function formatSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} o`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} Ko`
+    return `${(bytes / (1024 * 1024)).toFixed(1)} Mo`
+}
+</script>

frontend/components/task/TaskDocumentPreview.vue

@@ -0,0 +1,124 @@
+<template>
+    <Teleport to="body">
+        <Transition name="fade" appear>
+            <div
+                v-if="document"
+                class="fixed inset-0 z-[60] flex items-center justify-center bg-black/80"
+                @click.self="$emit('close')"
+                @keydown.escape="$emit('close')"
+                @keydown.left="$emit('prev')"
+                @keydown.right="$emit('next')"
+                tabindex="0"
+                ref="overlayRef"
+            >
+                <!-- Close button -->
+                <button
+                    class="absolute right-4 top-4 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
+                    @click="$emit('close')"
+                >
+                    <Icon name="heroicons:x-mark" class="h-6 w-6" />
+                </button>
+
+                <!-- Navigation arrows -->
+                <button
+                    v-if="hasPrev"
+                    class="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
+                    @click="$emit('prev')"
+                >
+                    <Icon name="heroicons:chevron-left" class="h-6 w-6" />
+                </button>
+                <button
+                    v-if="hasNext"
+                    class="absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
+                    @click="$emit('next')"
+                >
+                    <Icon name="heroicons:chevron-right" class="h-6 w-6" />
+                </button>
+
+                <!-- Content -->
+                <div class="flex max-h-[90vh] max-w-[90vw] flex-col items-center">
+                    <!-- Image preview -->
+                    <img
+                        v-if="isImage"
+                        :src="downloadUrl"
+                        :alt="document.originalName"
+                        class="max-h-[85vh] max-w-[90vw] object-contain"
+                    />
+
+                    <!-- PDF preview -->
+                    <iframe
+                        v-else-if="isPdf"
+                        :src="downloadUrl"
+                        class="h-[85vh] w-[80vw] rounded-lg bg-white"
+                    />
+
+                    <!-- Generic file -->
+                    <div v-else class="flex flex-col items-center gap-4 rounded-xl bg-white p-10">
+                        <Icon name="heroicons:document" class="h-16 w-16 text-neutral-400" />
+                        <p class="max-w-xs truncate text-lg font-medium text-neutral-700">{{ document.originalName }}</p>
+                        <p class="text-sm text-neutral-400">{{ formatSize(document.size) }}</p>
+                        <a
+                            :href="downloadUrl"
+                            download
+                            class="mt-2 rounded-lg bg-blue-600 px-6 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-700"
+                        >
+                            {{ $t('taskDocuments.download') }}
+                        </a>
+                    </div>
+
+                    <!-- File name footer -->
+                    <p class="mt-3 text-sm text-white/70">{{ document.originalName }}</p>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { TaskDocument } from '~/services/dto/task-document'
+import { useTaskDocumentService } from '~/services/task-documents'
+
+const props = defineProps<{
+    document: TaskDocument | null
+    hasPrev: boolean
+    hasNext: boolean
+}>()
+
+defineEmits<{
+    close: []
+    prev: []
+    next: []
+}>()
+
+const overlayRef = ref<HTMLElement | null>(null)
+
+const { getDownloadUrl } = useTaskDocumentService()
+
+const downloadUrl = computed(() => props.document ? getDownloadUrl(props.document.id) : '')
+const isImage = computed(() => props.document?.mimeType.startsWith('image/') ?? false)
+const isPdf = computed(() => props.document?.mimeType === 'application/pdf')
+
+function formatSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} o`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} Ko`
+    return `${(bytes / (1024 * 1024)).toFixed(1)} Mo`
+}
+
+// Focus overlay for keyboard events
+watch(() => props.document, (doc) => {
+    if (doc) {
+        nextTick(() => overlayRef.value?.focus())
+    }
+})
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>

frontend/components/task/TaskDocumentUpload.vue

@@ -0,0 +1,133 @@
+<template>
+    <div
+        class="relative mt-4 rounded-lg border-2 border-dashed transition-colors"
+        :class="isDragging ? 'border-blue-400 bg-blue-50' : 'border-neutral-300 hover:border-neutral-400'"
+        @dragover.prevent="isDragging = true"
+        @dragleave.prevent="isDragging = false"
+        @drop.prevent="handleDrop"
+        @click="fileInput?.click()"
+    >
+        <input
+            ref="fileInput"
+            type="file"
+            multiple
+            class="hidden"
+            @change="handleFileSelect"
+        />
+
+        <div class="flex cursor-pointer flex-col items-center gap-2 px-4 py-6 text-center">
+            <Icon name="heroicons:cloud-arrow-up" class="h-8 w-8 text-neutral-400" />
+            <p class="text-sm text-neutral-500">{{ $t('taskDocuments.dropzone') }}</p>
+        </div>
+
+        <!-- Upload progress -->
+        <div v-if="uploads.length" class="space-y-2 border-t border-neutral-200 px-4 py-3">
+            <div v-for="upload in uploads" :key="upload.name" class="flex items-center gap-3">
+                <div class="min-w-0 flex-1">
+                    <p class="truncate text-sm text-neutral-700">{{ upload.name }}</p>
+                    <div class="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-neutral-200">
+                        <div
+                            class="h-full rounded-full transition-all"
+                            :class="[
+                                upload.error ? 'bg-red-500' : upload.uploading ? 'animate-pulse bg-blue-400' : 'bg-green-500',
+                            ]"
+                            :style="{ width: upload.uploading ? '70%' : `${upload.progress}%` }"
+                        />
+                    </div>
+                </div>
+                <Icon
+                    v-if="upload.error"
+                    name="heroicons:exclamation-circle"
+                    class="h-5 w-5 shrink-0 text-red-500"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useTaskDocumentService } from '~/services/task-documents'
+
+const props = defineProps<{
+    taskId: number
+}>()
+
+const emit = defineEmits<{
+    uploaded: []
+}>()
+
+const { upload: uploadFile } = useTaskDocumentService()
+const toast = useToast()
+const { t } = useI18n()
+
+const fileInput = ref<HTMLInputElement | null>(null)
+const isDragging = ref(false)
+
+type UploadState = {
+    name: string
+    progress: number
+    uploading: boolean
+    error: boolean
+}
+
+const uploads = ref<UploadState[]>([])
+
+function handleDrop(event: DragEvent) {
+    isDragging.value = false
+    const files = event.dataTransfer?.files
+    if (files?.length) {
+        processFiles(Array.from(files))
+    }
+}
+
+function handleFileSelect(event: Event) {
+    const input = event.target as HTMLInputElement
+    if (input.files?.length) {
+        processFiles(Array.from(input.files))
+        input.value = ''
+    }
+}
+
+async function processFiles(files: File[]) {
+    const maxSize = 50 * 1024 * 1024
+
+    for (const file of files) {
+        if (file.size > maxSize) {
+            toast.error({
+                title: 'Erreur',
+                message: t('taskDocuments.maxSizeError'),
+            })
+            continue
+        }
+
+        const state: UploadState = reactive({
+            name: file.name,
+            progress: 30,
+            uploading: true,
+            error: false,
+        })
+        uploads.value.push(state)
+
+        try {
+            await uploadFile(props.taskId, file)
+            state.uploading = false
+            state.progress = 100
+        } catch {
+            state.uploading = false
+            state.error = true
+            state.progress = 100
+            toast.error({
+                title: 'Erreur',
+                message: t('taskDocuments.uploadError'),
+            })
+        }
+
+        emit('uploaded')
+    }
+
+    // Clean up completed uploads after a delay
+    setTimeout(() => {
+        uploads.value = uploads.value.filter(u => u.error)
+    }, 1500)
+}
+</script>

frontend/components/task/TaskDrawer.vue

@@ -50,39 +50,73 @@
             />
 
             <div class="mt-4">
-                <p class="mb-2 text-sm font-medium text-neutral-700">Types</p>
+                <p class="mb-2 text-sm font-medium text-neutral-700">Tags</p>
                 <div class="flex flex-wrap gap-2">
                     <label
-                        v-for="type in types"
-                        :key="type.id"
+                        v-for="tag in tags"
+                        :key="tag.id"
                         class="cursor-pointer rounded-full px-3 py-1 text-xs font-semibold transition"
-                        :class="form.typeIds.includes(type.id)
+                        :class="form.tagIds.includes(tag.id)
                             ? 'text-white'
                             : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'"
-                        :style="form.typeIds.includes(type.id) ? { backgroundColor: type.color } : {}"
+                        :style="form.tagIds.includes(tag.id) ? { backgroundColor: tag.color } : {}"
                     >
                         <input
                             type="checkbox"
                             class="hidden"
-                            :value="type.id"
-                            :checked="form.typeIds.includes(type.id)"
-                            @change="toggleType(type.id)"
+                            :value="tag.id"
+                            :checked="form.tagIds.includes(tag.id)"
+                            @change="toggleTag(tag.id)"
                         />
-                        {{ type.label }}
+                        {{ tag.label }}
                     </label>
                 </div>
             </div>
 
-            <div class="mt-6 flex justify-end">
+            <div class="mt-6 flex items-center" :class="isEditing ? 'justify-between' : '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"
+                    v-if="isEditing"
+                    type="button"
+                    class="rounded-md bg-red-500 px-4 py-2 text-sm font-semibold text-white hover:bg-red-600 disabled:cursor-not-allowed disabled:opacity-50"
                     :disabled="isSubmitting"
+                    @click="confirmDeleteOpen = true"
                 >
-                    Enregistrer
+                    Supprimer
                 </button>
+                <div class="flex gap-2">
+                    <button
+                        v-if="canArchive"
+                        type="button"
+                        class="rounded-md bg-neutral-500 px-4 py-2 text-sm font-semibold text-white hover:bg-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+                        :disabled="isSubmitting"
+                        @click="handleArchive"
+                    >
+                        {{ $t('archive.archiveButton') }}
+                    </button>
+                    <button
+                        v-if="canUnarchive"
+                        type="button"
+                        class="rounded-md bg-neutral-500 px-4 py-2 text-sm font-semibold text-white hover:bg-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+                        :disabled="isSubmitting"
+                        @click="handleUnarchive"
+                    >
+                        {{ $t('archive.unarchiveButton') }}
+                    </button>
+                    <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>
             </div>
         </form>
+
+        <ConfirmDeleteTaskModal
+            v-model="confirmDeleteOpen"
+            @confirm="handleDelete"
+        />
     </AppDrawer>
 </template>
 
@@ -91,7 +125,7 @@ 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 { TaskTag } from '~/services/dto/task-tag'
 import type { TaskGroup } from '~/services/dto/task-group'
 import type { UserData } from '~/services/dto/user-data'
 import { useTaskService } from '~/services/tasks'
@@ -103,7 +137,7 @@ const props = defineProps<{
     statuses: TaskStatus[]
     efforts: TaskEffort[]
     priorities: TaskPriority[]
-    types: TaskType[]
+    tags: TaskTag[]
     groups: TaskGroup[]
     users: UserData[]
 }>()
@@ -120,6 +154,7 @@ const isOpen = computed({
 
 const isEditing = computed(() => !!props.task)
 const isSubmitting = ref(false)
+const confirmDeleteOpen = ref(false)
 
 const form = reactive({
     title: '',
@@ -129,7 +164,7 @@ const form = reactive({
     priorityId: null as number | null,
     assigneeId: null as number | null,
     groupId: null as number | null,
-    typeIds: [] as number[],
+    tagIds: [] as number[],
 })
 
 const touched = reactive({
@@ -156,41 +191,108 @@ const groupOptions = computed(() =>
     props.groups.map(g => ({ label: g.title, value: g.id }))
 )
 
-function toggleType(id: number) {
-    const idx = form.typeIds.indexOf(id)
+const canArchive = computed(() => {
+    if (!isEditing.value || !props.task) return false
+    if (props.task.archived) return false
+    const status = props.statuses.find(s => s.id === props.task?.status?.id)
+    return !!status?.isFinal
+})
+
+const canUnarchive = computed(() => {
+    return isEditing.value && !!props.task?.archived
+})
+
+function toggleTag(id: number) {
+    const idx = form.tagIds.indexOf(id)
     if (idx >= 0) {
-        form.typeIds.splice(idx, 1)
+        form.tagIds.splice(idx, 1)
     } else {
-        form.typeIds.push(id)
+        form.tagIds.push(id)
     }
 }
 
+function populateForm(task: Task | null) {
+    if (task) {
+        form.title = task.title ?? ''
+        form.description = task.description ?? ''
+        form.statusId = task.status?.id ?? null
+        form.effortId = task.effort?.id ?? null
+        form.priorityId = task.priority?.id ?? null
+        form.assigneeId = task.assignee?.id ?? null
+        form.groupId = task.group?.id ?? null
+        form.tagIds = task.tags.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.tagIds = []
+    }
+    touched.title = false
+}
+
 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
+        populateForm(props.task)
     }
 })
 
-const { create, update } = useTaskService()
+watch(() => props.task, (task) => {
+    if (props.modelValue) {
+        populateForm(task)
+    }
+})
+
+const { create, update, remove } = useTaskService()
+
+async function handleDelete() {
+    if (!props.task) return
+    isSubmitting.value = true
+    try {
+        await remove(props.task.id)
+        confirmDeleteOpen.value = false
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+
+async function handleArchive() {
+    if (!props.task) return
+    const timerStore = useTimerStore()
+    if (timerStore.activeEntry?.task) {
+        const taskIri = typeof timerStore.activeEntry.task === 'string'
+            ? timerStore.activeEntry.task
+            : (timerStore.activeEntry.task as any)?.['@id'] ?? `/api/tasks/${(timerStore.activeEntry.task as any)?.id}`
+        if (taskIri === `/api/tasks/${props.task.id}`) {
+            await timerStore.stop()
+        }
+    }
+    isSubmitting.value = true
+    try {
+        await update(props.task.id, { archived: true })
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+
+async function handleUnarchive() {
+    if (!props.task) return
+    isSubmitting.value = true
+    try {
+        await update(props.task.id, { archived: false })
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
 
 async function handleSubmit() {
     touched.title = true
@@ -207,7 +309,7 @@ async function handleSubmit() {
             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}`),
+            tags: form.tagIds.map(id => `/api/task_tags/${id}`),
         }
 
         if (isEditing.value && props.task) {

frontend/components/task/TaskGitSection.vue

@@ -0,0 +1,425 @@
+<template>
+    <div class="mt-5 rounded-lg border border-neutral-200 bg-neutral-50">
+        <!-- Header with tabs -->
+        <div class="flex items-center justify-between border-b border-neutral-200 bg-neutral-100/60 px-4 py-2">
+            <div class="flex gap-1">
+                <button
+                    type="button"
+                    class="rounded-md px-3 py-1.5 text-xs font-semibold transition-colors"
+                    :class="activeTab === 'branches'
+                        ? 'bg-white text-neutral-900 shadow-sm ring-1 ring-neutral-200'
+                        : 'text-neutral-500 hover:text-neutral-700'"
+                    @click="activeTab = 'branches'"
+                >
+                    <Icon name="mdi:source-branch" size="14" class="mr-1 inline-block align-[-2px]" />
+                    {{ $t('gitea.branch.title') }}
+                    <span
+                        v-if="branches.length"
+                        class="ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-neutral-200 px-1 text-[10px] font-bold text-neutral-600"
+                    >{{ branches.length }}</span>
+                </button>
+                <button
+                    type="button"
+                    class="rounded-md px-3 py-1.5 text-xs font-semibold transition-colors"
+                    :class="activeTab === 'prs'
+                        ? 'bg-white text-neutral-900 shadow-sm ring-1 ring-neutral-200'
+                        : 'text-neutral-500 hover:text-neutral-700'"
+                    @click="activeTab = 'prs'"
+                >
+                    <Icon name="mdi:source-pull" size="14" class="mr-1 inline-block align-[-2px]" />
+                    {{ $t('gitea.pr.title') }}
+                    <span
+                        v-if="pullRequests.length"
+                        class="ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold"
+                        :class="hasOpenPr ? 'bg-green-100 text-green-700' : 'bg-neutral-200 text-neutral-600'"
+                    >{{ pullRequests.length }}</span>
+                </button>
+            </div>
+
+            <!-- Actions -->
+            <div class="flex gap-1">
+                <button
+                    v-if="activeTab === 'branches'"
+                    type="button"
+                    class="rounded-md px-2.5 py-1.5 text-xs font-medium text-neutral-500 transition-colors hover:bg-neutral-200/60 hover:text-neutral-700"
+                    :title="$t('gitea.branch.copy')"
+                    @click="handleCopy"
+                >
+                    <Icon name="mdi:content-copy" size="14" />
+                </button>
+                <button
+                    v-if="activeTab === 'branches'"
+                    type="button"
+                    class="rounded-md bg-primary-500 px-2.5 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-secondary-500"
+                    @click="showCreateForm = !showCreateForm"
+                >
+                    <Icon name="mdi:plus" size="14" class="mr-0.5 inline-block align-[-2px]" />
+                    {{ $t('gitea.branch.create') }}
+                </button>
+            </div>
+        </div>
+
+        <!-- Error state -->
+        <div v-if="error" class="px-4 py-3">
+            <p class="text-xs text-red-500">{{ error }}</p>
+        </div>
+
+        <!-- Create branch form (inline) -->
+        <Transition name="slide-down">
+            <div v-if="showCreateForm && activeTab === 'branches'" class="relative z-20 border-b border-neutral-200 bg-white px-4 py-3">
+                <div class="grid grid-cols-[1fr_1fr_auto] items-end gap-3">
+                    <MalioSelect
+                        v-model="branchForm.type"
+                        :options="typeOptions"
+                        :label="$t('gitea.branch.type')"
+                        min-width="w-full"
+                    />
+                    <MalioInputText
+                        v-model="branchForm.baseBranch"
+                        :label="$t('gitea.branch.baseBranch')"
+                        input-class="w-full"
+                    />
+                    <button
+                        type="button"
+                        class="mb-[2px] rounded-md bg-primary-500 px-4 py-2 text-xs font-semibold text-white transition-colors hover:bg-secondary-500 disabled:opacity-50"
+                        :disabled="isCreating"
+                        @click="handleCreate"
+                    >
+                        {{ isCreating ? '...' : $t('gitea.branch.create') }}
+                    </button>
+                </div>
+                <code class="mt-2 block rounded bg-neutral-50 px-2 py-1 text-[11px] text-neutral-500">
+                    {{ branchPreview }}
+                </code>
+            </div>
+        </Transition>
+
+        <!-- Content area with scroll -->
+        <div class="max-h-64 overflow-y-auto overscroll-contain">
+            <!-- Loading -->
+            <div v-if="(activeTab === 'branches' && isLoading) || (activeTab === 'prs' && isLoadingPrs)" class="flex items-center justify-center py-8">
+                <Icon name="mdi:loading" size="20" class="animate-spin text-neutral-300" />
+            </div>
+
+            <!-- BRANCHES TAB -->
+            <template v-if="activeTab === 'branches' && !isLoading">
+                <div v-if="branches.length" class="divide-y divide-neutral-100">
+                    <div
+                        v-for="branch in branches"
+                        :key="branch.name"
+                        class="group"
+                    >
+                        <!-- Branch header (clickable to expand) -->
+                        <button
+                            type="button"
+                            class="flex w-full items-center gap-2 px-4 py-2.5 text-left transition-colors hover:bg-white"
+                            @click="toggleBranch(branch.name)"
+                        >
+                            <Icon
+                                name="mdi:chevron-right"
+                                size="14"
+                                class="shrink-0 text-neutral-400 transition-transform"
+                                :class="{ 'rotate-90': expandedBranches.has(branch.name) }"
+                            />
+                            <Icon name="mdi:source-branch" size="14" class="shrink-0 text-primary-500" />
+                            <span class="min-w-0 truncate text-xs font-medium text-primary-600">
+                                {{ branch.name }}
+                            </span>
+                            <span
+                                v-if="branch.commits.length"
+                                class="ml-auto shrink-0 rounded bg-neutral-200/60 px-1.5 py-0.5 text-[10px] font-medium text-neutral-500"
+                            >
+                                {{ branch.commits.length }} commit{{ branch.commits.length > 1 ? 's' : '' }}
+                            </span>
+                            <a
+                                :href="branchUrl(branch.name)"
+                                target="_blank"
+                                class="shrink-0 text-neutral-400 opacity-0 transition-opacity hover:text-primary-500 group-hover:opacity-100"
+                                @click.stop
+                            >
+                                <Icon name="mdi:open-in-new" size="12" />
+                            </a>
+                        </button>
+
+                        <!-- Commits (collapsible) -->
+                        <Transition name="expand">
+                            <div v-if="expandedBranches.has(branch.name) && branch.commits.length" class="border-t border-neutral-100 bg-white">
+                                <div
+                                    v-for="(commit, idx) in branch.commits.slice(0, 10)"
+                                    :key="commit.sha"
+                                    class="flex items-center gap-2 px-4 py-1.5"
+                                    :class="idx !== Math.min(branch.commits.length, 10) - 1 ? 'border-b border-neutral-50' : ''"
+                                >
+                                    <span class="shrink-0 pl-5 font-mono text-[10px] text-primary-400">{{ commit.sha.slice(0, 7) }}</span>
+                                    <span class="min-w-0 truncate text-[11px] text-neutral-700">{{ commitFirstLine(commit.message) }}</span>
+                                    <span class="ml-auto shrink-0 text-[10px] text-neutral-400">{{ commit.author }}</span>
+                                    <span class="shrink-0 text-[10px] text-neutral-300">{{ formatDate(commit.date) }}</span>
+                                </div>
+                                <div
+                                    v-if="branch.commits.length > 10"
+                                    class="border-t border-neutral-50 px-4 py-1.5 text-center text-[10px] text-neutral-400"
+                                >
+                                    +{{ branch.commits.length - 10 }} commits
+                                </div>
+                            </div>
+                        </Transition>
+                    </div>
+                </div>
+
+                <p v-else-if="!error" class="py-6 text-center text-xs text-neutral-400">
+                    {{ $t('gitea.branch.noBranches') }}
+                </p>
+            </template>
+
+            <!-- PULL REQUESTS TAB -->
+            <template v-if="activeTab === 'prs' && !isLoadingPrs">
+                <div v-if="pullRequests.length" class="divide-y divide-neutral-100">
+                    <div
+                        v-for="pr in pullRequests"
+                        :key="pr.number"
+                        class="group flex items-start gap-3 px-4 py-3 transition-colors hover:bg-white"
+                    >
+                        <!-- Status pill -->
+                        <span
+                            class="mt-0.5 shrink-0 rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white"
+                            :class="prStatusClass(pr)"
+                        >
+                            {{ prStatusLabel(pr) }}
+                        </span>
+
+                        <!-- PR content -->
+                        <div class="min-w-0 flex-1">
+                            <a
+                                :href="pr.url"
+                                target="_blank"
+                                class="text-xs font-medium text-neutral-800 hover:text-primary-500 hover:underline"
+                            >
+                                <span class="text-neutral-400">#{{ pr.number }}</span>
+                                {{ pr.title }}
+                            </a>
+                            <div class="mt-1 flex items-center gap-2">
+                                <span class="text-[10px] text-neutral-400">{{ pr.author }}</span>
+                                <span v-if="pr.headBranch" class="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-[10px] text-neutral-500">
+                                    {{ pr.headBranch }}
+                                </span>
+                                <!-- CI statuses -->
+                                <template v-if="pr.ciStatuses.length">
+                                    <a
+                                        v-for="ci in pr.ciStatuses"
+                                        :key="ci.context"
+                                        :href="ci.target_url"
+                                        target="_blank"
+                                        class="inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[10px] font-medium transition-opacity hover:opacity-80"
+                                        :class="ciStatusClass(ci.status)"
+                                    >
+                                        <Icon :name="ciStatusIcon(ci.status)" size="10" />
+                                        {{ ci.context }}
+                                    </a>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <p v-else-if="branches.length && !error" class="py-6 text-center text-xs text-neutral-400">
+                    {{ $t('gitea.pr.noPrs') }}
+                </p>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Task } from '~/services/dto/task'
+import type { GiteaBranch, GiteaPullRequest } from '~/services/dto/gitea'
+import { useGiteaService } from '~/services/gitea'
+
+const { t } = useI18n()
+const props = defineProps<{
+    task: Task
+    giteaUrl: string
+}>()
+
+const { listBranches, createBranch, listPullRequests, getBranchName } = useGiteaService()
+
+const activeTab = ref<'branches' | 'prs'>('branches')
+const branches = ref<GiteaBranch[]>([])
+const pullRequests = ref<GiteaPullRequest[]>([])
+const isLoading = ref(true)
+const isLoadingPrs = ref(true)
+const isCreating = ref(false)
+const error = ref('')
+const showCreateForm = ref(false)
+const expandedBranches = ref(new Set<string>())
+
+const branchForm = reactive({
+    type: 'feature',
+    baseBranch: 'develop',
+})
+
+const typeOptions = [
+    { label: t('gitea.branch.types.feature'), value: 'feature' },
+    { label: t('gitea.branch.types.fix'), value: 'fix' },
+    { label: t('gitea.branch.types.refactor'), value: 'refactor' },
+    { label: t('gitea.branch.types.hotfix'), value: 'hotfix' },
+    { label: t('gitea.branch.types.chore'), value: 'chore' },
+]
+
+const hasOpenPr = computed(() => pullRequests.value.some(pr => pr.state === 'open' && !pr.merged))
+
+const branchPreview = computed(() => {
+    if (!props.task.project?.code || !props.task.number) return ''
+    const slug = props.task.title
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '')
+        .slice(0, 50)
+    return `${branchForm.type}/${props.task.project.code}-${props.task.number}-${slug}`
+})
+
+function toggleBranch(name: string) {
+    if (expandedBranches.value.has(name)) {
+        expandedBranches.value.delete(name)
+    } else {
+        expandedBranches.value.add(name)
+    }
+}
+
+function branchUrl(name: string): string {
+    const project = props.task.project
+    if (!project?.giteaOwner || !project?.giteaRepo) return '#'
+    return `${props.giteaUrl}/${project.giteaOwner}/${project.giteaRepo}/src/branch/${encodeURIComponent(name)}`
+}
+
+function commitFirstLine(message: string): string {
+    return message.split('\n')[0]
+}
+
+function formatDate(dateStr: string): string {
+    const d = new Date(dateStr)
+    const now = new Date()
+    const diffMs = now.getTime() - d.getTime()
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+
+    if (diffDays === 0) return "aujourd'hui"
+    if (diffDays === 1) return 'hier'
+    if (diffDays < 7) return `il y a ${diffDays}j`
+    return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
+}
+
+function prStatusClass(pr: GiteaPullRequest): string {
+    if (pr.merged) return 'bg-purple-500'
+    if (pr.state === 'open') return 'bg-green-500'
+    return 'bg-red-500'
+}
+
+function prStatusLabel(pr: GiteaPullRequest): string {
+    if (pr.merged) return t('gitea.pr.merged')
+    if (pr.state === 'open') return t('gitea.pr.open')
+    return t('gitea.pr.closed')
+}
+
+function ciStatusClass(status: string): string {
+    if (status === 'success') return 'bg-green-100 text-green-700'
+    if (status === 'failure' || status === 'error') return 'bg-red-100 text-red-700'
+    return 'bg-yellow-100 text-yellow-700'
+}
+
+function ciStatusIcon(status: string): string {
+    if (status === 'success') return 'mdi:check-circle'
+    if (status === 'failure' || status === 'error') return 'mdi:close-circle'
+    return 'mdi:clock-outline'
+}
+
+async function loadData() {
+    if (!props.task.id) return
+
+    isLoading.value = true
+    isLoadingPrs.value = true
+    error.value = ''
+
+    try {
+        branches.value = await listBranches(props.task.id)
+        // Auto-expand first branch
+        if (branches.value.length === 1) {
+            expandedBranches.value.add(branches.value[0].name)
+        }
+    } catch (e: any) {
+        error.value = e?.data?.detail || e?.data?.['hydra:description'] || t('gitea.error')
+    } finally {
+        isLoading.value = false
+    }
+
+    try {
+        pullRequests.value = await listPullRequests(props.task.id)
+    } catch {
+        // PR errors don't block branch display
+    } finally {
+        isLoadingPrs.value = false
+    }
+}
+
+async function handleCreate() {
+    isCreating.value = true
+    try {
+        await createBranch(props.task.id, {
+            type: branchForm.type,
+            baseBranch: branchForm.baseBranch,
+        })
+        showCreateForm.value = false
+        await loadData()
+    } finally {
+        isCreating.value = false
+    }
+}
+
+async function handleCopy() {
+    try {
+        const result = await getBranchName(props.task.id, branchForm.type)
+        await navigator.clipboard.writeText(result.name)
+        const { success } = useToast()
+        success(t('gitea.branch.copied'))
+    } catch {
+        // Silently fail
+    }
+}
+
+onMounted(() => {
+    loadData()
+})
+</script>
+
+<style scoped>
+.slide-down-enter-active {
+    transition: opacity 0.15s ease;
+}
+
+.slide-down-leave-active {
+    transition: opacity 0.1s ease;
+}
+
+.slide-down-enter-from,
+.slide-down-leave-to {
+    opacity: 0;
+}
+
+.expand-enter-active,
+.expand-leave-active {
+    transition: all 0.15s ease;
+    overflow: hidden;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+    max-height: 0;
+    opacity: 0;
+}
+
+.expand-enter-to,
+.expand-leave-from {
+    max-height: 500px;
+    opacity: 1;
+}
+</style>

frontend/components/task/TaskGroupDrawer.vue

@@ -17,7 +17,32 @@
                 <ColorPicker v-model="form.color" />
             </div>
 
-            <div class="mt-6 flex justify-end">
+            <div
+                v-if="isEditing && !canArchive && !canUnarchive && nonFinalTasksCount > 0"
+                class="mt-4 rounded-md bg-amber-50 px-4 py-3 text-sm text-amber-700"
+            >
+                {{ $t('archive.groupNonFinalTasks', { count: nonFinalTasksCount }) }}
+            </div>
+
+            <div class="mt-6 flex items-center" :class="isEditing ? 'justify-between' : 'justify-end'">
+                <button
+                    v-if="canArchive"
+                    type="button"
+                    class="rounded-md bg-neutral-500 px-4 py-2 text-sm font-semibold text-white hover:bg-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+                    :disabled="isSubmitting"
+                    @click="handleArchive"
+                >
+                    {{ $t('archive.archiveButton') }}
+                </button>
+                <button
+                    v-if="canUnarchive"
+                    type="button"
+                    class="rounded-md bg-neutral-500 px-4 py-2 text-sm font-semibold text-white hover:bg-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+                    :disabled="isSubmitting"
+                    @click="handleUnarchive"
+                >
+                    {{ $t('archive.unarchiveButton') }}
+                </button>
                 <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"
@@ -32,12 +57,15 @@
 
 <script setup lang="ts">
 import type { TaskGroup, TaskGroupWrite } from '~/services/dto/task-group'
+import type { Task } from '~/services/dto/task'
 import { useTaskGroupService } from '~/services/task-groups'
+import { useTaskService } from '~/services/tasks'
 
 const props = defineProps<{
     modelValue: boolean
     group: TaskGroup | null
     projectId: number
+    tasks?: Task[]
 }>()
 
 const emit = defineEmits<{
@@ -79,6 +107,51 @@ watch(() => props.modelValue, (open) => {
 })
 
 const { create, update } = useTaskGroupService()
+const taskService = useTaskService()
+
+const groupTasks = computed(() =>
+    (props.tasks ?? []).filter(t => t.group?.id === props.group?.id)
+)
+
+const nonFinalTasksCount = computed(() =>
+    groupTasks.value.filter(t => t.status?.isFinal !== true).length
+)
+
+const canArchive = computed(() => {
+    if (!isEditing.value || !props.group || props.group.archived) return false
+    if (groupTasks.value.length === 0) return false
+    return nonFinalTasksCount.value === 0
+})
+
+const canUnarchive = computed(() => {
+    return isEditing.value && !!props.group?.archived
+})
+
+async function handleArchive() {
+    if (!props.group) return
+    isSubmitting.value = true
+    try {
+        await Promise.all(groupTasks.value.map(t => taskService.update(t.id, { archived: true })))
+        await update(props.group.id, { archived: true })
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+
+async function handleUnarchive() {
+    if (!props.group) return
+    isSubmitting.value = true
+    try {
+        await Promise.all(groupTasks.value.map(t => taskService.update(t.id, { archived: false })))
+        await update(props.group.id, { archived: false })
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
 
 async function handleSubmit() {
     touched.title = true

frontend/components/task/TaskModal.vue

@@ -0,0 +1,549 @@
+<template>
+    <Teleport v-if="isOpen" to="body">
+        <Transition name="task-modal" appear>
+            <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+                <!-- Backdrop -->
+                <div
+                    class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
+                    @click="close"
+                />
+
+                <!-- Modal -->
+                <div
+                    class="relative z-10 flex w-full max-w-2xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black/5"
+                    style="max-height: min(90vh, 900px)"
+                >
+                    <!-- Header -->
+                    <div class="border-b border-neutral-100 bg-neutral-50/80 px-4 py-4 sm:px-8 sm:py-5">
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center gap-3">
+                                <span
+                                    v-if="isEditing && task?.project?.code && task?.number"
+                                    class="rounded-md bg-primary-500 px-2.5 py-1 text-xs font-bold tracking-wide text-white"
+                                >
+                                    {{ task.project.code }}-{{ task.number }}
+                                </span>
+                                <h2 class="text-lg font-bold tracking-tight text-neutral-900">
+                                    {{ isEditing ? 'Modifier un ticket' : 'Ajouter un ticket' }}
+                                </h2>
+                            </div>
+                            <button
+                                type="button"
+                                class="flex h-8 w-8 items-center justify-center rounded-lg text-neutral-400 transition-colors hover:bg-neutral-200/60 hover:text-neutral-600"
+                                @click="close"
+                            >
+                                <Icon name="mdi:close" size="20" />
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Body -->
+                    <form @submit.prevent="handleSubmit" class="overflow-y-auto px-4 py-4 sm:px-8 sm:py-6">
+                        <!-- Title -->
+                        <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"
+                        />
+
+                        <!-- Two-column selects -->
+                        <div class="mt-4 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
+                            <MalioSelect
+                                v-model="form.statusId"
+                                :options="statusOptions"
+                                label="Statut"
+                                empty-option-label="Aucun statut"
+                                min-width="w-full"
+                            />
+                            <MalioSelect
+                                v-model="form.assigneeId"
+                                :options="userOptions"
+                                label="User"
+                                empty-option-label="Aucun utilisateur"
+                                min-width="w-full"
+                            />
+                            <MalioSelect
+                                v-model="form.effortId"
+                                :options="effortOptions"
+                                label="Effort"
+                                empty-option-label="Aucun effort"
+                                min-width="w-full"
+                            />
+                            <MalioSelect
+                                v-model="form.priorityId"
+                                :options="priorityOptions"
+                                label="Priorité"
+                                empty-option-label="Aucune priorité"
+                                min-width="w-full"
+                            />
+                            <MalioSelect
+                                v-model="form.groupId"
+                                :options="groupOptions"
+                                label="Groupe"
+                                empty-option-label="Aucun groupe"
+                                min-width="w-full"
+                            />
+                        </div>
+
+                        <!-- Tags -->
+                        <div v-if="tags.length" class="mt-5">
+                            <p class="mb-2 text-sm font-medium text-neutral-700">Tags</p>
+                            <div class="flex flex-wrap gap-2">
+                                <label
+                                    v-for="tag in tags"
+                                    :key="tag.id"
+                                    class="cursor-pointer rounded-full px-3 py-1 text-xs font-semibold transition-all"
+                                    :class="form.tagIds.includes(tag.id)
+                                        ? 'text-white shadow-sm'
+                                        : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'"
+                                    :style="form.tagIds.includes(tag.id) ? { backgroundColor: tag.color } : {}"
+                                >
+                                    <input
+                                        type="checkbox"
+                                        class="hidden"
+                                        :value="tag.id"
+                                        :checked="form.tagIds.includes(tag.id)"
+                                        @change="toggleTag(tag.id)"
+                                    />
+                                    {{ tag.label }}
+                                </label>
+                            </div>
+                        </div>
+
+                        <!-- Description -->
+                        <div class="mt-5">
+                            <MalioInputTextArea
+                                v-model="form.description"
+                                label="Description"
+                                :size="3"
+                            />
+                        </div>
+
+                        <!-- Documents -->
+                        <TaskDocumentUpload
+                            v-if="isEditing && task && isAdmin"
+                            :task-id="task.id"
+                            @uploaded="handleDocumentUploaded"
+                        />
+                        <TaskDocumentList
+                            v-if="isEditing && task"
+                            :documents="documents"
+                            :is-admin="isAdmin"
+                            @preview="openPreview"
+                            @delete="handleDeleteDocument"
+                        />
+
+                        <!-- Document preview modal -->
+                        <TaskDocumentPreview
+                            :document="previewDoc"
+                            :has-prev="previewIndex > 0"
+                            :has-next="previewIndex < documents.length - 1"
+                            @close="previewDoc = null"
+                            @prev="prevPreview"
+                            @next="nextPreview"
+                        />
+
+                        <!-- Git section -->
+                        <TaskGitSection
+                            v-if="hasGitea && isEditing && task"
+                            :task="task"
+                            :gitea-url="giteaUrl"
+                        />
+
+                        <!-- BookStack links -->
+                        <TaskBookStackLinks
+                            v-if="hasBookStack && isEditing && task"
+                            :task-id="task.id"
+                        />
+
+                        <!-- Footer -->
+                        <div
+                            class="mt-6 flex items-center border-t border-neutral-100 pt-5"
+                            :class="isEditing ? 'justify-between' : 'justify-end'"
+                        >
+                            <button
+                                v-if="isEditing"
+                                type="button"
+                                class="rounded-lg bg-red-50 px-4 py-2 text-sm font-semibold text-red-600 transition-colors hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-50"
+                                :disabled="isSubmitting"
+                                @click="confirmDeleteOpen = true"
+                            >
+                                Supprimer
+                            </button>
+                            <div class="flex gap-3">
+                                <button
+                                    v-if="canArchive"
+                                    type="button"
+                                    class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                    :disabled="isSubmitting"
+                                    @click="handleArchive"
+                                >
+                                    {{ $t('archive.archiveButton') }}
+                                </button>
+                                <button
+                                    v-if="canUnarchive"
+                                    type="button"
+                                    class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                    :disabled="isSubmitting"
+                                    @click="handleUnarchive"
+                                >
+                                    {{ $t('archive.unarchiveButton') }}
+                                </button>
+                                <button
+                                    type="button"
+                                    class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50"
+                                    @click="close"
+                                >
+                                    Annuler
+                                </button>
+                                <button
+                                    type="submit"
+                                    class="rounded-lg bg-primary-500 px-6 py-2 text-sm font-semibold text-white transition-colors hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                                    :disabled="isSubmitting"
+                                >
+                                    Enregistrer
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+
+                    <ConfirmDeleteTaskModal
+                        v-model="confirmDeleteOpen"
+                        @confirm="handleDelete"
+                    />
+
+                    <!-- Confirm delete document modal -->
+                    <ConfirmDeleteDocumentModal
+                        v-model="confirmDeleteDocOpen"
+                        @confirm="confirmDeleteDocument"
+                    />
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { Task, TaskWrite } from '~/services/dto/task'
+import type { TaskDocument } from '~/services/dto/task-document'
+import { useGiteaService } from '~/services/gitea'
+import { useTaskDocumentService } from '~/services/task-documents'
+import ConfirmDeleteDocumentModal from '~/components/ui/ConfirmDeleteDocumentModal.vue'
+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 { TaskTag } from '~/services/dto/task-tag'
+import type { TaskGroup } from '~/services/dto/task-group'
+import type { UserData } from '~/services/dto/user-data'
+import { useTaskService } from '~/services/tasks'
+
+const props = defineProps<{
+    modelValue: boolean
+    task: Task | null
+    projectId: number
+    statuses: TaskStatus[]
+    efforts: TaskEffort[]
+    priorities: TaskPriority[]
+    tags: TaskTag[]
+    groups: TaskGroup[]
+    users: UserData[]
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'saved'): void
+}>()
+
+const isOpen = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v),
+})
+
+function close() {
+    isOpen.value = false
+}
+
+const isEditing = computed(() => !!props.task)
+const isSubmitting = ref(false)
+const confirmDeleteOpen = ref(false)
+
+const giteaUrl = ref('')
+const { getSettings: getGiteaSettings } = useGiteaService()
+
+const hasGitea = computed(() => {
+    return !!props.task?.project?.giteaOwner && !!props.task?.project?.giteaRepo && !!giteaUrl.value
+})
+
+const hasBookStack = computed(() => {
+    return !!props.task?.project?.bookstackShelfId
+})
+
+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,
+    tagIds: [] as number[],
+})
+
+const touched = reactive({
+    title: false,
+})
+
+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 userOptions = computed(() =>
+    props.users.map(u => ({ label: u.username, value: u.id }))
+)
+
+const groupOptions = computed(() =>
+    props.groups.map(g => ({ label: g.title, value: g.id }))
+)
+
+const canArchive = computed(() => {
+    if (!isEditing.value || !props.task) return false
+    if (props.task.archived) return false
+    const status = props.statuses.find(s => s.id === props.task?.status?.id)
+    return !!status?.isFinal
+})
+
+const canUnarchive = computed(() => {
+    return isEditing.value && !!props.task?.archived
+})
+
+function toggleTag(id: number) {
+    const idx = form.tagIds.indexOf(id)
+    if (idx >= 0) {
+        form.tagIds.splice(idx, 1)
+    } else {
+        form.tagIds.push(id)
+    }
+}
+
+function populateForm(task: Task | null) {
+    if (task) {
+        form.title = task.title ?? ''
+        form.description = task.description ?? ''
+        form.statusId = task.status?.id ?? null
+        form.effortId = task.effort?.id ?? null
+        form.priorityId = task.priority?.id ?? null
+        form.assigneeId = task.assignee?.id ?? null
+        form.groupId = task.group?.id ?? null
+        form.tagIds = task.tags.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.tagIds = []
+    }
+    touched.title = false
+}
+
+watch(() => props.modelValue, (open) => {
+    if (open) {
+        populateForm(props.task)
+    }
+})
+
+watch(() => props.task, (task) => {
+    if (props.modelValue) {
+        populateForm(task)
+    }
+})
+
+watch(() => props.modelValue, async (open) => {
+    if (open && props.task?.project?.giteaOwner && props.task?.project?.giteaRepo && !giteaUrl.value) {
+        try {
+            const settings = await getGiteaSettings()
+            giteaUrl.value = settings.url ?? ''
+        } catch {
+            // Gitea not available
+        }
+    }
+})
+
+const { create, update, remove } = useTaskService()
+const { remove: removeDocument, getByTask: getDocumentsByTask } = useTaskDocumentService()
+const { t } = useI18n()
+
+const authStore = useAuthStore()
+const isAdmin = computed(() => authStore.user?.roles?.includes('ROLE_ADMIN') ?? false)
+
+const localDocuments = ref<TaskDocument[]>([])
+const documents = computed(() => localDocuments.value)
+const previewDoc = ref<TaskDocument | null>(null)
+
+// Sync documents from task prop when modal opens or task changes
+watch(() => props.task?.documents, (docs) => {
+    localDocuments.value = docs ? [...docs] : []
+}, { immediate: true })
+
+async function refreshDocuments() {
+    if (!props.task) return
+    localDocuments.value = await getDocumentsByTask(props.task.id)
+}
+
+const previewIndex = computed(() => {
+    if (!previewDoc.value) return -1
+    return documents.value.findIndex(d => d.id === previewDoc.value!.id)
+})
+
+function openPreview(doc: TaskDocument) {
+    previewDoc.value = doc
+}
+
+function prevPreview() {
+    if (previewIndex.value > 0) {
+        previewDoc.value = documents.value[previewIndex.value - 1]
+    }
+}
+
+function nextPreview() {
+    if (previewIndex.value < documents.value.length - 1) {
+        previewDoc.value = documents.value[previewIndex.value + 1]
+    }
+}
+
+const confirmDeleteDocOpen = ref(false)
+const documentToDelete = ref<TaskDocument | null>(null)
+
+function handleDeleteDocument(doc: TaskDocument) {
+    documentToDelete.value = doc
+    confirmDeleteDocOpen.value = true
+}
+
+async function confirmDeleteDocument() {
+    if (!documentToDelete.value) return
+    await removeDocument(documentToDelete.value.id)
+    confirmDeleteDocOpen.value = false
+    documentToDelete.value = null
+    await refreshDocuments()
+}
+
+async function handleDocumentUploaded() {
+    await refreshDocuments()
+}
+
+async function handleDelete() {
+    if (!props.task) return
+    isSubmitting.value = true
+    try {
+        await remove(props.task.id)
+        confirmDeleteOpen.value = false
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+
+async function handleArchive() {
+    if (!props.task) return
+    const timerStore = useTimerStore()
+    if (timerStore.activeEntry?.task) {
+        const taskIri = typeof timerStore.activeEntry.task === 'string'
+            ? timerStore.activeEntry.task
+            : (timerStore.activeEntry.task as any)?.['@id'] ?? `/api/tasks/${(timerStore.activeEntry.task as any)?.id}`
+        if (taskIri === `/api/tasks/${props.task.id}`) {
+            await timerStore.stop()
+        }
+    }
+    isSubmitting.value = true
+    try {
+        await update(props.task.id, { archived: true })
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+
+async function handleUnarchive() {
+    if (!props.task) return
+    isSubmitting.value = true
+    try {
+        await update(props.task.id, { archived: false })
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+
+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}`,
+            tags: form.tagIds.map(id => `/api/task_tags/${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>
+
+<style scoped>
+.task-modal-enter-active,
+.task-modal-leave-active {
+    transition: opacity 0.2s ease;
+}
+
+.task-modal-enter-active > div:last-child,
+.task-modal-leave-active > div:last-child {
+    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
+}
+
+.task-modal-enter-from,
+.task-modal-leave-to {
+    opacity: 0;
+}
+
+.task-modal-enter-from > div:last-child {
+    transform: scale(0.95) translateY(8px);
+    opacity: 0;
+}
+
+.task-modal-leave-to > div:last-child {
+    transform: scale(0.97);
+    opacity: 0;
+}
+</style>

frontend/components/task/TaskStatusDrawer.vue

@@ -18,6 +18,18 @@
                 <ColorPicker v-model="form.color" />
             </div>
 
+            <div class="mt-4 flex items-center gap-2">
+                <input
+                    id="isFinal"
+                    v-model="form.isFinal"
+                    type="checkbox"
+                    class="h-4 w-4 rounded border-neutral-300 text-primary-500 focus:ring-primary-500"
+                />
+                <label for="isFinal" class="text-sm font-medium text-neutral-700">
+                    {{ $t('archive.statusFinal') }}
+                </label>
+            </div>
+
             <div class="mt-6 flex justify-end">
                 <button
                     type="submit"
@@ -57,6 +69,7 @@ const form = reactive({
     label: '',
     position: '0',
     color: '#222783',
+    isFinal: false,
 })
 
 const touched = reactive({
@@ -69,10 +82,12 @@ watch(() => props.modelValue, (open) => {
             form.label = props.item.label ?? ''
             form.position = String(props.item.position ?? 0)
             form.color = props.item.color ?? '#222783'
+            form.isFinal = props.item.isFinal ?? false
         } else {
             form.label = ''
             form.position = '0'
             form.color = '#222783'
+            form.isFinal = false
         }
         touched.label = false
     }
@@ -90,6 +105,7 @@ async function handleSubmit() {
             label: form.label.trim(),
             position: Number(form.position),
             color: form.color,
+            isFinal: form.isFinal,
         }
 
         if (isEditing.value && props.item) {

frontend/components/task/TaskTagDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-    <AppDrawer v-model="isOpen" :title="isEditing ? 'Modifier un type' : 'Ajouter un type'">
+    <AppDrawer v-model="isOpen" :title="isEditing ? 'Modifier un tag' : 'Ajouter un tag'">
         <form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
             <MalioInputText
                 v-model="form.label"
@@ -26,12 +26,12 @@
 </template>
 
 <script setup lang="ts">
-import type { TaskType, TaskTypeWrite } from '~/services/dto/task-type'
-import { useTaskTypeService } from '~/services/task-types'
+import type { TaskTag, TaskTagWrite } from '~/services/dto/task-tag'
+import { useTaskTagService } from '~/services/task-tags'
 
 const props = defineProps<{
     modelValue: boolean
-    item: TaskType | null
+    item: TaskTag | null
 }>()
 
 const emit = defineEmits<{
@@ -69,7 +69,7 @@ watch(() => props.modelValue, (open) => {
     }
 })
 
-const { create, update } = useTaskTypeService()
+const { create, update } = useTaskTagService()
 
 async function handleSubmit() {
     touched.label = true
@@ -77,7 +77,7 @@ async function handleSubmit() {
 
     isSubmitting.value = true
     try {
-        const payload: TaskTypeWrite = {
+        const payload: TaskTagWrite = {
             label: form.label.trim(),
             color: form.color,
         }

frontend/components/time-tracking/TimeEntryBlock.vue

@@ -0,0 +1,241 @@
+<template>
+    <div
+        ref="blockEl"
+        class="absolute z-10 cursor-pointer rounded-md text-xs text-white shadow-sm select-none"
+        :style="blockStyle"
+        :class="{ 'opacity-40': isDragSource }"
+        @contextmenu.prevent="emit('contextmenu', $event, entry)"
+        @mousedown="onMouseDown"
+        @click.stop
+    >
+        <!-- Resize handle top (outside block) -->
+        <div
+            class="absolute left-0 right-0 h-3 cursor-n-resize group"
+            style="bottom: 100%"
+            @mousedown.stop.prevent="onResizeTopStart"
+        >
+            <div class="absolute bottom-0 left-1/2 -translate-x-1/2 h-[3px] w-8 rounded-full bg-black/0 group-hover:bg-black/20 transition" />
+        </div>
+
+        <div class="px-1.5 py-0.5 h-full overflow-hidden">
+            <!-- Full display: title + project + type dot + duration -->
+            <template v-if="sizeLevel >= 3">
+                <div class="flex items-center gap-1">
+                    <div class="font-semibold truncate">{{ entry.title || 'Sans titre' }}</div>
+                    <span class="ml-auto shrink-0 text-[10px] tabular-nums opacity-80">{{ duration }}</span>
+                </div>
+                <div v-if="entry.project" class="truncate text-[10px] opacity-80">{{ entry.project.name }}</div>
+                <div v-if="entry.tags.length" class="mt-0.5 flex items-center gap-1 overflow-hidden">
+                    <span
+                        v-for="tag in entry.tags"
+                        :key="tag.id"
+                        class="inline-flex items-center gap-0.5 truncate text-[9px] opacity-90"
+                    >
+                        <span class="inline-block h-1.5 w-1.5 shrink-0 rounded-full" :style="{ backgroundColor: tag.color }" />
+                        {{ tag.label }}
+                    </span>
+                </div>
+            </template>
+
+            <!-- Medium: title + duration -->
+            <template v-else-if="sizeLevel === 2">
+                <div class="font-semibold truncate">{{ entry.title || 'Sans titre' }}</div>
+                <div class="text-[10px] tabular-nums opacity-80">{{ duration }}</div>
+            </template>
+
+            <!-- Small: title only -->
+            <template v-else-if="sizeLevel === 1">
+                <div class="font-semibold truncate text-[10px] leading-tight">{{ entry.title || 'Sans titre' }}</div>
+            </template>
+
+            <!-- Tiny: just a colored bar, no text -->
+        </div>
+
+        <!-- Resize handle bottom (outside block) -->
+        <div
+            class="absolute left-0 right-0 h-3 cursor-s-resize group"
+            style="top: 100%"
+            @mousedown.stop.prevent="onResizeBottomStart"
+        >
+            <div class="absolute top-0 left-1/2 -translate-x-1/2 h-[3px] w-8 rounded-full bg-black/0 group-hover:bg-black/20 transition" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TimeEntry } from '~/services/dto/time-entry'
+
+const props = defineProps<{
+    entry: TimeEntry
+    hourHeight: number
+    dayStartHour: number
+    isDragSource?: boolean
+    columnIndex?: number
+    totalColumns?: number
+}>()
+
+const emit = defineEmits<{
+    (e: 'click', entry: TimeEntry): void
+    (e: 'contextmenu', event: MouseEvent, entry: TimeEntry): void
+    (e: 'resize', entry: TimeEntry, newStartedAt: string, newStoppedAt: string): void
+    (e: 'moveStart', payload: { entry: TimeEntry; offsetY: number }): void
+}>()
+
+const blockEl = ref<HTMLElement | null>(null)
+
+const startDate = computed(() => new Date(props.entry.startedAt))
+const endDate = computed(() => props.entry.stoppedAt ? new Date(props.entry.stoppedAt) : new Date())
+
+const resizeTopDeltaMinutes = ref(0)
+const resizeBottomDeltaMinutes = ref(0)
+
+const duration = computed(() => {
+    const mins = Math.floor((endDate.value.getTime() + resizeBottomDeltaMinutes.value * 60000
+        - startDate.value.getTime() - resizeTopDeltaMinutes.value * 60000) / 60000)
+    const h = Math.floor(mins / 60)
+    const m = mins % 60
+    return m > 0 ? `${h}h${String(m).padStart(2, '0')}` : `${h}h`
+})
+
+const heightPx = computed(() => {
+    const startMinutes = startDate.value.getHours() * 60 + startDate.value.getMinutes() + resizeTopDeltaMinutes.value
+    const endMinutes = endDate.value.getHours() * 60 + endDate.value.getMinutes() + resizeBottomDeltaMinutes.value
+    return Math.max(((endMinutes - startMinutes) / 60) * props.hourHeight, 20)
+})
+
+// Responsive content levels based on block height
+// 3 = full (title + project + types + duration)
+// 2 = medium (title + duration)
+// 1 = small (title only)
+// 0 = tiny (colored bar only)
+const sizeLevel = computed(() => {
+    const h = heightPx.value
+    if (h >= 50) return 3
+    if (h >= 35) return 2
+    if (h >= 20) return 1
+    return 0
+})
+
+const blockStyle = computed(() => {
+    const startMinutes = startDate.value.getHours() * 60 + startDate.value.getMinutes() + resizeTopDeltaMinutes.value
+    const topPx = ((startMinutes - props.dayStartHour * 60) / 60) * props.hourHeight
+    const bgColor = props.entry.project?.color ?? '#94a3b8'
+
+    const col = props.columnIndex ?? 0
+    const total = props.totalColumns ?? 1
+    const gapPx = 2
+    const leftPercent = (col / total) * 100
+    const widthPercent = (1 / total) * 100
+
+    return {
+        top: `${topPx}px`,
+        height: `${heightPx.value}px`,
+        backgroundColor: bgColor,
+        left: `calc(${leftPercent}% + ${gapPx}px)`,
+        width: `calc(${widthPercent}% - ${gapPx * 2}px)`,
+    }
+})
+
+// --- Click / Drag detection ---
+let mouseDownPos = { x: 0, y: 0 }
+let mouseDownHandled = false
+
+function onMouseDown(event: MouseEvent) {
+    if (event.button !== 0) return
+    if ((event.target as HTMLElement).closest('.cursor-s-resize, .cursor-n-resize')) return
+
+    mouseDownPos = { x: event.clientX, y: event.clientY }
+    mouseDownHandled = false
+
+    document.addEventListener('mousemove', onMouseMoveDetect)
+    document.addEventListener('mouseup', onMouseUpDetect)
+}
+
+function onMouseMoveDetect(event: MouseEvent) {
+    const dx = event.clientX - mouseDownPos.x
+    const dy = event.clientY - mouseDownPos.y
+    if (Math.abs(dx) + Math.abs(dy) > 5 && !mouseDownHandled) {
+        mouseDownHandled = true
+        document.removeEventListener('mousemove', onMouseMoveDetect)
+        document.removeEventListener('mouseup', onMouseUpDetect)
+
+        const rect = blockEl.value!.getBoundingClientRect()
+        emit('moveStart', {
+            entry: props.entry,
+            offsetY: mouseDownPos.y - rect.top,
+        })
+    }
+}
+
+function onMouseUpDetect() {
+    document.removeEventListener('mousemove', onMouseMoveDetect)
+    document.removeEventListener('mouseup', onMouseUpDetect)
+    if (!mouseDownHandled) {
+        emit('click', props.entry)
+    }
+}
+
+// --- Resize bottom (change stoppedAt) ---
+function onResizeBottomStart(event: MouseEvent) {
+    const startY = event.clientY
+    resizeBottomDeltaMinutes.value = 0
+
+    document.body.style.userSelect = 'none'
+    document.body.style.cursor = 's-resize'
+
+    function onMouseMove(e: MouseEvent) {
+        const delta = e.clientY - startY
+        resizeBottomDeltaMinutes.value = Math.round((delta / props.hourHeight) * 60 / 15) * 15
+    }
+
+    function onMouseUp() {
+        document.removeEventListener('mousemove', onMouseMove)
+        document.removeEventListener('mouseup', onMouseUp)
+        document.body.style.userSelect = ''
+        document.body.style.cursor = ''
+
+        const finalDelta = resizeBottomDeltaMinutes.value
+        resizeBottomDeltaMinutes.value = 0
+
+        if (finalDelta !== 0) {
+            const newEnd = new Date(endDate.value.getTime() + finalDelta * 60000)
+            emit('resize', props.entry, props.entry.startedAt, newEnd.toISOString())
+        }
+    }
+
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
+}
+
+// --- Resize top (change startedAt) ---
+function onResizeTopStart(event: MouseEvent) {
+    const startY = event.clientY
+    resizeTopDeltaMinutes.value = 0
+
+    document.body.style.userSelect = 'none'
+    document.body.style.cursor = 'n-resize'
+
+    function onMouseMove(e: MouseEvent) {
+        const delta = e.clientY - startY
+        resizeTopDeltaMinutes.value = Math.round((delta / props.hourHeight) * 60 / 15) * 15
+    }
+
+    function onMouseUp() {
+        document.removeEventListener('mousemove', onMouseMove)
+        document.removeEventListener('mouseup', onMouseUp)
+        document.body.style.userSelect = ''
+        document.body.style.cursor = ''
+
+        const finalDelta = resizeTopDeltaMinutes.value
+        resizeTopDeltaMinutes.value = 0
+
+        if (finalDelta !== 0) {
+            const newStart = new Date(startDate.value.getTime() + finalDelta * 60000)
+            emit('resize', props.entry, newStart.toISOString(), props.entry.stoppedAt ?? endDate.value.toISOString())
+        }
+    }
+
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
+}
+</script>

frontend/components/time-tracking/TimeEntryContextMenu.vue

@@ -0,0 +1,89 @@
+<template>
+    <Teleport to="body">
+        <div
+            v-if="visible"
+            ref="menuEl"
+            class="fixed z-50 min-w-36 rounded-md border border-neutral-200 bg-white py-1 shadow-lg"
+            :style="{ top: `${y}px`, left: `${x}px` }"
+        >
+            <button
+                v-if="entry"
+                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100"
+                @click="onCopy"
+            >
+                <Icon name="mdi:content-copy" size="16" />
+                Copier
+            </button>
+            <button
+                v-if="canPaste"
+                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100"
+                @click="onPaste"
+            >
+                <Icon name="mdi:content-paste" size="16" />
+                Coller
+            </button>
+            <button
+                v-if="entry"
+                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50"
+                @click="onDelete"
+            >
+                <Icon name="mdi:delete-outline" size="16" />
+                Supprimer
+            </button>
+        </div>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { TimeEntry } from '~/services/dto/time-entry'
+
+const props = defineProps<{
+    visible: boolean
+    x: number
+    y: number
+    entry?: TimeEntry | null
+    canPaste: boolean
+}>()
+
+const emit = defineEmits<{
+    (e: 'close'): void
+    (e: 'copy', entry: TimeEntry): void
+    (e: 'paste'): void
+    (e: 'delete', entry: TimeEntry): void
+}>()
+
+const menuEl = ref<HTMLElement | null>(null)
+
+function onCopy() {
+    if (props.entry) emit('copy', props.entry)
+    emit('close')
+}
+
+function onPaste() {
+    emit('paste')
+    emit('close')
+}
+
+function onDelete() {
+    if (props.entry) emit('delete', props.entry)
+    emit('close')
+}
+
+function onClickOutside(event: MouseEvent) {
+    if (menuEl.value && !menuEl.value.contains(event.target as Node)) {
+        emit('close')
+    }
+}
+
+watch(() => props.visible, (v) => {
+    if (v) {
+        setTimeout(() => document.addEventListener('click', onClickOutside), 0)
+    } else {
+        document.removeEventListener('click', onClickOutside)
+    }
+})
+
+onUnmounted(() => {
+    document.removeEventListener('click', onClickOutside)
+})
+</script>

frontend/components/time-tracking/TimeEntryDrawer.vue

@@ -0,0 +1,266 @@
+<template>
+    <AppDrawer v-model="isOpen" :title="isEditing ? 'Modifier un temps' : 'Ajouter une Activité'">
+        <form class="space-y-4" @submit.prevent="onSubmit">
+            <div>
+                <label class="mb-1 block text-sm font-semibold text-neutral-700">Titre</label>
+                <input
+                    v-model="form.title"
+                    type="text"
+                    class="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none"
+                    placeholder="Que fais-tu ?"
+                />
+            </div>
+
+            <div>
+                <label class="mb-1 block text-sm font-semibold text-neutral-700">Description</label>
+                <textarea
+                    v-model="form.description"
+                    rows="3"
+                    class="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none"
+                />
+            </div>
+
+            <div>
+                <label class="mb-1 block text-sm font-semibold text-neutral-700">Date</label>
+                <input
+                    v-model="form.date"
+                    type="date"
+                    class="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none"
+                />
+            </div>
+
+            <div class="grid grid-cols-2 gap-3">
+                <div>
+                    <label class="mb-1 block text-sm font-semibold text-neutral-700">Début</label>
+                    <input
+                        v-model="form.startTime"
+                        type="time"
+                        step="60"
+                        class="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm tabular-nums focus:border-primary-500 focus:outline-none"
+                    />
+                </div>
+                <div>
+                    <label class="mb-1 block text-sm font-semibold text-neutral-700">Fin</label>
+                    <input
+                        v-model="form.endTime"
+                        type="time"
+                        step="60"
+                        class="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm tabular-nums focus:border-primary-500 focus:outline-none"
+                    />
+                </div>
+            </div>
+
+            <div
+                v-if="durationLabel"
+                class="rounded-md bg-neutral-100 px-3 py-2 text-center text-sm font-semibold text-neutral-600 tabular-nums"
+            >
+                {{ durationLabel }}
+            </div>
+
+            <MalioSelect
+                v-model="form.userId"
+                :options="userOptions"
+                label="Utilisateur"
+                min-width="w-full"
+            />
+
+            <MalioSelect
+                v-model="form.projectId"
+                :options="projectOptions"
+                label="Projet"
+                empty-option-label="— Aucun —"
+                min-width="w-full"
+            />
+
+            <div>
+                <p class="mb-2 text-sm font-semibold text-neutral-700">Tags</p>
+                <div class="flex flex-wrap gap-2">
+                    <label
+                        v-for="tag in tags"
+                        :key="tag.id"
+                        class="cursor-pointer rounded-full px-3 py-1 text-xs font-semibold transition"
+                        :class="form.tagIds.includes(tag.id)
+                            ? 'text-white'
+                            : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'"
+                        :style="form.tagIds.includes(tag.id) ? { backgroundColor: tag.color } : {}"
+                    >
+                        <input
+                            type="checkbox"
+                            class="hidden"
+                            :value="tag.id"
+                            :checked="form.tagIds.includes(tag.id)"
+                            @change="toggleTag(tag.id)"
+                        />
+                        {{ tag.label }}
+                    </label>
+                </div>
+            </div>
+
+            <div class="flex items-center" :class="isEditing ? 'justify-between' : 'justify-end'">
+                <button
+                    v-if="isEditing"
+                    type="button"
+                    class="rounded-md bg-red-500 px-4 py-2 text-sm font-semibold text-white hover:bg-red-600 transition"
+                    @click="onDelete"
+                >
+                    Supprimer
+                </button>
+                <button
+                    type="submit"
+                    class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 transition"
+                >
+                    Enregistrer
+                </button>
+            </div>
+        </form>
+    </AppDrawer>
+</template>
+
+<script setup lang="ts">
+import type { TimeEntry } from '~/services/dto/time-entry'
+import type { UserData } from '~/services/dto/user-data'
+import type { Project } from '~/services/dto/project'
+import type { TaskTag } from '~/services/dto/task-tag'
+import { useTimeEntryService } from '~/services/time-entries'
+
+const props = defineProps<{
+    modelValue: boolean
+    entry?: TimeEntry | null
+    prefillStartedAt?: string | null
+    users: UserData[]
+    projects: Project[]
+    tags: TaskTag[]
+}>()
+
+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.entry)
+
+const authStore = useAuthStore()
+
+const form = reactive({
+    title: '',
+    description: '',
+    date: '',
+    startTime: '',
+    endTime: '',
+    userId: authStore.user?.id ?? null as number | null,
+    projectId: null as number | null,
+    tagIds: [] as number[],
+})
+
+const userOptions = computed(() =>
+    props.users.map(u => ({ label: u.username, value: u.id }))
+)
+
+const projectOptions = computed(() =>
+    props.projects.map(p => ({ label: p.name, value: p.id }))
+)
+
+const durationLabel = computed(() => {
+    if (!form.startTime || !form.endTime) return ''
+    const [sh, sm] = form.startTime.split(':').map(Number) as [number, number]
+    const [eh, em] = form.endTime.split(':').map(Number) as [number, number]
+    const diff = (eh * 60 + em) - (sh * 60 + sm)
+    if (diff <= 0) return ''
+    const h = Math.floor(diff / 60)
+    const m = diff % 60
+    return m > 0 ? `${h}h${String(m).padStart(2, '0')}` : `${h}h`
+})
+
+function toggleTag(id: number) {
+    const idx = form.tagIds.indexOf(id)
+    if (idx >= 0) {
+        form.tagIds.splice(idx, 1)
+    } else {
+        form.tagIds.push(id)
+    }
+}
+
+function toLocalDate(iso: string): string {
+    const d = new Date(iso)
+    const offset = d.getTimezoneOffset()
+    const local = new Date(d.getTime() - offset * 60000)
+    return local.toISOString().slice(0, 10)
+}
+
+function toLocalTime(iso: string): string {
+    const d = new Date(iso)
+    const offset = d.getTimezoneOffset()
+    const local = new Date(d.getTime() - offset * 60000)
+    return local.toISOString().slice(11, 16)
+}
+
+function toISO(date: string, time: string): string {
+    return new Date(`${date}T${time}`).toISOString()
+}
+
+function populateForm(entry: TimeEntry | null | undefined) {
+    if (entry) {
+        form.title = entry.title ?? ''
+        form.description = entry.description ?? ''
+        form.date = toLocalDate(entry.startedAt)
+        form.startTime = toLocalTime(entry.startedAt)
+        form.endTime = entry.stoppedAt ? toLocalTime(entry.stoppedAt) : ''
+        form.userId = entry.user?.id ?? authStore.user?.id ?? null
+        form.projectId = entry.project?.id ?? null
+        form.tagIds = entry.tags?.map(t => t.id) ?? []
+    } else {
+        form.title = ''
+        form.description = ''
+        form.date = props.prefillStartedAt ? toLocalDate(props.prefillStartedAt) : new Date().toISOString().slice(0, 10)
+        form.startTime = props.prefillStartedAt ? toLocalTime(props.prefillStartedAt) : ''
+        form.endTime = ''
+        form.userId = authStore.user?.id ?? null
+        form.projectId = null
+        form.tagIds = []
+    }
+}
+
+watch([() => props.modelValue, () => props.entry] as const, ([open, entry]) => {
+    if (open) {
+        populateForm(entry)
+    }
+})
+
+async function onDelete() {
+    if (!props.entry) return
+    const { remove } = useTimeEntryService()
+    await remove(props.entry.id)
+    emit('saved')
+    isOpen.value = false
+}
+
+async function onSubmit() {
+    if (!form.date || !form.startTime || !form.endTime) return
+
+    const { create, update } = useTimeEntryService()
+
+    const payload: Record<string, unknown> = {
+        title: form.title || null,
+        description: form.description || null,
+        startedAt: toISO(form.date, form.startTime),
+        stoppedAt: form.endTime ? toISO(form.date, form.endTime) : null,
+        user: `/api/users/${form.userId}`,
+        project: form.projectId ? `/api/projects/${form.projectId}` : null,
+        tags: form.tagIds.map(id => `/api/task_tags/${id}`),
+    }
+
+    if (isEditing.value && props.entry) {
+        await update(props.entry.id, payload)
+    } else {
+        await create(payload as any)
+    }
+
+    emit('saved')
+    isOpen.value = false
+}
+</script>

frontend/components/time-tracking/TimeEntryList.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="space-y-2">
+        <div v-if="entries.length === 0" class="rounded-lg border border-neutral-200 bg-neutral-50 py-12 text-center text-sm text-neutral-400">
+            Aucune activité pour cette période
+        </div>
+
+        <div
+            v-for="entry in sortedEntries"
+            :key="entry.id"
+            class="group flex items-center gap-4 rounded-lg border border-neutral-200 bg-white px-4 py-3 cursor-pointer transition hover:border-neutral-300 hover:shadow-sm"
+            @click="emit('editEntry', entry)"
+        >
+            <!-- Color bar -->
+            <div
+                class="h-10 w-1 shrink-0 rounded-full"
+                :style="{ backgroundColor: entry.project?.color ?? '#94a3b8' }"
+            />
+
+            <!-- Main info -->
+            <div class="min-w-0 flex-1">
+                <div class="flex items-center gap-2">
+                    <span class="truncate text-sm font-semibold text-neutral-900">
+                        {{ entry.title || 'Sans titre' }}
+                    </span>
+                    <span
+                        v-for="tag in entry.tags"
+                        :key="tag.id"
+                        class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold text-white"
+                        :style="{ backgroundColor: tag.color }"
+                    >
+                        {{ tag.label }}
+                    </span>
+                </div>
+                <div class="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
+                    <span v-if="entry.project">{{ entry.project.name }}</span>
+                    <span v-if="entry.project && entry.description" class="text-neutral-300">·</span>
+                    <span v-if="entry.description" class="truncate">{{ entry.description }}</span>
+                </div>
+            </div>
+
+            <!-- Time info -->
+            <div class="shrink-0 text-right">
+                <div class="text-sm font-semibold tabular-nums text-neutral-900">
+                    {{ formatDuration(entry) }}
+                </div>
+                <div class="text-xs tabular-nums text-neutral-400">
+                    {{ formatTime(entry.startedAt) }} – {{ entry.stoppedAt ? formatTime(entry.stoppedAt) : '...' }}
+                </div>
+            </div>
+
+            <!-- Date -->
+            <div class="hidden shrink-0 text-xs text-neutral-400 sm:block">
+                {{ formatDate(entry.startedAt) }}
+            </div>
+
+            <!-- Delete action -->
+            <button
+                class="shrink-0 rounded-md p-1.5 text-neutral-300 opacity-0 transition hover:bg-red-50 hover:text-red-500 group-hover:opacity-100"
+                title="Supprimer"
+                @click.stop="emit('deleteEntry', entry)"
+            >
+                <Icon name="mdi:delete-outline" size="18" />
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TimeEntry } from '~/services/dto/time-entry'
+
+const props = defineProps<{
+    entries: TimeEntry[]
+}>()
+
+const emit = defineEmits<{
+    (e: 'editEntry', entry: TimeEntry): void
+    (e: 'deleteEntry', entry: TimeEntry): void
+}>()
+
+const sortedEntries = computed(() => {
+    return [...props.entries].sort((a, b) => {
+        return new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime()
+    })
+})
+
+function formatDuration(entry: TimeEntry): string {
+    const start = new Date(entry.startedAt).getTime()
+    const end = entry.stoppedAt ? new Date(entry.stoppedAt).getTime() : Date.now()
+    const diff = end - start
+    const h = Math.floor(diff / 3600000)
+    const m = Math.floor((diff % 3600000) / 60000)
+    return m > 0 ? `${h}h${String(m).padStart(2, '0')}` : `${h}h`
+}
+
+function formatTime(iso: string): string {
+    const d = new Date(iso)
+    return d.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
+}
+
+function formatDate(iso: string): string {
+    const d = new Date(iso)
+    return d.toLocaleDateString('fr-FR', { weekday: 'short', day: 'numeric', month: 'short' })
+}
+</script>

frontend/components/time-tracking/TimeTrackingCalendar.vue

@@ -0,0 +1,578 @@
+<template>
+    <div ref="calendarEl" class="relative flex h-full flex-col rounded-lg border border-neutral-200 bg-white">
+        <!-- Day headers -->
+        <div
+            class="z-20 flex flex-shrink-0 border-b border-neutral-200 bg-white rounded-t-lg"
+        >
+            <div class="w-16 shrink-0 border-r border-neutral-200" />
+            <div
+                v-for="day in days"
+                :key="day.dateStr"
+                class="flex-1 border-r border-neutral-100 py-2 text-center"
+            >
+                <div class="text-lg font-bold" :class="isToday(day.date) ? 'text-orange-500' : 'text-neutral-900'">
+                    {{ day.dayNum }}
+                </div>
+                <div class="text-xs" :class="isToday(day.date) ? 'text-orange-500' : 'text-neutral-500'">
+                    {{ day.label }}
+                </div>
+                <div class="text-[10px] text-neutral-400">{{ day.totalFormatted }}</div>
+            </div>
+        </div>
+
+        <!-- Grid body -->
+        <div ref="gridBodyEl" class="relative flex min-h-0 flex-1 overflow-y-auto">
+            <!-- Hour labels -->
+            <div class="w-16 shrink-0">
+                <div
+                    v-for="hour in hours"
+                    :key="hour"
+                    class="flex items-start justify-end border-r border-neutral-200 pr-2 text-xs text-neutral-400"
+                    :style="{ height: `${hourHeight}px` }"
+                >
+                    {{ String(hour).padStart(2, '0') }} : 00
+                </div>
+            </div>
+
+            <!-- Day columns -->
+            <div
+                v-for="(day, dayIndex) in days"
+                :key="day.dateStr"
+                :ref="(el) => { dayColumnEls[dayIndex] = el as HTMLElement }"
+                class="relative flex-1 border-r border-neutral-100"
+                @click="onClickGrid($event, day)"
+                @contextmenu.prevent="onContextMenuGrid($event, day)"
+            >
+                <!-- Hour row lines -->
+                <div
+                    v-for="hour in hours"
+                    :key="hour"
+                    class="border-b border-neutral-100"
+                    :style="{ height: `${hourHeight}px` }"
+                />
+
+                <!-- Time entry blocks with overlap columns -->
+                <TimeEntryBlock
+                    v-for="layout in layoutForDay(day.dateStr)"
+                    :key="layout.entry.id"
+                    :entry="layout.entry"
+                    :hour-height="hourHeight"
+                    :day-start-hour="0"
+                    :is-drag-source="dragState?.entryId === layout.entry.id"
+                    :column-index="layout.columnIndex"
+                    :total-columns="layout.totalColumns"
+                    @click="emit('editEntry', $event)"
+                    @contextmenu="(ev, ent) => emit('contextmenu', ev, ent)"
+                    @resize="(ent, newStart, newStop) => emit('resizeEntry', ent, newStart, newStop)"
+                    @move-start="(payload) => onMoveStart(payload, dayIndex)"
+                />
+
+                <!-- Overflow indicators for dense groups -->
+                <div
+                    v-for="overflow in overflowsForDay(day.dateStr)"
+                    :key="`overflow-${overflow.topPx}`"
+                    class="absolute right-1 z-20 rounded bg-neutral-700 px-1.5 py-0.5 text-[10px] font-semibold text-white cursor-pointer hover:bg-neutral-600 transition"
+                    :style="{ top: `${overflow.topPx}px` }"
+                    @click.stop="openOverflowPopover(dayIndex, overflow)"
+                >
+                    +{{ overflow.count }}
+                </div>
+
+                <!-- Overflow popover -->
+                <div
+                    v-if="overflowPopover && overflowPopover.dayIndex === dayIndex"
+                    class="absolute z-30 w-48 rounded-lg border border-neutral-200 bg-white p-2 shadow-xl"
+                    :style="{ top: `${overflowPopover.topPx}px`, right: '4px' }"
+                >
+                    <div class="mb-1 flex items-center justify-between">
+                        <span class="text-xs font-semibold text-neutral-600">{{ overflowPopover.entries.length }} entrées masquées</span>
+                        <button class="text-neutral-400 hover:text-neutral-600 text-xs" @click="overflowPopover = null">&times;</button>
+                    </div>
+                    <div
+                        v-for="entry in overflowPopover.entries"
+                        :key="entry.id"
+                        class="flex items-center gap-2 rounded px-1.5 py-1 cursor-pointer hover:bg-neutral-50 transition"
+                        @click.stop="emit('editEntry', entry); overflowPopover = null"
+                    >
+                        <div
+                            class="h-3 w-3 shrink-0 rounded-sm"
+                            :style="{ backgroundColor: entry.project?.color ?? '#94a3b8' }"
+                        />
+                        <div class="min-w-0">
+                            <div class="truncate text-xs font-medium text-neutral-800">{{ entry.title || 'Sans titre' }}</div>
+                            <div class="text-[10px] text-neutral-500">
+                                {{ formatTime(entry.startedAt) }} – {{ entry.stoppedAt ? formatTime(entry.stoppedAt) : '...' }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Current time indicator -->
+                <div
+                    v-if="isToday(day.date)"
+                    class="absolute left-0 right-0 z-10 pointer-events-none"
+                    :style="{ top: `${currentTimeTopPx}px` }"
+                >
+                    <div class="relative flex items-center">
+                        <div class="absolute -left-[5px] h-[10px] w-[10px] rounded-full bg-orange-500" />
+                        <div class="h-[2px] w-full bg-orange-500" />
+                    </div>
+                </div>
+
+                <!-- Drag ghost preview -->
+                <div
+                    v-if="dragState && dragState.targetDayIndex === dayIndex"
+                    class="absolute left-1 right-1 rounded-md px-2 py-1 text-xs text-white shadow-lg pointer-events-none ring-2 ring-white/60 transition-[top] duration-75"
+                    :style="{
+                        top: `${dragState.ghostTopPx}px`,
+                        height: `${dragState.ghostHeightPx}px`,
+                        backgroundColor: dragState.color,
+                        opacity: 0.75,
+                    }"
+                >
+                    <div class="font-semibold truncate">{{ dragState.title }}</div>
+                    <div class="text-[10px] opacity-90">{{ dragState.timeLabel }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TimeEntry } from '~/services/dto/time-entry'
+
+const props = defineProps<{
+    entries: TimeEntry[]
+    startDate: Date
+    viewMode: 'week' | 'day'
+    stickyOffset?: number
+}>()
+
+const emit = defineEmits<{
+    (e: 'editEntry', entry: TimeEntry): void
+    (e: 'createEntry', startedAt: string): void
+    (e: 'moveEntry', entry: TimeEntry, newStartedAt: string, newStoppedAt: string): void
+    (e: 'resizeEntry', entry: TimeEntry, newStartedAt: string, newStoppedAt: string): void
+    (e: 'contextmenu', event: MouseEvent, entry: TimeEntry | null): void
+}>()
+
+const hourHeight = 60
+const hours = Array.from({ length: 24 }, (_, i) => i)
+const dayLabels = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']
+
+const calendarEl = ref<HTMLElement | null>(null)
+const gridBodyEl = ref<HTMLElement | null>(null)
+const dayColumnEls = ref<HTMLElement[]>([])
+const stickyOffset = computed(() => props.stickyOffset ?? 0)
+
+// --- Current time indicator ---
+const nowMinutes = ref(0)
+let nowTimer: ReturnType<typeof setInterval> | undefined
+
+function updateNowMinutes() {
+    const now = new Date()
+    nowMinutes.value = now.getHours() * 60 + now.getMinutes()
+}
+
+const currentTimeTopPx = computed(() => (nowMinutes.value / 60) * hourHeight)
+
+updateNowMinutes()
+
+onMounted(() => {
+    nowTimer = setInterval(updateNowMinutes, 60_000)
+})
+
+onUnmounted(() => {
+    clearInterval(nowTimer)
+})
+
+function getScrollParent(): HTMLElement | null {
+    let el = calendarEl.value?.parentElement
+    while (el) {
+        if (el.scrollHeight > el.clientHeight && getComputedStyle(el).overflowY !== 'visible') return el
+        el = el.parentElement
+    }
+    return null
+}
+
+// Scroll to current hour on mount
+onMounted(() => {
+    nextTick(() => {
+        if (!calendarEl.value) return
+        const scrollParent = getScrollParent()
+        if (!scrollParent) return
+        const now = new Date()
+        const currentMinutes = now.getHours() * 60 + now.getMinutes()
+        const calendarTop = calendarEl.value.offsetTop
+        const scrollTarget = calendarTop + (currentMinutes / 60) * hourHeight - scrollParent.clientHeight / 3
+        scrollParent.scrollTop = Math.max(0, scrollTarget)
+    })
+})
+
+// --- Days computation ---
+const days = computed(() => {
+    const count = props.viewMode === 'week' ? 7 : 1
+    const result = []
+    for (let i = 0; i < count; i++) {
+        const d = new Date(props.startDate)
+        d.setDate(d.getDate() + i)
+        const dateStr = toDateStr(d)
+        const dayEntries = props.entries.filter((e) => toDateStr(new Date(e.startedAt)) === dateStr)
+        const totalMs = dayEntries.reduce((sum, e) => {
+            if (!e.stoppedAt) return sum
+            return sum + (new Date(e.stoppedAt).getTime() - new Date(e.startedAt).getTime())
+        }, 0)
+        const totalH = Math.floor(totalMs / 3600000)
+        const totalM = Math.floor((totalMs % 3600000) / 60000)
+        const totalS = Math.floor((totalMs % 60000) / 1000)
+
+        result.push({
+            date: new Date(d),
+            dateStr,
+            dayNum: d.getDate(),
+            label: dayLabels[d.getDay()],
+            totalFormatted: `${String(totalH).padStart(2, '0')}:${String(totalM).padStart(2, '0')}:${String(totalS).padStart(2, '0')}`,
+        })
+    }
+    return result
+})
+
+function toDateStr(d: Date): string {
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+function isToday(d: Date): boolean {
+    return toDateStr(d) === toDateStr(new Date())
+}
+
+function entriesForDay(dateStr: string): TimeEntry[] {
+    return props.entries.filter((e) => toDateStr(new Date(e.startedAt)) === dateStr)
+}
+
+// --- Overlap layout computation ---
+const MAX_VISIBLE_COLUMNS = 4
+
+interface EntryLayout {
+    entry: TimeEntry
+    columnIndex: number
+    totalColumns: number
+}
+
+interface OverflowIndicator {
+    topPx: number
+    count: number
+    hiddenEntries: TimeEntry[]
+}
+
+function getEntryMinutes(entry: TimeEntry): { start: number; end: number } {
+    const s = new Date(entry.startedAt)
+    const startMin = s.getHours() * 60 + s.getMinutes()
+    const e = entry.stoppedAt ? new Date(entry.stoppedAt) : new Date()
+    const endMin = e.getHours() * 60 + e.getMinutes()
+    return { start: startMin, end: Math.max(endMin, startMin + 15) }
+}
+
+function computeOverlapLayout(dayEntries: TimeEntry[]): { layouts: EntryLayout[]; overflows: OverflowIndicator[] } {
+    if (dayEntries.length === 0) return { layouts: [], overflows: [] }
+
+    // Sort by start time, then by duration (longest first)
+    const sorted = [...dayEntries].sort((a, b) => {
+        const aM = getEntryMinutes(a)
+        const bM = getEntryMinutes(b)
+        if (aM.start !== bM.start) return aM.start - bM.start
+        return (bM.end - bM.start) - (aM.end - aM.start)
+    })
+
+    // Group overlapping entries into clusters
+    const clusters: TimeEntry[][] = []
+    let currentCluster: TimeEntry[] = []
+    let clusterEnd = 0
+
+    for (const entry of sorted) {
+        const { start, end } = getEntryMinutes(entry)
+        if (currentCluster.length === 0 || start < clusterEnd) {
+            currentCluster.push(entry)
+            clusterEnd = Math.max(clusterEnd, end)
+        } else {
+            clusters.push(currentCluster)
+            currentCluster = [entry]
+            clusterEnd = end
+        }
+    }
+    if (currentCluster.length > 0) clusters.push(currentCluster)
+
+    const layouts: EntryLayout[] = []
+    const overflows: OverflowIndicator[] = []
+
+    for (const cluster of clusters) {
+        // Assign columns within this cluster
+        const colEnds: number[] = []
+
+        const clusterAssignments: { entry: TimeEntry; col: number }[] = []
+
+        for (const entry of cluster) {
+            const { start, end } = getEntryMinutes(entry)
+            // Find first column where this entry fits
+            let placed = false
+            for (let c = 0; c < colEnds.length; c++) {
+                if (colEnds[c]! <= start) {
+                    colEnds[c] = end
+                    clusterAssignments.push({ entry, col: c })
+                    placed = true
+                    break
+                }
+            }
+            if (!placed) {
+                clusterAssignments.push({ entry, col: colEnds.length })
+                colEnds.push(end)
+            }
+        }
+
+        const totalColumns = Math.min(colEnds.length, MAX_VISIBLE_COLUMNS)
+        let hasOverflow = false
+
+        for (const { entry, col } of clusterAssignments) {
+            if (col < MAX_VISIBLE_COLUMNS) {
+                layouts.push({
+                    entry,
+                    columnIndex: col,
+                    totalColumns,
+                })
+            } else {
+                hasOverflow = true
+            }
+        }
+
+        if (hasOverflow) {
+            const hidden = clusterAssignments.filter((a) => a.col >= MAX_VISIBLE_COLUMNS)
+            const firstEntry = cluster[0]!
+            const { start } = getEntryMinutes(firstEntry)
+            overflows.push({
+                topPx: (start / 60) * hourHeight,
+                count: hidden.length,
+                hiddenEntries: hidden.map((a) => a.entry),
+            })
+        }
+    }
+
+    return { layouts, overflows }
+}
+
+const layoutCache = computed(() => {
+    const cache = new Map<string, { layouts: EntryLayout[]; overflows: OverflowIndicator[] }>()
+    for (const day of days.value) {
+        const dayEntries = entriesForDay(day.dateStr)
+        cache.set(day.dateStr, computeOverlapLayout(dayEntries))
+    }
+    return cache
+})
+
+function layoutForDay(dateStr: string): EntryLayout[] {
+    return layoutCache.value.get(dateStr)?.layouts ?? []
+}
+
+function overflowsForDay(dateStr: string): OverflowIndicator[] {
+    return layoutCache.value.get(dateStr)?.overflows ?? []
+}
+
+// --- Overflow popover ---
+interface OverflowPopoverState {
+    dayIndex: number
+    topPx: number
+    entries: TimeEntry[]
+}
+
+const overflowPopover = ref<OverflowPopoverState | null>(null)
+
+function openOverflowPopover(dayIndex: number, overflow: OverflowIndicator) {
+    overflowPopover.value = {
+        dayIndex,
+        topPx: overflow.topPx,
+        entries: overflow.hiddenEntries,
+    }
+}
+
+function formatTime(iso: string): string {
+    const d = new Date(iso)
+    return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
+}
+
+function getSnappedMinutesFromY(y: number): number {
+    return Math.max(0, Math.min(23 * 60 + 45, Math.round((y / hourHeight) * 60 / 15) * 15))
+}
+
+function formatMinutes(totalMinutes: number): string {
+    const h = Math.floor(totalMinutes / 60)
+    const m = totalMinutes % 60
+    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
+}
+
+// --- Click to create ---
+let dragEndTime = 0
+
+function onClickGrid(event: MouseEvent, day: { date: Date; dateStr: string }) {
+    // Suppress click right after drag end
+    if (Date.now() - dragEndTime < 200) return
+
+    const target = event.currentTarget as HTMLElement
+    const rect = target.getBoundingClientRect()
+    const y = event.clientY - rect.top
+    const minutes = getSnappedMinutesFromY(y)
+    const h = Math.floor(minutes / 60)
+    const m = minutes % 60
+    const d = new Date(day.date)
+    d.setHours(h, m, 0, 0)
+    emit('createEntry', d.toISOString())
+}
+
+function onContextMenuGrid(event: MouseEvent, _day: { date: Date; dateStr: string }) {
+    emit('contextmenu', event, null)
+}
+
+// --- Drag to move ---
+interface DragState {
+    entryId: number
+    entry: TimeEntry
+    title: string
+    color: string
+    durationMinutes: number
+    ghostHeightPx: number
+    offsetY: number
+    targetDayIndex: number
+    ghostTopPx: number
+    snappedMinutes: number
+    timeLabel: string
+}
+
+const dragState = ref<DragState | null>(null)
+let autoScrollActive = false
+let lastMouseEvent: MouseEvent | null = null
+
+function onMoveStart(payload: { entry: TimeEntry; offsetY: number }, sourceDayIndex: number) {
+    const entry = payload.entry
+    const startMinutes = new Date(entry.startedAt).getHours() * 60 + new Date(entry.startedAt).getMinutes()
+    const endMinutes = entry.stoppedAt
+        ? new Date(entry.stoppedAt).getHours() * 60 + new Date(entry.stoppedAt).getMinutes()
+        : startMinutes + 60
+    const durationMinutes = endMinutes - startMinutes
+
+    dragState.value = {
+        entryId: entry.id,
+        entry,
+        title: entry.title || 'Sans titre',
+        color: entry.project?.color ?? '#94a3b8',
+        durationMinutes,
+        ghostHeightPx: Math.max((durationMinutes / 60) * hourHeight, 20),
+        offsetY: payload.offsetY,
+        targetDayIndex: sourceDayIndex,
+        ghostTopPx: (startMinutes / 60) * hourHeight,
+        snappedMinutes: startMinutes,
+        timeLabel: `${formatMinutes(startMinutes)} – ${formatMinutes(endMinutes)}`,
+    }
+
+    document.body.style.userSelect = 'none'
+    document.body.style.cursor = 'grabbing'
+    document.addEventListener('mousemove', onDragMove)
+    document.addEventListener('mouseup', onDragEnd)
+}
+
+function updateDragPosition(event: MouseEvent) {
+    if (!dragState.value) return
+
+    // Find which column the cursor is over
+    let targetDayIndex = dragState.value.targetDayIndex
+    for (let i = 0; i < dayColumnEls.value.length; i++) {
+        const el = dayColumnEls.value[i]
+        if (!el) continue
+        const rect = el.getBoundingClientRect()
+        if (event.clientX >= rect.left && event.clientX <= rect.right) {
+            targetDayIndex = i
+            break
+        }
+    }
+
+    // Calculate Y position in the target column
+    const targetCol = dayColumnEls.value[targetDayIndex]
+    if (!targetCol) return
+    const colRect = targetCol.getBoundingClientRect()
+    const y = event.clientY - colRect.top - dragState.value.offsetY
+    const snappedMinutes = getSnappedMinutesFromY(y)
+    const endMinutes = snappedMinutes + dragState.value.durationMinutes
+
+    dragState.value.targetDayIndex = targetDayIndex
+    dragState.value.snappedMinutes = snappedMinutes
+    dragState.value.ghostTopPx = (snappedMinutes / 60) * hourHeight
+    dragState.value.timeLabel = `${formatMinutes(snappedMinutes)} – ${formatMinutes(endMinutes)}`
+}
+
+function onDragMove(event: MouseEvent) {
+    if (!dragState.value) return
+    event.preventDefault()
+    lastMouseEvent = event
+    updateDragPosition(event)
+
+    // Start auto-scroll if not running
+    if (!autoScrollActive) {
+        autoScrollActive = true
+        requestAnimationFrame(autoScrollLoop)
+    }
+}
+
+function autoScrollLoop() {
+    const scrollParent = getScrollParent()
+    if (!autoScrollActive || !lastMouseEvent || !scrollParent || !dragState.value) {
+        autoScrollActive = false
+        return
+    }
+
+    const rect = scrollParent.getBoundingClientRect()
+    const edgeSize = 60
+    const maxSpeed = 10
+
+    const distFromTop = lastMouseEvent.clientY - rect.top
+    const distFromBottom = rect.bottom - lastMouseEvent.clientY
+
+    let scrolled = false
+    if (distFromTop < edgeSize && distFromTop > 0) {
+        scrollParent.scrollTop -= maxSpeed * (1 - distFromTop / edgeSize)
+        scrolled = true
+    } else if (distFromBottom < edgeSize && distFromBottom > 0) {
+        scrollParent.scrollTop += maxSpeed * (1 - distFromBottom / edgeSize)
+        scrolled = true
+    }
+
+    // Update ghost position if we scrolled (scroll changes coordinate mapping)
+    if (scrolled && lastMouseEvent) {
+        updateDragPosition(lastMouseEvent)
+    }
+
+    requestAnimationFrame(autoScrollLoop)
+}
+
+function onDragEnd() {
+    document.removeEventListener('mousemove', onDragMove)
+    document.removeEventListener('mouseup', onDragEnd)
+    document.body.style.userSelect = ''
+    document.body.style.cursor = ''
+    autoScrollActive = false
+    lastMouseEvent = null
+
+    if (!dragState.value) return
+
+    const state = dragState.value
+    const targetDay = days.value[state.targetDayIndex]
+
+    if (targetDay) {
+        const h = Math.floor(state.snappedMinutes / 60)
+        const m = state.snappedMinutes % 60
+        const newStart = new Date(targetDay.date)
+        newStart.setHours(h, m, 0, 0)
+        const newStop = new Date(newStart.getTime() + state.durationMinutes * 60000)
+
+        emit('moveEntry', state.entry, newStart.toISOString(), newStop.toISOString())
+    }
+
+    dragState.value = null
+    dragEndTime = Date.now()
+}
+</script>

frontend/components/ui/AppTopNav.vue

@@ -1,11 +1,17 @@
 <template>
-  <header class="border-b border-neutral-200 bg-primary-500 p-5 text-white">
-    <div class="flex h-full items-center justify-end">
-      <div class="flex gap-12 text-xl text-white">
-        <div class="group relative flex gap-4">
+  <header class="border-b border-neutral-200 bg-primary-500 p-3 text-white sm:p-5">
+    <div class="flex h-full items-center justify-between">
+      <button
+        class="rounded-md p-2 text-white hover:bg-primary-600 transition-colors lg:hidden"
+        @click="ui.openMobileSidebar()"
+      >
+        <Icon name="mdi:menu" size="24" />
+      </button>
+      <div class="ml-auto flex gap-4 text-xl text-white sm:gap-12">
+        <div class="group relative flex gap-2 sm:gap-4">
           <Icon name="mdi:account-circle-outline" class="self-center cursor-pointer" size="36" />
-          <p class="self-center cursor-pointer">{{ user?.username }}</p>
-          <div class="invisible absolute right-0 top-full z-20 mt-2 w-44 rounded-md border border-neutral-200 bg-white py-1 text-sm text-neutral-800 opacity-0 shadow-lg transition-all group-hover:visible group-hover:opacity-100">
+          <p class="hidden self-center cursor-pointer sm:block">{{ user?.username }}</p>
+          <div class="invisible absolute right-0 top-full z-50 mt-2 w-44 rounded-md border border-neutral-200 bg-white py-1 text-sm text-neutral-800 opacity-0 shadow-lg transition-all group-hover:visible group-hover:opacity-100">
             <button
               type="button"
               class="block w-full px-3 py-2 text-left hover:bg-neutral-100"
@@ -34,6 +40,7 @@ defineProps<{
 }>()
 
 const auth = useAuthStore()
+const ui = useUiStore()
 
 const handleLogout = async () => {
   await auth.logout()

frontend/components/ui/ConfirmDeleteDocumentModal.vue

@@ -0,0 +1,58 @@
+<template>
+    <Teleport v-if="modelValue" to="body">
+        <Transition name="modal" appear>
+            <div class="fixed inset-0 z-[70] flex items-center justify-center">
+                <div class="absolute inset-0 bg-black/30" @click="cancel" />
+                <div class="relative z-10 w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
+                    <h3 class="text-lg font-bold text-neutral-900">{{ $t('taskDocuments.confirmDeleteTitle') }}</h3>
+                    <p class="mt-3 text-sm text-neutral-600">
+                        {{ $t('taskDocuments.confirmDeleteMessage') }}
+                    </p>
+                    <div class="mt-6 flex justify-end gap-3">
+                        <button
+                            type="button"
+                            class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50"
+                            @click="cancel"
+                        >
+                            {{ $t('common.cancel') }}
+                        </button>
+                        <button
+                            type="button"
+                            class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700"
+                            @click="$emit('confirm')"
+                        >
+                            Supprimer
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'confirm'): void
+}>()
+
+function cancel() {
+    emit('update:modelValue', false)
+}
+</script>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active {
+    transition: opacity 0.2s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+    opacity: 0;
+}
+</style>

frontend/components/ui/ConfirmDeleteStatusModal.vue

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

frontend/components/ui/ConfirmDeleteTaskModal.vue

@@ -0,0 +1,58 @@
+<template>
+    <Teleport v-if="modelValue" to="body">
+        <Transition name="modal" appear>
+            <div class="fixed inset-0 z-50 flex items-center justify-center">
+                <div class="absolute inset-0 bg-black/30" @click="cancel" />
+                <div class="relative z-10 w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
+                    <h3 class="text-lg font-bold text-neutral-900">{{ $t('tasks.deleteConfirmTitle') }}</h3>
+                    <p class="mt-3 text-sm text-neutral-600">
+                        {{ $t('tasks.deleteConfirmMessage') }}
+                    </p>
+                    <div class="mt-6 flex justify-end gap-3">
+                        <button
+                            type="button"
+                            class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50"
+                            @click="cancel"
+                        >
+                            Annuler
+                        </button>
+                        <button
+                            type="button"
+                            class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700"
+                            @click="$emit('confirm')"
+                        >
+                            Supprimer
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'confirm'): void
+}>()
+
+function cancel() {
+    emit('update:modelValue', false)
+}
+</script>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active {
+    transition: opacity 0.2s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+    opacity: 0;
+}
+</style>

frontend/components/ui/DataTable.vue

@@ -0,0 +1,81 @@
+<template>
+    <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
+                        v-for="col in columns"
+                        :key="col.key"
+                        class="px-4 py-3 font-semibold text-neutral-700"
+                    >
+                        {{ col.label }}
+                    </th>
+                    <th v-if="deletable || $slots.actions" class="px-4 py-3 font-semibold text-neutral-700">
+                        Actions
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr
+                    v-for="item in items"
+                    :key="item.id"
+                    class="cursor-pointer border-b border-neutral-100 hover:bg-neutral-50"
+                    @click="$emit('row-click', item)"
+                >
+                    <td
+                        v-for="col in columns"
+                        :key="col.key"
+                        class="px-4 py-3"
+                        :class="[col.class, { 'font-semibold text-primary-500': col.primary }]"
+                    >
+                        <slot :name="`cell-${col.key}`" :item="item" :value="item[col.key]">
+                            {{ item[col.key] }}
+                        </slot>
+                    </td>
+                    <td v-if="deletable || $slots.actions" class="px-4 py-3">
+                        <div class="flex items-center gap-2">
+                            <slot name="actions" :item="item" />
+                            <button
+                                v-if="deletable"
+                                class="text-neutral-400 transition-colors hover:text-red-500"
+                                @click.stop="$emit('delete', item)"
+                            >
+                                <Icon name="mdi:delete-outline" size="20" />
+                            </button>
+                        </div>
+                    </td>
+                </tr>
+                <tr v-if="items.length === 0 && !loading">
+                    <td
+                        :colspan="columns.length + (deletable || $slots.actions ? 1 : 0)"
+                        class="px-4 py-8 text-center text-neutral-400"
+                    >
+                        {{ emptyMessage }}
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script setup lang="ts">
+export interface DataTableColumn {
+    key: string
+    label: string
+    primary?: boolean
+    class?: string
+}
+
+defineProps<{
+    columns: DataTableColumn[]
+    items: Record<string, any>[]
+    loading?: boolean
+    emptyMessage?: string
+    deletable?: boolean
+}>()
+
+defineEmits<{
+    (e: 'row-click', item: any): void
+    (e: 'delete', item: any): void
+}>()
+</script>

frontend/components/ui/SidebarLink.vue

@@ -0,0 +1,52 @@
+<template>
+    <NuxtLink
+        :to="to"
+        class="group/link relative flex items-center transition-colors hover:text-primary-500"
+        :class="linkClasses"
+        :active-class="exact ? '' : activeClass"
+        :exact-active-class="exact ? activeClass : ''"
+    >
+        <Icon :name="icon" :size="sub ? '20' : '24'" class="flex-shrink-0" />
+        <span
+            v-if="!collapsed"
+            class="self-baseline whitespace-nowrap overflow-hidden transition-opacity duration-300"
+            :class="sub ? 'text-sm' : 'text-md'"
+        >
+            {{ label }}
+        </span>
+        <div
+            v-if="collapsed"
+            class="pointer-events-none absolute left-full z-50 ml-2 rounded-md bg-neutral-800 px-2 py-1 text-xs text-white opacity-0 shadow-lg transition-opacity group-hover/link:pointer-events-auto group-hover/link:opacity-100 whitespace-nowrap"
+        >
+            {{ label }}
+        </div>
+    </NuxtLink>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    to: string
+    icon: string
+    label: string
+    collapsed: boolean
+    sub?: boolean
+    exact?: boolean
+}>()
+
+const activeClass = computed(() => {
+    if (props.collapsed) {
+        return '!text-primary-500 bg-primary-500/10'
+    }
+    return '!text-primary-500 bg-tertiary-500'
+})
+
+const linkClasses = computed(() => {
+    if (props.collapsed) {
+        return 'justify-center w-10 h-10 mx-auto my-1 p-2 rounded-lg text-neutral-600 hover:text-primary-500 hover:bg-primary-500/10'
+    }
+    if (props.sub) {
+        return 'gap-3 px-4 py-2 pl-12 text-sm font-semibold text-neutral-700'
+    }
+    return 'gap-3 px-4 py-3 text-md font-semibold text-neutral-700'
+})
+</script>

frontend/components/ui/SidebarTimer.vue

@@ -0,0 +1,29 @@
+<template>
+    <button
+        class="flex w-full items-center justify-center gap-2 rounded-md py-2 text-sm font-semibold text-white transition"
+        :class="[
+            timerStore.isRunning
+                ? 'bg-[#F18619] hover:bg-[#d97314]'
+                : 'bg-primary-500 hover:bg-primary-600',
+            collapsed ? 'px-2' : 'px-4'
+        ]"
+        :title="timerStore.isRunning ? 'Arrêter le timer' : 'Démarrer un timer'"
+        @click="timerStore.isRunning ? timerStore.stop() : timerStore.start()"
+    >
+        <Icon
+            :name="timerStore.isRunning ? 'mdi:stop' : 'mdi:play'"
+            :size="collapsed ? '20' : '16'"
+        />
+        <span v-if="!collapsed" class="font-mono tracking-wide">
+            {{ timerStore.elapsedFormatted }}
+        </span>
+    </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    collapsed: boolean
+}>()
+
+const timerStore = useTimerStore()
+</script>

frontend/i18n/locales/fr.json

@@ -27,7 +27,11 @@
     "projects": {
         "created": "Projet créé avec succès.",
         "updated": "Projet mis à jour avec succès.",
-        "deleted": "Projet supprimé avec succès."
+        "deleted": "Projet supprimé avec succès.",
+        "archived": "Projet archivé avec succès.",
+        "unarchived": "Projet désarchivé avec succès.",
+        "showArchived": "Voir les projets archivés",
+        "hideArchived": "Masquer les projets archivés"
     },
     "taskStatuses": {
         "created": "Statut créé avec succès.",
@@ -44,24 +48,192 @@
         "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."
+    "taskTags": {
+        "created": "Tag créé avec succès.",
+        "updated": "Tag mis à jour avec succès.",
+        "deleted": "Tag supprimé avec succès."
     },
     "taskGroups": {
         "created": "Groupe créé avec succès.",
         "updated": "Groupe mis à jour avec succès.",
-        "deleted": "Groupe supprimé avec succès."
+        "deleted": "Groupe supprimé avec succès.",
+        "archived": "Groupe archivé avec succès.",
+        "unarchived": "Groupe désarchivé avec succès."
+    },
+    "taskDocuments": {
+        "title": "Documents",
+        "dropzone": "Glisser des fichiers ici ou cliquer pour sélectionner",
+        "uploaded": "Document ajouté avec succès.",
+        "deleted": "Document supprimé avec succès.",
+        "uploadError": "Erreur lors de l'upload du document.",
+        "confirmDeleteTitle": "Supprimer le document",
+        "confirmDeleteMessage": "Êtes-vous sûr de vouloir supprimer ce document ?",
+        "download": "Télécharger",
+        "maxSizeError": "Le fichier dépasse la taille maximale de 50 Mo."
     },
     "tasks": {
         "created": "Ticket créé avec succès.",
         "updated": "Ticket mis à jour avec succès.",
-        "deleted": "Ticket supprimé avec succès."
+        "deleted": "Ticket supprimé avec succès.",
+        "archived": "Ticket archivé avec succès.",
+        "unarchived": "Ticket désarchivé avec succès.",
+        "deleteConfirmTitle": "Supprimer le ticket",
+        "deleteConfirmMessage": "Êtes-vous sûr de vouloir supprimer ce ticket ? Cette action est irréversible."
     },
     "users": {
         "created": "Utilisateur créé avec succès.",
         "updated": "Utilisateur mis à jour avec succès.",
         "deleted": "Utilisateur supprimé avec succès."
+    },
+    "timeEntries": {
+        "created": "Temps enregistré",
+        "updated": "Temps modifié",
+        "deleted": "Temps supprimé"
+    },
+    "archive": {
+        "title": "Archives",
+        "empty": "Aucun ticket archivé.",
+        "archiveButton": "Archiver",
+        "unarchiveButton": "Désarchiver",
+        "showArchived": "Voir les groupes archivés",
+        "hideArchived": "Masquer les groupes archivés",
+        "statusFinal": "Statut final",
+        "groupArchiveDisabled": "Tous les tickets doivent être en statut final pour archiver le groupe.",
+        "groupNonFinalTasks": "Il reste {count} ticket(s) sans statut final dans ce groupe."
+    },
+    "myTasks": {
+        "title": "Mes tâches",
+        "viewKanban": "Vue Kanban",
+        "viewList": "Vue Liste",
+        "allProjects": "Tous les projets",
+        "allGroups": "Tous les groupes",
+        "allTypes": "Tous les types",
+        "allPriorities": "Toutes les priorités",
+        "allEfforts": "Tous les efforts",
+        "allAssignees": "Tous",
+        "noTasks": "Aucune tâche",
+        "backlog": "Backlog"
+    },
+    "dashboard": {
+        "title": "Tableau de bord",
+        "noData": "Aucune donnée",
+        "noPriority": "Sans priorité",
+        "noProject": "Sans projet",
+        "hoursWorked": "Heures travaillées",
+        "inProgress": "En cours",
+        "done": "Terminé",
+        "filters": {
+            "period": "Période",
+            "project": "Projet",
+            "user": "Utilisateur",
+            "allProjects": "Tous les projets",
+            "allUsers": "Tous les utilisateurs"
+        },
+        "periods": {
+            "thisWeek": "Cette semaine",
+            "lastWeek": "Semaine dernière",
+            "thisMonth": "Ce mois",
+            "lastMonth": "Mois dernier"
+        },
+        "stats": {
+            "hoursPeriod": "Heures sur la période",
+            "myActiveTasks": "Mes tâches actives",
+            "completed": "terminée(s)",
+            "totalTasks": "Tâches totales",
+            "unassigned": "non assignée(s)",
+            "projects": "Projets",
+            "users": "utilisateur(s)"
+        },
+        "charts": {
+            "hoursByDay": "Heures par jour",
+            "hoursByProject": "Temps par projet",
+            "tasksByStatus": "Tâches par statut",
+            "tasksByPriority": "Tâches par priorité",
+            "tasksByProject": "Tâches par projet"
+        },
+        "days": {
+            "mon": "Lun",
+            "tue": "Mar",
+            "wed": "Mer",
+            "thu": "Jeu",
+            "fri": "Ven",
+            "sat": "Sam",
+            "sun": "Dim"
+        }
+    },
+    "sidebar": {
+        "myTasks": "Mes tâches"
+    },
+    "common": {
+        "cancel": "Annuler",
+        "loading": "Chargement..."
+    },
+    "gitea": {
+        "settings": {
+            "title": "Configuration Gitea",
+            "url": "URL du serveur",
+            "urlPlaceholder": "https://git.example.com",
+            "token": "Token API",
+            "tokenPlaceholder": "Entrez un nouveau token",
+            "tokenConfigured": "Token configuré",
+            "save": "Enregistrer",
+            "saved": "Configuration Gitea sauvegardée.",
+            "testConnection": "Tester la connexion",
+            "testSuccess": "Connexion réussie.",
+            "testFailed": "Connexion échouée."
+        },
+        "branch": {
+            "title": "Git",
+            "create": "Créer une branche",
+            "created": "Branche créée avec succès.",
+            "copy": "Copier le nom",
+            "copied": "Nom de branche copié.",
+            "type": "Type",
+            "baseBranch": "Branche de base",
+            "preview": "Aperçu",
+            "types": {
+                "feature": "feature",
+                "fix": "fix",
+                "refactor": "refactor",
+                "hotfix": "hotfix",
+                "chore": "chore"
+            },
+            "noBranches": "Aucune branche liée.",
+            "commits": "Commits",
+            "noCommits": "Aucun commit."
+        },
+        "pr": {
+            "title": "Pull Requests",
+            "noPrs": "Aucune pull request.",
+            "open": "Ouverte",
+            "merged": "Mergée",
+            "closed": "Fermée",
+            "ci": "CI/CD"
+        },
+        "error": "Erreur de connexion à Gitea.",
+        "notConfigured": "Gitea non configuré pour ce projet."
+    },
+    "bookstack": {
+        "settings": {
+            "title": "Configuration BookStack",
+            "url": "URL du serveur",
+            "urlPlaceholder": "https://wiki.example.com",
+            "tokenId": "Token ID",
+            "tokenIdPlaceholder": "Entrez le Token ID",
+            "tokenSecret": "Token Secret",
+            "tokenSecretPlaceholder": "Entrez le Token Secret",
+            "tokenConfigured": "Token configuré",
+            "save": "Enregistrer",
+            "saved": "Configuration BookStack sauvegardée.",
+            "testConnection": "Tester la connexion",
+            "testSuccess": "Connexion réussie.",
+            "testFailed": "Connexion échouée."
+        },
+        "links": {
+            "title": "Documentation",
+            "searchPlaceholder": "Rechercher une page ou un livre...",
+            "noResults": "Aucun résultat",
+            "empty": "Aucun document lié"
+        }
     }
 }

frontend/layouts/default.vue

@@ -1,68 +1,261 @@
 <template>
     <div class="h-screen overflow-hidden">
         <div class="flex h-full">
-            <aside class="flex h-full w-64 flex-shrink-0 flex-col border-r border-neutral-200 bg-tertiary-500">
-                <div>
-                    <img src="/malio.png" alt="Logo" class="w-auto"/>
+            <!-- Mobile sidebar overlay -->
+            <Transition name="sidebar-overlay">
+                <div
+                    v-if="ui.sidebarOpen"
+                    class="fixed inset-0 z-40 bg-black/50 lg:hidden"
+                    @click="ui.closeMobileSidebar()"
+                />
+            </Transition>
+
+            <aside
+                class="fixed inset-y-0 left-0 z-50 flex h-full flex-shrink-0 flex-col border-r border-neutral-200 bg-tertiary-500 transition-transform duration-300 lg:static lg:z-auto lg:translate-x-0"
+                :class="[
+                    ui.sidebarCollapsed ? 'lg:w-16' : 'lg:w-64',
+                    ui.sidebarOpen ? 'w-64 translate-x-0' : '-translate-x-full',
+                ]"
+            >
+                <div class="flex items-center justify-between overflow-hidden" :class="sidebarIsCollapsed ? 'p-2 justify-center' : ''">
+                    <img
+                        v-if="!sidebarIsCollapsed"
+                        src="/malio.png"
+                        alt="Logo"
+                        class="w-auto"
+                    />
+                    <img
+                        v-else
+                        src="/malio.png"
+                        alt="Logo"
+                        class="h-8 w-8 object-cover object-left"
+                    />
+                    <button
+                        class="mr-2 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-700 transition-colors lg:hidden"
+                        @click="ui.closeMobileSidebar()"
+                    >
+                        <Icon name="mdi:close" size="20" />
+                    </button>
                 </div>
-                <nav class="flex-1 px-4 pb-6">
-                    <NuxtLink
+                <nav class="flex-1 overflow-hidden" :class="sidebarIsCollapsed ? 'px-1 pb-6' : 'px-4 pb-6'">
+                    <SidebarLink
                         to="/"
-                        class="flex items-center gap-3 px-4 pb-3 pt-6 text-md font-semibold text-black hover:bg-tertiary-500 hover:text-primary-500 border-t border-secondary-500"
-                        active-class="bg-tertiary-500 text-primary-500"
-                    >
-                        <Icon name="mdi:question-mark" size="24"/>
-                        <span class="self-baseline text-md">Tableau de bord</span>
-                    </NuxtLink>
-                    <NuxtLink
+                        icon="mdi:view-dashboard-outline"
+                        label="Tableau de bord"
+                        :collapsed="sidebarIsCollapsed"
+                        :class="sidebarIsCollapsed ? 'mt-4' : 'border-t border-secondary-500 pt-6'"
+                        @click="ui.closeMobileSidebar()"
+                    />
+                    <SidebarLink
+                        to="/my-tasks"
+                        icon="mdi:clipboard-check-outline"
+                        label="Mes tâches"
+                        :collapsed="sidebarIsCollapsed"
+                        @click="ui.closeMobileSidebar()"
+                    />
+                    <SidebarLink
                         to="/projects"
-                        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:folder-outline" size="24"/>
-                        <span class="self-baseline text-md">Projets</span>
-                    </NuxtLink>
-                    <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>
-                    <NuxtLink
+                        icon="mdi:folder-outline"
+                        label="Projets"
+                        :collapsed="sidebarIsCollapsed"
+                        @click="ui.closeMobileSidebar()"
+                    />
+                    <template v-if="currentProjectId">
+                        <SidebarLink
+                            :to="`/projects/${currentProjectId}`"
+                            icon="mdi:view-column-outline"
+                            label="Kanban"
+                            :collapsed="sidebarIsCollapsed"
+                            sub
+                            exact
+                            @click="ui.closeMobileSidebar()"
+                        />
+                        <SidebarLink
+                            :to="`/projects/${currentProjectId}/groups`"
+                            icon="mdi:tag-multiple-outline"
+                            label="Groupes"
+                            :collapsed="sidebarIsCollapsed"
+                            sub
+                            @click="ui.closeMobileSidebar()"
+                        />
+                        <SidebarLink
+                            :to="`/projects/${currentProjectId}/archives`"
+                            icon="mdi:archive-outline"
+                            label="Archives"
+                            :collapsed="sidebarIsCollapsed"
+                            sub
+                            @click="ui.closeMobileSidebar()"
+                        />
+
+                    </template>
+                    <SidebarLink
+                        to="/time-tracking"
+                        icon="mdi:clock-outline"
+                        label="Suivi de temps"
+                        :collapsed="sidebarIsCollapsed"
+                        @click="ui.closeMobileSidebar()"
+                    />
+                    <SidebarLink
                         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>
+                        icon="mdi:cog-outline"
+                        label="Administration"
+                        :collapsed="sidebarIsCollapsed"
+                        @click="ui.closeMobileSidebar()"
+                    />
                 </nav>
 
+                <div class="px-4 py-3">
+                    <SidebarTimer :collapsed="sidebarIsCollapsed" />
+                </div>
+
                 <div class="flex flex-col gap-2 items-center p-4">
-                    <p class="font-bold">v 0.0.0</p>
+                    <p v-if="!sidebarIsCollapsed" class="font-bold">v {{ version }}</p>
+                    <button
+                        class="hidden items-center justify-center rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-700 transition-colors lg:flex"
+                        :title="ui.sidebarCollapsed ? 'Ouvrir le menu' : 'Réduire le menu'"
+                        @click="ui.toggleSidebar()"
+                    >
+                        <Icon
+                            :name="ui.sidebarCollapsed ? 'mdi:chevron-right' : 'mdi:chevron-left'"
+                            size="20"
+                        />
+                    </button>
                 </div>
             </aside>
 
-            <div class="h-full flex-1 overflow-hidden flex flex-col">
+            <div class="h-full flex-1 flex flex-col min-h-0">
                 <AppTopNav :user="auth.user" />
-                <main class="flex-1 overflow-y-auto px-8 py-12">
+                <main class="flex flex-1 flex-col overflow-y-auto bg-white px-4 pb-24 sm:px-8 lg:px-16">
+                    <div aria-hidden="true" class="pointer-events-none sticky top-0 z-30 h-8 flex-shrink-0 bg-white sm:h-12" />
                     <slot/>
                 </main>
             </div>
         </div>
+
+        <TimeEntryDrawer
+            v-model="completeDrawerOpen"
+            :entry="timerStore.pendingCompleteEntry"
+            :users="refData.users"
+            :projects="refData.projects"
+            :tags="refData.tags"
+            @saved="onCompleteSaved"
+        />
     </div>
 </template>
 
 <script setup lang="ts">
-import {useAppVersion} from "~/composables/useAppVersion";
+import type { UserData } from '~/services/dto/user-data'
+import type { Project } from '~/services/dto/project'
+import type { TaskTag } from '~/services/dto/task-tag'
+import { useAppVersion } from '~/composables/useAppVersion'
+import { extractHydraMembers } from '~/utils/api'
 
 const auth = useAuthStore()
+const ui = useUiStore()
 const {version} = useAppVersion()
+const route = useRoute()
+
+// On mobile, sidebar is always expanded (not collapsed icon mode)
+const sidebarIsCollapsed = computed(() => {
+    if (ui.sidebarOpen) return false
+    return ui.sidebarCollapsed
+})
+
+// Close mobile sidebar on route change
+watch(() => route.path, () => {
+    ui.closeMobileSidebar()
+})
+
+const currentProjectId = computed(() => {
+    const match = route.path.match(/^\/projects\/(\d+)/)
+    return match ? match[1] : null
+})
+
+const timerStore = useTimerStore()
+
+const baseTitle = ref('Lesstime')
+
+useHead({
+    titleTemplate: (title) => {
+        baseTitle.value = title || 'Lesstime'
+        return title || 'Lesstime'
+    },
+})
+
+watch(
+    [() => timerStore.elapsedFormatted, () => timerStore.isRunning, () => timerStore.activeEntry?.title],
+    ([elapsed, running, label]) => {
+        if (import.meta.server) return
+        const base = baseTitle.value
+        if (running) {
+            document.title = label ? `${base} | ${elapsed} · ${label}` : `${base} | ${elapsed}`
+        } else {
+            document.title = base
+        }
+    },
+)
+
+onMounted(() => {
+    timerStore.fetchActive()
+})
+
+const completeDrawerOpen = ref(false)
+const refData = reactive({
+    users: [] as UserData[],
+    projects: [] as Project[],
+    tags: [] as TaskTag[],
+    loaded: false,
+})
+
+async function loadRefData() {
+    if (refData.loaded) return
+    const api = useApi()
+    const [usersData, projectsData, typesData] = await Promise.all([
+        api.get<any>('/users'),
+        api.get<any>('/projects'),
+        api.get<any>('/task_tags'),
+    ])
+    refData.users = extractHydraMembers(usersData)
+    refData.projects = extractHydraMembers(projectsData)
+    refData.tags = extractHydraMembers(typesData)
+    refData.loaded = true
+}
+
+watch(() => timerStore.pendingCompleteEntry, async (entry) => {
+    if (entry) {
+        await loadRefData()
+        completeDrawerOpen.value = true
+    }
+})
+
+watch(completeDrawerOpen, (open) => {
+    if (!open) {
+        nextTick(() => {
+            timerStore.clearPendingEntry()
+        })
+    }
+})
+
+function onCompleteSaved() {
+    completeDrawerOpen.value = false
+    nextTick(() => {
+        timerStore.clearPendingEntry()
+    })
+}
 
 const handleLogout = async () => {
     await auth.logout()
     await navigateTo('/login')
 }
 </script>
+
+<style scoped>
+.sidebar-overlay-enter-active,
+.sidebar-overlay-leave-active {
+    transition: opacity 0.3s ease;
+}
+.sidebar-overlay-enter-from,
+.sidebar-overlay-leave-to {
+    opacity: 0;
+}
+</style>

frontend/nuxt.config.ts

@@ -20,7 +20,31 @@ export default defineNuxtConfig({
             apiBase: process.env.NUXT_PUBLIC_API_BASE
         }
     },
-    devServer: {port: 3002},
+    devServer: {
+        port: 3002,
+    },
+    nitro: {
+        devProxy: {
+            '/api': {
+                target: 'http://nginx',
+                changeOrigin: true,
+            },
+        },
+    },
+    components: [
+        {path: '~/components', pathPrefix: false},
+    ],
+    vite: {
+        server: {
+            allowedHosts: true,
+            proxy: {
+                '/api': {
+                    target: 'http://nginx',
+                    changeOrigin: true,
+                },
+            },
+        },
+    },
     toast: {
         settings: {
             timeout: 2000,

frontend/package-lock.json

@@ -12,10 +12,12 @@
                 "@nuxtjs/i18n": "^10.2.3",
                 "@nuxtjs/tailwindcss": "^6.14.0",
                 "@pinia/nuxt": "^0.11.3",
+                "chart.js": "^4.5.1",
                 "nuxt": "^4.3.1",
                 "nuxt-toast": "^1.4.0",
                 "pinia": "^3.0.4",
                 "vue": "^3.5.29",
+                "vue-chartjs": "^5.3.3",
                 "vue-router": "^4.6.4"
             }
         },
@@ -2109,6 +2111,12 @@
                 "node": ">= 12"
             }
         },
+        "node_modules/@kurkle/color": {
+            "version": "0.3.4",
+            "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+            "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+            "license": "MIT"
+        },
         "node_modules/@kwsites/file-exists": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/@kwsites/file-exists/-/file-exists-1.1.1.tgz",
@@ -6603,6 +6611,19 @@
                 "node": ">=8"
             }
         },
+        "node_modules/chart.js": {
+            "version": "4.5.1",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+            "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "@kurkle/color": "^0.3.0"
+            },
+            "engines": {
+                "pnpm": ">=8"
+            }
+        },
         "node_modules/chokidar": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
@@ -13716,6 +13737,16 @@
                 "ufo": "^1.6.1"
             }
         },
+        "node_modules/vue-chartjs": {
+            "version": "5.3.3",
+            "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.3.tgz",
+            "integrity": "sha512-jqxtL8KZ6YJ5NTv6XzrzLS7osyegOi28UGNZW0h9OkDL7Sh1396ht4Dorh04aKrl2LiSalQ84WtqiG0RIJb0tA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "chart.js": "^4.1.1",
+                "vue": "^3.0.0-0 || ^2.7.0"
+            }
+        },
         "node_modules/vue-devtools-stub": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz",

frontend/package.json

@@ -16,10 +16,12 @@
         "@nuxtjs/i18n": "^10.2.3",
         "@nuxtjs/tailwindcss": "^6.14.0",
         "@pinia/nuxt": "^0.11.3",
+        "chart.js": "^4.5.1",
         "nuxt": "^4.3.1",
         "nuxt-toast": "^1.4.0",
         "pinia": "^3.0.4",
         "vue": "^3.5.29",
+        "vue-chartjs": "^5.3.3",
         "vue-router": "^4.6.4"
     }
 }

frontend/pages/admin.vue

@@ -1,29 +1,34 @@
 <template>
     <div>
-        <h1 class="text-2xl font-bold text-neutral-900">Administration</h1>
+        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
+            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">Administration</h1>
 
-        <div class="mt-6 border-b border-neutral-200">
-            <nav class="flex gap-6">
-                <button
-                    v-for="tab in tabs"
-                    :key="tab.key"
-                    class="px-1 pb-3 text-sm font-semibold transition"
-                    :class="activeTab === tab.key
-                        ? 'border-b-2 border-primary-500 text-primary-500'
-                        : 'text-neutral-500 hover:text-neutral-700'"
-                    @click="activeTab = tab.key"
-                >
-                    {{ tab.label }}
-                </button>
-            </nav>
+            <div class="mt-6 border-b border-neutral-200 overflow-x-auto">
+                <nav class="flex gap-4 sm:gap-6">
+                    <button
+                        v-for="tab in tabs"
+                        :key="tab.key"
+                        class="whitespace-nowrap px-1 pb-3 text-sm font-semibold transition"
+                        :class="activeTab === tab.key
+                            ? 'border-b-2 border-primary-500 text-primary-500'
+                            : 'text-neutral-500 hover:text-neutral-700'"
+                        @click="activeTab = tab.key"
+                    >
+                        {{ tab.label }}
+                    </button>
+                </nav>
+            </div>
         </div>
 
-        <div class="mt-6">
+        <div>
+            <AdminClientTab v-if="activeTab === 'clients'" />
             <AdminStatusTab v-if="activeTab === 'statuses'" />
             <AdminEffortTab v-if="activeTab === 'efforts'" />
             <AdminPriorityTab v-if="activeTab === 'priorities'" />
-            <AdminTypeTab v-if="activeTab === 'types'" />
+            <AdminTagTab v-if="activeTab === 'tags'" />
             <AdminUserTab v-if="activeTab === 'users'" />
+            <AdminGiteaTab v-if="activeTab === 'gitea'" />
+            <AdminBookStackTab v-if="activeTab === 'bookstack'" />
         </div>
     </div>
 </template>
@@ -32,14 +37,17 @@
 useHead({ title: 'Administration' })
 
 const tabs = [
+    { key: 'clients', label: 'Clients' },
     { key: 'statuses', label: 'Statuts' },
     { key: 'efforts', label: 'Efforts' },
     { key: 'priorities', label: 'Priorités' },
-    { key: 'types', label: 'Types' },
+    { key: 'tags', label: 'Tags' },
     { key: 'users', label: 'Utilisateurs' },
+    { key: 'gitea', label: 'Gitea' },
+    { key: 'bookstack', label: 'BookStack' },
 ] as const
 
 type TabKey = typeof tabs[number]['key']
 
-const activeTab = ref<TabKey>('statuses')
+const activeTab = ref<TabKey>('clients')
 </script>

frontend/pages/clients.vue

@@ -1,110 +0,0 @@
-<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>
-                        <th class="px-4 py-3 font-semibold text-neutral-700"></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>
-                        <td class="px-4 py-3 text-right">
-                            <button
-                                class="text-red-500 hover:text-red-700"
-                                @click.stop="handleDelete(client.id)"
-                            >
-                                <Icon name="mdi:delete-outline" size="20" />
-                            </button>
-                        </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'
-import { useClientService } from '~/services/clients'
-
-useHead({ title: 'Clients' })
-
-const { getAll, remove } = 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 handleDelete(id: number) {
-    await remove(id)
-    await loadClients()
-}
-
-async function onSaved() {
-    await loadClients()
-}
-
-onMounted(() => {
-    loadClients()
-})
-</script>

frontend/pages/index.vue

@@ -1,7 +1,668 @@
-<template>
-    <h1 class="text-primary-500">Tableau de bord</h1>
-</template>
-
 <script setup lang="ts">
+import { Doughnut, Bar, Line } from 'vue-chartjs'
+import type { Task } from '~/services/dto/task'
+import type { TaskStatus } from '~/services/dto/task-status'
+import type { TaskPriority } from '~/services/dto/task-priority'
+import type { TimeEntry } from '~/services/dto/time-entry'
+import type { Project } from '~/services/dto/project'
+import type { UserData } from '~/services/dto/user-data'
+import { useTaskService } from '~/services/tasks'
+import { useTaskStatusService } from '~/services/task-statuses'
+import { useTaskPriorityService } from '~/services/task-priorities'
+import { useTimeEntryService } from '~/services/time-entries'
+import { useProjectService } from '~/services/projects'
+import { useUserService } from '~/services/users'
 
+const { t } = useI18n()
+const auth = useAuthStore()
+
+useHead({ title: t('dashboard.title') })
+
+const taskService = useTaskService()
+const statusService = useTaskStatusService()
+const priorityService = useTaskPriorityService()
+const timeEntryService = useTimeEntryService()
+const projectService = useProjectService()
+const userService = useUserService()
+
+const allTasks = ref<Task[]>([])
+const statuses = ref<TaskStatus[]>([])
+const priorities = ref<TaskPriority[]>([])
+const allTimeEntries = ref<TimeEntry[]>([])
+const projects = ref<Project[]>([])
+const users = ref<UserData[]>([])
+const isLoading = ref(true)
+
+// ── Filters ──
+
+type PeriodKey = 'thisWeek' | 'lastWeek' | 'thisMonth' | 'lastMonth'
+
+const selectedPeriod = ref<PeriodKey>('thisWeek')
+const selectedProjectId = ref<number | null>(null)
+const selectedUserId = ref<number | null>(null)
+
+const periodOptions = computed(() => [
+    { label: t('dashboard.periods.thisWeek'), value: 'thisWeek' },
+    { label: t('dashboard.periods.lastWeek'), value: 'lastWeek' },
+    { label: t('dashboard.periods.thisMonth'), value: 'thisMonth' },
+    { label: t('dashboard.periods.lastMonth'), value: 'lastMonth' },
+])
+
+const projectOptions = computed(() =>
+    projects.value.map(p => ({ label: p.name, value: p.id }))
+)
+
+const userOptions = computed(() =>
+    users.value.map(u => ({ label: u.username, value: u.id }))
+)
+
+// ── Period date ranges ──
+
+function getWeekRange(offset: number = 0) {
+    const now = new Date()
+    const day = now.getDay()
+    const diffToMonday = day === 0 ? -6 : 1 - day
+    const monday = new Date(now)
+    monday.setDate(now.getDate() + diffToMonday + offset * 7)
+    monday.setHours(0, 0, 0, 0)
+    const sunday = new Date(monday)
+    sunday.setDate(monday.getDate() + 6)
+    sunday.setHours(23, 59, 59, 999)
+    return { start: monday, end: sunday }
+}
+
+function getMonthRange(offset: number = 0) {
+    const now = new Date()
+    const start = new Date(now.getFullYear(), now.getMonth() + offset, 1)
+    start.setHours(0, 0, 0, 0)
+    const end = new Date(now.getFullYear(), now.getMonth() + offset + 1, 0)
+    end.setHours(23, 59, 59, 999)
+    return { start, end }
+}
+
+const dateRange = computed(() => {
+    switch (selectedPeriod.value) {
+        case 'thisWeek': return getWeekRange(0)
+        case 'lastWeek': return getWeekRange(-1)
+        case 'thisMonth': return getMonthRange(0)
+        case 'lastMonth': return getMonthRange(-1)
+    }
+})
+
+const isWeekPeriod = computed(() =>
+    selectedPeriod.value === 'thisWeek' || selectedPeriod.value === 'lastWeek'
+)
+
+// ── Filtered data (client-side project filter) ──
+
+const tasks = computed(() => {
+    if (!selectedProjectId.value) return allTasks.value
+    return allTasks.value.filter(t => t.project?.id === selectedProjectId.value)
+})
+
+const timeEntries = computed(() => {
+    if (!selectedProjectId.value) return allTimeEntries.value
+    return allTimeEntries.value.filter(e => e.project?.id === selectedProjectId.value)
+})
+
+// ── Data loading ──
+
+async function loadReferenceData() {
+    const [s, p, proj, u] = await Promise.all([
+        statusService.getAll(),
+        priorityService.getAll(),
+        projectService.getAll(),
+        userService.getAll(),
+    ])
+    statuses.value = s
+    priorities.value = p
+    projects.value = proj
+    users.value = u
+}
+
+async function loadTasks() {
+    allTasks.value = await taskService.getFiltered({ archived: false })
+}
+
+async function loadTimeEntries() {
+    const params: { after: string; before: string; user?: number } = {
+        after: dateRange.value.start.toISOString(),
+        before: dateRange.value.end.toISOString(),
+    }
+    if (selectedUserId.value) {
+        params.user = selectedUserId.value
+    }
+    allTimeEntries.value = await timeEntryService.getByDateRange(params)
+}
+
+async function loadAll() {
+    isLoading.value = true
+    try {
+        await Promise.all([loadReferenceData(), loadTasks(), loadTimeEntries()])
+    } finally {
+        isLoading.value = false
+    }
+}
+
+// Reload time entries when period or user changes (server-side filter)
+watch([selectedPeriod, selectedUserId], () => {
+    loadTimeEntries()
+})
+
+onMounted(() => loadAll())
+
+// ── Helpers ──
+
+function durationHours(entry: TimeEntry): number {
+    const start = new Date(entry.startedAt)
+    const end = entry.stoppedAt ? new Date(entry.stoppedAt) : new Date()
+    return (end.getTime() - start.getTime()) / 3_600_000
+}
+
+function formatHours(h: number): string {
+    const hours = Math.floor(h)
+    const mins = Math.round((h - hours) * 60)
+    return mins > 0 ? `${hours}h${String(mins).padStart(2, '0')}` : `${hours}h`
+}
+
+// ── KPI Stats ──
+
+const totalHoursThisWeek = computed(() =>
+    timeEntries.value.reduce((sum, e) => sum + durationHours(e), 0)
+)
+
+const myTasks = computed(() =>
+    tasks.value.filter(t => t.assignee?.id === auth.user?.id)
+)
+
+const myTasksDone = computed(() =>
+    myTasks.value.filter(t => t.status?.isFinal)
+)
+
+const unassignedTasks = computed(() =>
+    tasks.value.filter(t => !t.assignee)
+)
+
+// ── Chart: Tasks by Status (Doughnut) ──
+
+const tasksByStatusData = computed(() => {
+    const sorted = [...statuses.value].sort((a, b) => a.position - b.position)
+    const noStatus = tasks.value.filter(t => !t.status).length
+    const labels = noStatus > 0 ? ['Backlog', ...sorted.map(s => s.label)] : sorted.map(s => s.label)
+    const data = noStatus > 0
+        ? [noStatus, ...sorted.map(s => tasks.value.filter(t => t.status?.id === s.id).length)]
+        : sorted.map(s => tasks.value.filter(t => t.status?.id === s.id).length)
+    const colors = noStatus > 0
+        ? ['#9ca3af', ...sorted.map(s => s.color)]
+        : sorted.map(s => s.color)
+
+    return {
+        labels,
+        datasets: [{
+            data,
+            backgroundColor: colors,
+            borderWidth: 0,
+        }],
+    }
+})
+
+// ── Chart: Tasks by Priority (Bar) ──
+
+const tasksByPriorityData = computed(() => {
+    const sorted = [...priorities.value]
+    const noPriority = tasks.value.filter(t => !t.priority).length
+    const labels = [...sorted.map(p => p.label), ...(noPriority > 0 ? [t('dashboard.noPriority')] : [])]
+    const data = [...sorted.map(p => tasks.value.filter(t => t.priority?.id === p.id).length), ...(noPriority > 0 ? [noPriority] : [])]
+    const colors = [...sorted.map(p => p.color), ...(noPriority > 0 ? ['#9ca3af'] : [])]
+
+    return {
+        labels,
+        datasets: [{
+            data,
+            backgroundColor: colors,
+            borderWidth: 0,
+            borderRadius: 6,
+        }],
+    }
+})
+
+// ── Chart: Hours by Project (Doughnut) ──
+
+const hoursByProjectData = computed(() => {
+    const projectHours = new Map<number, { name: string; color: string; hours: number }>()
+    let noProjectHours = 0
+
+    for (const entry of timeEntries.value) {
+        const h = durationHours(entry)
+        if (entry.project) {
+            const existing = projectHours.get(entry.project.id)
+            if (existing) {
+                existing.hours += h
+            } else {
+                projectHours.set(entry.project.id, {
+                    name: entry.project.name,
+                    color: entry.project.color || '#6366f1',
+                    hours: h,
+                })
+            }
+        } else {
+            noProjectHours += h
+        }
+    }
+
+    const entries = [...projectHours.values()].sort((a, b) => b.hours - a.hours)
+    if (noProjectHours > 0) {
+        entries.push({ name: t('dashboard.noProject'), color: '#9ca3af', hours: noProjectHours })
+    }
+
+    return {
+        labels: entries.map(e => e.name),
+        datasets: [{
+            data: entries.map(e => Math.round(e.hours * 100) / 100),
+            backgroundColor: entries.map(e => e.color),
+            borderWidth: 0,
+        }],
+    }
+})
+
+// ── Chart: Hours by Day (Line) ──
+
+const weekDayLabels = [
+    t('dashboard.days.mon'),
+    t('dashboard.days.tue'),
+    t('dashboard.days.wed'),
+    t('dashboard.days.thu'),
+    t('dashboard.days.fri'),
+    t('dashboard.days.sat'),
+    t('dashboard.days.sun'),
+]
+
+const hoursByDayData = computed(() => {
+    if (isWeekPeriod.value) {
+        const dayHours = new Array(7).fill(0)
+        for (const entry of timeEntries.value) {
+            const start = new Date(entry.startedAt)
+            const dayIndex = start.getDay() === 0 ? 6 : start.getDay() - 1
+            dayHours[dayIndex] += durationHours(entry)
+        }
+        return {
+            labels: weekDayLabels,
+            datasets: [{
+                label: t('dashboard.hoursWorked'),
+                data: dayHours.map(h => Math.round(h * 100) / 100),
+                borderColor: '#6366f1',
+                backgroundColor: 'rgba(99, 102, 241, 0.1)',
+                fill: true,
+                tension: 0.3,
+                pointBackgroundColor: '#6366f1',
+                pointRadius: 4,
+            }],
+        }
+    }
+
+    // Month view: group by week number
+    const { start, end } = dateRange.value
+    const weekMap = new Map<string, number>()
+    const weekLabels: string[] = []
+
+    // Build week labels for the month
+    const cursor = new Date(start)
+    while (cursor <= end) {
+        const weekStart = new Date(cursor)
+        const weekEnd = new Date(cursor)
+        weekEnd.setDate(weekEnd.getDate() + 6)
+        if (weekEnd > end) weekEnd.setTime(end.getTime())
+        const label = `${weekStart.getDate()}/${weekStart.getMonth() + 1} - ${weekEnd.getDate()}/${weekEnd.getMonth() + 1}`
+        weekLabels.push(label)
+        weekMap.set(label, 0)
+        cursor.setDate(cursor.getDate() + 7)
+        // Align to Monday
+        const d = cursor.getDay()
+        if (d !== 1) {
+            cursor.setDate(cursor.getDate() + (d === 0 ? 1 : 8 - d))
+        }
+    }
+
+    for (const entry of timeEntries.value) {
+        const entryDate = new Date(entry.startedAt)
+        for (let i = 0; i < weekLabels.length; i++) {
+            const parts = weekLabels[i].split(' - ')
+            const [sd, sm] = parts[0].split('/').map(Number)
+            const [ed, em] = parts[1].split('/').map(Number)
+            const ws = new Date(start.getFullYear(), sm - 1, sd)
+            const we = new Date(start.getFullYear(), em - 1, ed, 23, 59, 59)
+            if (entryDate >= ws && entryDate <= we) {
+                weekMap.set(weekLabels[i], (weekMap.get(weekLabels[i]) ?? 0) + durationHours(entry))
+                break
+            }
+        }
+    }
+
+    return {
+        labels: weekLabels,
+        datasets: [{
+            label: t('dashboard.hoursWorked'),
+            data: weekLabels.map(l => Math.round((weekMap.get(l) ?? 0) * 100) / 100),
+            borderColor: '#6366f1',
+            backgroundColor: 'rgba(99, 102, 241, 0.1)',
+            fill: true,
+            tension: 0.3,
+            pointBackgroundColor: '#6366f1',
+            pointRadius: 4,
+        }],
+    }
+})
+
+// ── Chart: Tasks by Project (Horizontal Bar) ──
+
+const tasksByProjectData = computed(() => {
+    const projectTasks = new Map<number, { name: string; color: string; count: number; done: number }>()
+
+    for (const task of tasks.value) {
+        if (!task.project) continue
+        const existing = projectTasks.get(task.project.id)
+        const isDone = task.status?.isFinal ?? false
+        if (existing) {
+            existing.count++
+            if (isDone) existing.done++
+        } else {
+            projectTasks.set(task.project.id, {
+                name: task.project.name,
+                color: task.project.color || '#6366f1',
+                count: 1,
+                done: isDone ? 1 : 0,
+            })
+        }
+    }
+
+    const entries = [...projectTasks.values()].sort((a, b) => b.count - a.count)
+
+    return {
+        labels: entries.map(e => e.name),
+        datasets: [
+            {
+                label: t('dashboard.inProgress'),
+                data: entries.map(e => e.count - e.done),
+                backgroundColor: entries.map(e => e.color),
+                borderWidth: 0,
+                borderRadius: 6,
+            },
+            {
+                label: t('dashboard.done'),
+                data: entries.map(e => e.done),
+                backgroundColor: entries.map(e => e.color + '66'),
+                borderWidth: 0,
+                borderRadius: 6,
+            },
+        ],
+    }
+})
+
+// ── Chart options ──
+
+const doughnutOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    cutout: '65%',
+    plugins: {
+        legend: {
+            position: 'bottom' as const,
+            labels: {
+                padding: 16,
+                usePointStyle: true,
+                pointStyle: 'circle',
+                font: { size: 12 },
+            },
+        },
+    },
+}
+
+const barOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+        legend: { display: false },
+    },
+    scales: {
+        y: {
+            beginAtZero: true,
+            ticks: { stepSize: 1 },
+            grid: { color: '#f3f4f6' },
+        },
+        x: {
+            grid: { display: false },
+        },
+    },
+}
+
+const horizontalBarOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    indexAxis: 'y' as const,
+    plugins: {
+        legend: {
+            position: 'bottom' as const,
+            labels: {
+                padding: 16,
+                usePointStyle: true,
+                pointStyle: 'circle',
+                font: { size: 12 },
+            },
+        },
+    },
+    scales: {
+        x: {
+            beginAtZero: true,
+            stacked: true,
+            ticks: { stepSize: 1 },
+            grid: { color: '#f3f4f6' },
+        },
+        y: {
+            stacked: true,
+            grid: { display: false },
+        },
+    },
+}
+
+const lineOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+        legend: { display: false },
+        tooltip: {
+            callbacks: {
+                label: (ctx: any) => `${formatHours(ctx.raw)}`,
+            },
+        },
+    },
+    scales: {
+        y: {
+            beginAtZero: true,
+            grid: { color: '#f3f4f6' },
+            ticks: {
+                callback: (value: any) => `${value}h`,
+            },
+        },
+        x: {
+            grid: { display: false },
+        },
+    },
+}
 </script>
+
+<template>
+    <div>
+        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
+            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('dashboard.title') }}</h1>
+
+            <!-- Filters -->
+            <div class="mt-4 flex flex-wrap gap-3">
+                <MalioSelect
+                    v-model="selectedPeriod"
+                    :options="periodOptions"
+                    :label="$t('dashboard.filters.period')"
+                    min-width="!w-48"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
+                <MalioSelect
+                    v-model="selectedProjectId"
+                    :options="projectOptions"
+                    :label="$t('dashboard.filters.project')"
+                    :empty-option-label="$t('dashboard.filters.allProjects')"
+                    min-width="!w-40"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
+                <MalioSelect
+                    v-model="selectedUserId"
+                    :options="userOptions"
+                    :label="$t('dashboard.filters.user')"
+                    :empty-option-label="$t('dashboard.filters.allUsers')"
+                    min-width="!w-40"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
+            </div>
+        </div>
+
+        <!-- Loading -->
+        <div v-if="isLoading" class="mt-12 flex items-center justify-center">
+            <p class="text-neutral-400">{{ $t('common.loading') }}</p>
+        </div>
+
+        <template v-else>
+            <!-- KPI Cards -->
+            <div class="mt-6 grid grid-cols-2 gap-4 lg:grid-cols-4">
+                <div class="rounded-xl border border-neutral-100 bg-neutral-50 p-5">
+                    <p class="text-xs font-medium uppercase tracking-wider text-neutral-400">
+                        {{ $t('dashboard.stats.hoursPeriod') }}
+                    </p>
+                    <p class="mt-2 text-2xl font-bold text-neutral-900 sm:text-3xl">
+                        {{ formatHours(totalHoursThisWeek) }}
+                    </p>
+                </div>
+                <div class="rounded-xl border border-neutral-100 bg-neutral-50 p-5">
+                    <p class="text-xs font-medium uppercase tracking-wider text-neutral-400">
+                        {{ $t('dashboard.stats.myActiveTasks') }}
+                    </p>
+                    <p class="mt-2 text-2xl font-bold text-neutral-900 sm:text-3xl">
+                        {{ myTasks.length - myTasksDone.length }}
+                    </p>
+                    <p class="mt-1 text-xs text-neutral-400">
+                        {{ myTasksDone.length }} {{ $t('dashboard.stats.completed') }}
+                    </p>
+                </div>
+                <div class="rounded-xl border border-neutral-100 bg-neutral-50 p-5">
+                    <p class="text-xs font-medium uppercase tracking-wider text-neutral-400">
+                        {{ $t('dashboard.stats.totalTasks') }}
+                    </p>
+                    <p class="mt-2 text-2xl font-bold text-neutral-900 sm:text-3xl">
+                        {{ tasks.length }}
+                    </p>
+                    <p class="mt-1 text-xs text-neutral-400">
+                        {{ unassignedTasks.length }} {{ $t('dashboard.stats.unassigned') }}
+                    </p>
+                </div>
+                <div class="rounded-xl border border-neutral-100 bg-neutral-50 p-5">
+                    <p class="text-xs font-medium uppercase tracking-wider text-neutral-400">
+                        {{ $t('dashboard.stats.projects') }}
+                    </p>
+                    <p class="mt-2 text-2xl font-bold text-neutral-900 sm:text-3xl">
+                        {{ projects.length }}
+                    </p>
+                    <p class="mt-1 text-xs text-neutral-400">
+                        {{ users.length }} {{ $t('dashboard.stats.users') }}
+                    </p>
+                </div>
+            </div>
+
+            <!-- Charts Row 1 -->
+            <div class="mt-8 grid gap-6 lg:grid-cols-2">
+                <!-- Hours by Day (Line) -->
+                <div class="rounded-xl border border-neutral-100 bg-neutral-50 p-5">
+                    <h2 class="text-sm font-semibold text-neutral-700">
+                        {{ $t('dashboard.charts.hoursByDay') }}
+                    </h2>
+                    <div class="mt-4 h-64">
+                        <Line :data="hoursByDayData" :options="lineOptions" />
+                    </div>
+                </div>
+
+                <!-- Hours by Project (Doughnut) -->
+                <div class="rounded-xl border border-neutral-100 bg-neutral-50 p-5">
+                    <h2 class="text-sm font-semibold text-neutral-700">
+                        {{ $t('dashboard.charts.hoursByProject') }}
+                    </h2>
+                    <div class="mt-4 h-64">
+                        <Doughnut
+                            v-if="hoursByProjectData.labels.length > 0"
+                            :data="hoursByProjectData"
+                            :options="doughnutOptions"
+                        />
+                        <p v-else class="flex h-full items-center justify-center text-sm text-neutral-400">
+                            {{ $t('dashboard.noData') }}
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Charts Row 2 -->
+            <div class="mt-6 grid gap-6 lg:grid-cols-2">
+                <!-- Tasks by Status (Doughnut) -->
+                <div class="rounded-xl border border-neutral-100 bg-neutral-50 p-5">
+                    <h2 class="text-sm font-semibold text-neutral-700">
+                        {{ $t('dashboard.charts.tasksByStatus') }}
+                    </h2>
+                    <div class="mt-4 h-64">
+                        <Doughnut
+                            v-if="tasksByStatusData.labels.length > 0"
+                            :data="tasksByStatusData"
+                            :options="doughnutOptions"
+                        />
+                        <p v-else class="flex h-full items-center justify-center text-sm text-neutral-400">
+                            {{ $t('dashboard.noData') }}
+                        </p>
+                    </div>
+                </div>
+
+                <!-- Tasks by Priority (Bar) -->
+                <div class="rounded-xl border border-neutral-100 bg-neutral-50 p-5">
+                    <h2 class="text-sm font-semibold text-neutral-700">
+                        {{ $t('dashboard.charts.tasksByPriority') }}
+                    </h2>
+                    <div class="mt-4 h-64">
+                        <Bar
+                            v-if="tasksByPriorityData.labels.length > 0"
+                            :data="tasksByPriorityData"
+                            :options="barOptions"
+                        />
+                        <p v-else class="flex h-full items-center justify-center text-sm text-neutral-400">
+                            {{ $t('dashboard.noData') }}
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Charts Row 3 -->
+            <div class="mt-6">
+                <!-- Tasks by Project (Horizontal Bar) -->
+                <div class="rounded-xl border border-neutral-100 bg-neutral-50 p-5">
+                    <h2 class="text-sm font-semibold text-neutral-700">
+                        {{ $t('dashboard.charts.tasksByProject') }}
+                    </h2>
+                    <div class="mt-4" :style="{ height: Math.max(200, tasksByProjectData.labels.length * 40 + 60) + 'px' }">
+                        <Bar
+                            v-if="tasksByProjectData.labels.length > 0"
+                            :data="tasksByProjectData"
+                            :options="horizontalBarOptions"
+                        />
+                        <p v-else class="flex h-full items-center justify-center text-sm text-neutral-400">
+                            {{ $t('dashboard.noData') }}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>

frontend/pages/my-tasks.vue

@@ -0,0 +1,444 @@
+<script setup lang="ts">
+import type { Task } from '~/services/dto/task'
+import type { TaskStatus } from '~/services/dto/task-status'
+import type { TaskEffort } from '~/services/dto/task-effort'
+import type { TaskPriority } from '~/services/dto/task-priority'
+import type { TaskTag } from '~/services/dto/task-tag'
+import type { TaskGroup } from '~/services/dto/task-group'
+import type { UserData } from '~/services/dto/user-data'
+import type { Project } from '~/services/dto/project'
+import { useTaskService } from '~/services/tasks'
+import { useTaskStatusService } from '~/services/task-statuses'
+import { useTaskEffortService } from '~/services/task-efforts'
+import { useTaskPriorityService } from '~/services/task-priorities'
+import { useTaskTagService } from '~/services/task-tags'
+import { useTaskGroupService } from '~/services/task-groups'
+import { useUserService } from '~/services/users'
+import { useProjectService } from '~/services/projects'
+
+const { t } = useI18n()
+const auth = useAuthStore()
+
+useHead({ title: t('myTasks.title') })
+
+const taskService = useTaskService()
+const statusService = useTaskStatusService()
+const effortService = useTaskEffortService()
+const priorityService = useTaskPriorityService()
+const tagService = useTaskTagService()
+const groupService = useTaskGroupService()
+const userService = useUserService()
+const projectService = useProjectService()
+
+const tasks = ref<Task[]>([])
+const statuses = ref<TaskStatus[]>([])
+const efforts = ref<TaskEffort[]>([])
+const priorities = ref<TaskPriority[]>([])
+const tags = ref<TaskTag[]>([])
+const groups = ref<TaskGroup[]>([])
+const users = ref<UserData[]>([])
+const projects = ref<Project[]>([])
+const isLoading = ref(true)
+
+// Filters
+const selectedProjectId = ref<number | null>(null)
+const selectedGroupId = ref<number | null>(null)
+const selectedTagId = ref<number | null>(null)
+const selectedPriorityId = ref<number | null>(null)
+const selectedEffortId = ref<number | null>(null)
+const selectedAssigneeId = ref<number | null>(auth.user?.id ?? null)
+
+// View toggle
+const viewMode = ref<'kanban' | 'list'>('kanban')
+
+// Modal
+const taskModalOpen = ref(false)
+const selectedTask = ref<Task | null>(null)
+
+// Timer
+const timerStore = useTimerStore()
+
+function isTimerOnTask(task: Task): boolean {
+    const entry = timerStore.activeEntry
+    if (!entry?.task) return false
+    const entryTaskId = typeof entry.task === 'string'
+        ? entry.task
+        : (entry.task['@id'] ?? entry.task.id)
+    const taskId = task['@id'] ?? task.id
+    return entryTaskId === taskId || entryTaskId === `/api/tasks/${task.id}`
+}
+
+// Filter options
+const projectOptions = computed(() =>
+    projects.value.map(p => ({ label: p.name, value: p.id }))
+)
+
+const groupOptions = computed(() => {
+    let g = groups.value.filter(g => !g.archived)
+    if (selectedProjectId.value) {
+        g = g.filter(g => g.project?.id === selectedProjectId.value)
+    }
+    return g.map(g => ({ label: g.title, value: g.id }))
+})
+
+const tagOptions = computed(() =>
+    tags.value.map(t => ({ label: t.label, value: t.id }))
+)
+
+const priorityOptions = computed(() =>
+    priorities.value.map(p => ({ label: p.label, value: p.id }))
+)
+
+const effortOptions = computed(() =>
+    efforts.value.map(e => ({ label: e.label, value: e.id }))
+)
+
+const assigneeOptions = computed(() =>
+    users.value.map(u => ({ label: u.username, value: u.id }))
+)
+
+// Kanban helpers
+const sortedStatuses = computed(() =>
+    [...statuses.value].sort((a, b) => a.position - b.position)
+)
+
+function tasksByStatus(statusId: number): Task[] {
+    return tasks.value.filter(t => t.status?.id === statusId)
+}
+
+const backlogTasks = computed(() =>
+    tasks.value.filter(t => !t.status)
+)
+
+// Data loading
+async function loadReferenceData() {
+    const [s, e, pr, tg, g, u, p] = await Promise.all([
+        statusService.getAll(),
+        effortService.getAll(),
+        priorityService.getAll(),
+        tagService.getAll(),
+        groupService.getAll(),
+        userService.getAll(),
+        projectService.getAll(),
+    ])
+    statuses.value = s
+    efforts.value = e
+    priorities.value = pr
+    tags.value = tg
+    groups.value = g
+    users.value = u
+    projects.value = p
+}
+
+async function loadTasks() {
+    const params: Record<string, string | number | boolean | string[]> = {
+        archived: false,
+    }
+    if (selectedAssigneeId.value) {
+        params.assignee = `/api/users/${selectedAssigneeId.value}`
+    }
+    if (selectedProjectId.value) {
+        params.project = `/api/projects/${selectedProjectId.value}`
+    }
+    if (selectedGroupId.value) {
+        params.group = `/api/task_groups/${selectedGroupId.value}`
+    }
+    if (selectedPriorityId.value) {
+        params.priority = `/api/task_priorities/${selectedPriorityId.value}`
+    }
+    if (selectedEffortId.value) {
+        params.effort = `/api/task_efforts/${selectedEffortId.value}`
+    }
+    if (selectedTagId.value) {
+        params['tags[]'] = `/api/task_tags/${selectedTagId.value}`
+    }
+    tasks.value = await taskService.getFiltered(params)
+}
+
+async function loadAll() {
+    isLoading.value = true
+    try {
+        await Promise.all([loadReferenceData(), loadTasks()])
+    } finally {
+        isLoading.value = false
+    }
+}
+
+// Watch filters to reload tasks
+watch(
+    [selectedProjectId, selectedGroupId, selectedTagId, selectedPriorityId, selectedEffortId, selectedAssigneeId],
+    () => { loadTasks() },
+)
+
+// Reset group when project changes
+watch(selectedProjectId, () => {
+    selectedGroupId.value = null
+}, { flush: 'sync' })
+
+// Drag & drop
+const dragOverStatusId = ref<number | null>(null)
+const dragCounter = ref(0)
+
+function onDragEnter(id: number) {
+    dragCounter.value++
+    dragOverStatusId.value = id
+}
+
+function onDragLeave() {
+    dragCounter.value--
+    if (dragCounter.value === 0) {
+        dragOverStatusId.value = null
+    }
+}
+
+function onDrop(event: DragEvent) {
+    dragCounter.value = 0
+    dragOverStatusId.value = null
+    return Number(event.dataTransfer!.getData('text/plain'))
+}
+
+async function onDropStatus(event: DragEvent, status: TaskStatus) {
+    const taskId = onDrop(event)
+    const task = tasks.value.find(t => t.id === taskId)
+    if (!task || task.status?.id === status.id) return
+    task.status = status
+    await taskService.update(taskId, { status: `/api/task_statuses/${status.id}` })
+}
+
+async function onDropBacklog(event: DragEvent) {
+    const taskId = onDrop(event)
+    const task = tasks.value.find(t => t.id === taskId)
+    if (!task || !task.status) return
+    task.status = null
+    await taskService.update(taskId, { status: null })
+}
+
+// Modal
+function openTaskEdit(task: Task) {
+    selectedTask.value = task
+    taskModalOpen.value = true
+}
+
+async function onSaved() {
+    await loadTasks()
+}
+
+onMounted(() => {
+    loadAll()
+})
+</script>
+
+<template>
+    <div>
+        <!-- Header + Filters -->
+        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
+            <div class="flex items-center justify-between gap-3">
+                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('myTasks.title') }}</h1>
+                <div class="flex gap-1">
+                    <button
+                        class="rounded-lg p-2 transition-colors"
+                        :class="viewMode === 'kanban' ? 'bg-primary-500 text-white' : 'text-neutral-400 hover:text-primary-500'"
+                        :title="$t('myTasks.viewKanban')"
+                        @click="viewMode = 'kanban'"
+                    >
+                        <Icon name="mdi:view-column-outline" size="20" />
+                    </button>
+                    <button
+                        class="rounded-lg p-2 transition-colors"
+                        :class="viewMode === 'list' ? 'bg-primary-500 text-white' : 'text-neutral-400 hover:text-primary-500'"
+                        :title="$t('myTasks.viewList')"
+                        @click="viewMode = 'list'"
+                    >
+                        <Icon name="mdi:view-list-outline" size="20" />
+                    </button>
+                </div>
+            </div>
+
+            <div class="mt-4 flex flex-wrap gap-3">
+                <MalioSelect
+                    v-model="selectedProjectId"
+                    :options="projectOptions"
+                    label="Projet"
+                    :empty-option-label="$t('myTasks.allProjects')"
+                    min-width="!w-40"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
+                <MalioSelect
+                    v-model="selectedGroupId"
+                    :options="groupOptions"
+                    label="Groupe"
+                    :empty-option-label="$t('myTasks.allGroups')"
+                    min-width="!w-40"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
+                <MalioSelect
+                    v-model="selectedTagId"
+                    :options="tagOptions"
+                    label="Type"
+                    :empty-option-label="$t('myTasks.allTypes')"
+                    min-width="!w-40"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
+                <MalioSelect
+                    v-model="selectedPriorityId"
+                    :options="priorityOptions"
+                    label="Priorité"
+                    :empty-option-label="$t('myTasks.allPriorities')"
+                    min-width="!w-40"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
+                <MalioSelect
+                    v-model="selectedEffortId"
+                    :options="effortOptions"
+                    label="Effort"
+                    :empty-option-label="$t('myTasks.allEfforts')"
+                    min-width="!w-40"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
+                <MalioSelect
+                    v-model="selectedAssigneeId"
+                    :options="assigneeOptions"
+                    label="Assigné"
+                    :empty-option-label="$t('myTasks.allAssignees')"
+                    min-width="!w-40"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
+            </div>
+        </div>
+
+        <!-- Kanban View -->
+        <div v-if="viewMode === 'kanban'">
+            <div class="mt-6 flex gap-4 overflow-x-auto pb-4">
+                <div
+                    v-for="status in sortedStatuses"
+                    :key="status.id"
+                    class="flex w-72 shrink-0 flex-col rounded-lg transition-colors"
+                    :class="dragOverStatusId === status.id ? 'bg-neutral-200' : 'bg-neutral-50'"
+                    @dragover.prevent
+                    @dragenter.prevent="onDragEnter(status.id)"
+                    @dragleave="onDragLeave"
+                    @drop.prevent="onDropStatus($event, status)"
+                >
+                    <div
+                        class="rounded-t-lg px-4 py-3 text-sm font-bold text-white"
+                        :style="{ backgroundColor: status.color }"
+                    >
+                        {{ status.label }} ({{ tasksByStatus(status.id).length }})
+                    </div>
+                    <div class="flex flex-col gap-3 p-3">
+                        <TaskCard
+                            v-for="task in tasksByStatus(status.id)"
+                            :key="task.id"
+                            :task="task"
+                            @click="openTaskEdit(task)"
+                        />
+                        <p
+                            v-if="tasksByStatus(status.id).length === 0"
+                            class="py-4 text-center text-xs text-neutral-400"
+                        >
+                            {{ $t('myTasks.noTasks') }}
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Backlog below kanban -->
+            <div
+                class="mt-8 rounded-lg p-4 transition-colors"
+                :class="dragOverStatusId === 0 ? 'bg-neutral-200' : 'bg-neutral-50'"
+                @dragover.prevent
+                @dragenter.prevent="onDragEnter(0)"
+                @dragleave="onDragLeave"
+                @drop.prevent="onDropBacklog($event)"
+            >
+                <h2 class="text-lg font-bold text-neutral-900">{{ $t('myTasks.backlog') }} ({{ backlogTasks.length }})</h2>
+                <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                    <TaskCard
+                        v-for="task in backlogTasks"
+                        :key="task.id"
+                        :task="task"
+                        @click="openTaskEdit(task)"
+                    />
+                </div>
+                <p
+                    v-if="backlogTasks.length === 0"
+                    class="py-4 text-center text-xs text-neutral-400"
+                >
+                    {{ $t('myTasks.noTasks') }}
+                </p>
+            </div>
+        </div>
+
+        <!-- List View -->
+        <div v-if="viewMode === 'list'" class="mt-6">
+            <div
+                v-for="task in tasks"
+                :key="task.id"
+                class="flex cursor-pointer items-center justify-between gap-2 border-b border-neutral-100 px-2 py-3 transition-colors hover:bg-neutral-50 sm:px-4"
+                @click="openTaskEdit(task)"
+            >
+                <div class="min-w-0 flex-1">
+                    <h4 class="text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
+                    <div class="mt-1 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="tag in task.tags"
+                            :key="tag.id"
+                            class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                            :style="{ backgroundColor: tag.color }"
+                        >
+                            {{ tag.label }}
+                        </span>
+                    </div>
+                </div>
+                <div class="flex items-center gap-3">
+                    <button
+                        class="shrink-0 transition-colors"
+                        :class="isTimerOnTask(task) ? 'text-[#F18619] hover:text-[#d97314]' : 'text-neutral-400 hover:text-primary-500'"
+                        @click.stop="isTimerOnTask(task) ? timerStore.stop() : timerStore.startFromTask(task)"
+                    >
+                        <Icon :name="isTimerOnTask(task) ? 'mdi:stop-circle-outline' : 'mdi:play-circle-outline'" size="20" />
+                    </button>
+                    <span
+                        v-if="task.project && task.number"
+                        class="text-sm font-medium text-primary-500"
+                    >
+                        {{ task.project.code }}-{{ task.number }}
+                    </span>
+                </div>
+            </div>
+            <p
+                v-if="tasks.length === 0 && !isLoading"
+                class="py-8 text-center text-sm text-neutral-400"
+            >
+                {{ $t('myTasks.noTasks') }}
+            </p>
+        </div>
+
+        <!-- TaskModal -->
+        <TaskModal
+            v-model="taskModalOpen"
+            :task="selectedTask"
+            :project-id="selectedTask?.project?.id ?? 0"
+            :statuses="statuses"
+            :efforts="efforts"
+            :priorities="priorities"
+            :tags="tags"
+            :groups="selectedTask?.project?.id ? groups.filter(g => g.project?.id === selectedTask?.project?.id) : groups"
+            :users="users"
+            @saved="onSaved"
+        />
+    </div>
+</template>

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

@@ -0,0 +1,163 @@
+<template>
+    <div>
+        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
+            <div class="flex items-center justify-between">
+                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ project?.name ?? '' }} — {{ $t('archive.title') }}</h1>
+            </div>
+
+            <div class="mt-4">
+                <MalioSelect
+                    v-model="selectedGroupId"
+                    :options="groupFilterOptions"
+                    label="Groupe"
+                    empty-option-label="Tous les groupes"
+                    min-width="w-64"
+                />
+            </div>
+        </div>
+
+        <div>
+            <p v-if="filteredTasks.length === 0" class="text-sm text-neutral-400">
+                {{ $t('archive.empty') }}
+            </p>
+            <div v-else class="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)"
+                >
+                    <div class="flex items-center gap-3">
+                        <span class="text-xs font-bold text-neutral-400">{{ project?.code }}-{{ task.number }}</span>
+                        <span class="text-sm font-semibold text-neutral-900">{{ task.title }}</span>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <span
+                            v-if="task.status"
+                            class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                            :style="{ backgroundColor: task.status.color }"
+                        >
+                            {{ task.status.label }}
+                        </span>
+                        <span
+                            v-if="task.group"
+                            class="rounded-full border px-2 py-0.5 text-xs font-semibold"
+                            :style="{ borderColor: task.group.color, color: task.group.color }"
+                        >
+                            {{ task.group.title }}
+                        </span>
+                        <span
+                            v-if="task.assignee"
+                            class="flex h-5 w-5 items-center justify-center rounded-full bg-primary-500 text-[10px] font-bold text-white"
+                            :title="task.assignee.username"
+                        >
+                            {{ task.assignee.username.substring(0, 2).toUpperCase() }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <TaskModal
+            v-model="taskDrawerOpen"
+            :task="selectedTask"
+            :project-id="projectId"
+            :statuses="statuses"
+            :efforts="efforts"
+            :priorities="priorities"
+            :tags="tags"
+            :groups="groups"
+            :users="users"
+            @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 { TaskTag } from '~/services/dto/task-tag'
+import type { TaskGroup } from '~/services/dto/task-group'
+import type { UserData } from '~/services/dto/user-data'
+import { useProjectService } from '~/services/projects'
+import { useTaskService } from '~/services/tasks'
+import { useTaskStatusService } from '~/services/task-statuses'
+import { useTaskEffortService } from '~/services/task-efforts'
+import { useTaskPriorityService } from '~/services/task-priorities'
+import { useTaskTagService } from '~/services/task-tags'
+import { useTaskGroupService } from '~/services/task-groups'
+import { useUserService } from '~/services/users'
+
+const route = useRoute()
+const projectId = computed(() => Number(route.params.id))
+
+useHead({ title: 'Archives' })
+
+const projectService = useProjectService()
+const taskService = useTaskService()
+const statusService = useTaskStatusService()
+const effortService = useTaskEffortService()
+const priorityService = useTaskPriorityService()
+const tagService = useTaskTagService()
+const groupService = useTaskGroupService()
+const userService = useUserService()
+
+const project = ref<Project | null>(null)
+const archivedTasks = ref<Task[]>([])
+const statuses = ref<TaskStatus[]>([])
+const efforts = ref<TaskEffort[]>([])
+const priorities = ref<TaskPriority[]>([])
+const tags = ref<TaskTag[]>([])
+const groups = ref<TaskGroup[]>([])
+const users = ref<UserData[]>([])
+
+const selectedGroupId = ref<number | null>(null)
+const taskDrawerOpen = ref(false)
+const selectedTask = ref<Task | null>(null)
+
+const groupFilterOptions = computed(() =>
+    groups.value.map(g => ({ label: g.title, value: g.id }))
+)
+
+const filteredTasks = computed(() => {
+    if (!selectedGroupId.value) return archivedTasks.value
+    return archivedTasks.value.filter(t => t.group?.id === selectedGroupId.value)
+})
+
+async function loadData() {
+    const [p, t, s, e, pr, ty, g, u] = await Promise.all([
+        projectService.getById(projectId.value),
+        taskService.getByProjectArchived(projectId.value),
+        statusService.getAll(),
+        effortService.getAll(),
+        priorityService.getAll(),
+        tagService.getAll(),
+        groupService.getByProject(projectId.value),
+        userService.getAll(),
+    ])
+    project.value = p
+    archivedTasks.value = t
+    statuses.value = s
+    efforts.value = e
+    priorities.value = pr
+    tags.value = ty
+    groups.value = g
+    users.value = u
+}
+
+function openTaskEdit(task: Task) {
+    selectedTask.value = task
+    taskDrawerOpen.value = true
+}
+
+async function onSaved() {
+    await loadData()
+}
+
+onMounted(() => {
+    loadData()
+})
+</script>

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

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
+            <div class="flex items-center justify-between">
+                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ project?.name ?? '' }} — Groupes</h1>
+            </div>
+        </div>
+
+        <div>
+            <ProjectGroupTab :project-id="projectId" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Project } from '~/services/dto/project'
+import { useProjectService } from '~/services/projects'
+
+const route = useRoute()
+const projectId = computed(() => Number(route.params.id))
+
+useHead({ title: 'Groupes du projet' })
+
+const projectService = useProjectService()
+const project = ref<Project | null>(null)
+
+async function loadProject() {
+    project.value = await projectService.getById(projectId.value)
+}
+
+onMounted(() => {
+    loadProject()
+})
+</script>

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

@@ -1,31 +1,55 @@
 <template>
     <div>
-        <div class="flex items-center justify-between">
-            <h1 class="text-2xl font-bold text-neutral-900">{{ project?.name ?? '' }}</h1>
-            <div class="flex gap-3">
+        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
+            <div class="flex items-center justify-between gap-3">
+                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ project?.name ?? '' }}</h1>
                 <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"
+                    class="shrink-0 rounded-md bg-primary-500 px-3 py-2 text-xs font-semibold text-white hover:bg-secondary-500 sm:px-4 sm:text-sm"
                     @click="openTaskCreate"
                 >
-                    + Ajouter un ticket
+                    <span class="hidden sm:inline">+ Ajouter un ticket</span>
+                    <span class="sm:hidden">+ Ticket</span>
                 </button>
             </div>
-        </div>
 
-        <div class="mt-4">
-            <MalioSelect
-                v-model="selectedGroupId"
-                :options="groupFilterOptions"
-                label="Groupe"
-                empty-option-label="Tous les groupes"
-                min-width="w-64"
-            />
+            <div class="mt-4 flex flex-wrap gap-3">
+                <MalioSelect
+                    v-model="selectedGroupId"
+                    :options="groupFilterOptions"
+                    label="Groupe"
+                    empty-option-label="Tous les groupes"
+                    min-width="!w-40"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
+                <MalioSelect
+                    v-model="selectedTagId"
+                    :options="tagFilterOptions"
+                    label="Tags"
+                    empty-option-label="Tous les tags"
+                    min-width="!w-40"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
+                <MalioSelect
+                    v-model="selectedAssigneeId"
+                    :options="userFilterOptions"
+                    label="User"
+                    empty-option-label="Tous les users"
+                    min-width="!w-40"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
+                <MalioSelect
+                    v-model="selectedStatusId"
+                    :options="statusFilterOptions"
+                    label="Status"
+                    empty-option-label="Tous les status"
+                    min-width="!w-40"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
+            </div>
         </div>
 
         <!-- Kanban -->
@@ -72,77 +96,30 @@
             @dragleave="onDragLeave"
             @drop.prevent="onDropBacklog($event)"
         >
-            <h2 class="text-lg font-bold text-neutral-900">Backlog</h2>
-            <div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
-                <div
+            <h2 class="text-lg font-bold text-neutral-900">Backlog ({{ backlogTasks.length }})</h2>
+            <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                <TaskCard
                     v-for="task in backlogTasks"
                     :key="task.id"
-                    class="flex cursor-pointer items-center justify-between rounded-lg border border-neutral-200 bg-white px-4 py-3 hover:shadow-sm"
-                    draggable="true"
-                    @dragstart="onBacklogDragStart($event, task)"
-                    @dragend="onBacklogDragEnd"
+                    :task="task"
                     @click="openTaskEdit(task)"
-                >
-                    <span class="text-sm font-semibold text-neutral-900">{{ task.title }}</span>
-                    <div class="flex items-center gap-2">
-                        <span
-                            v-for="type in task.types"
-                            :key="type.id"
-                            class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
-                            :style="{ backgroundColor: type.color }"
-                        >
-                            {{ type.label }}
-                        </span>
-                        <span
-                            v-if="task.priority"
-                            class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
-                            :style="{ backgroundColor: task.priority.color }"
-                        >
-                            {{ task.priority.label }}
-                        </span>
-                        <span
-                            v-if="task.effort"
-                            class="text-sm font-bold text-neutral-700"
-                        >
-                            {{ task.effort.label }}
-                        </span>
-                        <span
-                            v-if="task.assignee"
-                            class="flex h-5 w-5 items-center justify-center rounded-full bg-primary-500 text-[10px] font-bold text-white"
-                            :title="task.assignee.username"
-                        >
-                            {{ task.assignee.username.substring(0, 2).toUpperCase() }}
-                        </span>
-                        <span
-                            v-else
-                            class="flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 text-neutral-400"
-                        >
-                            <Icon name="mdi:account-outline" size="14" />
-                        </span>
-                    </div>
-                </div>
+                />
             </div>
         </div>
 
-        <TaskDrawer
+        <TaskModal
             v-model="taskDrawerOpen"
             :task="selectedTask"
             :project-id="projectId"
             :statuses="statuses"
             :efforts="efforts"
             :priorities="priorities"
-            :types="types"
+            :tags="tags"
             :groups="groups"
             :users="users"
             @saved="onSaved"
         />
 
-        <TaskGroupDrawer
-            v-model="groupDrawerOpen"
-            :group="selectedGroup"
-            :project-id="projectId"
-            @saved="onSaved"
-        />
     </div>
 </template>
 
@@ -152,7 +129,7 @@ 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 { TaskTag } from '~/services/dto/task-tag'
 import type { TaskGroup } from '~/services/dto/task-group'
 import type { UserData } from '~/services/dto/user-data'
 import { useProjectService } from '~/services/projects'
@@ -160,7 +137,7 @@ 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 { useTaskTagService } from '~/services/task-tags'
 import { useTaskGroupService } from '~/services/task-groups'
 import { useUserService } from '~/services/users'
 
@@ -174,7 +151,7 @@ const taskService = useTaskService()
 const statusService = useTaskStatusService()
 const effortService = useTaskEffortService()
 const priorityService = useTaskPriorityService()
-const typeService = useTaskTypeService()
+const tagService = useTaskTagService()
 const groupService = useTaskGroupService()
 const userService = useUserService()
 
@@ -183,26 +160,51 @@ const tasks = ref<Task[]>([])
 const statuses = ref<TaskStatus[]>([])
 const efforts = ref<TaskEffort[]>([])
 const priorities = ref<TaskPriority[]>([])
-const types = ref<TaskType[]>([])
+const tags = ref<TaskTag[]>([])
 const groups = ref<TaskGroup[]>([])
 const users = ref<UserData[]>([])
 const isLoading = ref(true)
 
 const selectedGroupId = ref<number | null>(null)
+const selectedTagId = ref<number | null>(null)
+const selectedAssigneeId = ref<number | null>(null)
+const selectedStatusId = ref<number | null>(null)
 const dragOverStatusId = ref<number | null>(null)
 const dragCounter = ref(0)
 const taskDrawerOpen = ref(false)
 const selectedTask = ref<Task | null>(null)
-const groupDrawerOpen = ref(false)
-const selectedGroup = ref<TaskGroup | null>(null)
 
 const groupFilterOptions = computed(() =>
-    groups.value.map(g => ({ label: g.title, value: g.id }))
+    groups.value.filter(g => !g.archived).map(g => ({ label: g.title, value: g.id }))
+)
+
+const tagFilterOptions = computed(() =>
+    tags.value.map(t => ({ label: t.label, value: t.id }))
+)
+
+const userFilterOptions = computed(() =>
+    users.value.map(u => ({ label: u.username, value: u.id }))
+)
+
+const statusFilterOptions = computed(() =>
+    statuses.value.map(s => ({ label: s.label, value: s.id }))
 )
 
 const filteredTasks = computed(() => {
-    if (!selectedGroupId.value) return tasks.value
-    return tasks.value.filter(t => t.group?.id === selectedGroupId.value)
+    let result = tasks.value.filter(t => !t.archived)
+    if (selectedGroupId.value) {
+        result = result.filter(t => t.group?.id === selectedGroupId.value)
+    }
+    if (selectedTagId.value) {
+        result = result.filter(t => t.tags?.some(tag => tag.id === selectedTagId.value))
+    }
+    if (selectedAssigneeId.value) {
+        result = result.filter(t => t.assignee?.id === selectedAssigneeId.value)
+    }
+    if (selectedStatusId.value) {
+        result = result.filter(t => t.status?.id === selectedStatusId.value)
+    }
+    return result
 })
 
 function tasksByStatus(statusId: number): Task[] {
@@ -222,7 +224,7 @@ async function loadData() {
             statusService.getAll(),
             effortService.getAll(),
             priorityService.getAll(),
-            typeService.getAll(),
+            tagService.getAll(),
             groupService.getByProject(projectId.value),
             userService.getAll(),
         ])
@@ -231,7 +233,7 @@ async function loadData() {
         statuses.value = s
         efforts.value = e
         priorities.value = pr
-        types.value = ty
+        tags.value = ty
         groups.value = g
         users.value = u
     } finally {
@@ -249,11 +251,6 @@ function openTaskEdit(task: Task) {
     taskDrawerOpen.value = true
 }
 
-function openGroupCreate() {
-    selectedGroup.value = null
-    groupDrawerOpen.value = true
-}
-
 function onDragEnter(id: number) {
     dragCounter.value++
     dragOverStatusId.value = id
@@ -272,15 +269,6 @@ function onDrop(event: DragEvent) {
     return Number(event.dataTransfer!.getData('text/plain'))
 }
 
-function onBacklogDragStart(event: DragEvent, task: Task) {
-    event.dataTransfer!.effectAllowed = 'move'
-    event.dataTransfer!.setData('text/plain', String(task.id))
-    ;(event.target as HTMLElement).classList.add('opacity-50')
-}
-
-function onBacklogDragEnd(event: DragEvent) {
-    ;(event.target as HTMLElement).classList.remove('opacity-50')
-}
 
 async function onDropStatus(event: DragEvent, status: TaskStatus) {
     const taskId = onDrop(event)

frontend/pages/projects/index.vue

@@ -1,26 +1,47 @@
 <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 class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
+            <div class="flex flex-wrap items-center justify-between gap-3">
+                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">Projets</h1>
+                <div class="flex items-center gap-2 sm:gap-3">
+                    <button
+                        class="flex items-center gap-1.5 rounded-md px-2 py-2 text-sm font-medium transition sm:px-3"
+                        :class="showArchived
+                            ? 'bg-amber-100 text-amber-700 hover:bg-amber-200'
+                            : 'text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700'"
+                        @click="toggleArchived"
+                    >
+                        <Icon :name="showArchived ? 'mdi:archive-arrow-up-outline' : 'mdi:archive-outline'" size="18" />
+                        <span class="hidden sm:inline">{{ showArchived ? $t('projects.hideArchived') : $t('projects.showArchived') }}</span>
+                    </button>
+                    <button
+                        class="shrink-0 rounded-md bg-primary-500 px-3 py-2 text-xs font-semibold text-white hover:bg-secondary-500 sm:px-4 sm:text-sm"
+                        @click="openCreate"
+                    >
+                        <span class="hidden sm:inline">+ Ajouter un projet</span>
+                        <span class="sm:hidden">+ Projet</span>
+                    </button>
+                </div>
+            </div>
         </div>
 
-        <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        <div class="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-[6px] border border-neutral-200 bg-tertiary-500 p-4 shadow-sm transition hover:shadow-md"
+                :class="{ 'opacity-60': project.archived }"
                 @click="navigateTo(`/projects/${project.id}`)"
             >
                 <div class="flex items-center justify-between">
                     <div class="flex items-center gap-3">
-                        <div class="size-8 shrink-0 rounded-full" :style="{ backgroundColor: project.color }" />
-                        <h3 class="text-md font-bold text-primary-500">{{ project.name }}</h3>
+                        <h3 class="text-md font-bold" :style="{ color: project.color }">{{ project.name }}</h3>
+                        <span
+                            v-if="project.archived"
+                            class="rounded bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-700"
+                        >
+                            Archivé
+                        </span>
                     </div>
                     <button
                         class="p-1 text-neutral-400 hover:text-primary-500"
@@ -38,7 +59,7 @@
                 v-if="projects.length === 0 && !isLoading"
                 class="col-span-full py-12 text-center text-neutral-400"
             >
-                Aucun projet trouvé.
+                {{ showArchived ? 'Aucun projet archivé.' : 'Aucun projet trouvé.' }}
             </div>
         </div>
 
@@ -67,12 +88,13 @@ const clients = ref<Client[]>([])
 const isLoading = ref(true)
 const drawerOpen = ref(false)
 const selectedProject = ref<Project | null>(null)
+const showArchived = ref(false)
 
 async function loadData() {
     isLoading.value = true
     try {
         const [p, c] = await Promise.all([
-            projectService.getAll(),
+            projectService.getAll({ archived: showArchived.value }),
             clientService.getAll(),
         ])
         projects.value = p
@@ -82,6 +104,11 @@ async function loadData() {
     }
 }
 
+function toggleArchived() {
+    showArchived.value = !showArchived.value
+    loadData()
+}
+
 function openCreate() {
     selectedProject.value = null
     drawerOpen.value = true

frontend/pages/time-tracking.vue

@@ -0,0 +1,345 @@
+<template>
+    <div class="flex min-h-0 flex-1 flex-col">
+        <div ref="pageHeaderEl" class="sticky top-8 z-20 flex-shrink-0 bg-white pb-4 sm:top-12">
+            <div class="flex items-center justify-between gap-3">
+                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">Suivi des temps</h1>
+                <button
+                    class="shrink-0 rounded-md bg-primary-500 px-3 py-2 text-xs font-semibold text-white hover:bg-primary-600 transition sm:px-4 sm:text-sm"
+                    @click="openCreateDrawer()"
+                >
+                    <span class="hidden sm:inline">+ Ajouter une Activité</span>
+                    <span class="sm:hidden">+ Activité</span>
+                </button>
+            </div>
+
+            <div class="relative z-30 mt-4 flex flex-wrap items-center gap-3 sm:gap-4">
+                <h2 class="shrink-0 whitespace-nowrap text-lg font-bold text-orange-500">
+                    {{ currentMonthLabel }}
+                </h2>
+
+                <div class="flex shrink-0 items-center gap-1 rounded-md border border-neutral-200">
+                    <button class="px-2 py-1 text-neutral-500 hover:text-neutral-700" @click="navigatePrev">
+                        <Icon name="mdi:chevron-left" size="20" />
+                    </button>
+                    <button
+                        v-for="mode in (['week', 'day', 'list'] as const)"
+                        :key="mode"
+                        class="px-3 py-1 text-sm font-semibold transition"
+                        :class="viewMode === mode ? 'bg-primary-500 text-white rounded' : 'text-neutral-500 hover:text-neutral-700'"
+                        @click="viewMode = mode"
+                    >
+                        {{ mode === 'week' ? 'Semaine' : mode === 'day' ? 'Jour' : 'Liste' }}
+                    </button>
+                    <button class="px-2 py-1 text-neutral-500 hover:text-neutral-700" @click="navigateNext">
+                        <Icon name="mdi:chevron-right" size="20" />
+                    </button>
+                </div>
+
+                <div class="[&>div]:!mt-0">
+                    <MalioSelect
+                        v-model="selectedUserId"
+                        :options="userOptions"
+                        min-width="!w-36 sm:!w-44"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                        label="User"
+                        empty-option-label="User"
+                    />
+                </div>
+
+                <div class="[&>div]:!mt-0">
+                    <MalioSelect
+                        v-model="selectedProjectId"
+                        :options="projectOptions"
+                        empty-option-label="Tous"
+                        label="Projet"
+                        min-width="!w-36 sm:!w-44"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                </div>
+
+                <div class="[&>div]:!mt-0">
+                    <MalioSelect
+                        v-model="selectedTagId"
+                        :options="tagOptions"
+                        empty-option-label="Tous"
+                        label="Tag"
+                        min-width="!w-36 sm:!w-44"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <div class="mt-4 -mb-24 min-h-0 flex-1">
+            <TimeEntryList
+                v-if="viewMode === 'list'"
+                :entries="filteredEntries"
+                @edit-entry="openEditDrawer"
+                @delete-entry="onDelete"
+            />
+            <TimeTrackingCalendar
+                v-else
+                :entries="filteredEntries"
+                :start-date="startDate"
+                :view-mode="viewMode"
+                :sticky-offset="pageHeaderHeight"
+                @edit-entry="openEditDrawer"
+                @create-entry="openCreateDrawer"
+                @move-entry="onMoveEntry"
+                @resize-entry="onResizeEntry"
+                @contextmenu="onContextMenu"
+            />
+        </div>
+
+        <TimeEntryDrawer
+            v-model="drawerOpen"
+            :entry="editingEntry"
+            :prefill-started-at="prefillStartedAt"
+            :users="users"
+            :projects="projects"
+            :tags="tags"
+            @saved="loadEntries"
+        />
+
+        <TimeEntryContextMenu
+            :visible="contextMenu.visible"
+            :x="contextMenu.x"
+            :y="contextMenu.y"
+            :entry="contextMenu.entry"
+            :can-paste="!!clipboard"
+            @close="contextMenu.visible = false"
+            @copy="onCopy"
+            @paste="onPaste"
+            @delete="onDelete"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TimeEntry } from '~/services/dto/time-entry'
+import type { UserData } from '~/services/dto/user-data'
+import type { Project } from '~/services/dto/project'
+import type { TaskTag } from '~/services/dto/task-tag'
+import { useTimeEntryService } from '~/services/time-entries'
+import { extractHydraMembers } from '~/utils/api'
+
+useHead({ title: 'Suivi des temps' })
+
+const authStore = useAuthStore()
+const timeEntryService = useTimeEntryService()
+
+const viewMode = ref<'week' | 'day' | 'list'>('week')
+const startDate = ref(getMonday(new Date()))
+const selectedUserId = ref<number | null>(authStore.user?.id ?? null)
+const selectedTagId = ref<number | null>(null)
+const selectedProjectId = ref<number | null>(null)
+
+const entries = ref<TimeEntry[]>([])
+const users = ref<UserData[]>([])
+const projects = ref<Project[]>([])
+const tags = ref<TaskTag[]>([])
+
+const drawerOpen = ref(false)
+const editingEntry = ref<TimeEntry | null>(null)
+const prefillStartedAt = ref<string | null>(null)
+const clipboard = ref<TimeEntry | null>(null)
+const pageHeaderEl = ref<HTMLElement | null>(null)
+const pageHeaderHeight = ref(0)
+
+const contextMenu = reactive({
+    visible: false,
+    x: 0,
+    y: 0,
+    entry: null as TimeEntry | null,
+    targetDate: null as string | null,
+})
+
+const currentMonthLabel = computed(() => {
+    const d = startDate.value
+    const months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
+    return `${months[d.getMonth()]} ${d.getFullYear()}`
+})
+
+const userOptions = computed(() =>
+    users.value.map(u => ({ label: u.username, value: u.id }))
+)
+
+const projectOptions = computed(() =>
+    projects.value.map(p => ({ label: p.name, value: p.id }))
+)
+
+const tagOptions = computed(() =>
+    tags.value.map(t => ({ label: t.label, value: t.id }))
+)
+
+let pageHeaderResizeObserver: ResizeObserver | null = null
+
+function updatePageHeaderHeight() {
+    pageHeaderHeight.value = pageHeaderEl.value?.offsetHeight ?? 0
+}
+
+const filteredEntries = computed(() => {
+    let result = entries.value
+    if (selectedProjectId.value) {
+        result = result.filter((e) => e.project?.id === selectedProjectId.value)
+    }
+    if (selectedTagId.value) {
+        result = result.filter((e) => e.tags.some((t) => t.id === selectedTagId.value))
+    }
+    return result
+})
+
+function getMonday(d: Date): Date {
+    const date = new Date(d)
+    const day = date.getDay()
+    const diff = date.getDate() - day + (day === 0 ? -6 : 1)
+    date.setDate(diff)
+    date.setHours(0, 0, 0, 0)
+    return date
+}
+
+function navigatePrev() {
+    const d = new Date(startDate.value)
+    d.setDate(d.getDate() - (viewMode.value === 'day' ? 1 : 7))
+    startDate.value = viewMode.value === 'day' ? d : getMonday(d)
+    loadEntries()
+}
+
+function navigateNext() {
+    const d = new Date(startDate.value)
+    d.setDate(d.getDate() + (viewMode.value === 'day' ? 1 : 7))
+    startDate.value = viewMode.value === 'day' ? d : getMonday(d)
+    loadEntries()
+}
+
+function openCreateDrawer(startedAt?: string) {
+    editingEntry.value = null
+    prefillStartedAt.value = startedAt ?? null
+    drawerOpen.value = true
+}
+
+function openEditDrawer(entry: TimeEntry) {
+    editingEntry.value = entry
+    prefillStartedAt.value = null
+    drawerOpen.value = true
+}
+
+async function onMoveEntry(entry: TimeEntry, newStartedAt: string, newStoppedAt: string) {
+    // Optimistic update — instant visual feedback
+    const idx = entries.value.findIndex((e) => e.id === entry.id)
+    if (idx === -1) return
+    const original = entries.value[idx]!
+    entries.value[idx] = { ...original, startedAt: newStartedAt, stoppedAt: newStoppedAt }
+
+    try {
+        await timeEntryService.update(entry.id, { startedAt: newStartedAt, stoppedAt: newStoppedAt })
+    } catch {
+        entries.value[idx] = original
+    }
+}
+
+async function onResizeEntry(entry: TimeEntry, newStartedAt: string, newStoppedAt: string) {
+    // Optimistic update — instant visual feedback
+    const idx = entries.value.findIndex((e) => e.id === entry.id)
+    if (idx === -1) return
+    const original = entries.value[idx]!
+    entries.value[idx] = { ...original, startedAt: newStartedAt, stoppedAt: newStoppedAt }
+
+    try {
+        await timeEntryService.update(entry.id, { startedAt: newStartedAt, stoppedAt: newStoppedAt })
+    } catch {
+        entries.value[idx] = original
+    }
+}
+
+function onContextMenu(event: MouseEvent, entry: TimeEntry | null) {
+    contextMenu.visible = true
+    contextMenu.x = event.clientX
+    contextMenu.y = event.clientY
+    contextMenu.entry = entry
+}
+
+function onCopy(entry: TimeEntry) {
+    clipboard.value = entry
+}
+
+async function onPaste() {
+    if (!clipboard.value) return
+    const { create } = useTimeEntryService()
+    await create({
+        title: clipboard.value.title ?? undefined,
+        description: clipboard.value.description ?? undefined,
+        startedAt: clipboard.value.startedAt,
+        stoppedAt: clipboard.value.stoppedAt ?? undefined,
+        user: `/api/users/${selectedUserId.value}`,
+        project: clipboard.value.project ? `/api/projects/${clipboard.value.project.id}` : null,
+        tags: clipboard.value.tags.map((t) => `/api/task_tags/${t.id}`),
+    })
+    await loadEntries()
+}
+
+onMounted(() => {
+    updatePageHeaderHeight()
+
+    if (!pageHeaderEl.value || typeof ResizeObserver === 'undefined') {
+        return
+    }
+
+    pageHeaderResizeObserver = new ResizeObserver(() => {
+        updatePageHeaderHeight()
+    })
+    pageHeaderResizeObserver.observe(pageHeaderEl.value)
+})
+
+onBeforeUnmount(() => {
+    pageHeaderResizeObserver?.disconnect()
+})
+
+
+async function onDelete(entry: TimeEntry) {
+    await timeEntryService.remove(entry.id)
+    await loadEntries()
+}
+
+async function loadEntries() {
+    const end = new Date(startDate.value)
+    end.setDate(end.getDate() + (viewMode.value === 'day' ? 1 : 7))
+
+    entries.value = await timeEntryService.getByDateRange({
+        after: startDate.value.toISOString(),
+        before: end.toISOString(),
+        user: selectedUserId.value ?? undefined,
+    })
+}
+
+async function loadReferenceData() {
+    const api = useApi()
+
+    const [usersData, projectsData, typesData] = await Promise.all([
+        api.get<any>('/users'),
+        api.get<any>('/projects'),
+        api.get<any>('/task_tags'),
+    ])
+
+    users.value = extractHydraMembers(usersData)
+    projects.value = extractHydraMembers(projectsData)
+    tags.value = extractHydraMembers(typesData)
+}
+
+onMounted(async () => {
+    await loadReferenceData()
+    await loadEntries()
+})
+
+watch(viewMode, () => {
+    startDate.value = viewMode.value === 'day' ? startDate.value : getMonday(startDate.value)
+    loadEntries()
+})
+
+watch(selectedUserId, () => {
+    loadEntries()
+})
+</script>

frontend/plugins/chartjs.client.ts

@@ -0,0 +1,28 @@
+import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    ArcElement,
+    BarElement,
+    LineElement,
+    PointElement,
+    CategoryScale,
+    LinearScale,
+    Filler,
+} from 'chart.js'
+
+export default defineNuxtPlugin(() => {
+    ChartJS.register(
+        Title,
+        Tooltip,
+        Legend,
+        ArcElement,
+        BarElement,
+        LineElement,
+        PointElement,
+        CategoryScale,
+        LinearScale,
+        Filler,
+    )
+})

frontend/services/bookstack.ts

@@ -0,0 +1,66 @@
+import type {
+    BookStackSettings,
+    BookStackSettingsWrite,
+    BookStackTestResult,
+    BookStackShelf,
+    BookStackLink,
+    BookStackLinkCreate,
+    BookStackSearchResult,
+} from './dto/bookstack'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+export function useBookStackService() {
+    const api = useApi()
+
+    async function getSettings(): Promise<BookStackSettings> {
+        return api.get<BookStackSettings>('/settings/bookstack')
+    }
+
+    async function saveSettings(payload: BookStackSettingsWrite): Promise<BookStackSettings> {
+        return api.put<BookStackSettings>('/settings/bookstack', payload as Record<string, unknown>, {
+            toastSuccessKey: 'bookstack.settings.saved',
+        })
+    }
+
+    async function testConnection(): Promise<BookStackTestResult> {
+        return api.post<BookStackTestResult>('/settings/bookstack/test')
+    }
+
+    async function listShelves(): Promise<BookStackShelf[]> {
+        const data = await api.get<HydraCollection<BookStackShelf>>('/bookstack/shelves')
+        return extractHydraMembers(data)
+    }
+
+    async function getLinks(taskId: number): Promise<BookStackLink[]> {
+        const data = await api.get<HydraCollection<BookStackLink>>(`/tasks/${taskId}/bookstack/links`)
+        return extractHydraMembers(data)
+    }
+
+    async function addLink(taskId: number, payload: BookStackLinkCreate): Promise<BookStackLink> {
+        return api.post<BookStackLink>(`/tasks/${taskId}/bookstack/links`, payload as Record<string, unknown>)
+    }
+
+    async function removeLink(taskId: number, linkId: number): Promise<void> {
+        await api.delete(`/tasks/${taskId}/bookstack/links/${linkId}`)
+    }
+
+    async function search(taskId: number, query: string): Promise<BookStackSearchResult[]> {
+        const data = await api.get<HydraCollection<BookStackSearchResult>>(
+            `/tasks/${taskId}/bookstack/search`,
+            { q: query },
+        )
+        return extractHydraMembers(data)
+    }
+
+    return {
+        getSettings,
+        saveSettings,
+        testConnection,
+        listShelves,
+        getLinks,
+        addLink,
+        removeLink,
+        search,
+    }
+}

frontend/services/dto/bookstack.ts

@@ -0,0 +1,42 @@
+export type BookStackSettings = {
+    url: string | null
+    hasToken: boolean
+}
+
+export type BookStackSettingsWrite = {
+    url: string | null
+    tokenId: string | null
+    tokenSecret: string | null
+}
+
+export type BookStackTestResult = {
+    success: boolean
+}
+
+export type BookStackShelf = {
+    id: number
+    name: string
+}
+
+export type BookStackLink = {
+    id: number
+    bookstackId: number
+    bookstackType: 'page' | 'book'
+    title: string
+    url: string
+    createdAt: string
+}
+
+export type BookStackLinkCreate = {
+    bookstackId: number
+    bookstackType: 'page' | 'book'
+    title: string
+    url: string
+}
+
+export type BookStackSearchResult = {
+    id: number
+    type: 'page' | 'book'
+    name: string
+    url: string
+}

frontend/services/dto/gitea.ts

@@ -0,0 +1,57 @@
+export type GiteaSettings = {
+    url: string | null
+    hasToken: boolean
+}
+
+export type GiteaSettingsWrite = {
+    url: string | null
+    token: string | null
+}
+
+export type GiteaRepository = {
+    fullName: string
+    name: string
+    owner: string
+}
+
+export type GiteaBranch = {
+    name: string
+    commits: GiteaCommit[]
+}
+
+export type GiteaCommit = {
+    sha: string
+    message: string
+    author: string
+    date: string
+}
+
+export type GiteaBranchCreate = {
+    type: string
+    baseBranch: string
+}
+
+export type GiteaPullRequest = {
+    number: number
+    title: string
+    state: string
+    merged: boolean
+    headBranch: string
+    author: string
+    url: string
+    ciStatuses: GiteaCiStatus[]
+}
+
+export type GiteaCiStatus = {
+    context: string
+    status: string
+    target_url: string
+}
+
+export type GiteaBranchName = {
+    name: string
+}
+
+export type GiteaTestResult = {
+    success: boolean
+}

frontend/services/dto/project.ts

@@ -3,15 +3,27 @@ import type { Client } from './client'
 export type Project = {
     id: number
     '@id'?: string
+    code: string
     name: string
     description: string | null
     color: string
     client: Client | null
+    giteaOwner: string | null
+    giteaRepo: string | null
+    bookstackShelfId: number | null
+    bookstackShelfName: string | null
+    archived: boolean
 }
 
 export type ProjectWrite = {
+    code?: string
     name: string
     description: string | null
     color: string
     client: string | null  // IRI : "/api/clients/1" ou null
+    giteaOwner?: string | null
+    giteaRepo?: string | null
+    bookstackShelfId?: number | null
+    bookstackShelfName?: string | null
+    archived?: boolean
 }

frontend/services/dto/task-document.ts

@@ -0,0 +1,13 @@
+import type { UserData } from './user-data'
+
+export type TaskDocument = {
+    '@id'?: string
+    id: number
+    task: string
+    originalName: string
+    fileName: string
+    mimeType: string
+    size: number
+    createdAt: string
+    uploadedBy: UserData | null
+}

frontend/services/dto/task-group.ts

@@ -7,6 +7,7 @@ export type TaskGroup = {
     description: string | null
     color: string
     project: Project | null
+    archived: boolean
 }
 
 export type TaskGroupWrite = {
@@ -14,4 +15,5 @@ export type TaskGroupWrite = {
     description: string | null
     color: string
     project: string
+    archived?: boolean
 }

frontend/services/dto/task-status.ts

@@ -4,10 +4,12 @@ export type TaskStatus = {
     label: string
     color: string
     position: number
+    isFinal: boolean
 }
 
 export type TaskStatusWrite = {
     label: string
     color: string
     position: number
+    isFinal: boolean
 }

frontend/services/dto/task-tag.ts

@@ -1,11 +1,11 @@
-export type TaskType = {
+export type TaskTag = {
     id: number
     '@id'?: string
     label: string
     color: string
 }
 
-export type TaskTypeWrite = {
+export type TaskTagWrite = {
     label: string
     color: string
 }

frontend/services/dto/task.ts

@@ -1,13 +1,16 @@
 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 { TaskTag } from './task-tag'
 import type { TaskGroup } from './task-group'
 import type { UserData } from './user-data'
+import type { Project } from './project'
+import type { TaskDocument } from './task-document'
 
 export type Task = {
     id: number
     '@id'?: string
+    number: number
     title: string
     description: string | null
     status: TaskStatus | null
@@ -15,7 +18,10 @@ export type Task = {
     priority: TaskPriority | null
     assignee: UserData | null
     group: TaskGroup | null
-    types: TaskType[]
+    project: Project | null
+    tags: TaskTag[]
+    documents: TaskDocument[]
+    archived: boolean
 }
 
 export type TaskWrite = {
@@ -27,5 +33,6 @@ export type TaskWrite = {
     assignee: string | null
     group: string | null
     project: string
-    types: string[]
+    tags: string[]
+    archived?: boolean
 }

frontend/services/dto/time-entry.ts

@@ -0,0 +1,28 @@
+import type { UserData } from './user-data'
+import type { Project } from './project'
+import type { Task } from './task'
+import type { TaskTag } from './task-tag'
+
+export type TimeEntry = {
+    id: number
+    '@id'?: string
+    title: string | null
+    description: string | null
+    startedAt: string
+    stoppedAt: string | null
+    user: UserData
+    project: Project | null
+    task: Task | null
+    tags: TaskTag[]
+}
+
+export type TimeEntryWrite = {
+    title?: string | null
+    description?: string | null
+    startedAt: string
+    stoppedAt?: string | null
+    user: string
+    project?: string | null
+    task?: string | null
+    tags?: string[]
+}

frontend/services/gitea.ts

@@ -0,0 +1,66 @@
+import type {
+    GiteaSettings,
+    GiteaSettingsWrite,
+    GiteaRepository,
+    GiteaBranch,
+    GiteaBranchCreate,
+    GiteaPullRequest,
+    GiteaBranchName,
+    GiteaTestResult,
+} from './dto/gitea'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+export function useGiteaService() {
+    const api = useApi()
+
+    async function getSettings(): Promise<GiteaSettings> {
+        return api.get<GiteaSettings>('/settings/gitea')
+    }
+
+    async function saveSettings(payload: GiteaSettingsWrite): Promise<GiteaSettings> {
+        return api.put<GiteaSettings>('/settings/gitea', payload as Record<string, unknown>, {
+            toastSuccessKey: 'gitea.settings.saved',
+        })
+    }
+
+    async function testConnection(): Promise<GiteaTestResult> {
+        return api.post<GiteaTestResult>('/settings/gitea/test')
+    }
+
+    async function listRepositories(): Promise<GiteaRepository[]> {
+        const data = await api.get<HydraCollection<GiteaRepository>>('/gitea/repositories')
+        return extractHydraMembers(data)
+    }
+
+    async function listBranches(taskId: number): Promise<GiteaBranch[]> {
+        const data = await api.get<HydraCollection<GiteaBranch>>(`/tasks/${taskId}/gitea/branches`)
+        return extractHydraMembers(data)
+    }
+
+    async function createBranch(taskId: number, payload: GiteaBranchCreate): Promise<GiteaBranch> {
+        return api.post<GiteaBranch>(`/tasks/${taskId}/gitea/branches`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'gitea.branch.created',
+        })
+    }
+
+    async function listPullRequests(taskId: number): Promise<GiteaPullRequest[]> {
+        const data = await api.get<HydraCollection<GiteaPullRequest>>(`/tasks/${taskId}/gitea/pull-requests`)
+        return extractHydraMembers(data)
+    }
+
+    async function getBranchName(taskId: number, type: string): Promise<GiteaBranchName> {
+        return api.get<GiteaBranchName>(`/tasks/${taskId}/gitea/branch-name/${type}`)
+    }
+
+    return {
+        getSettings,
+        saveSettings,
+        testConnection,
+        listRepositories,
+        listBranches,
+        createBranch,
+        listPullRequests,
+        getBranchName,
+    }
+}

frontend/services/projects.ts

@@ -5,8 +5,9 @@ import { extractHydraMembers } from '~/utils/api'
 export function useProjectService() {
     const api = useApi()
 
-    async function getAll(): Promise<Project[]> {
-        const data = await api.get<HydraCollection<Project>>('/projects')
+    async function getAll(params?: { archived?: boolean }): Promise<Project[]> {
+        const query = params?.archived !== undefined ? `?archived=${params.archived}` : ''
+        const data = await api.get<HydraCollection<Project>>(`/projects${query}`)
         return extractHydraMembers(data)
     }
 
@@ -20,9 +21,9 @@ export function useProjectService() {
         })
     }
 
-    async function update(id: number, payload: Partial<ProjectWrite>): Promise<Project> {
+    async function update(id: number, payload: Partial<ProjectWrite>, options?: { toastSuccessKey?: string }): Promise<Project> {
         return api.patch<Project>(`/projects/${id}`, payload as Record<string, unknown>, {
-            toastSuccessKey: 'projects.updated',
+            toastSuccessKey: options?.toastSuccessKey ?? 'projects.updated',
         })
     }
 

frontend/services/task-documents.ts

@@ -0,0 +1,42 @@
+import type { TaskDocument } from './dto/task-document'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+import { $fetch } from 'ofetch'
+
+export function useTaskDocumentService() {
+    const api = useApi()
+    const config = useRuntimeConfig()
+    const baseURL = config.public.apiBase || '/api'
+
+    async function getByTask(taskId: number): Promise<TaskDocument[]> {
+        const data = await api.get<HydraCollection<TaskDocument>>('/task_documents', {
+            task: `/api/tasks/${taskId}`,
+        })
+        return extractHydraMembers(data)
+    }
+
+    async function upload(taskId: number, file: File): Promise<TaskDocument> {
+        const formData = new FormData()
+        formData.append('file', file)
+        formData.append('task', `/api/tasks/${taskId}`)
+
+        return await $fetch<TaskDocument>(`${baseURL}/task_documents`, {
+            method: 'POST',
+            body: formData,
+            credentials: 'include',
+            // Do NOT set Content-Type — browser sets multipart boundary automatically
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/task_documents/${id}`, {}, {
+            toastSuccessKey: 'taskDocuments.deleted',
+        })
+    }
+
+    function getDownloadUrl(id: number): string {
+        return `${baseURL}/task_documents/${id}/download`
+    }
+
+    return { getByTask, upload, remove, getDownloadUrl }
+}

frontend/services/task-tags.ts

@@ -0,0 +1,32 @@
+import type { TaskTag, TaskTagWrite } from './dto/task-tag'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+export function useTaskTagService() {
+    const api = useApi()
+
+    async function getAll(): Promise<TaskTag[]> {
+        const data = await api.get<HydraCollection<TaskTag>>('/task_tags')
+        return extractHydraMembers(data)
+    }
+
+    async function create(payload: TaskTagWrite): Promise<TaskTag> {
+        return api.post<TaskTag>('/task_tags', payload as Record<string, unknown>, {
+            toastSuccessKey: 'taskTags.created',
+        })
+    }
+
+    async function update(id: number, payload: Partial<TaskTagWrite>): Promise<TaskTag> {
+        return api.patch<TaskTag>(`/task_tags/${id}`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'taskTags.updated',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/task_tags/${id}`, {}, {
+            toastSuccessKey: 'taskTags.deleted',
+        })
+    }
+
+    return { getAll, create, update, remove }
+}

frontend/services/task-types.ts

@@ -1,32 +0,0 @@
-import type { TaskType, TaskTypeWrite } from './dto/task-type'
-import type { HydraCollection } from '~/utils/api'
-import { extractHydraMembers } from '~/utils/api'
-
-export function useTaskTypeService() {
-    const api = useApi()
-
-    async function getAll(): Promise<TaskType[]> {
-        const data = await api.get<HydraCollection<TaskType>>('/task_types')
-        return extractHydraMembers(data)
-    }
-
-    async function create(payload: TaskTypeWrite): Promise<TaskType> {
-        return api.post<TaskType>('/task_types', payload as Record<string, unknown>, {
-            toastSuccessKey: 'taskTypes.created',
-        })
-    }
-
-    async function update(id: number, payload: Partial<TaskTypeWrite>): Promise<TaskType> {
-        return api.patch<TaskType>(`/task_types/${id}`, payload as Record<string, unknown>, {
-            toastSuccessKey: 'taskTypes.updated',
-        })
-    }
-
-    async function remove(id: number): Promise<void> {
-        await api.delete(`/task_types/${id}`, {}, {
-            toastSuccessKey: 'taskTypes.deleted',
-        })
-    }
-
-    return { getAll, create, update, remove }
-}

frontend/services/tasks.ts

@@ -5,13 +5,32 @@ import { extractHydraMembers } from '~/utils/api'
 export function useTaskService() {
     const api = useApi()
 
+    async function getAll(): Promise<Task[]> {
+        const data = await api.get<HydraCollection<Task>>('/tasks')
+        return extractHydraMembers(data)
+    }
+
     async function getByProject(projectId: number): Promise<Task[]> {
         const data = await api.get<HydraCollection<Task>>('/tasks', {
             project: `/api/projects/${projectId}`,
+            archived: false,
         })
         return extractHydraMembers(data)
     }
 
+    async function getByProjectArchived(projectId: number): Promise<Task[]> {
+        const data = await api.get<HydraCollection<Task>>('/tasks', {
+            project: `/api/projects/${projectId}`,
+            archived: true,
+        })
+        return extractHydraMembers(data)
+    }
+
+    async function getFiltered(params: Record<string, string | number | boolean | string[]>): Promise<Task[]> {
+        const data = await api.get<HydraCollection<Task>>('/tasks', params as Record<string, unknown>)
+        return extractHydraMembers(data)
+    }
+
     async function create(payload: TaskWrite): Promise<Task> {
         return api.post<Task>('/tasks', payload as Record<string, unknown>, {
             toastSuccessKey: 'tasks.created',
@@ -30,5 +49,5 @@ export function useTaskService() {
         })
     }
 
-    return { getByProject, create, update, remove }
+    return { getAll, getByProject, getByProjectArchived, getFiltered, create, update, remove }
 }