chore: bump version to v0.1.74

| 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

@@ -0,0 +1,32 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npx vue-tsc:*)",
+      "Bash(npx nuxi:*)",
+      "Bash(php:*)",
+      "Bash(docker compose:*)",
+      "Bash(make test:*)",
+      "Bash(grep:*)",
+      "Bash(docker exec:*)",
+      "Bash(php8.3 bin/phpunit tests/State/EmployeeWriteProcessorTest.php --filter=testSetsEntryDateOnNewEmployee 2>&1)",
+      "Read(//usr/bin/**)",
+      "Read(//usr/local/bin/**)",
+      "Bash(command -v php8.2)",
+      "Bash(command -v php8.1)",
+      "Bash(ls /usr/bin/php*)",
+      "Read(//opt/**)",
+      "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(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:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)"
+    ]
+  }
+}

.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 ###
@@ -46,4 +50,6 @@ JWT_PUBLIC_KEY=%kernel.project_dir%/config/jwt/public.pem
 JWT_PASSPHRASE=9efb9a2ec48439c723621d0c6393d04da5516c8fa00ecdba1660717b4f996867
 JWT_COOKIE_SECURE=0
 JWT_COOKIE_SAMESITE=lax
+JWT_TOKEN_TTL=86400
+JWT_COOKIE_TTL=86400
 ###< lexik/jwt-authentication-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

@@ -142,6 +142,20 @@
       <excludeFolder url="file://$MODULE_DIR$/vendor/masterminds/html5" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/sabberworm/php-css-parser" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/thecodingmachine/safe" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/monolog/monolog" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/symfony/monolog-bridge" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/symfony/monolog-bundle" />
+      <excludeFolder url="file://$MODULE_DIR$/LOG" />
+      <excludeFolder url="file://$MODULE_DIR$/frontend/.nuxt" />
+      <excludeFolder url="file://$MODULE_DIR$/frontend/.output" />
+      <excludeFolder url="file://$MODULE_DIR$/frontend/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/frontend/node_modules" />
+      <excludeFolder url="file://$MODULE_DIR$/public" />
+      <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/dataSources.xml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
-    <data-source source="LOCAL" name="postgres@localhost" uuid="9cad43df-2147-4989-b7a4-443067034884">
-      <driver-ref>postgresql</driver-ref>
-      <synchronize>true</synchronize>
-      <jdbc-driver>org.postgresql.Driver</jdbc-driver>
-      <jdbc-url>jdbc:postgresql://localhost:5433/postgres</jdbc-url>
-      <working-dir>$ProjectFileDir$</working-dir>
-    </data-source>
-  </component>
-</project>

.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.sql" value="9cad43df-2147-4989-b7a4-443067034884" />
-  </component>
-</project>

.idea/db-forest-config.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="db-forest-configuration">
+    <data version="2">.
+	----------------------------------------
+	1:0:9cad43df-2147-4989-b7a4-443067034884
+	2:0:ae622167-c834-4e7b-87a5-c1721036f5dc
+	3:0:f407a514-c6b4-4b26-9555-445a85892502
+	4:0:09e221b8-067a-488b-9c1d-4e155a333079
+	5:0:9d8c1ad3-2491-4642-964a-666003c14128
+		.</data>
+  </component>
+  <component name="db-tree-configuration">
+    <option name="data" value="----------------------------------------&#10;1:0:9cad43df-2147-4989-b7a4-443067034884&#10;2:0:ae622167-c834-4e7b-87a5-c1721036f5dc&#10;3:0:f407a514-c6b4-4b26-9555-445a85892502&#10;4:0:09e221b8-067a-488b-9c1d-4e155a333079&#10;" />
+  </component>
+</project>

.idea/php.xml

@@ -150,6 +150,13 @@
       <path value="$PROJECT_DIR$/vendor/dompdf/dompdf" />
       <path value="$PROJECT_DIR$/vendor/thecodingmachine/safe" />
       <path value="$PROJECT_DIR$/vendor/masterminds/html5" />
+      <path value="$PROJECT_DIR$/vendor/monolog/monolog" />
+      <path value="$PROJECT_DIR$/vendor/symfony/monolog-bridge" />
+      <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" />

AGENTS.md

@@ -0,0 +1,138 @@
+# AGENTS.md
+
+État des lieux opérationnel du projet SIRH (backend + frontend), mis à jour après les évolutions sur heures/absences/validations.
+
+## 1) Stack et structure
+
+- Backend: Symfony + API Platform + Doctrine ORM
+- Frontend: Nuxt 4 + Vue 3 + TypeScript + Tailwind
+- Exécution locale: Docker via `makefile`
+
+Arborescence clé:
+- `src/`: domaine, API resources, state providers/processors, services
+- `tests/`: TU backend (PHPUnit)
+- `frontend/`: app Nuxt (pages, composants, composables, services)
+- `migrations/`: migrations Doctrine
+- `doc/`: documentation fonctionnelle et règles métier de référence
+
+## 1.1) Référentiel Fonctionnel (obligatoire)
+
+- Référence principale des règles métier: `doc/functional-rules.md`
+- Toute intervention doit commencer par une vérification de cohérence avec cette documentation.
+- Règle permanente: à chaque développement qui modifie le fonctionnel, la documentation dans `doc/` doit être mise à jour automatiquement dans la même intervention (pas de report).
+
+## 2) Commandes utiles
+
+- Démarrer stack: `make start`
+- Tests backend: `make test`
+- Build frontend: `cd frontend && npm run build`
+- Dev frontend: `make dev-nuxt`
+
+## 3) Domaine métier (résumé)
+
+### Contrats
+- Entité: `Contract`
+- Champs principaux: `name`, `trackingMode`, `weeklyHours`, `isActive`, `type`
+- `trackingMode`:
+  - `TIME`: suivi en heures
+  - `PRESENCE`: suivi en demi-journées/journées
+- Enums backend:
+  - `App\Enum\TrackingMode`
+  - `App\Enum\ContractType` (`FORFAIT`, `THIRTY_FIVE_HOURS`, `THIRTY_NINE_HOURS`, `INTERIM`, `CUSTOM`)
+- Historique de contrat par employé:
+  - table `employee_contract_periods`
+  - résolu par `App\Service\Contracts\EmployeeContractResolver`
+
+### Heures / absences
+- Les absences sont stockées en **lignes journalières** (découpage automatique dans `AbsenceWriteProcessor`).
+- Les absences `countAsWorkedHours=true` créditent:
+  - minutes (contrats TIME)
+  - unités de présence (contrats PRESENCE)
+- Les absences AM/PM effacent les plages horaires concernées.
+
+## 4) Validations (important)
+
+### Validation RH (admin)
+- Champ: `work_hours.is_valid`
+- Endpoint API Platform standard: `PATCH /api/work_hours/{id}`
+- Gérée côté front par `updateWorkHourValidation`.
+
+### Validation site (chef de site)
+- Champ: `work_hours.is_site_valid`
+- Endpoint dédié: `PATCH /api/work_hours/{id}/site-validation`
+- Processor: `src/State/WorkHourSiteValidationProcessor.php`
+- Autorisé uniquement aux utilisateurs "Sites" (ni `ROLE_ADMIN`, ni `ROLE_SELF`) dans leur scope site.
+
+### Règles de verrouillage
+- `is_valid=true`: ligne verrouillée pour tout le monde (admin inclus pour saisie heures/absence; peut toujours décocher validation RH).
+- `is_site_valid=true`:
+  - non-admin: ligne verrouillée (heures + absences)
+  - admin: ligne éditable
+- Toute modification de ligne (heures/présence/absence) remet:
+  - `is_site_valid=false`
+  - `is_valid=false`
+
+## 5) Page Heures (front)
+
+- Page: `frontend/pages/hours.vue`
+- Composable principal: `frontend/composables/useHoursPage.ts`
+- Composants:
+  - `frontend/components/hours/HoursToolbar.vue`
+  - `frontend/components/hours/HoursDayView.vue`
+  - `frontend/components/hours/HoursWeekView.vue`
+
+### Comportement par profil (vue jour)
+- Admin:
+  - colonne RH avec checkbox
+  - badge `Site validé` affiché près du site
+- Chef de site:
+  - colonne `Validation site` avec checkbox
+  - colonne RH en lecture (`Validé`/`-`)
+- Employé:
+  - colonne `Validation site` en lecture
+  - colonne RH en lecture
+
+## 6) Résumé hebdo / calculs
+
+- Provider: `src/State/WorkHourWeeklySummaryProvider.php`
+- DTOs:
+  - `src/Dto/WorkHours/WeeklySummaryRow.php`
+  - `src/Dto/WorkHours/WeeklyDaySummary.php`
+- Inclut: contrat résolu par jour, absences, crédits, jour/nuit/total, majorations, récup.
+
+Règles majorations:
+- Contrats <= 35h: +25% de 35h à 43h, +50% au-delà
+- Contrats >= 39h: +25% de 39h à 43h, +50% au-delà
+- `INTERIM`: pas de 25% / 50% / récup
+
+## 7) Migrations sensibles
+
+- `migrations/Version20260226183000.php`
+  - ajoute `work_hours.is_site_valid BOOLEAN NOT NULL DEFAULT FALSE`
+  - non destructive (pas de perte de données)
+
+## 8) Points de vigilance prod
+
+- Toujours exécuter migration avant déploiement code backend/front lié.
+- Après déploiement backend, si route manquante côté runtime:
+  - `php bin/console cache:clear && php bin/console cache:warmup`
+- Vérifier présence route:
+  - `/api/work_hours/{id}/site-validation` (PATCH)
+
+## 9) Conventions techniques
+
+- Favoriser DTO explicites plutôt que tableaux associatifs.
+- Garder règles métier dans backend (providers/processors/services), front orienté affichage/interaction.
+- Maintenir alignement backend DTO PHP / frontend DTO TS (`frontend/services/dto/*`).
+- Mettre à jour TU si signature constructor/service change.
+
+## 10) Fichiers à lire avant modification
+
+- `src/State/WorkHourBulkUpsertProcessor.php`
+- `src/State/AbsenceWriteProcessor.php`
+- `src/State/WorkHourSiteValidationProcessor.php`
+- `src/State/WorkHourWeeklySummaryProvider.php`
+- `src/Service/WorkHours/WorkedHoursCreditPolicy.php`
+- `frontend/composables/useHoursPage.ts`
+- `frontend/components/hours/HoursDayView.vue`
+- `frontend/components/hours/HoursWeekView.vue`

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

@@ -1,2 +1,25 @@
 # SIRH
+
 Application de gestion des absences employée
+
+## Importer un dump de prod en dev
+Sur adminer fait un export bdd :
+- Sortie : enregistrer
+- Format : SQL
+- Tables : DROP+CREATE, Incrément automatique, Déclencheurs
+- Données : INSERT
+
+Supprime la bdd et créer la bdd :
+```shell
+docker compose exec -T db psql -U root -d sirh -c "DROP SCHEMA public CASCADE; CREATE SCHEMA public;"
+```
+
+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,8 @@
         "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.*",
         "symfony/runtime": "8.0.*",
@@ -86,6 +88,7 @@
         }
     },
     "require-dev": {
+        "doctrine/doctrine-fixtures-bundle": "^4.3",
         "friendsofphp/php-cs-fixer": "^3.93",
         "phpunit/phpunit": "^12.5"
     }

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": "f181b165d122aecdae0a7df1d1e33aec",
+    "content-hash": "bdc04f5145303388bac52809ea3f4b05",
     "packages": [
         {
             "name": "api-platform/doctrine-common",
@@ -2771,6 +2771,109 @@
             },
             "time": "2025-07-25T09:04:22+00:00"
         },
+        {
+            "name": "monolog/monolog",
+            "version": "3.10.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Seldaek/monolog.git",
+                "reference": "b321dd6749f0bf7189444158a3ce785cc16d69b0"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Seldaek/monolog/zipball/b321dd6749f0bf7189444158a3ce785cc16d69b0",
+                "reference": "b321dd6749f0bf7189444158a3ce785cc16d69b0",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "psr/log": "^2.0 || ^3.0"
+            },
+            "provide": {
+                "psr/log-implementation": "3.0.0"
+            },
+            "require-dev": {
+                "aws/aws-sdk-php": "^3.0",
+                "doctrine/couchdb": "~1.0@dev",
+                "elasticsearch/elasticsearch": "^7 || ^8",
+                "ext-json": "*",
+                "graylog2/gelf-php": "^1.4.2 || ^2.0",
+                "guzzlehttp/guzzle": "^7.4.5",
+                "guzzlehttp/psr7": "^2.2",
+                "mongodb/mongodb": "^1.8 || ^2.0",
+                "php-amqplib/php-amqplib": "~2.4 || ^3",
+                "php-console/php-console": "^3.1.8",
+                "phpstan/phpstan": "^2",
+                "phpstan/phpstan-deprecation-rules": "^2",
+                "phpstan/phpstan-strict-rules": "^2",
+                "phpunit/phpunit": "^10.5.17 || ^11.0.7",
+                "predis/predis": "^1.1 || ^2",
+                "rollbar/rollbar": "^4.0",
+                "ruflin/elastica": "^7 || ^8",
+                "symfony/mailer": "^5.4 || ^6",
+                "symfony/mime": "^5.4 || ^6"
+            },
+            "suggest": {
+                "aws/aws-sdk-php": "Allow sending log messages to AWS services like DynamoDB",
+                "doctrine/couchdb": "Allow sending log messages to a CouchDB server",
+                "elasticsearch/elasticsearch": "Allow sending log messages to an Elasticsearch server via official client",
+                "ext-amqp": "Allow sending log messages to an AMQP server (1.0+ required)",
+                "ext-curl": "Required to send log messages using the IFTTTHandler, the LogglyHandler, the SendGridHandler, the SlackWebhookHandler or the TelegramBotHandler",
+                "ext-mbstring": "Allow to work properly with unicode symbols",
+                "ext-mongodb": "Allow sending log messages to a MongoDB server (via driver)",
+                "ext-openssl": "Required to send log messages using SSL",
+                "ext-sockets": "Allow sending log messages to a Syslog server (via UDP driver)",
+                "graylog2/gelf-php": "Allow sending log messages to a GrayLog2 server",
+                "mongodb/mongodb": "Allow sending log messages to a MongoDB server (via library)",
+                "php-amqplib/php-amqplib": "Allow sending log messages to an AMQP server using php-amqplib",
+                "rollbar/rollbar": "Allow sending log messages to Rollbar",
+                "ruflin/elastica": "Allow sending log messages to an Elastic Search server"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "3.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Monolog\\": "src/Monolog"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jordi Boggiano",
+                    "email": "j.boggiano@seld.be",
+                    "homepage": "https://seld.be"
+                }
+            ],
+            "description": "Sends your logs to files, sockets, inboxes, databases and various web services",
+            "homepage": "https://github.com/Seldaek/monolog",
+            "keywords": [
+                "log",
+                "logging",
+                "psr-3"
+            ],
+            "support": {
+                "issues": "https://github.com/Seldaek/monolog/issues",
+                "source": "https://github.com/Seldaek/monolog/tree/3.10.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/Seldaek",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/monolog/monolog",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2026-01-02T08:56:05+00:00"
+        },
         {
             "name": "nelmio/cors-bundle",
             "version": "2.6.1",
@@ -5271,6 +5374,248 @@
             ],
             "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",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/monolog-bridge.git",
+                "reference": "7c3da570ec252d5ca1212945ddbbf1dac4a0d779"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/monolog-bridge/zipball/7c3da570ec252d5ca1212945ddbbf1dac4a0d779",
+                "reference": "7c3da570ec252d5ca1212945ddbbf1dac4a0d779",
+                "shasum": ""
+            },
+            "require": {
+                "monolog/monolog": "^3",
+                "php": ">=8.4",
+                "symfony/http-kernel": "^7.4|^8.0",
+                "symfony/service-contracts": "^2.5|^3"
+            },
+            "require-dev": {
+                "symfony/console": "^7.4|^8.0",
+                "symfony/http-client": "^7.4|^8.0",
+                "symfony/mailer": "^7.4|^8.0",
+                "symfony/messenger": "^7.4|^8.0",
+                "symfony/mime": "^7.4|^8.0",
+                "symfony/security-core": "^7.4|^8.0",
+                "symfony/var-dumper": "^7.4|^8.0"
+            },
+            "type": "symfony-bridge",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Bridge\\Monolog\\": ""
+                },
+                "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": "Provides integration for Monolog with various Symfony components",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/monolog-bridge/tree/v8.0.4"
+            },
+            "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-01-07T12:23:22+00:00"
+        },
+        {
+            "name": "symfony/monolog-bundle",
+            "version": "v4.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/monolog-bundle.git",
+                "reference": "3b4ee2717ee56c5e1edb516140a175eb2a72bc66"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/monolog-bundle/zipball/3b4ee2717ee56c5e1edb516140a175eb2a72bc66",
+                "reference": "3b4ee2717ee56c5e1edb516140a175eb2a72bc66",
+                "shasum": ""
+            },
+            "require": {
+                "composer-runtime-api": "^2.0",
+                "monolog/monolog": "^3.5",
+                "php": ">=8.2",
+                "symfony/config": "^7.3 || ^8.0",
+                "symfony/dependency-injection": "^7.3 || ^8.0",
+                "symfony/http-kernel": "^7.3 || ^8.0",
+                "symfony/monolog-bridge": "^7.3 || ^8.0",
+                "symfony/polyfill-php84": "^1.30"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.5.41 || ^12.3",
+                "symfony/console": "^7.3 || ^8.0",
+                "symfony/yaml": "^7.3 || ^8.0"
+            },
+            "type": "symfony-bundle",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Bundle\\MonologBundle\\": "src"
+                }
+            },
+            "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": "Symfony MonologBundle",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "log",
+                "logging"
+            ],
+            "support": {
+                "issues": "https://github.com/symfony/monolog-bundle/issues",
+                "source": "https://github.com/symfony/monolog-bundle/tree/v4.0.1"
+            },
+            "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": "2025-12-08T08:00:13+00:00"
+        },
         {
             "name": "symfony/password-hasher",
             "version": "v8.0.4",
@@ -5426,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",
@@ -8245,6 +8677,175 @@
             ],
             "time": "2024-05-06T16:37:16+00:00"
         },
+        {
+            "name": "doctrine/data-fixtures",
+            "version": "2.2.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/doctrine/data-fixtures.git",
+                "reference": "7a615ba135e45d67674bb623d90f34f6c7b6bd97"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/doctrine/data-fixtures/zipball/7a615ba135e45d67674bb623d90f34f6c7b6bd97",
+                "reference": "7a615ba135e45d67674bb623d90f34f6c7b6bd97",
+                "shasum": ""
+            },
+            "require": {
+                "doctrine/persistence": "^3.1 || ^4.0",
+                "php": "^8.1",
+                "psr/log": "^1.1 || ^2 || ^3"
+            },
+            "conflict": {
+                "doctrine/dbal": "<3.5 || >=5",
+                "doctrine/orm": "<2.14 || >=4",
+                "doctrine/phpcr-odm": "<1.3.0"
+            },
+            "require-dev": {
+                "doctrine/coding-standard": "^14",
+                "doctrine/dbal": "^3.5 || ^4",
+                "doctrine/mongodb-odm": "^1.3.0 || ^2.0.0",
+                "doctrine/orm": "^2.14 || ^3",
+                "ext-sqlite3": "*",
+                "fig/log-test": "^1",
+                "phpstan/phpstan": "2.1.31",
+                "phpunit/phpunit": "10.5.45 || 12.4.0",
+                "symfony/cache": "^6.4 || ^7",
+                "symfony/var-exporter": "^6.4 || ^7"
+            },
+            "suggest": {
+                "alcaeus/mongo-php-adapter": "For using MongoDB ODM 1.3 with PHP 7 (deprecated)",
+                "doctrine/mongodb-odm": "For loading MongoDB ODM fixtures",
+                "doctrine/orm": "For loading ORM fixtures",
+                "doctrine/phpcr-odm": "For loading PHPCR ODM fixtures"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Doctrine\\Common\\DataFixtures\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jonathan Wage",
+                    "email": "jonwage@gmail.com"
+                }
+            ],
+            "description": "Data Fixtures for all Doctrine Object Managers",
+            "homepage": "https://www.doctrine-project.org",
+            "keywords": [
+                "database"
+            ],
+            "support": {
+                "issues": "https://github.com/doctrine/data-fixtures/issues",
+                "source": "https://github.com/doctrine/data-fixtures/tree/2.2.0"
+            },
+            "funding": [
+                {
+                    "url": "https://www.doctrine-project.org/sponsorship.html",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://www.patreon.com/phpdoctrine",
+                    "type": "patreon"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/doctrine%2Fdata-fixtures",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-10-17T20:06:20+00:00"
+        },
+        {
+            "name": "doctrine/doctrine-fixtures-bundle",
+            "version": "4.3.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/doctrine/DoctrineFixturesBundle.git",
+                "reference": "9e013ed10d49bf7746b07204d336384a7d9b5a4d"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/doctrine/DoctrineFixturesBundle/zipball/9e013ed10d49bf7746b07204d336384a7d9b5a4d",
+                "reference": "9e013ed10d49bf7746b07204d336384a7d9b5a4d",
+                "shasum": ""
+            },
+            "require": {
+                "doctrine/data-fixtures": "^2.2",
+                "doctrine/doctrine-bundle": "^2.2 || ^3.0",
+                "doctrine/orm": "^2.14.0 || ^3.0",
+                "doctrine/persistence": "^2.4 || ^3.0 || ^4.0",
+                "php": "^8.1",
+                "psr/log": "^2 || ^3",
+                "symfony/config": "^6.4 || ^7.0 || ^8.0",
+                "symfony/console": "^6.4 || ^7.0 || ^8.0",
+                "symfony/dependency-injection": "^6.4 || ^7.0 || ^8.0",
+                "symfony/deprecation-contracts": "^2.1 || ^3",
+                "symfony/doctrine-bridge": "^6.4.16 || ^7.1.9 || ^8.0",
+                "symfony/http-kernel": "^6.4 || ^7.0 || ^8.0"
+            },
+            "conflict": {
+                "doctrine/dbal": "< 3"
+            },
+            "require-dev": {
+                "doctrine/coding-standard": "14.0.0",
+                "phpstan/phpstan": "2.1.11",
+                "phpunit/phpunit": "^10.5.38 || 11.4.14"
+            },
+            "type": "symfony-bundle",
+            "autoload": {
+                "psr-4": {
+                    "Doctrine\\Bundle\\FixturesBundle\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Doctrine Project",
+                    "homepage": "https://www.doctrine-project.org"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony DoctrineFixturesBundle",
+            "homepage": "https://www.doctrine-project.org",
+            "keywords": [
+                "Fixture",
+                "persistence"
+            ],
+            "support": {
+                "issues": "https://github.com/doctrine/DoctrineFixturesBundle/issues",
+                "source": "https://github.com/doctrine/DoctrineFixturesBundle/tree/4.3.1"
+            },
+            "funding": [
+                {
+                    "url": "https://www.doctrine-project.org/sponsorship.html",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://www.patreon.com/phpdoctrine",
+                    "type": "patreon"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/doctrine%2Fdoctrine-fixtures-bundle",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-12-03T16:05:42+00:00"
+        },
         {
             "name": "evenement/evenement",
             "version": "v3.0.2",

config/bundles.php

@@ -4,10 +4,12 @@ declare(strict_types=1);
 
 use ApiPlatform\Symfony\Bundle\ApiPlatformBundle;
 use Doctrine\Bundle\DoctrineBundle\DoctrineBundle;
+use Doctrine\Bundle\FixturesBundle\DoctrineFixturesBundle;
 use Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle;
 use Lexik\Bundle\JWTAuthenticationBundle\LexikJWTAuthenticationBundle;
 use Nelmio\CorsBundle\NelmioCorsBundle;
 use Symfony\Bundle\FrameworkBundle\FrameworkBundle;
+use Symfony\Bundle\MonologBundle\MonologBundle;
 use Symfony\Bundle\SecurityBundle\SecurityBundle;
 use Symfony\Bundle\TwigBundle\TwigBundle;
 
@@ -20,4 +22,6 @@ return [
     NelmioCorsBundle::class             => ['all' => true],
     ApiPlatformBundle::class            => ['all' => true],
     LexikJWTAuthenticationBundle::class => ['all' => true],
+    MonologBundle::class                => ['all' => true],
+    DoctrineFixturesBundle::class       => ['dev' => true, 'test' => true],
 ];

config/packages/lexik_jwt_authentication.yaml

@@ -2,6 +2,7 @@ lexik_jwt_authentication:
     secret_key: '%env(resolve:JWT_SECRET_KEY)%'
     public_key: '%env(resolve:JWT_PUBLIC_KEY)%'
     pass_phrase: '%env(JWT_PASSPHRASE)%'
+    token_ttl: '%env(int:JWT_TOKEN_TTL)%'
     remove_token_from_body_when_cookies_used: true
     token_extractors:
         authorization_header:
@@ -13,7 +14,7 @@ lexik_jwt_authentication:
             enabled: false
     set_cookies:
         BEARER:
-            lifetime: 86400
+            lifetime: '%env(int:JWT_COOKIE_TTL)%'
             samesite: lax
             path: /
             secure: '%env(bool:JWT_COOKIE_SECURE)%'

config/packages/monolog.yaml

@@ -0,0 +1,38 @@
+monolog:
+    channels: [deprecation, cron]
+
+when@dev:
+    monolog:
+        handlers:
+            cron:
+                type: stream
+                path: "%kernel.logs_dir%/cron.log"
+                level: info
+                channels: [cron]
+            main:
+                type: stream
+                path: "%kernel.logs_dir%/%kernel.environment%.log"
+                level: debug
+                channels: ["!event", "!cron"]
+            console:
+                type: console
+                process_psr_3_messages: false
+                channels: ["!event", "!doctrine", "!console"]
+
+when@prod:
+    monolog:
+        handlers:
+            cron:
+                type: stream
+                path: "%kernel.logs_dir%/cron.log"
+                level: info
+                channels: [cron]
+            main:
+                type: stream
+                path: "%kernel.logs_dir%/%kernel.environment%.log"
+                level: debug
+                channels: ["!deprecation", "!cron"]
+            deprecation:
+                type: stream
+                channels: [deprecation]
+                path: "%kernel.logs_dir%/deprecations.log"

config/packages/nelmio_cors.yaml

@@ -5,7 +5,7 @@ nelmio_cors:
         allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
         allow_headers: ['Content-Type', 'Authorization']
         allow_credentials: true
-        expose_headers: ['Link']
+        expose_headers: ['Link', 'Content-Disposition']
         max_age: 3600
     paths:
         '^/': null

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/reference.php

@@ -1608,6 +1608,149 @@ use Symfony\Component\Config\Loader\ParamConfigurator as Param;
  *         cache?: scalar|Param|null, // Storage to track blocked tokens // Default: "cache.app"
  *     },
  * }
+ * @psalm-type MonologConfig = array{
+ *     use_microseconds?: scalar|Param|null, // Default: true
+ *     channels?: list<scalar|Param|null>,
+ *     handlers?: array<string, array{ // Default: []
+ *         type: scalar|Param|null,
+ *         id?: scalar|Param|null,
+ *         enabled?: bool|Param, // Default: true
+ *         priority?: scalar|Param|null, // Default: 0
+ *         level?: scalar|Param|null, // Default: "DEBUG"
+ *         bubble?: bool|Param, // Default: true
+ *         interactive_only?: bool|Param, // Default: false
+ *         app_name?: scalar|Param|null, // Default: null
+ *         include_stacktraces?: bool|Param, // Default: false
+ *         process_psr_3_messages?: array{
+ *             enabled?: bool|Param|null, // Default: null
+ *             date_format?: scalar|Param|null,
+ *             remove_used_context_fields?: bool|Param,
+ *         },
+ *         path?: scalar|Param|null, // Default: "%kernel.logs_dir%/%kernel.environment%.log"
+ *         file_permission?: scalar|Param|null, // Default: null
+ *         use_locking?: bool|Param, // Default: false
+ *         filename_format?: scalar|Param|null, // Default: "{filename}-{date}"
+ *         date_format?: scalar|Param|null, // Default: "Y-m-d"
+ *         ident?: scalar|Param|null, // Default: false
+ *         logopts?: scalar|Param|null, // Default: 1
+ *         facility?: scalar|Param|null, // Default: "user"
+ *         max_files?: scalar|Param|null, // Default: 0
+ *         action_level?: scalar|Param|null, // Default: "WARNING"
+ *         activation_strategy?: scalar|Param|null, // Default: null
+ *         stop_buffering?: bool|Param, // Default: true
+ *         passthru_level?: scalar|Param|null, // Default: null
+ *         excluded_http_codes?: list<array{ // Default: []
+ *             code?: scalar|Param|null,
+ *             urls?: list<scalar|Param|null>,
+ *         }>,
+ *         accepted_levels?: list<scalar|Param|null>,
+ *         min_level?: scalar|Param|null, // Default: "DEBUG"
+ *         max_level?: scalar|Param|null, // Default: "EMERGENCY"
+ *         buffer_size?: scalar|Param|null, // Default: 0
+ *         flush_on_overflow?: bool|Param, // Default: false
+ *         handler?: scalar|Param|null,
+ *         url?: scalar|Param|null,
+ *         exchange?: scalar|Param|null,
+ *         exchange_name?: scalar|Param|null, // Default: "log"
+ *         channel?: scalar|Param|null, // Default: null
+ *         bot_name?: scalar|Param|null, // Default: "Monolog"
+ *         use_attachment?: scalar|Param|null, // Default: true
+ *         use_short_attachment?: scalar|Param|null, // Default: false
+ *         include_extra?: scalar|Param|null, // Default: false
+ *         icon_emoji?: scalar|Param|null, // Default: null
+ *         webhook_url?: scalar|Param|null,
+ *         exclude_fields?: list<scalar|Param|null>,
+ *         token?: scalar|Param|null,
+ *         region?: scalar|Param|null,
+ *         source?: scalar|Param|null,
+ *         use_ssl?: bool|Param, // Default: true
+ *         user?: mixed,
+ *         title?: scalar|Param|null, // Default: null
+ *         host?: scalar|Param|null, // Default: null
+ *         port?: scalar|Param|null, // Default: 514
+ *         config?: list<scalar|Param|null>,
+ *         members?: list<scalar|Param|null>,
+ *         connection_string?: scalar|Param|null,
+ *         timeout?: scalar|Param|null,
+ *         time?: scalar|Param|null, // Default: 60
+ *         deduplication_level?: scalar|Param|null, // Default: 400
+ *         store?: scalar|Param|null, // Default: null
+ *         connection_timeout?: scalar|Param|null,
+ *         persistent?: bool|Param,
+ *         message_type?: scalar|Param|null, // Default: 0
+ *         parse_mode?: scalar|Param|null, // Default: null
+ *         disable_webpage_preview?: bool|Param|null, // Default: null
+ *         disable_notification?: bool|Param|null, // Default: null
+ *         split_long_messages?: bool|Param, // Default: false
+ *         delay_between_messages?: bool|Param, // Default: false
+ *         topic?: int|Param, // Default: null
+ *         factor?: int|Param, // Default: 1
+ *         tags?: list<scalar|Param|null>,
+ *         console_formatter_options?: mixed, // Default: []
+ *         formatter?: scalar|Param|null,
+ *         nested?: bool|Param, // Default: false
+ *         publisher?: string|array{
+ *             id?: scalar|Param|null,
+ *             hostname?: scalar|Param|null,
+ *             port?: scalar|Param|null, // Default: 12201
+ *             chunk_size?: scalar|Param|null, // Default: 1420
+ *             encoder?: "json"|"compressed_json"|Param,
+ *         },
+ *         mongodb?: string|array{
+ *             id?: scalar|Param|null, // ID of a MongoDB\Client service
+ *             uri?: scalar|Param|null,
+ *             username?: scalar|Param|null,
+ *             password?: scalar|Param|null,
+ *             database?: scalar|Param|null, // Default: "monolog"
+ *             collection?: scalar|Param|null, // Default: "logs"
+ *         },
+ *         elasticsearch?: string|array{
+ *             id?: scalar|Param|null,
+ *             hosts?: list<scalar|Param|null>,
+ *             host?: scalar|Param|null,
+ *             port?: scalar|Param|null, // Default: 9200
+ *             transport?: scalar|Param|null, // Default: "Http"
+ *             user?: scalar|Param|null, // Default: null
+ *             password?: scalar|Param|null, // Default: null
+ *         },
+ *         index?: scalar|Param|null, // Default: "monolog"
+ *         document_type?: scalar|Param|null, // Default: "logs"
+ *         ignore_error?: scalar|Param|null, // Default: false
+ *         redis?: string|array{
+ *             id?: scalar|Param|null,
+ *             host?: scalar|Param|null,
+ *             password?: scalar|Param|null, // Default: null
+ *             port?: scalar|Param|null, // Default: 6379
+ *             database?: scalar|Param|null, // Default: 0
+ *             key_name?: scalar|Param|null, // Default: "monolog_redis"
+ *         },
+ *         predis?: string|array{
+ *             id?: scalar|Param|null,
+ *             host?: scalar|Param|null,
+ *         },
+ *         from_email?: scalar|Param|null,
+ *         to_email?: list<scalar|Param|null>,
+ *         subject?: scalar|Param|null,
+ *         content_type?: scalar|Param|null, // Default: null
+ *         headers?: list<scalar|Param|null>,
+ *         mailer?: scalar|Param|null, // Default: null
+ *         email_prototype?: string|array{
+ *             id: scalar|Param|null,
+ *             method?: scalar|Param|null, // Default: null
+ *         },
+ *         verbosity_levels?: array{
+ *             VERBOSITY_QUIET?: scalar|Param|null, // Default: "ERROR"
+ *             VERBOSITY_NORMAL?: scalar|Param|null, // Default: "WARNING"
+ *             VERBOSITY_VERBOSE?: scalar|Param|null, // Default: "NOTICE"
+ *             VERBOSITY_VERY_VERBOSE?: scalar|Param|null, // Default: "INFO"
+ *             VERBOSITY_DEBUG?: scalar|Param|null, // Default: "DEBUG"
+ *         },
+ *         channels?: string|array{
+ *             type?: scalar|Param|null,
+ *             elements?: list<scalar|Param|null>,
+ *         },
+ *     }>,
+ * }
  * @psalm-type ConfigType = array{
  *     imports?: ImportsConfig,
  *     parameters?: ParametersConfig,
@@ -1620,6 +1763,7 @@ use Symfony\Component\Config\Loader\ParamConfigurator as Param;
  *     nelmio_cors?: NelmioCorsConfig,
  *     api_platform?: ApiPlatformConfig,
  *     lexik_jwt_authentication?: LexikJwtAuthenticationConfig,
+ *     monolog?: MonologConfig,
  *     "when@dev"?: array{
  *         imports?: ImportsConfig,
  *         parameters?: ParametersConfig,
@@ -1632,6 +1776,7 @@ use Symfony\Component\Config\Loader\ParamConfigurator as Param;
  *         nelmio_cors?: NelmioCorsConfig,
  *         api_platform?: ApiPlatformConfig,
  *         lexik_jwt_authentication?: LexikJwtAuthenticationConfig,
+ *         monolog?: MonologConfig,
  *     },
  *     "when@prod"?: array{
  *         imports?: ImportsConfig,
@@ -1645,6 +1790,7 @@ use Symfony\Component\Config\Loader\ParamConfigurator as Param;
  *         nelmio_cors?: NelmioCorsConfig,
  *         api_platform?: ApiPlatformConfig,
  *         lexik_jwt_authentication?: LexikJwtAuthenticationConfig,
+ *         monolog?: MonologConfig,
  *     },
  *     "when@test"?: array{
  *         imports?: ImportsConfig,
@@ -1658,6 +1804,7 @@ use Symfony\Component\Config\Loader\ParamConfigurator as Param;
  *         nelmio_cors?: NelmioCorsConfig,
  *         api_platform?: ApiPlatformConfig,
  *         lexik_jwt_authentication?: LexikJwtAuthenticationConfig,
+ *         monolog?: MonologConfig,
  *     },
  *     ...<string, ExtensionType|array{ // extra keys must follow the when@%env% pattern or match an extension alias
  *         imports?: ImportsConfig,

config/services.yaml

@@ -22,5 +22,23 @@ services:
     App\:
         resource: '../src/'
 
+    App\Service\PublicHolidayService:
+        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'
+    App\Repository\Contract\WorkHourReadRepositoryInterface: '@App\Repository\WorkHourRepository'
+    App\Service\Contracts\EmployeeContractPeriodManagerInterface: '@App\Service\Contracts\EmployeeContractPeriodManager'
+
     # add more service definitions when explicit configuration is needed
     # please note that last definitions always *replace* previous ones

config/version.yaml

@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.1'
+    app.version: '0.1.74'

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,80 @@
+# --- 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
+
+# Symfony needs a .env file to boot (variables are overridden by env_file in docker-compose)
+RUN echo "APP_ENV=prod" > /var/www/html/.env
+
+# 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 -u www-data app php bin/console doctrine:migrations:migrate --no-interaction
+
+echo "==> Clearing cache..."
+docker compose exec -T -u www-data app php bin/console cache:clear --env=prod
+docker compose exec -T -u www-data 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;
+    }
+}

deploy/nginx/sirh.conf

@@ -0,0 +1,43 @@
+server {
+  listen 80;
+server_name sirh.malio-dev.fr;
+
+  root /var/www/sirh/frontend/.output/public;
+  index index.html;
+
+    location ^~ /api/ {
+        root /var/www/sirh/public;
+        try_files $uri /index.php?$query_string;
+    }
+
+    location ^~ /bundles/ {
+        root /var/www/sirh/public;
+        try_files $uri =404;
+    }
+
+    location = /api/login_check {
+        include fastcgi_params;
+        fastcgi_param SCRIPT_FILENAME /var/www/sirh/public/index.php;
+        fastcgi_param DOCUMENT_ROOT /var/www/sirh/public;
+        fastcgi_param SCRIPT_NAME /index.php;
+        fastcgi_param PATH_INFO /login_check;
+        fastcgi_param REQUEST_URI /login_check;
+        fastcgi_pass unix:/run/php/php8.4-fpm.sock;
+    }
+
+    location ~ ^/index\.php(/|$) {
+        include fastcgi_params;
+        fastcgi_param SCRIPT_FILENAME /var/www/sirh/public/index.php;
+        fastcgi_param DOCUMENT_ROOT /var/www/sirh/public;
+        fastcgi_pass unix:/run/php/php8.4-fpm.sock;
+        internal;
+    }
+
+  location ~ \.php$ {
+      return 404;
+  }
+
+  location / {
+      try_files $uri $uri/ /index.html;
+  }
+}

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,326 @@
+# Deploiement Docker — SIRH
+
+## Pre-requis
+
+### Docker
+
+```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.
+
+### Nginx
+
+```bash
+sudo apt install -y nginx
+sudo systemctl enable nginx
+sudo systemctl start nginx
+```
+
+### PostgreSQL
+
+PostgreSQL tourne dans un conteneur Docker separe (voir le repo `infra-postgres`).
+Il doit etre installe et accessible avant de deployer SIRH.
+
+Creer la base de donnees pour SIRH :
+
+```bash
+cd /var/www/postgres
+docker compose exec postgres psql -U admin
+```
+
+```sql
+-- Si le user n'existe pas encore
+CREATE USER malio WITH PASSWORD 'motdepasse';
+
+-- Creer la base
+CREATE DATABASE sirh_prod OWNER malio;
+\q
+```
+
+---
+
+## Premiere installation (nouvelle machine)
+
+Guide complet pour mettre en ligne SIRH sur une machine vierge. Inclut les pre-requis, la BDD et l'app.
+
+### 1. Installer les pre-requis
+
+Installer Docker, Nginx et PostgreSQL (voir section Pre-requis ci-dessus).
+
+### 2. Creer le dossier de deploiement
+
+```bash
+sudo mkdir -p /var/www/sirh
+sudo chown -R $(whoami):$(whoami) /var/www/sirh
+cd /var/www/sirh
+```
+
+### 3. Se connecter au registry Docker de Gitea
+
+```bash
+docker login gitea.malio.fr
+```
+
+- **Username** : le nom d'utilisateur du compte organisation Gitea `MALIO-DEV`
+- **Password** : le token REGISTRY_TOKEN dispo dans le bitwarden
+
+Le login est sauvegarde dans `~/.docker/config.json`, pas besoin de le refaire a chaque deploiement.
+
+### 4. Creer les fichiers de deploiement
+
+Creer `docker-compose.yml` :
+
+```yaml
+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
+```
+
+Creer `deploy.sh` :
+
+```bash
+#!/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 -u www-data app php bin/console doctrine:migrations:migrate --no-interaction
+
+echo "==> Clearing cache..."
+docker compose exec -T -u www-data app php bin/console cache:clear --env=prod
+docker compose exec -T -u www-data 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}"
+```
+
+Rendre executable :
+
+```bash
+chmod +x deploy.sh
+```
+
+### 5. Configurer l'environnement
+
+Creer `.env` avec les variables suivantes :
+
+```env
+# Symfony
+APP_ENV=prod
+APP_DEBUG=0
+APP_SECRET=<generer avec: openssl rand -hex 32>
+
+# Database (host.docker.internal = la machine hote, ou le PG tourne en Docker)
+DATABASE_URL="postgresql://malio:password@host.docker.internal:5432/sirh_prod?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=<generer avec: openssl rand -hex 32>
+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/"
+```
+
+### 6. Generer les cles JWT
+
+```bash
+mkdir -p config/jwt
+openssl genpkey -algorithm RSA -out config/jwt/private.pem -pkeyopt rsa_keygen_bits:4096
+openssl rsa -pubout -in config/jwt/private.pem -out config/jwt/public.pem
+```
+
+Rendre les cles lisibles par le conteneur (www-data = uid 33) :
+
+```bash
+sudo chown 33:33 config/jwt/private.pem config/jwt/public.pem
+sudo chmod 644 config/jwt/private.pem config/jwt/public.pem
+```
+
+### 7. Creer le dossier uploads
+
+```bash
+mkdir -p uploads
+```
+
+### 8. Configurer Nginx systeme
+
+Creer `/etc/nginx/sites-available/sirh.conf` :
+
+```nginx
+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;
+    }
+}
+```
+
+Activer le site :
+
+```bash
+sudo ln -sf /etc/nginx/sites-available/sirh.conf /etc/nginx/sites-enabled/sirh.conf
+sudo nginx -t && sudo systemctl reload nginx
+```
+
+### 9. Deployer
+
+```bash
+./deploy.sh
+```
+
+### 10. Importer les donnees (optionnel)
+
+Si tu as un dump SQL a importer :
+
+```bash
+# Depuis ton PC, envoyer le dump vers le serveur
+scp sirh.sql user@serveur:/tmp/sirh.sql
+
+# Sur le serveur, vider la base puis importer
+cd /var/www/postgres
+docker compose exec -T postgres psql -U malio sirh_prod -c "DROP SCHEMA public CASCADE; CREATE SCHEMA public;"
+docker compose exec -T postgres psql -U malio sirh_prod < /tmp/sirh.sql
+
+# Creer les tables manquantes (si le dump a des erreurs de syntaxe)
+cd /var/www/sirh
+docker compose exec -u www-data app php bin/console doctrine:schema:update --force --env=prod
+
+# Nettoyer
+rm /tmp/sirh.sql
+```
+
+### Structure finale du dossier
+
+```
+/var/www/sirh/
+├── docker-compose.yml
+├── deploy.sh
+├── .env
+├── config/jwt/
+│   ├── private.pem
+│   └── public.pem
+└── uploads/
+```
+
+---
+
+## Deployer une nouvelle version
+
+Quand l'app est deja installee, deployer une mise a jour :
+
+```bash
+cd /var/www/sirh
+./deploy.sh           # deploie la derniere version (latest)
+./deploy.sh v0.1.61   # deploie une version specifique
+```
+
+C'est tout. Le script pull l'image, redemarre le conteneur, lance les migrations et vide le cache.
+
+---
+
+## 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 -u www-data 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
+```
+
+Logs Symfony :
+
+```bash
+docker compose exec app cat var/log/prod.log
+```
+
+---
+
+## 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 existants :
+   ```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. Creer `docker-compose.yml` et `deploy.sh` dans `/var/www/sirh-docker/` (voir etape 4 ci-dessus)
+5. Editer `/var/www/sirh-docker/.env` : changer `DATABASE_URL` pour utiliser `host.docker.internal` au lieu de `127.0.0.1`
+6. Se connecter au registry Gitea (voir etape 3 ci-dessus)
+7. Mettre a jour Nginx systeme avec la conf reverse proxy (voir etape 8 ci-dessus)
+8. Arreter l'ancien PHP-FPM : `sudo systemctl stop php8.4-fpm`
+9. Deployer : `cd /var/www/sirh-docker && ./deploy.sh`
+10. Verifier que tout marche, puis renommer le dossier : `mv /var/www/sirh-docker /var/www/sirh`

doc/functional-rules.md

@@ -0,0 +1,434 @@
+# Règles Fonctionnelles SIRH
+
+Ce document centralise les règles métier actuellement implémentées dans l'application.
+
+Documents complementaires:
+- `doc/leave-rollover.md` (rollover conges et checklist de lancement)
+- `doc/rtt-rollover.md` (rollover RTT et checklist de lancement)
+
+## 1) Utilisateurs et accès
+
+- `ROLE_ADMIN`
+  - accès complet aux écrans d'administration
+  - vue semaine des heures
+  - validation RH des lignes d'heures
+- `ROLE_SELF`
+  - accès limité à son périmètre personnel
+- Accès "Sites" (via `user_site_roles` avec rôle `SITE_ACCESS`)
+  - accès au périmètre des sites autorisés
+  - validation site des lignes d'heures
+
+## 2) Contrats
+
+- Le profil de temps de travail est porté par `Contract`:
+  - `trackingMode`: `TIME` ou `PRESENCE`
+  - `weeklyHours` (ex: 35, 39, 4, etc.)
+- La nature RH est portée par période employé:
+  - `CDI`, `CDD`, `INTERIM`
+- Historique des contrats employé:
+  - table `employee_contract_periods`
+  - un employé peut avoir plusieurs périodes
+
+### Règles de période
+
+- `CDI`:
+  - à la création d'une période: `endDate` doit être vide
+  - en clôture d'un contrat en cours: `endDate` peut être renseignée
+- `CDD` / `INTERIM`:
+  - `endDate` obligatoire
+- `endDate` ne peut pas être antérieure à `startDate`
+
+## 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
+- Sélecteur de temps:
+  - créneaux de 15 minutes uniquement (00:00, 00:15, ..., 23:45)
+  - saisie libre possible mais valeur vidée au blur si hors options
+- Calculs affichés:
+  - `Jour`, `Nuit`, `Total`
+- Heures de nuit:
+  - fenêtres `00:00-06:00` et `21:00-24:00`
+- Date de modification (`updatedAt`):
+  - mise à jour uniquement quand un employé (`ROLE_SELF`) modifie ses propres heures
+  - non mise à jour lors de modifications admin ou chef de site
+  - affichée sous le nom de l'employé (visible admin uniquement)
+
+## 4) Absences
+
+- Les absences sont stockées par jour (découpage lors de l'écriture)
+- Une absence peut être:
+  - journée complète
+  - demi-journée `AM` ou `PM`
+- Colonne absence (vue jour):
+  - affiche le libellé
+  - fond coloré selon le type d'absence
+- Calendrier congés: fond coloré selon la couleur du type d'absence (`AbsenceType.color`)
+  - demi-journée: dégradé diagonal
+  - journée complète: fond plein
+
+### Effet absence sur les heures
+
+- Absence `AM`:
+  - efface les heures du matin
+- Absence `PM`:
+  - efface les heures d'après-midi et du soir
+- Absence journée:
+  - efface toutes les plages horaires
+
+### Absences "comptées comme travaillées"
+
+- Si `countAsWorkedHours = true`:
+  - `TIME`: crédit de minutes selon contrat actif du jour
+  - `PRESENCE` (forfait): aucun crédit de présence (seules les checkboxes cochées comptent)
+
+## 5) Validations des lignes d'heures
+
+- Validation RH (`isValid`)
+  - action admin
+- Validation site (`isSiteValid`)
+  - action chef de site
+
+### Verrouillage
+
+- Ligne validée RH:
+  - verrouillée pour modifications heures/absences
+- Ligne validée site:
+  - verrouillée pour non-admin
+  - admin peut corriger
+- Toute vraie modification d'une ligne:
+  - remet `isSiteValid = false`
+  - remet `isValid = false`
+- Si aucun changement réel à l'enregistrement:
+  - les validations existantes ne sont pas altérées
+
+## 6) Heures supplémentaires (vue semaine)
+
+- Base de calcul:
+  - dépend du contrat actif par jour
+- Tranche 25%:
+  - contrats <= 35h: de 35h à 43h
+  - 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
+- Onglet congés: jours fériés affichés sur le calendrier avec fond `rgb(179, 229, 252)` et nom au survol
+- Règle courante:
+  - absences bloquées sur jour férié
+  - saisie d'heures autorisée
+
+## 8) Impression absences (PDF)
+
+Filtres disponibles:
+- période `from` / `to`
+- sites
+- nature de contrat (`CDI`, `CDD`, `INTERIM`)
+- temps de travail (contrats de type Forfait, 35h, 39h, etc.)
+
+Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
+
+## 9) Employés
+
+- Création employé:
+  - prénom, nom, site
+  - type de contrat (nature RH)
+  - temps de travail
+  - dates début/fin (selon règles nature)
+- 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 `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 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
+  - onglet `Congé`:
+    - endpoint de synthèse: `GET /api/employees/{id}/leave-summary?year=YYYY`
+    - phase 1 métier (`CDI`/`CDD` non forfait + `FORFAIT`):
+      - exercice CP:
+        - `CDI`/`CDD` non forfait: du `1er juin (YYYY-1)` au `31 mai (YYYY)` (paramètre `year` = année de fin d'exercice)
+        - `FORFAIT`: du `1er janvier (YYYY)` au `31 décembre (YYYY)` (paramètre `year` = année civile)
+      - contrats `39h` / `35h` / `25h` (et plus largement CDI/CDD non forfait hors `4h`):
+        - acquis annuel CP: `25`
+        - acquis annuel samedi: `5`
+        - 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`)
+        - pas de jours en cours d'acquisition (`0`)
+      - fractionné: saisie manuelle par la RH via `PATCH /employees/{id}/fractioned-days`, stocké dans `employee_leave_balances.fractioned_days`. Les jours fractionnés sont ajoutés aux acquis et au reste à prendre.
+      - pour `CDI`/`CDD` non forfait:
+        - pris CP: basé sur absences de type code `C` (CONGÉ), en tenant compte des demi-journées
+        - samedi pris: absences `C` posées le samedi (demi-journée incluse)
+        - restants = acquis - pris (borné à 0)
+      - pour `FORFAIT`:
+        - pris: basé sur toutes les absences (demi-journées incluses)
+        - restants = acquis - pris (borné à 0)
+      - report annuel:
+        - le reliquat (`restants`) de l'exercice précédent est reporté dans les acquis de l'exercice courant
+        - pour `CDI`/`CDD` non forfait: report séparé jours + samedis
+        - pour `FORFAIT`: report uniquement sur les jours
+        - si un solde d'ouverture existe en base (`employee_leave_balances`) pour l'exercice courant, ce solde devient la source prioritaire du report
+        - si une clôture de contrat est marquée `contractPaidLeaveSettled=true` sur l'exercice précédent, le report vers l'exercice suivant est remis à `0`
+        - si une clôture `contractPaidLeaveSettled=true` existe dans l'exercice courant, le calcul est réinitialisé à partir du lendemain de cette clôture (pas de continuité intra-exercice)
+      - lecture des compteurs:
+        - `acquis` = droits reportés de l'exercice N-1 (après application des règles de soldé)
+        - `en cours d'acquisition` = total droits générés sur l'exercice N (jours + samedis en cours), sans detail séparé en UI
+        - `en cours d'acquisition` est arrêté au dernier jour du mois précédent
+      - règle de consommation:
+        - les absences s'imputent d'abord sur `acquis`, puis sur `en cours d'acquisition`
+        - la prise sur `en cours d'acquisition` est autorisée (usage anticipé)
+        - `en cours d'acquisition` peut devenir négatif si la prise dépasse le généré (ex: `2.08 - 3 = -0.92`), puis se reconstitue avec les acquisitions suivantes
+      - date d'arret de calcul:
+        - `reste à prendre` est calculé en prévisionnel jusqu'à la fin de l'exercice
+        - les absences futures déjà posées sur l'exercice sont déduites du `reste à prendre`
+        - `en cours d'acquisition` reste calculé jusqu'au dernier jour du mois précédent
+        - exemple: au `11/03/2026`, l'exercice `2026` déduit les absences posées jusqu'au `31/05/2026`, mais l'acquisition reste arrêtée au `28/02/2026`
+    - hors périmètre phase 1: `INTERIM` (retour non supporté)
+  - onglet `RTT`:
+    - endpoint de synthèse: `GET /api/employees/{id}/rtt-summary?year=YYYY`
+    - exercice RTT: du `1er juin (YYYY-1)` au `31 mai (YYYY)` (paramètre `year` = année de fin d'exercice)
+    - affichage:
+      - détail hebdomadaire (semaine ISO) regroupé par mois
+      - total mensuel des minutes de récupération
+      - compteur global exercice = `report N-1 + acquis N`
+    - attribution mensuelle des semaines:
+      - une semaine ISO est affichée une seule fois, dans le mois qui contient le **samedi** de cette semaine
+      - si le weekend tombe en début de mois suivant, c'est le mois suivant qui porte la semaine
+    - logique de calcul:
+      - 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:
+      - le report N-1 correspond à la somme des minutes de récupération calculées sur l'exercice précédent
+      - si une ligne existe dans `employee_rtt_balances` pour `(employee, year)`, le champ `opening_minutes` est utilisé en priorité
+      - sinon, le calcul dynamique sur l'exercice N-1 est effectué
+    - rollover automatique:
+      - commande: `php bin/console app:rtt:rollover`
+      - s'exécute le `1er juin` (même cron que le rollover congés)
+      - calcule le total récup N-1 et le persiste en `opening_minutes` du nouvel exercice
+      - idempotent (ne recrée pas si la ligne existe)
+    - paiement RTT:
+      - saisie RH via `PATCH /employees/{id}/rtt-payments` (body: `month`, `minutes`, `rate`)
+      - stocké dans `employee_rtt_payments` (employee, year, month, minutes, rate)
+      - `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) 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
+  - ouverture panneau = liste des non lues
+  - fermeture panneau = marquage "lu" en masse
+
+### Règle métier de déclenchement
+
+- Les notifications de validation site ne sont pas envoyées ligne par ligne.
+- 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`

doc/leave-rollover.md

@@ -0,0 +1,226 @@
+# Rollover Conges - Regles et Mise en Production
+
+Document de reference pour expliquer le fonctionnement metier du report N-1 et preparer le lancement en production.
+
+## 1) Objectif
+
+Eviter les recalculs "depuis le debut du contrat" et fiabiliser les soldes.
+
+Principe:
+- le solde est stocké par exercice
+- au changement d'exercice, on ouvre la nouvelle période avec un "solde d'ouverture" (report N-1)
+- un indicateur de cloture (`contractPaidLeaveSettled`) permet de couper la continuité entre 2 contrats
+
+## 2) Exercices metier
+
+- `CDI` / `CDD` non forfait:
+  - exercice: `1er juin` au `31 mai`
+  - `year` = annee de fin d'exercice (ex: `2026` = 01/06/2025 -> 31/05/2026)
+- `FORFAIT`:
+  - exercice: `1er janvier` au `31 decembre`
+  - `year` = annee civile
+- `INTERIM`:
+  - hors perimetre conges
+
+## 3) Logique de compteurs
+
+- `acquis`:
+  - correspond au report N-1 (solde d'ouverture)
+- `en cours d'acquisition`:
+  - correspond aux droits generes sur l'exercice en cours
+- `pris`:
+  - non forfait: absences type `C` (conge)
+  - forfait: toutes absences
+- `restant`:
+  - `acquis + en_cours - pris` (borne a 0 dans l'affichage)
+
+## 4) Effet du "solde de tout compte"
+
+Le champ de cloture `contractPaidLeaveSettled` est saisi lors de la fermeture d'une periode contrat.
+
+- `false`:
+  - continuite des droits entre contrats
+- `true`:
+  - pas de reprise des droits precedents
+  - reset de continuite au lendemain de la date de cloture
+
+## 5) Table cible
+
+Table `employee_leave_balances` (une ligne par employe et exercice):
+- `employee_id`
+- `rule_code` (`CDI_CDD_NON_FORFAIT` ou `FORFAIT_218`)
+- `year`
+- `opening_days`
+- `opening_saturdays`
+- `accrued_days`
+- `accrued_saturdays` (optionnel selon implementation)
+- `taken_days`
+- `taken_saturdays`
+- `closing_days`
+- `closing_saturdays`
+- `is_locked`
+- `created_at`, `updated_at`
+
+Contrainte unique recommandee:
+- `(employee_id, rule_code, year)`
+
+Etat implementation:
+- la table est creee
+- le calcul de synthese conges lit en priorite `opening_days/opening_saturdays` de cette table quand une ligne existe pour `(employee, rule_code, year)`
+- si aucune ligne n'existe, le calcul reste base sur le report dynamique N-1
+- la commande `app:leave:rollover` calcule aussi le report dynamique N-1 si la ligne N-1 n'est pas encore persistée (pas de reset a 0 par defaut)
+
+### Definition des colonnes
+
+- `employee_id`:
+  - identifiant employe (FK vers `employees`)
+  - une ligne de solde par employe / regle / exercice
+- `rule_code`:
+  - code de regle appliquee (`CDI_CDD_NON_FORFAIT`, `FORFAIT_218`)
+  - permet de savoir quelles regles de calcul sont utilisees
+- `year`:
+  - annee d'exercice
+  - non forfait: annee de fin d'exercice (`2026` = 01/06/2025 -> 31/05/2026)
+  - forfait: annee civile (`2026` = 01/01/2026 -> 31/12/2026)
+- `opening_days`:
+  - report N-1 en jours (solde d'ouverture)
+- `opening_saturdays`:
+  - report N-1 "samedis" (0 pour forfait)
+- `accrued_days`:
+  - droits generes sur l'exercice courant (N)
+- `accrued_saturdays`:
+  - droits samedis generes sur N (0 pour forfait)
+- `taken_days`:
+  - jours poses sur l'exercice
+- `taken_saturdays`:
+  - samedis poses sur l'exercice (0 pour forfait)
+- `closing_days`:
+  - solde de cloture jours (`opening_days + accrued_days - taken_days`)
+- `closing_saturdays`:
+  - solde de cloture samedis (`opening_saturdays + accrued_saturdays - taken_saturdays`)
+- `is_locked`:
+  - `false` sur exercice ouvert (recalcul possible)
+  - `true` apres validation RH (exercice fige)
+- `created_at`, `updated_at`:
+  - trace technique creation / mise a jour
+
+## 6) Rollover automatique
+
+Commande quotidienne (cron) idempotente.
+
+- commande Symfony: `php bin/console app:leave:rollover`
+- comportement date metier:
+  - le `01/01`: traite uniquement `FORFAIT_218`
+  - le `01/06`: traite uniquement `CDI_CDD_NON_FORFAIT`
+  - les autres jours: sortie sans action
+- option manuelle: `--force` pour executer hors date metier (reprise/correction)
+
+Date d'effet:
+- forfait: au `1er janvier`
+- non forfait: au `1er juin`
+
+Traitement par employe:
+1. lire l'exercice precedent
+2. determiner le report:
+   - si cloture `paidLeaveSettled=true` sur la periode precedente => report `0`
+   - sinon report = `closing` exercice precedent
+3. creer la ligne du nouvel exercice avec ce report en `opening_*`
+4. initialiser `accrued/taken/closing` pour le nouvel exercice
+
+## 7) Donnees a fournir au go-live
+
+La RH doit fournir un import d'ouverture:
+
+Colonnes minimales:
+- `employee_identifier` (id interne ou matricule)
+- `rule_code`
+- `year`
+- `opening_days`
+- `opening_saturdays` (0 pour forfait)
+- `source_date` (date de reference du relevé RH)
+- `comment` (optionnel)
+
+Format recommande:
+- CSV UTF-8
+- separateur `;`
+- decimales en point (`7.5`)
+
+Exemple:
+```csv
+employee_id;rule_code;year;opening_days;opening_saturdays;source_date;comment
+42;CDI_CDD_NON_FORFAIT;2026;12.5;2;2026-05-31;Reprise fichier RH
+17;FORFAIT_218;2026;8;0;2025-12-31;Reprise fichier RH
+```
+
+## 8) Checklist mise en prod
+
+1. Valider le mapping employe RH -> employe applicatif
+2. Importer les soldes d'ouverture N-1
+3. Verifier 5 cas metier:
+   - CDI simple sans changement de contrat
+   - CDD -> CDI avec `paidLeaveSettled=false`
+   - CDD -> CDI avec `paidLeaveSettled=true`
+   - Forfait sur annee complete
+   - Forfait avec debut en cours d'annee
+4. Activer le cron de rollover
+5. Geler (`is_locked`) les exercices historicises valides
+
+Exemple cron (tous les jours a 02:10):
+Dev
+```cron
+10 2 * * * cd /var/www/html && php bin/console app:leave:rollover --no-interaction 2>&1
+```
+Prod
+```cron
+10 2 * * * cd /var/www/sirh && php bin/console app:leave:rollover --no-interaction 2>&1
+```
+Explication de la ligne cron:
+- `10 2 * * *`: planification
+  - `10` = minute
+  - `2` = heure
+  - `*` = tous les jours du mois
+  - `*` = tous les mois
+  - `*` = tous les jours de la semaine
+- `cd /var/www/html`: se place dans le dossier de l application Symfony
+- `php bin/console app:leave:rollover --no-interaction`: execute le rollover sans demander de confirmation
+  - hors `01/01` et `01/06`, la commande sort en no-op (normal)
+- `>> var/log/leave-rollover.log`: ajoute la sortie standard dans le fichier de log (sans ecraser l historique)
+- `2>&1`: redirige aussi les erreurs dans le meme fichier de log
+
+Execution manuelle forcee:
+```bash
+php bin/console app:leave:rollover --force --no-interaction
+```
+
+Exemple de verification rapide:
+```bash
+tail -n 50 /var/www/html/var/log/leave-rollover.log
+```
+
+## 9) Points de vigilance
+
+- Ne jamais recalculer les soldes historiques apres validation RH sans procedure explicite
+- Garder une trace de toute correction manuelle (auteur, date, motif)
+- Aligner strictement les regles UI et API sur les memes compteurs (pas de formule differente front/back)
+
+## 10) Regle de consommation des droits
+
+Regle metier:
+- un employe peut poser des conges en cours d'acquisition
+- la consommation se fait par ordre:
+  1. `acquis` (report N-1)
+  2. `en cours d'acquisition` (droits N)
+
+Effet attendu:
+- si `acquis = 0` et `en cours = 7.5`, puis prise de `7`, alors:
+  - `acquis` reste `0`
+  - `en cours` devient `0.5`
+- si `acquis = 0` et `en cours = 2.5`, puis prise de `3`, alors:
+  - `acquis` reste `0`
+  - `en cours` devient `-0.5` (dette)
+  - le mois suivant, une acquisition de `2.5` ramené `en cours` a `2.0`
+
+Formule de lecture recommandée:
+- `restant_acquis = max(0, acquis - pris)`
+- `reste_a_imputer_sur_en_cours = max(0, pris - acquis)`
+- `restant_en_cours = en_cours - reste_a_imputer_sur_en_cours` (valeur negative autorisee)

doc/rtt-rollover.md

@@ -0,0 +1,163 @@
+# Rollover RTT - Regles et Mise en Production
+
+Document de reference pour expliquer le fonctionnement metier du report RTT N-1 et preparer le lancement en production.
+
+## 1) Objectif
+
+Permettre le report des heures supplementaires (RTT) d'un exercice a l'autre et fiabiliser les soldes.
+
+Principe:
+- le solde d'ouverture est stocke par exercice
+- au changement d'exercice, on ouvre la nouvelle periode avec un "solde d'ouverture" (report N-1)
+- au go-live, les soldes d'ouverture sont importes manuellement (CSV ou insertion SQL)
+
+## 2) Exercice metier
+
+- exercice RTT: du `1er juin` au `31 mai`
+- `year` = annee de fin d'exercice (ex: `2026` = 01/06/2025 -> 31/05/2026)
+- employes eligibles: tous sauf `INTERIM` et suivi `PRESENCE`
+
+## 3) Logique de compteurs
+
+- `report N-1`:
+  - correspond au solde d'ouverture (`opening_minutes`)
+  - source prioritaire: table `employee_rtt_balances`
+  - fallback: calcul dynamique de la somme des minutes de recuperation de l'exercice precedent
+- `acquis N`:
+  - somme des minutes de recuperation hebdomadaires de l'exercice en cours
+  - calcul: `HS totales + bonus 25% + bonus 50%` par semaine
+- `disponible`:
+  - `report N-1 + acquis N`
+- affichage du compteur global: en **jours** (1 jour = 7h = 420 minutes)
+
+## 4) Attribution mensuelle des semaines
+
+- une semaine ISO est affichee une seule fois, dans le mois qui contient le **samedi** de cette semaine
+- si le weekend tombe en debut du mois suivant, c'est ce mois qui porte la semaine
+- pas de prorata: la totalite des minutes de recuperation de la semaine est comptee dans un seul mois
+
+## 5) Table cible
+
+Table `employee_rtt_balances` (une ligne par employe et exercice):
+- `employee_id`
+- `year`
+- `opening_minutes`
+- `is_locked`
+- `created_at`, `updated_at`
+
+Contrainte unique:
+- `(employee_id, year)`
+
+Etat implementation:
+- la table est creee
+- le calcul de synthese RTT lit en priorite `opening_minutes` de cette table quand une ligne existe pour `(employee, year)`
+- si aucune ligne n'existe, le calcul dynamique sur l'exercice N-1 est effectue
+
+### Definition des colonnes
+
+- `employee_id`:
+  - identifiant employe (FK vers `employees`)
+  - une ligne de solde par employe / exercice
+- `year`:
+  - annee d'exercice (annee de fin)
+  - `2026` = 01/06/2025 -> 31/05/2026
+- `opening_minutes`:
+  - report N-1 en minutes (solde d'ouverture)
+  - correspond a la somme des minutes de recuperation de l'exercice precedent
+- `is_locked`:
+  - `false` sur exercice ouvert (recalcul possible)
+  - `true` apres validation RH (exercice fige)
+- `created_at`, `updated_at`:
+  - trace technique creation / mise a jour
+
+## 6) Rollover automatique
+
+Commande quotidienne (cron) idempotente.
+
+- commande Symfony: `php bin/console app:rtt:rollover`
+- comportement date metier:
+  - le `01/06`: calcule et persiste le report pour chaque employe eligible
+  - les autres jours: sortie sans action
+- option manuelle: `--force` pour executer hors date metier (reprise/correction)
+
+Date d'effet:
+- au `1er juin` (meme date que le rollover conges non forfait)
+
+Traitement par employe:
+1. verifier l'eligibilite (ni INTERIM, ni suivi PRESENCE)
+2. verifier qu'aucune ligne n'existe deja pour `(employee, targetYear)` (idempotence)
+3. calculer la somme des minutes de recuperation de l'exercice N-1
+4. creer la ligne du nouvel exercice avec ce total en `opening_minutes`
+
+## 7) Donnees a fournir au go-live
+
+La RH doit fournir les soldes RTT a reporter.
+
+Colonnes minimales:
+- `employee_id` (id interne)
+- `year`
+- `opening_minutes` (total en minutes)
+
+Format recommande:
+- CSV UTF-8
+- separateur `;`
+
+Exemple:
+```csv
+employee_id;year;opening_minutes
+42;2026;1260
+17;2026;840
+```
+
+Equivalent en insertion SQL directe:
+```sql
+INSERT INTO employee_rtt_balances (employee_id, year, opening_minutes, is_locked, created_at, updated_at)
+VALUES
+  (42, 2026, 1260, false, NOW(), NOW()),
+  (17, 2026, 840, false, NOW(), NOW());
+```
+
+Conversion rapide: `1260 minutes = 21h00 = 3.00 jours` (1 jour = 420 min = 7h)
+
+## 8) Checklist mise en prod
+
+1. Executer la migration (`employee_rtt_balances`)
+2. Importer les soldes d'ouverture N-1 (CSV ou SQL)
+3. Verifier 3 cas metier:
+   - CDI 39h avec heures supp sur l'exercice precedent
+   - CDI 35h sans heures supp (report = 0)
+   - INTERIM (doit etre ignore, pas de ligne creee)
+4. Activer le cron de rollover
+5. Geler (`is_locked`) les exercices historicises valides
+
+Exemple cron (tous les jours a 02:15, juste apres le rollover conges):
+Dev
+```cron
+15 2 * * * cd /var/www/html && php bin/console app:rtt:rollover --no-interaction 2>&1
+```
+Prod
+```cron
+10 2 * * * cd /var/www/sirh && php bin/console app:rtt:rollover --no-interaction 2>&1
+```
+Explication de la ligne cron:
+- `15 2 * * *`: tous les jours a 02:15
+- `php bin/console app:rtt:rollover --no-interaction`: execute le rollover sans confirmation
+  - hors `01/06`, la commande sort en no-op (normal)
+- `>> var/log/rtt-rollover.log 2>&1`: log sortie standard et erreurs
+
+Execution manuelle forcee:
+```bash
+php bin/console app:rtt:rollover --force --no-interaction
+```
+
+Exemple de verification rapide:
+```bash
+tail -n 50 /var/www/html/var/log/rtt-rollover.log
+```
+
+## 9) Points de vigilance
+
+- Ne jamais modifier `opening_minutes` apres validation RH sans procedure explicite
+- Garder une trace de toute correction manuelle (auteur, date, motif)
+- Le calcul dynamique N-1 (fallback) parcourt toutes les heures de l'exercice precedent: preferer l'import explicite pour les exercices historiques
+- La commande de rollover est idempotente: si une ligne existe deja, l'employe est ignore (pas d'ecrasement)

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

@@ -9,6 +9,7 @@
                     id="employee"
                     v-model="absenceForm.employeeId"
                     :class="employeeFieldClass"
+                    :disabled="props.lockEmployee"
                 >
                     <option value="" disabled>Choisir un employé</option>
                     <option v-for="employee in employees" :key="employee.id" :value="employee.id">
@@ -39,28 +40,50 @@
                 </p>
             </div>
 
-            <div class="grid grid-cols-2 gap-4">
+            <div class="space-y-4">
                 <div>
-                    <label class="text-md font-semibold text-neutral-700" for="start-date">Date de début</label>
-                    <input
-                        id="start-date"
-                        v-model="absenceForm.startDate"
-                        type="date"
-                        class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
-                    />
+                    <label class="text-md font-semibold text-neutral-700" for="start-date">Début</label>
+                    <div class="mt-2 grid grid-cols-2 gap-2">
+                        <input
+                            id="start-date"
+                            v-model="absenceForm.startDate"
+                            type="date"
+                            class="w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
+                            :disabled="props.lockDates"
+                        />
+                        <select
+                            v-model="absenceForm.startHalf"
+                            class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+                        >
+                            <option v-for="half in HALF_DAYS" :key="half.value" :value="half.value">
+                                {{ half.label }}
+                            </option>
+                        </select>
+                    </div>
                 </div>
                 <div>
-                    <label class="text-md font-semibold text-neutral-700" for="end-date">Date de fin</label>
-                    <input
-                        id="end-date"
-                        v-model="absenceForm.endDate"
-                        type="date"
-                        class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
-                    />
+                    <label class="text-md font-semibold text-neutral-700" for="end-date">Fin</label>
+                    <div class="mt-2 grid grid-cols-2 gap-2">
+                        <input
+                            id="end-date"
+                            v-model="absenceForm.endDate"
+                            type="date"
+                            class="w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
+                            :disabled="props.lockDates"
+                        />
+                        <select
+                            v-model="absenceForm.endHalf"
+                            class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+                        >
+                            <option v-for="half in HALF_DAYS" :key="half.value" :value="half.value">
+                                {{ half.label }}
+                            </option>
+                        </select>
+                    </div>
                 </div>
             </div>
 
-            <div>
+            <div v-if="props.showComment !== false">
                 <label class="text-md font-semibold text-neutral-700" for="comment">Commentaire</label>
                 <textarea
                     id="comment"
@@ -70,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>
@@ -103,6 +127,8 @@ import { computed, reactive, toRef, watch } from 'vue'
 import type { Employee } from '~/services/dto/employee'
 import type { AbsenceType } from '~/services/dto/absence-type'
 import type { Absence } from '~/services/dto/absence'
+import type { HalfDay } from '~/services/dto/half-day'
+import { HALF_DAYS } from '~/services/dto/half-day'
 import AppDrawer from '~/components/AppDrawer.vue'
 
 const props = defineProps<{
@@ -113,11 +139,16 @@ const props = defineProps<{
         employeeId: number | ''
         typeId: number | ''
         startDate: string
+        startHalf: HalfDay
         endDate: string
+        endHalf: HalfDay
         comment: string
     }
     editingAbsence: Absence | null
     isSubmitting: boolean
+    lockEmployee?: boolean
+    lockDates?: boolean
+    showComment?: boolean
 }>()
 
 const emit = defineEmits<{

frontend/components/AbsencePrintDrawer.vue

@@ -54,17 +54,52 @@
                 </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="space-y-2">
+                <p class="text-md font-semibold text-neutral-700">
+                    Type de contrat <span class="text-red-600">*</span>
+                </p>
+                <div class="flex flex-wrap gap-4 rounded-md border border-neutral-300 px-3 py-2">
+                    <div v-for="nature in contractNatures" :key="nature.value" class="flex items-center gap-2">
+                        <label class="text-md" :for="`print-contract-nature-${nature.value}`">{{ nature.label }}</label>
+                        <input
+                            :id="`print-contract-nature-${nature.value}`"
+                            v-model="printForm.contractNatures"
+                            :value="nature.value"
+                            type="checkbox"
+                            class="h-4 w-4"
+                        />
+                    </div>
+                </div>
+                <p v-if="showContractNaturesError" class="text-sm text-red-600">
+                    Sélectionne au moins un type de contrat.
+                </p>
+            </div>
+
+            <div class="space-y-2">
+                <p class="text-md font-semibold text-neutral-700">
+                    Temps de travail <span class="text-red-600">*</span>
+                </p>
+                <div class="flex flex-wrap gap-4 rounded-md border border-neutral-300 px-3 py-2">
+                    <div v-for="workContract in workContracts" :key="workContract.id" class="flex items-center gap-2">
+                        <label class="text-md" :for="`print-work-contract-${workContract.id}`">{{ workContract.name }}</label>
+                        <input
+                            :id="`print-work-contract-${workContract.id}`"
+                            v-model="printForm.workContractIds"
+                            :value="workContract.id"
+                            type="checkbox"
+                            class="h-4 w-4"
+                        />
+                    </div>
+                </div>
+                <p v-if="showWorkContractsError" class="text-sm text-red-600">
+                    Sélectionne au moins un temps de travail.
+                </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"
                 >
                     Imprimer
@@ -84,13 +119,27 @@ type SiteOption = {
     color: string
 }
 
+type ContractNatureOption = {
+    value: 'CDI' | 'CDD' | 'INTERIM'
+    label: string
+}
+
+type WorkContractOption = {
+    id: number
+    name: string
+}
+
 const props = defineProps<{
     modelValue: boolean
     sites: SiteOption[]
+    contractNatures: ContractNatureOption[]
+    workContracts: WorkContractOption[]
     printForm: {
         from: string
         to: string
         siteIds: number[]
+        contractNatures: Array<'CDI' | 'CDD' | 'INTERIM'>
+        workContractIds: number[]
     }
 }>()
 
@@ -110,19 +159,36 @@ const printForm = toRef(props, 'printForm')
 const validationTouched = reactive({
     from: false,
     to: false,
-    sites: false
+    sites: false,
+    contractNatures: false,
+    workContracts: false
 })
 
 const isFromValid = computed(() => printForm.value.from.trim() !== '')
 const isToValid = computed(() => printForm.value.to.trim() !== '')
 const isSitesValid = computed(() => printForm.value.siteIds.length > 0)
+const isContractNaturesValid = computed(() => {
+    if (props.contractNatures.length === 0) return true
+    return printForm.value.contractNatures.length > 0
+})
+const isWorkContractsValid = computed(() => {
+    if (props.workContracts.length === 0) return true
+    return printForm.value.workContractIds.length > 0
+})
 const isFormValid = computed(
-    () => isFromValid.value && isToValid.value && isSitesValid.value
+    () =>
+        isFromValid.value &&
+        isToValid.value &&
+        isSitesValid.value &&
+        isContractNaturesValid.value &&
+        isWorkContractsValid.value
 )
 
 const showFromError = computed(() => validationTouched.from && !isFromValid.value)
 const showToError = computed(() => validationTouched.to && !isToValid.value)
 const showSitesError = computed(() => validationTouched.sites && !isSitesValid.value)
+const showContractNaturesError = computed(() => validationTouched.contractNatures && !isContractNaturesValid.value)
+const showWorkContractsError = computed(() => validationTouched.workContracts && !isWorkContractsValid.value)
 
 const baseInputClass =
     'mt-2 w-full rounded-md border px-3 py-2 text-md text-neutral-900'
@@ -150,6 +216,8 @@ const handleSubmit = () => {
     validationTouched.from = true
     validationTouched.to = true
     validationTouched.sites = true
+    validationTouched.contractNatures = true
+    validationTouched.workContracts = true
     if (!isFormValid.value) return
     emit('submit')
 }
@@ -166,6 +234,8 @@ watch(
             validationTouched.from = false
             validationTouched.to = false
             validationTouched.sites = false
+            validationTouched.contractNatures = false
+            validationTouched.workContracts = false
         }
     }
 )

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/AppTopNav.vue

@@ -0,0 +1,233 @@
+<template>
+    <header ref="headerRef" class="border-b border-neutral-200 bg-primary-500 p-5 text-white">
+        <div class="flex h-full items-center justify-end">
+            <div class="flex gap-6 text-xl text-white">
+                <div v-if="isAdmin" ref="bellRoot" class="relative">
+                    <button type="button" class="relative self-center cursor-pointer flex items-center" @click="toggleNotifications">
+                        <Icon name="mdi:bell-plus" size="36"/>
+                        <span
+                            v-if="unreadCount > 0"
+                            class="absolute -right-1 -top-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-red-500 px-1 text-xs font-bold text-white"
+                        >
+              {{ unreadCount }}
+            </span>
+                    </button>
+
+                    <div
+                        v-if="isNotificationsOpen"
+                        class="fixed right-[20px] z-30 w-[400px] rounded-md border border-neutral-200 bg-white text-neutral-800 shadow-lg"
+                        :style="{ top: `${navbarBottom + 20}px` }"
+                    >
+                        <div class="px-3 pt-3 pb-6 text-xl font-semibold">
+                            Notifications
+                        </div>
+                        <div class="flex gap-6 px-3 pb-2 border-b border-black">
+                            <button
+                                type="button"
+                                class="border-b-2 cursor-pointer text-[18px]"
+                                :class="activeNotifTab === 'unread' ? 'border-black font-semibold text-black' : 'border-transparent text-black hover:text-primary-500'"
+                                @click="switchNotifTab('unread')"
+                            >
+                                Non lues
+                            </button>
+                            <button
+                                type="button"
+                                class="border-b-2 cursor-pointer text-[18px]"
+                                :class="activeNotifTab === 'history' ? 'border-black font-semibold text-black' : 'border-transparent text-black hover:text-primary-500'"
+                                @click="switchNotifTab('history')"
+                            >
+                                Historique
+                            </button>
+                        </div>
+                        <div v-if="isLoadingNotifications" class="px-3 py-3 text-sm text-neutral-500">
+                            Chargement...
+                        </div>
+                        <div v-else-if="displayedNotifications.length === 0" class="px-3 py-3 text-sm text-neutral-500">
+                            Aucune notification.
+                        </div>
+                        <div v-else class="max-h-80 overflow-auto">
+                            <NuxtLink
+                                :to="notification.target"
+                                v-for="notification in displayedNotifications"
+                                :key="notification.id"
+                                class="flex gap-5 items-center border-b border-black px-3 py-4 last:border-b-0 relative hover:bg-tertiary-500"
+                                :class="notification.isRead ? '' : 'bg-tertiary-500'"
+                            >
+                                <div class="rounded-full h-[46px] w-[46px] min-w-[46px] bg-primary-500"></div>
+                                <div class="flex flex-col min-w-0 text-[16px]">
+                                    <p class="text-black"><span class="font-semibold capitalize">{{ notification.actorName }}</span> {{ notification.message }}</p>
+                                    <p class="text-black">{{ formatTimeAgo(notification.createdAt) }} - {{ notification.category }}</p>
+                                </div>
+                                <span v-if="!notification.isRead" class="absolute right-4 bg-primary-500 h-4 w-4 rounded-full"></span>
+                            </NuxtLink>
+                        </div>
+                    </div>
+                </div>
+                <div ref="userMenuRoot" class="relative flex gap-4">
+                    <button type="button" class="flex items-center gap-4 cursor-pointer" @click="toggleUserMenu">
+                        <Icon name="mdi:account-circle-outline" class="self-center" size="36"/>
+                        <p class="self-center">{{ user?.username }}</p>
+                    </button>
+                    <div
+                        v-if="isUserMenuOpen"
+                        class="fixed right-[20px] z-30 w-60 rounded-md border border-neutral-200 bg-white text-[16px] text-black font-semibold shadow-lg"
+                        :style="{ top: `${navbarBottom + 20}px` }"
+                    >
+                        <button
+                            type="button"
+                            class="block w-full px-3 py-4 text-left hover:bg-tertiary-500 border-b border-black"
+                        >
+                            Mon profil
+                        </button>
+                        <button
+                            type="button"
+                            class="block w-full px-3 py-4 text-left hover:bg-tertiary-500 flex justify-between items-center"
+                            @click="handleLogout"
+                        >
+                            <p>Déconnexion</p>
+                            <Icon name="mdi:logout-variant" size="20"/>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+</template>
+
+<script setup lang="ts">
+import type {User} from '~/services/dto/user'
+import type {NotificationItem} from '~/services/dto/notification'
+import {listUnreadNotifications, listTodayNotifications, listHistoryNotifications, markAllNotificationsRead} from '~/services/notifications'
+
+defineProps<{
+    user?: User
+}>()
+
+const formatTimeAgo = (dateString: string): string => {
+    const date = new Date(dateString)
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffMinutes = Math.floor(diffMs / 60000)
+    if (diffMinutes < 1) return "À l'instant"
+    if (diffMinutes < 60) return `${diffMinutes} minute${diffMinutes > 1 ? 's' : ''}`
+    const diffHours = Math.floor(diffMinutes / 60)
+    if (diffHours < 24) return `${diffHours} heure${diffHours > 1 ? 's' : ''}`
+    const diffDays = Math.floor(diffHours / 24)
+    return `${diffDays} jour${diffDays > 1 ? 's' : ''}`
+}
+
+const auth = useAuthStore()
+const route = useRoute()
+const headerRef = ref<HTMLElement | null>(null)
+const bellRoot = ref<HTMLElement | null>(null)
+const userMenuRoot = ref<HTMLElement | null>(null)
+const isUserMenuOpen = ref(false)
+const navbarBottom = ref(0)
+
+const updateNavbarBottom = () => {
+    if (headerRef.value) {
+        navbarBottom.value = headerRef.value.getBoundingClientRect().bottom
+    }
+}
+const todayNotifications = ref<NotificationItem[]>([])
+const historyNotifications = ref<NotificationItem[]>([])
+const isNotificationsOpen = ref(false)
+const isLoadingNotifications = ref(false)
+const activeNotifTab = ref<'unread' | 'history'>('unread')
+const unreadCount = computed(() => todayNotifications.value.length)
+const displayedNotifications = computed(() => activeNotifTab.value === 'unread' ? todayNotifications.value : historyNotifications.value)
+const isAdmin = computed(() => auth.user?.roles?.includes('ROLE_ADMIN') ?? false)
+
+const toggleUserMenu = () => {
+    updateNavbarBottom()
+    isUserMenuOpen.value = !isUserMenuOpen.value
+}
+
+const handleLogout = async () => {
+    await auth.logout()
+    await navigateTo('/login')
+}
+
+const loadTodayNotifications = async () => {
+    todayNotifications.value = await listTodayNotifications()
+}
+
+const loadHistoryNotifications = async () => {
+    historyNotifications.value = await listHistoryNotifications()
+}
+
+const loadNotifications = async () => {
+    isLoadingNotifications.value = true
+    try {
+        await loadTodayNotifications()
+    } finally {
+        isLoadingNotifications.value = false
+    }
+}
+
+const switchNotifTab = async (tab: 'unread' | 'history') => {
+    activeNotifTab.value = tab
+    isLoadingNotifications.value = true
+    try {
+        if (tab === 'history') {
+            await loadHistoryNotifications()
+        } else {
+            await loadTodayNotifications()
+        }
+    } finally {
+        isLoadingNotifications.value = false
+    }
+}
+
+const closeNotifications = async () => {
+    if (!isNotificationsOpen.value) return
+    isNotificationsOpen.value = false
+    if (todayNotifications.value.length > 0) {
+        await markAllNotificationsRead()
+        todayNotifications.value = []
+    }
+}
+
+const toggleNotifications = async () => {
+    if (isNotificationsOpen.value) {
+        await closeNotifications()
+        return
+    }
+
+    updateNavbarBottom()
+    activeNotifTab.value = 'unread'
+    isNotificationsOpen.value = true
+    await loadNotifications()
+}
+
+const handleClickOutside = async (event: MouseEvent) => {
+    const target = event.target as Node | null
+    if (!target) return
+    if (bellRoot.value && !bellRoot.value.contains(target)) {
+        await closeNotifications()
+    }
+    if (userMenuRoot.value && !userMenuRoot.value.contains(target)) {
+        isUserMenuOpen.value = false
+    }
+}
+
+onMounted(async () => {
+    updateNavbarBottom()
+    if (isAdmin.value) {
+        await loadNotifications()
+    }
+    document.addEventListener('click', handleClickOutside)
+})
+
+watch(
+    () => route.fullPath,
+    async () => {
+        if (!isAdmin.value) return
+        await loadNotifications()
+    }
+)
+
+onBeforeUnmount(() => {
+    document.removeEventListener('click', handleClickOutside)
+})
+</script>

frontend/components/CalendarGrid.vue

@@ -1,45 +1,86 @@
 <template>
-    <div class="max-h-[80vh] overflow-auto rounded-lg border border-neutral-200 bg-white">
+    <div class="h-full min-h-0 overflow-auto rounded-lg border border-neutral-200 bg-white">
         <div class="min-w-[900px]">
-            <div class="grid" :style="gridStyle">
+            <div class="grid" :style="gridStyle" @mouseleave="clearHoveredCell">
                 <div
-                    class="sticky left-0 z-20 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-md font-semibold text-neutral-700"
+                    class="sticky left-0 top-0 z-30 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-md font-semibold text-neutral-700"
                 >
                     Employés
                 </div>
                 <div
                     v-for="day in daysInMonth"
                     :key="day.date"
-                    class="border-b border-neutral-200 bg-tertiary-500 px-2 py-3 text-center text-xs font-semibold text-neutral-700"
+                    class="sticky top-0 z-20 border-b border-neutral-200 px-2 py-3 text-center text-xs font-semibold transition-colors"
+                    :class="isHoveredColumn(day.date) || day.date === today ? 'bg-primary-500 text-white' : 'bg-tertiary-500 text-neutral-700'"
                 >
                     <div>{{ day.label }}</div>
-                    <div class="text-[10px] text-neutral-500">{{ day.weekday }}</div>
+                    <div
+                        class="text-[10px]"
+                        :class="isHoveredColumn(day.date) || day.date === today ? 'text-white/90' : 'text-neutral-500'"
+                    >
+                        {{ day.weekday }}
+                    </div>
                 </div>
 
                 <template v-for="employee in visibleEmployees" :key="employee.id">
                     <div
-                        class="sticky left-0 z-10 border-b border-neutral-100 px-4 py-3 text-md font-semibold text-black"
-                        :style="{ backgroundColor: employee.site?.color ?? '#304998' }"
+                        class="sticky left-0 z-10 border-b border-neutral-100 px-4 py-3 text-md font-semibold text-black cursor-pointer transition-shadow"
+                        :class="isHoveredRow(employee.id) ? 'bg-primary-500 text-white ring-2 ring-inset ring-primary-500/40' : ''"
+                        :style="rowHeaderStyle(employee)"
+                        draggable="true"
+                        @dragstart="handleDragStart($event, employee)"
+                        @dragover="handleDragOver"
+                        @drop="handleDrop($event, employee)"
                     >
                         {{ formatEmployeeName(employee) }}
                     </div>
                     <div
                         v-for="day in daysInMonth"
                         :key="employee.id + '-' + day.date"
-                        class="border-b border-neutral-100 px-2 py-2 text-center text-xs text-neutral-800"
+                        class="border-b border-neutral-300 px-2 py-2 text-center text-xs text-neutral-800 transition-colors"
+                        :class="cellContainerClass(employee.id, day.date)"
+                        @mouseenter="setHoveredCell(employee.id, day.date)"
                     >
-                        <button
-                            type="button"
-                            class="flex h-8 w-full items-center justify-center rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800 hover:border-primary-500/40"
-                            :class="isHolidayDate(day.date) ? 'cursor-not-allowed opacity-80' : ''"
-                            :style="getCellStyle(employee.id, day.date)"
-                            :disabled="isHolidayDate(day.date)"
-                            @click="handleCellClick(employee, day.date)"
-                        >
-                            <span v-if="getCellCode(employee.id, day.date)">
-                                {{ getCellCode(employee.id, day.date) }}
-                            </span>
-                        </button>
+                        <template v-if="getCellInfo(employee.id, day.date)">
+                            <button
+                                type="button"
+                                class="relative flex h-8 w-full items-center justify-center overflow-hidden rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800"
+                                :class="isHolidayDate(day.date) ? 'cursor-not-allowed opacity-80' : ''"
+                                :style="getCellStyle(employee.id, day.date)"
+                                :disabled="isHolidayDate(day.date)"
+                                @click="handleCellClick(employee, day.date)"
+                            >
+                                <span v-if="!getCellInfo(employee.id, day.date)?.halfLabel">
+                                    {{ getCellInfo(employee.id, day.date)?.code }}
+                                </span>
+                                <template v-else>
+                                    <span
+                                        v-if="getCellInfo(employee.id, day.date)?.halfLabel === 'AM'"
+                                        class="absolute top-0 left-0 flex h-1/2 w-full items-center justify-center text-[10px] font-semibold"
+                                    >
+                                        {{ getCellInfo(employee.id, day.date)?.code }}
+                                    </span>
+                                    <span
+                                        v-else
+                                        class="absolute bottom-0 left-0 flex h-1/2 w-full items-center justify-center text-[10px] font-semibold"
+                                    >
+                                        {{ getCellInfo(employee.id, day.date)?.code }}
+                                    </span>
+                                </template>
+                            </button>
+                        </template>
+                        <template v-else>
+                            <button
+                                type="button"
+                                class="relative flex h-8 w-full items-center justify-center rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800 bg-white"
+                                :class="isHolidayDate(day.date) ? 'cursor-not-allowed opacity-80' : ''"
+                                :style="getCellStyle(employee.id, day.date)"
+                                :disabled="isHolidayDate(day.date)"
+                                @click="handleCellClick(employee, day.date)"
+                            >
+                                <span></span>
+                            </button>
+                        </template>
                     </div>
                 </template>
             </div>
@@ -49,6 +90,11 @@
 
 <script setup lang="ts">
 import type { Employee } from '~/services/dto/employee'
+import type { HalfDay } from '~/services/dto/half-day'
+import { toYmd } from '~/utils/date'
+
+const now = new Date()
+const today = toYmd(now.getFullYear(), now.getMonth(), now.getDate())
 
 type DayInfo = {
     date: string
@@ -56,21 +102,91 @@ type DayInfo = {
     weekday: string
 }
 
-defineProps<{
+const props = defineProps<{
     daysInMonth: DayInfo[]
     visibleEmployees: Employee[]
     gridStyle: Record<string, string>
     getCellStyle: (employeeId: number, date: string) => Record<string, string> | undefined
-    getCellCode: (employeeId: number, date: string) => string
+    getCellInfo: (employeeId: number, date: string) => { id: number; code: string; color: string; halfLabel?: HalfDay; textColor?: string } | null
     formatEmployeeName: (employee: Employee) => string
     isHolidayDate: (date: string) => boolean
 }>()
 
 const emit = defineEmits<{
     (event: 'cell-click', employee: Employee, date: string): void
+    (event: 'reorder', payload: { dragId: number; dropId: number }): void
 }>()
 
 const handleCellClick = (employee: Employee, date: string) => {
     emit('cell-click', employee, date)
 }
+
+const handleDragStart = (event: DragEvent, employee: Employee) => {
+    if (!event.dataTransfer) return
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('text/plain', String(employee.id))
+}
+
+const handleDragOver = (event: DragEvent) => {
+    event.preventDefault()
+}
+
+const handleDrop = (event: DragEvent, employee: Employee) => {
+    event.preventDefault()
+    const dragId = Number(event.dataTransfer?.getData('text/plain'))
+    if (!dragId || dragId === employee.id) return
+    emit('reorder', { dragId, dropId: employee.id })
+}
+
+// Etat de la cellule actuellement survolee.
+const hoveredEmployeeId = ref<number | null>(null)
+const hoveredDate = ref<string | null>(null)
+
+const setHoveredCell = (employeeId: number, date: string) => {
+    hoveredEmployeeId.value = employeeId
+    hoveredDate.value = date
+}
+
+const clearHoveredCell = () => {
+    hoveredEmployeeId.value = null
+    hoveredDate.value = null
+}
+
+const isHoveredRow = (employeeId: number) => hoveredEmployeeId.value === employeeId
+
+const isHoveredColumn = (date: string) => hoveredDate.value === date
+
+// On garde la couleur du site tant que la ligne n'est pas survolee.
+const rowHeaderStyle = (employee: Employee) => {
+    if (isHoveredRow(employee.id)) return undefined
+    return { backgroundColor: employee.site?.color ?? '#304998' }
+}
+
+// Index de ligne par employe pour savoir si une case est "au-dessus" de la case survolee.
+const employeeIndexById = computed(() => {
+    const indexMap = new Map<number, number>()
+    props.visibleEmployees.forEach((employee, index) => {
+        indexMap.set(employee.id, index)
+    })
+    return indexMap
+})
+
+const cellContainerClass = (employeeId: number, date: string) => {
+    if (!hoveredEmployeeId.value || !hoveredDate.value) return 'hover:bg-primary-500'
+
+    const hoveredRowIndex = employeeIndexById.value.get(hoveredEmployeeId.value)
+    const currentRowIndex = employeeIndexById.value.get(employeeId)
+
+    // Forme en L:
+    // - ligne: toutes les cases a gauche (et la case cible)
+    // - colonne: toutes les cases au-dessus (et la case cible)
+    const isOnLeftSegment = isHoveredRow(employeeId) && date <= hoveredDate.value
+    const isOnTopSegment = isHoveredColumn(date)
+        && typeof hoveredRowIndex === 'number'
+        && typeof currentRowIndex === 'number'
+        && currentRowIndex <= hoveredRowIndex
+
+    if (isOnLeftSegment || isOnTopSegment) return 'bg-primary-500'
+    return 'hover:bg-primary-500'
+}
 </script>

frontend/components/EmployeeNameFilterInput.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="relative w-full max-w-[340px]">
+        <input
+            id="employee-search"
+            v-model="model"
+            type="text"
+            :placeholder="placeholder"
+            class="h-10 w-full rounded-md border border-neutral-300 bg-white pl-3 pr-10 text-md text-neutral-900"
+        />
+        <Icon
+            name="mdi:magnify"
+            size="18"
+            class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+const model = defineModel<string>({required: true})
+
+withDefaults(defineProps<{
+    placeholder?: string
+}>(), {
+    placeholder: "Recherche d'un employé"
+})
+</script>

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/PeriodStepperPicker.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="relative inline-flex h-10 items-center overflow-hidden rounded-md border border-primary-500 bg-white" :class="widthClass">
+    <input
+      ref="nativeInput"
+      :value="pickerValue"
+      :type="pickerType"
+      class="pointer-events-none absolute inset-0 h-full w-full opacity-0"
+      tabindex="-1"
+      aria-hidden="true"
+      @input="onPickerInput"
+      @change="onPickerInput"
+    />
+    <button
+      type="button"
+      class="h-10 px-3 text-lg font-semibold text-primary-500 hover:bg-tertiary-500 active:bg-tertiary-500 active:scale-[0.96]"
+      :aria-label="prevAriaLabel"
+      @click="emit('prev')"
+    >
+      ‹
+    </button>
+    <button
+      type="button"
+      class="h-10 flex-1 border-x border-primary-500 px-4 text-sm font-semibold text-primary-500 text-center hover:bg-tertiary-500 active:bg-tertiary-500"
+      @click="openPicker"
+    >
+      {{ label }}
+    </button>
+    <button
+      type="button"
+      class="h-10 px-3 text-lg font-semibold text-primary-500 hover:bg-tertiary-500 active:bg-tertiary-500 active:scale-[0.96]"
+      :aria-label="nextAriaLabel"
+      @click="emit('next')"
+    >
+      ›
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  label: string
+  pickerType: 'date' | 'week' | 'month'
+  pickerValue: string
+  widthClass?: string
+  prevAriaLabel?: string
+  nextAriaLabel?: string
+}>(), {
+  widthClass: 'w-[320px]',
+  prevAriaLabel: 'Précédent',
+  nextAriaLabel: 'Suivant'
+})
+
+const emit = defineEmits<{
+  (e: 'prev'): void
+  (e: 'next'): void
+  (e: 'pick', value: string): void
+}>()
+
+const nativeInput = ref<HTMLInputElement | null>(null)
+
+const openPicker = () => {
+  const input = nativeInput.value
+  if (!input) return
+  if (typeof input.showPicker === 'function') {
+    input.showPicker()
+    return
+  }
+  input.focus()
+  input.click()
+}
+
+const onPickerInput = (event: Event) => {
+  const value = (event.target as HTMLInputElement).value
+  if (!value) return
+  emit('pick', value)
+}
+</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

@@ -0,0 +1,69 @@
+<template>
+  <div ref="root" class="relative inline-block w-fit max-w-full">
+    <button
+      type="button"
+      class="inline-flex w-[320px] min-h-10 items-center justify-between gap-2 rounded-md border border-primary-500 bg-white px-3 py-2 text-md font-semibold text-primary-500 hover:bg-tertiary-500"
+      @click="isOpen = !isOpen"
+    >
+      <span>Sites</span>
+      <span class="inline-flex items-center gap-2">
+        <span class="text-sm font-medium text-neutral-600">{{ selectedCount }}/{{ sites.length }}</span>
+        <Icon :name="isOpen ? 'mdi:chevron-up' : 'mdi:chevron-down'" size="18" />
+      </span>
+    </button>
+
+    <div
+      v-if="isOpen"
+      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
+          v-for="site in sites"
+          :key="site.id"
+          :for="`site-${site.id}`"
+          class="flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-tertiary-500"
+        >
+          <input
+            :id="`site-${site.id}`"
+            v-model="selectedSiteIds"
+            :value="site.id"
+            type="checkbox"
+            class="h-4 w-4"
+          />
+          <span class="text-md text-neutral-800">{{ site.name }}</span>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import type { Site } from '~/services/dto/site'
+
+const selectedSiteIds = defineModel<number[]>({ required: true })
+const isOpen = ref(false)
+const root = ref<HTMLElement | null>(null)
+
+defineProps<{
+  sites: Site[]
+}>()
+
+const selectedCount = computed(() => selectedSiteIds.value.length)
+
+const handleClickOutside = (event: MouseEvent) => {
+  const target = event.target as Node | null
+  if (!root.value || !target) return
+  if (!root.value.contains(target)) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>

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

@@ -0,0 +1,343 @@
+<template>
+  <section class="mt-8">
+    <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>
+        <p>Date de fin</p>
+      </div>
+      <div v-if="contractHistory.length === 0" class="px-6 py-4 text-md text-neutral-600">
+        Aucun historique de contrat.
+      </div>
+      <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-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>
+          <p>{{ formatDate(item.startDate) }}</p>
+          <p>{{ formatDate(item.endDate) }}</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-8 flex justify-center gap-12">
+      <button
+        type="button"
+        class="w-[200px] rounded-md bg-blue-500 py-2 text-white disabled:cursor-not-allowed disabled:opacity-50"
+        :disabled="isContractSubmitting || !canCloseCurrentContract"
+        @click="onOpenCloseContractDrawer"
+      >
+        Modifier
+      </button>
+      <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"
+        :disabled="isCreateContractSubmitting || contracts.length === 0 || !canCreateContract"
+        @click="onOpenCreateContractDrawer"
+      >
+        + Ajouter
+      </button>
+    </div>
+
+    <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">
+            Type de contrat
+          </label>
+          <input id="contract-nature" :value="contractNatureLabel(contractForm.contractNature)" type="text" :class="readonlyFieldClass" readonly />
+        </div>
+
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="contract">
+            Temps de travail
+          </label>
+          <input id="contract" :value="closeContractWorkedHoursLabel" type="text" :class="readonlyFieldClass" readonly />
+        </div>
+
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="contract-start-date">
+            Début contrat
+          </label>
+          <input
+            id="contract-start-date"
+            :value="contractForm.startDate"
+            type="date"
+            :class="readonlyFieldClass"
+            readonly
+          />
+        </div>
+
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="contract-end-date">
+            Fin contrat <span class="text-red-600">*</span>
+          </label>
+          <input
+            id="contract-end-date"
+            v-model="contractForm.endDate"
+            type="date"
+            :class="contractEndDateFieldClass"
+          />
+          <p v-if="showContractEndDateError" class="mt-1 text-sm text-red-600">La date de fin est obligatoire.</p>
+        </div>
+
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="contract-comment">
+            Commentaire
+          </label>
+          <textarea
+            id="contract-comment"
+            v-model="contractForm.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="Motif de la clôture..."
+          />
+        </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="contract-paid-leave-settled">
+            <input
+              id="contract-paid-leave-settled"
+              v-model="contractForm.paidLeaveSettled"
+              type="checkbox"
+              class="h-4 w-4 rounded border-neutral-300 text-primary-500 focus:ring-primary-500"
+            />
+            Soldé dans le solde de tout compte
+          </label>
+        </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 disabled:cursor-not-allowed disabled:opacity-50"
+            :disabled="isContractSubmitting || !isContractEndDateValid"
+          >
+            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">
+      <form class="space-y-4" @submit.prevent="onSubmitCreateContract">
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="create-contract-nature">
+            Type de contrat <span class="text-red-600">*</span>
+          </label>
+          <select id="create-contract-nature" v-model="createContractForm.contractNature" :class="createContractNatureFieldClass">
+            <option value="CDI">CDI</option>
+            <option value="CDD">CDD</option>
+            <option value="INTERIM">Intérim</option>
+          </select>
+        </div>
+
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="create-contract-id">
+            Temps de travail <span class="text-red-600">*</span>
+          </label>
+          <select id="create-contract-id" v-model="createContractForm.contractId" :class="createContractFieldClass">
+            <option value="">Sélectionner un contrat</option>
+            <option v-for="contract in contracts" :key="contract.id" :value="contract.id">
+              {{ contract.name }}
+            </option>
+          </select>
+        </div>
+
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="create-contract-start-date">
+            Début contrat <span class="text-red-600">*</span>
+          </label>
+          <input id="create-contract-start-date" v-model="createContractForm.startDate" type="date" :class="createContractStartDateFieldClass" />
+        </div>
+
+        <div v-if="showsCreateContractEndDate">
+          <label class="text-md font-semibold text-neutral-700" for="create-contract-end-date">
+            Fin contrat <span v-if="requiresCreateContractEndDate" class="text-red-600">*</span>
+          </label>
+          <input id="create-contract-end-date" v-model="createContractForm.endDate" type="date" :class="createContractEndDateFieldClass" />
+        </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="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="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"
+          >
+            + Ajouter
+          </button>
+        </div>
+      </form>
+    </AppDrawer>
+  </section>
+</template>
+
+<script setup lang="ts">
+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
+  weeklyHours: number | null
+  contractNature: 'CDI' | 'CDD' | 'INTERIM'
+  startDate: string
+  endDate: string
+  paidLeaveSettled: boolean
+  comment: string
+}
+
+type CreateContractForm = {
+  contractId: number | ''
+  contractNature: 'CDI' | 'CDD' | 'INTERIM'
+  startDate: string
+  endDate: string
+  isDriver: boolean
+}
+
+const props = defineProps<{
+  contractHistory: ContractHistoryItem[]
+  contractNatureLabel: (value?: 'CDI' | 'CDD' | 'INTERIM') => string
+  contractHistoryLabel: (item: ContractHistoryItem) => string
+  formatDate: (value?: string | null) => string
+  isContractSubmitting: boolean
+  canCloseCurrentContract: boolean
+  isCreateContractSubmitting: boolean
+  contracts: Contract[]
+  canCreateContract: boolean
+  isContractDrawerOpen: boolean
+  contractForm: ContractForm
+  readonlyFieldClass: string
+  closeContractWorkedHoursLabel: string
+  contractEndDateFieldClass: string
+  showContractEndDateError: boolean
+  isContractEndDateValid: boolean
+  isCreateContractDrawerOpen: boolean
+  createContractForm: CreateContractForm
+  createContractNatureFieldClass: string
+  createContractFieldClass: string
+  createContractStartDateFieldClass: string
+  showsCreateContractEndDate: boolean
+  requiresCreateContractEndDate: boolean
+  createContractEndDateFieldClass: string
+  isCreateContractFormValid: boolean
+  onOpenCloseContractDrawer: () => void
+  onOpenCreateContractDrawer: () => void
+  onUpdateContractDrawerOpen: (open: boolean) => void
+  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

@@ -0,0 +1,339 @@
+<template>
+    <section class="flex h-full min-h-0 flex-col overflow-hidden pt-8">
+        <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 items-center"
+                    @click="openFractionedDrawer"
+                >
+                    <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 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>
+                    <div class="grid grid-cols-7 gap-1 px-2 py-2 text-center text-md font-bold">
+                        <p v-for="weekday in weekDayLabels" :key="weekday">{{ weekday }}</p>
+                    </div>
+                    <div class="grid grid-cols-7 gap-4 px-2 pb-2 text-center text-md">
+                        <template v-for="(day, index) in month.cells" :key="`${month.label}-${index}`">
+                            <div v-if="!day" class="h-6"/>
+                            <div
+                                v-else
+                                class="flex items-center justify-center"
+                            >
+                                <div
+                                    class="h-6 w-6"
+                                    :class="getDayClass(day)"
+                                    :style="getDayStyle(day)"
+                                    :title="getDayTitle(day)"
+                                >
+                                    {{ getDayText(day) }}
+                                </div>
+                            </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>
+        <AppDrawer v-model="isFractionedDrawerOpen" title="Jours fractionnés">
+            <form class="space-y-4" @submit.prevent="handleSubmitFractioned">
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="fractioned-days">
+                        Nombre de jours <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="fractioned-days"
+                        v-model="fractionedForm.days"
+                        type="number"
+                        step="0.5"
+                        min="0"
+                        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 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="isFractionedDrawerOpen = false"
+                    >
+                        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"
+                    >
+                        Enregistrer
+                    </button>
+                </div>
+            </form>
+        </AppDrawer>
+    </section>
+</template>
+
+<script setup lang="ts">
+import type {Absence} from '~/services/dto/absence'
+import type {EmployeeLeaveSummary} from '~/services/dto/employee-leave-summary'
+import {normalizeDate, toYmd} from '~/utils/date'
+import AppDrawer from '~/components/AppDrawer.vue'
+
+type DayLeaveState = {
+    am: boolean
+    pm: boolean
+    labels: string[]
+    colors: string[]
+}
+
+const props = defineProps<{
+    absences: Absence[]
+    summary: EmployeeLeaveSummary | null
+    publicHolidays: Record<string, string>
+}>()
+
+const emit = defineEmits<{
+    (event: 'update-fractioned-days', days: number): void
+}>()
+
+const isFractionedDrawerOpen = ref(false)
+const fractionedForm = reactive({days: 0})
+
+const openFractionedDrawer = () => {
+    fractionedForm.days = props.summary?.fractionedDays ?? 0
+    isFractionedDrawerOpen.value = true
+}
+
+const handleSubmitFractioned = () => {
+    const value = Number(fractionedForm.days)
+    if (Number.isNaN(value) || value < 0) return
+    emit('update-fractioned-days', value)
+    isFractionedDrawerOpen.value = false
+}
+
+const monthLabels = [
+    'Janvier',
+    'Fevrier',
+    'Mars',
+    'Avril',
+    'Mai',
+    'Juin',
+    'Juillet',
+    'Aout',
+    'Septembre',
+    'Octobre',
+    'Novembre',
+    'Decembre'
+] as const
+
+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()
+    const year = today.getFullYear()
+    const month = today.getMonth() + 1
+    return month >= 6 ? year + 1 : year
+})
+
+const orderedMonthIndexes = computed(() => {
+    if (isForfaitRule.value) return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
+    return [5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4]
+})
+
+const buildDateFromYmd = (value: string) => new Date(`${value}T00:00:00`)
+
+const dayLeaveMap = computed(() => {
+    const map = new Map<string, DayLeaveState>()
+
+    for (const absence of props.absences) {
+        const startYmd = normalizeDate(absence.startDate)
+        const endYmd = normalizeDate(absence.endDate)
+        const start = buildDateFromYmd(startYmd)
+        const end = buildDateFromYmd(endYmd)
+        if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) continue
+
+        for (const cursor = new Date(start); cursor <= end; cursor.setDate(cursor.getDate() + 1)) {
+            const ymd = toYmd(cursor.getFullYear(), cursor.getMonth(), cursor.getDate())
+            const existing = map.get(ymd) ?? {
+                am: false,
+                pm: false,
+                labels: [] as string[],
+                colors: [] as string[]
+            }
+
+            const isStart = ymd === startYmd
+            const isEnd = ymd === endYmd
+            const isSingleDay = startYmd === endYmd
+
+            let am = false
+            let pm = false
+
+            if (isSingleDay) {
+                am = absence.startHalf === 'AM'
+                pm = absence.endHalf === 'PM'
+            } else if (isStart) {
+                am = absence.startHalf === 'AM'
+                pm = true
+            } else if (isEnd) {
+                am = true
+                pm = absence.endHalf === 'PM'
+            } else {
+                am = true
+                pm = true
+            }
+
+            const typeLabel = absence.type?.label ?? absence.type?.code ?? 'Absence'
+            const typeColor = absence.type?.color ?? '#222783'
+            const halfSuffix = am && !pm ? ' (Matin)' : (!am && pm ? ' (Apres-midi)' : '')
+            const hoverLabel = `${typeLabel}${halfSuffix}`
+
+            const colors = existing.colors.includes(typeColor)
+                ? existing.colors
+                : [...existing.colors, typeColor]
+
+            map.set(ymd, {
+                am: existing.am || am,
+                pm: existing.pm || pm,
+                labels: existing.labels.includes(hoverLabel)
+                    ? existing.labels
+                    : [...existing.labels, hoverLabel],
+                colors
+            })
+        }
+    }
+
+    return map
+})
+
+const months = computed(() => {
+    return orderedMonthIndexes.value.map((monthIndex) => {
+        const label = monthLabels[monthIndex]
+        const monthYear = isForfaitRule.value
+            ? displayedYear.value
+            : (monthIndex >= 5 ? displayedYear.value - 1 : displayedYear.value)
+
+        const first = new Date(monthYear, monthIndex, 1)
+        const daysInMonth = new Date(monthYear, monthIndex + 1, 0).getDate()
+        const mondayBasedFirstDay = (first.getDay() + 6) % 7
+
+        const cells: Array<{ ymd: string; label: string; leave: DayLeaveState | null; isHoliday: boolean } | null> = []
+
+        for (let i = 0; i < mondayBasedFirstDay; i += 1) {
+            cells.push(null)
+        }
+
+        for (let day = 1; day <= daysInMonth; day += 1) {
+            const ymd = toYmd(monthYear, monthIndex, day)
+            cells.push({
+                ymd,
+                label: String(day),
+                leave: dayLeaveMap.value.get(ymd) ?? null,
+                isHoliday: ymd in props.publicHolidays
+            })
+        }
+
+        while (cells.length % 7 !== 0) {
+            cells.push(null)
+        }
+
+        const monthKey = `${monthYear}-${String(monthIndex + 1).padStart(2, '0')}`
+
+        return {
+            label,
+            cells,
+            monthKey
+        }
+    })
+})
+
+const getDayClass = (day: { leave: DayLeaveState | null; isHoliday: boolean }) => {
+    if (day.leave) {
+        return 'rounded font-semibold text-white'
+    }
+    if (day.isHoliday) return 'text-primary-500 rounded font-semibold'
+    return 'text-primary-500'
+}
+
+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}
+        }
+        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'}
+    }
+    if (day.isHoliday) return {backgroundColor: 'rgb(179, 229, 252)'}
+    return undefined
+}
+
+const getDayText = (day: { label: string; leave: DayLeaveState | null }) => {
+    return day.label
+}
+
+const getDayTitle = (day: { leave: DayLeaveState | null; isHoliday: boolean; ymd: string }) => {
+    if (day.leave && day.leave.labels.length > 0) return day.leave.labels.join(' / ')
+    if (day.isHoliday) return props.publicHolidays[day.ymd] ?? 'Jour férié'
+    return ''
+}
+
+const formatCount = (value: number | null | undefined) => {
+    if (value === null || value === undefined) return '-'
+    const rounded = Math.round(value * 100) / 100
+    if (Number.isInteger(rounded)) return String(rounded)
+    return rounded.toFixed(2).replace('.', ',')
+}
+</script>

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

@@ -0,0 +1,536 @@
+<template>
+  <section class="flex h-full min-h-0 flex-col overflow-hidden pt-8">
+    <!-- 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--"
+        >
+          <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>
+
+    <!-- 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"
+            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">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">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>
+        </div>
+      </form>
+    </AppDrawer>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { EmployeeRttSummary, EmployeeRttWeekSummary } from '~/services/dto/employee-rtt-summary'
+import AppDrawer from '~/components/AppDrawer.vue'
+
+const props = defineProps<{
+  summary: EmployeeRttSummary | null
+}>()
+
+const emit = defineEmits<{
+  (event: 'submit-rtt-payment', month: number, base25Minutes: number, bonus25Minutes: number, base50Minutes: number, bonus50Minutes: number): void
+}>()
+
+// --- Last complete week number ---
+
+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' },
+  { value: 7, label: 'Juillet' },
+  { value: 8, label: 'Aout' },
+  { value: 9, label: 'Septembre' },
+  { value: 10, label: 'Octobre' },
+  { value: 11, label: 'Novembre' },
+  { value: 12, label: 'Decembre' },
+  { value: 1, label: 'Janvier' },
+  { value: 2, label: 'Fevrier' },
+  { value: 3, label: 'Mars' },
+  { value: 4, label: 'Avril' },
+  { value: 5, label: 'Mai' },
+]
+
+// 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
+})
+
+// --- Weeks for current month ---
+
+const weeksForCurrentMonth = computed((): EmployeeRttWeekSummary[] => {
+  if (!props.summary) return []
+  return props.summary.weeks.filter((w) => w.month === currentMonth.value)
+})
+
+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
+  if (rest === 0) return `${sign}${hours} h`
+  return `${sign}${hours} h ${rest} m`
+}
+
+const formatCentiemes = (minutes: number): string => {
+  const value = minutes / 60
+  return value.toFixed(2).replace('.', ',')
+}
+
+// --- 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 = () => {
+  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

@@ -0,0 +1,269 @@
+<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">Début matin</span>
+                <span class="pr-2">Fin matin</span>
+                <span class="pl-2">Début après-midi</span>
+                <span class="pr-2">Fin après-midi</span>
+                <span class="pl-2">Début soir</span>
+                <span class="pr-2">Fin soir</span>
+                <span class="pl-2">Jour</span>
+                <span>Nuit</span>
+                <span>Total</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-if="isTimeTracking(employee)"
+                        v-model="rows[employee.id].morningFrom"
+                        :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'AM'))"
+                    />
+                    <input
+                        v-else-if="isPresenceTracking(employee)"
+                        v-model="rows[employee.id].isPresentMorning"
+                        type="checkbox"
+                        class="cursor-pointer h-4 w-4"
+                        :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'AM'))"
+                    />
+                </div>
+                <div class="pr-2">
+                    <TimeSelect
+                        v-if="isTimeTracking(employee)"
+                        v-model="rows[employee.id].morningTo"
+                        :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'AM'))"
+                    />
+                </div>
+                <div class="pl-2">
+                    <TimeSelect
+                        v-if="isTimeTracking(employee)"
+                        v-model="rows[employee.id].afternoonFrom"
+                        :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'PM'))"
+                    />
+                    <input
+                        v-else-if="isPresenceTracking(employee)"
+                        v-model="rows[employee.id].isPresentAfternoon"
+                        type="checkbox"
+                        class="cursor-pointer h-4 w-4"
+                        :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'PM'))"
+                    />
+                </div>
+                <div class="pr-2">
+                    <TimeSelect
+                        v-if="isTimeTracking(employee)"
+                        v-model="rows[employee.id].afternoonTo"
+                        :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'PM'))"
+                    />
+                </div>
+                <div class="pl-2">
+                    <TimeSelect
+                        v-if="isTimeTracking(employee)"
+                        v-model="rows[employee.id].eveningFrom"
+                        :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isEveningLockedByAbsence(employee.id))"
+                    />
+                </div>
+                <div class="pr-2">
+                    <TimeSelect
+                        v-if="isTimeTracking(employee)"
+                        v-model="rows[employee.id].eveningTo"
+                        :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isEveningLockedByAbsence(employee.id))"
+                    />
+                </div>
+                <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">
+                    <div v-if="isTimeTracking(employee)">{{
+                            formatMinutes(getRowMetrics(employee.id).nightMinutes)
+                        }}
+                    </div>
+                </div>
+                <div class="text-sm font-semibold">
+                    <div v-if="isTimeTracking(employee)">{{
+                            formatMinutes(getRowMetrics(employee.id).totalMinutes)
+                        }}
+                    </div>
+                    <div v-else>{{ getPresenceDayValue(employee.id) }}</div>
+                </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 {HourRow} from './types'
+
+const rows = defineModel<Record<number, HourRow>>('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
+    isTimeTracking: (employee: Employee) => boolean
+    isPresenceTracking: (employee: Employee) => boolean
+    isRowLocked: (employeeId: number) => boolean
+    isHalfLockedByAbsence: (employeeId: number, half: 'AM' | 'PM') => boolean
+    isEveningLockedByAbsence: (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
+    getPresenceDayValue: (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/hours/HoursToolbar.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="py-6 flex flex-col gap-3">
+      <div class="flex gap-4">
+          <SiteFilterSelector v-if="sites.length > 0 && isAdmin" v-model="selectedSiteIds" :sites="sites" />
+          <div v-if="isAdmin" class="w-80 max-w-full">
+              <EmployeeNameFilterInput v-model="employeeFilter" />
+          </div>
+      </div>
+
+    <div class="flex justify-between items-center gap-4">
+      <div class="flex gap-4 flex-wrap">
+      <div
+        v-if="viewMode === 'day'"
+        class="inline-flex h-10 w-[320px] overflow-hidden rounded-md border border-primary-500 bg-white"
+      >
+        <button
+          type="button"
+          class="flex-1 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="shortcutButtonClass('yesterday')"
+          @click="emit('set-yesterday')"
+        >
+          Hier
+        </button>
+        <button
+          type="button"
+          class="flex-1 border-x border-primary-500 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="shortcutButtonClass('today')"
+          @click="emit('set-today')"
+        >
+          Aujourd'hui
+        </button>
+        <button
+          type="button"
+          class="flex-1 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="shortcutButtonClass('tomorrow')"
+          @click="emit('set-tomorrow')"
+        >
+          Demain
+        </button>
+      </div>
+
+      <div
+        v-else
+        class="inline-flex h-10 w-[320px] overflow-hidden rounded-md border border-primary-500 bg-white"
+      >
+        <button
+          type="button"
+          class="flex-1 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="weekShortcutButtonClass('previousWeek')"
+          @click="emit('set-previous-week')"
+        >
+          {{ getWeekShortcutLabel('previousWeek') }}
+        </button>
+        <button
+          type="button"
+          class="flex-1 border-x border-primary-500 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="weekShortcutButtonClass('thisWeek')"
+          @click="emit('set-this-week')"
+        >
+          {{ getWeekShortcutLabel('thisWeek') }}
+        </button>
+        <button
+          type="button"
+          class="flex-1 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="weekShortcutButtonClass('nextWeek')"
+          @click="emit('set-next-week')"
+        >
+          {{ getWeekShortcutLabel('nextWeek') }}
+        </button>
+      </div>
+
+      <PeriodStepperPicker
+        width-class="w-[320px]"
+        :label="formattedSelectedDate"
+        :picker-type="viewMode === 'week' ? 'week' : 'date'"
+        :picker-value="pickerValue"
+        prev-aria-label="Période précédente"
+        next-aria-label="Période suivante"
+        @prev="emit('shift-date', -1)"
+        @next="emit('shift-date', 1)"
+        @pick="onPickerValue"
+      />
+      </div>
+
+      <div v-if="isAdmin" class="inline-flex h-10 overflow-hidden rounded-md border border-primary-500 bg-white">
+        <button
+          type="button"
+          class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="viewModeButtonClass('day')"
+          @click="viewMode = 'day'"
+        >
+          <Icon name="mdi:calendar-clock" />
+          Jour
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center gap-2 border-l border-primary-500 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="viewModeButtonClass('week')"
+          @click="viewMode = 'week'"
+        >
+          <Icon name="mdi:calendar-week" />
+          Semaine
+        </button>
+      </div>
+    </div>
+
+    <div
+      v-if="isAdmin && viewMode === 'week' && absenceTypes.length > 0"
+      class="flex flex-wrap items-center gap-6"
+    >
+      <p class="font-bold">Légende :</p>
+      <div v-for="type in absenceTypes" :key="type.id" class="flex items-center gap-2">
+        <div :style="{ backgroundColor: type.color }" class="h-4 w-4 rounded"></div>
+        <p>{{ type.label }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Site } from '~/services/dto/site'
+import type { AbsenceType } from '~/services/dto/absence-type'
+import EmployeeNameFilterInput from '~/components/EmployeeNameFilterInput.vue'
+import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
+import PeriodStepperPicker from '~/components/PeriodStepperPicker.vue'
+import { weekInputValueToYmd, ymdToWeekInputValue } from '~/utils/date'
+
+const selectedDate = defineModel<string>('selectedDate', { required: true })
+const viewMode = defineModel<'day' | 'week'>('viewMode', { required: true })
+const selectedSiteIds = defineModel<number[]>('selectedSiteIds', { required: true })
+const employeeFilter = defineModel<string>('employeeFilter', { required: true })
+
+defineProps<{
+  isAdmin: boolean
+  sites: Site[]
+  absenceTypes: AbsenceType[]
+  formattedSelectedDate: string
+  shortcutButtonClass: (target: 'yesterday' | 'today' | 'tomorrow') => string
+  weekShortcutButtonClass: (target: 'previousWeek' | 'thisWeek' | 'nextWeek') => string
+  getWeekShortcutLabel: (target: 'previousWeek' | 'thisWeek' | 'nextWeek') => string
+}>()
+
+const emit = defineEmits<{
+  (e: 'set-yesterday'): void
+  (e: 'set-today'): void
+  (e: 'set-tomorrow'): void
+  (e: 'set-previous-week'): void
+  (e: 'set-this-week'): void
+  (e: 'set-next-week'): void
+  (e: 'shift-date', value: number): void
+}>()
+
+const pickerValue = computed(() => {
+  if (viewMode.value === 'week') return ymdToWeekInputValue(selectedDate.value)
+  return selectedDate.value
+})
+
+const viewModeButtonClass = (mode: 'day' | 'week') => {
+  if (viewMode.value === mode) {
+    return 'bg-primary-500 text-white'
+  }
+
+  return 'bg-white text-primary-500 hover:bg-tertiary-500'
+}
+
+const onPickerValue = (value: string) => {
+  if (!value) return
+
+  if (viewMode.value === 'week') {
+    const ymd = weekInputValueToYmd(value)
+    if (!ymd) return
+    selectedDate.value = ymd
+    return
+  }
+
+  selectedDate.value = value
+}
+</script>

frontend/components/hours/HoursWeekView.vue

@@ -0,0 +1,104 @@
+<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.label }}</span>
+        <span>Jour/Nuit <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>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-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 ?? ''"
+        >
+          <template v-if="row.trackingMode === 'PRESENCE'">{{ daily.present ?? 0 }}</template>
+          <template v-else>
+            <div>J {{ formatMinutes(daily.dayMinutes) }}</div>
+            <div>N {{ formatMinutes(daily.nightMinutes) }}</div>
+          </template>
+        </div>
+
+        <div class="font-semibold leading-4">
+          <template v-if="row.trackingMode === 'PRESENCE'">-</template>
+          <template v-else>
+            <div>J {{ formatMinutes(row.weeklyDayMinutes) }}</div>
+            <div>N {{ formatMinutes(row.weeklyNightMinutes) }}</div>
+          </template>
+        </div>
+        <div class="font-semibold">
+          {{ row.trackingMode === 'PRESENCE' ? (row.weeklyPresenceCount ?? 0) : formatMinutes(row.weeklyTotalMinutes) }}
+        </div>
+        <div class="font-semibold">
+          {{ row.trackingMode === 'PRESENCE' ? '-' : formatMinutes(row.weeklyOvertimeTotalMinutes ?? 0) }}
+        </div>
+        <div class="font-semibold">
+          {{ row.trackingMode === 'PRESENCE' || isInterimContract(row.contractType) ? '-' : formatMinutes(row.weeklyOvertime25Minutes ?? 0) }}
+        </div>
+        <div class="font-semibold">
+          {{ row.trackingMode === 'PRESENCE' || isInterimContract(row.contractType) ? '-' : formatMinutes(row.weeklyOvertime50Minutes ?? 0) }}
+        </div>
+        <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>
+</template>
+
+<script setup lang="ts">
+import type { WeeklyWorkHourSummary } from '~/services/dto/work-hour'
+import { CONTRACT_TYPES, type ContractType } from '~/services/dto/contract'
+
+const isInterimContract = (contractType?: ContractType | null) => {
+  return contractType === CONTRACT_TYPES.INTERIM
+}
+
+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; label: string }>
+  formatMinutes: (minutes: number) => string
+}>()
+</script>

frontend/components/hours/types.ts

@@ -0,0 +1,14 @@
+export type HourRow = {
+  workHourId: number | null
+  morningFrom: string
+  morningTo: string
+  afternoonFrom: string
+  afternoonTo: string
+  eveningFrom: string
+  eveningTo: string
+  isPresentMorning: boolean
+  isPresentAfternoon: boolean
+  isSiteValid: boolean
+  isValid: boolean
+  updatedAt: string | null
+}

frontend/components/ui/TimeSelect.vue

@@ -0,0 +1,253 @@
+<template>
+  <div ref="root" class="relative w-full">
+    <div
+      ref="trigger"
+      class="w-full flex items-center rounded-md border border-neutral-300 px-2 text-sm text-neutral-900 focus-within:border-primary-500"
+      :class="props.disabled ? 'cursor-not-allowed border-neutral-300 bg-neutral-200 text-neutral-500' : 'bg-white'"
+    >
+      <input
+        ref="inputRef"
+        v-model="inputValue"
+        type="text"
+        inputmode="numeric"
+        :placeholder="placeholder"
+        :disabled="props.disabled"
+        class="h-9 w-full bg-transparent px-1 outline-none disabled:cursor-not-allowed disabled:bg-neutral-200 disabled:text-neutral-500"
+        @focus="openMenu"
+        @keydown.down.prevent="openMenuAndFocusFirst"
+        @keydown.enter.prevent="commitInput"
+        @keydown.esc.prevent="closeMenu"
+        @input="onInput($event)"
+        @blur="onInputBlur"
+      />
+      <button
+        type="button"
+        tabindex="-1"
+        class="inline-flex h-8 w-8 items-center justify-center rounded text-neutral-600 hover:bg-tertiary-500 disabled:cursor-not-allowed disabled:bg-neutral-200 disabled:text-neutral-500"
+        :disabled="props.disabled"
+        @mousedown.prevent
+        @click="toggleOpen"
+      >
+        <Icon name="mdi:chevron-down" />
+      </button>
+    </div>
+  </div>
+  <Teleport to="body">
+    <div
+      v-if="isOpen"
+      ref="menu"
+      class="fixed z-[120] overflow-y-auto rounded-md border border-neutral-300 bg-white shadow-sm"
+      :style="menuStyle"
+    >
+      <button type="button" class="block w-full px-2 py-2 text-left text-sm hover:bg-tertiary-500" @click="selectValue('')">
+        {{ placeholder }}
+      </button>
+      <button
+        v-for="slot in filteredTimeSlots"
+        :key="slot"
+        type="button"
+        class="block w-full px-2 py-2 text-left text-sm hover:bg-tertiary-500"
+        @click="selectValue(slot)"
+      >
+        {{ slot }}
+      </button>
+      <p v-if="filteredTimeSlots.length === 0" class="px-2 py-2 text-sm text-neutral-500">
+        Aucun résultat
+      </p>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  modelValue: string
+  placeholder?: string
+  disabled?: boolean
+}>(), {
+  placeholder: '--',
+  disabled: false
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const trigger = ref<HTMLElement | null>(null)
+const menu = ref<HTMLElement | null>(null)
+const inputRef = ref<HTMLInputElement | null>(null)
+const isOpen = ref(false)
+const inputValue = ref('')
+const menuStyle = ref<Record<string, string>>({
+  top: '0px',
+  left: '0px',
+  width: '0px',
+  maxHeight: '224px'
+})
+
+const timeSlots = computed(() => {
+  const slots: string[] = []
+  for (let hour = 0; hour < 24; hour++) {
+    for (let minute = 0; minute < 60; minute += 15) {
+      slots.push(`${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`)
+    }
+  }
+  return slots
+})
+
+const filteredTimeSlots = computed(() => {
+  const query = inputValue.value.trim()
+  if (!query) return timeSlots.value
+  return timeSlots.value.filter((slot) => slot.includes(query))
+})
+
+const applyTimeMask = (value: string): string => {
+  const digits = value.replace(/\D/g, '').slice(0, 4)
+  if (digits.length <= 2) return digits
+  return `${digits.slice(0, 2)}:${digits.slice(2)}`
+}
+
+const normalizeTypedTime = (value: string): string | null => {
+  const trimmed = value.trim()
+  if (trimmed === '') return ''
+
+  // Accepte HH:MM ou H:MM puis normalise en HH:MM.
+  const match = trimmed.match(/^(\d{1,2}):(\d{2})$/)
+  if (!match) return null
+  const hours = Number(match[1])
+  const minutes = Number(match[2])
+  if (!Number.isInteger(hours) || !Number.isInteger(minutes)) return null
+  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return null
+  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`
+}
+
+const updateMenuPosition = () => {
+  const triggerEl = trigger.value
+  if (!triggerEl) return
+
+  const rect = triggerEl.getBoundingClientRect()
+  const menuHeight = 224
+  const belowTop = rect.bottom + 4
+  const aboveTop = Math.max(8, rect.top - menuHeight - 4)
+  const canOpenBelow = belowTop + menuHeight <= window.innerHeight - 8
+  const top = canOpenBelow ? belowTop : aboveTop
+
+  menuStyle.value = {
+    top: `${top}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+    maxHeight: `${menuHeight}px`
+  }
+}
+
+const toggleOpen = () => {
+  if (props.disabled) return
+  const next = !isOpen.value
+  isOpen.value = next
+  if (next) {
+    nextTick(updateMenuPosition)
+  }
+}
+
+const openMenu = () => {
+  if (props.disabled) return
+  if (!isOpen.value) {
+    isOpen.value = true
+    nextTick(updateMenuPosition)
+  }
+}
+
+const openMenuAndFocusFirst = () => {
+  openMenu()
+}
+
+const closeMenu = () => {
+  isOpen.value = false
+}
+
+const commitInput = () => {
+  const normalized = normalizeTypedTime(inputValue.value)
+  if (normalized === null || (normalized !== '' && !timeSlots.value.includes(normalized))) {
+    emit('update:modelValue', '')
+    inputValue.value = ''
+    closeMenu()
+    return
+  }
+  emit('update:modelValue', normalized)
+  inputValue.value = normalized
+  closeMenu()
+}
+
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const masked = applyTimeMask(target.value)
+  if (masked !== inputValue.value) {
+    inputValue.value = masked
+  }
+  openMenu()
+}
+
+const onInputBlur = () => {
+  // Laisse le temps au click menu de passer avant fermeture.
+  setTimeout(() => {
+    if (menu.value?.contains(document.activeElement)) return
+    commitInput()
+  }, 50)
+}
+
+const selectValue = (value: string) => {
+  if (props.disabled) return
+  emit('update:modelValue', value)
+  inputValue.value = value
+  isOpen.value = false
+  nextTick(() => inputRef.value?.focus())
+}
+
+const onDocumentClick = (event: MouseEvent) => {
+  const target = event.target as Node | null
+  if (!target) return
+  if (root.value?.contains(target) || menu.value?.contains(target)) return
+
+  isOpen.value = false
+}
+
+const onWindowChange = () => {
+  if (!isOpen.value) return
+  updateMenuPosition()
+}
+
+watch(isOpen, (open) => {
+  if (open) {
+    window.addEventListener('resize', onWindowChange)
+    window.addEventListener('scroll', onWindowChange, true)
+    nextTick(updateMenuPosition)
+  } else {
+    window.removeEventListener('resize', onWindowChange)
+    window.removeEventListener('scroll', onWindowChange, true)
+  }
+})
+
+watch(() => props.disabled, (disabled) => {
+  if (disabled) {
+    isOpen.value = false
+  }
+})
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    inputValue.value = value
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  document.addEventListener('click', onDocumentClick)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onDocumentClick)
+  window.removeEventListener('resize', onWindowChange)
+  window.removeEventListener('scroll', onWindowChange, true)
+})
+</script>

frontend/composables/useApi.ts

@@ -4,9 +4,14 @@ import { useAuthStore } from '~/stores/auth'
 
 export type AnyObject = Record<string, unknown>
 
+export type BlobResponse = {
+  data: Blob
+  headers: Headers
+}
+
 export type ApiClient = {
   get<T>(url: string, query?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
-  getBlob(url: string, query?: AnyObject, options?: ApiFetchOptions<'blob'>): Promise<Blob>
+  getBlob(url: string, query?: AnyObject, options?: ApiFetchOptions<'blob'>): Promise<BlobResponse>
   post<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
   put<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
   patch<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
@@ -16,6 +21,7 @@ export type ApiClient = {
 export type ApiFetchOptions<ResponseType extends 'json' | 'blob'> =
   FetchOptions<ResponseType> & {
     toast?: boolean
+    toastOn401?: boolean
     toastTitle?: string
     toastErrorMessage?: string
     toastSuccessMessage?: string
@@ -97,9 +103,31 @@ export const useApi = (): ApiClient => {
       }
     },
     async onResponseError({ response, error, options }) {
+      const apiOptions = options as ApiFetchOptions<'json'>
       if (response?.status === 401) {
         const requestUrl = typeof options?.url === 'string' ? options.url : ''
-        if (!requestUrl.includes('/login_check') && !requestUrl.includes('/logout')) {
+        const isLoginCheck = requestUrl.includes('/login_check')
+        const isLogout = requestUrl.includes('/logout')
+        const shouldToast401 = apiOptions?.toastOn401 === true && apiOptions?.toast !== false
+
+        if (shouldToast401) {
+          const errorKey = apiOptions?.toastErrorKey
+          const errorMessage =
+            errorKey ? (te(errorKey) ? t(errorKey) : errorKey) : ''
+          const extractedMessage = extractErrorMessage(error, response?._data)
+          const message =
+            apiOptions?.toastErrorMessage ||
+            errorMessage ||
+            extractedMessage ||
+            'Une erreur est survenue.'
+
+          toast.error({
+            title: apiOptions?.toastTitle ?? 'Erreur',
+            message
+          })
+        }
+
+        if (!isLoginCheck && !isLogout) {
           if (!isHandlingUnauthorized) {
             isHandlingUnauthorized = true
             auth.clearSession()
@@ -110,10 +138,10 @@ export const useApi = (): ApiClient => {
             isHandlingUnauthorized = false
           }
         }
+
         return
       }
 
-      const apiOptions = options as ApiFetchOptions<'json'>
       if (apiOptions?.toast === false) {
         return
       }
@@ -165,7 +193,9 @@ export const useApi = (): ApiClient => {
       return request<T>('GET', url, { ...options, query })
     },
     getBlob(url: string, query: AnyObject = {}, options: ApiFetchOptions<'blob'> = {}) {
-      return client<Blob>(url, { ...options, method: 'GET', query, responseType: 'blob' })
+      return client
+        .raw(url, { ...options, method: 'GET', query, responseType: 'blob' })
+        .then((res) => ({ data: res._data as Blob, headers: res.headers }))
     },
     post<T>(url: string, body: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
       return request<T>('POST', url, { ...options, body })

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

@@ -0,0 +1,101 @@
+import type { Employee } from '~/services/dto/employee'
+import { CONTRACT_TYPES } from '~/services/dto/contract'
+import { getEmployee } from '~/services/employees'
+
+export const useEmployeeDetailPage = () => {
+  const route = useRoute()
+  const employee = ref<Employee | null>(null)
+  const isLoading = ref(false)
+  const activeTab = ref<'contract' | 'leave' | 'rtt' | 'mileage' | 'bonus' | 'observation'>('contract')
+
+  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 '-'
+    if (contract.type === CONTRACT_TYPES.FORFAIT) return 'Forfait'
+    if (contract.weeklyHours !== null && contract.weeklyHours !== undefined) return `${contract.weeklyHours} heures`
+    return contract.name || '-'
+  })
+
+  const loadEmployee = async () => {
+    const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
+    const employeeId = Number(idParam)
+    if (!Number.isInteger(employeeId) || employeeId <= 0) {
+      return
+    }
+
+    isLoading.value = true
+    try {
+      employee.value = await getEmployee(employeeId)
+
+      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 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)
+
+  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 () => {
+    await contract.loadContracts()
+    await loadEmployee()
+  })
+
+  return {
+    employee,
+    isLoading,
+    activeTab,
+    showLeaveTab,
+    showRttTab,
+    employeeContractWorkLabel,
+    ...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/usePdfPrinter.ts

@@ -4,16 +4,17 @@ export const usePdfPrinter = () => {
     const api = useApi()
 
     const printPdf = async (url: string): Promise<void> => {
-        const blob = await api.getBlob(url);
+        const res = await api.getBlob(url);
+        const disposition = res.headers.get('content-disposition') || '';
+        const match = disposition.match(/filename="(.+?)"/i);
+        const filename = match?.[1] ?? 'document.pdf';
 
-        const pdfBlob = blob.type === 'application/pdf'
-            ? blob
-            : new Blob([blob], { type: 'application/pdf' });
+        const pdfBlob = res.data.type === 'application/pdf'
+            ? res.data
+            : new Blob([res.data], { type: 'application/pdf' });
 
         const blobUrl = URL.createObjectURL(pdfBlob);
 
-        const filename = `test.pdf`;
-
         const a = document.createElement('a');
         a.href = blobUrl;
         a.download = filename;

frontend/i18n/locales/fr.json

@@ -31,6 +31,26 @@
             "create": "Impossible de créer l'absence.",
             "update": "Impossible de mettre à jour l'absence.",
             "delete": "Impossible de supprimer l'absence."
+        },
+        "user": {
+            "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": {
@@ -57,6 +77,26 @@
             "create": "Absence créée.",
             "update": "Absence mise à jour.",
             "delete": "Absence supprimée."
+        },
+        "user": {
+            "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/auth.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen bg-tertiary-500 from-tertiary-50 via-white to-neutral-100 text-neutral-900">
+  <div class="min-h-screen bg-tertiary-500 from-tertiary-500 via-white to-neutral-100 text-neutral-900">
     <main class="mx-auto flex min-h-screen w-full max-w-[720px] items-center px-6 py-12">
       <slot />
     </main>

frontend/layouts/default.vue

@@ -2,62 +2,112 @@
     <div class="h-screen overflow-hidden">
         <div class="flex h-full">
             <aside class="flex h-full w-64 flex-shrink-0 flex-col border-r border-neutral-200 bg-tertiary-500">
-                <div>
+                <div class="h-[75px]">
                     <img src="/malio.png" alt="Logo" class="w-auto"/>
                 </div>
                 <nav class="flex-1 px-4 pb-6">
+                    <template v-if="isAdmin">
+                        <NuxtLink
+                            to="/calendar"
+                            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'
+                            : ''"
+                        >
+                            <Icon name="mdi:calendar-blank" size="24"/>
+                            <p>Calendrier</p>
+                        </NuxtLink>
+                    </template>
                     <NuxtLink
-                        to="/"
-                        class="flex items-center gap-3 px-4 pb-3 pt-6 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600 border-t border-secondary-500"
-                        active-class="bg-primary-50 text-primary-600"
+                        v-if="isAdmin || !isDriver"
+                        to="/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('/hours') ? 'bg-tertiary-500 text-primary-500 font-bold' : '',
+                            !isAdmin ? 'border-t border-secondary-500 pt-3' : ''
+                        ]"
                     >
-                        Tableau de bord
+                        <Icon name="mdi:clock-time-four-outline" size="24"/>
+                        <p>Heures</p>
                     </NuxtLink>
                     <NuxtLink
-                        to="/calendar"
-                        class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
-                        active-class="bg-primary-50 text-primary-600"
+                        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' : ''
+                        ]"
                     >
-                        Calendrier
+                        <Icon name="mdi:truck-outline" size="24"/>
+                        <p>Heures Conducteurs</p>
                     </NuxtLink>
+                    <template v-if="isAdmin">
+                        <NuxtLink
+                            to="/employees"
+                            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'
+                            : ''"
+                        >
+                            <Icon name="mdi:account-group-outline" size="24"/>
+                            <p>Employés</p>
+                        </NuxtLink>
+                        <NuxtLink
+                            to="/sites"
+                            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'
+                            : ''"
+                        >
+                            <Icon name="mdi:business" size="24"/>
+                            <p>Sites</p>
+                        </NuxtLink>
+                        <NuxtLink
+                            to="/absence-types"
+                            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'
+                            : ''"
+                        >
+                            <Icon name="mdi:umbrella-beach-outline" size="24"/>
+                            <p>Types d'absence</p>
+                        </NuxtLink>
+                        <NuxtLink
+                            to="/users"
+                            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'
+                            : ''"
+                        >
+                            <Icon name="mdi:account-outline" size="24"/>
+                            <p>Utilisateurs</p>
+                        </NuxtLink>
+                    </template>
                     <NuxtLink
-                        to="/employees"
-                        class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
-                        active-class="bg-primary-50 text-primary-600"
+                        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'
+                            : ''"
                     >
-                        Employés
-                    </NuxtLink>
-                    <NuxtLink
-                        to="/sites"
-                        class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
-                        active-class="bg-primary-50 text-primary-600"
-                    >
-                        Sites
-                    </NuxtLink>
-                    <NuxtLink
-                        to="/absence-types"
-                        class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
-                        active-class="bg-primary-50 text-primary-600"
-                    >
-                        Types d'absence
+                        <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">
-                    <button
-                        type="button"
-                        class="w-full rounded-lg px-4 py-2 text-md font-semibold text-white bg-primary-500"
-                        @click="handleLogout"
-                    >
-                        Déconnexion
-                    </button>
                     <p class="font-bold">v{{ version }}</p>
                 </div>
             </aside>
 
-            <main class="h-full flex-1 overflow-y-auto px-8 py-8">
-                <slot/>
-            </main>
+            <div class="h-full flex-1 overflow-hidden flex flex-col">
+                <AppTopNav :user="auth.user" />
+                <main class="flex-1 overflow-y-auto px-8 py-12">
+                    <slot/>
+                </main>
+            </div>
         </div>
     </div>
 </template>
@@ -65,9 +115,8 @@
 <script setup lang="ts">
 const auth = useAuthStore()
 const {version} = useAppVersion()
-
-const handleLogout = async () => {
-    await auth.logout()
-    await navigateTo('/login')
-}
+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/admin.ts

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

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/nuxt.config.ts

@@ -3,13 +3,16 @@ export default defineNuxtConfig({
     devtools: {enabled: false},
     ssr: false,
     app: {
-        baseURL: process.env.NUXT_PUBLIC_APP_BASE || '/'
+        baseURL: process.env.NODE_ENV === 'production'
+          ? (process.env.NUXT_PUBLIC_APP_BASE || '/')
+          : '/'
     },
     modules: [
-        '@nuxtjs/tailwindcss',
-        '@pinia/nuxt',
-        'nuxt-toast',
-        '@nuxtjs/i18n'
+      '@nuxtjs/tailwindcss',
+      '@pinia/nuxt',
+      'nuxt-toast',
+      '@nuxtjs/i18n',
+      '@nuxt/icon'
     ],
     runtimeConfig: {
         public: {
@@ -19,7 +22,7 @@ export default defineNuxtConfig({
     devServer: {port: 3001},
     toast: {
         settings: {
-            timeout: 10000,
+            timeout: 2000,
             closeOnClick: true,
             progressBar: false
         }

frontend/package-lock.json

@@ -7,6 +7,7 @@
             "name": "frontend",
             "hasInstallScript": true,
             "dependencies": {
+                "@nuxt/icon": "^2.2.1",
                 "@nuxtjs/i18n": "^10.2.1",
                 "@pinia/nuxt": "^0.11.3",
                 "nuxt": "^4.3.0",
@@ -32,6 +33,19 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/@antfu/install-pkg": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
+            "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
+            "license": "MIT",
+            "dependencies": {
+                "package-manager-detector": "^1.3.0",
+                "tinyexec": "^1.0.1"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
         "node_modules/@babel/code-frame": {
             "version": "7.29.0",
             "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
@@ -1220,6 +1234,47 @@
                 "url": "https://github.com/sponsors/nzakas"
             }
         },
+        "node_modules/@iconify/collections": {
+            "version": "1.0.651",
+            "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.651.tgz",
+            "integrity": "sha512-ALGlYxNVOIylxNHjFaylqPTzgNaMHeoFA8ao/piPHjYGD526xEp847F7KePy9jvOLChy2bzQVwAV9Em3HiicjQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@iconify/types": "*"
+            }
+        },
+        "node_modules/@iconify/types": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+            "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+            "license": "MIT"
+        },
+        "node_modules/@iconify/utils": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.1.0.tgz",
+            "integrity": "sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==",
+            "license": "MIT",
+            "dependencies": {
+                "@antfu/install-pkg": "^1.1.0",
+                "@iconify/types": "^2.0.0",
+                "mlly": "^1.8.0"
+            }
+        },
+        "node_modules/@iconify/vue": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
+            "integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
+            "license": "MIT",
+            "dependencies": {
+                "@iconify/types": "^2.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/cyberalien"
+            },
+            "peerDependencies": {
+                "vue": ">=3"
+            }
+        },
         "node_modules/@intlify/bundle-utils": {
             "version": "11.0.3",
             "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-11.0.3.tgz",
@@ -2372,6 +2427,28 @@
                 "devtools-wizard": "cli.mjs"
             }
         },
+        "node_modules/@nuxt/icon": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/@nuxt/icon/-/icon-2.2.1.tgz",
+            "integrity": "sha512-GI840yYGuvHI0BGDQ63d6rAxGzG96jQcWrnaWIQKlyQo/7sx9PjXkSHckXUXyX1MCr9zY6U25Td6OatfY6Hklw==",
+            "license": "MIT",
+            "dependencies": {
+                "@iconify/collections": "^1.0.641",
+                "@iconify/types": "^2.0.0",
+                "@iconify/utils": "^3.1.0",
+                "@iconify/vue": "^5.0.0",
+                "@nuxt/devtools-kit": "^3.1.1",
+                "@nuxt/kit": "^4.2.2",
+                "consola": "^3.4.2",
+                "local-pkg": "^1.1.2",
+                "mlly": "^1.8.0",
+                "ohash": "^2.0.11",
+                "pathe": "^2.0.3",
+                "picomatch": "^4.0.3",
+                "std-env": "^3.10.0",
+                "tinyglobby": "^0.2.15"
+            }
+        },
         "node_modules/@nuxt/kit": {
             "version": "4.3.0",
             "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.3.0.tgz",

frontend/package.json

@@ -11,6 +11,7 @@
         "build:dist": "nuxt generate && rm -rf dist && cp -R .output/public dist"
     },
     "dependencies": {
+        "@nuxt/icon": "^2.2.1",
         "@nuxtjs/i18n": "^10.2.1",
         "@pinia/nuxt": "^0.11.3",
         "nuxt": "^4.3.0",

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,46 +18,39 @@
       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_120px_1fr_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-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_120px_1fr_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="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)"
+          <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'"
             >
-              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>
+              {{ type.countAsWorkedHours ? 'Oui' : 'Non' }}
+            </span>
           </div>
         </div>
       </div>
@@ -94,6 +87,31 @@
             Le libellé est obligatoire.
           </p>
         </div>
+        <div>
+          <label class="text-md font-semibold text-neutral-700">
+            Compté comme travaillé
+          </label>
+          <div class="mt-2 flex items-center gap-6">
+            <label class="inline-flex items-center gap-2 text-md text-neutral-800">
+              <input
+                v-model="form.countAsWorkedHours"
+                type="radio"
+                class="h-4 w-4"
+                :value="true"
+              />
+              Oui
+            </label>
+            <label class="inline-flex items-center gap-2 text-md text-neutral-800">
+              <input
+                v-model="form.countAsWorkedHours"
+                type="radio"
+                class="h-4 w-4"
+                :value="false"
+              />
+              Non
+            </label>
+          </div>
+        </div>
         <div>
           <label class="text-md font-semibold text-neutral-700" for="color">
             Couleur <span class="text-red-600">*</span>
@@ -111,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>
@@ -136,6 +163,10 @@
 import type { AbsenceType } from '~/services/dto/absence-type'
 import { createAbsenceType, deleteAbsenceType, listAbsenceTypes, updateAbsenceType } from '~/services/absence-types'
 
+useHead({
+    title: 'Types d\'absences'
+})
+
 const isDrawerOpen = ref(false)
 const isSubmitting = ref(false)
 const isLoading = ref(false)
@@ -150,7 +181,8 @@ const drawerTitle = computed(() =>
 const form = reactive({
   code: '',
   label: '',
-  color: '#222783'
+  color: '#222783',
+  countAsWorkedHours: true
 })
 
 const validationTouched = reactive({
@@ -171,7 +203,7 @@ const showLabelError = computed(() => validationTouched.label && !isLabelValid.v
 const showColorError = computed(() => validationTouched.color && !isColorValid.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-primary-200'
+  '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 codeFieldClass = computed(() => {
   if (showCodeError.value) {
     return `${baseInputClass} border-red-500`
@@ -214,6 +246,7 @@ const resetForm = () => {
   form.code = ''
   form.label = ''
   form.color = '#222783'
+  form.countAsWorkedHours = true
 }
 
 const openCreate = () => {
@@ -227,6 +260,7 @@ const openEdit = (type: AbsenceType) => {
   form.code = type.code
   form.label = type.label
   form.color = type.color
+  form.countAsWorkedHours = type.countAsWorkedHours
   isDrawerOpen.value = true
 }
 
@@ -249,13 +283,15 @@ const handleSubmit = async () => {
       await updateAbsenceType(editingType.value.id, {
         code: form.code,
         label: form.label,
-        color: form.color
+        color: form.color,
+        countAsWorkedHours: form.countAsWorkedHours
       })
     } else {
       await createAbsenceType({
         code: form.code,
         label: form.label,
-        color: form.color
+        color: form.color,
+        countAsWorkedHours: form.countAsWorkedHours
       })
     }
 

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

@@ -1,68 +1,70 @@
 <template>
-    <div>
+    <div class="h-full flex flex-col overflow-hidden">
         <div class="flex flex-wrap items-center justify-between gap-4">
             <h1 class="text-4xl font-bold text-primary-500">Calendrier des absences</h1>
         </div>
-        <div class="flex items-center justify-between py-6">
-            <div class="flex items-center gap-4">
-                <div class="flex flex-wrap items-center gap-4 rounded-md border border-neutral-300 px-3 py-2">
-                    <div v-for="site in sites" :key="site.id" class="flex items-center gap-2">
-                        <div :style="{ backgroundColor: site.color }" class="h-4 w-4 rounded"></div>
-                        <label class="text-md" :for="`site-${site.id}`">{{ site.name }}</label>
-                        <input
-                            :id="`site-${site.id}`"
-                            v-model="selectedSiteIds"
-                            :value="site.id"
-                            type="checkbox"
-                            class="h-4 w-4"
-                        />
-                    </div>
+        <div class="flex flex-col gap-3 py-6">
+            <div class="flex items-center justify-between gap-4">
+                <div class="flex items-center gap-4">
+                    <SiteFilterSelector v-model="selectedSiteIds" :sites="sites"/>
+                </div>
+                <div class="flex gap-4">
+                    <button
+                        type="button"
+                        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
+                    </button>
+                    <button
+                        type="button"
+                        class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
+                        @click="openPrint"
+                    >
+                        Imprimer
+                    </button>
                 </div>
-                <select
-                    v-model="selectedMonth"
-                    class="h-10 rounded-md border border-neutral-300 bg-white px-3 text-md text-neutral-900"
-                >
-                    <option v-for="month in months" :key="month.value" :value="month.value">
-                        {{ month.label }}
-                    </option>
-                </select>
-                <select
-                    v-model="selectedYear"
-                    class="h-10 rounded-md border border-neutral-300 bg-white px-3 text-md text-neutral-900"
-                >
-                    <option v-for="year in years" :key="year" :value="year">
-                        {{ year }}
-                    </option>
-                </select>
             </div>
-            <div class="flex gap-4">
-                <button
-                    type="button"
-                    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
-                </button>
-                <button
-                    type="button"
-                    class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
-                    @click="openPrint"
-                >
-                    Imprimer
-                </button>
+            <div class="flex justify-between">
+                <div class="flex items-center gap-4">
+                    <div class="w-80">
+                        <EmployeeNameFilterInput v-model="employeeFilter"/>
+                    </div>
+                    <PeriodStepperPicker
+                        width-class="w-[260px]"
+                        :label="selectedMonthLabel"
+                        picker-type="month"
+                        :picker-value="monthPickerValue"
+                        prev-aria-label="Mois précédent"
+                        next-aria-label="Mois suivant"
+                        @prev="shiftMonth(-1)"
+                        @next="shiftMonth(1)"
+                        @pick="onMonthPickerValue"
+                    />
+                </div>
+            </div>
+            <div class="flex flex-wrap items-center gap-6 py-2">
+                <p class="font-bold">Légende :</p>
+                <div v-for="type in absenceTypes" :key="type.id" class="flex items-center gap-2">
+                    <div :style="{ backgroundColor: type.color }" class="h-4 w-4 rounded"></div>
+                    <p>{{ type.label }}</p>
+                </div>
             </div>
         </div>
 
-        <CalendarGrid
-            :days-in-month="daysInMonth"
-            :visible-employees="visibleEmployees"
-            :grid-style="gridStyle"
-            :get-cell-style="getCellStyle"
-            :get-cell-code="getCellCode"
-            :format-employee-name="formatEmployeeName"
-            :is-holiday-date="isHolidayDate"
-            @cell-click="openCreate"
-        />
+        <div class="flex-1 min-h-0">
+            <CalendarGrid
+                :days-in-month="daysInMonth"
+                :visible-employees="visibleEmployees"
+                :grid-style="gridStyle"
+                :get-cell-style="getCellStyle"
+                :get-cell-info="getCellInfo"
+                :format-employee-name="formatEmployeeName"
+                :is-holiday-date="isHolidayDate"
+                @cell-click="openCreate"
+                @reorder="handleReorder"
+            />
+        </div>
 
         <AbsenceFormDrawer
             v-model="isDrawerOpen"
@@ -79,6 +81,8 @@
         <AbsencePrintDrawer
             v-model="isPrintOpen"
             :sites="sites"
+            :contract-natures="contractNatureOptions"
+            :work-contracts="workContractOptions"
             :print-form="printForm"
             @submit="handlePrint"
             @cancel="closePrint"
@@ -90,15 +94,26 @@
 import type {Employee} from '~/services/dto/employee'
 import type {AbsenceType} from '~/services/dto/absence-type'
 import type {Absence} from '~/services/dto/absence'
-import {listEmployees} from '~/services/employees'
+import type {HalfDay} from '~/services/dto/half-day'
+import {HALF_DAYS} from '~/services/dto/half-day'
+import {listEmployees, updateEmployeeOrder} from '~/services/employees'
 import {listAbsenceTypes} from '~/services/absence-types'
 import {createAbsence, deleteAbsence, listAbsences, updateAbsence} from '~/services/absences'
 import {listPublicHolidays} from '~/services/public-holidays'
-import {getDaysInMonth, normalizeDate, toYmd} from '~/utils/date'
+import {getDaysInMonth, normalizeDate, parseYmd, toYmd} from '~/utils/date'
+import {compareEmployeesInSite, sortEmployeesBySiteAndOrder} from '~/utils/employee'
 import CalendarGrid from '~/components/CalendarGrid.vue'
 import AbsenceFormDrawer from '~/components/AbsenceFormDrawer.vue'
 import AbsencePrintDrawer from '~/components/AbsencePrintDrawer.vue'
+import EmployeeNameFilterInput from '~/components/EmployeeNameFilterInput.vue'
+import PeriodStepperPicker from '~/components/PeriodStepperPicker.vue'
+import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
 
+useHead({
+    title: 'Calendrier'
+})
+
+// Données principales affichées dans la grille.
 const employees = ref<Employee[]>([])
 const sites = computed(() => {
     const siteMap = new Map<number, { id: number; name: string; color: string }>()
@@ -107,9 +122,15 @@ const sites = computed(() => {
             siteMap.set(employee.site.id, employee.site)
         }
     }
-    return Array.from(siteMap.values()).sort((siteA, siteB) => siteA.name.localeCompare(siteB.name, 'fr'))
+    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')
+    })
 })
 
+// Filtres de sites (par défaut: tous sélectionnés à l'init).
 const selectedSiteIds = ref<number[]>([])
 const sitesInitialized = ref(false)
 
@@ -117,37 +138,40 @@ watch(sites, (next) => {
     if (sitesInitialized.value || next.length === 0) return
     selectedSiteIds.value = next.map((site) => site.id)
     sitesInitialized.value = true
-}, { immediate: true })
+}, {immediate: true})
 
+// Tri stable: site -> nom -> prénom.
 const sortedEmployees = computed(() => {
-  return [...employees.value].sort((employeeA, employeeB) => {
-    const siteNameA = employeeA.site?.name ?? ''
-    const siteNameB = employeeB.site?.name ?? ''
-    if (siteNameA !== siteNameB) return siteNameA.localeCompare(siteNameB, 'fr')
-        const lastNameA = employeeA.lastName ?? ''
-        const lastNameB = employeeB.lastName ?? ''
-        if (lastNameA !== lastNameB) return lastNameA.localeCompare(lastNameB, 'fr')
-        const firstNameA = employeeA.firstName ?? ''
-        const firstNameB = employeeB.firstName ?? ''
-    return firstNameA.localeCompare(firstNameB, 'fr')
-  })
+    return sortEmployeesBySiteAndOrder(employees.value)
 })
 
+// Employés visibles selon le filtre de sites.
+const employeeFilter = ref('')
+
 const visibleEmployees = computed(() => {
     if (selectedSiteIds.value.length === 0) return []
+    const filter = employeeFilter.value.trim().toLowerCase()
     return sortedEmployees.value.filter((employee) => {
-        return employee.site?.id && selectedSiteIds.value.includes(employee.site.id)
+        const siteOk = employee.site?.id && selectedSiteIds.value.includes(employee.site.id)
+        if (!siteOk) return false
+        if (!filter) return true
+        const first = employee.firstName?.toLowerCase() ?? ''
+        const last = employee.lastName?.toLowerCase() ?? ''
+        return first.includes(filter) || last.includes(filter)
     })
 })
+// Données de référence et absences du mois affiché.
 const absenceTypes = ref<AbsenceType[]>([])
 const absences = ref<Absence[]>([])
 const publicHolidays = ref<Record<string, string>>({})
 
+// États UI.
 const isDrawerOpen = ref(false)
 const isSubmitting = ref(false)
 const editingAbsence = ref<Absence | null>(null)
 const isPrintOpen = ref(false)
 
+// Sélecteurs de période.
 const now = new Date()
 const selectedMonth = ref(now.getMonth())
 const selectedYear = ref(now.getFullYear())
@@ -167,52 +191,82 @@ const months = [
     {value: 11, label: 'Décembre'}
 ]
 
-const years = Array.from({length: 5}, (unusedValue, index) => now.getFullYear() - 2 + index)
-
+const selectedMonthLabel = computed(() => `${months[selectedMonth.value]?.label ?? ''}`)
+const monthPickerValue = computed(() => `${selectedYear.value}-${String(selectedMonth.value + 1).padStart(2, '0')}`)
 
+// Infos de calendrier calculées.
 const daysInMonth = computed(() => getDaysInMonth(selectedYear.value, selectedMonth.value))
 const monthStartDate = computed(() => new Date(selectedYear.value, selectedMonth.value, 1))
 const monthEndDate = computed(() => new Date(selectedYear.value, selectedMonth.value + 1, 0))
 
+// Largeur fixe de la colonne employés + une colonne par jour.
 const gridStyle = computed(() => ({
     gridTemplateColumns: `160px repeat(${daysInMonth.value.length}, minmax(44px, 1fr))`
 }))
 
+// Formulaire d'absence (AM/PM par défaut = journée complète).
 const form = reactive({
     employeeId: '' as number | '',
     typeId: '' as number | '',
     startDate: '',
+    startHalf: 'AM' as HalfDay,
     endDate: '',
+    endHalf: 'PM' as HalfDay,
     comment: ''
 })
 
+// Formulaire d'impression (intervalle + sites).
 const printForm = reactive({
     from: '',
     to: '',
-    siteIds: [] as number[]
+    siteIds: [] as number[],
+    contractNatures: [] as Array<'CDI' | 'CDD' | 'INTERIM'>,
+    workContractIds: [] as number[]
 })
 
+const contractNatureOptions = [
+    { value: 'CDI' as const, label: 'CDI' },
+    { value: 'CDD' as const, label: 'CDD' },
+    { value: 'INTERIM' as const, label: 'Intérim' }
+]
 
+const workContractOptions = computed(() => {
+    const byId = new Map<number, { id: number; name: string }>()
+    for (const employee of employees.value) {
+        const contract = employee.contract
+        if (!contract?.id) continue
+        byId.set(contract.id, { id: contract.id, name: contract.name })
+    }
+    return Array.from(byId.values()).sort((a, b) => a.name.localeCompare(b.name, 'fr'))
+})
+
+// Remet le formulaire à zéro.
 const resetForm = () => {
     form.employeeId = ''
     form.typeId = ''
     form.startDate = ''
+    form.startHalf = 'AM'
     form.endDate = ''
+    form.endHalf = 'PM'
     form.comment = ''
 }
 
+// Ferme le drawer et nettoie l'état.
 const closeDrawer = () => {
     isDrawerOpen.value = false
     editingAbsence.value = null
     resetForm()
 }
 
+// Ouvre l'impression avec la période du mois courant.
 const openPrint = () => {
     const monthStart = toYmd(selectedYear.value, selectedMonth.value, 1)
     const monthEnd = toYmd(selectedYear.value, selectedMonth.value + 1, 0)
     printForm.from = monthStart
     printForm.to = monthEnd
     printForm.siteIds = [...selectedSiteIds.value]
+    printForm.contractNatures = contractNatureOptions.map((item) => item.value)
+    printForm.workContractIds = workContractOptions.value.map((item) => item.id)
     isPrintOpen.value = true
 }
 
@@ -220,12 +274,36 @@ const closePrint = () => {
     isPrintOpen.value = false
 }
 
-const parseYmd = (value: string) => {
-    const [year, month, day] = value.split('-').map(Number)
-    if (!year || !month || !day) return null
-    return new Date(year, month - 1, day)
+// Détermine si la journée est une demi-journée (AM/PM) ou complète.
+const getHalfForDate = (
+    startDate: string,
+    endDate: string,
+    startHalf: HalfDay,
+    endHalf: HalfDay,
+    date: string
+) => {
+    if (startDate === endDate) {
+        return startHalf === endHalf ? startHalf : null
+    }
+    if (date === startDate && startHalf === 'PM') return 'PM'
+    if (date === endDate && endHalf === 'AM') return 'AM'
+    return null
 }
 
+// Renvoie les segments occupés pour une date donnée (AM/PM).
+const getSegmentsForDate = (
+    startDate: string,
+    endDate: string,
+    startHalf: HalfDay,
+    endHalf: HalfDay,
+    date: string
+) => {
+    const half = getHalfForDate(startDate, endDate, startHalf, endHalf, date)
+    if (!half) return HALF_DAYS.map((item) => item.value) as HalfDay[]
+    return [half] as HalfDay[]
+}
+
+// Ajoute des mois tout en gardant un jour valide.
 const addMonths = (date: Date, months: number) => {
     const next = new Date(date.getFullYear(), date.getMonth() + months, date.getDate())
     if (next.getMonth() !== (date.getMonth() + months) % 12) {
@@ -234,6 +312,23 @@ const addMonths = (date: Date, months: number) => {
     return next
 }
 
+const shiftMonth = (delta: number) => {
+    const next = new Date(selectedYear.value, selectedMonth.value + delta, 1)
+    selectedYear.value = next.getFullYear()
+    selectedMonth.value = next.getMonth()
+}
+
+const onMonthPickerValue = (value: string) => {
+    if (!value) return
+    const [yearStr, monthStr] = value.split('-')
+    const year = Number(yearStr)
+    const month = Number(monthStr)
+    if (!Number.isInteger(year) || !Number.isInteger(month) || month < 1 || month > 12) return
+    selectedYear.value = year
+    selectedMonth.value = month - 1
+}
+
+// Limite l'intervalle d'impression à 2 mois max.
 const enforcePrintRange = () => {
     if (!printForm.from) return
     const start = parseYmd(printForm.from)
@@ -266,6 +361,7 @@ const enforcePrintRange = () => {
 watch(() => printForm.from, enforcePrintRange)
 watch(() => printForm.to, enforcePrintRange)
 
+// Chargements API.
 const loadEmployees = async () => {
     employees.value = await listEmployees()
 }
@@ -302,15 +398,17 @@ watch(selectedYear, async () => {
 
 // Indexation des absences par cellule pour eviter un find() a chaque case.
 const cellAbsenceMap = computed(() => {
-    const map = new Map<string, { id: number; code: string; color: string; textColor?: string }>()
+    const map = new Map<string, { id: number; code: string; color: string; halfLabel?: HalfDay; textColor?: string }>()
     const monthStart = monthStartDate.value
     const monthEnd = monthEndDate.value
 
     for (const absence of absences.value) {
         const employeeId = absence.employee?.id
         if (!employeeId) continue
-        const start = parseYmd(normalizeDate(absence.startDate))
-        const end = parseYmd(normalizeDate(absence.endDate))
+        const startDate = normalizeDate(absence.startDate)
+        const endDate = normalizeDate(absence.endDate)
+        const start = parseYmd(startDate)
+        const end = parseYmd(endDate)
         if (!start || !end) continue
 
         const rangeStart = start < monthStart ? monthStart : start
@@ -322,11 +420,20 @@ const cellAbsenceMap = computed(() => {
             currentDate <= rangeEnd;
             currentDate.setDate(currentDate.getDate() + 1)
         ) {
-            const key = `${employeeId}-${toYmd(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate())}`
+            const dateKey = toYmd(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate())
+            const key = `${employeeId}-${dateKey}`
+            const halfLabel = getHalfForDate(
+                startDate,
+                endDate,
+                absence.startHalf ?? 'AM',
+                absence.endHalf ?? 'PM',
+                dateKey
+            ) ?? undefined
             map.set(key, {
                 id: absence.id,
                 code: absence.type?.code ?? '',
-                color: absence.type?.color ?? '#222783'
+                color: absence.type?.color ?? '#222783',
+                halfLabel
             })
         }
     }
@@ -334,15 +441,17 @@ const cellAbsenceMap = computed(() => {
     return map
 })
 
+// Jours fériés (interdit pour la création).
 const isHolidayDate = (date: string) => {
     return Boolean(publicHolidays.value[date])
 }
 
+// Renvoie l'absence effective pour une cellule (ou un "Férié").
 const getCellAbsence = (employeeId: number, date: string) => {
     if (isHolidayDate(date)) {
         return {
             id: 0,
-            code: 'F',
+            code: 'Férié',
             color: '#b3e5fc',
             textColor: '#0f172a'
         }
@@ -352,20 +461,35 @@ const getCellAbsence = (employeeId: number, date: string) => {
     return null
 }
 
+// Style de cellule (plein ou demi-journée).
 const getCellStyle = (employeeId: number, date: string) => {
     const absence = getCellAbsence(employeeId, date)
     if (!absence) return undefined
 
+    if (absence.halfLabel) {
+        const color = absence.color
+        const textColor = absence.textColor ?? '#FFF'
+        const backgroundImage = absence.halfLabel === 'AM'
+            ? `linear-gradient(180deg, ${color} 0 50%, transparent 50% 100%)`
+            : `linear-gradient(180deg, transparent 0 50%, ${color} 50% 100%)`
+        return {
+            backgroundImage,
+            backgroundColor: 'transparent',
+            color: textColor
+        }
+    }
+
     return {
         backgroundColor: absence.color,
         color: absence.textColor ?? '#fff'
     }
 }
 
-const getCellCode = (employeeId: number, date: string) => {
-    return getCellAbsence(employeeId, date)?.code ?? ''
+const getCellInfo = (employeeId: number, date: string) => {
+    return getCellAbsence(employeeId, date)
 }
 
+// Ouverture du drawer depuis une cellule.
 const openCreate = (employee: Employee, date: string) => {
     if (isHolidayDate(date)) {
         window.alert("Impossible de creer une absence un jour ferie.")
@@ -384,12 +508,16 @@ const openCreate = (employee: Employee, date: string) => {
         form.typeId = existing.type.id
         form.startDate = normalizeDate(existing.startDate)
         form.endDate = normalizeDate(existing.endDate)
+        form.startHalf = existing.startHalf ?? 'AM'
+        form.endHalf = existing.endHalf ?? 'PM'
         form.comment = existing.comment ?? ''
     } else {
         editingAbsence.value = null
         form.employeeId = employee.id
         form.startDate = date
         form.endDate = date
+        form.startHalf = 'AM'
+        form.endHalf = 'PM'
         form.typeId = ''
         form.comment = ''
     }
@@ -397,6 +525,7 @@ const openCreate = (employee: Employee, date: string) => {
     isDrawerOpen.value = true
 }
 
+// Ouverture du drawer depuis le bouton "Ajouter".
 const openCreateFromToday = () => {
     editingAbsence.value = null
     form.employeeId = ''
@@ -409,10 +538,13 @@ const openCreateFromToday = () => {
     }
     form.startDate = today
     form.endDate = today
+    form.startHalf = 'AM'
+    form.endHalf = 'PM'
     form.comment = ''
     isDrawerOpen.value = true
 }
 
+// Vérifie la présence d'un férié dans l'intervalle.
 const hasHolidayInRange = (startDate: string, endDate: string) => {
     const start = parseYmd(startDate)
     const end = parseYmd(endDate)
@@ -430,6 +562,7 @@ const hasHolidayInRange = (startDate: string, endDate: string) => {
     return false
 }
 
+// Soumission du formulaire: validations + chevauchement + save.
 const handleSubmit = async () => {
     if (isSubmitting.value) return
 
@@ -437,8 +570,12 @@ const handleSubmit = async () => {
     try {
         const start = normalizeDate(form.startDate)
         const end = normalizeDate(form.endDate)
-        if (hasHolidayInRange(start, end)) {
-            window.alert("Impossible de creer une absence sur un jour ferie.")
+        if (start > end) {
+            window.alert("La date de fin ne peut pas etre avant la date de debut.")
+            return
+        }
+        if (start === end && form.startHalf === 'PM' && form.endHalf === 'AM') {
+            window.alert("La demi-journee de fin ne peut pas etre avant la demi-journee de debut.")
             return
         }
         const overlaps = absences.value.filter((absence) => {
@@ -446,7 +583,40 @@ const handleSubmit = async () => {
             if (editingAbsence.value && absence.id === editingAbsence.value.id) return false
             const aStart = normalizeDate(absence.startDate)
             const aEnd = normalizeDate(absence.endDate)
-            return start <= aEnd && end >= aStart
+            if (start > aEnd || end < aStart) return false
+
+            const overlapStart = start > aStart ? start : aStart
+            const overlapEnd = end < aEnd ? end : aEnd
+            const overlapStartDate = parseYmd(overlapStart)
+            const overlapEndDate = parseYmd(overlapEnd)
+            if (!overlapStartDate || !overlapEndDate) return false
+
+            for (
+                let currentDate = new Date(overlapStartDate.getTime());
+                currentDate <= overlapEndDate;
+                currentDate.setDate(currentDate.getDate() + 1)
+            ) {
+                const dateKey = toYmd(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate())
+                const existingSegments = getSegmentsForDate(
+                    aStart,
+                    aEnd,
+                    absence.startHalf ?? 'AM',
+                    absence.endHalf ?? 'PM',
+                    dateKey
+                )
+                const newSegments = getSegmentsForDate(
+                    start,
+                    end,
+                    form.startHalf,
+                    form.endHalf,
+                    dateKey
+                )
+                if (existingSegments.some((segment) => newSegments.includes(segment))) {
+                    return true
+                }
+            }
+
+            return false
         })
 
         if (overlaps.length > 0) {
@@ -466,7 +636,9 @@ const handleSubmit = async () => {
                 employeeId: Number(form.employeeId),
                 typeId: Number(form.typeId),
                 startDate: form.startDate,
+                startHalf: form.startHalf,
                 endDate: form.endDate,
+                endHalf: form.endHalf,
                 comment: form.comment
             })
         } else {
@@ -474,7 +646,9 @@ const handleSubmit = async () => {
                 employeeId: Number(form.employeeId),
                 typeId: Number(form.typeId),
                 startDate: form.startDate,
+                startHalf: form.startHalf,
                 endDate: form.endDate,
+                endHalf: form.endHalf,
                 comment: form.comment
             })
         }
@@ -486,6 +660,7 @@ const handleSubmit = async () => {
     }
 }
 
+// Suppression de l'absence en cours d'édition.
 const handleDelete = async () => {
     if (!editingAbsence.value) return
 
@@ -497,12 +672,14 @@ const handleDelete = async () => {
     await loadAbsences()
 }
 
+// Affiche "Prénom N.".
 const formatEmployeeName = (employee: Employee) => {
     const initial = employee.lastName ? `${employee.lastName[0].toUpperCase()}.` : ''
     return `${employee.firstName} ${initial}`.trim()
 }
 
-const { printPdf } = usePdfPrinter()
+// Impression PDF de l'intervalle sélectionné.
+const {printPdf} = usePdfPrinter()
 const handlePrint = async () => {
     const params = new URLSearchParams()
     params.set('from', printForm.from)
@@ -510,7 +687,45 @@ const handlePrint = async () => {
     if (printForm.siteIds.length > 0) {
         params.set('sites', printForm.siteIds.join(','))
     }
+    if (printForm.contractNatures.length > 0) {
+        params.set('contractNatures', printForm.contractNatures.join(','))
+    }
+    if (printForm.workContractIds.length > 0) {
+        params.set('workContracts', printForm.workContractIds.join(','))
+    }
     await printPdf(`/absences/print?${params.toString()}`)
     isPrintOpen.value = false
 }
+
+const handleReorder = async (payload: { dragId: number; dropId: number }) => {
+    const dragEmployee = employees.value.find((employee) => employee.id === payload.dragId)
+    const dropEmployee = employees.value.find((employee) => employee.id === payload.dropId)
+    if (!dragEmployee || !dropEmployee) return
+    const dragSiteId = dragEmployee.site?.id
+    const dropSiteId = dropEmployee.site?.id
+    if (!dragSiteId || !dropSiteId || dragSiteId !== dropSiteId) return
+
+    const siteEmployees = [...employees.value]
+        .filter((employee) => employee.site?.id === dragSiteId)
+        .sort(compareEmployeesInSite)
+
+    const fromIndex = siteEmployees.findIndex((employee) => employee.id === dragEmployee.id)
+    const toIndex = siteEmployees.findIndex((employee) => employee.id === dropEmployee.id)
+    if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) return
+
+    const [moved] = siteEmployees.splice(fromIndex, 1)
+    siteEmployees.splice(toIndex, 0, moved)
+
+    const updates: Array<{ id: number; displayOrder: number }> = []
+    siteEmployees.forEach((employee, index) => {
+        const nextOrder = index + 1
+        if ((employee.displayOrder ?? 0) !== nextOrder) {
+            updates.push({id: employee.id, displayOrder: nextOrder})
+        }
+        employee.displayOrder = nextOrder
+    })
+
+    if (updates.length === 0) return
+    await Promise.all(updates.map((update) => updateEmployeeOrder(update.id, update.displayOrder)))
+}
 </script>

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.vue

@@ -1,279 +0,0 @@
-<template>
-  <div>
-    <div class="flex items-center justify-between pb-12">
-      <h1 class="text-4xl font-bold text-primary-500">Employés</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="isDrawerOpen = true"
-      >
-        Ajouter un employé
-      </button>
-    </div>
-
-    <div
-      v-if="!isLoading && employees.length === 0"
-      class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600"
-    >
-      Aucun employé 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-[120px_1fr_1fr_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">Prénom</span>
-        <span class="text-left">Nom</span>
-        <span class="text-left">Site</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-for="employee in employees"
-          :key="employee.id"
-          class="grid grid-cols-[120px_1fr_1fr_200px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
-        >
-          <span>{{ employee.firstName }}</span>
-          <span>{{ employee.lastName }}</span>
-          <span>{{ employee.site?.name ?? '-' }}</span>
-          <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(employee)"
-            >
-              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(employee)"
-            >
-              Supprimer
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
-      <form class="space-y-4" @submit.prevent="handleSubmit">
-        <div>
-          <label class="text-md font-semibold text-neutral-700" for="first-name">
-            Prénom <span class="text-red-600">*</span>
-          </label>
-          <input
-            id="first-name"
-            v-model="form.firstName"
-            type="text"
-            :class="firstNameFieldClass"
-          />
-          <p v-if="showFirstNameError" class="mt-1 text-sm text-red-600">
-            Le prénom est obligatoire.
-          </p>
-        </div>
-        <div>
-          <label class="text-md font-semibold text-neutral-700" for="last-name">
-            Nom <span class="text-red-600">*</span>
-          </label>
-          <input
-            id="last-name"
-            v-model="form.lastName"
-            type="text"
-            :class="lastNameFieldClass"
-          />
-          <p v-if="showLastNameError" class="mt-1 text-sm text-red-600">
-            Le nom est obligatoire.
-          </p>
-        </div>
-        <div>
-          <label class="text-md font-semibold text-neutral-700" for="site">
-            Site <span class="text-red-600">*</span>
-          </label>
-          <select
-            id="site"
-            v-model="form.siteId"
-            :class="siteFieldClass"
-          >
-            <option value="">Aucun site</option>
-            <option v-for="site in sites" :key="site.id" :value="site.id">
-              {{ site.name }}
-            </option>
-          </select>
-          <p v-if="showSiteError" class="mt-1 text-sm text-red-600">
-            Le site est obligatoire.
-          </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="isDrawerOpen = false"
-          >
-            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="submitButtonClass"
-          >
-            Enregistrer
-          </button>
-        </div>
-      </form>
-    </AppDrawer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { Employee } from '~/services/dto/employee'
-import type { Site } from '~/services/dto/site'
-import { createEmployee, deleteEmployee, listEmployees, updateEmployee } from '~/services/employees'
-import { listSites } from '~/services/sites'
-
-const isDrawerOpen = ref(false)
-const isSubmitting = ref(false)
-const isLoading = ref(false)
-const editingEmployee = ref<Employee | null>(null)
-const drawerTitle = computed(() =>
-  editingEmployee.value ? 'Modifier un employé' : 'Ajouter un employé'
-)
-
-const employees = ref<Employee[]>([])
-const sites = ref<Site[]>([])
-
-const form = reactive({
-  firstName: '',
-  lastName: '',
-  siteId: '' as number | ''
-})
-
-const validationTouched = reactive({
-  firstName: false,
-  lastName: false,
-  siteId: false
-})
-
-const isFirstNameValid = computed(() => form.firstName.trim() !== '')
-const isLastNameValid = computed(() => form.lastName.trim() !== '')
-const isSiteValid = computed(() => form.siteId !== '')
-const isFormValid = computed(
-  () => isFirstNameValid.value && isLastNameValid.value && isSiteValid.value
-)
-
-const showFirstNameError = computed(
-  () => validationTouched.firstName && !isFirstNameValid.value
-)
-const showLastNameError = computed(
-  () => validationTouched.lastName && !isLastNameValid.value
-)
-const showSiteError = computed(
-  () => validationTouched.siteId && !isSiteValid.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-primary-200'
-const firstNameFieldClass = computed(() => {
-  if (showFirstNameError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
-})
-const lastNameFieldClass = computed(() => {
-  if (showLastNameError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
-})
-const siteFieldClass = computed(() => {
-  const baseSelectClass =
-    'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
-  if (showSiteError.value) {
-    return `${baseSelectClass} border-red-500`
-  }
-  return `${baseSelectClass} border-neutral-300`
-})
-
-const submitButtonClass = computed(() => {
-  if (isSubmitting.value || !isFormValid.value) {
-    return 'opacity-50 cursor-not-allowed'
-  }
-  return ''
-})
-
-const loadEmployees = async () => {
-  isLoading.value = true
-  try {
-    employees.value = await listEmployees()
-  } finally {
-    isLoading.value = false
-  }
-}
-
-const loadSites = async () => {
-  sites.value = await listSites()
-}
-
-onMounted(async () => {
-  await Promise.all([loadEmployees(), loadSites()])
-})
-
-const handleSubmit = async () => {
-  if (isSubmitting.value) return
-  validationTouched.firstName = true
-  validationTouched.lastName = true
-  validationTouched.siteId = true
-  if (!isFormValid.value) return
-
-  isSubmitting.value = true
-  try {
-    if (editingEmployee.value) {
-      await updateEmployee(editingEmployee.value.id, {
-        firstName: form.firstName,
-        lastName: form.lastName,
-        siteId: form.siteId === '' ? null : Number(form.siteId)
-      })
-    } else {
-      await createEmployee({
-        firstName: form.firstName,
-        lastName: form.lastName,
-        siteId: form.siteId === '' ? null : Number(form.siteId)
-      })
-    }
-
-    form.firstName = ''
-    form.lastName = ''
-    form.siteId = ''
-    editingEmployee.value = null
-    isDrawerOpen.value = false
-    await loadEmployees()
-  } finally {
-    isSubmitting.value = false
-  }
-}
-
-watch(isDrawerOpen, (isOpen) => {
-  if (!isOpen) {
-    validationTouched.firstName = false
-    validationTouched.lastName = false
-    validationTouched.siteId = false
-  }
-})
-
-const openEdit = (employee: Employee) => {
-  editingEmployee.value = employee
-  form.firstName = employee.firstName
-  form.lastName = employee.lastName
-  form.siteId = employee.site?.id ?? ''
-  isDrawerOpen.value = true
-}
-
-const confirmDelete = async (employee: Employee) => {
-  const ok = window.confirm(`Supprimer ${employee.firstName} ${employee.lastName} ?`)
-  if (!ok) return
-
-  await deleteEmployee(employee.id)
-  await loadEmployees()
-}
-</script>

frontend/pages/employees/[id].vue

@@ -0,0 +1,299 @@
+<template>
+    <div class="h-full overflow-hidden flex flex-col">
+
+        <div v-if="isLoading" class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+            Chargement...
+        </div>
+
+        <div v-else-if="!employee"
+             class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+            Employé introuvable.
+        </div>
+
+        <div v-else class="flex min-h-0 flex-1 flex-col">
+            <div class="flex items-center justify-between">
+                <div>
+                    <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">
+                    <p class="font-bold text-[22px]">{{ contractNatureLabel(employee.currentContractNature) }} {{ employeeContractWorkLabel }}</p>
+                    <p class="text-[18px]">{{ employee.site?.name ?? '-' }}</p>
+                </div>
+            </div>
+            <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"
+                        :class="activeTab === 'contract'
+                            ? 'border-primary-500 text-primary-500'
+                            : 'border-transparent text-primary-500/50 hover:text-primary-500'"
+                        @click="activeTab = 'contract'"
+                    >
+                        <Icon name="mdi:file-check-outline" size="24" class="align-self"/>
+                        Suivi contrat
+                    </button>
+                    <button
+                        v-if="showLeaveTab"
+                        class="pb-2 border-b-2 flex items-center gap-3"
+                        :class="activeTab === 'leave'
+                            ? 'border-primary-500 text-primary-500'
+                            : 'border-transparent text-primary-500/50 hover:text-primary-500'"
+                        @click="activeTab = 'leave'"
+                    >
+                        <Icon name="mdi:event-blank-outline" size="24" class="align-self"/>
+                        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'
+                            : 'border-transparent text-primary-500/50 hover:text-primary-500'"
+                        @click="activeTab = 'rtt'"
+                    >
+                        <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">
+                <EmployeesContractTab
+                    v-if="activeTab === 'contract'"
+                    class="h-full overflow-y-auto pr-1"
+                    :contract-history="contractHistory"
+                    :contract-nature-label="contractNatureLabel"
+                    :contract-history-label="contractHistoryLabel"
+                    :format-date="formatDate"
+                    :is-contract-submitting="isContractSubmitting"
+                    :can-close-current-contract="canCloseCurrentContract"
+                    :is-create-contract-submitting="isCreateContractSubmitting"
+                    :contracts="contracts"
+                    :can-create-contract="canCreateContract"
+                    :is-contract-drawer-open="isContractDrawerOpen"
+                    :contract-form="contractForm"
+                    :readonly-field-class="readonlyFieldClass"
+                    :close-contract-worked-hours-label="closeContractWorkedHoursLabel"
+                    :contract-end-date-field-class="contractEndDateFieldClass"
+                    :show-contract-end-date-error="showContractEndDateError"
+                    :is-contract-end-date-valid="isContractEndDateValid"
+                    :is-create-contract-drawer-open="isCreateContractDrawerOpen"
+                    :create-contract-form="createContractForm"
+                    :create-contract-nature-field-class="createContractNatureFieldClass"
+                    :create-contract-field-class="createContractFieldClass"
+                    :create-contract-start-date-field-class="createContractStartDateFieldClass"
+                    :shows-create-contract-end-date="showsCreateContractEndDate"
+                    :requires-create-contract-end-date="requiresCreateContractEndDate"
+                    :create-contract-end-date-field-class="createContractEndDateFieldClass"
+                    :is-create-contract-form-valid="isCreateContractFormValid"
+                    :on-open-close-contract-drawer="openCloseContractDrawer"
+                    :on-open-create-contract-drawer="openCreateContractDrawer"
+                    :on-update-contract-drawer-open="setContractDrawerOpen"
+                    :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"
+                />
+                <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,
+    activeTab,
+    contracts,
+    employeeAbsences,
+    leaveSummary,
+    rttSummary,
+    publicHolidays,
+    showLeaveTab,
+    showRttTab,
+    contractHistory,
+    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,
+    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}`
+        : 'Détail employé'
+}))
+</script>

frontend/pages/employees/index.vue

@@ -0,0 +1,556 @@
+<template>
+    <div class="flex-col">
+        <div class="shrink-0">
+            <div class="flex items-center justify-between">
+                <h1 class="text-4xl font-bold text-primary-500">Employés</h1>
+                <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-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>
+
+        <div
+            v-if="!isLoading && filteredEmployees.length === 0"
+            class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600"
+        >
+            Aucun employé pour le moment.
+        </div>
+
+        <div v-else class="grid gap-8 [grid-template-columns:repeat(auto-fill,minmax(260px,1fr))]">
+            <NuxtLink
+                v-for="employee in filteredEmployees"
+                :key="employee.id"
+                :to="`/employees/${employee.id}`"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="group relative min-h-[328px] overflow-hidden rounded-lg bg-tertiary-500 p-4 transition-all duration-200 hover:shadow-md"
+            >
+                <div class="flex flex-col items-center gap-7 transition-opacity duration-200 group-hover:opacity-0">
+                    <div class="rounded-full bg-primary-500 h-[175px] w-[175px] flex justify-center items-center text-white font-bold text-5xl">{{ employee.initials}}</div>
+                    <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>{{ employee.site?.name ?? '-' }}</p>
+                    </div>
+                </div>
+
+                <div
+                    class="absolute inset-0 flex items-center justify-center bg-primary-500 p-4 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+                    <div class="w-full rounded-md bg-white/15 p-4 text-sm">
+                        <p class="text-base font-semibold">{{ employee.lastName }} {{ employee.firstName }}</p>
+                        <p><strong>Type:</strong> {{ contractNatureLabel(employee.currentContractNature) }}</p>
+                        <p><strong>Temps de travail:</strong> {{ employee.contract?.name ?? '-' }}</p>
+                        <p><strong>Site:</strong> {{ employee.site?.name ?? '-' }}</p>
+                        <p><strong>Date d'entrée :</strong> {{ employee.entryDate ? employee.entryDate.split('-').reverse().join('/') : '-' }}</p>
+                    </div>
+                </div>
+            </NuxtLink>
+        </div>
+
+        <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
+            <form class="space-y-4" @submit.prevent="handleSubmit">
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="first-name">
+                        Prénom <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="first-name"
+                        v-model="form.firstName"
+                        type="text"
+                        :class="firstNameFieldClass"
+                    />
+                    <p v-if="showFirstNameError" class="mt-1 text-sm text-red-600">
+                        Le prénom est obligatoire.
+                    </p>
+                </div>
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="last-name">
+                        Nom <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="last-name"
+                        v-model="form.lastName"
+                        type="text"
+                        :class="lastNameFieldClass"
+                    />
+                    <p v-if="showLastNameError" class="mt-1 text-sm text-red-600">
+                        Le nom est obligatoire.
+                    </p>
+                </div>
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="site">
+                        Site <span class="text-red-600">*</span>
+                    </label>
+                    <select
+                        id="site"
+                        v-model="form.siteId"
+                        :class="siteFieldClass"
+                    >
+                        <option value="">Aucun site</option>
+                        <option v-for="site in sites" :key="site.id" :value="site.id">
+                            {{ site.name }}
+                        </option>
+                    </select>
+                    <p v-if="showSiteError" class="mt-1 text-sm text-red-600">
+                        Le site est obligatoire.
+                    </p>
+                </div>
+                <template v-if="!editingEmployee">
+                    <div>
+                        <label class="text-md font-semibold text-neutral-700" for="contract-nature">
+                            Type de contrat <span class="text-red-600">*</span>
+                        </label>
+                        <select
+                            id="contract-nature"
+                            v-model="form.contractNature"
+                            :class="contractNatureFieldClass"
+                        >
+                            <option value="CDI">CDI</option>
+                            <option value="CDD">CDD</option>
+                            <option value="INTERIM">Intérim</option>
+                        </select>
+                        <p v-if="showContractNatureError" class="mt-1 text-sm text-red-600">
+                            Le type de contrat est obligatoire.
+                        </p>
+                    </div>
+                    <div>
+                        <label class="text-md font-semibold text-neutral-700" for="contract">
+                            Temps de travail <span class="text-red-600">*</span>
+                        </label>
+                        <select
+                            id="contract"
+                            v-model="form.contractId"
+                            :class="contractFieldClass"
+                        >
+                            <option value="">Sélectionner un contrat</option>
+                            <option v-for="contract in contracts" :key="contract.id" :value="contract.id">
+                                {{ contract.name }}
+                            </option>
+                        </select>
+                        <p v-if="showContractError" class="mt-1 text-sm text-red-600">
+                            Le temps de travail est obligatoire.
+                        </p>
+                    </div>
+                    <div>
+                        <label class="text-md font-semibold text-neutral-700" for="contract-start-date">
+                            Début contrat <span class="text-red-600">*</span>
+                        </label>
+                        <input
+                            id="contract-start-date"
+                            v-model="form.contractStartDate"
+                            type="date"
+                            :class="contractStartDateFieldClass"
+                        />
+                        <p v-if="showContractStartDateError" class="mt-1 text-sm text-red-600">
+                            La date de début est obligatoire.
+                        </p>
+                    </div>
+                    <div v-if="showsContractEndDateComputed">
+                        <label class="text-md font-semibold text-neutral-700" for="contract-end-date">
+                            Fin contrat
+                            <span v-if="requiresContractEndDateComputed" class="text-red-600">*</span>
+                        </label>
+                        <input
+                            id="contract-end-date"
+                            v-model="form.contractEndDate"
+                            type="date"
+                            :class="contractEndDateFieldClass"
+                        />
+                        <p v-if="showContractEndDateError" class="mt-1 text-sm text-red-600">
+                            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
+                        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="isDrawerOpen = false"
+                    >
+                        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="submitButtonClass"
+                    >
+                        Enregistrer
+                    </button>
+                </div>
+            </form>
+        </AppDrawer>
+
+        <SalaryRecapDrawer
+            v-model="isSalaryRecapOpen"
+            @submit="handleSalaryRecapPrint"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {Contract} from '~/services/dto/contract'
+import type {Employee} from '~/services/dto/employee'
+import type {Site} from '~/services/dto/site'
+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'
+})
+
+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(() =>
+    editingEmployee.value ? 'Modifier un employé' : 'Ajouter un employé'
+)
+
+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()
+    return employees.value.filter((employee) => {
+        const siteId = employee.site?.id
+        if (!siteId || !selectedSiteIds.value.includes(siteId)) return false
+
+        if (contractStatusFilter.value === 'active' && !employee.hasActiveContract) return false
+        if (contractStatusFilter.value === 'inactive' && employee.hasActiveContract) return false
+
+        if (!filter) return true
+        const firstName = employee.firstName?.toLowerCase() ?? ''
+        const lastName = employee.lastName?.toLowerCase() ?? ''
+        return firstName.includes(filter) || lastName.includes(filter)
+    })
+})
+
+const form = reactive({
+    firstName: '',
+    lastName: '',
+    siteId: '' as number | '',
+    contractId: '' as number | '',
+    contractNature: 'CDI' as 'CDI' | 'CDD' | 'INTERIM',
+    contractStartDate: '',
+    contractEndDate: '',
+    isDriver: false
+})
+
+const validationTouched = reactive({
+    firstName: false,
+    lastName: false,
+    siteId: false,
+    contractId: false,
+    contractNature: false,
+    contractStartDate: false,
+    contractEndDate: false
+})
+
+const isFirstNameValid = computed(() => form.firstName.trim() !== '')
+const isLastNameValid = computed(() => form.lastName.trim() !== '')
+const isSiteValid = computed(() => form.siteId !== '')
+const isContractValid = computed(() => form.contractId !== '')
+const isContractNatureValid = computed(() => isContractNature(form.contractNature))
+const isContractStartDateValid = computed(() => form.contractStartDate !== '')
+const showsContractEndDateComputed = computed(() => showsContractEndDate(form.contractNature))
+const requiresContractEndDateComputed = computed(() => requiresContractEndDate(form.contractNature))
+const isContractEndDateValid = computed(() => {
+    if (!requiresContractEndDateComputed.value) return true
+    return form.contractEndDate !== ''
+})
+const isFormValid = computed(
+    () =>
+        isFirstNameValid.value &&
+        isLastNameValid.value &&
+        isSiteValid.value &&
+        (editingEmployee.value
+            ? true
+            : (isContractValid.value &&
+                isContractNatureValid.value &&
+                isContractStartDateValid.value &&
+                isContractEndDateValid.value))
+)
+
+const showFirstNameError = computed(
+    () => validationTouched.firstName && !isFirstNameValid.value
+)
+const showLastNameError = computed(
+    () => validationTouched.lastName && !isLastNameValid.value
+)
+const showSiteError = computed(
+    () => validationTouched.siteId && !isSiteValid.value
+)
+const showContractError = computed(
+    () => validationTouched.contractId && !isContractValid.value
+)
+const showContractNatureError = computed(
+    () => !editingEmployee.value && validationTouched.contractNature && !isContractNatureValid.value
+)
+const showContractStartDateError = computed(
+    () => !editingEmployee.value && validationTouched.contractStartDate && !isContractStartDateValid.value
+)
+const showContractEndDateError = computed(
+    () => !editingEmployee.value && validationTouched.contractEndDate && !isContractEndDateValid.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 firstNameFieldClass = computed(() => {
+    if (showFirstNameError.value) {
+        return `${baseInputClass} border-red-500`
+    }
+    return `${baseInputClass} border-neutral-300`
+})
+const lastNameFieldClass = computed(() => {
+    if (showLastNameError.value) {
+        return `${baseInputClass} border-red-500`
+    }
+    return `${baseInputClass} border-neutral-300`
+})
+const siteFieldClass = computed(() => {
+    const baseSelectClass =
+        'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
+    if (showSiteError.value) {
+        return `${baseSelectClass} border-red-500`
+    }
+    return `${baseSelectClass} border-neutral-300`
+})
+const contractFieldClass = computed(() => {
+    const baseClass =
+        'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
+    if (showContractError.value) {
+        return `${baseClass} border-red-500`
+    }
+    return `${baseClass} border-neutral-300`
+})
+const contractNatureFieldClass = computed(() => {
+    const baseClass =
+        'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
+    if (showContractNatureError.value) {
+        return `${baseClass} border-red-500`
+    }
+    return `${baseClass} border-neutral-300`
+})
+const contractStartDateFieldClass = computed(() => {
+    if (showContractStartDateError.value) {
+        return `${baseInputClass} border-red-500`
+    }
+    return `${baseInputClass} border-neutral-300`
+})
+const contractEndDateFieldClass = computed(() => {
+    if (showContractEndDateError.value) {
+        return `${baseInputClass} border-red-500`
+    }
+    return `${baseInputClass} border-neutral-300`
+})
+
+const submitButtonClass = computed(() => {
+    if (isSubmitting.value || !isFormValid.value) {
+        return 'opacity-50 cursor-not-allowed'
+    }
+    return ''
+})
+
+const loadEmployees = async () => {
+    isLoading.value = true
+    try {
+        employees.value = await listEmployees()
+    } finally {
+        isLoading.value = false
+    }
+}
+
+const loadSites = async () => {
+    sites.value = await listSites()
+}
+
+const loadContracts = async () => {
+    contracts.value = await listContracts()
+}
+
+onMounted(async () => {
+    await Promise.all([loadEmployees(), loadSites(), loadContracts()])
+    if (form.contractStartDate === '') {
+        form.contractStartDate = new Date().toISOString().slice(0, 10)
+    }
+})
+
+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})
+
+const handleSubmit = async () => {
+    if (isSubmitting.value) return
+    validationTouched.firstName = true
+    validationTouched.lastName = true
+    validationTouched.siteId = true
+    if (!editingEmployee.value) {
+        validationTouched.contractId = true
+        validationTouched.contractNature = true
+        validationTouched.contractStartDate = true
+        validationTouched.contractEndDate = true
+    }
+    if (!isFormValid.value) return
+
+    isSubmitting.value = true
+    try {
+        if (editingEmployee.value) {
+            await updateEmployee(editingEmployee.value.id, {
+                firstName: form.firstName,
+                lastName: form.lastName,
+                siteId: form.siteId === '' ? null : Number(form.siteId),
+                contractId: editingEmployee.value.contract?.id ?? Number(form.contractId)
+            })
+        } else {
+            await createEmployee({
+                firstName: form.firstName,
+                lastName: form.lastName,
+                siteId: form.siteId === '' ? null : Number(form.siteId),
+                contractId: Number(form.contractId),
+                contractNature: form.contractNature,
+                contractStartDate: form.contractStartDate,
+                contractEndDate: form.contractEndDate || null,
+                isDriverInput: form.isDriver
+            })
+        }
+
+        form.firstName = ''
+        form.lastName = ''
+        form.siteId = ''
+        form.contractId = ''
+        form.contractNature = 'CDI'
+        form.contractStartDate = new Date().toISOString().slice(0, 10)
+        form.contractEndDate = ''
+        form.isDriver = false
+        editingEmployee.value = null
+        isDrawerOpen.value = false
+        await loadEmployees()
+    } finally {
+        isSubmitting.value = false
+    }
+}
+
+watch(isDrawerOpen, (isOpen) => {
+    if (!isOpen) {
+        validationTouched.firstName = false
+        validationTouched.lastName = false
+        validationTouched.siteId = false
+        validationTouched.contractId = false
+        validationTouched.contractNature = false
+        validationTouched.contractStartDate = false
+        validationTouched.contractEndDate = false
+    }
+})
+
+watch(showsContractEndDateComputed, (shows) => {
+    if (!shows) {
+        form.contractEndDate = ''
+    }
+})
+
+const openEdit = (employee: Employee) => {
+    editingEmployee.value = employee
+    form.firstName = employee.firstName
+    form.lastName = employee.lastName
+    form.siteId = employee.site?.id ?? ''
+    isDrawerOpen.value = true
+}
+
+const openCreate = () => {
+    editingEmployee.value = null
+    form.firstName = ''
+    form.lastName = ''
+    form.siteId = ''
+    form.contractId = ''
+    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
+
+    await deleteEmployee(employee.id)
+    await loadEmployees()
+}
+</script>

frontend/pages/hours.vue

@@ -0,0 +1,193 @@
+<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</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="employees.length === 0" class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+            Aucun employé 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)]">
+                <HoursDayView
+                    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-time-tracking="isTimeTracking"
+                :is-presence-tracking="isPresenceTracking"
+                :is-row-locked="isRowLocked"
+                :is-half-locked-by-absence="isHalfLockedByAbsence"
+                :is-evening-locked-by-absence="isEveningLockedByAbsence"
+                :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"
+                :get-presence-day-value="getPresenceDayValue"
+                :on-absence-click="openAbsenceDrawer"
+                :format-minutes="formatMinutes"
+                class="max-h-[calc(100vh-300px)]"
+            />
+
+                <HoursWeekView
+                    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,
+  isSelectedDateHoliday,
+  weekGridCols,
+  saveButtonClass,
+  formattedSelectedDate,
+  weekDayHeaders,
+  shortcutButtonClass,
+  weekShortcutButtonClass,
+  getWeekShortcutLabel,
+  setToday,
+  setYesterday,
+  setTomorrow,
+  setThisWeek,
+  setPreviousWeek,
+  setNextWeek,
+  shiftDate,
+  contractLabel,
+  isTimeTracking,
+  isPresenceTracking,
+  isRowLocked,
+  isHalfLockedByAbsence,
+  isEveningLockedByAbsence,
+  hasContractAtSelectedDate,
+  isValidationPending,
+  isSiteValidationPending,
+  canToggleValidation,
+  canToggleSiteValidation,
+  canCreateSiteValidationRowFromAbsence,
+  isBulkValidationChecked,
+  isBulkValidationIndeterminate,
+  isBulkSiteValidationChecked,
+  isBulkSiteValidationIndeterminate,
+  canBulkToggleSiteValidation,
+  toggleValidation,
+  toggleSiteValidation,
+  toggleValidationBulk,
+  toggleSiteValidationBulk,
+  getRowMetrics,
+  getRowAbsenceLabel,
+  getRowAbsenceStyle,
+  getRowUpdatedAt,
+  getPresenceDayValue,
+  openAbsenceDrawer,
+  submitAbsence,
+  deleteAbsenceFromDrawer,
+  closeAbsenceDrawer,
+  formatMinutes,
+  handleSave
+} = useHoursPage()
+
+useHead({
+    title: 'Heures'
+})
+</script>

frontend/pages/index.vue

@@ -3,5 +3,7 @@
 </template>
 
 <script setup lang="ts">
-
+useHead({
+    title: 'Tableau de bord'
+})
 </script>

frontend/pages/login.vue

@@ -18,7 +18,7 @@
                     v-model="username"
                     type="text"
                     autocomplete="username"
-                    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-primary-200"
+                    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>
 
@@ -31,13 +31,13 @@
                     v-model="password"
                     type="password"
                     autocomplete="current-password"
-                    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-primary-200"
+                    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="submit"
-                class="w-full rounded-md bg-primary-500 px-4 py-2 text-base font-semibold text-white transition hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-60"
+                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="isSubmitting"
             >
                 Se connecter
@@ -49,6 +49,9 @@
 
 <script setup lang="ts">
 definePageMeta({layout: 'auth'})
+useHead({
+    title: 'Connexion'
+})
 
 const router = useRouter()
 const auth = useAuthStore()
@@ -63,10 +66,11 @@ const handleSubmit = async () => {
 
     isSubmitting.value = true
     try {
-        console.log(useRuntimeConfig().public.apiBase)
         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,22 +18,29 @@
       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="text-left">{{ site.name }}</span>
+          <span class="flex items-center gap-2 text-left">
+            <span class="select-none text-xs">::</span>
+            <span>{{ site.name }}</span>
+          </span>
           <div class="flex items-center gap-2 justify-start">
             <span
               class="inline-block h-3 w-3 rounded-full"
@@ -41,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>
@@ -91,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>
@@ -114,11 +114,16 @@
 
 <script setup lang="ts">
 import type { Site } from '~/services/dto/site'
-import { createSite, deleteSite, listSites, updateSite } from '~/services/sites'
+import { createSite, deleteSite, listSites, updateSite, updateSiteOrder } from '~/services/sites'
+
+useHead({
+    title: 'Sites'
+})
 
 const isDrawerOpen = ref(false)
 const isSubmitting = ref(false)
 const isLoading = ref(false)
+const isReordering = ref(false)
 
 const sites = ref<Site[]>([])
 const editingSite = ref<Site | null>(null)
@@ -142,7 +147,7 @@ const isFormValid = computed(() => isNameValid.value)
 const showNameError = computed(() => validationTouched.name && !isNameValid.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-primary-200'
+  '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 nameFieldClass = computed(() => {
   if (showNameError.value) {
     return `${baseInputClass} border-red-500`
@@ -207,7 +212,8 @@ const handleSubmit = async () => {
     } else {
       await createSite({
         name: form.name,
-        color: form.color
+        color: form.color,
+        displayOrder: sites.value.length + 1
       })
     }
 
@@ -231,4 +237,52 @@ const confirmDelete = async (site: Site) => {
   await deleteSite(site.id)
   await loadSites()
 }
+
+const handleDragStart = (event: DragEvent, site: Site) => {
+  if (isReordering.value || !event.dataTransfer) return
+  event.dataTransfer.effectAllowed = 'move'
+  event.dataTransfer.setData('text/plain', String(site.id))
+}
+
+const handleDragOver = (event: DragEvent) => {
+  event.preventDefault()
+}
+
+const handleDrop = async (event: DragEvent, site: Site) => {
+  event.preventDefault()
+  if (isReordering.value) return
+
+  const dragId = Number(event.dataTransfer?.getData('text/plain'))
+  if (!dragId || dragId === site.id) return
+
+  const fromIndex = sites.value.findIndex((item) => item.id === dragId)
+  const toIndex = sites.value.findIndex((item) => item.id === site.id)
+  if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) return
+
+  const reordered = [...sites.value]
+  const [moved] = reordered.splice(fromIndex, 1)
+  reordered.splice(toIndex, 0, moved)
+
+  const updates: Array<{ id: number; displayOrder: number }> = []
+  reordered.forEach((item, index) => {
+    const nextOrder = index + 1
+    if ((item.displayOrder ?? 0) !== nextOrder) {
+      updates.push({ id: item.id, displayOrder: nextOrder })
+    }
+    item.displayOrder = nextOrder
+  })
+
+  sites.value = reordered
+  if (updates.length === 0) return
+
+  isReordering.value = true
+  try {
+    await Promise.all(updates.map((update) => updateSiteOrder(update.id, update.displayOrder)))
+  } catch {
+    window.alert("Impossible de reordonner les sites.")
+    await loadSites()
+  } finally {
+    isReordering.value = false
+  }
+}
 </script>

frontend/pages/users.vue

@@ -0,0 +1,477 @@
+<template>
+  <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
+      </button>
+    </div>
+
+    <div
+      v-if="!isLoading && users.length === 0"
+      class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600"
+    >
+      Aucun utilisateur pour le moment.
+    </div>
+
+    <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-left">Statut</span>
+      </div>
+      <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500">
+        Chargement...
+      </div>
+      <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-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>{{ user.username }}</span>
+          <span>
+            {{ user.employee ? `${user.employee.firstName} ${user.employee.lastName}` : '-' }}
+          </span>
+          <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>
+        </div>
+      </div>
+    </div>
+
+    <AppDrawer
+      v-model="isDrawerOpen"
+      :title="editingUser ? 'Modifier un utilisateur' : 'Ajouter un utilisateur'"
+    >
+      <form class="space-y-4" @submit.prevent="handleSubmit">
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="username">
+            Nom d'utilisateur <span class="text-red-600">*</span>
+          </label>
+          <input
+            id="username"
+            v-model="form.username"
+            type="text"
+            :class="usernameFieldClass"
+          />
+          <p v-if="showUsernameError" class="mt-1 text-sm text-red-600">
+            Le nom d'utilisateur est obligatoire.
+          </p>
+        </div>
+
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="password">
+            Mot de passe
+            <span v-if="!editingUser" class="text-red-600">*</span>
+          </label>
+          <input
+            id="password"
+            v-model="form.password"
+            type="password"
+            :class="passwordFieldClass"
+          />
+          <p v-if="editingUser" class="mt-1 text-sm text-neutral-500">
+            Laisse vide pour ne pas changer le mot de passe.
+          </p>
+          <p v-else-if="showPasswordError" class="mt-1 text-sm text-red-600">
+            Le mot de passe est obligatoire.
+          </p>
+        </div>
+
+        <div>
+          <p class="text-md font-semibold text-neutral-700">Accès</p>
+          <div class="mt-2 flex flex-wrap gap-2">
+            <button
+              type="button"
+              class="rounded-full border px-3 py-1 text-sm font-semibold"
+              :class="form.accessMode === 'admin' ? 'border-primary-500 bg-tertiary-500 text-primary-500' : 'border-neutral-200 text-neutral-700'"
+              @click="selectAccessMode('admin')"
+            >
+              Admin
+            </button>
+            <button
+              type="button"
+              class="rounded-full border px-3 py-1 text-sm font-semibold"
+              :class="form.accessMode === 'self' ? 'border-primary-500 bg-tertiary-500 text-primary-500' : 'border-neutral-200 text-neutral-700'"
+              @click="selectAccessMode('self')"
+            >
+              Accès personnel
+            </button>
+            <button
+              type="button"
+              class="rounded-full border px-3 py-1 text-sm font-semibold"
+              :class="form.accessMode === 'sites' ? 'border-primary-500 bg-tertiary-500 text-primary-500' : 'border-neutral-200 text-neutral-700'"
+              @click="selectAccessMode('sites')"
+            >
+              Sites
+            </button>
+          </div>
+          <p class="mt-2 text-sm text-neutral-500">
+            {{
+              form.accessMode === 'admin'
+                ? 'Donne accès à tout.'
+                : form.accessMode === 'self'
+                  ? "Donne accès uniquement à ses propres données."
+                  : 'Donne accès aux employés des sites sélectionnés.'
+            }}
+          </p>
+        </div>
+
+        <div v-if="form.accessMode === 'self'">
+          <label class="text-md font-semibold text-neutral-700" for="employee">
+            Employé lié
+          </label>
+          <select
+            id="employee"
+            v-model="form.employeeId"
+            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+          >
+            <option value="">Aucun</option>
+            <option v-for="employee in employees" :key="employee.id" :value="employee.id">
+              {{ employee.firstName }} {{ employee.lastName }}
+            </option>
+          </select>
+          <p v-if="showSelfEmployeeError" class="mt-1 text-sm text-red-600">
+            Sélectionne un employé.
+          </p>
+        </div>
+
+        <div v-if="form.accessMode === 'sites'">
+          <p class="text-md font-semibold text-neutral-700">Sites autorisés</p>
+          <div class="mt-2 grid gap-2 sm:grid-cols-2">
+            <label
+              v-for="site in sites"
+              :key="site.id"
+              class="flex items-center gap-2 rounded-md border border-neutral-200 px-3 py-2 text-sm text-neutral-700 cursor-pointer"
+            >
+              <input
+                type="checkbox"
+                class="cursor-pointer"
+                :checked="form.siteIds.includes(site.id)"
+                @change="toggleSite(site.id)"
+              />
+              <span>{{ site.name }}</span>
+            </label>
+          </div>
+          <p v-if="showSitesError" class="mt-1 text-sm text-red-600">
+            Sélectionne au moins un site.
+          </p>
+        </div>
+
+        <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="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"
+          >
+            {{ editingUser ? 'Modifier' : '+ Ajouter' }}
+          </button>
+        </div>
+      </form>
+    </AppDrawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Employee } from '~/services/dto/employee'
+import type { Site } from '~/services/dto/site'
+import type { User } from '~/services/dto/user'
+import type { UserSiteRole } from '~/services/user-site-roles'
+import { listEmployees } from '~/services/employees'
+import { listSites } from '~/services/sites'
+import { createUser, listUsers, updateUser } from '~/services/users'
+import { createUserSiteRole, deleteUserSiteRole, listUserSiteRoles } from '~/services/user-site-roles'
+
+definePageMeta({ middleware: ['admin'] })
+useHead({
+    title: 'Utilisateurs'
+})
+
+const users = ref<User[]>([])
+const employees = ref<Employee[]>([])
+const sites = ref<Site[]>([])
+const userSiteRoles = ref<UserSiteRole[]>([])
+const isLoading = ref(false)
+const isDrawerOpen = ref(false)
+const isSubmitting = ref(false)
+const editingUser = ref<User | null>(null)
+
+const form = reactive({
+  username: '',
+  password: '',
+  accessMode: 'admin' as 'admin' | 'self' | 'sites',
+  employeeId: '' as number | '',
+  siteIds: [] as number[],
+  isLocked: false
+})
+
+const validationTouched = reactive({
+  username: false,
+  password: false,
+  sites: false,
+  selfEmployee: false
+})
+
+const isUsernameValid = computed(() => form.username.trim() !== '')
+const isPasswordValid = computed(() =>
+  editingUser.value ? true : form.password.trim() !== ''
+)
+const isFormValid = computed(() => isUsernameValid.value && isPasswordValid.value)
+const isSitesValid = computed(() => form.siteIds.length > 0)
+const isSelfEmployeeValid = computed(() => form.employeeId !== '')
+
+const showUsernameError = computed(
+  () => validationTouched.username && !isUsernameValid.value
+)
+const showPasswordError = computed(
+  () => validationTouched.password && !isPasswordValid.value
+)
+const showSitesError = computed(
+  () => validationTouched.sites && form.accessMode === 'sites' && !isSitesValid.value
+)
+const showSelfEmployeeError = computed(
+  () =>
+    validationTouched.selfEmployee &&
+    form.accessMode === 'self' &&
+    !isSelfEmployeeValid.value
+)
+
+const userAccessById = computed(() => {
+  const rolesByUser = new Map<number, UserSiteRole[]>()
+  for (const role of userSiteRoles.value) {
+    const userId = role.user?.id
+    if (!userId) continue
+    const list = rolesByUser.get(userId) ?? []
+    list.push(role)
+    rolesByUser.set(userId, list)
+  }
+
+  return rolesByUser
+})
+
+const getAccessLabel = (user: User) => {
+  if (user.roles.includes('ROLE_ADMIN')) return 'Admin'
+  if (user.roles.includes('ROLE_SELF')) return 'Self'
+  const siteRoles = userAccessById.value.get(user.id) ?? []
+  return siteRoles.length > 0 ? 'Sites' : 'Aucun'
+}
+
+const getSiteLabels = (user: User) => {
+  const siteRoles = userAccessById.value.get(user.id) ?? []
+  if (siteRoles.length === 0) return '-'
+  const names = siteRoles
+    .map((role) => role.site?.name)
+    .filter((name): name is string => Boolean(name))
+  return names.length > 0 ? names.join(', ') : 'Sites sélectionnés'
+}
+
+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 usernameFieldClass = computed(() => {
+  if (showUsernameError.value) {
+    return `${baseInputClass} border-red-500`
+  }
+  return `${baseInputClass} border-neutral-300`
+})
+const passwordFieldClass = computed(() => {
+  if (showPasswordError.value) {
+    return `${baseInputClass} border-red-500`
+  }
+  return `${baseInputClass} border-neutral-300`
+})
+
+const submitButtonClass = computed(() => {
+  if (isSubmitting.value || !isFormValid.value) {
+    return 'opacity-50 cursor-not-allowed'
+  }
+  return ''
+})
+
+const loadData = async () => {
+  isLoading.value = true
+  try {
+  const [usersData, employeesData, sitesData, userSiteRolesData] = await Promise.all([
+    listUsers(),
+    listEmployees(),
+    listSites(),
+    listUserSiteRoles()
+  ])
+  users.value = usersData
+  employees.value = employeesData
+  sites.value = sitesData
+  userSiteRoles.value = userSiteRolesData
+} finally {
+    isLoading.value = false
+  }
+}
+
+onMounted(loadData)
+
+const resetForm = () => {
+  form.username = ''
+  form.password = ''
+  form.employeeId = ''
+  form.accessMode = 'admin'
+  form.siteIds = []
+  form.isLocked = false
+  editingUser.value = null
+  validationTouched.username = false
+  validationTouched.password = false
+  validationTouched.sites = false
+  validationTouched.selfEmployee = false
+}
+
+const openCreate = () => {
+  resetForm()
+  isDrawerOpen.value = true
+}
+
+const openEdit = (user: User) => {
+  resetForm()
+  editingUser.value = user
+  form.username = user.username
+  form.password = ''
+
+  if (user.roles.includes('ROLE_ADMIN')) {
+    selectAccessMode('admin')
+  } else if (user.roles.includes('ROLE_SELF')) {
+    selectAccessMode('self')
+  } else {
+    selectAccessMode('sites')
+  }
+
+  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')
+  isDrawerOpen.value = true
+}
+
+const closeDrawer = () => {
+  isDrawerOpen.value = false
+  resetForm()
+}
+
+const selectAccessMode = (mode: 'admin' | 'self' | 'sites') => {
+  form.accessMode = mode
+  if (mode !== 'sites') {
+    form.siteIds = []
+  }
+}
+
+const toggleSite = (siteId: number) => {
+  if (form.siteIds.includes(siteId)) {
+    form.siteIds = form.siteIds.filter((existing) => existing !== siteId)
+  } else {
+    form.siteIds = [...form.siteIds, siteId]
+  }
+}
+
+const handleSubmit = async () => {
+  if (isSubmitting.value) return
+  validationTouched.username = true
+  validationTouched.password = true
+  validationTouched.sites = true
+  validationTouched.selfEmployee = true
+  if (!isFormValid.value) return
+  if (form.accessMode === 'sites' && !isSitesValid.value) return
+  if (form.accessMode === 'self' && !isSelfEmployeeValid.value) return
+
+  isSubmitting.value = true
+  try {
+    const roles =
+      form.accessMode === 'admin'
+        ? ['ROLE_ADMIN']
+        : form.accessMode === 'self'
+          ? ['ROLE_SELF']
+          : []
+
+    const employeeId =
+      form.accessMode === 'self' ? (form.employeeId === '' ? null : Number(form.employeeId)) : null
+
+    if (editingUser.value) {
+      await updateUser(editingUser.value.id, {
+        username: form.username,
+        plainPassword: form.password.trim() ? form.password : undefined,
+        roles,
+        employeeId,
+        isLocked: form.isLocked
+      })
+
+      const existingSiteRoles = userAccessById.value.get(editingUser.value.id) ?? []
+      if (existingSiteRoles.length > 0) {
+        await Promise.all(existingSiteRoles.map((role) => deleteUserSiteRole(role.id)))
+      }
+
+      if (form.accessMode === 'sites' && form.siteIds.length > 0) {
+        await Promise.all(
+          form.siteIds.map((siteId) =>
+            createUserSiteRole({
+              userId: editingUser.value!.id,
+              siteId,
+              role: 'SITE_ACCESS'
+            })
+          )
+        )
+      }
+    } else {
+      const created = await createUser({
+        username: form.username,
+        plainPassword: form.password,
+        roles,
+        employeeId,
+        isLocked: form.isLocked
+      })
+
+      if (form.accessMode === 'sites' && form.siteIds.length > 0) {
+        await Promise.all(
+          form.siteIds.map((siteId) =>
+            createUserSiteRole({
+              userId: created.id,
+              siteId,
+              role: 'SITE_ACCESS'
+            })
+          )
+        )
+      }
+    }
+
+    closeDrawer()
+    await loadData()
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>

frontend/services/absence-types.ts

@@ -12,7 +12,7 @@ export const listAbsenceTypes = async () => {
 }
 
 export const createAbsenceType = async (
-  payload: Pick<AbsenceType, 'code' | 'label' | 'color'>
+  payload: Pick<AbsenceType, 'code' | 'label' | 'color' | 'countAsWorkedHours'>
 ) => {
   const api = useApi()
   return api.post<AbsenceType>('/absence_types', payload, {
@@ -23,7 +23,7 @@ export const createAbsenceType = async (
 
 export const updateAbsenceType = async (
   id: number,
-  payload: Pick<AbsenceType, 'code' | 'label' | 'color'>
+  payload: Pick<AbsenceType, 'code' | 'label' | 'color' | 'countAsWorkedHours'>
 ) => {
   const api = useApi()
   return api.patch<AbsenceType>(`/absence_types/${id}`, payload, {

frontend/services/absences.ts

@@ -1,10 +1,12 @@
 import type { Absence } from './dto/absence'
+import type { HalfDay } from './dto/half-day'
 import { extractItems } from '~/utils/api'
 
 type ListAbsencesFilters = {
   from?: string
   to?: string
   siteIds?: number[]
+  employeeId?: number
 }
 
 export const listAbsences = async (filters: ListAbsencesFilters = {}) => {
@@ -19,6 +21,9 @@ export const listAbsences = async (filters: ListAbsencesFilters = {}) => {
   if (filters.siteIds && filters.siteIds.length > 0) {
     query['employee.site[]'] = filters.siteIds.map((id) => `/api/sites/${id}`)
   }
+  if (filters.employeeId) {
+    query.employee = `/api/employees/${filters.employeeId}`
+  }
   const data = await api.get<Absence[] | { 'hydra:member'?: Absence[] }>(
     '/absences',
     query,
@@ -31,7 +36,9 @@ export const createAbsence = async (payload: {
   employeeId: number
   typeId: number
   startDate: string
+  startHalf: HalfDay
   endDate: string
+  endHalf: HalfDay
   comment?: string
 }) => {
   const api = useApi()
@@ -39,7 +46,9 @@ export const createAbsence = async (payload: {
     employee: `/api/employees/${payload.employeeId}`,
     type: `/api/absence_types/${payload.typeId}`,
     startDate: payload.startDate,
+    startHalf: payload.startHalf,
     endDate: payload.endDate,
+    endHalf: payload.endHalf,
     comment: payload.comment
   }, {
     toastSuccessKey: 'success.absence.create',
@@ -52,7 +61,9 @@ export const updateAbsence = async (payload: {
   employeeId: number
   typeId: number
   startDate: string
+  startHalf: HalfDay
   endDate: string
+  endHalf: HalfDay
   comment?: string
 }) => {
   const api = useApi()
@@ -60,7 +71,9 @@ export const updateAbsence = async (payload: {
     employee: `/api/employees/${payload.employeeId}`,
     type: `/api/absence_types/${payload.typeId}`,
     startDate: payload.startDate,
+    startHalf: payload.startHalf,
     endDate: payload.endDate,
+    endHalf: payload.endHalf,
     comment: payload.comment
   }, {
     toastSuccessKey: 'success.absence.update',