chore: bump version to v0.1.69

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Co-authored-by: gitea-actions <gitea-actions@local>
Reviewed-on: #11
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

.claude/settings.local.json

@@ -18,7 +18,13 @@
       "Read(//home/m-tristan/.nix-profile/**)",
       "Read(//home/m-tristan/.local/bin/**)",
       "Bash(env)",
-      "Bash(ls /home/m-tristan/workspace/SIRH/docker* /home/m-tristan/workspace/SIRH/Makefile 2>/dev/null; cat /home/m-tristan/workspace/SIRH/Makefile 2>/dev/null | grep -E \"\\(phpunit|test|php\\)\" | head -20)"
+      "Bash(ls /home/m-tristan/workspace/SIRH/docker* /home/m-tristan/workspace/SIRH/Makefile 2>/dev/null; cat /home/m-tristan/workspace/SIRH/Makefile 2>/dev/null | grep -E \"\\(phpunit|test|php\\)\" | head -20)",
+      "Bash(which python3:*)",
+      "Bash(sudo apt-get:*)",
+      "Bash(npx xlsx-cli:*)",
+      "Bash(cat /home/m-tristan/.claude/projects/-home-m-tristan-workspace-SIRH/4b53d9d7-d8ae-451f-a5cc-5d4fd55f2eef/tool-results/toolu_019hng9Cu2m9wiNACuC2Wm3F.json | python3 -c \"import json,sys; data=json.load\\(sys.stdin\\); print\\(data[0]['text']\\)\" 2>/dev/null | head -2000)",
+      "Bash(pip3 install:*)",
+      "Bash(find:*)"
     ]
   }
 }

.dockerignore

@@ -0,0 +1,23 @@
+.git
+.gitea
+.env.local
+.env.test
+docker/
+deploy/docker/docker-compose.prod.yml
+deploy/docker/deploy.sh
+deploy/docker/.env.example
+frontend/node_modules
+frontend/.nuxt
+frontend/.output
+var/
+LOG/
+docs/
+doc/
+tests/
+*.sql
+*.xlsx
+*.png
+*.md
+!composer.lock
+!symfony.lock
+!frontend/package-lock.json

.env

@@ -36,6 +36,10 @@ DEFAULT_URI=http://localhost
 DATABASE_URL="postgresql://app:!ChangeMe!@127.0.0.1:5432/app?serverVersion=16&charset=utf8"
 ###< doctrine/doctrine-bundle ###
 
+###> app ###
+RTT_START_DATE=2026-02-23
+###< app ###
+
 ###> nelmio/cors-bundle ###
 CORS_ALLOW_ORIGIN='^https?://(localhost|127\.0\.0\.1)(:[0-9]+)?$'
 ###< nelmio/cors-bundle ###

.gitea/workflows/build-docker.yml

@@ -0,0 +1,30 @@
+name: Build & Push Docker Image
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Login to Gitea Registry
+        run: |
+          echo "${{ secrets.REGISTRY_TOKEN }}" | docker login gitea.malio.fr -u "${{ gitea.repository_owner }}" --password-stdin
+
+      - name: Build Docker image
+        run: |
+          docker build \
+            -f deploy/docker/Dockerfile.prod \
+            -t gitea.malio.fr/malio-dev/sirh:${{ github.ref_name }} \
+            -t gitea.malio.fr/malio-dev/sirh:latest \
+            .
+
+      - name: Push Docker image
+        run: |
+          docker push gitea.malio.fr/malio-dev/sirh:${{ github.ref_name }}
+          docker push gitea.malio.fr/malio-dev/sirh:latest

.gitea/workflows/release-artefact.yml

@@ -1,65 +0,0 @@
-name: Build Release Artefact
-
-on:
-  push:
-    tags:
-      - "v*"
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          persist-credentials: false
-
-      - name: Setup PHP
-        uses: shivammathur/setup-php@v2
-        with:
-          php-version: "8.4"
-          extensions: mbstring, intl, pdo_pgsql, xml, curl, zip, gd
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: "lts/*"
-
-      - name: Install backend deps (prod)
-        env:
-          APP_ENV: prod
-          APP_DEBUG: "0"
-        run: composer install --no-dev --optimize-autoloader --no-interaction --no-scripts
-
-      - name: Build frontend (static)
-        run: |
-          cd frontend
-          npm ci
-          CI=1 NUXT_TELEMETRY_DISABLED=1 NUXT_PUBLIC_API_BASE=/api NUXT_PUBLIC_APP_BASE=/ npm run generate
-          test -f .output/public/index.html
-
-      - name: Build artefact
-        shell: bash
-        run: |
-          set -euo pipefail
-          mkdir -p release
-          tar -czf "release/sirh-${GITHUB_REF_NAME}.tar.gz" \
-            bin \
-            config \
-            migrations \
-            public \
-            src \
-            templates \
-            vendor \
-            composer.json \
-            composer.lock \
-            symfony.lock \
-            frontend/.output
-
-      - name: Create Release
-        uses: softprops/action-gh-release@v2
-        with:
-          files: release/sirh-${{ github.ref_name }}.tar.gz
-        env:
-          GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }}

.idea/SIRH.iml

@@ -154,6 +154,8 @@
       <excludeFolder url="file://$MODULE_DIR$/var" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/data-fixtures" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/doctrine-fixtures-bundle" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/symfony/mime" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/symfony/polyfill-intl-idn" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />

.idea/data_source_mapping.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="DataSourcePerFileMappings">
-    <file url="file://$APPLICATION_CONFIG_DIR$/consoles/db/9cad43df-2147-4989-b7a4-443067034884/console_3.sql" value="9cad43df-2147-4989-b7a4-443067034884" />
-  </component>
-</project>

.idea/php.xml

@@ -155,6 +155,8 @@
       <path value="$PROJECT_DIR$/vendor/symfony/monolog-bundle" />
       <path value="$PROJECT_DIR$/vendor/doctrine/doctrine-fixtures-bundle" />
       <path value="$PROJECT_DIR$/vendor/doctrine/data-fixtures" />
+      <path value="$PROJECT_DIR$/vendor/symfony/mime" />
+      <path value="$PROJECT_DIR$/vendor/symfony/polyfill-intl-idn" />
     </include_path>
   </component>
   <component name="PhpProjectSharedConfiguration" php_language_level="8.4" />

CLAUDE.md

@@ -0,0 +1,90 @@
+# SIRH
+
+## Mandatory Rules
+- Any functional change MUST update `doc/` in the same intervention
+- At the end of every feature addition or functional modification, update this CLAUDE.md to reflect new patterns, rules, or conventions introduced
+
+## Commands
+- `make start` — start Docker stack
+- `make test` — run backend tests (PHPUnit)
+- `make dev-nuxt` — dev frontend
+- `cd frontend && npm run build` — build frontend
+- `php bin/console cache:clear && php bin/console cache:warmup` — clear cache after deploy
+
+## Stack
+- Backend: Symfony + API Platform + Doctrine ORM
+- Frontend: Nuxt 4 + Vue 3 + TypeScript + Tailwind CSS
+
+## Project Structure
+- `src/` — Symfony domain, API resources, state providers/processors, services
+- `frontend/` — Nuxt app (pages, components, composables, services)
+- `migrations/` — Doctrine migrations (always include working `down()`)
+- `doc/` — functional rules and business documentation
+
+## Functional Rules
+- Reference: `doc/functional-rules.md` (mandatory reading before any business logic change)
+- Complementary: `doc/leave-rollover.md`, `doc/rtt-rollover.md`
+
+## Domain Model
+- Contracts: `trackingMode` (TIME=hours, PRESENCE=half-days), `weeklyHours`
+- Contract types: FORFAIT, THIRTY_FIVE_HOURS, THIRTY_NINE_HOURS, INTERIM, CUSTOM
+- Contract nature (per period): CDI, CDD, INTERIM
+- Employee contract history: `employee_contract_periods`, resolved by `EmployeeContractResolver`
+- Absences: stored per day (auto-split), AM/PM/full day, clear corresponding hour slots
+- Absences with `countAsWorkedHours=true`: credit minutes (TIME) or nothing (PRESENCE)
+- Driver periods (`isDriver=true` on `EmployeeContractPeriod`): separate screen `/driver-hours`, uses `dayHoursMinutes`/`nightHoursMinutes` + meal/overnight flags on `WorkHour`
+
+## Validation Rules
+- `isValid` (RH): locks line for everyone (admin can only untoggle validation)
+- `isSiteValid` (site manager): locks for non-admin, admin can still edit
+- Any real modification resets both `isSiteValid=false` and `isValid=false`
+- No-op saves preserve existing validations
+
+## Overtime Rules
+- Contracts <= 35h: +25% from 35h to 43h, +50% beyond
+- Contracts >= 39h: +25% from 39h to 43h, +50% beyond
+- CUSTOM contracts (weeklyHours ≠ 35 and ≠ 39, not INTERIM/FORFAIT): reference = actual contractual hours, no 25%/50% bonuses (1h overtime = 1h recovery), deficit doesn't impact balance
+- INTERIM: no overtime bonuses, no recovery time
+- Driver contracts: RTT uses `dayHoursMinutes + nightHoursMinutes + workshopHoursMinutes` instead of morning/afternoon/evening time ranges
+- FORFAIT weekend/holiday bonus: each weekend or public holiday day worked gives bonus leave (full day if morning+afternoon, 0.5 if only one). Added to acquired days, no cap. PRESENCE mode only.
+
+## Frais (MileageAllowance)
+- Onglet "Frais" (anciennement "Frais Kms") sur la fiche employé
+- Validation: mois obligatoire + au moins `kilometers > 0` ou `amount > 0`
+- Les deux champs km et montant sont optionnels individuellement mais au moins un requis
+
+## Frontend Patterns
+
+### Table styling (standard across all pages)
+- Header: `grid border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md sticky top-0 z-10`
+- Body wrapper: `border-x border-b border-primary-500 rounded-b-md`
+- Rows: `grid items-center gap-4 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500`
+- Page wrapper for scroll: `h-full flex flex-col overflow-hidden`, table container: `min-h-0 overflow-auto rounded-md bg-white`
+
+### Drawer buttons (AppDrawer)
+- Edit mode: `grid grid-cols-2 gap-3` → Supprimer (red, left) + Modifier (primary, right)
+- Create mode: centered `+ Ajouter` button, w-[200px]
+- Exception: Users drawer has NO delete button
+- All "Ajouter" buttons across the app use "+" prefix
+
+### API Platform (backend)
+- Custom operations use Processor (write) / Provider (read)
+- File uploads: `deserialize: false` on Post, access file via RequestStack
+- Upload dir: `%kernel.project_dir%/var/uploads`
+
+## Audit Logging
+- All processors that modify entities impacting calculations (heures, absences, contrats, RTT) MUST inject `AuditLogger` and log create/update/delete actions
+- `AuditLogger::log()` persists without flushing — the processor's `flush()` handles both the data change and the audit entry atomically
+- Audit logs are accessible only via `ROLE_SUPER_ADMIN` (hidden role, added manually in DB)
+- Documentation: `doc/audit-logging.md`
+
+## Backend Conventions
+- Prefer explicit DTOs over associative arrays
+- Business rules in backend (providers/processors/services), frontend is display/interaction only
+- Keep backend PHP DTOs aligned with frontend TS DTOs (`frontend/services/dto/*`)
+- Update unit tests when constructor/service signatures change
+
+## Language
+- UI is in French
+- User communicates in French
+- Code (variables, comments) in English

README.md

@@ -17,3 +17,8 @@ Remplie la base avec le dump :
 ```shell
 docker compose exec -T db psql -U root -d sirh < sirh.sql
 ```
+
+## Mettre SUPER_ADMIN sur un user
+```sql
+UPDATE users SET roles = '["ROLE_ADMIN","ROLE_SUPER_ADMIN"]' WHERE username = 'emilie';
+```

composer.json

@@ -24,6 +24,7 @@
         "symfony/flex": "^2",
         "symfony/framework-bundle": "8.0.*",
         "symfony/http-client": "8.0.*",
+        "symfony/mime": "8.0.*",
         "symfony/monolog-bundle": "^4.0",
         "symfony/property-access": "8.0.*",
         "symfony/property-info": "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": "b540b6cb25ef55c5eebccb57c76da584",
+    "content-hash": "bdc04f5145303388bac52809ea3f4b05",
     "packages": [
         {
             "name": "api-platform/doctrine-common",
@@ -5374,6 +5374,92 @@
             ],
             "time": "2026-01-28T10:46:31+00:00"
         },
+        {
+            "name": "symfony/mime",
+            "version": "v8.0.7",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/mime.git",
+                "reference": "5d26d1958aeeba2ace8cc64a3a93d4f5d8f8022b"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/mime/zipball/5d26d1958aeeba2ace8cc64a3a93d4f5d8f8022b",
+                "reference": "5d26d1958aeeba2ace8cc64a3a93d4f5d8f8022b",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.4",
+                "symfony/polyfill-intl-idn": "^1.10",
+                "symfony/polyfill-mbstring": "^1.0"
+            },
+            "conflict": {
+                "egulias/email-validator": "~3.0.0",
+                "phpdocumentor/reflection-docblock": "<5.2|>=7",
+                "phpdocumentor/type-resolver": "<1.5.1"
+            },
+            "require-dev": {
+                "egulias/email-validator": "^2.1.10|^3.1|^4",
+                "league/html-to-markdown": "^5.0",
+                "phpdocumentor/reflection-docblock": "^5.2|^6.0",
+                "symfony/dependency-injection": "^7.4|^8.0",
+                "symfony/process": "^7.4|^8.0",
+                "symfony/property-access": "^7.4|^8.0",
+                "symfony/property-info": "^7.4|^8.0",
+                "symfony/serializer": "^7.4|^8.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Mime\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Allows manipulating MIME messages",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "mime",
+                "mime-type"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/mime/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/monolog-bridge",
             "version": "v8.0.4",
@@ -5685,6 +5771,93 @@
             ],
             "time": "2025-06-27T09:58:17+00:00"
         },
+        {
+            "name": "symfony/polyfill-intl-idn",
+            "version": "v1.33.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-intl-idn.git",
+                "reference": "9614ac4d8061dc257ecc64cba1b140873dce8ad3"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-intl-idn/zipball/9614ac4d8061dc257ecc64cba1b140873dce8ad3",
+                "reference": "9614ac4d8061dc257ecc64cba1b140873dce8ad3",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2",
+                "symfony/polyfill-intl-normalizer": "^1.10"
+            },
+            "suggest": {
+                "ext-intl": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/polyfill",
+                    "name": "symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Intl\\Idn\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Laurent Bassin",
+                    "email": "laurent@bassin.info"
+                },
+                {
+                    "name": "Trevor Rowbotham",
+                    "email": "trevor.rowbotham@pm.me"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for intl's idn_to_ascii and idn_to_utf8 functions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "idn",
+                "intl",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-intl-idn/tree/v1.33.0"
+            },
+            "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": "2024-09-10T14:38:51+00:00"
+        },
         {
             "name": "symfony/polyfill-intl-normalizer",
             "version": "v1.33.0",

config/packages/security.yaml

@@ -19,6 +19,7 @@ security:
             pattern: ^/login_check
             stateless: true
             provider: app_user_provider
+            user_checker: App\Security\UserChecker
             json_login:
                 check_path: /login_check
                 username_path: username
@@ -29,6 +30,7 @@ security:
             pattern: ^/api
             stateless: true
             provider: app_user_provider
+            user_checker: App\Security\UserChecker
             jwt: ~
             logout:
                 path: /api/logout

config/services.yaml

@@ -26,6 +26,14 @@ services:
         arguments:
             $holidayUrl: '%env(HOLIDAY_URL)%'
 
+    App\Service\Rtt\RttRecoveryComputationService:
+        arguments:
+            $rttStartDate: '%env(RTT_START_DATE)%'
+
+    App\State\EmployeeRttSummaryProvider:
+        arguments:
+            $rttStartDate: '%env(RTT_START_DATE)%'
+
     App\Repository\Contract\AbsenceReadRepositoryInterface: '@App\Repository\AbsenceRepository'
     App\Repository\Contract\EmployeeContractPeriodReadRepositoryInterface: '@App\Repository\EmployeeContractPeriodRepository'
     App\Repository\Contract\EmployeeScopedRepositoryInterface: '@App\Repository\EmployeeRepository'

config/version.yaml

@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.28'
+    app.version: '0.1.69'

deploy/docker/.env.example

@@ -0,0 +1,25 @@
+# Symfony
+APP_ENV=prod
+APP_DEBUG=0
+APP_SECRET=change-me
+
+# Database (use host.docker.internal to reach bare-metal PostgreSQL)
+DATABASE_URL="postgresql://sirh_user:password@host.docker.internal:5432/sirh?serverVersion=16&charset=utf8"
+
+# JWT
+JWT_SECRET_KEY=%kernel.project_dir%/config/jwt/private.pem
+JWT_PUBLIC_KEY=%kernel.project_dir%/config/jwt/public.pem
+JWT_PASSPHRASE=change-me
+JWT_COOKIE_SECURE=1
+JWT_COOKIE_SAMESITE=lax
+JWT_TOKEN_TTL=86400
+JWT_COOKIE_TTL=86400
+
+# CORS
+CORS_ALLOW_ORIGIN='^https?://sirh\.malio-dev\.fr$'
+
+# App
+DEFAULT_URI=https://sirh.malio-dev.fr
+APP_SHARE_DIR=var/share
+RTT_START_DATE=2026-02-23
+HOLIDAY_URL="https://calendrier.api.gouv.fr/jours-feries/"

deploy/docker/Dockerfile.prod

@@ -0,0 +1,77 @@
+# --- Stage 1: Build backend ---
+FROM php:8.4-cli AS backend-build
+
+RUN apt-get update && apt-get install -y \
+        libicu-dev libpq-dev libpng-dev libzip-dev libxml2-dev \
+        unzip curl git \
+    && docker-php-ext-install -j$(nproc) intl pdo_pgsql zip gd opcache \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY --from=composer:2 /usr/bin/composer /usr/bin/composer
+
+WORKDIR /app
+COPY composer.json composer.lock symfony.lock ./
+RUN APP_ENV=prod APP_DEBUG=0 composer install --no-dev --optimize-autoloader --no-scripts --no-interaction
+
+COPY bin bin/
+COPY config config/
+COPY migrations migrations/
+COPY public public/
+COPY src src/
+COPY templates templates/
+
+# --- Stage 2: Build frontend ---
+FROM node:lts-alpine AS frontend-build
+
+WORKDIR /app/frontend
+COPY frontend/package.json frontend/package-lock.json ./
+RUN npm ci
+
+COPY frontend/ ./
+ENV CI=1 \
+    NUXT_TELEMETRY_DISABLED=1 \
+    NUXT_PUBLIC_API_BASE=/api \
+    NUXT_PUBLIC_APP_BASE=/
+RUN npm run generate
+
+# --- Stage 3: Production image ---
+FROM php:8.4-fpm AS production
+
+RUN apt-get update && apt-get install -y \
+        libicu-dev libpq-dev libpng-dev libzip-dev libxml2-dev \
+        nginx supervisor \
+    && docker-php-ext-install -j$(nproc) intl pdo_pgsql zip gd opcache \
+    && rm -rf /var/lib/apt/lists/*
+
+# PHP production config
+RUN mv "$PHP_INI_DIR/php.ini-production" "$PHP_INI_DIR/php.ini"
+
+# PHP-FPM: forward worker output to stderr for docker logs
+RUN echo "catch_workers_output = yes" >> /usr/local/etc/php-fpm.d/www.conf \
+    && echo "decorate_workers_output = no" >> /usr/local/etc/php-fpm.d/www.conf
+
+# Nginx: log to stdout/stderr
+RUN ln -sf /dev/stdout /var/log/nginx/access.log \
+    && ln -sf /dev/stderr /var/log/nginx/error.log
+
+# Remove default nginx site
+RUN rm -f /etc/nginx/sites-enabled/default
+
+# Configs
+COPY deploy/docker/supervisord.conf /etc/supervisor/conf.d/app.conf
+COPY deploy/docker/nginx.conf /etc/nginx/sites-enabled/sirh.conf
+
+# Backend from stage 1
+COPY --from=backend-build /app /var/www/html
+
+# Frontend from stage 2
+COPY --from=frontend-build /app/frontend/.output/public /var/www/html/frontend/.output/public
+
+# Permissions
+RUN mkdir -p /var/www/html/var \
+    && chown -R www-data:www-data /var/www/html/var
+
+WORKDIR /var/www/html
+EXPOSE 80
+
+CMD ["supervisord", "-n", "-c", "/etc/supervisor/conf.d/app.conf"]

deploy/docker/deploy.sh

@@ -0,0 +1,28 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+cd "$(dirname "$0")"
+
+TAG="${1:-latest}"
+export SIRH_IMAGE_TAG="$TAG"
+
+echo "==> Deploying sirh:${TAG}..."
+
+echo "==> Pulling image..."
+docker compose pull
+
+echo "==> Starting container..."
+docker compose up -d
+
+echo "==> Waiting for container to be ready..."
+sleep 3
+
+echo "==> Running migrations..."
+docker compose exec -T app php bin/console doctrine:migrations:migrate --no-interaction
+
+echo "==> Clearing cache..."
+docker compose exec -T app php bin/console cache:clear --env=prod
+docker compose exec -T app php bin/console cache:warmup --env=prod
+
+VERSION=$(docker compose exec -T app cat config/version.yaml | grep 'app.version' | awk -F"'" '{print $2}')
+echo "==> Deployed v${VERSION}"

deploy/docker/docker-compose.prod.yml

@@ -0,0 +1,13 @@
+services:
+  app:
+    image: gitea.malio.fr/malio-dev/sirh:${SIRH_IMAGE_TAG:-latest}
+    container_name: sirh-app
+    env_file: .env
+    ports:
+      - "8080:80"
+    volumes:
+      - ./config/jwt:/var/www/html/config/jwt:ro
+      - ./uploads:/var/www/html/var/uploads
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
+    restart: unless-stopped

deploy/docker/nginx.conf

@@ -0,0 +1,46 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /var/www/html/frontend/.output/public;
+    index index.html;
+
+    access_log /dev/stdout;
+    error_log /dev/stderr;
+
+    location ^~ /api/ {
+        root /var/www/html/public;
+        try_files $uri /index.php?$query_string;
+    }
+
+    location ^~ /bundles/ {
+        root /var/www/html/public;
+        try_files $uri =404;
+    }
+
+    location = /api/login_check {
+        include fastcgi_params;
+        fastcgi_param SCRIPT_FILENAME /var/www/html/public/index.php;
+        fastcgi_param DOCUMENT_ROOT /var/www/html/public;
+        fastcgi_param SCRIPT_NAME /index.php;
+        fastcgi_param PATH_INFO /login_check;
+        fastcgi_param REQUEST_URI /login_check;
+        fastcgi_pass 127.0.0.1:9000;
+    }
+
+    location ~ ^/index\.php(/|$) {
+        include fastcgi_params;
+        fastcgi_param SCRIPT_FILENAME /var/www/html/public/index.php;
+        fastcgi_param DOCUMENT_ROOT /var/www/html/public;
+        fastcgi_pass 127.0.0.1:9000;
+        internal;
+    }
+
+    location ~ \.php$ {
+        return 404;
+    }
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

deploy/docker/supervisord.conf

@@ -0,0 +1,28 @@
+[supervisord]
+nodaemon=true
+user=root
+logfile=/dev/null
+logfile_maxbytes=0
+pidfile=/var/run/supervisord.pid
+
+[program:php-fpm]
+command=php-fpm -F
+autostart=true
+autorestart=true
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stderr
+stderr_logfile_maxbytes=0
+stopasgroup=true
+stopsignal=QUIT
+
+[program:nginx]
+command=nginx -g "daemon off;"
+autostart=true
+autorestart=true
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stderr
+stderr_logfile_maxbytes=0
+stopasgroup=true
+stopsignal=QUIT

deploy/nginx/sirh-docker.conf

@@ -0,0 +1,12 @@
+server {
+    listen 80;
+    server_name sirh.malio-dev.fr;
+
+    location / {
+        proxy_pass http://127.0.0.1:8080;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}

doc/audit-logging.md

@@ -0,0 +1,57 @@
+# Journal des actions (Audit Log)
+
+## Objectif
+
+Tracer les actions utilisateurs pour diagnostiquer rapidement les problèmes de calcul signalés.
+Quand un utilisateur signale une incohérence dans ses heures, RTT ou congés, le journal permet de voir
+exactement ce qui a été modifié, par qui, et quand.
+
+## Accès
+
+- **Rôle requis** : `ROLE_SUPER_ADMIN` (rôle caché, non visible dans l'interface de gestion des utilisateurs)
+- **Ajout du rôle** : directement en base de données
+  ```sql
+  UPDATE users SET roles = '["ROLE_ADMIN","ROLE_SUPER_ADMIN"]' WHERE username = 'xxx';
+  ```
+- **Page** : `/audit-logs` (lien "Journal" dans la sidebar, visible uniquement avec le rôle)
+
+## Actions tracées
+
+| Processor | Entité | Actions |
+|---|---|---|
+| `AbsenceWriteProcessor` | Absence | create, delete |
+| `WorkHourBulkUpsertProcessor` | WorkHour | create, update, delete |
+| `WorkHourSiteValidationProcessor` | WorkHour | site_validate |
+| `WorkHourBulkValidationProcessor` | WorkHour | validate |
+| `WorkHourBulkSiteValidationProcessor` | WorkHour | site_validate |
+| `EmployeeWriteProcessor` | Employee | create, update (changement contrat) |
+| `ContractSuspensionWriteProcessor` | ContractSuspension | create, update |
+| `EmployeeRttPaymentProcessor` | EmployeeRttPayment | update |
+| `EmployeeFractionedDaysProcessor` | EmployeeLeaveBalance | update |
+
+## Données stockées
+
+Chaque entrée contient :
+- **employee** : l'employé concerné (FK, nullable)
+- **username** : l'utilisateur qui a effectué l'action
+- **action** : type d'action (create, update, delete, validate, site_validate)
+- **entityType** : type d'entité (work_hour, absence, employee, etc.)
+- **description** : description lisible en français
+- **changes** : diff JSON `{old: {...}, new: {...}}` avec les anciennes/nouvelles valeurs
+- **affectedDate** : date de travail ou début d'absence (pour filtrage par période)
+- **createdAt** : horodatage de l'action
+
+## Filtres disponibles
+
+- Par employé
+- Par plage de dates (date affectée)
+- Par type d'entité
+
+## Pagination
+
+Les résultats sont paginés par 50 entrées. L'API retourne `{items, total, page, perPage}` et accepte un query param `page`.
+
+## Convention
+
+Tout nouveau processor traitant des entités impactant les calculs (heures, absences, contrats, RTT)
+doit intégrer le service `AuditLogger` et logger les actions create/update/delete.

doc/deployment-docker.md

@@ -0,0 +1,135 @@
+# Deploiement Docker — SIRH
+
+## Pre-requis
+
+Installer Docker et Docker Compose sur la machine :
+
+```bash
+# Ubuntu
+sudo apt update
+sudo apt install -y ca-certificates curl gnupg
+sudo install -m 0755 -d /etc/apt/keyrings
+curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
+echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+sudo apt update
+sudo apt install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin
+sudo usermod -aG docker $USER
+```
+
+Se deconnecter/reconnecter pour que le groupe `docker` prenne effet.
+
+## Premier deploiement
+
+### 1. Creer le dossier de deploiement
+
+```bash
+sudo mkdir -p /var/www/sirh
+sudo chown -R $(whoami):$(whoami) /var/www/sirh
+```
+
+### 2. Copier les fichiers depuis le repo
+
+```bash
+cp deploy/docker/docker-compose.prod.yml /var/www/sirh/docker-compose.yml
+cp deploy/docker/deploy.sh /var/www/sirh/deploy.sh
+cp deploy/docker/.env.example /var/www/sirh/.env
+chmod +x /var/www/sirh/deploy.sh
+```
+
+### 3. Configurer l'environnement
+
+Editer `/var/www/sirh/.env` avec les vraies valeurs :
+- `APP_SECRET` : generer avec `openssl rand -hex 32`
+- `DATABASE_URL` : `postgresql://user:pass@host.docker.internal:5432/sirh?serverVersion=16&charset=utf8`
+- `JWT_PASSPHRASE` : generer avec `openssl rand -hex 32`
+
+### 4. Generer les cles JWT
+
+```bash
+cd /var/www/sirh
+mkdir -p config/jwt
+docker run --rm -v $(pwd)/config/jwt:/jwt php:8.4-cli bash -c \
+  "apt-get update -qq && apt-get install -y -qq openssl > /dev/null && \
+   openssl genpkey -algorithm RSA -out /jwt/private.pem -pkeyopt rsa_keygen_bits:4096 && \
+   openssl rsa -pubout -in /jwt/private.pem -out /jwt/public.pem"
+```
+
+### 5. Creer le dossier uploads
+
+```bash
+mkdir -p /var/www/sirh/uploads
+```
+
+### 6. Configurer le login au registry Gitea
+
+```bash
+docker login gitea.malio.fr
+# Username: ton user Gitea
+# Password: ton token Gitea
+```
+
+### 7. Configurer Nginx systeme
+
+```bash
+sudo cp deploy/nginx/sirh-docker.conf /etc/nginx/sites-available/sirh.conf
+sudo ln -sf /etc/nginx/sites-available/sirh.conf /etc/nginx/sites-enabled/sirh.conf
+sudo nginx -t && sudo systemctl reload nginx
+```
+
+### 8. Deployer
+
+```bash
+cd /var/www/sirh
+./deploy.sh
+```
+
+## Deployer une release
+
+```bash
+cd /var/www/sirh
+./deploy.sh           # deploie la derniere version (latest)
+./deploy.sh v0.1.61   # deploie une version specifique
+```
+
+## Rollback
+
+### Image seule (pas de changement de schema BDD)
+
+```bash
+./deploy.sh v0.1.60
+```
+
+### Avec rollback de migration
+
+```bash
+# 1. Rollback schema (pendant que la version actuelle tourne encore)
+docker compose exec -T app php bin/console doctrine:migrations:migrate prev --no-interaction
+# 2. Deployer l'ancienne version
+./deploy.sh v0.1.60
+```
+
+## Voir les logs
+
+```bash
+cd /var/www/sirh
+docker compose logs -f          # tous les logs
+docker compose logs -f --tail=100  # 100 dernieres lignes
+```
+
+## Migration depuis l'ancien deploiement (tar.gz)
+
+Si l'application tourne deja en bare metal :
+
+1. Installer Docker (voir pre-requis)
+2. Creer le dossier `/var/www/sirh-docker/` (ne pas ecraser l'ancien)
+3. Copier les fichiers :
+   ```bash
+   cp /var/www/sirh/.env /var/www/sirh-docker/.env
+   cp -a /var/www/sirh/config/jwt /var/www/sirh-docker/config/jwt
+   cp -a /var/www/sirh/var/uploads /var/www/sirh-docker/uploads
+   ```
+4. Editer `/var/www/sirh-docker/.env` : changer `DATABASE_URL` pour utiliser `host.docker.internal` au lieu de `127.0.0.1`
+5. Mettre a jour Nginx systeme : remplacer la conf par `deploy/nginx/sirh-docker.conf`
+6. Arreter l'ancien PHP-FPM : `sudo systemctl stop php8.4-fpm`
+7. Deployer : `cd /var/www/sirh-docker && ./deploy.sh`
+8. Verifier que tout marche, puis supprimer l'ancien dossier

doc/functional-rules.md

@@ -40,6 +40,10 @@ Documents complementaires:
 
 ## 3) Heures (vue jour)
 
+- Visibilité des employés:
+  - vue jour: un employé sans contrat à la date sélectionnée est masqué
+  - vue semaine: un employé sans contrat sur aucun jour de la semaine est masqué
+  - même règle pour les heures classiques et les heures conducteurs
 - Saisie par salarié et par date:
   - matin / après-midi / soir
   - pour `PRESENCE`: demi-journées matin/après-midi
@@ -112,11 +116,48 @@ Documents complementaires:
   - contrats >= 39h: de 39h à 43h
 - Tranche 50%:
   - au-delà de 43h
+- Date de début RTT (`RTT_START_DATE` dans `.env`):
+  - les semaines dont la fin est antérieure à cette date sont ignorées dans le calcul de récupération
+  - permet d'éviter les déficits fictifs avant la mise en service du logiciel
+- Semaine en déficit (heures travaillées < heures contrat):
+  - le déficit est déduit du cumul RTT : d'abord des heures à 50%, puis des heures à 25%
+  - si aucun solde 50% ni 25%, les heures à 25% deviennent négatives
+- Contrats CUSTOM (heures hebdo ≠ 35h et ≠ 39h, hors INTERIM/FORFAIT):
+  - référence heures sup = heures contractuelles réelles (ex: 4h → référence 4h)
+  - pas de bonus 25% ni 50% : 1 heure sup = 1 heure de récupération
+  - le déficit (travail < contrat) ne génère pas de récup mais n'impacte pas le solde
 - Nature `INTERIM`:
   - pas de bonus 25%
   - pas de bonus 50%
   - pas de total récup
 
+## 6bis) Heures Conducteurs
+
+- Écran dédié `/driver-hours` pour les employés dont le contrat est marqué `isDriver = true`
+- Les conducteurs sont exclus de l'écran `/hours` classique
+- Colonnes spécifiques (vue jour):
+  - Heure de jour (durée HH:MM via TimeSelect)
+  - Heure de nuit (durée HH:MM via TimeSelect)
+  - Heure atelier (durée HH:MM via TimeSelect)
+  - Total (somme jour + nuit + atelier, calculé)
+  - Petit déjeuner (checkbox)
+  - Déjeuner (checkbox)
+  - Dîner (checkbox)
+  - Nuitée (checkbox)
+- Stockage backend:
+  - `dayHoursMinutes`, `nightHoursMinutes` et `workshopHoursMinutes` (entiers, minutes) sur `WorkHour`
+  - `hasBreakfast`, `hasLunch`, `hasDinner`, `hasOvernight` (booleans) sur `WorkHour`
+  - les champs time classiques (morning/afternoon/evening) sont mis à null pour les chauffeurs
+- Absences `countAsWorkedHours=true`: les minutes créditées sont ajoutées aux heures de jour (vue jour et vue semaine), même logique que les employés classiques
+- Validation: même logique que les heures classiques (`isValid`, `isSiteValid`, bulk)
+- Vue semaine:
+  - jour/nuit/atelier par jour + indicateurs repas/dîner/nuitée
+  - panier de nuit (PN): affiché par jour si (nightMinutes > dayMinutes) OU (nightMinutes >= 240, soit au moins 4h de travail entre 21h et 6h), et total hebdo dans la colonne Jour/Nuit sem.
+  - totaux hebdo: jour, nuit, atelier, total, compteurs petit déj/déjeuner/dîner/nuitée
+  - les conducteurs utilisent `dayHoursMinutes + nightHoursMinutes + workshopHoursMinutes` pour le calcul RTT (au lieu des créneaux morning/afternoon/evening)
+- Le flag `isDriver` est sur `EmployeeContractPeriod` (un employé peut changer de statut chauffeur selon la période)
+- Exposé en API via un getter virtuel sur `Employee` (`employee:read`) qui résout depuis la période active
+
 ## 7) Fériés
 
 - Les jours fériés sont identifiés et affichés
@@ -145,16 +186,22 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
 - Modification employé:
   - uniquement prénom, nom, site
   - pas de modification de contrat depuis ce drawer
+- Liste employés — filtre par statut de contrat:
+  - 3 options: "Avec contrat" (défaut), "Sans contrat", "Tous"
+  - "Avec contrat": employés ayant une période de contrat active à la date du jour
+  - "Sans contrat": employés sans période de contrat active
+  - "Tous": aucun filtrage sur le contrat
 - Détail employé:
   - onglet `Suivi contrat` avec affichage de l'historique des périodes de contrat
   - chaque ligne expose: nature (`CDI`/`CDD`/`INTERIM`), contrat/temps de travail, date de début, date de fin (ou "En cours")
-  - action `Clôturer`:
-    - bouton actif uniquement s'il existe un contrat en cours non déjà clôturé à la date du jour
+  - action `Modifier` (clôture/solde de tout compte):
+    - bouton actif s'il existe un contrat en cours non clôturé, ou si le dernier contrat est terminé (sans contrat actif après)
     - ouvre un drawer en lecture seule (type/temps de travail/date de début)
     - champs saisissables:
-      - `contractEndDate` (prérempli à aujourd'hui)
+      - `contractEndDate` (prérempli à aujourd'hui si contrat en cours, à la date de fin existante si contrat terminé)
       - `contractPaidLeaveSettled` (checkbox "Soldé dans le solde de tout compte")
     - backend: en mode clôture, le flag `contractPaidLeaveSettled` est persisté sur la période clôturée
+    - cas du contrat déjà terminé: permet de modifier `paidLeaveSettled` et le commentaire sur le dernier contrat terminé (ex: solde de tout compte CDD)
   - action `Ajouter`:
     - conserve le flux d'ajout d'un nouveau contrat via drawer dédié
     - disponible uniquement s'il n'y a pas de contrat en cours, ou si le contrat en cours a déjà une date de fin
@@ -170,14 +217,22 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
         - en cours d'acquisition jours: `25/12 = 2,08` jours/mois
         - en cours d'acquisition samedis: `5/12 = 0,42` samedi/mois (non detaille en UI)
         - en cas de début/fin en cours de mois, l'acquisition est proratisée au nombre de jours calendaires couverts dans le mois
+        - en cas de suspension en cours de mois, l'acquisition est proratisée en jours ouvrés (lun-ven hors fériés) travaillés / 22 (standard mensuel)
+        - arrêt maladie long (absences continues de type `M` > 1 mois):
+          - premier mois de maladie (date début + 1 mois calendaire): acquisition normale (`2,50`/mois)
+          - après le premier mois: acquisition réduite à `2,00`/mois (facteur `0,80` appliqué aux deux taux jours et samedis)
+          - en cas de mois partiellement couvert par la période réduite, le prorata est calculé en jours calendaires (jours normaux × taux normal + jours réduits × taux réduit)
+          - la détection est automatique à partir des absences MALADIE consécutives en base (tolérance de gap ≤ 3 jours)
         - samedis acquis affiches: uniquement `opening_saturdays` (report N-1)
       - contrat `4h`:
         - acquis annuel CP: `10`
         - acquis annuel samedi: `0`
         - en cours d'acquisition: `0.83` jour/mois
         - en cas de début/fin en cours de mois, l'acquisition est proratisée au nombre de jours calendaires couverts dans le mois
+        - en cas de suspension en cours de mois, l'acquisition est proratisée en jours ouvrés (lun-ven hors fériés) travaillés / 22
       - contrat `FORFAIT`:
         - base annuelle: `jours ouvrés de l'exercice (lundi-vendredi, hors jours fériés métropole) - 218`
+        - bonus weekend/férié: chaque jour travaillé un weekend ou jour férié donne 1 jour de congé supplémentaire (journée ≥ 5h = 1.0 jour, demi-journée > 0h et < 5h = 0.5 jour), sans plafond
         - prorata: en cas de démarrage/fin de contrat en cours d'année civile, le calcul ne couvre que l'intervalle actif du contrat dans l'année
         - reste à prendre: `acquis - absences` (toutes absences, demi-journées incluses)
         - pas de samedi (`0`)
@@ -225,6 +280,7 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
       - base identique aux calculs d'heures supplémentaires de la vue semaine Heures
       - minutes de récupération hebdomadaires = `HS totales + bonus 25% + bonus 50%`
       - contrats `INTERIM` et suivi `PRESENCE`: récupération à `0`
+      - date limite de calcul: uniquement les semaines terminées (jusqu'au dernier dimanche), **ou** la semaine en cours si tous les jours existants sont validés RH (`isValid = true`). En cas de fin de contrat en milieu de semaine, seuls les jours jusqu'à la date de fin sont vérifiés.
     - compteur global:
       - affiché en **jours** (1 jour = 7h = 420 minutes)
     - report:
@@ -242,10 +298,100 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
       - `rate`: taux de majoration, valeurs `25` ou `50`
       - les heures payées sont soustraites du disponible RTT (`availableMinutes -= totalPaidMinutes`)
       - affichage: 2 lignes par mois dans le tableau (25% et 50%)
+    - colonnes Total 25% et Total 50%: somme base + bonus de chaque tranche
+    - ligne Report N-1 (carry rollover): affichée en juin uniquement si carry > 0
+    - ligne Report mois précédent: solde cumulé (carry N-1 + semaines antérieures − paiements antérieurs), affichée à partir de juillet (masquée si nul)
+    - Reste = Report cumulé + Total du mois − Payé du mois (balance courante en fin de mois)
     - affichage:
       - le compteur global RTT est affiché en **heures** (format `Xh00`)
 
-## 10) Notifications
+## 10) Export récap. congés & RTT (PDF)
+
+- Accessible depuis la page Employés via le bouton "Export récap. congés" (réservé `ROLE_ADMIN`)
+- Clic direct (pas de drawer), génère un PDF A4 portrait à la date du jour
+- Endpoint: `GET /api/leave-recap/print`
+- Seuls les employés avec contrat actif sont inclus
+- Données groupées par site
+
+### Colonnes du tableau
+
+| Colonne | Logique |
+|---------|---------|
+| Nom | lastName + firstName |
+| Contrat | Contract.name |
+| CP N-1 restant | CDI/CDD: acquis N-1 − pris sur N-1. Forfait: report N-1 restant |
+| Samedi restant | CDI/CDD: samedis acquis N-1 − pris. Forfait: `-` |
+| CP N | Forfait: jours acquis année civile. Non-forfait: en cours d'acquisition |
+| RTT | Minutes disponibles (report N-1 + acquis N - payés). Format `X h Y m`. Forfait et INTERIM: `-` |
+
+## 11) Récapitulatif Salaire (PDF mensuel)
+
+- Accessible depuis la page Employés via le bouton "Récap. Salaire" (réservé `ROLE_ADMIN`)
+- Sélecteur de mois (défaut = mois courant), génère un PDF A3 paysage
+- Endpoint: `GET /api/salary-recap/print?month=YYYY-MM`
+- Données groupées par site, un en-tête par site
+
+### Colonnes du tableau
+
+| Colonne | Source | Logique |
+|---------|--------|---------|
+| Nom | Employee | firstName + lastName |
+| Base | Contract.name | Via EmployeeContractResolver pour le mois |
+| Jour de présence Cadre | WorkHour | Uniquement FORFAIT (PRESENCE). Somme isPresentMorning (0.5) + isPresentAfternoon (0.5) |
+| Heures de nuit | WorkHour | Non-chauffeurs: calcul intervalles nuit (00:00-06:00, 21:00-24:00). Chauffeurs: somme nightHoursMinutes |
+| Panier de nuit | WorkHour | Nombre de jours où (nightMinutes > dayMinutes) OU (nightMinutes >= 240, soit 4h entre 21h-6h) |
+| Heures payés | EmployeeRttPayment | Somme base25Minutes + base50Minutes du mois, convertie en heures |
+| Congés - Nombre | Absence code 'C' | Jours (demi-journées = 0.5) |
+| Congés - Date | Absence code 'C' | Dates formatées dd/mm |
+| Maladie - Nombre | Absence code 'M' ou 'AT' | Jours (demi-journées = 0.5) |
+| Maladie - Date | Absence code 'M' ou 'AT' | Dates formatées dd/mm |
+| CHAUFFEUR - PDJ | WorkHour.hasBreakfast | Comptage mois (chauffeurs uniquement) |
+| CHAUFFEUR - REPAS | WorkHour.hasLunch + hasDinner | Comptage mois (chauffeurs uniquement) |
+| CHAUFFEUR - NUITEE | WorkHour.hasOvernight | Comptage mois (chauffeurs uniquement) |
+| CHAUFFEUR - samedi | WorkHour (samedi) | Samedis travaillés (chauffeurs uniquement) |
+| Observations | — | Colonne vide pour saisie manuelle |
+
+## 12) Frais
+
+- Onglet "Frais" sur la fiche employé (icône `mdi:account-cash-outline`)
+- Entité `MileageAllowance` (table `mileage_allowances`)
+- Champs:
+  - `month` (mois, obligatoire)
+  - `kilometers` (nombre de km, optionnel)
+  - `amount` (montant en €, optionnel)
+  - `comment` (commentaire, optionnel)
+  - `receiptPath` / `receiptName` (justificatif Km, PDF)
+  - `amountReceiptPath` / `amountReceiptName` (justificatif Montant, PDF)
+- Règle de validation:
+  - le mois est obligatoire
+  - au moins un des deux champs `kilometers` ou `amount` doit être > 0
+  - les deux peuvent être remplis simultanément
+- Tableau: colonnes Mois, Nombre de Km, Montant €, Commentaire, Justif. Km, Justif. Montant
+- Deux justificatifs distincts (upload PDF uniquement):
+  - Justificatif Km : upload via `/mileage_allowances/{id}/receipt`, téléchargement via GET même URL
+  - Justificatif Montant : upload via `/mileage_allowances/{id}/amount-receipt`, téléchargement via GET même URL
+- La suppression d'un frais supprime les deux fichiers justificatifs du disque
+
+## 13) Observations
+
+- Onglet "Observation" sur la fiche employé (icône `mdi:note-text-outline`)
+- Entité `Observation` (table `observations`)
+- Champs:
+  - `month` (mois, obligatoire)
+  - `content` (texte d'observation, obligatoire)
+- Contrainte: une seule observation par mois par employé (unique sur `employee_id + month`)
+- Tableau: colonnes Mois | Observation
+- Drawer avec champs mois (`type="month"`) et textarea "Observation"
+- CRUD standard: création, modification, suppression avec confirmation
+
+## 14) Verrouillage utilisateur
+
+- Champ `isLocked` (boolean, default false) sur l'entité `User`
+- Un admin peut verrouiller/déverrouiller un utilisateur depuis la page Utilisateurs (checkbox dans le drawer)
+- Un utilisateur verrouillé ne peut plus se connecter (vérification via `UserChecker` sur les firewalls `login` et `api`)
+- Colonne "Statut" dans le tableau utilisateurs avec label "Actif" (vert) ou "Verrouillé" (rouge)
+
+## 15) Notifications
 
 - Icône cloche en topbar:
   - badge = nombre de notifications non lues
@@ -258,3 +404,31 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
 - Une notification est créée uniquement quand un chef de site termine la validation complète:
   - condition: plus aucune ligne `work_hours` du site à la date concernée avec `isSiteValid = false`
   - destinataires: utilisateurs `ROLE_ADMIN`
+
+## 16) Export PDF des heures annuelles
+
+- Accessible depuis la fiche employé (bouton imprimante à droite du nom)
+- Ouvre un drawer pour choisir l'année (civile, Jan-Déc)
+- Génère un PDF avec le détail jour par jour des heures de l'employé
+- Seuls les jours avec heures saisies ou absence sont affichés
+
+### Colonnes selon le mode de suivi
+
+- **TIME (non-chauffeur)**: Date | Absence | Début matin | Fin matin | Début après-midi | Fin après-midi | Début soir | Fin soir | Total
+- **PRESENCE (forfait)**: Date | Absence | Présence matin | Présence après-midi | Total
+- **Chauffeur**: Date | Absence | Heures jour | Heures nuit | Heures atelier | Total
+
+### Changement de contrat en cours d'année
+
+- Si l'employé change de mode de suivi (TIME/PRESENCE) ou de statut chauffeur en cours d'année, le PDF affiche des sections séparées avec les colonnes adaptées à chaque période
+- Le nom du contrat est affiché en sous-titre de chaque section
+
+### Calcul du total
+
+- TIME non-chauffeur: somme des créneaux matin + après-midi + soir, plus minutes créditées des absences `countAsWorkedHours`
+- Chauffeur: `dayHoursMinutes + nightHoursMinutes + workshopHoursMinutes` + minutes créditées
+- PRESENCE: 0.5 par demi-journée présente (matin/après-midi), max 1.0
+
+### Nom du fichier
+
+- Format: `{nom}_{prenom}_{annee}.pdf`

docs/plans/2026-03-09-rtt-paid-hours.md

@@ -0,0 +1,484 @@
+# RTT : Affichage en heures + Paiement RTT
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Afficher les RTT en heures (plus en jours), permettre le paiement RTT via drawer avec majoration 25%/50%, stocker en BDD et afficher par mois.
+
+**Architecture:** Nouvelle entity `EmployeeRttPayment` (employee, year, month, minutes, rate). Le provider RTT agrège les paiements par mois et les soustrait du disponible. Le frontend ajoute un drawer de saisie et deux lignes par mois (25% / 50%).
+
+**Tech Stack:** Symfony + Doctrine + API Platform (backend), Nuxt 4 + Vue 3 + TypeScript + Tailwind (frontend)
+
+---
+
+## Contexte existant
+
+- **Entity:** `EmployeeRttBalance` dans `src/Entity/EmployeeRttBalance.php` - stocke `openingMinutes` par exercice
+- **Provider:** `src/State/EmployeeRttSummaryProvider.php` - calcule `availableMinutes = carry + currentYearRecovery`
+- **Service:** `src/Service/Rtt/RttRecoveryComputationService.php` - calcul semaine par semaine
+- **Frontend:** `frontend/components/employees/RttTab.vue` - affichage grille mois/semaines
+- **DTO backend:** `src/ApiResource/EmployeeRttSummary.php` - champs `availableMinutes`, `weeks[]`
+- **DTO frontend:** `frontend/services/dto/employee-rtt-summary.ts`
+- Les minutes sont la base de calcul. 1 jour = 7h = 420 minutes.
+- Exercice RTT : 1er juin N-1 -> 31 mai N (year = N)
+
+---
+
+### Task 1: Migration - Créer la table `employee_rtt_payments`
+
+**Files:**
+- Create: `migrations/Version20260309140000.php`
+
+**Step 1: Créer la migration**
+
+```php
+<?php
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260309140000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Create employee_rtt_payments table for RTT paid hours tracking.';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql(<<<'SQL'
+            CREATE TABLE employee_rtt_payments (
+                id SERIAL PRIMARY KEY,
+                employee_id INT NOT NULL REFERENCES employees(id) ON DELETE CASCADE,
+                year INT NOT NULL,
+                month INT NOT NULL,
+                minutes INT NOT NULL,
+                rate VARCHAR(10) NOT NULL,
+                created_at TIMESTAMP(0) WITHOUT TIME ZONE NOT NULL DEFAULT NOW(),
+                updated_at TIMESTAMP(0) WITHOUT TIME ZONE NOT NULL DEFAULT NOW()
+            )
+        SQL);
+        $this->addSql('CREATE INDEX idx_rtt_payment_employee_year ON employee_rtt_payments (employee_id, year)');
+        $this->addSql("COMMENT ON TABLE employee_rtt_payments IS 'Paiements RTT par employe, mois et taux de majoration.'");
+        $this->addSql("COMMENT ON COLUMN employee_rtt_payments.rate IS 'Taux de majoration: 25 ou 50.'");
+        $this->addSql("COMMENT ON COLUMN employee_rtt_payments.minutes IS 'Minutes RTT payees pour ce mois et ce taux.'");
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('DROP TABLE employee_rtt_payments');
+    }
+}
+```
+
+**Step 2: Exécuter la migration**
+
+Run: `make migrate` ou `docker compose exec php php bin/console doctrine:migrations:migrate --no-interaction`
+Expected: Migration exécutée sans erreur
+
+**Step 3: Commit**
+
+```bash
+git add migrations/Version20260309140000.php
+git commit -m "feat(rtt): add employee_rtt_payments table"
+```
+
+---
+
+### Task 2: Entity + Repository `EmployeeRttPayment`
+
+**Files:**
+- Create: `src/Entity/EmployeeRttPayment.php`
+- Create: `src/Repository/EmployeeRttPaymentRepository.php`
+
+**Step 1: Créer l'entity**
+
+```php
+<?php
+declare(strict_types=1);
+
+namespace App\Entity;
+
+use App\Repository\EmployeeRttPaymentRepository;
+use DateTimeImmutable;
+use Doctrine\ORM\Mapping as ORM;
+
+#[ORM\Entity(repositoryClass: EmployeeRttPaymentRepository::class)]
+#[ORM\Table(name: 'employee_rtt_payments')]
+#[ORM\Index(columns: ['employee_id', 'year'], name: 'idx_rtt_payment_employee_year')]
+class EmployeeRttPayment
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column(type: 'integer')]
+    private ?int $id = null;
+
+    #[ORM\ManyToOne(targetEntity: Employee::class)]
+    #[ORM\JoinColumn(nullable: false, onDelete: 'CASCADE')]
+    private ?Employee $employee = null;
+
+    #[ORM\Column(type: 'integer')]
+    private int $year = 0;
+
+    #[ORM\Column(type: 'integer')]
+    private int $month = 0;
+
+    #[ORM\Column(type: 'integer', options: ['comment' => 'Minutes RTT payees pour ce mois et ce taux.'])]
+    private int $minutes = 0;
+
+    #[ORM\Column(length: 10, options: ['comment' => 'Taux de majoration: 25 ou 50.'])]
+    private string $rate = '25';
+
+    #[ORM\Column(type: 'datetime_immutable')]
+    private DateTimeImmutable $createdAt;
+
+    #[ORM\Column(type: 'datetime_immutable')]
+    private DateTimeImmutable $updatedAt;
+
+    public function __construct()
+    {
+        $now             = new DateTimeImmutable();
+        $this->createdAt = $now;
+        $this->updatedAt = $now;
+    }
+
+    // Getters & setters (getId, getEmployee/setEmployee, getYear/setYear,
+    // getMonth/setMonth, getMinutes/setMinutes, getRate/setRate, touch)
+    // Suivre le même pattern que EmployeeLeaveBalance
+}
+```
+
+**Step 2: Créer le repository**
+
+```php
+<?php
+declare(strict_types=1);
+
+namespace App\Repository;
+
+use App\Entity\Employee;
+use App\Entity\EmployeeRttPayment;
+use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
+use Doctrine\Persistence\ManagerRegistry;
+
+/**
+ * @extends ServiceEntityRepository<EmployeeRttPayment>
+ */
+final class EmployeeRttPaymentRepository extends ServiceEntityRepository
+{
+    public function __construct(ManagerRegistry $registry)
+    {
+        parent::__construct($registry, EmployeeRttPayment::class);
+    }
+
+    /**
+     * @return list<EmployeeRttPayment>
+     */
+    public function findByEmployeeAndYear(Employee $employee, int $year): array
+    {
+        return $this->createQueryBuilder('p')
+            ->andWhere('p.employee = :employee')
+            ->andWhere('p.year = :year')
+            ->setParameter('employee', $employee)
+            ->setParameter('year', $year)
+            ->orderBy('p.month', 'ASC')
+            ->getQuery()
+            ->getResult();
+    }
+}
+```
+
+**Step 3: Vérifier le lint**
+
+Run: `docker compose exec php php -l src/Entity/EmployeeRttPayment.php && docker compose exec php php -l src/Repository/EmployeeRttPaymentRepository.php`
+Expected: No syntax errors
+
+**Step 4: Commit**
+
+```bash
+git add src/Entity/EmployeeRttPayment.php src/Repository/EmployeeRttPaymentRepository.php
+git commit -m "feat(rtt): add EmployeeRttPayment entity and repository"
+```
+
+---
+
+### Task 3: API Resource + Provider + Processor pour le paiement RTT
+
+**Files:**
+- Create: `src/ApiResource/EmployeeRttPaymentInput.php`
+- Create: `src/State/EmployeeRttPaymentProvider.php`
+- Create: `src/State/EmployeeRttPaymentProcessor.php`
+
+**Step 1: Créer l'API Resource**
+
+Endpoint: `PATCH /employees/{id}/rtt-payments` (ROLE_ADMIN)
+Body: `{ "month": 3, "minutes": 120, "rate": "25" }`
+
+```php
+// src/ApiResource/EmployeeRttPaymentInput.php
+#[ApiResource(
+    operations: [
+        new Patch(
+            uriTemplate: '/employees/{id}/rtt-payments',
+            security: "is_granted('ROLE_ADMIN')",
+            provider: EmployeeRttPaymentProvider::class,
+            processor: EmployeeRttPaymentProcessor::class
+        ),
+    ],
+    paginationEnabled: false
+)]
+final class EmployeeRttPaymentInput
+{
+    public int $month    = 0;
+    public int $minutes  = 0;
+    public string $rate  = '25';
+    public ?int $year    = null;
+}
+```
+
+**Step 2: Créer le Provider** (retourne un DTO vide, même pattern que `EmployeeFractionedDaysProvider`)
+
+**Step 3: Créer le Processor**
+
+Logique:
+- Valider `rate` in `['25', '50']`, `month` in `[1..12]`, `minutes >= 0`
+- Résoudre l'année (même logique exercice RTT que le provider existant)
+- Persister un `EmployeeRttPayment`
+
+**Step 4: Vérifier le lint**
+
+**Step 5: Commit**
+
+```bash
+git add src/ApiResource/EmployeeRttPaymentInput.php src/State/EmployeeRttPaymentProvider.php src/State/EmployeeRttPaymentProcessor.php
+git commit -m "feat(rtt): add PATCH endpoint for RTT payment"
+```
+
+---
+
+### Task 4: Modifier le DTO + Provider RTT pour inclure les paiements par mois
+
+**Files:**
+- Modify: `src/ApiResource/EmployeeRttSummary.php`
+- Modify: `src/State/EmployeeRttSummaryProvider.php`
+- Create: `src/Dto/Rtt/RttMonthPayment.php`
+- Modify: `frontend/services/dto/employee-rtt-summary.ts`
+
+**Step 1: Créer le DTO mois-paiement**
+
+```php
+// src/Dto/Rtt/RttMonthPayment.php
+final class RttMonthPayment
+{
+    public function __construct(
+        public int $month,
+        public int $paidMinutes25 = 0,
+        public int $paidMinutes50 = 0,
+    ) {}
+}
+```
+
+**Step 2: Ajouter au summary backend**
+
+Dans `EmployeeRttSummary.php`, ajouter:
+```php
+public int $totalPaidMinutes = 0;
+
+/** @var list<RttMonthPayment> */
+public array $monthPayments = [];
+```
+
+Et modifier `availableMinutes` pour soustraire les paiements:
+```php
+$summary->availableMinutes = $summary->carryFromPreviousYearMinutes
+    + $summary->currentYearRecoveryMinutes
+    - $summary->totalPaidMinutes;
+```
+
+**Step 3: Modifier le provider** pour charger les paiements via le repository et les agréger par mois
+
+Dans `EmployeeRttSummaryProvider::provide()`:
+- Charger `$payments = $this->rttPaymentRepository->findByEmployeeAndYear($employee, $year)`
+- Agréger par mois + rate pour construire les `RttMonthPayment`
+- Calculer `totalPaidMinutes = sum(minutes)`
+- Soustraire du `availableMinutes`
+
+**Step 4: Mettre à jour le DTO frontend**
+
+Dans `frontend/services/dto/employee-rtt-summary.ts`:
+```typescript
+export type RttMonthPayment = {
+  month: number
+  paidMinutes25: number
+  paidMinutes50: number
+}
+
+export type EmployeeRttSummary = {
+  // ... champs existants ...
+  totalPaidMinutes: number
+  monthPayments: RttMonthPayment[]
+}
+```
+
+**Step 5: Commit**
+
+```bash
+git commit -m "feat(rtt): include paid hours in RTT summary by month"
+```
+
+---
+
+### Task 5: Frontend - Afficher les RTT en heures + lignes payées
+
+**Files:**
+- Modify: `frontend/components/employees/RttTab.vue`
+
+**Step 1: Changer l'affichage du header de jours en heures**
+
+Ligne 4 actuelle:
+```html
+<p>...: {{ formatDays(summary?.availableMinutes ?? 0) }}</p>
+```
+
+Remplacer par:
+```html
+<p>...: {{ formatMinutes(summary?.availableMinutes ?? 0) }}</p>
+```
+
+**Step 2: Ajouter les 2 lignes de paiement par mois**
+
+Après la ligne `Heure payée` existante (ligne 33-34), remplacer par 2 lignes distinctes:
+
+```html
+<div class="py-[6px] pl-3 border-r border-b border-primary-500">Heure payée 25%</div>
+<div class="py-[6px] pl-3 border-b border-primary-500">{{ formatMinutes(getMonthPaid25(month.month)) }}</div>
+<div class="py-[6px] pl-3 border-r border-primary-500">Heure payée 50%</div>
+<div class="py-[6px] pl-3">{{ formatMinutes(getMonthPaid50(month.month)) }}</div>
+```
+
+**Step 3: Ajouter les helpers computed**
+
+```typescript
+const paymentsByMonth = computed(() => {
+  const map = new Map<number, { paid25: number; paid50: number }>()
+  for (const mp of props.summary?.monthPayments ?? []) {
+    map.set(mp.month, { paid25: mp.paidMinutes25, paid50: mp.paidMinutes50 })
+  }
+  return map
+})
+
+const getMonthPaid25 = (month: number) => paymentsByMonth.value.get(month)?.paid25 ?? 0
+const getMonthPaid50 = (month: number) => paymentsByMonth.value.get(month)?.paid50 ?? 0
+```
+
+**Step 4: Commit**
+
+```bash
+git commit -m "feat(rtt): display hours instead of days + paid hours per month"
+```
+
+---
+
+### Task 6: Frontend - Drawer de paiement RTT
+
+**Files:**
+- Modify: `frontend/components/employees/RttTab.vue`
+- Modify: `frontend/services/employee-rtt-summary.ts`
+- Modify: `frontend/composables/useEmployeeDetailPage.ts`
+- Modify: `frontend/pages/employees/[id].vue`
+
+**Step 1: Ajouter le service API**
+
+Dans `frontend/services/employee-rtt-summary.ts`:
+```typescript
+export const createRttPayment = async (
+  employeeId: number,
+  month: number,
+  minutes: number,
+  rate: '25' | '50',
+  year?: number
+) => {
+  const api = useApi()
+  const body: Record<string, unknown> = { month, minutes, rate }
+  if (year) body.year = year
+  return api.patch(`/employees/${employeeId}/rtt-payments`, body)
+}
+```
+
+**Step 2: Ajouter au composable**
+
+Dans `useEmployeeDetailPage.ts`:
+- Import `createRttPayment`
+- Ajouter `submitRttPayment(month, minutes, rate)` qui appelle l'API puis `loadEmployee()`
+- Exposer dans le return
+
+**Step 3: Passer l'event dans la page**
+
+Dans `frontend/pages/employees/[id].vue`:
+- Destructurer `submitRttPayment`
+- Ajouter `@submit-rtt-payment="submitRttPayment"` sur `<EmployeesRttTab>`
+
+**Step 4: Ajouter le drawer dans RttTab.vue**
+
+Même pattern que le drawer fractionnés dans LeaveTab:
+- Import `AppDrawer`
+- State: `isPaymentDrawerOpen`, `paymentForm: { month, minutes, rate }`
+- Bouton "Payer les RTT" ouvre le drawer
+- Formulaire avec:
+  - Select mois (Janvier..Décembre)
+  - Input number "Nombre d'heures" (step 0.5, converti en minutes au submit)
+  - Select rate: "25%" / "50%"
+  - Boutons Annuler / Enregistrer
+- Emit `submit-rtt-payment` au submit
+
+**Step 5: Commit**
+
+```bash
+git commit -m "feat(rtt): add payment drawer with month/hours/rate fields"
+```
+
+---
+
+### Task 7: Documentation fonctionnelle
+
+**Files:**
+- Modify: `doc/functional-rules.md`
+
+**Step 1: Mettre à jour la section RTT**
+
+Ajouter après les règles RTT existantes:
+- Paiement RTT: saisie RH via `PATCH /employees/{id}/rtt-payments`
+- Stocké dans `employee_rtt_payments` (employee, year, month, minutes, rate)
+- Les heures payées sont soustraites du disponible RTT
+- Affichage: 2 lignes par mois (25% et 50%)
+- L'affichage global RTT est en heures (plus en jours)
+
+**Step 2: Commit**
+
+```bash
+git commit -m "docs: update functional rules with RTT payment feature"
+```
+
+---
+
+## Résumé des fichiers
+
+| Action | Fichier |
+|--------|---------|
+| Create | `migrations/Version20260309140000.php` |
+| Create | `src/Entity/EmployeeRttPayment.php` |
+| Create | `src/Repository/EmployeeRttPaymentRepository.php` |
+| Create | `src/ApiResource/EmployeeRttPaymentInput.php` |
+| Create | `src/State/EmployeeRttPaymentProvider.php` |
+| Create | `src/State/EmployeeRttPaymentProcessor.php` |
+| Create | `src/Dto/Rtt/RttMonthPayment.php` |
+| Modify | `src/ApiResource/EmployeeRttSummary.php` |
+| Modify | `src/State/EmployeeRttSummaryProvider.php` |
+| Modify | `frontend/services/dto/employee-rtt-summary.ts` |
+| Modify | `frontend/services/employee-rtt-summary.ts` |
+| Modify | `frontend/components/employees/RttTab.vue` |
+| Modify | `frontend/composables/useEmployeeDetailPage.ts` |
+| Modify | `frontend/pages/employees/[id].vue` |
+| Modify | `doc/functional-rules.md` |

docs/superpowers/plans/2026-03-12-employee-entry-date.md

@@ -0,0 +1,273 @@
+# Employee Entry Date 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 an `entryDate` field to Employee, automatically populated from `contractStartDate` at creation.
+
+**Architecture:** New nullable `DATE` column on `employees` table. The `EmployeeWriteProcessor` sets `entryDate` from the first contract period's start date during employee creation. Exposed read-only in the API. No fallback needed — existing employees will be updated manually in prod DB.
+
+**Tech Stack:** Symfony/Doctrine (backend), Nuxt/Vue/TypeScript (frontend)
+
+---
+
+## File Structure
+
+| File | Action | Responsibility |
+|------|--------|----------------|
+| `src/Entity/Employee.php` | Modify | Add `entryDate` column + getter/setter, expose in `employee:read` |
+| `src/State/EmployeeWriteProcessor.php` | Modify | Set `entryDate` from `contractStartDate` on creation |
+| `migrations/Version20260312120000.php` | Create | Add `entry_date` column to `employees` table |
+| `tests/State/EmployeeWriteProcessorTest.php` | Modify | Assert `entryDate` is set on new employee |
+| `frontend/services/dto/employee.ts` | Modify | Add `entryDate` field to `Employee` type |
+| `frontend/pages/employees/index.vue` | Modify | Display entry date in employee list |
+
+---
+
+## Chunk 1: Backend
+
+### Task 1: Migration
+
+**Files:**
+- Create: `migrations/Version20260312120000.php`
+
+- [ ] **Step 1: Create the migration file**
+
+```php
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260312120000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add entry_date column to employees table';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE employees ADD entry_date DATE DEFAULT NULL COMMENT \'(DC2Type:date_immutable)\'');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE employees DROP entry_date');
+    }
+}
+```
+
+- [ ] **Step 2: Run migration**
+
+Run: `php bin/console doctrine:migrations:migrate --no-interaction`
+Expected: Migration applied successfully
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add migrations/Version20260312120000.php
+git commit -m "feat : ajout colonne entry_date sur employees"
+```
+
+---
+
+### Task 2: Entity — add `entryDate` property
+
+**Files:**
+- Modify: `src/Entity/Employee.php:56-61` (insert after `displayOrder`)
+
+- [ ] **Step 1: Add the column, getter, and setter to Employee entity**
+
+Add after the `displayOrder` property (line 58):
+
+```php
+#[ORM\Column(type: 'date_immutable', nullable: true)]
+#[Groups(['employee:read'])]
+private ?\DateTimeImmutable $entryDate = null;
+```
+
+Add getter and setter after `setDisplayOrder()` (after line 167):
+
+```php
+public function getEntryDate(): ?\DateTimeImmutable
+{
+    return $this->entryDate;
+}
+
+public function setEntryDate(?\DateTimeImmutable $entryDate): self
+{
+    $this->entryDate = $entryDate;
+
+    return $this;
+}
+```
+
+- [ ] **Step 2: Verify schema is in sync**
+
+Run: `php bin/console doctrine:schema:validate`
+Expected: OK (or only existing unrelated warnings)
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/Entity/Employee.php
+git commit -m "feat : ajout propriete entryDate sur Employee"
+```
+
+---
+
+### Task 3: Set `entryDate` on employee creation
+
+**Files:**
+- Modify: `src/State/EmployeeWriteProcessor.php:60-71`
+- Modify: `tests/State/EmployeeWriteProcessorTest.php`
+
+- [ ] **Step 1: Write the failing test**
+
+Add `use ApiPlatform\Metadata\Post;` to the imports at the top of the test file (alongside the existing `Delete` and `Patch` imports).
+
+Then add this test method to `EmployeeWriteProcessorTest`:
+
+```php
+public function testSetsEntryDateOnNewEmployee(): void
+{
+    $employee = new Employee();
+    $employee->setFirstName('Jane');
+    $employee->setLastName('Doe');
+    $employee->setContractStartDate('2026-04-01');
+    $employee->setContractNature('CDI');
+
+    $contract = new Contract()
+        ->setName('35h')
+        ->setTrackingMode(Contract::TRACKING_TIME)
+        ->setWeeklyHours(35);
+    $employee->setContract($contract);
+
+    $persistProcessor     = $this->createMock(ProcessorInterface::class);
+    $removeProcessor      = $this->createStub(ProcessorInterface::class);
+    $entityManager        = $this->createStub(EntityManagerInterface::class);
+    $periodRepository     = $this->createStub(EmployeeContractPeriodReadRepositoryInterface::class);
+    $changeRequestFactory = new EmployeeContractChangeRequestFactory();
+    $periodManager        = $this->createMock(EmployeeContractPeriodManagerInterface::class);
+
+    $persistProcessor
+        ->expects(self::once())
+        ->method('process')
+        ->willReturn($employee);
+
+    $periodManager
+        ->expects(self::once())
+        ->method('ensureContractPeriodExists');
+
+    $processor = new EmployeeWriteProcessor(
+        $persistProcessor,
+        $removeProcessor,
+        $entityManager,
+        $periodRepository,
+        $changeRequestFactory,
+        $periodManager
+    );
+
+    $processor->process($employee, new Post());
+
+    self::assertNotNull($employee->getEntryDate());
+    self::assertSame('2026-04-01', $employee->getEntryDate()->format('Y-m-d'));
+}
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `php bin/phpunit tests/State/EmployeeWriteProcessorTest.php --filter=testSetsEntryDateOnNewEmployee`
+Expected: FAIL — `entryDate` is null
+
+- [ ] **Step 3: Implement — set entryDate in EmployeeWriteProcessor**
+
+In `src/State/EmployeeWriteProcessor.php`, inside the `if ($isNew)` block (line 60-71), add **before** `return $result;` (line 71):
+
+```php
+$data->setEntryDate($startDate);
+```
+
+The full block becomes:
+
+```php
+if ($isNew) {
+    $startDate = $changeRequest->contractStartDate ?? new DateTimeImmutable('1970-01-01');
+    $nature    = $changeRequest->contractNature ?? ContractNature::CDI;
+    $this->periodManager->ensureContractPeriodExists(
+        employee: $data,
+        contract: $currentContract,
+        startDate: $startDate,
+        endDate: $changeRequest->contractEndDate,
+        nature: $nature
+    );
+
+    $data->setEntryDate($startDate);
+
+    return $result;
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `php bin/phpunit tests/State/EmployeeWriteProcessorTest.php --filter=testSetsEntryDateOnNewEmployee`
+Expected: PASS
+
+- [ ] **Step 5: Run all EmployeeWriteProcessor tests**
+
+Run: `php bin/phpunit tests/State/EmployeeWriteProcessorTest.php`
+Expected: All tests pass (no regression)
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/State/EmployeeWriteProcessor.php tests/State/EmployeeWriteProcessorTest.php
+git commit -m "feat : remplissage automatique entryDate a la creation employe"
+```
+
+---
+
+## Chunk 2: Frontend
+
+### Task 4: Update frontend DTO and display entry date
+
+**Files:**
+- Modify: `frontend/services/dto/employee.ts:14-25`
+- Modify: `frontend/pages/employees/index.vue`
+
+- [ ] **Step 1: Add `entryDate` to the Employee DTO**
+
+In `frontend/services/dto/employee.ts:24`, add `entryDate` after `displayOrder`:
+
+```typescript
+  displayOrder?: number
+  entryDate?: string | null
+```
+
+- [ ] **Step 2: Display entry date in the employee card hover overlay**
+
+In `frontend/pages/employees/index.vue`, inside the hover overlay `<div>` (line 49-54), add a new line after the "Site" line (after line 53):
+
+```vue
+<p><strong>Entree :</strong> {{ employee.entryDate ? employee.entryDate.split('-').reverse().join('/') : '-' }}</p>
+```
+
+This uses string splitting instead of `new Date()` to avoid timezone parsing issues with date-only strings.
+
+- [ ] **Step 3: Verify in browser**
+
+1. Check the API response for an employee: `GET /api/employees` should include `entryDate` field (confirms backend `employee:read` group works)
+2. Open the employee list page, hover over a card — entry date should appear in the overlay
+3. Create a new employee, verify the entry date shows the contract start date
+4. Existing employees without entry date should show "-"
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add frontend/services/dto/employee.ts frontend/pages/employees/index.vue
+git commit -m "feat : affichage date d'entree dans la liste employes"
+```

docs/superpowers/plans/2026-03-13-rtt-tab-redesign.md

@@ -0,0 +1,563 @@
+# Refonte onglet RTT — Plan d'implémentation
+
+> **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:** Remplacer la vue annuelle RTT par une vue mensuelle avec tableau détaillé par semaine (base/25%/50%) et un système de paiement à 4 champs.
+
+**Architecture:** Enrichir `RttRecoveryComputationService` pour retourner le détail base/bonus par palier. Modifier l'entité `EmployeeRttPayment` pour stocker 4 valeurs. Réécrire le composant `RttTab.vue` avec navigation mensuelle et tableau 7 colonnes.
+
+**Tech Stack:** Symfony + API Platform + Doctrine (backend), Nuxt 4 + Vue 3 + TypeScript + Tailwind (frontend), PostgreSQL.
+
+**Spec:** `docs/superpowers/specs/2026-03-13-rtt-tab-redesign.md`
+
+---
+
+## Task 1: Enrichir le retour de `RttRecoveryComputationService::computeRecoveryByWeek`
+
+**Files:**
+- Create: `src/Dto/Rtt/WeekRecoveryDetail.php`
+- Modify: `src/Service/Rtt/RttRecoveryComputationService.php:97-206`
+
+Actuellement `computeRecoveryByWeek` retourne `array<string, int>` (weekKey => totalMinutes). Il faut retourner `array<string, WeekRecoveryDetail>` avec le détail ventilé.
+
+- [ ] **Step 1: Créer le DTO `WeekRecoveryDetail`**
+
+```php
+// src/Dto/Rtt/WeekRecoveryDetail.php
+<?php
+
+declare(strict_types=1);
+
+namespace App\Dto\Rtt;
+
+final class WeekRecoveryDetail
+{
+    public function __construct(
+        public int $overtimeMinutes = 0,
+        public int $base25Minutes = 0,
+        public int $bonus25Minutes = 0,
+        public int $base50Minutes = 0,
+        public int $bonus50Minutes = 0,
+        public int $totalMinutes = 0,
+    ) {}
+}
+```
+
+- [ ] **Step 2: Modifier `computeRecoveryByWeek` pour retourner `array<string, WeekRecoveryDetail>`**
+
+Changer le retour de la méthode. Les variables internes existent déjà (`weeklyOvertimeTotalMinutes`, `weeklyOvertime25Minutes`, `weeklyOvertime50Minutes`). Il faut calculer en plus les bases séparées.
+
+La logique de ventilation des heures de base entre palier 25% et palier 50% :
+- `base25Minutes` = heures sup dans la tranche 25% = `min(overtimeMinutes, max(0, overtime25StartMinutes - overtimeReferenceMinutes))`... En fait, c'est plus simple :
+  - `base25Minutes` = `min(weeklyOvertimeTotalMinutes, max(0, 43*60 - overtime25StartMinutes))` quand overtimeTotal > 0
+  - Plus simplement : `base25Minutes` = heures entre le seuil 25% et 43h, `base50Minutes` = heures au-dessus de 43h
+
+Reprenons la logique existante (lignes 189-202) :
+- `overtimeReferenceMinutes` = seuil à partir duquel on compte les heures sup (max(35, weeklyHours) * 60 réparti sur les jours)
+- `overtime25StartMinutes` = seuil à partir duquel les heures sup sont à 25% (39h si contrat >= 39h, sinon 35h)
+- `weeklyOvertimeTotalMinutes` = max(0, worked - overtimeReference) — total heures sup brutes
+- `weeklyOvertime25Minutes` = bonus 25% = round(min(worked, 43*60) - overtime25Start) * 0.25
+- `weeklyOvertime50Minutes` = bonus 50% = round(max(0, worked - 43*60)) * 0.5
+
+Pour la ventilation :
+- `base25Minutes` = min(weeklyOvertimeTotalMinutes, max(0, 43*60 - overtime25StartMinutes))  — Non, c'est la tranche 25% en termes d'heures travaillées, pas en termes d'heures sup.
+
+En fait :
+- Les heures sup brutes = `weeklyOvertimeTotalMinutes` = `worked - overtimeReference`
+- Les heures dans le palier 25% = heures entre `overtime25Start` et `min(worked, 43*60)` = c'est `max(0, min(worked, 43*60) - overtime25Start)`. C'est la base sur laquelle le 25% est calculé.
+- Les heures dans le palier 50% = heures au-dessus de 43h = `max(0, worked - 43*60)`. C'est la base sur laquelle le 50% est calculé.
+
+Modifier les lignes 191-202 :
+
+```php
+$weeklyOvertimeTotalMinutes = $isWeekPresenceTracking
+    ? 0
+    : max(0, $weeklyTotalMinutes - $overtimeReferenceMinutes);
+
+$base25  = ($isWeekPresenceTracking || $disableOvertimeBonuses) ? 0 : max(0, min($weeklyTotalMinutes, 43 * 60) - $overtime25StartMinutes);
+$bonus25 = ($isWeekPresenceTracking || $disableOvertimeBonuses) ? 0 : (int) round($base25 * 0.25);
+$base50  = ($isWeekPresenceTracking || $disableOvertimeBonuses) ? 0 : max(0, $weeklyTotalMinutes - 43 * 60);
+$bonus50 = ($isWeekPresenceTracking || $disableOvertimeBonuses) ? 0 : (int) round($base50 * 0.5);
+
+$results[$weekKey] = new WeekRecoveryDetail(
+    overtimeMinutes: $weeklyOvertimeTotalMinutes,
+    base25Minutes:   $base25,
+    bonus25Minutes:  $bonus25,
+    base50Minutes:   $base50,
+    bonus50Minutes:  $bonus50,
+    totalMinutes:    ($isWeekPresenceTracking || $disableOvertimeBonuses)
+        ? 0
+        : $weeklyOvertimeTotalMinutes + $bonus25 + $bonus50,
+);
+```
+
+Les cas "zéro" (weekStart vide, limitDate dépassée, etc.) retournent `new WeekRecoveryDetail()` (tout à 0).
+
+- [ ] **Step 3: Adapter `computeTotalRecoveryForExercise` pour retourner un `WeekRecoveryDetail` agrégé**
+
+Cette méthode retournait `int`. Elle doit maintenant retourner un `WeekRecoveryDetail` qui agrège toutes les semaines (somme par champ). Le rollover et le provider en ont besoin pour la ventilation du carry-over.
+
+```php
+public function computeTotalRecoveryForExercise(Employee $employee, int $exerciseYear): WeekRecoveryDetail
+{
+    [$from, $to] = $this->resolveExerciseBounds($exerciseYear);
+    $weeks       = $this->buildWeeksForExercise($from, $to);
+    $weekRanges  = array_map(
+        static fn (array $week): array => [
+            'month'      => (int) $week['month'],
+            'weekNumber' => (int) $week['weekNumber'],
+            'start'      => $week['start'],
+            'end'        => $week['end'],
+        ],
+        $weeks
+    );
+
+    $byWeek = $this->computeRecoveryByWeek($employee, $weekRanges, $from, $to, null);
+
+    $total = new WeekRecoveryDetail();
+    foreach ($byWeek as $detail) {
+        $total = new WeekRecoveryDetail(
+            overtimeMinutes: $total->overtimeMinutes + $detail->overtimeMinutes,
+            base25Minutes:   $total->base25Minutes + $detail->base25Minutes,
+            bonus25Minutes:  $total->bonus25Minutes + $detail->bonus25Minutes,
+            base50Minutes:   $total->base50Minutes + $detail->base50Minutes,
+            bonus50Minutes:  $total->bonus50Minutes + $detail->bonus50Minutes,
+            totalMinutes:    $total->totalMinutes + $detail->totalMinutes,
+        );
+    }
+
+    return $total;
+}
+```
+
+- [ ] **Step 4: Vérifier que le code compile**
+
+Run: `docker exec php-sirh-fpm php bin/console cache:clear`
+
+---
+
+## Task 2: Modifier l'entité `EmployeeRttBalance` (carry-over ventilé) + rollover
+
+**Files:**
+- Modify: `src/Entity/EmployeeRttBalance.php`
+- Modify: `src/Repository/EmployeeRttBalanceRepository.php`
+- Modify: `src/Command/RttRolloverCommand.php`
+
+Le carry-over doit être ventilé sur les mêmes 4 colonnes que le tableau (base25, bonus25, base50, bonus50) pour pouvoir afficher une ligne "Report" dans le mois de juin.
+
+- [ ] **Step 1: Remplacer `openingMinutes` par 4 champs dans `EmployeeRttBalance`**
+
+Remplacer la propriété `$openingMinutes` par :
+
+```php
+#[ORM\Column(type: 'integer', options: ['comment' => 'Report N-1 base 25% en minutes.', 'default' => 0])]
+private int $openingBase25Minutes = 0;
+
+#[ORM\Column(type: 'integer', options: ['comment' => 'Report N-1 bonus 25% en minutes.', 'default' => 0])]
+private int $openingBonus25Minutes = 0;
+
+#[ORM\Column(type: 'integer', options: ['comment' => 'Report N-1 base 50% en minutes.', 'default' => 0])]
+private int $openingBase50Minutes = 0;
+
+#[ORM\Column(type: 'integer', options: ['comment' => 'Report N-1 bonus 50% en minutes.', 'default' => 0])]
+private int $openingBonus50Minutes = 0;
+```
+
+Ajouter les getters/setters. Supprimer `getOpeningMinutes`/`setOpeningMinutes`. Ajouter un helper `getTotalOpeningMinutes()` qui retourne la somme des 4 champs.
+
+- [ ] **Step 2: Adapter `RttRolloverCommand`**
+
+`computeTotalRecoveryForExercise` retourne maintenant un `WeekRecoveryDetail`. Utiliser les 4 champs :
+
+```php
+$carry = $this->rttRecoveryService->computeTotalRecoveryForExercise($employee, $previousYear);
+
+$balance = new EmployeeRttBalance()
+    ->setEmployee($employee)
+    ->setYear($targetYear)
+    ->setOpeningBase25Minutes($carry->base25Minutes)
+    ->setOpeningBonus25Minutes($carry->bonus25Minutes)
+    ->setOpeningBase50Minutes($carry->base50Minutes)
+    ->setOpeningBonus50Minutes($carry->bonus50Minutes)
+    ->setIsLocked(false)
+;
+```
+
+- [ ] **Step 3: Adapter `EmployeeRttSummaryProvider::resolveCarryMinutes`**
+
+Cette méthode retournait `int`. La renommer en `resolveCarry` et retourner un `WeekRecoveryDetail` :
+
+```php
+private function resolveCarry(Employee $employee, int $year): WeekRecoveryDetail
+{
+    $balance = $this->rttBalanceRepository->findOneByEmployeeAndYear($employee, $year);
+    if (null !== $balance) {
+        return new WeekRecoveryDetail(
+            base25Minutes:  $balance->getOpeningBase25Minutes(),
+            bonus25Minutes: $balance->getOpeningBonus25Minutes(),
+            base50Minutes:  $balance->getOpeningBase50Minutes(),
+            bonus50Minutes: $balance->getOpeningBonus50Minutes(),
+            totalMinutes:   $balance->getTotalOpeningMinutes(),
+        );
+    }
+
+    return $this->rttRecoveryService->computeTotalRecoveryForExercise($employee, $year - 1);
+}
+```
+
+Adapter le provider pour utiliser le carry ventilé dans le summary :
+- `carryFromPreviousYearMinutes` = carry->totalMinutes
+- Ajouter les 4 champs de carry dans `EmployeeRttSummary` pour le frontend
+
+- [ ] **Step 4: Ajouter les champs carry dans `EmployeeRttSummary`**
+
+```php
+public int $carryBase25Minutes  = 0;
+public int $carryBonus25Minutes = 0;
+public int $carryBase50Minutes  = 0;
+public int $carryBonus50Minutes = 0;
+```
+
+- [ ] **Step 5: Générer et exécuter la migration**
+
+Run: `docker exec php-sirh-fpm php bin/console doctrine:migrations:diff`
+Run: `docker exec php-sirh-fpm php bin/console doctrine:migrations:migrate --no-interaction`
+
+Note : faire la migration après la Task 3 (EmployeeRttPayment) pour regrouper les changements dans une seule migration.
+
+---
+
+## Task 3: Modifier l'entité `EmployeeRttPayment` et la migration
+
+**Files:**
+- Modify: `src/Entity/EmployeeRttPayment.php`
+- Modify: `src/Repository/EmployeeRttPaymentRepository.php`
+
+- [ ] **Step 1: Remplacer `minutes` + `rate` par 4 champs dans l'entité**
+
+Remplacer les propriétés `$minutes` et `$rate` par :
+
+```php
+#[ORM\Column(type: 'integer', options: ['comment' => 'Base heures palier 25% en minutes.', 'default' => 0])]
+private int $base25Minutes = 0;
+
+#[ORM\Column(type: 'integer', options: ['comment' => 'Bonus 25% en minutes.', 'default' => 0])]
+private int $bonus25Minutes = 0;
+
+#[ORM\Column(type: 'integer', options: ['comment' => 'Base heures palier 50% en minutes.', 'default' => 0])]
+private int $base50Minutes = 0;
+
+#[ORM\Column(type: 'integer', options: ['comment' => 'Bonus 50% en minutes.', 'default' => 0])]
+private int $bonus50Minutes = 0;
+```
+
+Ajouter les getters/setters correspondants. Supprimer `getMinutes`/`setMinutes`/`getRate`/`setRate`.
+
+- [ ] **Step 2: Adapter le repository**
+
+Remplacer `findOneByEmployeeYearMonthRate` par `findOneByEmployeeYearMonth` (plus besoin du rate) :
+
+```php
+public function findOneByEmployeeYearMonth(Employee $employee, int $year, int $month): ?EmployeeRttPayment
+{
+    return $this->findOneBy([
+        'employee' => $employee,
+        'year'     => $year,
+        'month'    => $month,
+    ]);
+}
+```
+
+- [ ] **Step 3: Générer et vérifier la migration**
+
+Run: `docker exec php-sirh-fpm php bin/console doctrine:migrations:diff`
+
+Vérifier que la migration :
+- Ajoute `base25_minutes`, `bonus25_minutes`, `base50_minutes`, `bonus50_minutes`
+- Supprime `minutes` et `rate`
+
+Run: `docker exec php-sirh-fpm php bin/console doctrine:migrations:migrate --no-interaction`
+
+---
+
+## Task 3: Adapter le DTO `RttMonthPayment` et `EmployeeRttWeekSummary`
+
+**Files:**
+- Modify: `src/Dto/Rtt/RttMonthPayment.php`
+- Modify: `src/Dto/Rtt/EmployeeRttWeekSummary.php`
+
+- [ ] **Step 1: Modifier `RttMonthPayment`**
+
+Remplacer `paidMinutes25` et `paidMinutes50` par les 4 champs :
+
+```php
+final class RttMonthPayment
+{
+    public function __construct(
+        public int $month,
+        public int $paidBase25Minutes = 0,
+        public int $paidBonus25Minutes = 0,
+        public int $paidBase50Minutes = 0,
+        public int $paidBonus50Minutes = 0,
+    ) {}
+}
+```
+
+- [ ] **Step 2: Enrichir `EmployeeRttWeekSummary`**
+
+Ajouter les champs de détail :
+
+```php
+final class EmployeeRttWeekSummary
+{
+    public function __construct(
+        public int $month,
+        public int $weekNumber,
+        public string $weekStart,
+        public string $weekEnd,
+        public int $overtimeMinutes = 0,
+        public int $base25Minutes = 0,
+        public int $bonus25Minutes = 0,
+        public int $base50Minutes = 0,
+        public int $bonus50Minutes = 0,
+        public int $totalMinutes = 0,
+    ) {}
+}
+```
+
+Supprimer l'ancien champ `recoveryMinutes`.
+
+---
+
+## Task 4: Adapter le provider et le processor backend
+
+**Files:**
+- Modify: `src/State/EmployeeRttSummaryProvider.php`
+- Modify: `src/ApiResource/EmployeeRttSummary.php`
+- Modify: `src/ApiResource/EmployeeRttPaymentInput.php`
+- Modify: `src/State/EmployeeRttPaymentProcessor.php`
+
+- [ ] **Step 1: Adapter `EmployeeRttSummaryProvider::provide`**
+
+Le mapping des semaines (ligne 87-96) doit utiliser les nouveaux champs du `WeekRecoveryDetail` :
+
+```php
+$summary->weeks = array_map(
+    static function (array $week) use ($currentByWeekStart) {
+        $detail = $currentByWeekStart[$week['start']->format('Y-m-d')] ?? new WeekRecoveryDetail();
+
+        return new EmployeeRttWeekSummary(
+            month:           (int) $week['month'],
+            weekNumber:      (int) $week['weekNumber'],
+            weekStart:       $week['start']->format('Y-m-d'),
+            weekEnd:         $week['end']->format('Y-m-d'),
+            overtimeMinutes: $detail->overtimeMinutes,
+            base25Minutes:   $detail->base25Minutes,
+            bonus25Minutes:  $detail->bonus25Minutes,
+            base50Minutes:   $detail->base50Minutes,
+            bonus50Minutes:  $detail->bonus50Minutes,
+            totalMinutes:    $detail->totalMinutes,
+        );
+    },
+    $weekRanges
+);
+```
+
+Le `currentYearRecoveryMinutes` doit sommer les `totalMinutes` :
+
+```php
+$summary->currentYearRecoveryMinutes = array_sum(
+    array_map(static fn (WeekRecoveryDetail $d) => $d->totalMinutes, $currentByWeekStart)
+);
+```
+
+Adapter l'agrégation des paiements (lignes 98-121) pour les 4 champs :
+
+```php
+foreach ($payments as $payment) {
+    $m = $payment->getMonth();
+    if (!isset($monthBuckets[$m])) {
+        $monthBuckets[$m] = ['base25' => 0, 'bonus25' => 0, 'base50' => 0, 'bonus50' => 0];
+    }
+    $monthBuckets[$m]['base25']  += $payment->getBase25Minutes();
+    $monthBuckets[$m]['bonus25'] += $payment->getBonus25Minutes();
+    $monthBuckets[$m]['base50']  += $payment->getBase50Minutes();
+    $monthBuckets[$m]['bonus50'] += $payment->getBonus50Minutes();
+}
+
+foreach ($monthBuckets as $m => $bucket) {
+    $monthPayments[] = new RttMonthPayment($m, $bucket['base25'], $bucket['bonus25'], $bucket['base50'], $bucket['bonus50']);
+    $totalPaidMinutes += $bucket['base25'] + $bucket['bonus25'] + $bucket['base50'] + $bucket['bonus50'];
+}
+```
+
+- [ ] **Step 2: Adapter `EmployeeRttPaymentInput`**
+
+```php
+final class EmployeeRttPaymentInput
+{
+    public int $month          = 0;
+    public int $base25Minutes  = 0;
+    public int $bonus25Minutes = 0;
+    public int $base50Minutes  = 0;
+    public int $bonus50Minutes = 0;
+    public ?int $year          = null;
+}
+```
+
+- [ ] **Step 3: Adapter `EmployeeRttPaymentProcessor`**
+
+Supprimer la validation du `rate`. Adapter le upsert :
+
+```php
+$payment = $this->rttPaymentRepository->findOneByEmployeeYearMonth($employee, $year, $data->month);
+
+if (null === $payment) {
+    $payment = new EmployeeRttPayment();
+    $payment->setEmployee($employee);
+    $payment->setYear($year);
+    $payment->setMonth($data->month);
+    $this->entityManager->persist($payment);
+}
+
+$payment->setBase25Minutes($data->base25Minutes);
+$payment->setBonus25Minutes($data->bonus25Minutes);
+$payment->setBase50Minutes($data->base50Minutes);
+$payment->setBonus50Minutes($data->bonus50Minutes);
+$payment->touch();
+$this->entityManager->flush();
+```
+
+- [ ] **Step 4: Vérifier**
+
+Run: `docker exec php-sirh-fpm php bin/console cache:clear`
+
+---
+
+## Task 5: Adapter le frontend — DTOs et service
+
+**Files:**
+- Modify: `frontend/services/dto/employee-rtt-summary.ts`
+- Modify: `frontend/services/employee-rtt-summary.ts`
+
+- [ ] **Step 1: Mettre à jour les types TS**
+
+```typescript
+export type EmployeeRttWeekSummary = {
+  month: number
+  weekNumber: number
+  weekStart: string
+  weekEnd: string
+  overtimeMinutes: number
+  base25Minutes: number
+  bonus25Minutes: number
+  base50Minutes: number
+  bonus50Minutes: number
+  totalMinutes: number
+}
+
+export type RttMonthPayment = {
+  month: number
+  paidBase25Minutes: number
+  paidBonus25Minutes: number
+  paidBase50Minutes: number
+  paidBonus50Minutes: number
+}
+
+export type EmployeeRttSummary = {
+  year: number
+  carryFromPreviousYearMinutes: number
+  carryBase25Minutes: number
+  carryBonus25Minutes: number
+  carryBase50Minutes: number
+  carryBonus50Minutes: number
+  currentYearRecoveryMinutes: number
+  totalPaidMinutes: number
+  availableMinutes: number
+  weeks: EmployeeRttWeekSummary[]
+  monthPayments: RttMonthPayment[]
+}
+```
+
+- [ ] **Step 2: Adapter le service `createRttPayment`**
+
+```typescript
+export const createRttPayment = async (
+  employeeId: number,
+  month: number,
+  base25Minutes: number,
+  bonus25Minutes: number,
+  base50Minutes: number,
+  bonus50Minutes: number,
+  year?: number
+) => {
+  const api = useApi()
+  const body: Record<string, unknown> = { month, base25Minutes, bonus25Minutes, base50Minutes, bonus50Minutes }
+  if (year) body.year = year
+  return api.patch(`/employees/${employeeId}/rtt-payments`, body)
+}
+```
+
+---
+
+## Task 6: Réécrire `RttTab.vue`
+
+**Files:**
+- Modify: `frontend/components/employees/RttTab.vue`
+
+- [ ] **Step 1: Réécrire le composant complet**
+
+Structure du template :
+1. En-tête avec navigation mensuelle (flèches `<` `>`) et "RTT À LA DATE DU JOUR : X heure"
+2. Tableau 7 colonnes : Semaine | Heure | Base | 25% | Base | 50% | Total
+3. Si mois de juin (premier mois de l'exercice) et carry > 0 : ligne "Report" avec les 4 valeurs carry (colonne Heure = "-")
+4. 5 lignes semaines (padding si < 5)
+5. Ligne Total (somme par colonne, incluant le report si présent)
+6. Ligne Payé (valeurs négatives, "-" pour colonne Heure)
+7. Ligne Reste (Total - |Payé|, "-" pour colonne Heure)
+8. Bouton "+ Payer les RRT"
+9. Drawer de paiement avec 5 champs
+
+Script setup :
+- `currentMonthIndex` : ref (0-11) pour la navigation dans `orderedMonthIndexes` (toujours [5,6,7,8,9,10,11,0,1,2,3,4] = juin à mai)
+- Initialiser `currentMonthIndex` au mois courant dans l'exercice
+- `currentMonth` : computed qui retourne le numéro de mois (1-12) basé sur l'index
+- `weeksForMonth` : computed filtrant les semaines du summary pour le mois courant, paddé à 5
+- `monthPayment` : computed trouvant le paiement du mois dans `summary.monthPayments`
+- Totaux par colonne : computed sommant les semaines
+- `formatMinutes` : existant, réutiliser (format `Xh` ou `Xh Ym`)
+- Navigation : `prevMonth` / `nextMonth` modifiant `currentMonthIndex` avec bornes [0, 11]
+
+Drawer de paiement :
+- Champs : Mois (select), Base 25% (number en heures), Heures 25% (number en heures), Base 50% (number en heures), Heures 50% (number en heures)
+- Si paiement existant pour le mois sélectionné : pré-remplir en convertissant minutes → heures
+- Emit : `submit-rtt-payment` avec les 4 valeurs converties en minutes + le mois
+
+- [ ] **Step 2: Adapter le composant parent**
+
+Chercher où `RttTab` est utilisé et adapter l'event handler `submit-rtt-payment` pour passer les 4 champs au lieu de `(month, minutes, rate)`.
+
+Run: `grep -rn "submit-rtt-payment" frontend/` pour trouver le parent.
+
+---
+
+## Task 7: Test de bout en bout
+
+- [ ] **Step 1: Vérifier le cache et la migration**
+
+```bash
+docker exec php-sirh-fpm php bin/console cache:clear
+docker exec php-sirh-fpm php bin/console doctrine:migrations:migrate --no-interaction
+```
+
+- [ ] **Step 2: Tester l'API**
+
+Vérifier que `GET /api/employees/{id}/rtt-summary` retourne les nouveaux champs par semaine.
+Vérifier que `PATCH /api/employees/{id}/rtt-payments` accepte les 4 champs.
+
+- [ ] **Step 3: Tester le frontend**
+
+- Navigation mensuelle (flèches, mois courant par défaut)
+- Tableau : vérifier les valeurs par semaine
+- Paiement : créer, modifier, vérifier pré-remplissage
+- "RTT À LA DATE DU JOUR" : vérifier le cumul

docs/superpowers/specs/2026-03-12-contract-suspension-design.md

@@ -0,0 +1,187 @@
+# Suspension de contrat — Design Spec
+
+## Objectif
+
+Permettre de suspendre un contrat employé. Une suspension empêche l'acquisition de congés durant la période concernée (prorata). S'applique aux CDI/CDD non forfait et aux forfaits 218.
+
+## Contraintes
+
+- Plusieurs suspensions possibles par période de contrat
+- Pas de suppression de suspension (hors scope)
+- Règle de calcul : on exclut les jours de suspension jusqu'au dernier mois complet terminé (cohérent avec la règle existante)
+- Suspension sans date de fin = suspension en cours indéfiniment (exclut les mois jusqu'au dernier mois terminé)
+- Les suspensions ne doivent pas se chevaucher sur une même période de contrat
+
+## Modèle de données
+
+### Nouvelle entité `ContractSuspension`
+
+Nouvelle table `contract_suspensions` :
+
+| Colonne | Type | Nullable | Description |
+|---------|------|----------|-------------|
+| `id` | SERIAL | non | PK |
+| `contract_period_id` | INT | non | FK vers `employee_contract_periods`, CASCADE delete |
+| `start_date` | DATE | non | Début de suspension |
+| `end_date` | DATE | oui | Fin de suspension (null = en cours) |
+| `comment` | TEXT | oui | Commentaire libre |
+| `created_at` | TIMESTAMP | non | Date de création technique |
+
+Index : `(contract_period_id, start_date)`.
+
+Relation : `EmployeeContractPeriod` ← OneToMany → `ContractSuspension`.
+
+## Backend — API
+
+### Endpoint dédié
+
+Les suspensions sont gérées via un endpoint dédié plutôt que via les champs transients Employee. Cela évite de complexifier le `EmployeeWriteProcessor` et permet de gérer N suspensions proprement.
+
+**Nouvel ApiResource `ContractSuspension` :**
+- `POST /api/contract_suspensions` — créer une suspension (body : `contractPeriod` IRI, `startDate`, `endDate`, `comment`)
+- `PATCH /api/contract_suspensions/{id}` — modifier une suspension existante
+- Security : `ROLE_ADMIN`
+- Pagination désactivée
+
+**Processor custom `ContractSuspensionWriteProcessor` :**
+- Résout la période de contrat depuis l'IRI
+- Validation :
+  - `startDate` requis
+  - `endDate >= startDate` si renseigné
+  - `startDate >= period.startDate`
+  - Pour les CDD/contrats avec date de fin : `startDate` et `endDate` dans les bornes de la période
+  - Pas de chevauchement avec les autres suspensions de la même période
+  - Rejet si la période de contrat est déjà clôturée (date de fin dans le passé)
+
+### Lecture
+
+Exposer les suspensions dans la sérialisation de l'Employee :
+
+- `Employee::getCurrentSuspensions(): array` — retourne les suspensions de la période de contrat courante, groupe `employee:read`
+- Ajouter les suspensions au `ContractHistoryItem` via `EmployeeContractPeriod::getSuspensions()`
+
+## Backend — Calcul des congés
+
+### Deux points d'impact
+
+Le calcul d'acquisition existe à **deux endroits** qui doivent tous les deux prendre en compte les suspensions :
+
+1. **`EmployeeLeaveSummaryProvider::computeAccruedDaysFromStart()`** — affichage live des congés en cours d'acquisition
+2. **`LeaveBalanceComputationService::computeAccruedDays()`** — utilisé par le rollover (`LeaveRolloverCommand`) pour calculer le solde de report
+
+Les deux méthodes ont la même structure (boucle mois par mois) et doivent être modifiées de la même manière.
+
+### Modification des méthodes de calcul
+
+Pour les deux méthodes, ajouter un paramètre optionnel : `array $suspensions = []` (tableau de `{start: DateTimeImmutable, end: ?DateTimeImmutable}`).
+
+Dans la boucle mois par mois, pour chaque mois :
+1. Calculer les jours couverts par la période de contrat (existant)
+2. Pour chaque suspension, calculer le nombre de jours suspendus qui tombent dans ce mois
+3. Soustraire le total des jours suspendus
+4. Le ratio du mois = max(0, jours couverts - jours suspendus) / jours dans le mois
+
+Cela gère automatiquement les suspensions qui commencent/finissent en milieu de mois (prorata).
+
+Une suspension sans date de fin utilise la date de fin de calcul comme borne (dernier jour du mois précédent, cohérent avec la règle existante).
+
+**Note :** chaque méthode est appelée deux fois — une pour les jours, une pour les samedis. La soustraction de suspension s'applique aux deux appels.
+
+### Impact sur les forfaits 218
+
+Pour les forfaits, les jours acquis en début d'exercice (ex: 34 jours pour 2026) sont réduits au prorata des jours de suspension.
+
+Calcul : `jours acquis = base × (jours ouvrés effectifs / jours ouvrés totaux de l'exercice)`
+
+Où `jours ouvrés effectifs = jours ouvrés totaux - jours ouvrés suspendus`.
+
+Cela impacte `EmployeeLeaveSummaryProvider` dans la branche forfait et `LeaveBalanceComputationService` dans le calcul forfait de `computeDynamicClosingForYear()`.
+
+### Passage des données de suspension aux méthodes
+
+- **`EmployeeLeaveSummaryProvider`** : le provider a accès aux périodes de contrat via l'Employee. Il doit résoudre les suspensions de la période couvrant l'exercice et les passer aux méthodes de calcul.
+- **`LeaveBalanceComputationService`** : le service utilise `$employee->getContractHistory()`. Il doit trouver les suspensions de la période couvrant l'exercice. L'accès au repository `EmployeeContractPeriodRepository` est déjà injecté — ajouter l'accès au repository `ContractSuspensionRepository` ou passer par la relation Doctrine.
+
+### Impact sur la bascule d'exercice (rollover au 01/06)
+
+Le rollover (`LeaveRolloverCommand`) appelle `LeaveBalanceComputationService::computeDynamicClosingForYear()` qui appelle `computeAccruedDays()`. En modifiant `computeAccruedDays()` pour accepter et traiter les suspensions, le rollover prendra automatiquement en compte les suspensions. Les jours acquis au rollover reflèteront la déduction.
+
+**Exemple CDI :** exercice 2027 (juin 2026 - mai 2027), 2 suspensions totalisant 3 mois → au lieu de 25j acquis, l'employé bascule avec ~18.75j (9 mois effectifs × 2.083j/mois).
+
+### Règles non impactées
+
+- INTERIM : pas de congés gérés
+
+## Frontend — UI
+
+### Bouton et drawer
+
+Le bouton "Clôturer" devient **"Modifier"**. Il ouvre le drawer existant avec le titre **"Modifier le contrat"**. Le bouton **"+ Ajouter"** (création de nouveau contrat) reste inchangé.
+
+Le drawer contient 2 onglets :
+
+**Onglet "Clôturer"** — contenu identique à l'actuel (type contrat, temps de travail, début contrat en readonly, date fin, commentaire, checkbox solde de tout compte).
+
+**Onglet "Suspendre"** — formulaires empilés :
+- Pour chaque suspension existante : un formulaire pré-rempli avec les 3 champs (date début, date fin, commentaire) et un bouton **"Modifier"**
+- En bas : un bouton **"+ Ajouter"** qui ajoute un nouveau formulaire vide avec les 3 champs et un bouton **"Ajouter"**
+- Chaque formulaire est indépendant (soumission individuelle)
+
+### Champs par formulaire de suspension
+
+- Date de début (required, input date)
+- Date de fin (optionnel, input date)
+- Commentaire (optionnel, textarea)
+
+### Données nécessaires côté frontend
+
+Nouveau type `ContractSuspension` (DTO) :
+```typescript
+type ContractSuspension = {
+  id: number
+  startDate: string
+  endDate?: string | null
+  comment?: string | null
+}
+```
+
+Ajouter au type `Employee` (DTO) :
+- `currentSuspensions?: ContractSuspension[]`
+
+Ajouter au type `ContractHistoryItem` :
+- `suspensions?: ContractSuspension[]`
+
+Nouveau service `frontend/services/contractSuspensions.ts` :
+- `createSuspension(payload)` — POST
+- `updateSuspension(id, payload)` — PATCH
+
+## Exemples de calcul
+
+### CDI/CDD non forfait
+
+Contrat CDI démarré le 01/06/2026, exercice 2027 (juin 2026 - mai 2027).
+Accrual : 25j / 12 mois = 2.083j/mois.
+
+Sans suspension au 12/03/2027 (9 mois complets : juin-février) :
+- En cours d'acquisition = 9 × 2.083 = 18.75j
+
+Avec 2 suspensions (01/01 au 31/01 + 01/03 au 31/03 = 2 mois) au 12/04/2027 (10 mois complets - 2 suspendus = 8 mois effectifs) :
+- En cours d'acquisition = 8 × 2.083 = 16.67j
+
+Samedis (5/12 par mois) :
+- Sans suspension : 9 × 0.417 = 3.75j
+- Avec 2 suspensions : 8 × 0.417 = 3.33j
+
+### Forfait 218
+
+Exercice 2026 (année civile), 34 jours acquis, 252 jours ouvrés dans l'année.
+Suspension de 2 mois (44 jours ouvrés).
+
+- Jours ouvrés effectifs = 252 - 44 = 208
+- Jours acquis = 34 × (208 / 252) = 28.06j
+
+## Hors scope
+
+- Suppression d'une suspension
+- Affichage de la suspension dans l'historique des contrats (les données sont sérialisées mais pas de rendu spécifique dans le tableau historique)
+- Auto-fermeture des suspensions lors de la clôture du contrat

docs/superpowers/specs/2026-03-13-rtt-tab-redesign.md

@@ -0,0 +1,117 @@
+# Refonte onglet RTT employé
+
+## Contexte
+
+L'onglet RTT actuel affiche une grille annuelle de 12 mois avec les minutes de récupération par semaine. Il doit être remplacé par une vue mensuelle détaillée avec navigation, un tableau ventilé par palier de majoration (25% / 50%), et un système de paiement à 4 champs.
+
+## Maquette de référence
+
+Fichier : `RTT.png` à la racine du projet.
+
+## Structure de la vue
+
+### En-tête
+
+- Navigation mensuelle : `< MOIS ANNÉE >` (flèches gauche/droite)
+- Navigation limitée aux mois de l'exercice (juin N-1 à mai N)
+- Mois courant affiché par défaut à l'ouverture
+- En haut à droite : `RTT À LA DATE DU JOUR : X heure` (cumul annuel toutes semaines confondues)
+
+### Tableau
+
+7 colonnes :
+
+| Semaine | Heure | Base | 25% | Base | 50% | Total |
+|---------|-------|------|-----|------|-----|-------|
+
+- **Semaine** : label "Semaine 1" à "Semaine 5" (toujours 5 lignes, vide si le mois n'a que 4 semaines)
+- **Heure** : heures supplémentaires brutes de la semaine
+- **Base** (1er) : heures de base dans le palier 25% (heures entre 35h et 39h pour un contrat 39h)
+- **25%** : bonus = base 25% × 0.25
+- **Base** (2e) : heures de base dans le palier 50% (heures au-delà de 43h)
+- **50%** : bonus = base 50% × 0.50
+- **Total** : somme de toutes les bases + tous les bonus
+
+### Lignes de synthèse
+
+- **Total** : somme des 5 semaines par colonne
+- **Payé** : montants payés pour ce mois (affichés en négatif). Colonne "Heure" = "-"
+- **Reste** : Total - |Payé| par colonne. Colonne "Heure" = "-"
+
+### Bouton
+
+`+ Payer les RRT` en bas, centré. Ouvre un drawer.
+
+## Drawer de paiement
+
+Champs :
+1. **Mois** (select) : liste des mois de l'exercice
+2. **Base 25%** (number, en heures)
+3. **Heures 25%** (number, en heures)
+4. **Base 50%** (number, en heures)
+5. **Heures 50%** (number, en heures)
+
+Si des paiements existent pour le mois sélectionné, le formulaire est pré-rempli pour modification.
+
+Boutons : Annuler / Enregistrer.
+
+## Rattachement semaine → mois
+
+Règle existante conservée : une semaine est rattachée au mois de son **samedi** (voir `RttRecoveryComputationService::buildWeeksForExercise`).
+
+## Backend
+
+### Modification de `EmployeeRttSummary`
+
+Le provider retourne les données pour un mois donné (paramètre query `?month=X`) en plus du cumul annuel.
+
+Nouvelles données par semaine :
+- `overtimeMinutes` : heures sup brutes
+- `base25Minutes` : base palier 25%
+- `bonus25Minutes` : bonus 25%
+- `base50Minutes` : base palier 50%
+- `bonus50Minutes` : bonus 50%
+- `totalMinutes` : somme base + bonus
+
+### Modification de `EmployeeRttPayment`
+
+Remplacer les champs `minutes` (int) + `rate` (int 25/50) par :
+- `base25Minutes` (int)
+- `bonus25Minutes` (int)
+- `base50Minutes` (int)
+- `bonus50Minutes` (int)
+
+Migration Doctrine nécessaire.
+
+### Modification de `EmployeeRttPaymentInput`
+
+Adapter les champs pour correspondre aux 4 nouvelles valeurs.
+
+### Modification de `RttRecoveryComputationService`
+
+`computeRecoveryByWeek` retourne déjà les minutes totales. Il faut enrichir le retour pour ventiler base/bonus par palier. La logique de calcul des paliers existe déjà en interne, il suffit de l'exposer.
+
+## Frontend
+
+### Stockage vs affichage
+
+- Backend : stockage en **minutes** (inchangé)
+- Frontend : conversion minutes ↔ heures à l'affichage et à la saisie
+
+### Réécriture de `RttTab.vue`
+
+- Supprimer la grille annuelle de 12 mois
+- Navigation mensuelle avec état réactif (mois courant)
+- Tableau HTML avec les 7 colonnes décrites
+- 5 lignes semaines + Total + Payé + Reste
+- Formatage en "Xh" ou "Xh Ym" (ex: "6h 30m")
+
+### Modification du DTO TypeScript
+
+Adapter `EmployeeRttSummary` et `EmployeeRttWeekSummary` pour les nouveaux champs.
+
+## Unités de conversion
+
+- Affichage : heures et minutes (ex: "6h 30m", "30 m")
+- Saisie paiement : en heures décimales (number input)
+- Stockage : minutes entières (int)

frontend/components/AbsenceFormDrawer.vue

@@ -93,28 +93,29 @@
                 />
             </div>
 
-            <div class="flex justify-end gap-3 pt-2">
+            <div v-if="editingAbsence" class="grid grid-cols-2 gap-3 pt-2">
                 <button
-                    v-if="editingAbsence"
                     type="button"
-                    class="rounded-lg border border-red-200 px-4 py-2 text-md font-semibold text-red-600 hover:bg-red-50"
+                    class="flex items-center justify-center rounded-md bg-red-500 px-4 py-2 text-md font-semibold text-white hover:bg-red-600"
                     @click="handleDelete"
                 >
                     Supprimer
                 </button>
-                <button
-                    type="button"
-                    class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-                    @click="handleCancel"
-                >
-                    Annuler
-                </button>
                 <button
                     type="submit"
-                    class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                    class="flex items-center justify-center rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
                     :class="submitButtonClass"
                 >
-                    Enregistrer
+                    Modifier
+                </button>
+            </div>
+            <div v-else class="flex justify-center pt-2">
+                <button
+                    type="submit"
+                    class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                    :class="submitButtonClass"
+                >
+                    + Ajouter
                 </button>
             </div>
         </form>

frontend/components/AbsencePrintDrawer.vue

@@ -96,17 +96,10 @@
                 </p>
             </div>
 
-            <div class="flex justify-end gap-3 pt-2">
-                <button
-                    type="button"
-                    class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-                    @click="handleCancel"
-                >
-                    Annuler
-                </button>
+            <div class="flex justify-center pt-2">
                 <button
                     type="submit"
-                    class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                    class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
                     :class="submitButtonClass"
                 >
                     Imprimer

frontend/components/AppDrawer.vue

@@ -5,19 +5,12 @@
     </Transition>
     <Transition name="drawer-panel">
       <div class="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl">
-        <div class="flex items-center justify-between border-b border-neutral-200 bg-tertiary-500 px-6 py-4">
-          <h2 class="text-lg font-semibold text-neutral-900">
+        <div class="flex items-center justify-between px-[20px] pt-8 pb-8">
+          <h2 class="text-[32px] font-semibold text-primary-500">
             {{ title }}
           </h2>
-          <button
-            type="button"
-            class="rounded-md p-2 text-neutral-500 hover:bg-neutral-100"
-            @click="close"
-          >
-            ✕
-          </button>
         </div>
-        <div class="p-6">
+        <div class="overflow-y-auto px-[20px]" style="max-height: calc(100% - 65px)">
           <slot />
         </div>
       </div>

frontend/components/EmployeeYearlyHoursDrawer.vue

@@ -0,0 +1,67 @@
+<template>
+    <AppDrawer v-model="drawerOpen" title="Export heures annuelles">
+        <form class="space-y-4" @submit.prevent="handleSubmit">
+            <div>
+                <label class="text-md font-semibold text-neutral-700" for="yearly-hours-year">
+                    Année <span class="text-red-600">*</span>
+                </label>
+                <select
+                    id="yearly-hours-year"
+                    v-model="selectedYear"
+                    :class="selectFieldClass"
+                >
+                    <option v-for="y in years" :key="y" :value="y">{{ y }}</option>
+                </select>
+            </div>
+
+            <div class="flex justify-center pt-2">
+                <button
+                    type="submit"
+                    class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                >
+                    Imprimer
+                </button>
+            </div>
+        </form>
+    </AppDrawer>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import AppDrawer from '~/components/AppDrawer.vue'
+
+const props = defineProps<{
+    modelValue: boolean
+    employeeId: number
+}>()
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: boolean): void
+    (event: 'submit', year: number): void
+}>()
+
+const drawerOpen = computed({
+    get: () => props.modelValue,
+    set: (value: boolean) => emit('update:modelValue', value)
+})
+
+const currentYear = new Date().getFullYear()
+const years = Array.from({ length: 6 }, (_, i) => currentYear - i)
+const selectedYear = ref(currentYear)
+
+const baseInputClass = 'mt-2 w-full rounded-md border px-3 py-2 text-md text-neutral-900'
+const selectFieldClass = computed(() => `${baseInputClass} border-neutral-300`)
+
+const handleSubmit = () => {
+    emit('submit', selectedYear.value)
+}
+
+watch(
+    () => props.modelValue,
+    (isOpen) => {
+        if (!isOpen) {
+            selectedYear.value = currentYear
+        }
+    }
+)
+</script>

frontend/components/SalaryRecapDrawer.vue

@@ -0,0 +1,87 @@
+<template>
+    <AppDrawer v-model="drawerOpen" title="Récapitulatif Salaire">
+        <form class="space-y-4" @submit.prevent="handleSubmit">
+            <div>
+                <label class="text-md font-semibold text-neutral-700" for="salary-recap-month">
+                    Mois <span class="text-red-600">*</span>
+                </label>
+                <input
+                    id="salary-recap-month"
+                    v-model="selectedMonth"
+                    type="month"
+                    :class="monthFieldClass"
+                />
+                <p v-if="showMonthError" class="mt-1 text-sm text-red-600">
+                    Le mois est obligatoire.
+                </p>
+            </div>
+
+            <div class="flex justify-center pt-2">
+                <button
+                    type="submit"
+                    class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                    :class="submitButtonClass"
+                >
+                    Imprimer
+                </button>
+            </div>
+        </form>
+    </AppDrawer>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import AppDrawer from '~/components/AppDrawer.vue'
+
+const props = defineProps<{
+    modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: boolean): void
+    (event: 'submit', month: string): void
+}>()
+
+const drawerOpen = computed({
+    get: () => props.modelValue,
+    set: (value: boolean) => emit('update:modelValue', value)
+})
+
+const now = new Date()
+const defaultMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+const selectedMonth = ref(defaultMonth)
+const validationTouched = ref(false)
+
+const isMonthValid = computed(() => selectedMonth.value.trim() !== '')
+const showMonthError = computed(() => validationTouched.value && !isMonthValid.value)
+
+const baseInputClass = 'mt-2 w-full rounded-md border px-3 py-2 text-md text-neutral-900'
+const monthFieldClass = computed(() => {
+    if (showMonthError.value) {
+        return `${baseInputClass} border-red-500`
+    }
+    return `${baseInputClass} border-neutral-300`
+})
+
+const submitButtonClass = computed(() => {
+    if (!isMonthValid.value) {
+        return 'opacity-50 cursor-not-allowed'
+    }
+    return ''
+})
+
+const handleSubmit = () => {
+    validationTouched.value = true
+    if (!isMonthValid.value) return
+    emit('submit', selectedMonth.value)
+}
+
+watch(
+    () => props.modelValue,
+    (isOpen) => {
+        if (!isOpen) {
+            validationTouched.value = false
+        }
+    }
+)
+</script>

frontend/components/SiteFilterSelector.vue

@@ -14,7 +14,7 @@
 
     <div
       v-if="isOpen"
-      class="absolute left-0 top-full z-20 mt-2 max-h-80 w-full overflow-auto rounded-md border border-neutral-200 bg-white p-3 shadow-lg"
+      class="z-50 absolute left-0 top-full z-20 mt-2 max-h-80 w-full overflow-auto rounded-md border border-neutral-200 bg-white p-3 shadow-lg"
     >
       <div class="flex flex-col gap-2">
         <label

frontend/components/driver-hours/DriverHoursDayView.vue

@@ -0,0 +1,241 @@
+<template>
+    <div class="bg-white overflow-hidden flex min-h-0 flex-col">
+        <div class="overflow-y-auto min-h-0">
+            <div
+                class="grid w-full min-w-0 gap-1 border border-black bg-tertiary-500 px-4 py-3 text-sm font-semibold text-black rounded-t-md sticky top-0 z-10"
+                :style="{ gridTemplateColumns: dayGridCols }"
+            >
+                <span>Nom</span>
+                <span class="pl-2">Absence</span>
+                <span class="pl-4">Heure de jour</span>
+                <span class="pl-2">Heure de nuit</span>
+                <span class="pl-2">Heure atelier</span>
+                <span class="pl-2">Total</span>
+                <span>Petit déj.</span>
+                <span>Déjeuner</span>
+                <span>Dîner</span>
+                <span>Nuitée</span>
+                <span v-if="isAdmin" class="flex justify-between items-center">
+          <span>Valider</span>
+          <input
+              ref="bulkValidationInput"
+              :checked="isBulkValidationChecked"
+              type="checkbox"
+              class="h-4 w-4 cursor-pointer"
+              @change="onBulkValidationChange"
+          />
+        </span>
+                <span v-else-if="isSiteManager" class="inline-flex items-center gap-2">
+          <span>Site</span>
+          <input
+              ref="bulkSiteValidationInput"
+              :checked="isBulkSiteValidationChecked"
+              type="checkbox"
+              class="h-4 w-4"
+              :class="canBulkToggleSiteValidation ? 'cursor-pointer' : 'cursor-not-allowed opacity-50'"
+              :disabled="!canBulkToggleSiteValidation"
+              @change="onBulkSiteValidationChange"
+          />
+        </span>
+                <span v-else>Site <Icon name="mdi:check-bold" class="ml-1"/></span>
+                <span v-if="!isAdmin">RH <Icon name="mdi:check-bold" class="ml-1"/></span>
+            </div>
+
+            <div class="border-x border-b border-primary-500 rounded-b-md">
+                <div
+                    v-for="employee in employees"
+                    :key="employee.id"
+                    class="grid w-full min-w-0 items-center gap-1 border-b border-primary-500 px-4 py-2 text-sm font-bold text-primary-500 last:border-b-0 hover:bg-tertiary-500"
+                    :style="{ gridTemplateColumns: dayGridCols }"
+                >
+                    <div class="text-neutral-900 min-w-0">
+                        <p class="font-semibold truncate">
+                            {{ employee.firstName }} {{ employee.lastName }}
+                            <span class="font-normal text-neutral-600">({{ contractLabel(employee) }})</span>
+                        </p>
+                        <p class="text-neutral-500 truncate inline-flex items-center gap-2">
+                            <span>{{ employee.site?.name ?? 'Sans site' }}</span>
+                            <span
+                                v-if="isAdmin && (rows[employee.id]?.isSiteValid ?? false)"
+                                class="rounded-full bg-green-500 flex justify-center item-center text-white p-0.5"
+                                title="Validation site"
+                            >
+                <Icon name="mdi:check"/>
+              </span>
+                        </p>
+                        <p v-if="isAdmin && getRowUpdatedAt(employee.id)" class="text-neutral-400 text-xs truncate">
+                            Modifié le {{ getRowUpdatedAt(employee.id) }}
+                        </p>
+                    </div>
+                    <div class="pl-2 min-w-0 self-stretch flex flex-col gap-1 justify-between py-0.5">
+                        <p
+                            class="w-full min-w-0 rounded-md px-2 py-1 text-xs truncate"
+                            :class="getRowAbsenceLabel(employee.id) ? 'text-white' : 'invisible'"
+                            :title="getRowAbsenceLabel(employee.id) || ''"
+                            :style="getRowAbsenceStyle(employee.id)"
+                        >
+                            {{ getRowAbsenceLabel(employee.id) || '—' }}
+                        </p>
+                        <button
+                            type="button"
+                            class="self-start text-left text-xs font-semibold underline"
+                            :class="isHoliday || isRowLocked(employee.id) || !hasContractAtSelectedDate(employee.id) ? 'text-neutral-400 cursor-not-allowed' : 'text-primary-500 cursor-pointer'"
+                            :disabled="isHoliday || isRowLocked(employee.id) || !hasContractAtSelectedDate(employee.id)"
+                            @click="onAbsenceClick(employee.id)"
+                        >
+                            Modifier
+                        </button>
+                    </div>
+                    <div class="pl-4">
+                        <TimeSelect
+                            v-model="rows[employee.id].dayHours"
+                            :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id)"
+                        />
+                    </div>
+                    <div class="pl-2">
+                        <TimeSelect
+                            v-model="rows[employee.id].nightHours"
+                            :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id)"
+                        />
+                    </div>
+                    <div class="pl-2">
+                        <TimeSelect
+                            v-model="rows[employee.id].workshopHours"
+                            :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id)"
+                        />
+                    </div>
+                    <div class="pl-2 text-sm font-semibold">
+                        {{ formatMinutes(getRowMetrics(employee.id).totalMinutes) }}
+                    </div>
+                    <div class="flex">
+                        <input
+                            v-model="rows[employee.id].hasBreakfast"
+                            type="checkbox"
+                            class="cursor-pointer h-4 w-4"
+                            :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id)"
+                        />
+                    </div>
+                    <div class="flex">
+                        <input
+                            v-model="rows[employee.id].hasLunch"
+                            type="checkbox"
+                            class="cursor-pointer h-4 w-4"
+                            :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id)"
+                        />
+                    </div>
+                    <div class="flex">
+                        <input
+                            v-model="rows[employee.id].hasDinner"
+                            type="checkbox"
+                            class="cursor-pointer h-4 w-4"
+                            :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id)"
+                        />
+                    </div>
+                    <div class="flex">
+                        <input
+                            v-model="rows[employee.id].hasOvernight"
+                            type="checkbox"
+                            class="cursor-pointer h-4 w-4"
+                            :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id)"
+                        />
+                    </div>
+                    <div v-if="isAdmin" class="text-right">
+                        <input
+                            :checked="rows[employee.id]?.isValid ?? false"
+                            type="checkbox"
+                            class="h-4 w-4 cursor-pointer"
+                            @change="onToggleValidation(employee.id, ($event.target as HTMLInputElement).checked)"
+                        />
+                    </div>
+                    <div v-else class="text-right p-5">
+                        <input
+                            v-if="isSiteManager"
+                            :checked="rows[employee.id]?.isSiteValid ?? false"
+                            type="checkbox"
+                            class="h-4 w-4 cursor-pointer"
+                            :disabled="(!canToggleSiteValidation(employee.id) && !canCreateSiteValidationRowFromAbsence(employee.id)) || isSiteValidationPending(employee.id)"
+                            @change="onToggleSiteValidation(employee.id, ($event.target as HTMLInputElement).checked)"
+                        />
+                        <span v-else-if="rows[employee.id]?.isSiteValid" class="text-xs font-semibold text-neutral-700">Validé</span>
+                        <span v-else class="text-xs text-neutral-500">-</span>
+                    </div>
+                    <div v-if="!isAdmin">
+                        <span v-if="rows[employee.id]?.isValid" class="text-xs font-semibold text-neutral-700">Validé</span>
+                        <span v-else class="text-xs text-neutral-500">-</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Employee } from '~/services/dto/employee'
+import TimeSelect from '~/components/ui/TimeSelect.vue'
+import type { DriverHourRow } from '~/services/dto/work-hour'
+
+const rows = defineModel<Record<number, DriverHourRow>>('rows', { required: true })
+const bulkValidationInput = ref<HTMLInputElement | null>(null)
+const bulkSiteValidationInput = ref<HTMLInputElement | null>(null)
+
+const props = defineProps<{
+    employees: Employee[]
+    isAdmin: boolean
+    isSiteManager: boolean
+    dayGridCols: string
+    isHoliday: boolean
+    contractLabel: (employee: Employee) => string
+    isRowLocked: (employeeId: number) => boolean
+    hasContractAtSelectedDate: (employeeId: number) => boolean
+    isValidationPending: (employeeId: number) => boolean
+    isSiteValidationPending: (employeeId: number) => boolean
+    canToggleValidation: (employeeId: number) => boolean
+    canToggleSiteValidation: (employeeId: number) => boolean
+    canCreateSiteValidationRowFromAbsence: (employeeId: number) => boolean
+    isBulkValidationChecked: boolean
+    isBulkValidationIndeterminate: boolean
+    isBulkSiteValidationChecked: boolean
+    isBulkSiteValidationIndeterminate: boolean
+    canBulkToggleSiteValidation: boolean
+    onToggleValidation: (employeeId: number, checked: boolean) => void
+    onToggleSiteValidation: (employeeId: number, checked: boolean) => void
+    onToggleValidationBulk: (checked: boolean) => Promise<void> | void
+    onToggleSiteValidationBulk: (checked: boolean) => Promise<void> | void
+    getRowMetrics: (employeeId: number) => { dayMinutes: number; nightMinutes: number; totalMinutes: number }
+    getRowAbsenceLabel: (employeeId: number) => string
+    getRowAbsenceStyle: (employeeId: number) => { backgroundColor: string } | undefined
+    getRowUpdatedAt: (employeeId: number) => string
+    onAbsenceClick: (employeeId: number) => void
+    formatMinutes: (minutes: number) => string
+}>()
+
+const onBulkValidationChange = (event: Event) => {
+    props.onToggleValidationBulk((event.target as HTMLInputElement).checked)
+}
+
+const onBulkSiteValidationChange = (event: Event) => {
+    props.onToggleSiteValidationBulk((event.target as HTMLInputElement).checked)
+}
+
+const onToggleSiteValidation = (employeeId: number, checked: boolean) => {
+    props.onToggleSiteValidation(employeeId, checked)
+}
+
+watch(
+    () => props.isBulkValidationIndeterminate,
+    (isIndeterminate) => {
+        if (!bulkValidationInput.value) return
+        bulkValidationInput.value.indeterminate = isIndeterminate
+    },
+    { immediate: true }
+)
+
+watch(
+    () => props.isBulkSiteValidationIndeterminate,
+    (isIndeterminate) => {
+        if (!bulkSiteValidationInput.value) return
+        bulkSiteValidationInput.value.indeterminate = isIndeterminate
+    },
+    { immediate: true }
+)
+</script>

frontend/components/driver-hours/DriverHoursWeekView.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="bg-white overflow-hidden flex min-h-0 flex-col">
+    <div v-if="isWeekLoading" class="p-6 text-md text-neutral-600">Chargement de la semaine...</div>
+    <div v-else class="overflow-y-auto min-h-0">
+      <div
+        class="grid w-full min-w-0 gap-1 border border-black bg-tertiary-500 px-4 py-3 text-sm font-semibold text-black rounded-t-md sticky top-0 z-10"
+        :style="{ gridTemplateColumns: weekGridCols }"
+      >
+        <span>Nom</span>
+        <span v-for="day in weekDayHeaders" :key="day.date" class="text-left">{{ day.weekday }}<br>{{ day.dayDate }}</span>
+        <span>Jour/Nuit <br>sem.</span>
+        <span>Atelier <br>sem.</span>
+        <span>Total <br>sem.</span>
+        <span>Total <br>h. supp.</span>
+        <span>+25%</span>
+        <span>+50%</span>
+        <span>Total <br>récup.</span>
+        <span>Petit <br>déj.</span>
+        <span>Déj.</span>
+        <span>Dîner</span>
+        <span>Nuit.</span>
+      </div>
+
+      <div class="border-x border-b border-primary-500 rounded-b-md">
+      <div
+        v-for="row in weeklySummary?.rows ?? []"
+        :key="row.employeeId"
+        class="grid w-full min-w-0 items-center gap-1 border-b border-primary-500 px-4 py-2 text-sm font-bold text-primary-500 last:border-b-0 hover:bg-tertiary-500"
+        :style="{ gridTemplateColumns: weekGridCols }"
+      >
+        <div class="text-neutral-900 min-w-0">
+          <p class="font-semibold truncate">
+            {{ row.firstName }} {{ row.lastName }}
+            <span class="font-normal text-neutral-600">({{ row.contractName ?? '-' }})</span>
+          </p>
+          <p class="text-[11px] text-neutral-500 truncate">{{ row.siteName ?? 'Sans site' }}</p>
+        </div>
+
+        <div
+          v-for="daily in row.daily"
+          :key="daily.date"
+          class="text-left leading-4 rounded-md px-2 py-1"
+          :class="daily.hasAbsence ? 'text-white' : ''"
+          :style="getDailyCellStyle(daily)"
+          :title="daily.absenceLabel ?? ''"
+        >
+          <div>J {{ formatMinutes(daily.dayMinutes) }}</div>
+          <div>N {{ formatMinutes(daily.nightMinutes) }}</div>
+          <div v-if="daily.workshopMinutes">A {{ formatMinutes(daily.workshopMinutes) }}</div>
+          <div v-if="daily.hasBreakfast || daily.hasLunch || daily.hasDinner || daily.hasOvernight" class="text-[10px] flex gap-1 mt-0.5">
+            <span v-if="daily.hasBreakfast" title="Petit déjeuner">PD</span>
+            <span v-if="daily.hasLunch" title="Déjeuner">DJ</span>
+            <span v-if="daily.hasDinner" title="Dîner">DI</span>
+            <span v-if="daily.hasOvernight" title="Nuitée">NU</span>
+          </div>
+        </div>
+
+        <div class="font-semibold leading-4">
+          <div>J {{ formatMinutes(row.weeklyDayMinutes) }}</div>
+          <div>N {{ formatMinutes(row.weeklyNightMinutes) }}</div>
+        </div>
+        <div class="font-semibold">
+          {{ formatMinutes(row.weeklyWorkshopMinutes ?? 0) }}
+        </div>
+        <div class="font-semibold">
+          {{ formatMinutes(row.weeklyTotalMinutes) }}
+        </div>
+        <div class="font-semibold">
+          {{ formatMinutes(row.weeklyOvertimeTotalMinutes ?? 0) }}
+        </div>
+        <div class="font-semibold">
+          {{ formatMinutes(row.weeklyOvertime25Minutes ?? 0) }}
+        </div>
+        <div class="font-semibold">
+          {{ formatMinutes(row.weeklyOvertime50Minutes ?? 0) }}
+        </div>
+        <div class="font-semibold">
+          {{ formatMinutes(row.weeklyRecoveryMinutes ?? 0) }}
+        </div>
+        <div class="font-semibold">{{ row.weeklyBreakfastCount ?? 0 }}</div>
+        <div class="font-semibold">{{ row.weeklyLunchCount ?? 0 }}</div>
+        <div class="font-semibold">{{ row.weeklyDinnerCount ?? 0 }}</div>
+        <div class="font-semibold">{{ row.weeklyOvernightCount ?? 0 }}</div>
+      </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { WeeklyWorkHourSummary } from '~/services/dto/work-hour'
+
+const getDailyCellStyle = (daily: {
+  hasAbsence?: boolean
+  absenceColor?: string | null
+}) => {
+  if (!daily.hasAbsence) return undefined
+  return { backgroundColor: daily.absenceColor || '#dc2626' }
+}
+
+defineProps<{
+  isWeekLoading: boolean
+  weekGridCols: string
+  weeklySummary: WeeklyWorkHourSummary | null
+  weekDayHeaders: Array<{ date: string; weekday: string; dayDate: string }>
+  formatMinutes: (minutes: number) => string
+}>()
+</script>

frontend/components/employees/BonusTab.vue

@@ -0,0 +1,207 @@
+<template>
+    <section class="mt-8">
+        <div class="overflow-hidden bg-white">
+            <div
+                class="grid grid-cols-3 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md">
+                <p>Mois</p>
+                <p>Montant €</p>
+                <p>Commentaire</p>
+            </div>
+            <div v-if="bonuses.length === 0" class="px-6 py-4 text-[20px] font-bold text-primary-500 border-x border-b border-primary-500 rounded-b-md">
+                Aucune prime.
+            </div>
+            <div v-else class="border-x border-b border-primary-500 rounded-b-md">
+                <div
+                    v-for="item in bonuses"
+                    :key="item.id"
+                    class="grid grid-cols-3 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500"
+                    @click="onOpenEditDrawer(item)"
+                >
+                    <p>{{ formatMonth(item.month) }}</p>
+                    <p>{{ item.amount }} €</p>
+                    <p>{{ item.comment ?? '-' }}</p>
+                </div>
+            </div>
+        </div>
+        <div class="flex justify-center mb-4 mt-8">
+            <button
+                type="button"
+                class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md text-white disabled:cursor-not-allowed disabled:opacity-50"
+                @click="onOpenCreateDrawer"
+            >
+                + Ajouter
+            </button>
+        </div>
+
+        <AppDrawer v-model="isDrawerOpen" :title="isEditing ? 'Modification prime' : 'Nouvelle prime'">
+            <form class="space-y-4" @submit.prevent="onSubmit">
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="bonus-month">
+                        Mois <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="bonus-month"
+                        v-model="form.month"
+                        type="month"
+                        class="capitalize mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                    />
+                </div>
+
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="bonus-amount">
+                        Montant (€) <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="bonus-amount"
+                        v-model.number="form.amount"
+                        type="number"
+                        step="0.01"
+                        min="0"
+                        class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                    />
+                </div>
+
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="bonus-comment">
+                        Commentaire
+                    </label>
+                    <textarea
+                        id="bonus-comment"
+                        v-model="form.comment"
+                        rows="3"
+                        class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                        placeholder="Commentaire..."
+                    />
+                </div>
+
+                <div v-if="isEditing" class="grid grid-cols-2 gap-3 pt-2">
+                    <button
+                        type="button"
+                        class="flex items-center justify-center rounded-md bg-red-500 px-4 py-2 text-md font-semibold text-white hover:bg-red-600"
+                        @click="onDelete"
+                    >
+                        Supprimer
+                    </button>
+                    <button
+                        type="submit"
+                        class="flex items-center justify-center rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                        :disabled="!isFormValid"
+                    >
+                        Modifier
+                    </button>
+                </div>
+                <div v-else class="flex justify-center pt-2">
+                    <button
+                        type="submit"
+                        class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                        :disabled="!isFormValid"
+                    >
+                        + Ajouter
+                    </button>
+                </div>
+            </form>
+        </AppDrawer>
+    </section>
+</template>
+
+<script setup lang="ts">
+import type { Bonus } from '~/services/dto/bonus'
+import AppDrawer from '~/components/AppDrawer.vue'
+
+const props = defineProps<{
+    bonuses: Bonus[]
+}>()
+
+const emit = defineEmits<{
+    (event: 'create', data: { month: string; amount: number; comment?: string }): void
+    (event: 'update', id: number, data: { month: string; amount: number; comment?: string }): void
+    (event: 'delete', id: number): void
+}>()
+
+const isDrawerOpen = ref(false)
+const isEditing = ref(false)
+const editingItem = ref<Bonus | null>(null)
+
+const currentYearMonth = () => {
+    const now = new Date()
+    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+}
+
+const form = reactive({
+    month: currentYearMonth(),
+    amount: 0,
+    comment: ''
+})
+
+const isFormValid = computed(() => {
+    return form.month && form.amount > 0
+})
+
+const monthLabels: Record<number, string> = {
+    1: 'Janvier',
+    2: 'Février',
+    3: 'Mars',
+    4: 'Avril',
+    5: 'Mai',
+    6: 'Juin',
+    7: 'Juillet',
+    8: 'Août',
+    9: 'Septembre',
+    10: 'Octobre',
+    11: 'Novembre',
+    12: 'Décembre'
+}
+
+const formatMonth = (dateStr: string): string => {
+    const date = new Date(dateStr)
+    if (Number.isNaN(date.getTime())) return dateStr
+    const month = date.getMonth() + 1
+    const year = date.getFullYear()
+    return `${monthLabels[month]} ${year}`
+}
+
+const resetForm = () => {
+    form.month = currentYearMonth()
+    form.amount = 0
+    form.comment = ''
+}
+
+const onOpenCreateDrawer = () => {
+    isEditing.value = false
+    editingItem.value = null
+    resetForm()
+    isDrawerOpen.value = true
+}
+
+const onOpenEditDrawer = (item: Bonus) => {
+    isEditing.value = true
+    editingItem.value = item
+    form.month = item.month.substring(0, 7)
+    form.amount = item.amount
+    form.comment = item.comment ?? ''
+    isDrawerOpen.value = true
+}
+
+const onSubmit = () => {
+    const data = {
+        month: `${form.month}-01`,
+        amount: form.amount,
+        comment: form.comment || undefined
+    }
+
+    if (isEditing.value && editingItem.value) {
+        emit('update', editingItem.value.id, data)
+    } else {
+        emit('create', data)
+    }
+    isDrawerOpen.value = false
+}
+
+const onDelete = () => {
+    if (!editingItem.value) return
+    const ok = window.confirm('Supprimer cette prime ?')
+    if (!ok) return
+    emit('delete', editingItem.value.id)
+    isDrawerOpen.value = false
+}
+</script>

frontend/components/employees/ContractTab.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="mt-8">
-    <div class="overflow-hidden rounded-lg border border-neutral-200 bg-white">
-      <div class="grid grid-cols-4 border-b border-neutral-200 bg-neutral-50 px-6 py-3 text-md font-semibold text-neutral-700">
+    <div class="overflow-hidden bg-white">
+      <div class="grid grid-cols-4 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md">
         <p>Contrat</p>
         <p>Heures</p>
         <p>Date de début</p>
@@ -10,11 +10,11 @@
       <div v-if="contractHistory.length === 0" class="px-6 py-4 text-md text-neutral-600">
         Aucun historique de contrat.
       </div>
-      <div v-else>
+      <div v-else class="border-x border-b border-primary-500 rounded-b-md">
         <div
           v-for="item in contractHistory"
           :key="`${item.startDate}-${item.endDate ?? 'open'}-${item.contractId ?? item.contractName}`"
-          class="grid grid-cols-4 border-b border-neutral-100 px-6 py-3 text-md text-primary-500 last:border-b-0"
+          class="grid grid-cols-4 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 hover:bg-tertiary-500"
         >
           <p>{{ contractNatureLabel(item.contractNature) }}</p>
           <p>{{ contractHistoryLabel(item) }}</p>
@@ -31,7 +31,7 @@
         :disabled="isContractSubmitting || !canCloseCurrentContract"
         @click="onOpenCloseContractDrawer"
       >
-        Clôturer
+        Modifier
       </button>
       <button
         type="button"
@@ -43,7 +43,30 @@
       </button>
     </div>
 
-    <AppDrawer :model-value="isContractDrawerOpen" title="Clôturer le contrat" @update:model-value="onUpdateContractDrawerOpen">
+    <AppDrawer :model-value="isContractDrawerOpen" title="Modifier le contrat" @update:model-value="onUpdateContractDrawerOpen">
+      <div class="mb-4 flex border-b border-neutral-200">
+          <button
+              type="button"
+              class="pb-2 px-4 border-b-2 font-semibold"
+              :class="drawerTab === 'close'
+                  ? 'border-primary-500 text-primary-500'
+                  : 'border-transparent text-primary-500/50 hover:text-primary-500'"
+              @click="drawerTab = 'close'"
+          >
+              Clôturer
+          </button>
+          <button
+              type="button"
+              class="pb-2 px-4 border-b-2 font-semibold"
+              :class="drawerTab === 'suspend'
+                  ? 'border-primary-500 text-primary-500'
+                  : 'border-transparent text-primary-500/50 hover:text-primary-500'"
+              @click="drawerTab = 'suspend'"
+          >
+              Suspendre
+          </button>
+      </div>
+      <div v-if="drawerTab === 'close'">
       <form class="space-y-4" @submit.prevent="onSubmitCloseContract">
         <div>
           <label class="text-md font-semibold text-neutral-700" for="contract-nature">
@@ -110,24 +133,72 @@
           </label>
         </div>
 
-        <div class="flex justify-end gap-3 pt-2">
-          <button
-            type="button"
-            class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-            :disabled="isContractSubmitting"
-            @click="onUpdateContractDrawerOpen(false)"
-          >
-            Annuler
-          </button>
+        <div class="flex justify-center pt-2">
           <button
             type="submit"
-            class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+            class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
             :disabled="isContractSubmitting || !isContractEndDateValid"
           >
-            Enregistrer
+            Modifier
           </button>
         </div>
       </form>
+      </div>
+
+      <div v-if="drawerTab === 'suspend'" class="space-y-6">
+          <div
+              v-for="(form, index) in suspensionForms"
+              :key="form.id ?? `new-${index}`"
+              class="space-y-4 rounded-lg border border-neutral-200 p-4"
+          >
+              <div>
+                  <label class="text-md font-semibold text-neutral-700">
+                      Date de début <span class="text-red-600">*</span>
+                  </label>
+                  <input
+                      v-model="form.startDate"
+                      type="date"
+                      class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                  />
+              </div>
+              <div>
+                  <label class="text-md font-semibold text-neutral-700">
+                      Date de fin
+                  </label>
+                  <input
+                      v-model="form.endDate"
+                      type="date"
+                      class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                  />
+              </div>
+              <div>
+                  <label class="text-md font-semibold text-neutral-700">
+                      Commentaire
+                  </label>
+                  <textarea
+                      v-model="form.comment"
+                      rows="3"
+                      class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                  />
+              </div>
+              <button
+                  type="button"
+                  class="w-full rounded-md bg-primary-500 px-4 py-2 text-base font-semibold text-white transition hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-60"
+                  :disabled="!form.startDate || isSuspensionSubmitting"
+                  @click="onSubmitSuspension(index)"
+              >
+                  {{ form.id ? 'Modifier' : 'Ajouter' }}
+              </button>
+          </div>
+
+          <button
+              type="button"
+              class="w-full rounded-md border-2 border-dashed border-primary-500/50 px-4 py-3 text-base font-semibold text-primary-500/50 transition hover:border-primary-500 hover:text-primary-500"
+              @click="onAddSuspensionForm"
+          >
+              + Ajouter une suspension
+          </button>
+      </div>
     </AppDrawer>
 
     <AppDrawer :model-value="isCreateContractDrawerOpen" title="Ajouter un contrat" @update:model-value="onUpdateCreateContractDrawerOpen">
@@ -169,21 +240,25 @@
           <input id="create-contract-end-date" v-model="createContractForm.endDate" type="date" :class="createContractEndDateFieldClass" />
         </div>
 
-        <div class="flex justify-end gap-3 pt-2">
-          <button
-            type="button"
-            class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-            :disabled="isCreateContractSubmitting"
-            @click="onUpdateCreateContractDrawerOpen(false)"
-          >
-            Annuler
-          </button>
+        <div class="rounded-md border border-neutral-200 bg-neutral-50 p-3">
+          <label class="inline-flex items-center gap-2 text-md font-semibold text-neutral-700" for="create-contract-is-driver">
+            <input
+              id="create-contract-is-driver"
+              v-model="createContractForm.isDriver"
+              type="checkbox"
+              class="h-4 w-4 rounded border-neutral-300 text-primary-500 focus:ring-primary-500"
+            />
+            Chauffeur
+          </label>
+        </div>
+
+        <div class="flex justify-center pt-2">
           <button
             type="submit"
-            class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+            class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
             :disabled="isCreateContractSubmitting || !isCreateContractFormValid"
           >
-            Enregistrer
+            + Ajouter
           </button>
         </div>
       </form>
@@ -195,6 +270,13 @@
 import type { Contract } from '~/services/dto/contract'
 import type { ContractHistoryItem } from '~/services/dto/employee'
 
+type SuspensionForm = {
+  id: number | null
+  startDate: string
+  endDate: string
+  comment: string
+}
+
 type ContractForm = {
   contractId: number | ''
   contractName: string
@@ -211,9 +293,10 @@ type CreateContractForm = {
   contractNature: 'CDI' | 'CDD' | 'INTERIM'
   startDate: string
   endDate: string
+  isDriver: boolean
 }
 
-defineProps<{
+const props = defineProps<{
   contractHistory: ContractHistoryItem[]
   contractNatureLabel: (value?: 'CDI' | 'CDD' | 'INTERIM') => string
   contractHistoryLabel: (item: ContractHistoryItem) => string
@@ -245,5 +328,16 @@ defineProps<{
   onUpdateCreateContractDrawerOpen: (open: boolean) => void
   onSubmitCloseContract: () => void
   onSubmitCreateContract: () => void
+  suspensionForms: SuspensionForm[]
+  isSuspensionSubmitting: boolean
+  onSubmitSuspension: (index: number) => void
+  onAddSuspensionForm: () => void
+  currentContractPeriodId?: number | null
 }>()
+
+const drawerTab = ref<'close' | 'suspend'>('close')
+
+watch(() => props.isContractDrawerOpen, (open) => {
+  if (open) drawerTab.value = 'close'
+})
 </script>

frontend/components/employees/LeaveTab.vue

@@ -1,35 +1,54 @@
 <template>
     <section class="flex h-full min-h-0 flex-col overflow-hidden pt-8">
-        <div class="grid grid-cols-4 rounded-md bg-primary-500 text-white text-[20]">
-            <div class="flex flex-col gap-2 jutify-center items-center border-r-4 border-white py-3">
-                <p><strong class="uppercase font-semibold">Année acquis :</strong> {{
-                        formatCount(summary?.acquiredDays)
-                    }} Jours</p>
-                <p><strong class="uppercase font-semibold">Reste à prendre :</strong>
-                    {{ formatCount(summary?.remainingDays) }} Jours</p>
-            </div>
-            <div class="flex flex-col gap-2 jutify-center items-center border-r-4 border-white py-3">
-                <p><span class="uppercase font-semibold">Samedi acquis :</span>
-                    {{ formatCount(summary?.acquiredSaturdays) }} Jours</p>
-                <p><span class="uppercase font-semibold">Reste à prendre :</span>
-                    {{ formatCount(summary?.remainingSaturdays) }} Jours</p>
-            </div>
-            <div class="flex flex-col gap-2 jutify-center items-center border-r-4 border-white py-3">
-                <p><span class="uppercase font-semibold">Fractionné acquis : </span>{{ formatCount(summary?.fractionedDays) }} Jours</p>
+        <div class="grid grid-cols-4 rounded-md bg-tertiary-500 text-primary-500 text-[18px] border border-primary-500">
+            <p class="col-start-1 p-[10px] border-b border-r border-primary-500"><strong class="uppercase font-semibold">Année acquis :</strong> {{
+                    formatCount(summary?.acquiredDays)
+                }} Jours
+            </p>
+            <p class="col-start-2 p-[10px] border-b border-r border-primary-500"><strong class="uppercase font-semibold">Pris :</strong>
+                {{ formatCount(isForfaitRule ? currentYearTakenDays : summary?.takenDays) }} Jours
+            </p>
+            <p class="col-start-3 p-[10px] border-b border-r border-b-white border-r-primary-500 bg-primary-500 text-white"><strong class="uppercase font-semibold">Reste à prendre :</strong>
+                {{ formatCount(summary?.remainingDays) }} Jours
+            </p>
+            <p class="col-start-4 p-[10px] border-b border-primary-500"><strong class="uppercase font-semibold">En cours d'acquisition :</strong>
+                {{ formatCount(summary?.accruingDays) }} Jours
+            </p>
+            <p v-if="!isForfaitRule" class="col-start-1 p-[10px] border-r border-primary-500"><span class="uppercase font-semibold">Samedi acquis :</span>
+                {{ formatCount(summary?.acquiredSaturdays) }} Jours
+            </p>
+            <p v-else class="col-start-1 p-[10px] border-r border-primary-500"><span class="uppercase font-semibold">Année N-1 acquis :</span>
+                {{ formatCount(summary?.previousYearAcquiredDays) }} Jours
+            </p>
+            <p v-if="!isForfaitRule" class="col-start-2 p-[10px] border-r border-primary-500"><span class="uppercase font-semibold">Pris :</span>
+                {{ formatCount(summary?.takenSaturdays) }} Jours
+            </p>
+            <p v-if="!isForfaitRule" class="col-start-3 p-[10px] border-r border-r-primary-500 bg-primary-500 text-white"><span class="uppercase font-semibold">Reste à prendre :</span>
+                {{ formatCount(summary?.remainingSaturdays) }} Jours
+            </p>
+            <p v-else class="col-start-2 p-[10px] border-r border-primary-500"><span class="uppercase font-semibold">Pris :</span>
+                {{ formatCount(summary?.previousYearTakenDays) }} Jours
+            </p>
+            <p v-if="isForfaitRule" class="col-start-3 p-[10px] border-r-primary-500 bg-primary-500 text-white"><span class="uppercase font-semibold">Reste à prendre :</span>
+                {{ formatCount(summary?.previousYearRemainingDays) }} Jours
+            </p>
+            <div v-if="!isForfaitRule" class="col-start-4 p-[10px] flex gap-7 items-center">
+                <div>
+                    <span class="uppercase font-semibold">Fractionné acquis : </span>
+                    <span>{{ formatCount(summary?.fractionedDays) }} Jours</span>
+                </div>
                 <button
-                    class="flex justify-center items-center gap-2 bg-white text-primary-500 font-bold w-[150px] rounded-md py-[1px]"
+                    class="flex items-center"
                     @click="openFractionedDrawer"
                 >
-                    {{ summary?.fractionedDays === 0 ? '+ Ajouter' : 'Modifier' }}</button>
-            </div>
-            <div class="flex flex-col jutify-center gap-2 items-center py-3">
-                <p><span class="uppercase font-semibold">En cours d'acquisition :</span></p>
-                <p>{{ formatCount(summary?.accruingDays) }} Jours</p>
+                    <Icon name="mdi:edit-box" size="24"/>
+                </button>
             </div>
         </div>
         <div class="mt-8 min-h-0 flex-1 overflow-y-auto pr-2">
             <div class="grid grid-cols-4 gap-10">
-                <div v-for="month in months" :key="month.label" class="rounded-md bg-tertiary-500 text-primary-500">
+                <div v-for="month in months" :key="month.label"
+                     class="rounded-md bg-tertiary-500 text-primary-500 flex flex-col justify-between">
                     <div class="flex justify-center rounded-t-md bg-primary-500 py-1 font-bold uppercase text-white">
                         {{ month.label }}
                     </div>
@@ -54,6 +73,9 @@
                             </div>
                         </template>
                     </div>
+                    <div class="px-2 py-2 text-center border-t border-primary-500">Jours de présence :
+                        {{ summary?.presenceDaysByMonth?.[month.monthKey] ?? 0 }}
+                    </div>
                 </div>
             </div>
         </div>
@@ -117,7 +139,7 @@ const emit = defineEmits<{
 }>()
 
 const isFractionedDrawerOpen = ref(false)
-const fractionedForm = reactive({ days: 0 })
+const fractionedForm = reactive({days: 0})
 
 const openFractionedDrawer = () => {
     fractionedForm.days = props.summary?.fractionedDays ?? 0
@@ -150,6 +172,11 @@ const weekDayLabels = ['L', 'M', 'M', 'J', 'V', 'S', 'D'] as const
 
 const isForfaitRule = computed(() => props.summary?.ruleCode === 'FORFAIT_218')
 
+const currentYearTakenDays = computed(() => {
+    if (!props.summary) return null
+    return props.summary.takenDays - (props.summary.previousYearTakenDays ?? 0)
+})
+
 const displayedYear = computed(() => {
     if (props.summary?.year) return props.summary.year
     const today = new Date()
@@ -259,9 +286,12 @@ const months = computed(() => {
             cells.push(null)
         }
 
+        const monthKey = `${monthYear}-${String(monthIndex + 1).padStart(2, '0')}`
+
         return {
             label,
-            cells
+            cells,
+            monthKey
         }
     })
 })
@@ -278,15 +308,15 @@ const getDayStyle = (day: { leave: DayLeaveState | null; isHoliday: boolean }) =
     if (day.leave) {
         const color = day.leave.colors[0] ?? '#222783'
         if (day.leave.am && day.leave.pm) {
-            return { backgroundColor: color }
+            return {backgroundColor: color}
         }
         const colorFaded = `${color}60`
         const backgroundImage = day.leave.am
             ? `linear-gradient(180deg, ${color} 0 50%, ${colorFaded} 50% 100%)`
             : `linear-gradient(180deg, ${colorFaded} 0 50%, ${color} 50% 100%)`
-        return { backgroundImage, backgroundColor: 'transparent' }
+        return {backgroundImage, backgroundColor: 'transparent'}
     }
-    if (day.isHoliday) return { backgroundColor: 'rgb(179, 229, 252)' }
+    if (day.isHoliday) return {backgroundColor: 'rgb(179, 229, 252)'}
     return undefined
 }
 

frontend/components/employees/MileageTab.vue

@@ -0,0 +1,346 @@
+<template>
+    <section class="mt-8">
+        <div class="overflow-hidden bg-white">
+            <div
+                class="grid grid-cols-6 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md">
+                <p>Mois</p>
+                <p>Nombre de Km</p>
+                <p>Montant €</p>
+                <p>Commentaire</p>
+                <p>Justif. Km</p>
+                <p>Justif. Montant</p>
+            </div>
+            <div v-if="allowances.length === 0" class="px-6 py-4 text-[20px] font-bold text-primary-500 border-x border-b border-primary-500 rounded-b-md">
+                Aucun frais kilométrique.
+            </div>
+            <div v-else class="border-x border-b border-primary-500 rounded-b-md">
+                <div
+                    v-for="item in allowances"
+                    :key="item.id"
+                    class="grid grid-cols-6 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500"
+                    @click="onOpenEditDrawer(item)"
+                >
+                    <p>{{ formatMonth(item.month) }}</p>
+                    <p>{{ item.kilometers }}</p>
+                    <p>{{ item.amount ? item.amount + ' €' : '-' }}</p>
+                    <p>{{ item.comment ?? '-' }}</p>
+                    <p class="min-w-0">
+                        <a
+                            v-if="item.receiptPath"
+                            :href="getKmReceiptUrl(props.apiBase, item.id)"
+                            target="_blank"
+                            class="text-primary-500 hover:text-secondary-500 flex gap-2 items-center"
+                            @click.stop
+                        >
+                            <Icon name="mdi:file-download-outline" size="20" class="shrink-0"/>
+                            <span class="truncate">{{ item.receiptName ?? 'Télécharger' }}</span>
+                        </a>
+                        <span v-else>-</span>
+                    </p>
+                    <p class="min-w-0">
+                        <a
+                            v-if="item.amountReceiptPath"
+                            :href="getAmountReceiptUrl(props.apiBase, item.id)"
+                            target="_blank"
+                            class="text-primary-500 hover:text-secondary-500 flex gap-2 items-center"
+                            @click.stop
+                        >
+                            <Icon name="mdi:file-download-outline" size="20" class="shrink-0"/>
+                            <span class="truncate">{{ item.amountReceiptName ?? 'Télécharger' }}</span>
+                        </a>
+                        <span v-else>-</span>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="flex justify-center mb-4 mt-8">
+            <button
+                type="button"
+                class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md text-white disabled:cursor-not-allowed disabled:opacity-50"
+                @click="onOpenCreateDrawer"
+            >
+                + Ajouter
+            </button>
+        </div>
+
+
+        <AppDrawer v-model="isDrawerOpen" title="Frais">
+            <form class="space-y-4" @submit.prevent="onSubmit">
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="mileage-month">
+                        Mois <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="mileage-month"
+                        v-model="form.month"
+                        type="month"
+                        class="capitalize mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                    />
+                </div>
+
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="mileage-kilometers">
+                        Nombre de Km
+                    </label>
+                    <input
+                        id="mileage-kilometers"
+                        v-model.number="form.kilometers"
+                        type="number"
+                        step="0.1"
+                        min="0"
+                        class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                    />
+                </div>
+
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="mileage-amount">
+                        Montant (€)
+                    </label>
+                    <input
+                        id="mileage-amount"
+                        v-model.number="form.amount"
+                        type="number"
+                        step="0.01"
+                        min="0"
+                        class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                    />
+                    <p class="mt-1 text-sm text-neutral-500">Au moins un des deux champs doit être rempli</p>
+                </div>
+
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="mileage-km-receipt">
+                        Justificatif Km
+                    </label>
+                    <div v-if="isEditing && editingItem?.receiptName" class="mt-1 text-sm text-neutral-500">
+                        Fichier actuel : {{ editingItem.receiptName }}
+                    </div>
+                    <input
+                        id="mileage-km-receipt"
+                        ref="kmFileInput"
+                        type="file"
+                        class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 file:mr-3 file:rounded file:border-0 file:bg-primary-500 file:px-3 file:py-1 file:text-sm file:text-white"
+                        @change="onKmFileChange"
+                    />
+                    <p v-if="kmFileError" class="mt-1 text-sm text-red-600">{{ kmFileError }}</p>
+                    <p v-else class="mt-1 text-sm text-neutral-500">Fichier au format pdf</p>
+                </div>
+
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="mileage-amount-receipt">
+                        Justificatif Montant
+                    </label>
+                    <div v-if="isEditing && editingItem?.amountReceiptName" class="mt-1 text-sm text-neutral-500">
+                        Fichier actuel : {{ editingItem.amountReceiptName }}
+                    </div>
+                    <input
+                        id="mileage-amount-receipt"
+                        ref="amountFileInput"
+                        type="file"
+                        class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 file:mr-3 file:rounded file:border-0 file:bg-primary-500 file:px-3 file:py-1 file:text-sm file:text-white"
+                        @change="onAmountFileChange"
+                    />
+                    <p v-if="amountFileError" class="mt-1 text-sm text-red-600">{{ amountFileError }}</p>
+                    <p v-else class="mt-1 text-sm text-neutral-500">Fichier au format pdf</p>
+                </div>
+
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="mileage-comment">
+                        Commentaire
+                    </label>
+                    <textarea
+                        id="mileage-comment"
+                        v-model="form.comment"
+                        rows="3"
+                        class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                        placeholder="Commentaire..."
+                    />
+                </div>
+
+                <div v-if="isEditing" class="grid grid-cols-2 gap-3 pt-2">
+                    <button
+                        type="button"
+                        class="flex items-center justify-center rounded-md bg-red-500 px-4 py-2 text-md font-semibold text-white hover:bg-red-600"
+                        @click="onDelete"
+                    >
+                        Supprimer
+                    </button>
+                    <button
+                        type="submit"
+                        class="flex items-center justify-center rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                        :disabled="!isFormValid"
+                    >
+                        Modifier
+                    </button>
+                </div>
+                <div v-else class="flex justify-center pt-2">
+                    <button
+                        type="submit"
+                        class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                        :disabled="!isFormValid"
+                    >
+                        + Ajouter
+                    </button>
+                </div>
+            </form>
+        </AppDrawer>
+    </section>
+</template>
+
+<script setup lang="ts">
+import type {MileageAllowance} from '~/services/dto/mileage-allowance'
+import {getKmReceiptUrl, getAmountReceiptUrl} from '~/services/mileage-allowances'
+import AppDrawer from '~/components/AppDrawer.vue'
+
+const props = defineProps<{
+    allowances: MileageAllowance[]
+    apiBase: string
+}>()
+
+const emit = defineEmits<{
+    (event: 'create', data: { month: string; kilometers: number; amount: number; comment?: string }, kmFile?: File, amountFile?: File): void
+    (event: 'update', id: number, data: { month: string; kilometers: number; amount: number; comment?: string }, kmFile?: File, amountFile?: File): void
+    (event: 'delete', id: number): void
+}>()
+
+const isDrawerOpen = ref(false)
+const isEditing = ref(false)
+const editingItem = ref<MileageAllowance | null>(null)
+const selectedKmFile = ref<File | undefined>(undefined)
+const selectedAmountFile = ref<File | undefined>(undefined)
+const kmFileInput = ref<HTMLInputElement | null>(null)
+const amountFileInput = ref<HTMLInputElement | null>(null)
+const kmFileError = ref('')
+const amountFileError = ref('')
+
+const currentYearMonth = () => {
+    const now = new Date()
+    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+}
+
+const form = reactive({
+    month: currentYearMonth(),
+    kilometers: 0,
+    amount: 0,
+    comment: ''
+})
+
+const isFormValid = computed(() => {
+    return form.month && (form.kilometers > 0 || form.amount > 0) && !kmFileError.value && !amountFileError.value
+})
+
+const monthLabels: Record<number, string> = {
+    1: 'Janvier',
+    2: 'Février',
+    3: 'Mars',
+    4: 'Avril',
+    5: 'Mai',
+    6: 'Juin',
+    7: 'Juillet',
+    8: 'Août',
+    9: 'Septembre',
+    10: 'Octobre',
+    11: 'Novembre',
+    12: 'Décembre'
+}
+
+const formatMonth = (dateStr: string): string => {
+    const date = new Date(dateStr)
+    if (Number.isNaN(date.getTime())) return dateStr
+    const month = date.getMonth() + 1
+    const year = date.getFullYear()
+    return `${monthLabels[month]} ${year}`
+}
+
+const resetForm = () => {
+    form.month = currentYearMonth()
+    form.kilometers = 0
+    form.amount = 0
+    form.comment = ''
+    selectedKmFile.value = undefined
+    selectedAmountFile.value = undefined
+    kmFileError.value = ''
+    amountFileError.value = ''
+    if (kmFileInput.value) {
+        kmFileInput.value.value = ''
+    }
+    if (amountFileInput.value) {
+        amountFileInput.value.value = ''
+    }
+}
+
+const onOpenCreateDrawer = () => {
+    isEditing.value = false
+    editingItem.value = null
+    resetForm()
+    isDrawerOpen.value = true
+}
+
+const onOpenEditDrawer = (item: MileageAllowance) => {
+    isEditing.value = true
+    editingItem.value = item
+    // Extract YYYY-MM from YYYY-MM-DD
+    form.month = item.month.substring(0, 7)
+    form.kilometers = item.kilometers
+    form.amount = item.amount
+    form.comment = item.comment ?? ''
+    selectedKmFile.value = undefined
+    selectedAmountFile.value = undefined
+    if (kmFileInput.value) {
+        kmFileInput.value.value = ''
+    }
+    if (amountFileInput.value) {
+        amountFileInput.value.value = ''
+    }
+    isDrawerOpen.value = true
+}
+
+const onKmFileChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    const file = target.files?.[0]
+    if (file && file.type !== 'application/pdf') {
+        kmFileError.value = 'Seuls les fichiers PDF sont acceptés.'
+        selectedKmFile.value = undefined
+        target.value = ''
+        return
+    }
+    kmFileError.value = ''
+    selectedKmFile.value = file ?? undefined
+}
+
+const onAmountFileChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    const file = target.files?.[0]
+    if (file && file.type !== 'application/pdf') {
+        amountFileError.value = 'Seuls les fichiers PDF sont acceptés.'
+        selectedAmountFile.value = undefined
+        target.value = ''
+        return
+    }
+    amountFileError.value = ''
+    selectedAmountFile.value = file ?? undefined
+}
+
+const onSubmit = () => {
+    const data = {
+        month: `${form.month}-01`,
+        kilometers: form.kilometers,
+        amount: form.amount,
+        comment: form.comment || undefined
+    }
+
+    if (isEditing.value && editingItem.value) {
+        emit('update', editingItem.value.id, data, selectedKmFile.value, selectedAmountFile.value)
+    } else {
+        emit('create', data, selectedKmFile.value, selectedAmountFile.value)
+    }
+    isDrawerOpen.value = false
+}
+
+const onDelete = () => {
+    if (!editingItem.value) return
+    const ok = window.confirm('Supprimer ce frais kilométrique ?')
+    if (!ok) return
+    emit('delete', editingItem.value.id)
+    isDrawerOpen.value = false
+}
+</script>

frontend/components/employees/ObservationTab.vue

@@ -0,0 +1,187 @@
+<template>
+    <section class="mt-8">
+        <div class="overflow-hidden bg-white">
+            <div
+                class="grid grid-cols-2 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md">
+                <p>Mois</p>
+                <p>Observation</p>
+            </div>
+            <div v-if="observations.length === 0" class="px-6 py-4 text-[20px] font-bold text-primary-500 border-x border-b border-primary-500 rounded-b-md">
+                Aucune observation.
+            </div>
+            <div v-else class="border-x border-b border-primary-500 rounded-b-md">
+                <div
+                    v-for="item in observations"
+                    :key="item.id"
+                    class="grid grid-cols-2 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500"
+                    @click="onOpenEditDrawer(item)"
+                >
+                    <p>{{ formatMonth(item.month) }}</p>
+                    <p class="truncate">{{ item.content }}</p>
+                </div>
+            </div>
+        </div>
+        <div class="flex justify-center mb-4 mt-8">
+            <button
+                type="button"
+                class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md text-white disabled:cursor-not-allowed disabled:opacity-50"
+                @click="onOpenCreateDrawer"
+            >
+                + Ajouter
+            </button>
+        </div>
+
+        <AppDrawer v-model="isDrawerOpen" :title="isEditing ? 'Modification observation' : 'Nouvelle observation'">
+            <form class="space-y-4" @submit.prevent="onSubmit">
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="observation-month">
+                        Mois <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="observation-month"
+                        v-model="form.month"
+                        type="month"
+                        class="capitalize mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                    />
+                </div>
+
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="observation-content">
+                        Observation <span class="text-red-600">*</span>
+                    </label>
+                    <textarea
+                        id="observation-content"
+                        v-model="form.content"
+                        rows="5"
+                        class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                        placeholder="Observation..."
+                    />
+                </div>
+
+                <div v-if="isEditing" class="grid grid-cols-2 gap-3 pt-2">
+                    <button
+                        type="button"
+                        class="flex items-center justify-center rounded-md bg-red-500 px-4 py-2 text-md font-semibold text-white hover:bg-red-600"
+                        @click="onDelete"
+                    >
+                        Supprimer
+                    </button>
+                    <button
+                        type="submit"
+                        class="flex items-center justify-center rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                        :disabled="!isFormValid"
+                    >
+                        Modifier
+                    </button>
+                </div>
+                <div v-else class="flex justify-center pt-2">
+                    <button
+                        type="submit"
+                        class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                        :disabled="!isFormValid"
+                    >
+                        + Ajouter
+                    </button>
+                </div>
+            </form>
+        </AppDrawer>
+    </section>
+</template>
+
+<script setup lang="ts">
+import type { Observation } from '~/services/dto/observation'
+import AppDrawer from '~/components/AppDrawer.vue'
+
+const props = defineProps<{
+    observations: Observation[]
+}>()
+
+const emit = defineEmits<{
+    (event: 'create', data: { month: string; content: string }): void
+    (event: 'update', id: number, data: { month: string; content: string }): void
+    (event: 'delete', id: number): void
+}>()
+
+const isDrawerOpen = ref(false)
+const isEditing = ref(false)
+const editingItem = ref<Observation | null>(null)
+
+const currentYearMonth = () => {
+    const now = new Date()
+    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+}
+
+const form = reactive({
+    month: currentYearMonth(),
+    content: ''
+})
+
+const isFormValid = computed(() => {
+    return form.month && form.content.trim().length > 0
+})
+
+const monthLabels: Record<number, string> = {
+    1: 'Janvier',
+    2: 'Février',
+    3: 'Mars',
+    4: 'Avril',
+    5: 'Mai',
+    6: 'Juin',
+    7: 'Juillet',
+    8: 'Août',
+    9: 'Septembre',
+    10: 'Octobre',
+    11: 'Novembre',
+    12: 'Décembre'
+}
+
+const formatMonth = (dateStr: string): string => {
+    const date = new Date(dateStr)
+    if (Number.isNaN(date.getTime())) return dateStr
+    const month = date.getMonth() + 1
+    const year = date.getFullYear()
+    return `${monthLabels[month]} ${year}`
+}
+
+const resetForm = () => {
+    form.month = currentYearMonth()
+    form.content = ''
+}
+
+const onOpenCreateDrawer = () => {
+    isEditing.value = false
+    editingItem.value = null
+    resetForm()
+    isDrawerOpen.value = true
+}
+
+const onOpenEditDrawer = (item: Observation) => {
+    isEditing.value = true
+    editingItem.value = item
+    form.month = item.month.substring(0, 7)
+    form.content = item.content
+    isDrawerOpen.value = true
+}
+
+const onSubmit = () => {
+    const data = {
+        month: `${form.month}-01`,
+        content: form.content
+    }
+
+    if (isEditing.value && editingItem.value) {
+        emit('update', editingItem.value.id, data)
+    } else {
+        emit('create', data)
+    }
+    isDrawerOpen.value = false
+}
+
+const onDelete = () => {
+    if (!editingItem.value) return
+    const ok = window.confirm('Supprimer cette observation ?')
+    if (!ok) return
+    emit('delete', editingItem.value.id)
+    isDrawerOpen.value = false
+}
+</script>

frontend/components/employees/RttTab.vue

@@ -1,80 +1,245 @@
 <template>
   <section class="flex h-full min-h-0 flex-col overflow-hidden pt-8">
-    <div class="flex gap-10 justify-center items-center bg-primary-500 rounded-md text-white py-5">
-      <p class="text-[20px]"><span class="font-semibold">RTT à la date du jour :</span> {{ formatMinutes(summary?.availableMinutes ?? 0) }}</p>
-        <button class="flex justify-center items-center gap-2 bg-white text-primary-500 font-bold w-[150px] rounded-md py-[1px] text-md" @click="openNewPayment">
-            + Payer les RTT
-        </button>
-    </div>
-    <div class="mt-8 min-h-0 flex-1 overflow-y-auto pr-2">
-      <div class="grid grid-cols-4 gap-10 pb-4">
-        <div
-          v-for="month in months"
-          :key="month.month"
-          class="rounded-md bg-tertiary-500 text-primary-500"
+    <!-- Header bar -->
+    <div class="flex items-center justify-between rounded-t-md bg-tertiary-500 px-5 py-4 text-black border border-primary-500">
+      <div class="flex items-center">
+        <button
+          class="rounded px-2 py-1 font-bold hover:bg-primary-600 disabled:opacity-40 disabled:cursor-not-allowed flex items-center"
+          :disabled="currentMonthIndex === 0"
+          @click="currentMonthIndex--"
         >
-          <div class="flex justify-center rounded-t-md bg-primary-500 py-3 font-bold text-white text-[18px]">
-            {{ month.label }}
-          </div>
-          <div class="grid grid-cols-[70%_30%] text-[18px] border border-primary-500">
-            <template v-for="week in month.weeks" :key="week.key">
-              <div class="py-[6px] pl-3 border-r border-b border-primary-500">
-                <span v-if="week.isEmpty">&nbsp;</span>
-                <span v-else>Semaine {{ week.weekNumber }}</span>
-              </div>
-              <div class="py-[6px] pl-3 border-b border-primary-500">
-                <span v-if="week.isEmpty">&nbsp;</span>
-                <span v-else>{{ formatMinutes(week.recoveryMinutes) }}</span>
-              </div>
-            </template>
-            <div class="py-[6px] pl-3 border-r border-b border-primary-500 font-semibold">Total</div>
-            <div class="py-[6px] pl-3 border-b border-primary-500 font-semibold">{{ formatMinutes(month.totalMinutes) }}</div>
-            <div class="py-[6px] pl-3 border-r border-b border-primary-500">Heure payée 25%</div>
-            <div class="py-[6px] pl-3 border-b border-primary-500 flex gap-3 items-center cursor-pointer hover:bg-primary-500/10"
-                 @click="openEditPayment(month.month, '25')"
-                 title="Modifier les heures payées"
-            >
-                <p>{{ formatMinutes(getMonthPaid25(month.month)) }}</p>
-                <div class="flex justify-center items-center bg-primary-500 rounded-md p-1">
-                    <Icon name="mdi:pencil" size="16" class="self-center text-white" />
-                </div>
-            </div>
-            <div class="py-[6px] pl-3 border-r border-primary-500">Heure payée 50%</div>
-            <div class="py-[6px] px-3 flex gap-3 items-center cursor-pointer hover:bg-primary-500/10"
-                 @click="openEditPayment(month.month, '50')"
-                 title="Modifier les heures payées"
-            >
-                <p>{{ formatMinutes(getMonthPaid50(month.month)) }}</p>
-                <div class="flex justify-center items-center bg-primary-500 rounded-md p-1">
-                    <Icon name="mdi:pencil" size="16" class="self-center text-white" />
-                </div>
-            </div>
-          </div>
-        </div>
+          <Icon name="mdi:chevron-left" size="24"/>
+        </button>
+        <span class="text-lg font-bold tracking-wide min-w-[170px] text-center">
+          {{ currentMonthLabel }} {{ currentYear }}
+        </span>
+        <button
+          class="rounded px-2 py-1 font-bold hover:bg-primary-600 disabled:opacity-40 disabled:cursor-not-allowed flex items-center"
+          :disabled="currentMonthIndex === 11"
+          @click="currentMonthIndex++"
+        >
+            <Icon name="mdi:chevron-right" size="24"/>
+        </button>
       </div>
+      <p class="text-[16px]">
+        <span class="font-bold">RTT À LA SEMAINE {{ lastCompleteWeek }} : </span>
+        <span class="font-bold">{{ formatMinutes(summary?.availableMinutes ?? 0) }}</span>
+      </p>
+        <div class="flex justify-center">
+            <button
+                class="rounded-md bg-primary-500 px-8 py-2 font-bold text-white hover:bg-primary-600"
+                @click="openPaymentDrawer"
+            >
+                + Payer les RRT
+            </button>
+        </div>
     </div>
-    <AppDrawer v-model="isPaymentDrawerOpen" :title="isEditMode ? 'Modifier le paiement RTT' : 'Payer des RTT'">
+
+    <!-- Table -->
+    <div class="min-h-0 flex-1 overflow-y-auto">
+      <table class="w-full table-fixed border-collapse text-[18px]">
+        <colgroup>
+          <col />
+          <col class="w-[11%]" />
+          <col class="w-[11%]" />
+          <col class="w-[11%]" />
+          <col class="w-[11%]" />
+          <col class="w-[11%]" />
+          <col class="w-[11%]" />
+          <col class="w-[11%]" />
+          <col class="w-[11%]" />
+        </colgroup>
+        <thead>
+          <tr>
+            <th class="px-5 py-[10px] text-left font-bold text-primary-500 border border-primary-500">Semaine</th>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">Heure</th>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">Base</th>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">25%</th>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">Total 25%</th>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">Base</th>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">50%</th>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">Total 50%</th>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- Report N-1 row (RTT rollover carry, June only) -->
+          <tr v-if="showCarryRow" class="bg-tertiary-500">
+            <td class="px-5 py-[10px] font-bold text-primary-500 border border-primary-500">Report</td>
+            <td class="px-4 py-[10px] text-center text-neutral-500 border border-primary-500 border-r-2">-</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(summary!.carryBase25Minutes) }} <span class="text-neutral-400">/ {{ formatCentiemes(summary!.carryBase25Minutes) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(summary!.carryBonus25Minutes) }} <span class="text-neutral-400">/ {{ formatCentiemes(summary!.carryBonus25Minutes) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(summary!.carryBase25Minutes + summary!.carryBonus25Minutes) }} <span class="text-neutral-400">/ {{ formatCentiemes(summary!.carryBase25Minutes + summary!.carryBonus25Minutes) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(summary!.carryBase50Minutes) }} <span class="text-neutral-400">/ {{ formatCentiemes(summary!.carryBase50Minutes) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(summary!.carryBonus50Minutes) }} <span class="text-neutral-400">/ {{ formatCentiemes(summary!.carryBonus50Minutes) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(summary!.carryBase50Minutes + summary!.carryBonus50Minutes) }} <span class="text-neutral-400">/ {{ formatCentiemes(summary!.carryBase50Minutes + summary!.carryBonus50Minutes) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(summary!.carryFromPreviousYearMinutes) }} <span class="text-neutral-400">/ {{ formatCentiemes(summary!.carryFromPreviousYearMinutes) }}</span></td>
+          </tr>
+
+          <!-- Report mois précédent (cumulated balance from previous months, July+) -->
+          <tr v-if="showMonthReportRow" class="bg-tertiary-500">
+            <td class="px-5 py-[10px] font-bold text-primary-500 border border-primary-500">Report</td>
+            <td class="px-4 py-[10px] text-center text-neutral-500 border border-primary-500 border-r-2">-</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(monthReport.base25) }} <span class="text-neutral-400">/ {{ formatCentiemes(monthReport.base25) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(monthReport.bonus25) }} <span class="text-neutral-400">/ {{ formatCentiemes(monthReport.bonus25) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(monthReport.total25) }} <span class="text-neutral-400">/ {{ formatCentiemes(monthReport.total25) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(monthReport.base50) }} <span class="text-neutral-400">/ {{ formatCentiemes(monthReport.base50) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(monthReport.bonus50) }} <span class="text-neutral-400">/ {{ formatCentiemes(monthReport.bonus50) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(monthReport.total50) }} <span class="text-neutral-400">/ {{ formatCentiemes(monthReport.total50) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(monthReport.total) }} <span class="text-neutral-400">/ {{ formatCentiemes(monthReport.total) }}</span></td>
+          </tr>
+
+          <!-- Week rows (always 5) -->
+          <tr
+            v-for="(week, idx) in paddedWeeks"
+            :key="week ? week.weekStart : `empty-${idx}`"
+          >
+            <td class="px-5 py-[10px] font-bold text-primary-500 border border-primary-500">
+              <span v-if="week">Semaine {{ week.weekNumber }}</span>
+              <span v-else>&nbsp;</span>
+            </td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">
+              <span v-if="week">{{ formatMinutes(week.overtimeMinutes) }}</span>
+              <span v-else>0 h</span>
+            </td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">
+              <span v-if="week">{{ formatMinutes(week.totalMinutes >= 0 ? week.base25Minutes : 0) }}</span>
+              <span v-else>0 h</span>
+            </td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">
+              <span v-if="week">{{ formatMinutes(week.totalMinutes >= 0 ? week.bonus25Minutes : 0) }}</span>
+              <span v-else>0 h</span>
+            </td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">
+              <span v-if="week">{{ formatMinutes(week.base25Minutes + week.bonus25Minutes) }}</span>
+              <span v-else>0 h</span>
+            </td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">
+              <span v-if="week">{{ formatMinutes(week.totalMinutes >= 0 ? week.base50Minutes : 0) }}</span>
+              <span v-else>0 h</span>
+            </td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">
+              <span v-if="week">{{ formatMinutes(week.totalMinutes >= 0 ? week.bonus50Minutes : 0) }}</span>
+              <span v-else>0 h</span>
+            </td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">
+              <span v-if="week">{{ formatMinutes(week.base50Minutes + week.bonus50Minutes) }}</span>
+              <span v-else>0 h</span>
+            </td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">
+              <span v-if="week">{{ formatMinutes(week.totalMinutes) }}</span>
+              <span v-else>0 h</span>
+            </td>
+          </tr>
+
+          <!-- Total row -->
+          <tr>
+            <td class="px-5 py-[10px] font-bold text-primary-500 border border-primary-500 border-t-2">Total</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2 border-t-2">{{ formatMinutes(totals.overtime) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-t-2">{{ formatMinutes(totals.base25) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-t-2">{{ formatMinutes(totals.bonus25) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2 border-t-2">{{ formatMinutes(totals.total25) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-t-2">{{ formatMinutes(totals.base50) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-t-2">{{ formatMinutes(totals.bonus50) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2 border-t-2">{{ formatMinutes(totals.total50) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-t-2">{{ formatMinutes(totals.total) }}</td>
+          </tr>
+
+          <!-- Payé row -->
+          <tr>
+            <td class="px-5 py-[10px] font-bold text-primary-500 border border-primary-500">Payé</td>
+            <td class="px-4 py-[10px] text-center text-neutral-500 border border-primary-500 border-r-2">-</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ currentPayment ? formatMinutes(-currentPayment.paidBase25Minutes) : '0 h' }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ currentPayment ? formatMinutes(-currentPayment.paidBonus25Minutes) : '0 h' }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ currentPayment ? formatMinutes(-(currentPayment.paidBase25Minutes + currentPayment.paidBonus25Minutes)) : '0 h' }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ currentPayment ? formatMinutes(-currentPayment.paidBase50Minutes) : '0 h' }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ currentPayment ? formatMinutes(-currentPayment.paidBonus50Minutes) : '0 h' }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ currentPayment ? formatMinutes(-(currentPayment.paidBase50Minutes + currentPayment.paidBonus50Minutes)) : '0 h' }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(paidTotal) }}</td>
+          </tr>
+
+          <!-- Reste row -->
+          <tr>
+            <td class="px-5 py-[10px] font-bold text-primary-500 border border-primary-500">Reste</td>
+            <td class="px-4 py-[10px] text-center text-neutral-500 border border-primary-500 border-r-2">-</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(reste.base25) }} <span class="text-neutral-400">/ {{ formatCentiemes(reste.base25) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(reste.bonus25) }} <span class="text-neutral-400">/ {{ formatCentiemes(reste.bonus25) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(reste.total25) }} <span class="text-neutral-400">/ {{ formatCentiemes(reste.total25) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(reste.base50) }} <span class="text-neutral-400">/ {{ formatCentiemes(reste.base50) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(reste.bonus50) }} <span class="text-neutral-400">/ {{ formatCentiemes(reste.bonus50) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(reste.total50) }} <span class="text-neutral-400">/ {{ formatCentiemes(reste.total50) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(reste.total) }} <span class="text-neutral-400">/ {{ formatCentiemes(reste.total) }}</span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Payment Drawer -->
+    <AppDrawer v-model="isPaymentDrawerOpen" title="Payer des RTT">
       <form @submit.prevent="onSubmitPayment">
         <div class="mb-4">
           <label class="block text-sm font-medium text-neutral-700">Mois</label>
-          <select v-model.number="paymentForm.month" :disabled="isEditMode" class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed">
+          <select
+            v-model.number="paymentForm.month"
+            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+          >
             <option v-for="m in orderedMonthOptions" :key="m.value" :value="m.value">{{ m.label }}</option>
           </select>
         </div>
         <div class="mb-4">
-          <label class="block text-sm font-medium text-neutral-700">Nombre d'heures</label>
-          <input v-model.number="paymentForm.hours" type="number" step="0.5" min="0" class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20" />
+          <label class="block text-sm font-medium text-neutral-700">Base 25% (heures)</label>
+          <input
+            v-model.number="paymentForm.base25Hours"
+            type="number"
+            step="0.5"
+            min="0"
+            class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+          />
+        </div>
+        <div class="mb-4">
+          <label class="block text-sm font-medium text-neutral-700">Heures 25% (heures)</label>
+          <input
+            v-model.number="paymentForm.bonus25Hours"
+            type="number"
+            step="0.5"
+            min="0"
+            class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+          />
+        </div>
+        <div class="mb-4">
+          <label class="block text-sm font-medium text-neutral-700">Base 50% (heures)</label>
+          <input
+            v-model.number="paymentForm.base50Hours"
+            type="number"
+            step="0.5"
+            min="0"
+            class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+          />
         </div>
         <div class="mb-6">
-          <label class="block text-sm font-medium text-neutral-700">Taux</label>
-          <select v-model="paymentForm.rate" :disabled="isEditMode" class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed">
-            <option value="25">25%</option>
-            <option value="50">50%</option>
-          </select>
+          <label class="block text-sm font-medium text-neutral-700">Heures 50% (heures)</label>
+          <input
+            v-model.number="paymentForm.bonus50Hours"
+            type="number"
+            step="0.5"
+            min="0"
+            class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+          />
         </div>
         <div class="flex justify-end gap-3">
-          <button type="button" class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50" @click="isPaymentDrawerOpen = false">Annuler</button>
-          <button type="submit" class="rounded-md bg-primary-500 px-4 py-2 text-sm font-medium text-white hover:bg-primary-600">Enregistrer</button>
+          <button
+            type="button"
+            class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50"
+            @click="isPaymentDrawerOpen = false"
+          >
+            Annuler
+          </button>
+          <button
+            type="submit"
+            class="rounded-md bg-primary-500 px-4 py-2 text-sm font-medium text-white hover:bg-primary-600"
+          >
+            Enregistrer
+          </button>
         </div>
       </form>
     </AppDrawer>
@@ -82,7 +247,7 @@
 </template>
 
 <script setup lang="ts">
-import type { EmployeeRttSummary } from '~/services/dto/employee-rtt-summary'
+import type { EmployeeRttSummary, EmployeeRttWeekSummary } from '~/services/dto/employee-rtt-summary'
 import AppDrawer from '~/components/AppDrawer.vue'
 
 const props = defineProps<{
@@ -90,27 +255,38 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (event: 'submit-rtt-payment', month: number, minutes: number, rate: '25' | '50'): void
+  (event: 'submit-rtt-payment', month: number, base25Minutes: number, bonus25Minutes: number, base50Minutes: number, bonus50Minutes: number): void
 }>()
 
-const isPaymentDrawerOpen = ref(false)
-const isEditMode = ref(false)
-const paymentForm = reactive({ month: 1, hours: 0, rate: '25' as '25' | '50' })
+// --- Last complete week number ---
 
-const monthLabels = [
-  'Janvier',
-  'Fevrier',
-  'Mars',
-  'Avril',
-  'Mai',
-  'Juin',
-  'Juillet',
-  'Aout',
-  'Septembre',
-  'Octobre',
-  'Novembre',
-  'Decembre'
-] as const
+const lastCompleteWeek = computed(() => {
+  const now = new Date()
+  const startOfYear = new Date(now.getFullYear(), 0, 1)
+  const dayOfYear = Math.floor((now.getTime() - startOfYear.getTime()) / 86400000) + 1
+  const dayOfWeek = now.getDay() || 7 // Monday = 1, Sunday = 7
+  const currentWeek = Math.ceil((dayOfYear - dayOfWeek + 10) / 7)
+  return currentWeek - 1
+})
+
+// --- Month navigation ---
+
+const orderedMonths = [6, 7, 8, 9, 10, 11, 12, 1, 2, 3, 4, 5] as const
+
+const monthLabels: Record<number, string> = {
+  1: 'JANVIER',
+  2: 'FEVRIER',
+  3: 'MARS',
+  4: 'AVRIL',
+  5: 'MAI',
+  6: 'JUIN',
+  7: 'JUILLET',
+  8: 'AOUT',
+  9: 'SEPTEMBRE',
+  10: 'OCTOBRE',
+  11: 'NOVEMBRE',
+  12: 'DECEMBRE',
+}
 
 const orderedMonthOptions = [
   { value: 6, label: 'Juin' },
@@ -124,97 +300,237 @@ const orderedMonthOptions = [
   { value: 2, label: 'Fevrier' },
   { value: 3, label: 'Mars' },
   { value: 4, label: 'Avril' },
-  { value: 5, label: 'Mai' }
+  { value: 5, label: 'Mai' },
 ]
 
-const paymentsByMonth = computed(() => {
-  const map = new Map<number, { paid25: number; paid50: number }>()
-  for (const mp of props.summary?.monthPayments ?? []) {
-    map.set(mp.month, { paid25: mp.paidMinutes25, paid50: mp.paidMinutes50 })
-  }
-  return map
+// Initialize to current month's position in the exercise
+const today = new Date()
+const todayMonth = today.getMonth() + 1
+const initialIndex = orderedMonths.indexOf(todayMonth as (typeof orderedMonths)[number])
+const currentMonthIndex = ref(initialIndex >= 0 ? initialIndex : 0)
+
+const currentMonth = computed(() => orderedMonths[currentMonthIndex.value])
+
+const currentMonthLabel = computed(() => monthLabels[currentMonth.value])
+
+const currentYear = computed(() => {
+  if (!props.summary) return ''
+  return currentMonth.value >= 6 ? props.summary.year - 1 : props.summary.year
 })
 
-const getMonthPaid25 = (month: number) => paymentsByMonth.value.get(month)?.paid25 ?? 0
-const getMonthPaid50 = (month: number) => paymentsByMonth.value.get(month)?.paid50 ?? 0
+// --- Weeks for current month ---
 
-const months = computed(() => {
-  type DisplayWeek = {
-    key: string
-    weekNumber: number
-    recoveryMinutes: number
-    isEmpty?: boolean
-  }
-
-  const byMonth = new Map<number, { month: number; label: string; weeks: DisplayWeek[]; totalMinutes: number }>()
-  const orderedMonths = [6, 7, 8, 9, 10, 11, 12, 1, 2, 3, 4, 5]
-  for (const month of orderedMonths) {
-    byMonth.set(month, {
-      month,
-      label: monthLabels[month - 1],
-      weeks: [],
-      totalMinutes: 0
-    })
-  }
-
-  for (const week of props.summary?.weeks ?? []) {
-    const month = byMonth.get(week.month)
-    if (!month) continue
-
-    month.weeks.push({
-      key: week.weekStart,
-      weekNumber: week.weekNumber,
-      recoveryMinutes: week.recoveryMinutes
-    })
-    month.totalMinutes += week.recoveryMinutes
-  }
-
-  return orderedMonths
-    .map((monthNumber) => byMonth.get(monthNumber)!)
-    .filter(Boolean)
-    .map((month) => {
-      const minRows = 5
-      const missing = Math.max(0, minRows - month.weeks.length)
-      for (let i = 0; i < missing; i += 1) {
-        month.weeks.push({
-          key: `empty-${month.month}-${i}`,
-          weekNumber: 0,
-          recoveryMinutes: 0,
-          isEmpty: true
-        })
-      }
-      return month
-    })
+const weeksForCurrentMonth = computed((): EmployeeRttWeekSummary[] => {
+  if (!props.summary) return []
+  return props.summary.weeks.filter((w) => w.month === currentMonth.value)
 })
 
-const formatMinutes = (minutes: number) => {
+const paddedWeeks = computed((): (EmployeeRttWeekSummary | null)[] => {
+  const weeks = weeksForCurrentMonth.value
+  const padded: (EmployeeRttWeekSummary | null)[] = [...weeks]
+  while (padded.length < 5) {
+    padded.push(null)
+  }
+  return padded
+})
+
+// --- Carry row (RTT rollover from previous year, June only) ---
+
+const carryMonth = computed(() => {
+  if (!props.summary) return 6
+  const cm = props.summary.carryMonth
+  return cm >= 12 ? 1 : cm + 1
+})
+
+const showCarryRow = computed(() => {
+  if (currentMonth.value !== carryMonth.value) return false
+  if ((props.summary?.carryFromPreviousYearMinutes ?? 0) === 0) return false
+
+  // On the first exercise, hide carry if carry month is before rttStartDate
+  if (props.summary?.rttStartDate) {
+    const startDate = new Date(props.summary.rttStartDate)
+    const viewYear = currentMonth.value >= 6 ? props.summary.year - 1 : props.summary.year
+    const viewDate = new Date(viewYear, currentMonth.value - 1, 1)
+    const startMonthDate = new Date(startDate.getFullYear(), startDate.getMonth(), 1)
+    if (viewDate < startMonthDate) return false
+  }
+
+  return true
+})
+
+// --- Month report row (cumulated balance from previous months) ---
+
+// Months of the exercise in order, starting from the carry month
+const exerciseMonths = computed((): number[] => {
+  const start = carryMonth.value
+  const startIdx = orderedMonths.indexOf(start as (typeof orderedMonths)[number])
+  if (startIdx === -1) return [...orderedMonths]
+  return [...orderedMonths.slice(startIdx), ...orderedMonths.slice(0, startIdx)]
+})
+
+const monthReport = computed(() => {
+  if (!props.summary) return { base25: 0, bonus25: 0, total25: 0, base50: 0, bonus50: 0, total50: 0, total: 0 }
+
+  const cm = currentMonth.value
+  const cmIdx = exerciseMonths.value.indexOf(cm)
+  const previousMonths = exerciseMonths.value.slice(0, cmIdx)
+
+  // Start from carry (included in the cumulation)
+  let base25 = props.summary.carryBase25Minutes
+  let bonus25 = props.summary.carryBonus25Minutes
+  let base50 = props.summary.carryBase50Minutes
+  let bonus50 = props.summary.carryBonus50Minutes
+  let total = props.summary.carryFromPreviousYearMinutes
+
+  // Add weeks from previous months
+  for (const w of props.summary.weeks) {
+    if (previousMonths.includes(w.month)) {
+      base25 += w.base25Minutes
+      bonus25 += w.bonus25Minutes
+      base50 += w.base50Minutes
+      bonus50 += w.bonus50Minutes
+      total += w.totalMinutes
+    }
+  }
+
+  // Subtract payments from previous months
+  for (const p of props.summary.monthPayments) {
+    if (previousMonths.includes(p.month)) {
+      base25 -= p.paidBase25Minutes
+      bonus25 -= p.paidBonus25Minutes
+      base50 -= p.paidBase50Minutes
+      bonus50 -= p.paidBonus50Minutes
+      total -= (p.paidBase25Minutes + p.paidBonus25Minutes + p.paidBase50Minutes + p.paidBonus50Minutes)
+    }
+  }
+
+  return { base25, bonus25, total25: base25 + bonus25, base50, bonus50, total50: base50 + bonus50, total }
+})
+
+const showMonthReportRow = computed(() => {
+  // Not on the carry month — carry row handles that
+  if (currentMonth.value === carryMonth.value) return false
+
+  // On the first exercise (containing rttStartDate), hide report for months before the start date
+  if (props.summary?.rttStartDate) {
+    const startDate = new Date(props.summary.rttStartDate)
+    const startYear = startDate.getFullYear()
+    const startMonth = startDate.getMonth() + 1
+    const viewYear = currentMonth.value >= 6 ? props.summary.year - 1 : props.summary.year
+    const viewDate = new Date(viewYear, currentMonth.value - 1, 1)
+    const startMonthDate = new Date(startYear, startMonth - 1, 1)
+    if (viewDate < startMonthDate) return false
+  }
+
+  const r = monthReport.value
+  return r.total !== 0
+})
+
+// --- Totals (current month weeks only) ---
+
+const totals = computed(() => {
+  const weeks = weeksForCurrentMonth.value
+  const positive = weeks.filter((w) => w.totalMinutes >= 0)
+  return {
+    overtime: weeks.reduce((s, w) => s + w.overtimeMinutes, 0),
+    base25: positive.reduce((s, w) => s + w.base25Minutes, 0),
+    bonus25: positive.reduce((s, w) => s + w.bonus25Minutes, 0),
+    total25: weeks.reduce((s, w) => s + w.base25Minutes + w.bonus25Minutes, 0),
+    base50: positive.reduce((s, w) => s + w.base50Minutes, 0),
+    bonus50: positive.reduce((s, w) => s + w.bonus50Minutes, 0),
+    total50: weeks.reduce((s, w) => s + w.base50Minutes + w.bonus50Minutes, 0),
+    total: weeks.reduce((s, w) => s + w.totalMinutes, 0),
+  }
+})
+
+const currentPayment = computed(() => {
+  if (!props.summary) return null
+  return props.summary.monthPayments.find((p) => p.month === currentMonth.value) ?? null
+})
+
+const paidTotal = computed(() => {
+  if (!currentPayment.value) return 0
+  const p = currentPayment.value
+  return -(p.paidBase25Minutes + p.paidBonus25Minutes + p.paidBase50Minutes + p.paidBonus50Minutes)
+})
+
+const reste = computed(() => {
+  const total25 = monthReport.value.total25 + totals.value.total25
+    - (currentPayment.value?.paidBase25Minutes ?? 0) - (currentPayment.value?.paidBonus25Minutes ?? 0)
+  const total50 = monthReport.value.total50 + totals.value.total50
+    - (currentPayment.value?.paidBase50Minutes ?? 0) - (currentPayment.value?.paidBonus50Minutes ?? 0)
+
+  const base25 = Math.round(total25 / 1.25)
+  const bonus25 = total25 - base25
+  const base50 = Math.round(total50 / 1.5)
+  const bonus50 = total50 - base50
+  const total = monthReport.value.total + totals.value.total + paidTotal.value
+
+  return { base25, bonus25, total25, base50, bonus50, total50, total }
+})
+
+// --- Format ---
+
+const formatMinutes = (minutes: number): string => {
+  if (minutes === 0) return '0 h'
+  const sign = minutes < 0 ? '- ' : ''
   const abs = Math.abs(minutes)
   const hours = Math.floor(abs / 60)
   const rest = abs % 60
-  const sign = minutes < 0 ? '-' : ''
-  return `${sign}${hours.toString().padStart(2, '0')}h${rest.toString().padStart(2, '0')}`
+  if (rest === 0) return `${sign}${hours} h`
+  return `${sign}${hours} h ${rest} m`
 }
 
-const openNewPayment = () => {
-  isEditMode.value = false
-  paymentForm.month = 6
-  paymentForm.hours = 0
-  paymentForm.rate = '25'
-  isPaymentDrawerOpen.value = true
+const formatCentiemes = (minutes: number): string => {
+  const value = minutes / 60
+  return value.toFixed(2).replace('.', ',')
 }
 
-const openEditPayment = (month: number, rate: '25' | '50') => {
-  isEditMode.value = true
-  paymentForm.month = month
-  paymentForm.rate = rate
-  const currentMinutes = rate === '25' ? getMonthPaid25(month) : getMonthPaid50(month)
-  paymentForm.hours = currentMinutes / 60
+// --- Payment drawer ---
+
+const isPaymentDrawerOpen = ref(false)
+const paymentForm = reactive({
+  month: 6,
+  base25Hours: 0,
+  bonus25Hours: 0,
+  base50Hours: 0,
+  bonus50Hours: 0,
+})
+
+const prefillFromExistingPayment = (month: number) => {
+  const existing = props.summary?.monthPayments.find((p) => p.month === month) ?? null
+  if (existing) {
+    paymentForm.base25Hours = existing.paidBase25Minutes / 60
+    paymentForm.bonus25Hours = existing.paidBonus25Minutes / 60
+    paymentForm.base50Hours = existing.paidBase50Minutes / 60
+    paymentForm.bonus50Hours = existing.paidBonus50Minutes / 60
+  } else {
+    paymentForm.base25Hours = 0
+    paymentForm.bonus25Hours = 0
+    paymentForm.base50Hours = 0
+    paymentForm.bonus50Hours = 0
+  }
+}
+
+watch(() => paymentForm.month, (newMonth) => {
+  prefillFromExistingPayment(newMonth)
+})
+
+const openPaymentDrawer = () => {
+  paymentForm.month = currentMonth.value
+  prefillFromExistingPayment(currentMonth.value)
   isPaymentDrawerOpen.value = true
 }
 
 const onSubmitPayment = () => {
-  const minutes = Math.round(paymentForm.hours * 60)
-  emit('submit-rtt-payment', paymentForm.month, minutes, paymentForm.rate)
+  emit(
+    'submit-rtt-payment',
+    paymentForm.month,
+    Math.round(paymentForm.base25Hours * 60),
+    Math.round(paymentForm.bonus25Hours * 60),
+    Math.round(paymentForm.base50Hours * 60),
+    Math.round(paymentForm.bonus50Hours * 60),
+  )
   isPaymentDrawerOpen.value = false
 }
 </script>

frontend/components/hours/HoursDayView.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="rounded-lg border border-neutral-200 bg-white overflow-hidden flex min-h-0 flex-col">
+    <div class="bg-white overflow-hidden flex min-h-0 flex-col">
         <div class="overflow-y-auto min-h-0">
             <div
-                class="grid w-full min-w-0 gap-1 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-sm font-semibold text-neutral-700 sticky top-0 z-10"
+                class="grid w-full min-w-0 gap-1 border border-black bg-tertiary-500 px-4 py-3 text-sm font-semibold text-black rounded-t-md sticky top-0 z-10"
                 :style="{ gridTemplateColumns: dayGridCols }"
             >
                 <span>Nom</span>
@@ -42,10 +42,11 @@
                 <span v-if="!isAdmin">RH  <Icon name="mdi:check-bold" class="ml-1"/></span>
             </div>
 
+            <div class="border-x border-b border-primary-500 rounded-b-md">
             <div
                 v-for="employee in employees"
                 :key="employee.id"
-                class="grid w-full min-w-0 items-center gap-1 border-b border-neutral-100 px-4 py-2 text-sm last:border-b-0"
+                class="grid w-full min-w-0 items-center gap-1 border-b border-primary-500 px-4 py-2 text-sm font-bold text-primary-500 last:border-b-0 hover:bg-tertiary-500"
                 :style="{ gridTemplateColumns: dayGridCols }"
             >
                 <div class="text-neutral-900 min-w-0">
@@ -142,19 +143,19 @@
                         :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isEveningLockedByAbsence(employee.id))"
                     />
                 </div>
-                <div class="pl-2 text-sm font-semibold text-neutral-700">
+                <div class="pl-2 text-sm font-semibold">
                     <div v-if="isTimeTracking(employee)">{{
                             formatMinutes(getRowMetrics(employee.id).dayMinutes)
                         }}
                     </div>
                 </div>
-                <div class="text-sm font-semibold text-neutral-700">
+                <div class="text-sm font-semibold">
                     <div v-if="isTimeTracking(employee)">{{
                             formatMinutes(getRowMetrics(employee.id).nightMinutes)
                         }}
                     </div>
                 </div>
-                <div class="text-sm font-semibold text-neutral-700">
+                <div class="text-sm font-semibold">
                     <div v-if="isTimeTracking(employee)">{{
                             formatMinutes(getRowMetrics(employee.id).totalMinutes)
                         }}
@@ -186,6 +187,7 @@
                     <span v-else class="text-xs text-neutral-500">-</span>
                 </div>
             </div>
+            </div>
         </div>
     </div>
 </template>

frontend/components/hours/HoursWeekView.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="rounded-lg border border-neutral-200 bg-white overflow-hidden flex min-h-0 flex-col">
+  <div class="bg-white overflow-hidden flex min-h-0 flex-col">
     <div v-if="isWeekLoading" class="p-6 text-md text-neutral-600">Chargement de la semaine...</div>
     <div v-else class="overflow-y-auto min-h-0">
       <div
-        class="grid w-full min-w-0 gap-1 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-sm font-semibold text-neutral-700 sticky top-0 z-10"
+        class="grid w-full min-w-0 gap-1 border border-black bg-tertiary-500 px-4 py-3 text-sm font-semibold text-black rounded-t-md sticky top-0 z-10"
         :style="{ gridTemplateColumns: weekGridCols }"
       >
         <span>Nom</span>
@@ -14,12 +14,14 @@
         <span>+25%</span>
         <span>+50%</span>
         <span>Total <br>récup.</span>
+        <span>Panier <br>nuit</span>
       </div>
 
+      <div class="border-x border-b border-primary-500 rounded-b-md">
       <div
         v-for="row in weeklySummary?.rows ?? []"
         :key="row.employeeId"
-        class="grid w-full min-w-0 items-center gap-1 border-b border-neutral-100 px-4 py-2 text-sm last:border-b-0 hover:bg-tertiary-500"
+        class="grid w-full min-w-0 items-center gap-1 border-b border-primary-500 px-4 py-2 text-sm font-bold text-primary-500 last:border-b-0 hover:bg-tertiary-500"
         :style="{ gridTemplateColumns: weekGridCols }"
       >
         <div class="text-neutral-900 min-w-0">
@@ -67,6 +69,10 @@
         <div class="font-semibold">
           {{ row.trackingMode === 'PRESENCE' || isInterimContract(row.contractType) ? '-' : formatMinutes(row.weeklyRecoveryMinutes ?? 0) }}
         </div>
+        <div class="font-semibold">
+          {{ (row.weeklyNightBasketCount ?? 0) > 0 ? row.weeklyNightBasketCount : '-' }}
+        </div>
+      </div>
       </div>
     </div>
   </div>

frontend/composables/useDriverHoursPage.ts

@@ -0,0 +1,983 @@
+import { computed, onMounted, ref, watch } from 'vue'
+import type { Employee } from '~/services/dto/employee'
+import type { Site } from '~/services/dto/site'
+import type { WorkHour, WorkHourDayContext, WeeklyWorkHourSummary } from '~/services/dto/work-hour'
+import type { AbsenceType } from '~/services/dto/absence-type'
+import type { Absence } from '~/services/dto/absence'
+import type { HalfDay } from '~/services/dto/half-day'
+import type { DriverHourRow } from '~/services/dto/work-hour'
+import { listScopedEmployees } from '~/services/employees'
+import { listAbsenceTypes } from '~/services/absence-types'
+import { createAbsence, deleteAbsence, listAbsences, updateAbsence } from '~/services/absences'
+import { listPublicHolidays } from '~/services/public-holidays'
+import {
+  bulkUpdateWorkHourSiteValidation,
+  bulkUpdateWorkHourValidation,
+  bulkUpsertWorkHours,
+  getWorkHourDayContext,
+  getWeeklyWorkHourSummary,
+  listWorkHoursByDate,
+  updateWorkHourSiteValidation,
+  updateWorkHourValidation
+} from '~/services/work-hours'
+import {
+  formatDateLongFr,
+  formatWeekRangeFr,
+  getIsoWeekNumber,
+  getOffsetFromTodayYmd,
+  getWeekStartDate,
+  getTodayYmd,
+  parseYmd,
+  shiftYmd
+} from '~/utils/date'
+import { sortEmployeesBySiteAndOrder } from '~/utils/employee'
+
+export const useDriverHoursPage = () => {
+  const auth = useAuthStore()
+  const toast = useToast()
+  const isAdmin = computed(() => auth.user?.roles?.includes('ROLE_ADMIN') ?? false)
+  const isSelfUser = computed(() => auth.user?.roles?.includes('ROLE_SELF') ?? false)
+  const isSiteManager = computed(() => !isAdmin.value && !isSelfUser.value)
+  const viewMode = ref<'day' | 'week'>('day')
+
+  const selectedDate = ref(getTodayYmd())
+  const employees = ref<Employee[]>([])
+  const employeeFilter = ref('')
+  const selectedSiteIds = ref<number[]>([])
+  const sitesInitialized = ref(false)
+  const rows = ref<Record<number, DriverHourRow>>({})
+  const dayContext = ref<WorkHourDayContext | null>(null)
+  const weeklySummary = ref<WeeklyWorkHourSummary | null>(null)
+  const absenceTypes = ref<AbsenceType[]>([])
+  const absences = ref<Absence[]>([])
+  const publicHolidaysByYear = ref<Record<number, Record<string, string>>>({})
+  const isAbsenceDrawerOpen = ref(false)
+  const isAbsenceSubmitting = ref(false)
+  const editingAbsence = ref<Absence | null>(null)
+  const absenceForm = ref({
+    employeeId: '' as number | '',
+    typeId: '' as number | '',
+    startDate: '',
+    startHalf: 'AM' as HalfDay,
+    endDate: '',
+    endHalf: 'PM' as HalfDay,
+    comment: ''
+  })
+  const isLoading = ref(false)
+  const isWeekLoading = ref(false)
+  const isSubmitting = ref(false)
+  const validatingRowIds = ref<number[]>([])
+  const siteValidatingRowIds = ref<number[]>([])
+
+  const dayGridCols = computed(() => {
+    const metricCol = '0.4fr'
+    const validationCols = isAdmin.value ? `${metricCol}` : `${metricCol} ${metricCol}`
+    return `1.2fr 0.6fr 0.8fr 0.8fr 0.8fr ${metricCol} ${metricCol} ${metricCol} ${metricCol} ${metricCol} ${validationCols}`
+  })
+
+  const weekGridCols = '1.6fr repeat(7, 0.6fr) repeat(7, 0.6fr) repeat(4, 0.4fr)'
+
+  const sites = computed<Site[]>(() => {
+    const siteMap = new Map<number, Site>()
+    for (const employee of employees.value) {
+      if (employee.site) {
+        siteMap.set(employee.site.id, employee.site)
+      }
+    }
+
+    return Array.from(siteMap.values()).sort((siteA, siteB) => {
+      const orderA = siteA.displayOrder ?? 0
+      const orderB = siteB.displayOrder ?? 0
+      if (orderA !== orderB) return orderA - orderB
+      return siteA.name.localeCompare(siteB.name, 'fr')
+    })
+  })
+
+  const visibleEmployees = computed(() => {
+    if (selectedSiteIds.value.length === 0) return []
+    const filter = employeeFilter.value.trim().toLowerCase()
+    return employees.value.filter((employee) => {
+      if (employee.isDriver !== true) return false
+      const siteId = employee.site?.id
+      if (!siteId || !selectedSiteIds.value.includes(siteId)) return false
+      if (!filter) return true
+      const firstName = employee.firstName?.toLowerCase() ?? ''
+      const lastName = employee.lastName?.toLowerCase() ?? ''
+      return firstName.includes(filter) || lastName.includes(filter)
+    })
+  })
+
+  const displayedEmployees = computed(() => {
+    return visibleEmployees.value.filter((employee) => hasContractAtSelectedDate(employee.id))
+  })
+
+  const visibleEmployeeIdSet = computed(() => new Set(visibleEmployees.value.map((employee) => employee.id)))
+
+  const filteredWeeklySummary = computed<WeeklyWorkHourSummary | null>(() => {
+    if (!weeklySummary.value) return null
+    return {
+      ...weeklySummary.value,
+      rows: weeklySummary.value.rows.filter((row) =>
+        visibleEmployeeIdSet.value.has(row.employeeId) && row.hasContractForWeek !== false
+      )
+    }
+  })
+
+  const saveButtonClass = computed(() => {
+    if (isSubmitting.value || employees.value.length === 0) {
+      return 'opacity-50 cursor-not-allowed'
+    }
+    return ''
+  })
+
+  const isValidationPending = (employeeId: number) => validatingRowIds.value.includes(employeeId)
+  const isSiteValidationPending = (employeeId: number) => siteValidatingRowIds.value.includes(employeeId)
+  const canToggleValidation = (employeeId: number) => !!rows.value[employeeId]?.workHourId
+  const canToggleSiteValidation = (employeeId: number) => {
+    if (!isSiteManager.value) return false
+    const row = rows.value[employeeId]
+    if (!row?.workHourId) return false
+    if (row.isValid) return false
+    return true
+  }
+
+  const canCreateEmptyValidationRow = (employeeId: number) => {
+    const row = rows.value[employeeId]
+    if (row?.workHourId) return false
+    if (!hasContractAtSelectedDate(employeeId)) return false
+    const dayRow = dayContextByEmployeeId.value.get(employeeId)
+    return !!dayRow?.absenceLabel
+  }
+
+  const canCreateValidationRowFromAbsence = (employeeId: number) => canCreateEmptyValidationRow(employeeId)
+  const canCreateSiteValidationRowFromAbsence = (employeeId: number) => canCreateEmptyValidationRow(employeeId)
+
+  const bulkValidatableEmployeeIds = computed(() => {
+    return visibleEmployees.value
+      .map((employee) => employee.id)
+      .filter((employeeId) => canToggleValidation(employeeId) || canCreateValidationRowFromAbsence(employeeId))
+  })
+
+  const isBulkValidationChecked = computed(() => {
+    const ids = bulkValidatableEmployeeIds.value
+    if (ids.length === 0) return false
+    return ids.every((employeeId) => rows.value[employeeId]?.isValid ?? false)
+  })
+
+  const isBulkValidationIndeterminate = computed(() => {
+    const ids = bulkValidatableEmployeeIds.value
+    if (ids.length === 0) return false
+    const checkedCount = ids.filter((employeeId) => rows.value[employeeId]?.isValid ?? false).length
+    return checkedCount > 0 && checkedCount < ids.length
+  })
+
+  const bulkSiteValidatableEmployeeIds = computed(() => {
+    if (!isSiteManager.value) return []
+    return visibleEmployees.value
+      .map((employee) => employee.id)
+      .filter((employeeId) => canToggleSiteValidation(employeeId) || canCreateSiteValidationRowFromAbsence(employeeId))
+  })
+
+  const isBulkSiteValidationChecked = computed(() => {
+    const ids = bulkSiteValidatableEmployeeIds.value
+    if (ids.length === 0) return false
+    return ids.every((employeeId) => rows.value[employeeId]?.isSiteValid ?? false)
+  })
+
+  const isBulkSiteValidationIndeterminate = computed(() => {
+    const ids = bulkSiteValidatableEmployeeIds.value
+    if (ids.length === 0) return false
+    const checkedCount = ids.filter((employeeId) => rows.value[employeeId]?.isSiteValid ?? false).length
+    return checkedCount > 0 && checkedCount < ids.length
+  })
+
+  const canBulkToggleSiteValidation = computed(() => bulkSiteValidatableEmployeeIds.value.length > 0)
+
+  const dayContextByEmployeeId = computed(() => {
+    const map = new Map<number, WorkHourDayContext['rows'][number]>()
+    for (const row of dayContext.value?.rows ?? []) {
+      map.set(row.employeeId, row)
+    }
+    return map
+  })
+
+  const shortcutButtonClass = (target: 'yesterday' | 'today' | 'tomorrow') => {
+    const targetDate = target === 'yesterday'
+      ? getOffsetFromTodayYmd(-1)
+      : target === 'tomorrow'
+        ? getOffsetFromTodayYmd(1)
+        : getTodayYmd()
+
+    if (selectedDate.value === targetDate) {
+      return 'bg-primary-500 text-white'
+    }
+    return 'bg-white text-primary-500 hover:bg-tertiary-500'
+  }
+
+  const weekShortcutButtonClass = (target: 'previousWeek' | 'thisWeek' | 'nextWeek') => {
+    const selected = parseYmd(selectedDate.value)
+    if (!selected) {
+      return 'bg-white text-primary-500 hover:bg-tertiary-500'
+    }
+
+    const today = new Date()
+    const targetDate = new Date(today)
+    if (target === 'previousWeek') targetDate.setDate(today.getDate() - 7)
+    if (target === 'nextWeek') targetDate.setDate(today.getDate() + 7)
+
+    const selectedWeekStart = getWeekStartDate(selected)
+    const targetWeekStart = getWeekStartDate(targetDate)
+    const isActive = selectedWeekStart.getTime() === targetWeekStart.getTime()
+
+    if (isActive) {
+      return 'bg-primary-500 text-white'
+    }
+    return 'bg-white text-primary-500 hover:bg-tertiary-500'
+  }
+
+  const getWeekShortcutLabel = (target: 'previousWeek' | 'thisWeek' | 'nextWeek') => {
+    const today = new Date()
+    if (target === 'previousWeek') today.setDate(today.getDate() - 7)
+    if (target === 'nextWeek') today.setDate(today.getDate() + 7)
+
+    const weekNumber = getIsoWeekNumber(today)
+    return `Sem. S${weekNumber}`
+  }
+
+  const formattedSelectedDate = computed(() => {
+    const parsed = parseYmd(selectedDate.value)
+    if (!parsed) return selectedDate.value
+
+    if (viewMode.value === 'week') {
+      return formatWeekRangeFr(parsed)
+    }
+
+    return formatDateLongFr(parsed)
+  })
+
+  const selectedYear = computed(() => {
+    const parsed = parseYmd(selectedDate.value)
+    return parsed ? parsed.getFullYear() : null
+  })
+
+  const selectedHolidayLabel = computed(() => {
+    const year = selectedYear.value
+    if (!year) return ''
+    return publicHolidaysByYear.value[year]?.[selectedDate.value] ?? ''
+  })
+
+  const isSelectedDateHoliday = computed(() => selectedHolidayLabel.value !== '')
+
+  const weekDayHeaders = computed(() => {
+    const days = weeklySummary.value?.days ?? []
+    return days.map((date) => {
+      const parsed = parseYmd(date)
+      if (!parsed) return { date, weekday: '', dayDate: '' }
+      const weekday = new Intl.DateTimeFormat('fr-FR', { weekday: 'short' }).format(parsed)
+      const dayDate = new Intl.DateTimeFormat('fr-FR', { day: '2-digit', month: '2-digit' }).format(parsed)
+      return { date, weekday, dayDate }
+    })
+  })
+
+  const shiftDate = (steps: number) => {
+    const offset = viewMode.value === 'week' ? (steps * 7) : steps
+    const next = shiftYmd(selectedDate.value, offset)
+    if (!next) return
+    selectedDate.value = next
+  }
+
+  const setToday = () => { selectedDate.value = getTodayYmd() }
+  const setYesterday = () => { setToday(); shiftDate(-1) }
+  const setTomorrow = () => { setToday(); shiftDate(1) }
+  const setThisWeek = () => { selectedDate.value = getTodayYmd() }
+  const setPreviousWeek = () => {
+    const previousWeek = shiftYmd(getTodayYmd(), -7)
+    if (!previousWeek) return
+    selectedDate.value = previousWeek
+  }
+  const setNextWeek = () => {
+    const nextWeek = shiftYmd(getTodayYmd(), 7)
+    if (!nextWeek) return
+    selectedDate.value = nextWeek
+  }
+
+  const resetAbsenceForm = () => {
+    absenceForm.value = {
+      employeeId: '',
+      typeId: '',
+      startDate: '',
+      startHalf: 'AM',
+      endDate: '',
+      endHalf: 'PM',
+      comment: ''
+    }
+  }
+
+  const closeAbsenceDrawer = () => {
+    isAbsenceDrawerOpen.value = false
+    editingAbsence.value = null
+    resetAbsenceForm()
+  }
+
+  const toMinutes = (time: string): number => {
+    if (!time) return 0
+    const [hours, minutes] = time.split(':').map(Number)
+    if (!Number.isInteger(hours) || !Number.isInteger(minutes)) return 0
+    return (hours * 60) + minutes
+  }
+
+  const formatMinutes = (minutes: number) => {
+    const safeMinutes = Math.max(0, minutes)
+    const hours = Math.floor(safeMinutes / 60)
+    const rest = safeMinutes % 60
+    return `${String(hours).padStart(2, '0')}:${String(rest).padStart(2, '0')}`
+  }
+
+  const minutesToTimeString = (minutes: number | null | undefined): string => {
+    if (minutes === null || minutes === undefined || minutes === 0) return ''
+    return formatMinutes(minutes)
+  }
+
+  const emptyRow = (): DriverHourRow => ({
+    workHourId: null,
+    dayHours: '',
+    nightHours: '',
+    workshopHours: '',
+    hasBreakfast: false,
+    hasLunch: false,
+    hasDinner: false,
+    hasOvernight: false,
+    isSiteValid: false,
+    isValid: false,
+    updatedAt: null
+  })
+
+  const isRowLocked = (employeeId: number) => {
+    const row = rows.value[employeeId]
+    if (!row) return false
+    if (row.isValid) return true
+    if (!isAdmin.value && row.isSiteValid) return true
+    return false
+  }
+
+  const contractLabel = (employee: Employee) => {
+    const contract = employee.contract
+    if (!contract) return '-'
+    return contract.name
+  }
+
+  const getRowMetrics = (employeeId: number) => {
+    const row = rows.value[employeeId] ?? emptyRow()
+    const credited = dayContextByEmployeeId.value.get(employeeId)?.creditedMinutes ?? 0
+    const dayMinutes = toMinutes(row.dayHours) + credited
+    const nightMinutes = toMinutes(row.nightHours)
+    const workshopMinutes = toMinutes(row.workshopHours)
+    const totalMinutes = dayMinutes + nightMinutes + workshopMinutes
+    return { dayMinutes, nightMinutes, workshopMinutes, totalMinutes }
+  }
+
+  const getRowAbsenceLabel = (employeeId: number) => {
+    const dayRow = dayContextByEmployeeId.value.get(employeeId)
+    if (dayRow && dayRow.hasContractAtDate === false) {
+      return 'Contrat non démarré'
+    }
+    if (isSelectedDateHoliday.value) return 'Férié'
+    if (!dayRow?.absenceLabel) return ''
+    if (dayRow.absenceHalf === 'AM' || dayRow.absenceHalf === 'PM') {
+      const halfLabel = dayRow.absenceHalf === 'AM' ? 'Matin' : 'ap.-m.'
+      return `${dayRow.absenceLabel} (${halfLabel})`
+    }
+    return `${dayRow.absenceLabel} (journée)`
+  }
+
+  const getRowAbsenceStyle = (employeeId: number) => {
+    const dayRow = dayContextByEmployeeId.value.get(employeeId)
+    if (dayRow && dayRow.hasContractAtDate === false) {
+      return { backgroundColor: '#6b7280' }
+    }
+    if (!dayRow?.absenceLabel) return undefined
+    return { backgroundColor: dayRow.absenceColor || '#dc2626' }
+  }
+
+  const getRowUpdatedAt = (employeeId: number): string => {
+    const raw = rows.value[employeeId]?.updatedAt
+    if (!raw) return ''
+    const date = new Date(raw)
+    if (Number.isNaN(date.getTime())) return ''
+    return date.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
+  }
+
+  const hasContractAtSelectedDate = (employeeId: number) => {
+    const dayRow = dayContextByEmployeeId.value.get(employeeId)
+    if (!dayRow) return true
+    return dayRow.hasContractAtDate !== false
+  }
+
+  const hydrateRows = (workHours: WorkHour[]) => {
+    const byEmployeeId = new Map<number, WorkHour>()
+    for (const workHour of workHours) {
+      byEmployeeId.set(workHour.employee.id, workHour)
+    }
+
+    const nextRows: Record<number, DriverHourRow> = {}
+    for (const employee of employees.value) {
+      if (employee.isDriver !== true) continue
+      const workHour = byEmployeeId.get(employee.id)
+      nextRows[employee.id] = {
+        workHourId: workHour?.id ?? null,
+        dayHours: minutesToTimeString(workHour?.dayHoursMinutes),
+        nightHours: minutesToTimeString(workHour?.nightHoursMinutes),
+        workshopHours: minutesToTimeString(workHour?.workshopHoursMinutes),
+        hasBreakfast: workHour?.hasBreakfast ?? false,
+        hasLunch: workHour?.hasLunch ?? false,
+        hasDinner: workHour?.hasDinner ?? false,
+        hasOvernight: workHour?.hasOvernight ?? false,
+        isSiteValid: workHour?.isSiteValid ?? false,
+        isValid: workHour?.isValid ?? false,
+        updatedAt: workHour?.updatedAt ?? null
+      }
+    }
+
+    rows.value = nextRows
+  }
+
+  const loadAbsenceTypes = async () => {
+    absenceTypes.value = await listAbsenceTypes()
+  }
+
+  const loadPublicHolidaysForSelectedYear = async () => {
+    const year = selectedYear.value
+    if (!year) return
+    if (publicHolidaysByYear.value[year]) return
+
+    const holidays = await listPublicHolidays('metropole', year)
+    publicHolidaysByYear.value = {
+      ...publicHolidaysByYear.value,
+      [year]: holidays
+    }
+  }
+
+  const loadAbsences = async () => {
+    absences.value = await listAbsences({
+      from: selectedDate.value,
+      to: selectedDate.value,
+      siteIds: isAdmin.value ? selectedSiteIds.value : undefined
+    })
+  }
+
+  const openAbsenceDrawer = (employeeId: number) => {
+    if (!hasContractAtSelectedDate(employeeId)) return
+    if (isSelectedDateHoliday.value) return
+
+    const existing = absences.value.find((absence) => {
+      if (absence.employee?.id !== employeeId) return false
+      const start = absence.startDate.slice(0, 10)
+      const end = absence.endDate.slice(0, 10)
+      return selectedDate.value >= start && selectedDate.value <= end
+    }) ?? null
+
+    if (existing) {
+      editingAbsence.value = existing
+      absenceForm.value = {
+        employeeId,
+        typeId: existing.type?.id ?? '',
+        startDate: existing.startDate.slice(0, 10),
+        startHalf: existing.startHalf ?? 'AM',
+        endDate: existing.endDate.slice(0, 10),
+        endHalf: existing.endHalf ?? 'PM',
+        comment: existing.comment ?? ''
+      }
+    } else {
+      editingAbsence.value = null
+      absenceForm.value = {
+        employeeId,
+        typeId: '',
+        startDate: selectedDate.value,
+        startHalf: 'AM',
+        endDate: selectedDate.value,
+        endHalf: 'PM',
+        comment: ''
+      }
+    }
+
+    isAbsenceDrawerOpen.value = true
+  }
+
+  const refreshAfterAbsenceChange = async () => {
+    if (isAdmin.value) {
+      await Promise.all([loadWeeklySummary(), loadDayContext(), loadAbsences()])
+      return
+    }
+    weeklySummary.value = null
+    await Promise.all([loadDayContext(), loadAbsences()])
+  }
+
+  const submitAbsence = async () => {
+    const form = absenceForm.value
+    if (isAbsenceSubmitting.value || form.employeeId === '' || form.typeId === '') return
+
+    isAbsenceSubmitting.value = true
+    try {
+      if (editingAbsence.value) {
+        await updateAbsence({
+          id: editingAbsence.value.id,
+          employeeId: Number(form.employeeId),
+          typeId: Number(form.typeId),
+          startDate: form.startDate,
+          startHalf: form.startHalf,
+          endDate: form.endDate,
+          endHalf: form.endHalf,
+          comment: editingAbsence.value.comment ?? ''
+        })
+      } else {
+        await createAbsence({
+          employeeId: Number(form.employeeId),
+          typeId: Number(form.typeId),
+          startDate: form.startDate,
+          startHalf: form.startHalf,
+          endDate: form.endDate,
+          endHalf: form.endHalf,
+          comment: ''
+        })
+      }
+
+      closeAbsenceDrawer()
+      await refreshAfterAbsenceChange()
+    } finally {
+      isAbsenceSubmitting.value = false
+    }
+  }
+
+  const deleteAbsenceFromDrawer = async () => {
+    if (!editingAbsence.value || isAbsenceSubmitting.value) return
+
+    isAbsenceSubmitting.value = true
+    try {
+      await deleteAbsence(editingAbsence.value.id)
+      closeAbsenceDrawer()
+      await refreshAfterAbsenceChange()
+    } finally {
+      isAbsenceSubmitting.value = false
+    }
+  }
+
+  const buildEmptyDriverEntry = (employeeId: number) => ({
+    employeeId,
+    morningFrom: null,
+    morningTo: null,
+    afternoonFrom: null,
+    afternoonTo: null,
+    eveningFrom: null,
+    eveningTo: null,
+    isPresentMorning: false,
+    isPresentAfternoon: false,
+    dayHoursMinutes: null,
+    nightHoursMinutes: null,
+    workshopHoursMinutes: null,
+    hasBreakfast: false,
+    hasLunch: false,
+    hasDinner: false,
+    hasOvernight: false
+  })
+
+  const toggleValidation = async (
+    employeeId: number,
+    checked: boolean,
+    options: { toast?: boolean } = {}
+  ) => {
+    const row = rows.value[employeeId]
+    if (!row?.workHourId && checked) {
+      if (canCreateEmptyValidationRow(employeeId)) {
+        await bulkUpsertWorkHours({
+          workDate: selectedDate.value,
+          entries: [buildEmptyDriverEntry(employeeId)]
+        }, { toast: false })
+        await loadWorkHours()
+      }
+    }
+
+    const updatedRow = rows.value[employeeId]
+    if (!updatedRow?.workHourId) {
+      if (options.toast !== false) {
+        toast.error({
+          title: 'Validation impossible',
+          message: 'La ligne doit contenir des heures ou une absence.'
+        })
+      }
+      return
+    }
+
+    if (isValidationPending(employeeId)) return
+
+    validatingRowIds.value = [...validatingRowIds.value, employeeId]
+    try {
+      await updateWorkHourValidation(updatedRow.workHourId, checked, { toast: options.toast })
+      updatedRow.isValid = checked
+    } finally {
+      validatingRowIds.value = validatingRowIds.value.filter((id) => id !== employeeId)
+    }
+  }
+
+  const toggleSiteValidation = async (
+    employeeId: number,
+    checked: boolean,
+    options: { toast?: boolean } = {}
+  ) => {
+    const row = rows.value[employeeId]
+    if (!row?.workHourId && checked) {
+      if (canCreateEmptyValidationRow(employeeId)) {
+        await bulkUpsertWorkHours({
+          workDate: selectedDate.value,
+          entries: [buildEmptyDriverEntry(employeeId)]
+        }, { toast: false })
+        await loadWorkHours()
+      }
+    }
+
+    const updatedRow = rows.value[employeeId]
+    if (!updatedRow?.workHourId) {
+      if (options.toast !== false) {
+        toast.error({
+          title: 'Validation impossible',
+          message: 'La ligne doit contenir des heures ou une absence.'
+        })
+      }
+      return
+    }
+
+    if (isSiteValidationPending(employeeId)) return
+    if (!canToggleSiteValidation(employeeId)) return
+
+    siteValidatingRowIds.value = [...siteValidatingRowIds.value, employeeId]
+    try {
+      await updateWorkHourSiteValidation(updatedRow.workHourId, checked, { toast: options.toast })
+      updatedRow.isSiteValid = checked
+    } finally {
+      siteValidatingRowIds.value = siteValidatingRowIds.value.filter((id) => id !== employeeId)
+    }
+  }
+
+  const toggleValidationBulk = async (checked: boolean) => {
+    const employeeIds = bulkValidatableEmployeeIds.value
+    if (employeeIds.length === 0) return
+
+    const pendingIds = new Set(validatingRowIds.value)
+    const availableEmployeeIds = employeeIds.filter((employeeId) => !pendingIds.has(employeeId))
+    if (availableEmployeeIds.length === 0) return
+
+    if (checked) {
+      const toCreateIds = availableEmployeeIds.filter((employeeId) => canCreateValidationRowFromAbsence(employeeId))
+      if (toCreateIds.length > 0) {
+        await bulkUpsertWorkHours({
+          workDate: selectedDate.value,
+          entries: toCreateIds.map((employeeId) => buildEmptyDriverEntry(employeeId))
+        }, { toast: false })
+        await loadWorkHours()
+      }
+    }
+
+    const targetEmployeeIds = availableEmployeeIds.filter((employeeId) => canToggleValidation(employeeId))
+    if (targetEmployeeIds.length === 0) {
+      toast.error({
+        title: 'Validation impossible',
+        message: 'Aucune ligne ne peut être validée.'
+      })
+      return
+    }
+
+    validatingRowIds.value = Array.from(new Set([...validatingRowIds.value, ...targetEmployeeIds]))
+
+    try {
+      const result = await bulkUpdateWorkHourValidation({
+        workDate: selectedDate.value,
+        isValid: checked,
+        employeeIds: targetEmployeeIds
+      }, { toast: false })
+
+      await loadWorkHours()
+
+      if (result.updated === 0) {
+        toast.error({ title: 'Erreur', message: 'Aucune ligne mise à jour.' })
+        return
+      }
+
+      if (result.skipped > 0) {
+        toast.success({
+          title: 'Succès partiel',
+          message: `${result.updated} mise(s) à jour, ${result.skipped} ignorée(s).`
+        })
+        return
+      }
+
+      toast.success({
+        title: 'Succès',
+        message: checked
+          ? `${result.updated} ligne(s) validée(s).`
+          : `${result.updated} validation(s) retirée(s).`
+      })
+    } catch {
+      toast.error({ title: 'Erreur', message: 'Impossible de mettre à jour les validations.' })
+    } finally {
+      validatingRowIds.value = validatingRowIds.value.filter((id) => !targetEmployeeIds.includes(id))
+    }
+  }
+
+  const toggleSiteValidationBulk = async (checked: boolean) => {
+    if (!isSiteManager.value) return
+
+    const employeeIds = bulkSiteValidatableEmployeeIds.value
+    if (employeeIds.length === 0) return
+
+    const pendingIds = new Set(siteValidatingRowIds.value)
+    const availableEmployeeIds = employeeIds.filter((employeeId) => !pendingIds.has(employeeId))
+    if (availableEmployeeIds.length === 0) return
+
+    if (checked) {
+      const toCreateIds = availableEmployeeIds.filter((employeeId) => canCreateSiteValidationRowFromAbsence(employeeId))
+      if (toCreateIds.length > 0) {
+        await bulkUpsertWorkHours({
+          workDate: selectedDate.value,
+          entries: toCreateIds.map((employeeId) => buildEmptyDriverEntry(employeeId))
+        }, { toast: false })
+        await loadWorkHours()
+      }
+    }
+
+    const targetEmployeeIds = availableEmployeeIds.filter((employeeId) => canToggleSiteValidation(employeeId))
+    if (targetEmployeeIds.length === 0) {
+      toast.error({
+        title: 'Validation impossible',
+        message: 'Aucune ligne ne peut être validée côté site.'
+      })
+      return
+    }
+
+    siteValidatingRowIds.value = Array.from(new Set([...siteValidatingRowIds.value, ...targetEmployeeIds]))
+
+    try {
+      const result = await bulkUpdateWorkHourSiteValidation({
+        workDate: selectedDate.value,
+        isSiteValid: checked,
+        employeeIds: targetEmployeeIds
+      }, { toast: false })
+
+      await loadWorkHours()
+
+      if (result.updated === 0) {
+        toast.error({ title: 'Erreur', message: 'Aucune ligne site mise à jour.' })
+        return
+      }
+
+      if (result.skipped > 0) {
+        toast.success({
+          title: 'Succès partiel',
+          message: `${result.updated} mise(s) à jour, ${result.skipped} ignorée(s).`
+        })
+        return
+      }
+
+      toast.success({
+        title: 'Succès',
+        message: checked
+          ? `${result.updated} validation(s) site enregistrée(s).`
+          : `${result.updated} validation(s) site retirée(s).`
+      })
+    } catch {
+      toast.error({ title: 'Erreur', message: 'Impossible de mettre à jour les validations site.' })
+    } finally {
+      siteValidatingRowIds.value = siteValidatingRowIds.value.filter((id) => !targetEmployeeIds.includes(id))
+    }
+  }
+
+  const loadEmployees = async () => {
+    const scopedEmployees = await listScopedEmployees()
+    employees.value = sortEmployeesBySiteAndOrder(scopedEmployees)
+  }
+
+  const loadWorkHours = async () => {
+    const workHours = await listWorkHoursByDate(selectedDate.value)
+    hydrateRows(workHours)
+  }
+
+  const loadWeeklySummary = async () => {
+    isWeekLoading.value = true
+    try {
+      weeklySummary.value = await getWeeklyWorkHourSummary(selectedDate.value)
+    } finally {
+      isWeekLoading.value = false
+    }
+  }
+
+  const loadDayContext = async () => {
+    dayContext.value = await getWorkHourDayContext(selectedDate.value)
+  }
+
+  const refreshByDate = async () => {
+    if (isAdmin.value) {
+      await Promise.all([loadWorkHours(), loadWeeklySummary(), loadDayContext(), loadAbsences()])
+      return
+    }
+    weeklySummary.value = null
+    await Promise.all([loadWorkHours(), loadDayContext(), loadAbsences()])
+  }
+
+  const loadPage = async () => {
+    isLoading.value = true
+    try {
+      await loadPublicHolidaysForSelectedYear()
+      await loadEmployees()
+      await loadAbsenceTypes()
+      await refreshByDate()
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  onMounted(loadPage)
+
+  watch(sites, (nextSites) => {
+    const currentSiteIds = nextSites.map((site) => site.id)
+
+    if (!sitesInitialized.value) {
+      if (currentSiteIds.length === 0) return
+      selectedSiteIds.value = currentSiteIds
+      sitesInitialized.value = true
+      return
+    }
+
+    selectedSiteIds.value = selectedSiteIds.value.filter((siteId) => currentSiteIds.includes(siteId))
+  }, { immediate: true })
+
+  watch(isAdmin, async (admin) => {
+    if (!admin) {
+      viewMode.value = 'day'
+      weeklySummary.value = null
+      await Promise.all([loadAbsenceTypes(), loadAbsences()])
+      return
+    }
+    await loadAbsenceTypes()
+    await loadAbsences()
+  }, { immediate: true })
+
+  watch(selectedDate, async () => {
+    await loadPublicHolidaysForSelectedYear()
+    await refreshByDate()
+  })
+
+  const handleSave = async () => {
+    if (isSubmitting.value || employees.value.length === 0) return
+
+    isSubmitting.value = true
+    try {
+      const driverEmployees = employees.value.filter(
+        (e) => e.isDriver === true && hasContractAtSelectedDate(e.id)
+      )
+
+      const entries = driverEmployees.map((employee) => {
+        const employeeId = employee.id
+        const row = rows.value[employeeId] ?? emptyRow()
+        const dayMin = toMinutes(row.dayHours)
+        const nightMin = toMinutes(row.nightHours)
+        const workshopMin = toMinutes(row.workshopHours)
+
+        return {
+          employeeId,
+          morningFrom: null,
+          morningTo: null,
+          afternoonFrom: null,
+          afternoonTo: null,
+          eveningFrom: null,
+          eveningTo: null,
+          isPresentMorning: false,
+          isPresentAfternoon: false,
+          dayHoursMinutes: dayMin || null,
+          nightHoursMinutes: nightMin || null,
+          workshopHoursMinutes: workshopMin || null,
+          hasBreakfast: row.hasBreakfast,
+          hasLunch: row.hasLunch,
+          hasDinner: row.hasDinner,
+          hasOvernight: row.hasOvernight
+        }
+      })
+
+      if (entries.length === 0) return
+
+      await bulkUpsertWorkHours({
+        workDate: selectedDate.value,
+        entries
+      })
+
+      await refreshByDate()
+    } finally {
+      isSubmitting.value = false
+    }
+  }
+
+  return {
+    isAdmin,
+    isSelfUser,
+    isSiteManager,
+    viewMode,
+    selectedDate,
+    employeeFilter,
+    sites,
+    selectedSiteIds,
+    employees,
+    visibleEmployees,
+    displayedEmployees,
+    rows,
+    absenceTypes,
+    absenceForm,
+    isAbsenceDrawerOpen,
+    isAbsenceSubmitting,
+    editingAbsence,
+    weeklySummary,
+    filteredWeeklySummary,
+    isLoading,
+    isWeekLoading,
+    isSubmitting,
+    dayGridCols,
+    weekGridCols,
+    saveButtonClass,
+    formattedSelectedDate,
+    isSelectedDateHoliday,
+    weekDayHeaders,
+    shortcutButtonClass,
+    weekShortcutButtonClass,
+    getWeekShortcutLabel,
+    setToday,
+    setYesterday,
+    setTomorrow,
+    setThisWeek,
+    setPreviousWeek,
+    setNextWeek,
+    shiftDate,
+    contractLabel,
+    isRowLocked,
+    hasContractAtSelectedDate,
+    isValidationPending,
+    isSiteValidationPending,
+    canToggleValidation,
+    canToggleSiteValidation,
+    canCreateSiteValidationRowFromAbsence,
+    isBulkValidationChecked,
+    isBulkValidationIndeterminate,
+    isBulkSiteValidationChecked,
+    isBulkSiteValidationIndeterminate,
+    canBulkToggleSiteValidation,
+    toggleValidation,
+    toggleSiteValidation,
+    toggleValidationBulk,
+    toggleSiteValidationBulk,
+    getRowMetrics,
+    getRowAbsenceLabel,
+    getRowAbsenceStyle,
+    getRowUpdatedAt,
+    openAbsenceDrawer,
+    submitAbsence,
+    deleteAbsenceFromDrawer,
+    closeAbsenceDrawer,
+    formatMinutes,
+    handleSave
+  }
+}

frontend/composables/useEmployeeBonus.ts

@@ -0,0 +1,62 @@
+import type { Ref } from 'vue'
+import type { Bonus } from '~/services/dto/bonus'
+import type { Employee } from '~/services/dto/employee'
+import {
+  listBonuses,
+  createBonus,
+  updateBonus,
+  deleteBonus
+} from '~/services/bonuses'
+
+export const useEmployeeBonus = (employee: Ref<Employee | null>, reloadEmployee: () => Promise<void>) => {
+  const bonuses = ref<Bonus[]>([])
+  const isBonusLoading = ref(false)
+  const bonusDataLoaded = ref(false)
+
+  const loadBonusData = async () => {
+    if (!employee.value || isBonusLoading.value) return
+    isBonusLoading.value = true
+    try {
+      bonuses.value = await listBonuses(employee.value.id)
+      bonusDataLoaded.value = true
+    } finally {
+      isBonusLoading.value = false
+    }
+  }
+
+  const resetLoaded = () => {
+    bonusDataLoaded.value = false
+  }
+
+  const submitCreateBonus = async (data: { month: string; amount: number; comment?: string }) => {
+    if (!employee.value) return
+    await createBonus({
+      employeeId: employee.value.id,
+      month: data.month,
+      amount: data.amount,
+      comment: data.comment
+    })
+    await reloadEmployee()
+  }
+
+  const submitUpdateBonus = async (id: number, data: { month: string; amount: number; comment?: string }) => {
+    await updateBonus(id, data)
+    await reloadEmployee()
+  }
+
+  const submitDeleteBonus = async (id: number) => {
+    await deleteBonus(id)
+    await reloadEmployee()
+  }
+
+  return {
+    bonuses,
+    isBonusLoading,
+    bonusDataLoaded,
+    loadBonusData,
+    resetLoaded,
+    submitCreateBonus,
+    submitUpdateBonus,
+    submitDeleteBonus
+  }
+}

frontend/composables/useEmployeeContract.ts

@@ -0,0 +1,361 @@
+import type { Ref } from 'vue'
+import type { Contract } from '~/services/dto/contract'
+import type { ContractHistoryItem, Employee } from '~/services/dto/employee'
+import { listContracts } from '~/services/contracts'
+import { updateEmployee } from '~/services/employees'
+import { createSuspension, updateSuspension } from '~/services/contractSuspensions'
+import { formatNullableYmdToFr, getTodayYmd, shiftYmd } from '~/utils/date'
+import { contractNatureLabel, isContractNature, requiresContractEndDate, showsContractEndDate } from '~/utils/contract'
+
+type SuspensionForm = {
+  id: number | null
+  startDate: string
+  endDate: string
+  comment: string
+}
+
+export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmployee: () => Promise<void>) => {
+  const toast = useToast()
+  const contracts = ref<Contract[]>([])
+  const isContractDrawerOpen = ref(false)
+  const isContractSubmitting = ref(false)
+  const isCreateContractDrawerOpen = ref(false)
+  const isCreateContractSubmitting = ref(false)
+  const suspensionForms = ref<SuspensionForm[]>([])
+  const isSuspensionSubmitting = ref(false)
+
+  const contractForm = reactive({
+    contractId: '' as number | '',
+    contractName: '',
+    weeklyHours: null as number | null,
+    contractNature: 'CDI' as 'CDI' | 'CDD' | 'INTERIM',
+    startDate: '',
+    endDate: '',
+    paidLeaveSettled: false,
+    comment: ''
+  })
+
+  const validationTouched = reactive({
+    endDate: false
+  })
+
+  const createContractForm = reactive({
+    contractId: '' as number | '',
+    contractNature: 'CDI' as 'CDI' | 'CDD' | 'INTERIM',
+    startDate: '',
+    endDate: '',
+    isDriver: false
+  })
+
+  const createValidationTouched = reactive({
+    contractId: false,
+    contractNature: false,
+    startDate: false,
+    endDate: false
+  })
+
+  const contractHistory = computed(() => employee.value?.contractHistory ?? [])
+
+  const formatDate = (value?: string | null) => formatNullableYmdToFr(value)
+
+  const contractHistoryLabel = (item: ContractHistoryItem) => {
+    if (item.weeklyHours !== null && item.weeklyHours !== undefined) {
+      return `${item.weeklyHours} heures`
+    }
+    return item.contractName ?? '-'
+  }
+
+  const currentActiveContractPeriod = computed(() => {
+    const today = getTodayYmd()
+    const history = employee.value?.contractHistory ?? []
+    return history.find((item) => item.startDate <= today && (!item.endDate || item.endDate >= today)) ?? null
+  })
+
+  const lastEndedContractPeriod = computed(() => {
+    if (currentActiveContractPeriod.value) return null
+    const today = getTodayYmd()
+    const history = employee.value?.contractHistory ?? []
+    const ended = history.filter((item) => item.endDate && item.endDate < today)
+    if (ended.length === 0) return null
+    return ended.reduce((latest, item) => (item.endDate! > latest.endDate! ? item : latest))
+  })
+
+  const editableContractPeriod = computed(() => currentActiveContractPeriod.value ?? lastEndedContractPeriod.value)
+
+  const currentActiveContractPeriodId = computed<number | null>(() => {
+    const period = currentActiveContractPeriod.value
+    return period?.periodId ?? null
+  })
+
+  const canCloseCurrentContract = computed(() => {
+    const active = currentActiveContractPeriod.value
+    if (active) {
+      if (!active.endDate) return true
+      return active.endDate > getTodayYmd()
+    }
+    return !!lastEndedContractPeriod.value
+  })
+
+  const canCreateContract = computed(() => {
+    const active = editableContractPeriod.value
+    if (!active) return true
+    return !!active.endDate
+  })
+
+  const isContractEndDateValid = computed(() => contractForm.endDate !== '')
+  const showContractEndDateError = computed(() => validationTouched.endDate && !isContractEndDateValid.value)
+
+  const showsCreateContractEndDate = computed(() => showsContractEndDate(createContractForm.contractNature))
+  const requiresCreateContractEndDate = computed(() => requiresContractEndDate(createContractForm.contractNature))
+  const isCreateContractValid = computed(() => createContractForm.contractId !== '')
+  const isCreateContractNatureValid = computed(() => isContractNature(createContractForm.contractNature))
+  const isCreateContractStartDateValid = computed(() => createContractForm.startDate !== '')
+  const isCreateContractEndDateValid = computed(() => !requiresCreateContractEndDate.value || createContractForm.endDate !== '')
+  const isCreateContractFormValid = computed(() =>
+    isCreateContractValid.value &&
+    isCreateContractNatureValid.value &&
+    isCreateContractStartDateValid.value &&
+    isCreateContractEndDateValid.value
+  )
+
+  const baseInputClass =
+    'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20'
+  const readonlyFieldClass = `${baseInputClass} border-neutral-300 bg-neutral-100 text-neutral-700`
+  const contractEndDateFieldClass = computed(() => showContractEndDateError.value ? `${baseInputClass} border-red-500` : `${baseInputClass} border-neutral-300`)
+  const baseSelectClass = 'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
+  const createContractFieldClass = computed(() => createValidationTouched.contractId && !isCreateContractValid.value ? `${baseSelectClass} border-red-500` : `${baseSelectClass} border-neutral-300`)
+  const createContractNatureFieldClass = computed(() => createValidationTouched.contractNature && !isCreateContractNatureValid.value ? `${baseSelectClass} border-red-500` : `${baseSelectClass} border-neutral-300`)
+  const createContractStartDateFieldClass = computed(() => createValidationTouched.startDate && !isCreateContractStartDateValid.value ? `${baseInputClass} border-red-500` : `${baseInputClass} border-neutral-300`)
+  const createContractEndDateFieldClass = computed(() => createValidationTouched.endDate && !isCreateContractEndDateValid.value ? `${baseInputClass} border-red-500` : `${baseInputClass} border-neutral-300`)
+  const closeContractWorkedHoursLabel = computed(() => {
+    if (contractForm.weeklyHours !== null && contractForm.weeklyHours !== undefined) return `${contractForm.weeklyHours} heures`
+    return contractForm.contractName || '-'
+  })
+
+  const resetContractValidation = () => {
+    validationTouched.endDate = false
+  }
+
+  const hydrateSuspensionForms = () => {
+    const current = employee.value?.currentSuspensions ?? []
+    suspensionForms.value = current.map(s => ({
+      id: s.id,
+      startDate: s.startDate,
+      endDate: s.endDate ?? '',
+      comment: s.comment ?? ''
+    }))
+  }
+
+  const hydrateContractFormFromCurrent = () => {
+    const current = employee.value
+    const period = editableContractPeriod.value
+    if (!current || !period) return
+
+    contractForm.contractId = period.contractId ?? current.contract?.id ?? ''
+    contractForm.contractName = period.contractName ?? current.contract?.name ?? ''
+    contractForm.weeklyHours = period.weeklyHours ?? current.contract?.weeklyHours ?? null
+    contractForm.contractNature = period.contractNature
+    contractForm.startDate = period.startDate
+    contractForm.endDate = period.endDate ?? getTodayYmd()
+    contractForm.paidLeaveSettled = false
+    contractForm.comment = ''
+  }
+
+  const openCloseContractDrawer = () => {
+    if (!employee.value || !canCloseCurrentContract.value) return
+    hydrateContractFormFromCurrent()
+    resetContractValidation()
+    hydrateSuspensionForms()
+    isContractDrawerOpen.value = true
+  }
+
+  const setContractDrawerOpen = (open: boolean) => {
+    isContractDrawerOpen.value = open
+  }
+
+  const resetCreateValidation = () => {
+    createValidationTouched.contractId = false
+    createValidationTouched.contractNature = false
+    createValidationTouched.startDate = false
+    createValidationTouched.endDate = false
+  }
+
+  const openCreateContractDrawer = () => {
+    if (!employee.value || !canCreateContract.value) return
+    createContractForm.contractId = ''
+    createContractForm.contractNature = 'CDI'
+    createContractForm.endDate = ''
+    createContractForm.isDriver = false
+    createContractForm.startDate = editableContractPeriod.value?.endDate
+      ? (shiftYmd(editableContractPeriod.value.endDate, 1) ?? editableContractPeriod.value.endDate)
+      : getTodayYmd()
+    resetCreateValidation()
+    isCreateContractDrawerOpen.value = true
+  }
+
+  const setCreateContractDrawerOpen = (open: boolean) => {
+    isCreateContractDrawerOpen.value = open
+  }
+
+  const submitContractUpdate = async () => {
+    const period = editableContractPeriod.value
+    if (!employee.value || isContractSubmitting.value || !period) return
+
+    validationTouched.endDate = true
+    if (!isContractEndDateValid.value) return
+
+    if (contractForm.endDate < period.startDate) {
+      toast.error({
+        title: 'Erreur',
+        message: `La date de fin doit être postérieure au ${formatDate(period.startDate)}.`
+      })
+      return
+    }
+
+    isContractSubmitting.value = true
+    try {
+      await updateEmployee(employee.value.id, {
+        firstName: employee.value.firstName,
+        lastName: employee.value.lastName,
+        siteId: employee.value.site?.id ?? null,
+        contractId: Number(contractForm.contractId),
+        contractEndDate: contractForm.endDate || null,
+        contractPaidLeaveSettled: contractForm.paidLeaveSettled,
+        contractComment: contractForm.comment || null
+      })
+
+      isContractDrawerOpen.value = false
+      await reloadEmployee()
+    } finally {
+      isContractSubmitting.value = false
+    }
+  }
+
+  const submitCreateContract = async () => {
+    if (!employee.value || isCreateContractSubmitting.value) return
+
+    createValidationTouched.contractId = true
+    createValidationTouched.contractNature = true
+    createValidationTouched.startDate = true
+    createValidationTouched.endDate = true
+    if (!isCreateContractFormValid.value) return
+
+    if (editableContractPeriod.value?.endDate) {
+      const minStartDate = shiftYmd(editableContractPeriod.value.endDate, 1) ?? editableContractPeriod.value.endDate
+      if (createContractForm.startDate < minStartDate) {
+        toast.error({
+          title: 'Erreur',
+          message: `La date de début doit être au moins le ${formatDate(minStartDate)}.`
+        })
+        return
+      }
+    }
+
+    isCreateContractSubmitting.value = true
+    try {
+      await updateEmployee(employee.value.id, {
+        firstName: employee.value.firstName,
+        lastName: employee.value.lastName,
+        siteId: employee.value.site?.id ?? null,
+        contractId: Number(createContractForm.contractId),
+        contractNature: createContractForm.contractNature,
+        contractStartDate: createContractForm.startDate,
+        contractEndDate: createContractForm.endDate || null,
+        isDriverInput: createContractForm.isDriver
+      })
+      isCreateContractDrawerOpen.value = false
+      await reloadEmployee()
+    } finally {
+      isCreateContractSubmitting.value = false
+    }
+  }
+
+  const submitSuspension = async (index: number) => {
+    const form = suspensionForms.value[index]
+    if (!form || !form.startDate) return
+
+    const periodId = currentActiveContractPeriodId.value
+    if (!periodId) return
+
+    isSuspensionSubmitting.value = true
+    try {
+      if (form.id) {
+        await updateSuspension(form.id, {
+          startDate: form.startDate,
+          endDate: form.endDate || null,
+          comment: form.comment || null
+        })
+      } else {
+        await createSuspension({
+          contractPeriodId: periodId,
+          startDate: form.startDate,
+          endDate: form.endDate || null,
+          comment: form.comment || null
+        })
+      }
+      await reloadEmployee()
+      hydrateSuspensionForms()
+    } finally {
+      isSuspensionSubmitting.value = false
+    }
+  }
+
+  const addSuspensionForm = () => {
+    suspensionForms.value.push({
+      id: null,
+      startDate: '',
+      endDate: '',
+      comment: ''
+    })
+  }
+
+  const loadContracts = async () => {
+    contracts.value = await listContracts()
+  }
+
+  watch(showsCreateContractEndDate, (shows) => {
+    if (!shows) {
+      createContractForm.endDate = ''
+    }
+  })
+
+  return {
+    contracts,
+    contractHistory,
+    contractForm,
+    createContractForm,
+    isContractDrawerOpen,
+    isContractSubmitting,
+    isCreateContractDrawerOpen,
+    isCreateContractSubmitting,
+    canCloseCurrentContract,
+    canCreateContract,
+    readonlyFieldClass,
+    closeContractWorkedHoursLabel,
+    contractEndDateFieldClass,
+    showContractEndDateError,
+    isContractEndDateValid,
+    createContractNatureFieldClass,
+    createContractFieldClass,
+    createContractStartDateFieldClass,
+    showsCreateContractEndDate,
+    requiresCreateContractEndDate,
+    createContractEndDateFieldClass,
+    isCreateContractFormValid,
+    contractNatureLabel,
+    contractHistoryLabel,
+    formatDate,
+    openCloseContractDrawer,
+    openCreateContractDrawer,
+    setContractDrawerOpen,
+    setCreateContractDrawerOpen,
+    submitContractUpdate,
+    submitCreateContract,
+    suspensionForms,
+    isSuspensionSubmitting,
+    submitSuspension,
+    addSuspensionForm,
+    currentActiveContractPeriodId,
+    loadContracts
+  }
+}

frontend/composables/useEmployeeDetailPage.ts

@@ -1,65 +1,15 @@
-import type { Contract } from '~/services/dto/contract'
-import type { Absence } from '~/services/dto/absence'
-import type { EmployeeLeaveSummary } from '~/services/dto/employee-leave-summary'
-import type { EmployeeRttSummary } from '~/services/dto/employee-rtt-summary'
-import type { ContractHistoryItem, Employee } from '~/services/dto/employee'
+import type { Employee } from '~/services/dto/employee'
 import { CONTRACT_TYPES } from '~/services/dto/contract'
-import { listAbsences } from '~/services/absences'
-import { listContracts } from '~/services/contracts'
-import { getEmployeeLeaveSummary, updateFractionedDays } from '~/services/employee-leave-summary'
-import { getEmployeeRttSummary, createRttPayment } from '~/services/employee-rtt-summary'
-import { getEmployee, updateEmployee } from '~/services/employees'
-import { listPublicHolidays } from '~/services/public-holidays'
-import { formatNullableYmdToFr, getTodayYmd, shiftYmd } from '~/utils/date'
-import { contractNatureLabel, isContractNature, requiresContractEndDate, showsContractEndDate } from '~/utils/contract'
+import { getEmployee } from '~/services/employees'
 
 export const useEmployeeDetailPage = () => {
   const route = useRoute()
-  const toast = useToast()
   const employee = ref<Employee | null>(null)
   const isLoading = ref(false)
-  const activeTab = ref<'contract' | 'leave' | 'rtt'>('contract')
-  const contracts = ref<Contract[]>([])
-  const employeeAbsences = ref<Absence[]>([])
-  const leaveSummary = ref<EmployeeLeaveSummary | null>(null)
-  const rttSummary = ref<EmployeeRttSummary | null>(null)
-  const publicHolidays = ref<Record<string, string>>({})
-  const isContractDrawerOpen = ref(false)
-  const isContractSubmitting = ref(false)
-  const isCreateContractDrawerOpen = ref(false)
-  const isCreateContractSubmitting = ref(false)
+  const activeTab = ref<'contract' | 'leave' | 'rtt' | 'mileage' | 'bonus' | 'observation'>('contract')
 
-  const contractForm = reactive({
-    contractId: '' as number | '',
-    contractName: '',
-    weeklyHours: null as number | null,
-    contractNature: 'CDI' as 'CDI' | 'CDD' | 'INTERIM',
-    startDate: '',
-    endDate: '',
-    paidLeaveSettled: false,
-    comment: ''
-  })
-
-  const validationTouched = reactive({
-    endDate: false
-  })
-
-  const createContractForm = reactive({
-    contractId: '' as number | '',
-    contractNature: 'CDI' as 'CDI' | 'CDD' | 'INTERIM',
-    startDate: '',
-    endDate: ''
-  })
-
-  const createValidationTouched = reactive({
-    contractId: false,
-    contractNature: false,
-    startDate: false,
-    endDate: false
-  })
-
-  const contractHistory = computed(() => employee.value?.contractHistory ?? [])
   const showLeaveTab = computed(() => employee.value?.currentContractNature !== 'INTERIM')
+  const showRttTab = computed(() => employee.value?.contract?.type !== CONTRACT_TYPES.FORFAIT)
   const employeeContractWorkLabel = computed(() => {
     const contract = employee.value?.contract
     if (!contract) return '-'
@@ -68,117 +18,6 @@ export const useEmployeeDetailPage = () => {
     return contract.name || '-'
   })
 
-  const formatDate = (value?: string | null) => formatNullableYmdToFr(value)
-
-  const contractHistoryLabel = (item: ContractHistoryItem) => {
-    if (item.weeklyHours !== null && item.weeklyHours !== undefined) {
-      return `${item.weeklyHours} heures`
-    }
-    return item.contractName ?? '-'
-  }
-
-  const currentActiveContractPeriod = computed(() => {
-    const today = getTodayYmd()
-    const history = employee.value?.contractHistory ?? []
-    return history.find((item) => item.startDate <= today && (!item.endDate || item.endDate >= today)) ?? null
-  })
-
-  const canCloseCurrentContract = computed(() => {
-    const active = currentActiveContractPeriod.value
-    if (!active) return false
-    if (!active.endDate) return true
-    return active.endDate > getTodayYmd()
-  })
-
-  const canCreateContract = computed(() => {
-    const active = currentActiveContractPeriod.value
-    if (!active) return true
-    return !!active.endDate
-  })
-
-  const isContractEndDateValid = computed(() => contractForm.endDate !== '')
-  const showContractEndDateError = computed(() => validationTouched.endDate && !isContractEndDateValid.value)
-
-  const showsCreateContractEndDate = computed(() => showsContractEndDate(createContractForm.contractNature))
-  const requiresCreateContractEndDate = computed(() => requiresContractEndDate(createContractForm.contractNature))
-  const isCreateContractValid = computed(() => createContractForm.contractId !== '')
-  const isCreateContractNatureValid = computed(() => isContractNature(createContractForm.contractNature))
-  const isCreateContractStartDateValid = computed(() => createContractForm.startDate !== '')
-  const isCreateContractEndDateValid = computed(() => !requiresCreateContractEndDate.value || createContractForm.endDate !== '')
-  const isCreateContractFormValid = computed(() =>
-    isCreateContractValid.value &&
-    isCreateContractNatureValid.value &&
-    isCreateContractStartDateValid.value &&
-    isCreateContractEndDateValid.value
-  )
-
-  const baseInputClass =
-    'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20'
-  const readonlyFieldClass = `${baseInputClass} border-neutral-300 bg-neutral-100 text-neutral-700`
-  const contractEndDateFieldClass = computed(() => showContractEndDateError.value ? `${baseInputClass} border-red-500` : `${baseInputClass} border-neutral-300`)
-  const baseSelectClass = 'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
-  const createContractFieldClass = computed(() => createValidationTouched.contractId && !isCreateContractValid.value ? `${baseSelectClass} border-red-500` : `${baseSelectClass} border-neutral-300`)
-  const createContractNatureFieldClass = computed(() => createValidationTouched.contractNature && !isCreateContractNatureValid.value ? `${baseSelectClass} border-red-500` : `${baseSelectClass} border-neutral-300`)
-  const createContractStartDateFieldClass = computed(() => createValidationTouched.startDate && !isCreateContractStartDateValid.value ? `${baseInputClass} border-red-500` : `${baseInputClass} border-neutral-300`)
-  const createContractEndDateFieldClass = computed(() => createValidationTouched.endDate && !isCreateContractEndDateValid.value ? `${baseInputClass} border-red-500` : `${baseInputClass} border-neutral-300`)
-  const closeContractWorkedHoursLabel = computed(() => {
-    if (contractForm.weeklyHours !== null && contractForm.weeklyHours !== undefined) return `${contractForm.weeklyHours} heures`
-    return contractForm.contractName || '-'
-  })
-
-  const resetContractValidation = () => {
-    validationTouched.endDate = false
-  }
-
-  const hydrateContractFormFromCurrent = () => {
-    const current = employee.value
-    const active = currentActiveContractPeriod.value
-    if (!current || !active) return
-
-    contractForm.contractId = active.contractId ?? current.contract?.id ?? ''
-    contractForm.contractName = active.contractName ?? current.contract?.name ?? ''
-    contractForm.weeklyHours = active.weeklyHours ?? current.contract?.weeklyHours ?? null
-    contractForm.contractNature = active.contractNature
-    contractForm.startDate = active.startDate
-    contractForm.endDate = getTodayYmd()
-    contractForm.paidLeaveSettled = false
-    contractForm.comment = ''
-  }
-
-  const openCloseContractDrawer = () => {
-    if (!employee.value || !canCloseCurrentContract.value) return
-    hydrateContractFormFromCurrent()
-    resetContractValidation()
-    isContractDrawerOpen.value = true
-  }
-
-  const setContractDrawerOpen = (open: boolean) => {
-    isContractDrawerOpen.value = open
-  }
-
-  const resetCreateValidation = () => {
-    createValidationTouched.contractId = false
-    createValidationTouched.contractNature = false
-    createValidationTouched.startDate = false
-    createValidationTouched.endDate = false
-  }
-
-  const openCreateContractDrawer = () => {
-    if (!employee.value || !canCreateContract.value) return
-    createContractForm.contractId = ''
-    createContractForm.contractNature = 'CDI'
-    createContractForm.endDate = ''
-    createContractForm.startDate = currentActiveContractPeriod.value?.endDate
-      ? (shiftYmd(currentActiveContractPeriod.value.endDate, 1) ?? currentActiveContractPeriod.value.endDate)
-      : getTodayYmd()
-    resetCreateValidation()
-    isCreateContractDrawerOpen.value = true
-  }
-
-  const setCreateContractDrawerOpen = (open: boolean) => {
-    isCreateContractDrawerOpen.value = open
-  }
-
   const loadEmployee = async () => {
     const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
     const employeeId = Number(idParam)
@@ -188,141 +27,60 @@ export const useEmployeeDetailPage = () => {
 
     isLoading.value = true
     try {
-      const loadedEmployee = await getEmployee(employeeId)
-      employee.value = loadedEmployee
+      employee.value = await getEmployee(employeeId)
 
-      const now = new Date()
-      const isForfait = loadedEmployee.contract?.type === CONTRACT_TYPES.FORFAIT
-      const leaveYear = isForfait
-        ? now.getFullYear()
-        : (now.getMonth() >= 5 ? now.getFullYear() + 1 : now.getFullYear())
-      const rttYear = now.getMonth() >= 5 ? now.getFullYear() + 1 : now.getFullYear()
-      const from = isForfait
-        ? `${leaveYear}-01-01`
-        : `${leaveYear - 1}-06-01`
-      const to = isForfait
-        ? `${leaveYear}-12-31`
-        : `${leaveYear}-05-31`
-      const holidayYears = isForfait
-        ? [leaveYear]
-        : [leaveYear - 1, leaveYear]
-      const [absences, summary, rtt, ...holidayResults] = await Promise.all([
-        listAbsences({
-          from,
-          to,
-          employeeId: loadedEmployee.id
-        }),
-        showLeaveTab.value
-          ? getEmployeeLeaveSummary(loadedEmployee.id, leaveYear)
-          : Promise.resolve(null),
-        getEmployeeRttSummary(loadedEmployee.id, rttYear),
-        ...holidayYears.map((y) => listPublicHolidays('metropole', y))
-      ])
-      employeeAbsences.value = absences
-      leaveSummary.value = summary
-      rttSummary.value = rtt
-      publicHolidays.value = Object.assign({}, ...holidayResults)
       if (!showLeaveTab.value && activeTab.value === 'leave') {
         activeTab.value = 'contract'
       }
+      if (!showRttTab.value && activeTab.value === 'rtt') {
+        activeTab.value = 'contract'
+      }
+
+      leave.resetLoaded()
+      rtt.resetLoaded()
+      mileage.resetLoaded()
+      bonus.resetLoaded()
+      observation.resetLoaded()
+
+      if (activeTab.value === 'leave' && showLeaveTab.value) {
+        await leave.loadLeaveData()
+      } else if (activeTab.value === 'rtt' && showRttTab.value) {
+        await rtt.loadRttData()
+      } else if (activeTab.value === 'mileage') {
+        await mileage.loadMileageData()
+      } else if (activeTab.value === 'bonus') {
+        await bonus.loadBonusData()
+      } else if (activeTab.value === 'observation') {
+        await observation.loadObservationData()
+      }
     } finally {
       isLoading.value = false
     }
   }
 
-  const submitContractUpdate = async () => {
-    if (!employee.value || isContractSubmitting.value || !currentActiveContractPeriod.value) return
+  const contract = useEmployeeContract(employee, loadEmployee)
+  const leave = useEmployeeLeave(employee, loadEmployee)
+  const rtt = useEmployeeRtt(employee, loadEmployee)
+  const mileage = useEmployeeMileage(employee, loadEmployee)
+  const bonus = useEmployeeBonus(employee, loadEmployee)
+  const observation = useEmployeeObservation(employee, loadEmployee)
 
-    validationTouched.endDate = true
-    if (!isContractEndDateValid.value) return
-
-    if (contractForm.endDate < currentActiveContractPeriod.value.startDate) {
-      toast.error({
-        title: 'Erreur',
-        message: `La date de fin doit être postérieure au ${formatDate(currentActiveContractPeriod.value.startDate)}.`
-      })
-      return
-    }
-
-    isContractSubmitting.value = true
-    try {
-      await updateEmployee(employee.value.id, {
-        firstName: employee.value.firstName,
-        lastName: employee.value.lastName,
-        siteId: employee.value.site?.id ?? null,
-        contractId: Number(contractForm.contractId),
-        contractEndDate: contractForm.endDate || null,
-        contractPaidLeaveSettled: contractForm.paidLeaveSettled,
-        contractComment: contractForm.comment || null
-      })
-
-      isContractDrawerOpen.value = false
-      await loadEmployee()
-    } finally {
-      isContractSubmitting.value = false
-    }
-  }
-
-  const submitCreateContract = async () => {
-    if (!employee.value || isCreateContractSubmitting.value) return
-
-    createValidationTouched.contractId = true
-    createValidationTouched.contractNature = true
-    createValidationTouched.startDate = true
-    createValidationTouched.endDate = true
-    if (!isCreateContractFormValid.value) return
-
-    if (currentActiveContractPeriod.value?.endDate) {
-      const minStartDate = shiftYmd(currentActiveContractPeriod.value.endDate, 1) ?? currentActiveContractPeriod.value.endDate
-      if (createContractForm.startDate < minStartDate) {
-        toast.error({
-          title: 'Erreur',
-          message: `La date de début doit être au moins le ${formatDate(minStartDate)}.`
-        })
-        return
-      }
-    }
-
-    isCreateContractSubmitting.value = true
-    try {
-      await updateEmployee(employee.value.id, {
-        firstName: employee.value.firstName,
-        lastName: employee.value.lastName,
-        siteId: employee.value.site?.id ?? null,
-        contractId: Number(createContractForm.contractId),
-        contractNature: createContractForm.contractNature,
-        contractStartDate: createContractForm.startDate,
-        contractEndDate: createContractForm.endDate || null
-      })
-      isCreateContractDrawerOpen.value = false
-      await loadEmployee()
-    } finally {
-      isCreateContractSubmitting.value = false
-    }
-  }
-
-  const submitFractionedDays = async (days: number) => {
-    if (!employee.value) return
-    const year = leaveSummary.value?.year ?? undefined
-    await updateFractionedDays(employee.value.id, days, year)
-    await loadEmployee()
-  }
-
-  const submitRttPayment = async (month: number, minutes: number, rate: '25' | '50') => {
-    if (!employee.value) return
-    const year = rttSummary.value?.year ?? undefined
-    await createRttPayment(employee.value.id, month, minutes, rate, year)
-    await loadEmployee()
-  }
-
-  watch(showsCreateContractEndDate, (shows) => {
-    if (!shows) {
-      createContractForm.endDate = ''
+  watch(activeTab, (tab) => {
+    if (tab === 'leave' && !leave.leaveDataLoaded.value && showLeaveTab.value) {
+      leave.loadLeaveData()
+    } else if (tab === 'rtt' && !rtt.rttDataLoaded.value && showRttTab.value) {
+      rtt.loadRttData()
+    } else if (tab === 'mileage' && !mileage.mileageDataLoaded.value) {
+      mileage.loadMileageData()
+    } else if (tab === 'bonus' && !bonus.bonusDataLoaded.value) {
+      bonus.loadBonusData()
+    } else if (tab === 'observation' && !observation.observationDataLoaded.value) {
+      observation.loadObservationData()
     }
   })
 
   onMounted(async () => {
-    contracts.value = await listContracts()
+    await contract.loadContracts()
     await loadEmployee()
   })
 
@@ -330,44 +88,14 @@ export const useEmployeeDetailPage = () => {
     employee,
     isLoading,
     activeTab,
-    contracts,
-    employeeAbsences,
-    leaveSummary,
-    rttSummary,
-    publicHolidays,
     showLeaveTab,
-    contractHistory,
+    showRttTab,
     employeeContractWorkLabel,
-    contractForm,
-    createContractForm,
-    isContractDrawerOpen,
-    isContractSubmitting,
-    isCreateContractDrawerOpen,
-    isCreateContractSubmitting,
-    canCloseCurrentContract,
-    canCreateContract,
-    readonlyFieldClass,
-    closeContractWorkedHoursLabel,
-    contractEndDateFieldClass,
-    showContractEndDateError,
-    isContractEndDateValid,
-    createContractNatureFieldClass,
-    createContractFieldClass,
-    createContractStartDateFieldClass,
-    showsCreateContractEndDate,
-    requiresCreateContractEndDate,
-    createContractEndDateFieldClass,
-    isCreateContractFormValid,
-    contractNatureLabel,
-    contractHistoryLabel,
-    formatDate,
-    openCloseContractDrawer,
-    openCreateContractDrawer,
-    setContractDrawerOpen,
-    setCreateContractDrawerOpen,
-    submitContractUpdate,
-    submitCreateContract,
-    submitFractionedDays,
-    submitRttPayment
+    ...contract,
+    ...leave,
+    ...rtt,
+    ...mileage,
+    ...bonus,
+    ...observation
   }
 }

frontend/composables/useEmployeeLeave.ts

@@ -0,0 +1,70 @@
+import type { Ref } from 'vue'
+import type { Absence } from '~/services/dto/absence'
+import type { EmployeeLeaveSummary } from '~/services/dto/employee-leave-summary'
+import type { Employee } from '~/services/dto/employee'
+import { CONTRACT_TYPES } from '~/services/dto/contract'
+import { listAbsences } from '~/services/absences'
+import { getEmployeeLeaveSummary, updateFractionedDays } from '~/services/employee-leave-summary'
+import { listPublicHolidays } from '~/services/public-holidays'
+
+export const useEmployeeLeave = (employee: Ref<Employee | null>, reloadEmployee: () => Promise<void>) => {
+  const employeeAbsences = ref<Absence[]>([])
+  const leaveSummary = ref<EmployeeLeaveSummary | null>(null)
+  const publicHolidays = ref<Record<string, string>>({})
+  const isLeaveLoading = ref(false)
+  const leaveDataLoaded = ref(false)
+
+  const getLeaveYear = () => {
+    const now = new Date()
+    const isForfait = employee.value?.contract?.type === CONTRACT_TYPES.FORFAIT
+    return isForfait
+      ? now.getFullYear()
+      : (now.getMonth() >= 5 ? now.getFullYear() + 1 : now.getFullYear())
+  }
+
+  const loadLeaveData = async () => {
+    if (!employee.value || isLeaveLoading.value) return
+    isLeaveLoading.value = true
+    try {
+      const isForfait = employee.value.contract?.type === CONTRACT_TYPES.FORFAIT
+      const leaveYear = getLeaveYear()
+      const from = isForfait ? `${leaveYear}-01-01` : `${leaveYear - 1}-06-01`
+      const to = isForfait ? `${leaveYear}-12-31` : `${leaveYear}-05-31`
+      const holidayYears = isForfait ? [leaveYear] : [leaveYear - 1, leaveYear]
+
+      const [absences, summary, ...holidayResults] = await Promise.all([
+        listAbsences({ from, to, employeeId: employee.value.id }),
+        getEmployeeLeaveSummary(employee.value.id, leaveYear),
+        ...holidayYears.map((y) => listPublicHolidays('metropole', y))
+      ])
+      employeeAbsences.value = absences
+      leaveSummary.value = summary
+      publicHolidays.value = Object.assign({}, ...holidayResults)
+      leaveDataLoaded.value = true
+    } finally {
+      isLeaveLoading.value = false
+    }
+  }
+
+  const resetLoaded = () => {
+    leaveDataLoaded.value = false
+  }
+
+  const submitFractionedDays = async (days: number) => {
+    if (!employee.value) return
+    const year = leaveSummary.value?.year ?? undefined
+    await updateFractionedDays(employee.value.id, days, year)
+    await reloadEmployee()
+  }
+
+  return {
+    employeeAbsences,
+    leaveSummary,
+    publicHolidays,
+    isLeaveLoading,
+    leaveDataLoaded,
+    loadLeaveData,
+    resetLoaded,
+    submitFractionedDays
+  }
+}

frontend/composables/useEmployeeMileage.ts

@@ -0,0 +1,83 @@
+import type { Ref } from 'vue'
+import type { MileageAllowance } from '~/services/dto/mileage-allowance'
+import type { Employee } from '~/services/dto/employee'
+import {
+  listMileageAllowances,
+  createMileageAllowance,
+  updateMileageAllowance,
+  deleteMileageAllowance,
+  uploadKmReceipt,
+  uploadAmountReceipt
+} from '~/services/mileage-allowances'
+
+export const useEmployeeMileage = (employee: Ref<Employee | null>, reloadEmployee: () => Promise<void>) => {
+  const config = useRuntimeConfig()
+  const apiBase = (config.public.apiBase as string) ?? '/api'
+
+  const mileageAllowances = ref<MileageAllowance[]>([])
+  const isMileageLoading = ref(false)
+  const mileageDataLoaded = ref(false)
+
+  const loadMileageData = async () => {
+    if (!employee.value || isMileageLoading.value) return
+    isMileageLoading.value = true
+    try {
+      mileageAllowances.value = await listMileageAllowances(employee.value.id)
+      mileageDataLoaded.value = true
+    } finally {
+      isMileageLoading.value = false
+    }
+  }
+
+  const resetLoaded = () => {
+    mileageDataLoaded.value = false
+  }
+
+  const submitCreateMileage = async (data: { month: string; kilometers: number; amount: number; comment?: string }, kmFile?: File, amountFile?: File) => {
+    if (!employee.value) return
+    const result = await createMileageAllowance({
+      employeeId: employee.value.id,
+      month: data.month,
+      kilometers: data.kilometers,
+      amount: data.amount,
+      comment: data.comment
+    })
+    if (result?.id) {
+      if (kmFile) {
+        await uploadKmReceipt(apiBase, result.id, kmFile)
+      }
+      if (amountFile) {
+        await uploadAmountReceipt(apiBase, result.id, amountFile)
+      }
+    }
+    await reloadEmployee()
+  }
+
+  const submitUpdateMileage = async (id: number, data: { month: string; kilometers: number; amount: number; comment?: string }, kmFile?: File, amountFile?: File) => {
+    await updateMileageAllowance(id, data)
+    if (kmFile) {
+      await uploadKmReceipt(apiBase, id, kmFile)
+    }
+    if (amountFile) {
+      await uploadAmountReceipt(apiBase, id, amountFile)
+    }
+    await reloadEmployee()
+  }
+
+  const submitDeleteMileage = async (id: number) => {
+    await deleteMileageAllowance(id)
+    await reloadEmployee()
+  }
+
+  return {
+    mileageAllowances,
+    isMileageLoading,
+    mileageDataLoaded,
+    mileageApiBase: apiBase,
+    loadMileageData,
+    resetLoaded,
+    submitCreateMileage,
+    submitUpdateMileage,
+    submitDeleteMileage
+  }
+}

frontend/composables/useEmployeeObservation.ts

@@ -0,0 +1,61 @@
+import type { Ref } from 'vue'
+import type { Observation } from '~/services/dto/observation'
+import type { Employee } from '~/services/dto/employee'
+import {
+  listObservations,
+  createObservation,
+  updateObservation,
+  deleteObservation
+} from '~/services/observations'
+
+export const useEmployeeObservation = (employee: Ref<Employee | null>, reloadEmployee: () => Promise<void>) => {
+  const observations = ref<Observation[]>([])
+  const isObservationLoading = ref(false)
+  const observationDataLoaded = ref(false)
+
+  const loadObservationData = async () => {
+    if (!employee.value || isObservationLoading.value) return
+    isObservationLoading.value = true
+    try {
+      observations.value = await listObservations(employee.value.id)
+      observationDataLoaded.value = true
+    } finally {
+      isObservationLoading.value = false
+    }
+  }
+
+  const resetLoaded = () => {
+    observationDataLoaded.value = false
+  }
+
+  const submitCreateObservation = async (data: { month: string; content: string }) => {
+    if (!employee.value) return
+    await createObservation({
+      employeeId: employee.value.id,
+      month: data.month,
+      content: data.content
+    })
+    await reloadEmployee()
+  }
+
+  const submitUpdateObservation = async (id: number, data: { month: string; content: string }) => {
+    await updateObservation(id, data)
+    await reloadEmployee()
+  }
+
+  const submitDeleteObservation = async (id: number) => {
+    await deleteObservation(id)
+    await reloadEmployee()
+  }
+
+  return {
+    observations,
+    isObservationLoading,
+    observationDataLoaded,
+    loadObservationData,
+    resetLoaded,
+    submitCreateObservation,
+    submitUpdateObservation,
+    submitDeleteObservation
+  }
+}

frontend/composables/useEmployeeRtt.ts

@@ -0,0 +1,42 @@
+import type { Ref } from 'vue'
+import type { EmployeeRttSummary } from '~/services/dto/employee-rtt-summary'
+import type { Employee } from '~/services/dto/employee'
+import { getEmployeeRttSummary, createRttPayment } from '~/services/employee-rtt-summary'
+
+export const useEmployeeRtt = (employee: Ref<Employee | null>, reloadEmployee: () => Promise<void>) => {
+  const rttSummary = ref<EmployeeRttSummary | null>(null)
+  const isRttLoading = ref(false)
+  const rttDataLoaded = ref(false)
+
+  const loadRttData = async () => {
+    if (!employee.value || isRttLoading.value) return
+    isRttLoading.value = true
+    try {
+      const rttYear = new Date().getMonth() >= 5 ? new Date().getFullYear() + 1 : new Date().getFullYear()
+      rttSummary.value = await getEmployeeRttSummary(employee.value.id, rttYear)
+      rttDataLoaded.value = true
+    } finally {
+      isRttLoading.value = false
+    }
+  }
+
+  const resetLoaded = () => {
+    rttDataLoaded.value = false
+  }
+
+  const submitRttPayment = async (month: number, base25Minutes: number, bonus25Minutes: number, base50Minutes: number, bonus50Minutes: number) => {
+    if (!employee.value) return
+    const year = rttSummary.value?.year ?? undefined
+    await createRttPayment(employee.value.id, month, base25Minutes, bonus25Minutes, base50Minutes, bonus50Minutes, year)
+    await reloadEmployee()
+  }
+
+  return {
+    rttSummary,
+    isRttLoading,
+    rttDataLoaded,
+    loadRttData,
+    resetLoaded,
+    submitRttPayment
+  }
+}

frontend/composables/useHoursPage.ts

@@ -77,7 +77,7 @@ export const useHoursPage = () => {
     return `1.2fr 0.6fr repeat(6, 0.8fr) ${metricCol} ${metricCol} ${metricCol} ${validationCols}`
   })
 
-  const weekGridCols = '1.6fr repeat(7, 1fr) repeat(6, 0.6fr)'
+  const weekGridCols = '1.6fr repeat(7, 1fr) repeat(6, 0.6fr) 0.3fr'
 
   const sites = computed<Site[]>(() => {
     const siteMap = new Map<number, Site>()
@@ -99,6 +99,7 @@ export const useHoursPage = () => {
     if (selectedSiteIds.value.length === 0) return []
     const filter = employeeFilter.value.trim().toLowerCase()
     return employees.value.filter((employee) => {
+      if (employee.isDriver === true) return false
       const siteId = employee.site?.id
       if (!siteId || !selectedSiteIds.value.includes(siteId)) return false
       if (!filter) return true
@@ -108,13 +109,19 @@ export const useHoursPage = () => {
     })
   })
 
+  const displayedEmployees = computed(() => {
+    return visibleEmployees.value.filter((employee) => hasContractAtSelectedDate(employee.id))
+  })
+
   const visibleEmployeeIdSet = computed(() => new Set(visibleEmployees.value.map((employee) => employee.id)))
 
   const filteredWeeklySummary = computed<WeeklyWorkHourSummary | null>(() => {
     if (!weeklySummary.value) return null
     return {
       ...weeklySummary.value,
-      rows: weeklySummary.value.rows.filter((row) => visibleEmployeeIdSet.value.has(row.employeeId))
+      rows: weeklySummary.value.rows.filter((row) =>
+        visibleEmployeeIdSet.value.has(row.employeeId) && row.hasContractForWeek !== false
+      )
     }
   })
 
@@ -138,19 +145,17 @@ export const useHoursPage = () => {
     return true
   }
 
-  const canCreateValidationRowFromAbsence = (employeeId: number) => {
+  const canCreateEmptyValidationRow = (employeeId: number) => {
     const row = rows.value[employeeId]
     if (row?.workHourId) return false
+    if (!hasContractAtSelectedDate(employeeId)) return false
     const dayRow = dayContextByEmployeeId.value.get(employeeId)
-    return !!dayRow?.absenceLabel && hasContractAtSelectedDate(employeeId)
+    return !!dayRow?.absenceLabel || is4hContract(employeeId)
   }
 
-  const canCreateSiteValidationRowFromAbsence = (employeeId: number) => {
-    const row = rows.value[employeeId]
-    if (row?.workHourId) return false
-    const dayRow = dayContextByEmployeeId.value.get(employeeId)
-    return !!dayRow?.absenceLabel && hasContractAtSelectedDate(employeeId)
-  }
+  const canCreateValidationRowFromAbsence = (employeeId: number) => canCreateEmptyValidationRow(employeeId)
+
+  const canCreateSiteValidationRowFromAbsence = (employeeId: number) => canCreateEmptyValidationRow(employeeId)
 
   const bulkValidatableEmployeeIds = computed(() => {
     return visibleEmployees.value
@@ -347,6 +352,10 @@ export const useHoursPage = () => {
 
   const isPresenceTracking = (employee: Employee) => employee.contract?.trackingMode === TRACKING_MODES.PRESENCE
   const isTimeTracking = (employee: Employee) => !isPresenceTracking(employee)
+  const is4hContract = (employeeId: number) => {
+    const employee = employees.value.find((e) => e.id === employeeId)
+    return employee?.contract?.weeklyHours === 4
+  }
   const isRowLocked = (employeeId: number) => {
     const row = rows.value[employeeId]
     if (!row) return false
@@ -460,6 +469,9 @@ export const useHoursPage = () => {
 
   const getRowAbsenceStyle = (employeeId: number) => {
     const dayRow = dayContextByEmployeeId.value.get(employeeId)
+    if (dayRow && dayRow.hasContractAtDate === false) {
+      return { backgroundColor: '#6b7280' }
+    }
     if (!dayRow?.absenceLabel) return undefined
     return { backgroundColor: dayRow.absenceColor || '#dc2626' }
   }
@@ -692,13 +704,8 @@ export const useHoursPage = () => {
     options: { toast?: boolean } = {}
   ) => {
     const row = rows.value[employeeId]
-    const dayRow = dayContextByEmployeeId.value.get(employeeId)
     if (!row?.workHourId && checked) {
-      const employee = employees.value.find((item) => item.id === employeeId)
-      const hasAbsence = !!dayRow?.absenceLabel
-      const canCreateFromAbsence = !!employee && hasAbsence && hasContractAtSelectedDate(employeeId)
-
-      if (canCreateFromAbsence) {
+      if (canCreateEmptyValidationRow(employeeId)) {
         await bulkUpsertWorkHours({
           workDate: selectedDate.value,
           entries: [{
@@ -746,13 +753,8 @@ export const useHoursPage = () => {
     options: { toast?: boolean } = {}
   ) => {
     const row = rows.value[employeeId]
-    const dayRow = dayContextByEmployeeId.value.get(employeeId)
     if (!row?.workHourId && checked) {
-      const employee = employees.value.find((item) => item.id === employeeId)
-      const hasAbsence = !!dayRow?.absenceLabel
-      const canCreateFromAbsence = !!employee && hasAbsence && hasContractAtSelectedDate(employeeId)
-
-      if (canCreateFromAbsence) {
+      if (canCreateEmptyValidationRow(employeeId)) {
         await bulkUpsertWorkHours({
           workDate: selectedDate.value,
           entries: [{
@@ -1043,7 +1045,7 @@ export const useHoursPage = () => {
     isSubmitting.value = true
     try {
       const entries = employees.value
-        .filter((employee) => hasContractAtSelectedDate(employee.id))
+        .filter((employee) => hasContractAtSelectedDate(employee.id) && !isRowLocked(employee.id))
         .map((employee) => {
         const employeeId = employee.id
         const row = rows.value[employeeId] ?? emptyRow()
@@ -1100,6 +1102,7 @@ export const useHoursPage = () => {
     selectedSiteIds,
     employees,
     visibleEmployees,
+    displayedEmployees,
     rows,
     absenceTypes,
     absenceForm,

frontend/i18n/locales/fr.json

@@ -36,6 +36,21 @@
             "create": "Impossible de créer l'utilisateur.",
             "update": "Impossible de mettre à jour l'utilisateur.",
             "delete": "Impossible de supprimer l'utilisateur."
+        },
+        "mileage": {
+            "create": "Impossible de créer le frais kilométrique.",
+            "update": "Impossible de mettre à jour le frais kilométrique.",
+            "delete": "Impossible de supprimer le frais kilométrique."
+        },
+        "bonus": {
+            "create": "Impossible de créer la prime.",
+            "update": "Impossible de mettre à jour la prime.",
+            "delete": "Impossible de supprimer la prime."
+        },
+        "observation": {
+            "create": "Impossible de créer l'observation.",
+            "update": "Impossible de mettre à jour l'observation.",
+            "delete": "Impossible de supprimer l'observation."
         }
     },
     "success": {
@@ -67,6 +82,21 @@
             "create": "Utilisateur créé.",
             "update": "Utilisateur mis à jour.",
             "delete": "Utilisateur supprimé."
+        },
+        "mileage": {
+            "create": "Frais kilométrique créé.",
+            "update": "Frais kilométrique mis à jour.",
+            "delete": "Frais kilométrique supprimé."
+        },
+        "bonus": {
+            "create": "Prime créée.",
+            "update": "Prime mise à jour.",
+            "delete": "Prime supprimée."
+        },
+        "observation": {
+            "create": "Observation créée.",
+            "update": "Observation mise à jour.",
+            "delete": "Observation supprimée."
         }
     }
 }

frontend/layouts/default.vue

@@ -7,70 +7,94 @@
                 </div>
                 <nav class="flex-1 px-4 pb-6">
                     <template v-if="isAdmin">
-                        <NuxtLink
-                            to="/"
-                            class="hidden flex items-center gap-3 px-4 pb-3 pt-6 text-md text-black hover:bg-tertiary-500 hover:text-primary-500 border-t border-secondary-500"
-                            active-class="bg-tertiary-500 text-primary-500 font-bold"
-                        >
-                            Tableau de bord
-                        </NuxtLink>
                         <NuxtLink
                             to="/calendar"
-                            class="flex items-center gap-3 px-4 pb-3 pt-6 text-md text-black hover:bg-tertiary-500 hover:text-primary-500 border-t border-secondary-500"
+                            class="flex items-center gap-2 pb-2 pt-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500 border-t border-secondary-500"
                             :class="route.path.startsWith('/calendar')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
                         >
-                            Calendrier
+                            <Icon name="mdi:calendar-blank" size="24"/>
+                            <p>Calendrier</p>
                         </NuxtLink>
                     </template>
                     <NuxtLink
+                        v-if="isAdmin || !isDriver"
                         to="/hours"
-                        class="flex items-center gap-3 px-4 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
-                        :class="route.path.startsWith('/hours')
-                            ? 'bg-tertiary-500 text-primary-500 font-bold'
-                            : ''"
+                        class="flex items-center gap-2 py-2 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
+                        :class="[
+                            route.path.startsWith('/hours') ? 'bg-tertiary-500 text-primary-500 font-bold' : '',
+                            !isAdmin ? 'border-t border-secondary-500 pt-3' : ''
+                        ]"
                     >
-                        Heures
+                        <Icon name="mdi:clock-time-four-outline" size="24"/>
+                        <p>Heures</p>
+                    </NuxtLink>
+                    <NuxtLink
+                        v-if="isAdmin || isDriver"
+                        to="/driver-hours"
+                        class="flex items-center gap-2 py-2 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
+                        :class="[
+                            route.path.startsWith('/driver-hours') ? 'bg-tertiary-500 text-primary-500 font-bold' : '',
+                            !isAdmin && isDriver ? 'border-t border-secondary-500 pt-3' : ''
+                        ]"
+                    >
+                        <Icon name="mdi:truck-outline" size="24"/>
+                        <p>Heures Conducteurs</p>
                     </NuxtLink>
                     <template v-if="isAdmin">
                         <NuxtLink
                             to="/employees"
-                            class="flex items-center gap-3 px-4 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
+                            class="flex items-center gap-2 py-2 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
                             :class="route.path.startsWith('/employees')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
                         >
-                            Employés
+                            <Icon name="mdi:account-group-outline" size="24"/>
+                            <p>Employés</p>
                         </NuxtLink>
                         <NuxtLink
                             to="/sites"
-                            class="flex items-center gap-3 px-4 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
+                            class="flex items-center gap-2 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
                             :class="route.path.startsWith('/sites')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
                         >
-                            Sites
+                            <Icon name="mdi:business" size="24"/>
+                            <p>Sites</p>
                         </NuxtLink>
                         <NuxtLink
                             to="/absence-types"
-                            class="flex items-center gap-3 px-4 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
+                            class="flex items-center gap-2 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
                             :class="route.path.startsWith('/absence-types')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
                         >
-                            Types d'absence
+                            <Icon name="mdi:umbrella-beach-outline" size="24"/>
+                            <p>Types d'absence</p>
                         </NuxtLink>
                         <NuxtLink
                             to="/users"
-                            class="flex items-center gap-3 px-4 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
+                            class="flex items-center gap-3 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
                             :class="route.path.startsWith('/users')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
                         >
-                            Utilisateurs
+                            <Icon name="mdi:account-outline" size="24"/>
+                            <p>Utilisateurs</p>
                         </NuxtLink>
                     </template>
+                    <NuxtLink
+                        v-if="isSuperAdmin"
+                        to="/audit-logs"
+                        class="flex items-center gap-2 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
+                        :class="route.path.startsWith('/audit-logs')
+                            ? 'bg-tertiary-500 text-primary-500 font-bold'
+                            : ''"
+                    >
+                        <Icon name="mdi:clipboard-text-clock-outline" size="24"/>
+                        <p>Journal</p>
+                    </NuxtLink>
                 </nav>
 
                 <div class="flex flex-col gap-2 items-center p-4">
@@ -92,5 +116,7 @@
 const auth = useAuthStore()
 const {version} = useAppVersion()
 const isAdmin = computed(() => auth.user?.roles?.includes('ROLE_ADMIN') ?? false)
+const isSuperAdmin = computed(() => auth.user?.roles?.includes('ROLE_SUPER_ADMIN') ?? false)
+const isDriver = computed(() => auth.user?.isDriver ?? false)
 const route = useRoute()
 </script>

frontend/middleware/super-admin.ts

@@ -0,0 +1,12 @@
+export default defineNuxtRouteMiddleware(async () => {
+  const auth = useAuthStore()
+
+  if (!auth.checked) {
+    await auth.ensureSession()
+  }
+
+  const isSuperAdmin = auth.user?.roles?.includes('ROLE_SUPER_ADMIN')
+  if (!isSuperAdmin) {
+    return navigateTo('/')
+  }
+})

frontend/pages/absence-types.vue

@@ -1,13 +1,13 @@
 <template>
-  <div>
-    <div class="flex items-center justify-between pb-12">
+  <div class="h-full flex flex-col overflow-hidden">
+    <div class="flex items-center justify-between pb-6">
       <h1 class="text-4xl font-bold text-primary-500">Types d'absence</h1>
       <button
         type="button"
         class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
         @click="openCreate"
       >
-        Ajouter un type
+        + Ajouter un type
       </button>
     </div>
 
@@ -18,33 +18,33 @@
       Aucun type pour le moment.
     </div>
 
-    <div v-else class="overflow-hidden rounded-lg border border-neutral-200 bg-white">
-      <div class="grid grid-cols-[120px_160px_1fr_220px_200px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
-        <span class="text-left">Code</span>
-        <span class="text-left">Libellé</span>
-        <span class="text-left">Couleur</span>
-        <span class="text-left">Compte en heures</span>
-        <span class="text-right">Actions</span>
+    <div v-else class="min-h-0 overflow-auto rounded-md bg-white">
+      <div class="grid grid-cols-4 gap-4 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md sticky top-0 z-10">
+        <span>Code</span>
+        <span>Libellé</span>
+        <span>Couleur</span>
+        <span>Compte en heures</span>
       </div>
       <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500">
         Chargement...
       </div>
-      <div v-else>
+      <div v-else class="border-x border-b border-primary-500 rounded-b-md">
         <div
           v-for="type in absenceTypes"
           :key="type.id"
-          class="grid grid-cols-[120px_160px_1fr_220px_200px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
+          class="grid grid-cols-4 items-center gap-4 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500"
+          @click="openEdit(type)"
         >
-          <span class="font-semibold text-left">{{ type.code }}</span>
-          <span class="text-left">{{ type.label }}</span>
-          <div class="flex items-center gap-2 justify-start">
+          <span>{{ type.code }}</span>
+          <span>{{ type.label }}</span>
+          <div class="flex items-center gap-2">
             <span
               class="inline-block h-3 w-3 rounded-full"
               :style="{ backgroundColor: type.color }"
             />
             <span class="text-md uppercase text-neutral-500">{{ type.color }}</span>
           </div>
-          <div class="text-left">
+          <div>
             <span
               class="inline-flex rounded-md px-2 py-1 text-sm font-semibold"
               :class="type.countAsWorkedHours ? 'bg-emerald-100 text-emerald-700' : 'bg-neutral-100 text-neutral-700'"
@@ -52,22 +52,6 @@
               {{ type.countAsWorkedHours ? 'Oui' : 'Non' }}
             </span>
           </div>
-          <div class="flex items-center justify-end gap-2">
-            <button
-              type="button"
-              class="rounded-md border border-neutral-200 px-2 py-1 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-              @click="openEdit(type)"
-            >
-              Modifier
-            </button>
-            <button
-              type="button"
-              class="rounded-md border border-red-200 px-2 py-1 text-md font-semibold text-red-600 hover:bg-red-50"
-              @click="confirmDelete(type)"
-            >
-              Supprimer
-            </button>
-          </div>
         </div>
       </div>
     </div>
@@ -145,20 +129,29 @@
             La couleur est obligatoire.
           </p>
         </div>
-        <div class="flex justify-end gap-3 pt-2">
+        <div v-if="editingType" class="grid grid-cols-2 gap-3 pt-2">
           <button
             type="button"
-            class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-            @click="closeDrawer"
+            class="flex items-center justify-center rounded-md bg-red-500 px-4 py-2 text-md font-semibold text-white hover:bg-red-600"
+            @click="confirmDelete(editingType)"
           >
-            Annuler
+            Supprimer
           </button>
           <button
             type="submit"
-            class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+            class="flex items-center justify-center rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
             :class="submitButtonClass"
           >
-            Enregistrer
+            Modifier
+          </button>
+        </div>
+        <div v-else class="flex justify-center pt-2">
+          <button
+            type="submit"
+            class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+            :class="submitButtonClass"
+          >
+            + Ajouter
           </button>
         </div>
       </form>

frontend/pages/audit-logs.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="h-full flex flex-col overflow-hidden">
+    <h1 class="text-4xl font-bold text-primary-500 pb-6">Journal des actions</h1>
+
+    <div class="flex items-end gap-4 pb-6 flex-wrap">
+      <div>
+        <label class="text-md font-semibold text-neutral-700">Employé</label>
+        <select
+          v-model="filters.employeeId"
+          class="mt-2 h-[42px] w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+        >
+          <option :value="undefined">Tous</option>
+          <option v-for="emp in employees" :key="emp.id" :value="emp.id">
+            {{ emp.lastName }} {{ emp.firstName }}
+          </option>
+        </select>
+      </div>
+      <div>
+        <label class="text-md font-semibold text-neutral-700">Du</label>
+        <input
+          v-model="filters.from"
+          type="date"
+          class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+        />
+      </div>
+      <div>
+        <label class="text-md font-semibold text-neutral-700">Au</label>
+        <input
+          v-model="filters.to"
+          type="date"
+          class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+        />
+      </div>
+      <div>
+        <label class="text-md font-semibold text-neutral-700">Type</label>
+        <select
+          v-model="filters.entityType"
+          class="mt-2 h-[42px] w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+        >
+          <option :value="undefined">Tous</option>
+          <option value="work_hour">Heures</option>
+          <option value="absence">Absences</option>
+          <option value="employee">Employé</option>
+          <option value="contract_suspension">Suspension</option>
+          <option value="rtt_payment">Paiement RTT</option>
+          <option value="fractioned_days">Jours fractionnés</option>
+        </select>
+      </div>
+      <button
+        type="button"
+        class="h-[42px] rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+        @click="search"
+      >
+        Rechercher
+      </button>
+    </div>
+
+    <div v-if="isLoading" class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+      Chargement...
+    </div>
+
+    <div v-else-if="logs.length === 0" class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+      Aucune entrée trouvée.
+    </div>
+
+    <template v-else>
+      <div class="min-h-0 flex-1 overflow-auto rounded-md bg-white">
+        <div class="grid grid-cols-[140px_110px_90px_100px_150px_1fr_130px] gap-4 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md sticky top-0 z-10">
+          <span>Date action</span>
+          <span>Utilisateur</span>
+          <span>Action</span>
+          <span>Type</span>
+          <span>Employé</span>
+          <span>Description</span>
+          <span>Date affectée</span>
+        </div>
+        <div class="border-x border-b border-primary-500 rounded-b-md">
+          <template v-for="log in logs" :key="log.id">
+            <div
+              class="grid grid-cols-[140px_110px_90px_100px_150px_1fr_130px] items-center gap-4 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500"
+              @click="toggleExpand(log.id)"
+            >
+              <span>{{ formatDateTime(log.createdAt) }}</span>
+              <span>{{ log.username }}</span>
+              <span>
+                <span class="rounded px-2 py-0.5 text-xs font-bold text-white" :class="actionClass(log.action)">
+                  {{ actionLabel(log.action) }}
+                </span>
+              </span>
+              <span>{{ entityTypeLabel(log.entityType) }}</span>
+              <span>{{ log.employeeName ?? '-' }}</span>
+              <span class="truncate font-normal" :title="log.description">{{ log.description }}</span>
+              <span>{{ log.affectedDate ? formatDate(log.affectedDate) : '-' }}</span>
+            </div>
+
+            <div
+              v-if="expandedIds.has(log.id)"
+              class="border-b border-primary-500 px-6 py-4 bg-neutral-50"
+            >
+              <div v-if="log.changes" class="grid grid-cols-2 gap-6 text-sm font-mono">
+                <div v-if="log.changes.old">
+                  <p class="font-bold text-red-600 mb-2">Ancien</p>
+                  <pre class="whitespace-pre-wrap text-neutral-700">{{ JSON.stringify(log.changes.old, null, 2) }}</pre>
+                </div>
+                <div v-if="log.changes.new">
+                  <p class="font-bold text-green-600 mb-2">Nouveau</p>
+                  <pre class="whitespace-pre-wrap text-neutral-700">{{ JSON.stringify(log.changes.new, null, 2) }}</pre>
+                </div>
+              </div>
+              <p v-else class="text-md text-neutral-400">Pas de détail disponible.</p>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <div class="flex items-center justify-between pt-4">
+        <p class="text-md text-neutral-500">
+          {{ total }} résultat{{ total > 1 ? 's' : '' }} — page {{ currentPage }}/{{ totalPages }}
+        </p>
+        <div class="flex gap-3">
+          <button
+            type="button"
+            :disabled="currentPage <= 1"
+            class="rounded-lg border border-primary-500 px-4 py-2 text-md font-semibold text-primary-500 hover:bg-tertiary-500 disabled:opacity-30 disabled:cursor-not-allowed"
+            @click="goToPage(currentPage - 1)"
+          >
+            Précédent
+          </button>
+          <button
+            type="button"
+            :disabled="currentPage >= totalPages"
+            class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:opacity-30 disabled:cursor-not-allowed"
+            @click="goToPage(currentPage + 1)"
+          >
+            Suivant
+          </button>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import type { AuditLog } from '~/services/dto/audit-log'
+import type { Employee } from '~/services/dto/employee'
+import { fetchAuditLogs } from '~/services/audit-logs'
+import { listEmployees } from '~/services/employees'
+
+definePageMeta({
+  middleware: 'super-admin'
+})
+
+useHead({ title: 'Journal des actions' })
+
+const logs = ref<AuditLog[]>([])
+const employees = ref<Employee[]>([])
+const isLoading = ref(false)
+const expandedIds = ref(new Set<number>())
+const total = ref(0)
+const currentPage = ref(1)
+const perPage = ref(50)
+
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / perPage.value)))
+
+const filters = reactive<{
+  employeeId?: number
+  from?: string
+  to?: string
+  entityType?: string
+}>({})
+
+const loadLogs = async (page = 1) => {
+  isLoading.value = true
+  try {
+    const result = await fetchAuditLogs({ ...filters, page })
+    logs.value = result.items
+    total.value = result.total
+    currentPage.value = result.page
+    perPage.value = result.perPage
+    expandedIds.value.clear()
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const search = () => {
+  loadLogs(1)
+}
+
+const goToPage = (page: number) => {
+  if (page >= 1 && page <= totalPages.value) {
+    loadLogs(page)
+  }
+}
+
+const toggleExpand = (id: number) => {
+  if (expandedIds.value.has(id)) {
+    expandedIds.value.delete(id)
+  } else {
+    expandedIds.value.add(id)
+  }
+}
+
+const formatDateTime = (dt: string) => {
+  const d = new Date(dt)
+  return d.toLocaleDateString('fr-FR') + ' ' + d.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
+}
+
+const formatDate = (d: string) => {
+  return d.split('-').reverse().join('/')
+}
+
+const actionLabel = (action: string): string => {
+  const map: Record<string, string> = {
+    create: 'Créer',
+    update: 'Modifier',
+    delete: 'Suppr.',
+    validate: 'Valid.',
+    site_validate: 'Valid. site',
+  }
+  return map[action] ?? action
+}
+
+const actionClass = (action: string): string => {
+  const map: Record<string, string> = {
+    create: 'bg-green-500',
+    update: 'bg-blue-500',
+    delete: 'bg-red-500',
+    validate: 'bg-purple-500',
+    site_validate: 'bg-indigo-500',
+  }
+  return map[action] ?? 'bg-neutral-500'
+}
+
+const entityTypeLabel = (type: string): string => {
+  const map: Record<string, string> = {
+    work_hour: 'Heures',
+    absence: 'Absence',
+    employee: 'Employé',
+    contract_suspension: 'Suspension',
+    rtt_payment: 'RTT',
+    fractioned_days: 'Fract.',
+  }
+  return map[type] ?? type
+}
+
+onMounted(async () => {
+  employees.value = await listEmployees()
+  await loadLogs()
+})
+</script>

frontend/pages/calendar.vue

@@ -14,7 +14,7 @@
                         class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
                         @click="openCreateFromToday"
                     >
-                        Ajouter une absence
+                        + Ajouter une absence
                     </button>
                     <button
                         type="button"
@@ -578,10 +578,6 @@ const handleSubmit = async () => {
             window.alert("La demi-journee de fin ne peut pas etre avant la demi-journee de debut.")
             return
         }
-        if (hasHolidayInRange(start, end)) {
-            window.alert("Impossible de creer une absence sur un jour ferie.")
-            return
-        }
         const overlaps = absences.value.filter((absence) => {
             if (absence.employee?.id !== Number(form.employeeId)) return false
             if (editingAbsence.value && absence.id === editingAbsence.value.id) return false

frontend/pages/driver-hours.vue

@@ -0,0 +1,183 @@
+<template>
+    <div class="h-full overflow-hidden flex flex-col">
+        <div class="flex flex-wrap items-center justify-between gap-4">
+            <h1 class="text-4xl font-bold text-primary-500">Heures Conducteurs</h1>
+        </div>
+
+        <HoursToolbar
+            v-model:selected-date="selectedDate"
+            v-model:view-mode="viewMode"
+            v-model:selected-site-ids="selectedSiteIds"
+            v-model:employee-filter="employeeFilter"
+            :is-admin="isAdmin"
+            :sites="sites"
+            :absence-types="absenceTypes"
+            :formatted-selected-date="formattedSelectedDate"
+            :shortcut-button-class="shortcutButtonClass"
+            :week-shortcut-button-class="weekShortcutButtonClass"
+            :get-week-shortcut-label="getWeekShortcutLabel"
+            @set-yesterday="setYesterday"
+            @set-today="setToday"
+            @set-tomorrow="setTomorrow"
+            @set-previous-week="setPreviousWeek"
+            @set-this-week="setThisWeek"
+            @set-next-week="setNextWeek"
+            @shift-date="shiftDate"
+        />
+
+        <div v-if="isLoading" class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+            Chargement...
+        </div>
+
+        <div v-else-if="visibleEmployees.length === 0" class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+            Aucun conducteur accessible.
+        </div>
+
+        <div v-else class="flex min-h-0 flex-col gap-4">
+            <div class="min-h-0 flex flex-col max-h-[calc(100vh-300px)]">
+                <DriverHoursDayView
+                    v-if="viewMode === 'day'"
+                    v-model:rows="rows"
+                    :employees="displayedEmployees"
+                    :is-admin="isAdmin"
+                    :is-site-manager="isSiteManager"
+                    :day-grid-cols="dayGridCols"
+                    :is-holiday="isSelectedDateHoliday"
+                    :contract-label="contractLabel"
+                    :is-row-locked="isRowLocked"
+                    :has-contract-at-selected-date="hasContractAtSelectedDate"
+                    :is-validation-pending="isValidationPending"
+                    :is-site-validation-pending="isSiteValidationPending"
+                    :can-toggle-validation="canToggleValidation"
+                    :can-toggle-site-validation="canToggleSiteValidation"
+                    :can-create-site-validation-row-from-absence="canCreateSiteValidationRowFromAbsence"
+                    :is-bulk-validation-checked="isBulkValidationChecked"
+                    :is-bulk-validation-indeterminate="isBulkValidationIndeterminate"
+                    :is-bulk-site-validation-checked="isBulkSiteValidationChecked"
+                    :is-bulk-site-validation-indeterminate="isBulkSiteValidationIndeterminate"
+                    :can-bulk-toggle-site-validation="canBulkToggleSiteValidation"
+                    :on-toggle-validation="toggleValidation"
+                    :on-toggle-site-validation="toggleSiteValidation"
+                    :on-toggle-validation-bulk="toggleValidationBulk"
+                    :on-toggle-site-validation-bulk="toggleSiteValidationBulk"
+                    :get-row-metrics="getRowMetrics"
+                    :get-row-absence-label="getRowAbsenceLabel"
+                    :get-row-absence-style="getRowAbsenceStyle"
+                    :get-row-updated-at="getRowUpdatedAt"
+                    :on-absence-click="openAbsenceDrawer"
+                    :format-minutes="formatMinutes"
+                    class="max-h-[calc(100vh-300px)]"
+                />
+
+                <DriverHoursWeekView
+                    v-else-if="isAdmin && viewMode === 'week'"
+                    :is-week-loading="isWeekLoading"
+                    :week-grid-cols="weekGridCols"
+                    :weekly-summary="filteredWeeklySummary"
+                    :week-day-headers="weekDayHeaders"
+                    :format-minutes="formatMinutes"
+                    class="max-h-[calc(100vh-300px)]"
+                />
+            </div>
+
+            <div v-if="viewMode === 'day'" class="shrink-0 px-4 pt-4 flex justify-center">
+                <button
+                    type="button"
+                    class="rounded-lg bg-primary-500 px-6 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                    :class="saveButtonClass"
+                    :disabled="isSubmitting || visibleEmployees.length === 0"
+                    @click="handleSave"
+                >
+                    Enregistrer
+                </button>
+            </div>
+        </div>
+
+        <AbsenceFormDrawer
+            v-model="isAbsenceDrawerOpen"
+            :employees="employees"
+            :absence-types="absenceTypes"
+            :form="absenceForm"
+            :editing-absence="editingAbsence"
+            :is-submitting="isAbsenceSubmitting"
+            :lock-employee="true"
+            :lock-dates="true"
+            :show-comment="false"
+            @submit="submitAbsence"
+            @delete="deleteAbsenceFromDrawer"
+            @cancel="closeAbsenceDrawer"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+const {
+  isAdmin,
+  isSiteManager,
+  viewMode,
+  selectedDate,
+  employeeFilter,
+  sites,
+  selectedSiteIds,
+  employees,
+  visibleEmployees,
+  displayedEmployees,
+  rows,
+  absenceTypes,
+  absenceForm,
+  isAbsenceDrawerOpen,
+  isAbsenceSubmitting,
+  editingAbsence,
+  filteredWeeklySummary,
+  isLoading,
+  isWeekLoading,
+  isSubmitting,
+  dayGridCols,
+  weekGridCols,
+  saveButtonClass,
+  formattedSelectedDate,
+  weekDayHeaders,
+  shortcutButtonClass,
+  weekShortcutButtonClass,
+  getWeekShortcutLabel,
+  setToday,
+  setYesterday,
+  setTomorrow,
+  setThisWeek,
+  setPreviousWeek,
+  setNextWeek,
+  shiftDate,
+  contractLabel,
+  isRowLocked,
+  hasContractAtSelectedDate,
+  isValidationPending,
+  isSiteValidationPending,
+  canToggleValidation,
+  canToggleSiteValidation,
+  canCreateSiteValidationRowFromAbsence,
+  isBulkValidationChecked,
+  isBulkValidationIndeterminate,
+  isBulkSiteValidationChecked,
+  isBulkSiteValidationIndeterminate,
+  canBulkToggleSiteValidation,
+  toggleValidation,
+  toggleSiteValidation,
+  toggleValidationBulk,
+  toggleSiteValidationBulk,
+  getRowMetrics,
+  getRowAbsenceLabel,
+  getRowAbsenceStyle,
+  getRowUpdatedAt,
+  openAbsenceDrawer,
+  submitAbsence,
+  deleteAbsenceFromDrawer,
+  closeAbsenceDrawer,
+  formatMinutes,
+  isSelectedDateHoliday,
+  handleSave
+} = useDriverHoursPage()
+
+useHead({
+    title: 'Heures Conducteurs'
+})
+</script>

frontend/pages/employees/[id].vue

@@ -13,7 +13,16 @@
         <div v-else class="flex min-h-0 flex-1 flex-col">
             <div class="flex items-center justify-between">
                 <div>
-                    <h1 class="text-[32px] font-bold">{{ employee.firstName }} {{ employee.lastName }}</h1>
+                    <div class="flex items-center gap-4">
+                        <h1 class="text-[32px] font-bold">{{ employee.firstName }} {{ employee.lastName }}</h1>
+                        <button
+                            class="inline-flex items-center justify-center rounded-md p-1 transition-colors duration-150 focus:outline-none focus-visible:ring-2 bg-primary-500 hover:bg-secondary-500 active:bg-primary-500 text-white cursor-pointer"
+                            title="Export heures annuelles"
+                            @click="isYearlyHoursDrawerOpen = true"
+                        >
+                            <Icon name="mdi:printer" size="24" />
+                        </button>
+                    </div>
                     <p>Date d'entrée : {{ employee.entryDate ? employee.entryDate.split('-').reverse().join('/') : '-' }}</p>
                 </div>
                 <div class="text-right">
@@ -21,7 +30,7 @@
                     <p class="text-[18px]">{{ employee.site?.name ?? '-' }}</p>
                 </div>
             </div>
-            <div class="mt-12 border-b border-primary-500">
+            <div class="mt-[44px] border-b border-primary-500">
                 <div class="flex justify-center gap-16 text-2xl font-bold">
                     <button
                         class="pb-2 border-b-2 flex items-center gap-3"
@@ -45,6 +54,7 @@
                         Congé
                     </button>
                     <button
+                        v-if="showRttTab"
                         class="pb-2 border-b-2 flex items-center gap-3"
                         :class="activeTab === 'rtt'
                             ? 'border-primary-500 text-primary-500'
@@ -54,6 +64,36 @@
                         <Icon name="mdi:schedule" size="24" class="align-self"/>
                         RTT
                     </button>
+                    <button
+                        class="pb-2 border-b-2 flex items-center gap-3"
+                        :class="activeTab === 'mileage'
+                            ? 'border-primary-500 text-primary-500'
+                            : 'border-transparent text-primary-500/50 hover:text-primary-500'"
+                        @click="activeTab = 'mileage'"
+                    >
+                        <Icon name="mdi:account-cash-outline" size="24" class="align-self"/>
+                        Frais
+                    </button>
+                    <button
+                        class="pb-2 border-b-2 flex items-center gap-3"
+                        :class="activeTab === 'bonus'
+                            ? 'border-primary-500 text-primary-500'
+                            : 'border-transparent text-primary-500/50 hover:text-primary-500'"
+                        @click="activeTab = 'bonus'"
+                    >
+                        <Icon name="mdi:money-100" size="24" class="align-self"/>
+                        Prime
+                    </button>
+                    <button
+                        class="pb-2 border-b-2 flex items-center gap-3"
+                        :class="activeTab === 'observation'
+                            ? 'border-primary-500 text-primary-500'
+                            : 'border-transparent text-primary-500/50 hover:text-primary-500'"
+                        @click="activeTab = 'observation'"
+                    >
+                        <Icon name="mdi:note-text-outline" size="24" class="align-self"/>
+                        Observation
+                    </button>
                 </div>
             </div>
             <div class="min-h-0 flex-1">
@@ -91,22 +131,91 @@
                     :on-update-create-contract-drawer-open="setCreateContractDrawerOpen"
                     :on-submit-close-contract="submitContractUpdate"
                     :on-submit-create-contract="submitCreateContract"
+                    :suspension-forms="suspensionForms"
+                    :is-suspension-submitting="isSuspensionSubmitting"
+                    :on-submit-suspension="submitSuspension"
+                    :on-add-suspension-form="addSuspensionForm"
+                    :current-contract-period-id="currentActiveContractPeriodId"
                 />
-                <EmployeesLeaveTab
-                    v-else-if="showLeaveTab && activeTab === 'leave'"
-                    class="h-full"
-                    :absences="employeeAbsences"
-                    :summary="leaveSummary"
-                    :public-holidays="publicHolidays"
-                    @update-fractioned-days="submitFractionedDays"
-                />
-                <EmployeesRttTab v-else class="h-full" :summary="rttSummary" @submit-rtt-payment="submitRttPayment" />
+                <div v-else-if="showLeaveTab && activeTab === 'leave'" class="h-full">
+                    <div v-if="isLeaveLoading" class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+                        Chargement...
+                    </div>
+                    <EmployeesLeaveTab
+                        v-else
+                        class="h-full"
+                        :absences="employeeAbsences"
+                        :summary="leaveSummary"
+                        :public-holidays="publicHolidays"
+                        @update-fractioned-days="submitFractionedDays"
+                    />
+                </div>
+                <div v-else-if="showRttTab && activeTab === 'rtt'" class="h-full">
+                    <div v-if="isRttLoading" class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+                        Chargement...
+                    </div>
+                    <EmployeesRttTab v-else class="h-full" :summary="rttSummary" @submit-rtt-payment="submitRttPayment" />
+                </div>
+                <div v-else-if="activeTab === 'mileage'" class="h-full">
+                    <div v-if="isMileageLoading" class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+                        Chargement...
+                    </div>
+                    <EmployeesMileageTab
+                        v-else
+                        class="h-full"
+                        :allowances="mileageAllowances"
+                        :api-base="mileageApiBase"
+                        @create="submitCreateMileage"
+                        @update="submitUpdateMileage"
+                        @delete="submitDeleteMileage"
+                    />
+                </div>
+                <div v-else-if="activeTab === 'bonus'" class="h-full">
+                    <div v-if="isBonusLoading" class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+                        Chargement...
+                    </div>
+                    <EmployeesBonusTab
+                        v-else
+                        class="h-full"
+                        :bonuses="bonuses"
+                        @create="submitCreateBonus"
+                        @update="submitUpdateBonus"
+                        @delete="submitDeleteBonus"
+                    />
+                </div>
+                <div v-else-if="activeTab === 'observation'" class="h-full">
+                    <div v-if="isObservationLoading" class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+                        Chargement...
+                    </div>
+                    <EmployeesObservationTab
+                        v-else
+                        class="h-full"
+                        :observations="observations"
+                        @create="submitCreateObservation"
+                        @update="submitUpdateObservation"
+                        @delete="submitDeleteObservation"
+                    />
+                </div>
             </div>
         </div>
+
+        <EmployeeYearlyHoursDrawer
+            v-if="employee"
+            v-model="isYearlyHoursDrawerOpen"
+            :employee-id="employee.id"
+            @submit="handleYearlyHoursPrint"
+        />
     </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+import EmployeeYearlyHoursDrawer from '~/components/EmployeeYearlyHoursDrawer.vue'
+import { usePdfPrinter } from '~/composables/usePdfPrinter'
+
+const { printPdf } = usePdfPrinter()
+const isYearlyHoursDrawerOpen = ref(false)
+
 const {
     employee,
     isLoading,
@@ -117,6 +226,7 @@ const {
     rttSummary,
     publicHolidays,
     showLeaveTab,
+    showRttTab,
     contractHistory,
     employeeContractWorkLabel,
     contractForm,
@@ -149,9 +259,38 @@ const {
     submitContractUpdate,
     submitCreateContract,
     submitFractionedDays,
-    submitRttPayment
+    submitRttPayment,
+    suspensionForms,
+    isSuspensionSubmitting,
+    submitSuspension,
+    addSuspensionForm,
+    currentActiveContractPeriodId,
+    isLeaveLoading,
+    isRttLoading,
+    mileageAllowances,
+    isMileageLoading,
+    mileageApiBase,
+    submitCreateMileage,
+    submitUpdateMileage,
+    submitDeleteMileage,
+    bonuses,
+    isBonusLoading,
+    submitCreateBonus,
+    submitUpdateBonus,
+    submitDeleteBonus,
+    observations,
+    isObservationLoading,
+    submitCreateObservation,
+    submitUpdateObservation,
+    submitDeleteObservation
 } = useEmployeeDetailPage()
 
+const handleYearlyHoursPrint = async (year: number) => {
+    if (!employee.value) return
+    await printPdf(`/yearly-hours/print?employeeId=${employee.value.id}&year=${year}`)
+    isYearlyHoursDrawerOpen.value = false
+}
+
 useHead(() => ({
     title: employee.value
         ? `${employee.value.firstName} ${employee.value.lastName}`

frontend/pages/employees/index.vue

@@ -3,19 +3,43 @@
         <div class="shrink-0">
             <div class="flex items-center justify-between">
                 <h1 class="text-4xl font-bold text-primary-500">Employés</h1>
-                <button
-                    type="button"
-                    class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-                    @click="openCreate"
-                >
-                    + Ajouter un employé
-                </button>
+                <div class="flex items-center gap-3">
+                    <button
+                        type="button"
+                        class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                        @click="handleLeaveRecapPrint"
+                    >
+                        Export récap. congés
+                    </button>
+                    <button
+                        type="button"
+                        class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                        @click="isSalaryRecapOpen = true"
+                    >
+                        Export récap. salaire
+                    </button>
+                    <button
+                        type="button"
+                        class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                        @click="openCreate"
+                    >
+                        + Ajouter un employé
+                    </button>
+                </div>
             </div>
-            <div class="flex gap-10 py-7">
+            <div class="flex gap-3 py-7">
                 <div class="w-80">
                     <EmployeeNameFilterInput v-model="employeeFilter"/>
                 </div>
                 <SiteFilterSelector v-if="sites.length > 0" v-model="selectedSiteIds" :sites="sites"/>
+                <select
+                    v-model="contractStatusFilter"
+                    class="rounded-md border border-primary-500 bg-white px-3 py-2 text-md font-semibold text-primary-500 cursor-pointer"
+                >
+                    <option value="active">Avec contrat</option>
+                    <option value="inactive">Sans contrat</option>
+                    <option value="all">Tous</option>
+                </select>
             </div>
         </div>
 
@@ -40,7 +64,7 @@
                     <div class="text-center text-[20px]">
                         <p class="text-primary-500 font-bold">{{ employee.firstName }} {{ employee.lastName }}</p>
                         <p>Nom du poste occupé</p>
-                        <p>Site ({{ employee.site?.name ?? '-' }})</p>
+                        <p>{{ employee.site?.name ?? '-' }}</p>
                     </div>
                 </div>
 
@@ -170,6 +194,17 @@
                             La date de fin est obligatoire pour un CDD.
                         </p>
                     </div>
+                    <div class="rounded-md border border-neutral-200 bg-neutral-50 p-3">
+                        <label class="inline-flex items-center gap-2 text-md font-semibold text-neutral-700" for="is-driver">
+                            <input
+                                id="is-driver"
+                                v-model="form.isDriver"
+                                type="checkbox"
+                                class="h-4 w-4 rounded border-neutral-300 text-primary-500 focus:ring-primary-500"
+                            />
+                            Chauffeur
+                        </label>
+                    </div>
                 </template>
                 <div class="flex justify-end gap-3 pt-2">
                     <button
@@ -189,6 +224,11 @@
                 </div>
             </form>
         </AppDrawer>
+
+        <SalaryRecapDrawer
+            v-model="isSalaryRecapOpen"
+            @submit="handleSalaryRecapPrint"
+        />
     </div>
 </template>
 
@@ -200,7 +240,9 @@ import {listContracts} from '~/services/contracts'
 import {createEmployee, deleteEmployee, listEmployees, updateEmployee} from '~/services/employees'
 import {listSites} from '~/services/sites'
 import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
+import SalaryRecapDrawer from '~/components/SalaryRecapDrawer.vue'
 import {contractNatureLabel, isContractNature, requiresContractEndDate, showsContractEndDate} from '~/utils/contract'
+import {usePdfPrinter} from '~/composables/usePdfPrinter'
 
 useHead({
     title: 'Employés'
@@ -209,6 +251,8 @@ useHead({
 const isDrawerOpen = ref(false)
 const isSubmitting = ref(false)
 const isLoading = ref(false)
+const isSalaryRecapOpen = ref(false)
+const { printPdf } = usePdfPrinter()
 const sitesInitialized = ref(false)
 const editingEmployee = ref<Employee | null>(null)
 const drawerTitle = computed(() =>
@@ -219,20 +263,21 @@ const employees = ref<Employee[]>([])
 const sites = ref<Site[]>([])
 const contracts = ref<Contract[]>([])
 const employeeFilter = ref('')
+const contractStatusFilter = ref<'active' | 'inactive' | 'all'>('active')
 const selectedSiteIds = ref<number[]>([])
 
 const filteredEmployees = computed<Employee[]>(() => {
     if (selectedSiteIds.value.length === 0) return []
 
     const filter = employeeFilter.value.trim().toLowerCase()
-    const bySite = employees.value.filter((employee) => {
+    return employees.value.filter((employee) => {
         const siteId = employee.site?.id
-        return !!siteId && selectedSiteIds.value.includes(siteId)
-    })
+        if (!siteId || !selectedSiteIds.value.includes(siteId)) return false
 
-    if (!filter) return bySite
+        if (contractStatusFilter.value === 'active' && !employee.hasActiveContract) return false
+        if (contractStatusFilter.value === 'inactive' && employee.hasActiveContract) return false
 
-    return bySite.filter((employee) => {
+        if (!filter) return true
         const firstName = employee.firstName?.toLowerCase() ?? ''
         const lastName = employee.lastName?.toLowerCase() ?? ''
         return firstName.includes(filter) || lastName.includes(filter)
@@ -246,7 +291,8 @@ const form = reactive({
     contractId: '' as number | '',
     contractNature: 'CDI' as 'CDI' | 'CDD' | 'INTERIM',
     contractStartDate: '',
-    contractEndDate: ''
+    contractEndDate: '',
+    isDriver: false
 })
 
 const validationTouched = reactive({
@@ -431,7 +477,8 @@ const handleSubmit = async () => {
                 contractId: Number(form.contractId),
                 contractNature: form.contractNature,
                 contractStartDate: form.contractStartDate,
-                contractEndDate: form.contractEndDate || null
+                contractEndDate: form.contractEndDate || null,
+                isDriverInput: form.isDriver
             })
         }
 
@@ -442,6 +489,7 @@ const handleSubmit = async () => {
         form.contractNature = 'CDI'
         form.contractStartDate = new Date().toISOString().slice(0, 10)
         form.contractEndDate = ''
+        form.isDriver = false
         editingEmployee.value = null
         isDrawerOpen.value = false
         await loadEmployees()
@@ -485,9 +533,19 @@ const openCreate = () => {
     form.contractNature = 'CDI'
     form.contractStartDate = new Date().toISOString().slice(0, 10)
     form.contractEndDate = ''
+    form.isDriver = false
     isDrawerOpen.value = true
 }
 
+const handleLeaveRecapPrint = async () => {
+    await printPdf('/leave-recap/print')
+}
+
+const handleSalaryRecapPrint = async (month: string) => {
+    await printPdf(`/salary-recap/print?month=${month}`)
+    isSalaryRecapOpen.value = false
+}
+
 const confirmDelete = async (employee: Employee) => {
     const ok = window.confirm(`Supprimer ${employee.firstName} ${employee.lastName} ?`)
     if (!ok) return

frontend/pages/hours.vue

@@ -38,7 +38,7 @@
                 <HoursDayView
                     v-if="viewMode === 'day'"
                     v-model:rows="rows"
-                    :employees="visibleEmployees"
+                    :employees="displayedEmployees"
                     :is-admin="isAdmin"
                     :is-site-manager="isSiteManager"
                     :day-grid-cols="dayGridCols"
@@ -126,6 +126,7 @@ const {
   selectedSiteIds,
   employees,
   visibleEmployees,
+  displayedEmployees,
   rows,
   absenceTypes,
   absenceForm,

frontend/pages/login.vue

@@ -68,7 +68,9 @@ const handleSubmit = async () => {
     try {
         await auth.login(username.value, password.value)
 
-        await router.push('/')
+        const isAdmin = auth.user?.roles?.includes('ROLE_ADMIN')
+        const isDriver = auth.user?.isDriver
+        await router.push(isAdmin ? '/calendar' : isDriver ? '/driver-hours' : '/hours')
     } finally {
         isSubmitting.value = false
     }

frontend/pages/sites.vue

@@ -1,13 +1,13 @@
 <template>
-  <div>
-    <div class="flex items-center justify-between pb-12">
+  <div class="h-full flex flex-col overflow-hidden">
+    <div class="flex items-center justify-between pb-6">
       <h1 class="text-4xl font-bold text-primary-500">Sites</h1>
       <button
         type="button"
         class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
         @click="openCreate"
       >
-        Ajouter un site
+        + Ajouter un site
       </button>
     </div>
 
@@ -18,26 +18,26 @@
       Aucun site pour le moment.
     </div>
 
-    <div v-else class="max-h-[80vh] overflow-auto rounded-lg border border-neutral-200 bg-white">
-      <div class="grid grid-cols-[1fr_140px_160px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
+    <div v-else class="min-h-0 overflow-auto rounded-md bg-white">
+      <div class="grid grid-cols-[1fr_140px] gap-4 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md sticky top-0 z-10">
         <span class="text-left">Nom</span>
         <span class="text-left">Couleur</span>
-        <span class="text-right">Actions</span>
       </div>
       <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500">
         Chargement...
       </div>
-      <div v-else>
+      <div v-else class="border-x border-b border-primary-500 rounded-b-md">
         <div
           v-for="site in sites"
           :key="site.id"
-          class="grid grid-cols-[1fr_140px_160px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
+          class="grid grid-cols-[1fr_140px] items-center gap-4 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500"
           draggable="true"
+          @click="openEdit(site)"
           @dragstart="handleDragStart($event, site)"
           @dragover="handleDragOver"
           @drop="handleDrop($event, site)"
         >
-          <span class="flex items-center gap-2 text-left cursor-pointer">
+          <span class="flex items-center gap-2 text-left">
             <span class="select-none text-xs">::</span>
             <span>{{ site.name }}</span>
           </span>
@@ -48,22 +48,6 @@
             />
             <span class="text-md uppercase text-neutral-500">{{ site.color }}</span>
           </div>
-          <div class="flex items-center justify-end gap-2">
-            <button
-              type="button"
-              class="rounded-md border border-neutral-200 px-2 py-1 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-              @click="openEdit(site)"
-            >
-              Modifier
-            </button>
-            <button
-              type="button"
-              class="rounded-md border border-red-200 px-2 py-1 text-md font-semibold text-red-600 hover:bg-red-50"
-              @click="confirmDelete(site)"
-            >
-              Supprimer
-            </button>
-          </div>
         </div>
       </div>
     </div>
@@ -98,20 +82,29 @@
             <span class="text-md font-semibold text-neutral-600">{{ form.color }}</span>
           </div>
         </div>
-        <div class="flex justify-end gap-3 pt-2">
+        <div v-if="editingSite" class="grid grid-cols-2 gap-3 pt-2">
           <button
             type="button"
-            class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-            @click="closeDrawer"
+            class="flex items-center justify-center rounded-md bg-red-500 px-4 py-2 text-md font-semibold text-white hover:bg-red-600"
+            @click="confirmDelete(editingSite)"
           >
-            Annuler
+            Supprimer
           </button>
           <button
             type="submit"
-            class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+            class="flex items-center justify-center rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
             :class="submitButtonClass"
           >
-            Enregistrer
+            Modifier
+          </button>
+        </div>
+        <div v-else class="flex justify-center pt-2">
+          <button
+            type="submit"
+            class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+            :class="submitButtonClass"
+          >
+            + Ajouter
           </button>
         </div>
       </form>

frontend/pages/users.vue

@@ -1,13 +1,13 @@
 <template>
-  <div>
-    <div class="flex items-center justify-between pb-12">
+  <div class="h-full flex flex-col overflow-hidden">
+    <div class="flex items-center justify-between pb-6">
       <h1 class="text-4xl font-bold text-primary-500">Utilisateurs</h1>
       <button
         type="button"
         class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
         @click="openCreate"
       >
-        Ajouter un utilisateur
+        + Ajouter un utilisateur
       </button>
     </div>
 
@@ -18,42 +18,40 @@
       Aucun utilisateur pour le moment.
     </div>
 
-    <div v-else class="max-h-[80vh] overflow-auto rounded-lg border border-neutral-200 bg-white">
-      <div class="grid grid-cols-[1fr_1fr_140px_1fr_140px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
+    <div v-else class="min-h-0 overflow-auto rounded-md bg-white">
+      <div class="grid grid-cols-5 gap-4 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md sticky top-0 z-10">
         <span class="text-left">Utilisateur</span>
         <span class="text-left">Employé</span>
         <span class="text-left">Accès</span>
         <span class="text-left">Sites</span>
-        <span class="text-right">Actions</span>
+        <span class="text-left">Statut</span>
       </div>
       <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500">
         Chargement...
       </div>
-      <div v-else>
+      <div v-else class="border-x border-b border-primary-500 rounded-b-md">
         <div
           v-for="user in users"
           :key="user.id"
-          class="grid grid-cols-[1fr_1fr_140px_1fr_140px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
+          class="grid grid-cols-5 items-center gap-4 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500"
+          @click="openEdit(user)"
         >
-          <span class="text-left">{{ user.username }}</span>
-          <span class="text-left">
+          <span>{{ user.username }}</span>
+          <span>
             {{ user.employee ? `${user.employee.firstName} ${user.employee.lastName}` : '-' }}
           </span>
-          <span class="text-left text-sm text-neutral-600">
-            {{ getAccessLabel(user) }}
+          <span>{{ getAccessLabel(user) }}</span>
+          <span>{{ getSiteLabels(user) }}</span>
+          <span>
+            <span
+              v-if="user.isLocked"
+              class="inline-block rounded-full bg-red-100 px-3 py-1 text-sm font-semibold text-red-700"
+            >Verrouillé</span>
+            <span
+              v-else
+              class="inline-block rounded-full bg-green-100 px-3 py-1 text-sm font-semibold text-green-700"
+            >Actif</span>
           </span>
-          <span class="text-left text-sm text-neutral-600">
-            {{ getSiteLabels(user) }}
-          </span>
-          <div class="flex justify-end">
-            <button
-              type="button"
-              class="rounded-md border border-neutral-200 px-2 py-1 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-              @click="openEdit(user)"
-            >
-              Modifier
-            </button>
-          </div>
         </div>
       </div>
     </div>
@@ -177,20 +175,27 @@
           </p>
         </div>
 
-        <div class="flex justify-end gap-3 pt-2">
-          <button
-            type="button"
-            class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-            @click="closeDrawer"
-          >
-            Annuler
-          </button>
+        <div>
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input
+              v-model="form.isLocked"
+              type="checkbox"
+              class="cursor-pointer"
+            />
+            <span class="text-md font-semibold text-neutral-700">Verrouiller le compte</span>
+          </label>
+          <p class="mt-1 text-sm text-neutral-500">
+            Un compte verrouillé ne peut plus se connecter.
+          </p>
+        </div>
+
+        <div class="flex justify-center pt-2">
           <button
             type="submit"
-            class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+            class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
             :class="submitButtonClass"
           >
-            Enregistrer
+            {{ editingUser ? 'Modifier' : '+ Ajouter' }}
           </button>
         </div>
       </form>
@@ -227,7 +232,8 @@ const form = reactive({
   password: '',
   accessMode: 'admin' as 'admin' | 'self' | 'sites',
   employeeId: '' as number | '',
-  siteIds: [] as number[]
+  siteIds: [] as number[],
+  isLocked: false
 })
 
 const validationTouched = reactive({
@@ -338,6 +344,7 @@ const resetForm = () => {
   form.employeeId = ''
   form.accessMode = 'admin'
   form.siteIds = []
+  form.isLocked = false
   editingUser.value = null
   validationTouched.username = false
   validationTouched.password = false
@@ -365,6 +372,7 @@ const openEdit = (user: User) => {
   }
 
   form.employeeId = user.employee?.id ?? ''
+  form.isLocked = user.isLocked
 
   const siteRoles = userAccessById.value.get(user.id) ?? []
   form.siteIds = siteRoles.map((role) => role.site?.id).filter((id): id is number => typeof id === 'number')
@@ -418,7 +426,8 @@ const handleSubmit = async () => {
         username: form.username,
         plainPassword: form.password.trim() ? form.password : undefined,
         roles,
-        employeeId
+        employeeId,
+        isLocked: form.isLocked
       })
 
       const existingSiteRoles = userAccessById.value.get(editingUser.value.id) ?? []
@@ -442,7 +451,8 @@ const handleSubmit = async () => {
         username: form.username,
         plainPassword: form.password,
         roles,
-        employeeId
+        employeeId,
+        isLocked: form.isLocked
       })
 
       if (form.accessMode === 'sites' && form.siteIds.length > 0) {

frontend/services/audit-logs.ts

@@ -0,0 +1,33 @@
+import type { AuditLog } from './dto/audit-log'
+
+export type AuditLogFilters = {
+  employeeId?: number
+  from?: string
+  to?: string
+  entityType?: string
+  page?: number
+}
+
+export type AuditLogPage = {
+  items: AuditLog[]
+  total: number
+  page: number
+  perPage: number
+}
+
+export const fetchAuditLogs = async (filters: AuditLogFilters = {}): Promise<AuditLogPage> => {
+  const api = useApi()
+  const params: Record<string, string> = {}
+
+  if (filters.employeeId) params.employeeId = String(filters.employeeId)
+  if (filters.from) params.from = filters.from
+  if (filters.to) params.to = filters.to
+  if (filters.entityType) params.entityType = filters.entityType
+  if (filters.page) params.page = String(filters.page)
+
+  return api.get<AuditLogPage>(
+    '/audit-logs',
+    params,
+    { toast: false }
+  )
+}

frontend/services/bonuses.ts

@@ -0,0 +1,54 @@
+import type { Bonus } from './dto/bonus'
+import { extractItems } from '~/utils/api'
+
+export const listBonuses = async (employeeId: number) => {
+  const api = useApi()
+  const data = await api.get<Bonus[] | { 'hydra:member'?: Bonus[] }>(
+    '/bonuses',
+    { employee: `/api/employees/${employeeId}` },
+    { toast: false }
+  )
+  return extractItems<Bonus>(data)
+}
+
+export const createBonus = async (data: {
+  employeeId: number
+  month: string
+  amount: number
+  comment?: string
+}) => {
+  const api = useApi()
+  return api.post<Bonus>('/bonuses', {
+    employee: `/api/employees/${data.employeeId}`,
+    month: data.month,
+    amount: data.amount,
+    comment: data.comment
+  }, {
+    toastSuccessKey: 'success.bonus.create',
+    toastErrorKey: 'errors.bonus.create'
+  })
+}
+
+export const updateBonus = async (id: number, data: {
+  month: string
+  amount: number
+  comment?: string
+}) => {
+  const api = useApi()
+  return api.patch<Bonus>(`/bonuses/${id}`, {
+    month: data.month,
+    amount: data.amount,
+    comment: data.comment
+  }, {
+    toastSuccessKey: 'success.bonus.update',
+    toastErrorKey: 'errors.bonus.update'
+  })
+}
+
+export const deleteBonus = async (id: number) => {
+  const api = useApi()
+  return api.delete(`/bonuses/${id}`, {}, {
+    toastSuccessKey: 'success.bonus.delete',
+    toastErrorKey: 'errors.bonus.delete'
+  })
+}

frontend/services/contractSuspensions.ts

@@ -0,0 +1,38 @@
+import type { ContractSuspension } from './dto/employee'
+
+export const createSuspension = async (payload: {
+  contractPeriodId: number
+  startDate: string
+  endDate?: string | null
+  comment?: string | null
+}) => {
+  const api = useApi()
+  return api.post<ContractSuspension>('/contract_suspensions', {
+    contractPeriodId: payload.contractPeriodId,
+    startDate: payload.startDate,
+    endDate: payload.endDate ?? null,
+    comment: payload.comment ?? null
+  }, {
+    toastSuccessKey: 'Suspension créée',
+    toastErrorKey: 'Erreur lors de la création de la suspension'
+  })
+}
+
+export const updateSuspension = async (
+  id: number,
+  payload: {
+    startDate: string
+    endDate?: string | null
+    comment?: string | null
+  }
+) => {
+  const api = useApi()
+  return api.patch<ContractSuspension>(`/contract_suspensions/${id}`, {
+    startDate: payload.startDate,
+    endDate: payload.endDate ?? null,
+    comment: payload.comment ?? null
+  }, {
+    toastSuccessKey: 'Suspension modifiée',
+    toastErrorKey: 'Erreur lors de la modification de la suspension'
+  })
+}

frontend/services/dto/audit-log.ts

@@ -0,0 +1,12 @@
+export type AuditLog = {
+  id: number
+  employeeName: string | null
+  employeeId: number | null
+  username: string
+  action: string
+  entityType: string
+  description: string
+  changes: { old?: Record<string, unknown>; new?: Record<string, unknown> } | null
+  affectedDate: string | null
+  createdAt: string
+}

frontend/services/dto/bonus.ts

@@ -0,0 +1,7 @@
+export type Bonus = {
+  id: number
+  month: string
+  amount: number
+  comment: string | null
+  createdAt: string
+}

frontend/services/dto/employee-leave-summary.ts

@@ -10,5 +10,9 @@ export type EmployeeLeaveSummary = {
   takenSaturdays: number
   fractionedDays: number
   accruingDays: number
+  previousYearAcquiredDays: number
+  previousYearTakenDays: number
+  previousYearRemainingDays: number
+  presenceDaysByMonth: Record<string, number>
 }
 

frontend/services/dto/employee-rtt-summary.ts

@@ -3,22 +3,34 @@ export type EmployeeRttWeekSummary = {
   weekNumber: number
   weekStart: string
   weekEnd: string
-  recoveryMinutes: number
+  overtimeMinutes: number
+  base25Minutes: number
+  bonus25Minutes: number
+  base50Minutes: number
+  bonus50Minutes: number
+  totalMinutes: number
 }
 
 export type RttMonthPayment = {
   month: number
-  paidMinutes25: number
-  paidMinutes50: number
+  paidBase25Minutes: number
+  paidBonus25Minutes: number
+  paidBase50Minutes: number
+  paidBonus50Minutes: number
 }
 
 export type EmployeeRttSummary = {
   year: number
+  carryMonth: number
   carryFromPreviousYearMinutes: number
+  carryBase25Minutes: number
+  carryBonus25Minutes: number
+  carryBase50Minutes: number
+  carryBonus50Minutes: number
   currentYearRecoveryMinutes: number
   totalPaidMinutes: number
   availableMinutes: number
   weeks: EmployeeRttWeekSummary[]
   monthPayments: RttMonthPayment[]
+  rttStartDate: string | null
 }
-

frontend/services/dto/employee.ts

@@ -1,6 +1,13 @@
 import type { Site } from './site'
 import type { Contract } from './contract'
 
+export type ContractSuspension = {
+  id: number
+  startDate: string
+  endDate?: string | null
+  comment?: string | null
+}
+
 export type ContractHistoryItem = {
   contractId?: number | null
   contractName?: string | null
@@ -9,6 +16,9 @@ export type ContractHistoryItem = {
   startDate: string
   endDate?: string | null
   comment?: string | null
+  periodId?: number | null
+  suspensions?: ContractSuspension[]
+  isDriver?: boolean
 }
 
 export type Employee = {
@@ -17,10 +27,13 @@ export type Employee = {
   lastName: string
   site: Site
   contract?: Contract | null
+  hasActiveContract?: boolean
+  isDriver?: boolean
   currentContractNature?: 'CDI' | 'CDD' | 'INTERIM'
   currentContractStartDate?: string | null
   currentContractEndDate?: string | null
   contractHistory?: ContractHistoryItem[]
   displayOrder?: number
   entryDate?: string | null
+  currentSuspensions?: ContractSuspension[]
 }

frontend/services/dto/mileage-allowance.ts

@@ -0,0 +1,12 @@
+export type MileageAllowance = {
+  id: number
+  month: string
+  kilometers: number
+  amount: number
+  comment: string | null
+  receiptPath: string | null
+  receiptName: string | null
+  amountReceiptPath: string | null
+  amountReceiptName: string | null
+  createdAt: string
+}

frontend/services/dto/observation.ts

@@ -0,0 +1,6 @@
+export type Observation = {
+  id: number
+  month: string
+  content: string
+  createdAt: string
+}

frontend/services/dto/user-data.ts

@@ -2,4 +2,5 @@ export type UserData = {
   id: number
   username: string
   roles: string[]
+  isDriver: boolean
 }

frontend/services/dto/user.ts

@@ -4,5 +4,6 @@ export type User = {
   id: number
   username: string
   roles: string[]
+  isLocked: boolean
   employee?: Employee | null
 }

frontend/services/dto/work-hour.ts

@@ -13,6 +13,13 @@ export type WorkHour = {
   eveningTo?: string | null
   isPresentMorning?: boolean
   isPresentAfternoon?: boolean
+  dayHoursMinutes?: number | null
+  nightHoursMinutes?: number | null
+  workshopHoursMinutes?: number | null
+  hasBreakfast?: boolean
+  hasLunch?: boolean
+  hasDinner?: boolean
+  hasOvernight?: boolean
   isSiteValid?: boolean
   isValid?: boolean
   updatedAt?: string | null
@@ -28,17 +35,30 @@ export type WorkHourEntryPayload = {
   eveningTo?: string | null
   isPresentMorning?: boolean
   isPresentAfternoon?: boolean
+  dayHoursMinutes?: number | null
+  nightHoursMinutes?: number | null
+  workshopHoursMinutes?: number | null
+  hasBreakfast?: boolean
+  hasLunch?: boolean
+  hasDinner?: boolean
+  hasOvernight?: boolean
 }
 
 export type WeeklyWorkHourDailySummary = {
   date: string
   dayMinutes: number
   nightMinutes: number
+  workshopMinutes?: number
   totalMinutes: number
   present?: number | null
   hasAbsence?: boolean
   absenceLabel?: string | null
   absenceColor?: string | null
+  hasNightBasket?: boolean
+  hasBreakfast?: boolean
+  hasLunch?: boolean
+  hasDinner?: boolean
+  hasOvernight?: boolean
 }
 
 export type WeeklyWorkHourRowSummary = {
@@ -52,12 +72,20 @@ export type WeeklyWorkHourRowSummary = {
   daily: WeeklyWorkHourDailySummary[]
   weeklyDayMinutes: number
   weeklyNightMinutes: number
+  weeklyWorkshopMinutes?: number
   weeklyTotalMinutes: number
   weeklyPresenceCount?: number
   weeklyOvertimeTotalMinutes?: number
   weeklyOvertime25Minutes?: number
   weeklyOvertime50Minutes?: number
   weeklyRecoveryMinutes?: number
+  weeklyNightBasketCount?: number
+  isDriver?: boolean
+  weeklyBreakfastCount?: number
+  weeklyLunchCount?: number
+  weeklyDinnerCount?: number
+  weeklyOvernightCount?: number
+  hasContractForWeek?: boolean
 }
 
 export type WeeklyWorkHourSummary = {
@@ -77,9 +105,24 @@ export type WorkHourDayContextRow = {
   absentAfternoon: boolean
   creditedMinutes: number
   creditedPresenceUnits: number
+  isDriverContract?: boolean
 }
 
 export type WorkHourDayContext = {
   workDate: string
   rows: WorkHourDayContextRow[]
 }
+
+export type DriverHourRow = {
+  workHourId: number | null
+  dayHours: string
+  nightHours: string
+  workshopHours: string
+  hasBreakfast: boolean
+  hasLunch: boolean
+  hasDinner: boolean
+  hasOvernight: boolean
+  isSiteValid: boolean
+  isValid: boolean
+  updatedAt: string | null
+}

frontend/services/employee-rtt-summary.ts

@@ -6,9 +6,17 @@ export const getEmployeeRttSummary = async (employeeId: number, year?: number) =
   return api.get<EmployeeRttSummary>(`/employees/${employeeId}/rtt-summary`, query, { toast: false })
 }
 
-export const createRttPayment = async (employeeId: number, month: number, minutes: number, rate: '25' | '50', year?: number) => {
+export const createRttPayment = async (
+  employeeId: number,
+  month: number,
+  base25Minutes: number,
+  bonus25Minutes: number,
+  base50Minutes: number,
+  bonus50Minutes: number,
+  year?: number
+) => {
   const api = useApi()
-  const body: Record<string, unknown> = { month, minutes, rate }
+  const body: Record<string, unknown> = { month, base25Minutes, bonus25Minutes, base50Minutes, bonus50Minutes }
   if (year) body.year = year
   return api.patch(`/employees/${employeeId}/rtt-payments`, body)
 }

frontend/services/employees.ts

@@ -34,6 +34,7 @@ export const createEmployee = async (payload: {
   contractNature?: 'CDI' | 'CDD' | 'INTERIM'
   contractStartDate?: string
   contractEndDate?: string | null
+  isDriverInput?: boolean
 }) => {
   const api = useApi()
   return api.post<Employee>('/employees', {
@@ -43,7 +44,8 @@ export const createEmployee = async (payload: {
     contract: `/api/contracts/${payload.contractId}`,
     contractNature: payload.contractNature,
     contractStartDate: payload.contractStartDate,
-    contractEndDate: payload.contractEndDate ?? null
+    contractEndDate: payload.contractEndDate ?? null,
+    isDriverInput: payload.isDriverInput ?? false
   }, {
     toastSuccessKey: 'success.employee.create',
     toastErrorKey: 'errors.employee.create'
@@ -63,6 +65,7 @@ export const updateEmployee = async (
     contractPaidLeaveSettled?: boolean
     contractComment?: string | null
     displayOrder?: number
+    isDriverInput?: boolean
   }
 ) => {
   const api = useApi()
@@ -91,6 +94,9 @@ export const updateEmployee = async (
   if (payload.contractComment !== undefined) {
     body.contractComment = payload.contractComment ?? null
   }
+  if (payload.isDriverInput !== undefined) {
+    body.isDriverInput = payload.isDriverInput
+  }
 
   return api.patch<Employee>(`/employees/${id}`, body, {
     toastSuccessKey: 'success.employee.update',

frontend/services/mileage-allowances.ts

@@ -0,0 +1,87 @@
+import { $fetch } from 'ofetch'
+import type { MileageAllowance } from './dto/mileage-allowance'
+import { extractItems } from '~/utils/api'
+
+export const listMileageAllowances = async (employeeId: number) => {
+  const api = useApi()
+  const data = await api.get<MileageAllowance[] | { 'hydra:member'?: MileageAllowance[] }>(
+    '/mileage_allowances',
+    { employee: `/api/employees/${employeeId}` },
+    { toast: false }
+  )
+  return extractItems<MileageAllowance>(data)
+}
+
+export const createMileageAllowance = async (data: {
+  employeeId: number
+  month: string
+  kilometers: number
+  amount: number
+  comment?: string
+}) => {
+  const api = useApi()
+  return api.post<MileageAllowance>('/mileage_allowances', {
+    employee: `/api/employees/${data.employeeId}`,
+    month: data.month,
+    kilometers: data.kilometers,
+    amount: data.amount,
+    comment: data.comment
+  }, {
+    toastSuccessKey: 'success.mileage.create',
+    toastErrorKey: 'errors.mileage.create'
+  })
+}
+
+export const updateMileageAllowance = async (id: number, data: {
+  month: string
+  kilometers: number
+  amount: number
+  comment?: string
+}) => {
+  const api = useApi()
+  return api.patch<MileageAllowance>(`/mileage_allowances/${id}`, {
+    month: data.month,
+    kilometers: data.kilometers,
+    amount: data.amount,
+    comment: data.comment
+  }, {
+    toastSuccessKey: 'success.mileage.update',
+    toastErrorKey: 'errors.mileage.update'
+  })
+}
+
+export const deleteMileageAllowance = async (id: number) => {
+  const api = useApi()
+  return api.delete(`/mileage_allowances/${id}`, {}, {
+    toastSuccessKey: 'success.mileage.delete',
+    toastErrorKey: 'errors.mileage.delete'
+  })
+}
+
+export const uploadKmReceipt = async (baseURL: string, id: number, file: File) => {
+  const formData = new FormData()
+  formData.append('file', file)
+  return $fetch(`${baseURL}/mileage_allowances/${id}/receipt`, {
+    method: 'POST',
+    body: formData,
+    credentials: 'include'
+  })
+}
+
+export const uploadAmountReceipt = async (baseURL: string, id: number, file: File) => {
+  const formData = new FormData()
+  formData.append('file', file)
+  return $fetch(`${baseURL}/mileage_allowances/${id}/amount-receipt`, {
+    method: 'POST',
+    body: formData,
+    credentials: 'include'
+  })
+}
+
+export const getKmReceiptUrl = (baseURL: string, id: number): string => {
+  return `${baseURL}/mileage_allowances/${id}/receipt`
+}
+
+export const getAmountReceiptUrl = (baseURL: string, id: number): string => {
+  return `${baseURL}/mileage_allowances/${id}/amount-receipt`
+}

frontend/services/observations.ts

@@ -0,0 +1,50 @@
+import type { Observation } from './dto/observation'
+import { extractItems } from '~/utils/api'
+
+export const listObservations = async (employeeId: number) => {
+  const api = useApi()
+  const data = await api.get<Observation[] | { 'hydra:member'?: Observation[] }>(
+    '/observations',
+    { employee: `/api/employees/${employeeId}` },
+    { toast: false }
+  )
+  return extractItems<Observation>(data)
+}
+
+export const createObservation = async (data: {
+  employeeId: number
+  month: string
+  content: string
+}) => {
+  const api = useApi()
+  return api.post<Observation>('/observations', {
+    employee: `/api/employees/${data.employeeId}`,
+    month: data.month,
+    content: data.content
+  }, {
+    toastSuccessKey: 'success.observation.create',
+    toastErrorKey: 'errors.observation.create'
+  })
+}
+
+export const updateObservation = async (id: number, data: {
+  month: string
+  content: string
+}) => {
+  const api = useApi()
+  return api.patch<Observation>(`/observations/${id}`, {
+    month: data.month,
+    content: data.content
+  }, {
+    toastSuccessKey: 'success.observation.update',
+    toastErrorKey: 'errors.observation.update'
+  })
+}
+
+export const deleteObservation = async (id: number) => {
+  const api = useApi()
+  return api.delete(`/observations/${id}`, {}, {
+    toastSuccessKey: 'success.observation.delete',
+    toastErrorKey: 'errors.observation.delete'
+  })
+}

frontend/services/users.ts

@@ -16,6 +16,7 @@ export const createUser = async (payload: {
   plainPassword: string
   roles: string[]
   employeeId?: number | null
+  isLocked?: boolean
 }) => {
   const api = useApi()
   return api.post<User>(
@@ -24,7 +25,8 @@ export const createUser = async (payload: {
       username: payload.username,
       plainPassword: payload.plainPassword,
       roles: payload.roles,
-      employee: payload.employeeId ? `/api/employees/${payload.employeeId}` : null
+      employee: payload.employeeId ? `/api/employees/${payload.employeeId}` : null,
+      isLocked: payload.isLocked ?? false
     },
     {
       toastSuccessKey: 'success.user.create',
@@ -38,12 +40,14 @@ export const updateUser = async (id: number, payload: {
   plainPassword?: string
   roles: string[]
   employeeId?: number | null
+  isLocked?: boolean
 }) => {
   const api = useApi()
   const body: Record<string, unknown> = {
     username: payload.username,
     roles: payload.roles,
-    employee: payload.employeeId ? `/api/employees/${payload.employeeId}` : null
+    employee: payload.employeeId ? `/api/employees/${payload.employeeId}` : null,
+    isLocked: payload.isLocked ?? false
   }
 
   if (payload.plainPassword) {

migrations/Version20260312140000.php

@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260312140000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Create contract_suspensions table';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('CREATE TABLE contract_suspensions (
+            id SERIAL PRIMARY KEY,
+            contract_period_id INT NOT NULL REFERENCES employee_contract_periods(id) ON DELETE CASCADE,
+            start_date DATE NOT NULL,
+            end_date DATE DEFAULT NULL,
+            comment TEXT DEFAULT NULL,
+            created_at TIMESTAMP(0) WITHOUT TIME ZONE NOT NULL
+        )');
+        $this->addSql('CREATE INDEX idx_suspension_period_start ON contract_suspensions (contract_period_id, start_date)');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('DROP TABLE contract_suspensions');
+    }
+}

migrations/Version20260313080007.php

@@ -0,0 +1,54 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260313080007 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'RTT redesign: split opening_minutes and minutes+rate into 4 fields (base25, bonus25, base50, bonus50)';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // employee_rtt_balances: replace opening_minutes with 4 fields
+        $this->addSql('ALTER TABLE employee_rtt_balances ADD opening_base25_minutes INT DEFAULT 0 NOT NULL');
+        $this->addSql('ALTER TABLE employee_rtt_balances ADD opening_bonus25_minutes INT DEFAULT 0 NOT NULL');
+        $this->addSql('ALTER TABLE employee_rtt_balances ADD opening_base50_minutes INT DEFAULT 0 NOT NULL');
+        $this->addSql('ALTER TABLE employee_rtt_balances ADD opening_bonus50_minutes INT DEFAULT 0 NOT NULL');
+        $this->addSql('ALTER TABLE employee_rtt_balances DROP opening_minutes');
+
+        // employee_rtt_payments: replace minutes+rate with 4 fields
+        $this->addSql('DROP INDEX IF EXISTS uniq_rtt_payment_employee_year_month_rate');
+        $this->addSql('ALTER TABLE employee_rtt_payments ADD base25_minutes INT DEFAULT 0 NOT NULL');
+        $this->addSql('ALTER TABLE employee_rtt_payments ADD bonus25_minutes INT DEFAULT 0 NOT NULL');
+        $this->addSql('ALTER TABLE employee_rtt_payments ADD base50_minutes INT DEFAULT 0 NOT NULL');
+        $this->addSql('ALTER TABLE employee_rtt_payments ADD bonus50_minutes INT DEFAULT 0 NOT NULL');
+        $this->addSql('ALTER TABLE employee_rtt_payments DROP minutes');
+        $this->addSql('ALTER TABLE employee_rtt_payments DROP rate');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // employee_rtt_balances: restore opening_minutes
+        $this->addSql('ALTER TABLE employee_rtt_balances ADD opening_minutes INT NOT NULL DEFAULT 0');
+        $this->addSql('ALTER TABLE employee_rtt_balances DROP opening_base25_minutes');
+        $this->addSql('ALTER TABLE employee_rtt_balances DROP opening_bonus25_minutes');
+        $this->addSql('ALTER TABLE employee_rtt_balances DROP opening_base50_minutes');
+        $this->addSql('ALTER TABLE employee_rtt_balances DROP opening_bonus50_minutes');
+
+        // employee_rtt_payments: restore minutes+rate
+        $this->addSql('ALTER TABLE employee_rtt_payments ADD minutes INT NOT NULL DEFAULT 0');
+        $this->addSql("ALTER TABLE employee_rtt_payments ADD rate VARCHAR(10) NOT NULL DEFAULT '25'");
+        $this->addSql('ALTER TABLE employee_rtt_payments DROP base25_minutes');
+        $this->addSql('ALTER TABLE employee_rtt_payments DROP bonus25_minutes');
+        $this->addSql('ALTER TABLE employee_rtt_payments DROP base50_minutes');
+        $this->addSql('ALTER TABLE employee_rtt_payments DROP bonus50_minutes');
+        $this->addSql('CREATE UNIQUE INDEX uniq_rtt_payment_employee_year_month_rate ON employee_rtt_payments (employee_id, year, month, rate)');
+    }
+}

migrations/Version20260313092249.php

@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260313092249 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add month column to employee_rtt_balances for flexible carry-over positioning';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE employee_rtt_balances ADD month INT DEFAULT 5 NOT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE employee_rtt_balances DROP month');
+    }
+}

migrations/Version20260313125819.php

@@ -0,0 +1,29 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260313125819 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Create mileage_allowances table';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('CREATE TABLE mileage_allowances (id INT GENERATED BY DEFAULT AS IDENTITY NOT NULL, month DATE NOT NULL, kilometers DOUBLE PRECISION NOT NULL, comment TEXT DEFAULT NULL, receipt_path VARCHAR(255) DEFAULT NULL, created_at TIMESTAMP(0) WITHOUT TIME ZONE NOT NULL, employee_id INT NOT NULL, PRIMARY KEY (id))');
+        $this->addSql('CREATE INDEX IDX_3B44830E8C03F15C ON mileage_allowances (employee_id)');
+        $this->addSql('ALTER TABLE mileage_allowances ADD CONSTRAINT FK_3B44830E8C03F15C FOREIGN KEY (employee_id) REFERENCES employees (id) NOT DEFERRABLE');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE mileage_allowances DROP CONSTRAINT FK_3B44830E8C03F15C');
+        $this->addSql('DROP TABLE mileage_allowances');
+    }
+}

migrations/Version20260313133548.php

@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260313133548 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add receipt_name column to mileage_allowances';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE mileage_allowances ADD receipt_name VARCHAR(255) DEFAULT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE mileage_allowances DROP receipt_name');
+    }
+}

migrations/Version20260313151220.php

@@ -0,0 +1,31 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260313151220 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Create bonuses table';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('CREATE TABLE bonuses (id INT GENERATED BY DEFAULT AS IDENTITY NOT NULL, employee_id INT NOT NULL, month DATE NOT NULL, amount DOUBLE PRECISION NOT NULL, comment TEXT DEFAULT NULL, created_at TIMESTAMP(0) WITHOUT TIME ZONE NOT NULL, PRIMARY KEY (id))');
+        $this->addSql('CREATE INDEX IDX_8535CFD28C03F15C ON bonuses (employee_id)');
+        $this->addSql('COMMENT ON COLUMN bonuses.created_at IS \'(DC2Type:datetime_immutable)\'');
+        $this->addSql('COMMENT ON COLUMN bonuses.month IS \'(DC2Type:date_immutable)\'');
+        $this->addSql('ALTER TABLE bonuses ADD CONSTRAINT FK_8535CFD28C03F15C FOREIGN KEY (employee_id) REFERENCES employees (id) NOT DEFERRABLE');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE bonuses DROP CONSTRAINT FK_8535CFD28C03F15C');
+        $this->addSql('DROP TABLE bonuses');
+    }
+}

migrations/Version20260315100000.php

@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260315100000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add is_driver flag to employee_contract_periods';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE employee_contract_periods ADD is_driver BOOLEAN DEFAULT FALSE NOT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE employee_contract_periods DROP COLUMN is_driver');
+    }
+}

migrations/Version20260315100100.php

@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260315100100 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add driver-specific fields to work_hours';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE work_hours ADD day_hours_minutes INTEGER DEFAULT NULL');
+        $this->addSql('ALTER TABLE work_hours ADD night_hours_minutes INTEGER DEFAULT NULL');
+        $this->addSql('ALTER TABLE work_hours ADD has_breakfast BOOLEAN DEFAULT FALSE NOT NULL');
+        $this->addSql('ALTER TABLE work_hours ADD has_lunch BOOLEAN DEFAULT FALSE NOT NULL');
+        $this->addSql('ALTER TABLE work_hours ADD has_overnight BOOLEAN DEFAULT FALSE NOT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE work_hours DROP COLUMN day_hours_minutes');
+        $this->addSql('ALTER TABLE work_hours DROP COLUMN night_hours_minutes');
+        $this->addSql('ALTER TABLE work_hours DROP COLUMN has_breakfast');
+        $this->addSql('ALTER TABLE work_hours DROP COLUMN has_lunch');
+        $this->addSql('ALTER TABLE work_hours DROP COLUMN has_overnight');
+    }
+}

migrations/Version20260316100000.php

@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260316100000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add has_dinner column to work_hours';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE work_hours ADD has_dinner BOOLEAN DEFAULT FALSE NOT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE work_hours DROP COLUMN has_dinner');
+    }
+}

migrations/Version20260316100100.php

@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260316100100 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add workshop_hours_minutes column to work_hours';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE work_hours ADD workshop_hours_minutes INTEGER DEFAULT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE work_hours DROP COLUMN workshop_hours_minutes');
+    }
+}

migrations/Version20260318143503.php

@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260318143503 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add amount column to mileage_allowances';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE mileage_allowances ADD COLUMN amount DOUBLE PRECISION DEFAULT 0 NOT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE mileage_allowances DROP COLUMN amount');
+    }
+}

migrations/Version20260319100000.php

@@ -0,0 +1,28 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260319100000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add amount receipt fields to mileage_allowances';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE mileage_allowances ADD amount_receipt_path VARCHAR(255) DEFAULT NULL');
+        $this->addSql('ALTER TABLE mileage_allowances ADD amount_receipt_name VARCHAR(255) DEFAULT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE mileage_allowances DROP COLUMN amount_receipt_path');
+        $this->addSql('ALTER TABLE mileage_allowances DROP COLUMN amount_receipt_name');
+    }
+}

migrations/Version20260325081258.php

@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260325081258 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Create observations table with unique constraint on (employee_id, month)';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('CREATE TABLE observations (id INT GENERATED BY DEFAULT AS IDENTITY NOT NULL, employee_id INT NOT NULL, month DATE NOT NULL, content TEXT NOT NULL, created_at TIMESTAMP(0) WITHOUT TIME ZONE NOT NULL, PRIMARY KEY (id))');
+        $this->addSql('CREATE INDEX IDX_BBC15BA88C03F15C ON observations (employee_id)');
+        $this->addSql('CREATE UNIQUE INDEX uniq_observation_employee_month ON observations (employee_id, month)');
+        $this->addSql('ALTER TABLE observations ADD CONSTRAINT FK_BBC15BA88C03F15C FOREIGN KEY (employee_id) REFERENCES employees (id) NOT DEFERRABLE');
+        $this->addSql("COMMENT ON COLUMN observations.month IS '(DC2Type:date_immutable)'");
+        $this->addSql("COMMENT ON COLUMN observations.created_at IS '(DC2Type:datetime_immutable)'");
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE observations DROP CONSTRAINT FK_BBC15BA88C03F15C');
+        $this->addSql('DROP TABLE observations');
+    }
+}